react simple code editorダウンロード - react simple code editorソースコードダウンロード

react simple code editor

その他のリソース

Release 0.14.1

ダウンロード

React-Simple-Code-Editor

Syntax Highlightingを備えたシンプルなフリルコードエディター。

なぜ

ACE、Codemirror、Monacoなどのいくつかのブラウザベースのコードエディターは、Webページにフル機能のコードエディターを埋め込む機能を提供します。ただし、追加機能なしで構文を強調しているシンプルなエディターが必要な場合、通常は小さなバンドルサイズのフットプリントがないため、過剰になる可能性があります。このライブラリは、追加機能なしでサポートを強調表示する構文をシンプルなコードエディターに提供することを目的としています。これは、ユーザーがコードを送信できるシンプルな埋め込みやフォームに最適です。

特徴

サードパーティライブラリで強調表示されるモジュラー構文
カスタマイズ可能なインデントを備えたタブキーを押して、インデントラインまたは選択したテキスト
新しい線の自動インデント
選択したテキストをパレンズ、ブラケット、または引用符で包みます
手紙ではなく、単語全体を元に戻します
アクセス可能、 Ctrl+Shift+M （Mac） / Ctrl+Mを使用して、タブキーをキャプチャするトグル

インストール

npm install react-simple-code-editor

または

yarn add react-simple-code-editor

使用法

構文の強調表示を提供するサードパーティライブラリを備えたエディターを使用する必要があります。たとえば、 prismjsをフォローするように見えます。

 import React from 'react' ;
import Editor from 'react-simple-code-editor' ;
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism.css' ; //Example style, you can use another

function App ( ) {
  const [ code , setCode ] = React . useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < Editor
      value = { code }
      onValueChange = { code => setCode ( code ) }
      highlight = { code => highlight ( code , languages . js ) }
      padding = { 10 }
      style = { {
        fontFamily : '"Fira code", "Fira Mono", monospace' ,
        fontSize : 12 ,
      } }
    />
  ) ;
}

構文ハイライターによっては、構文の強調表示に追加のCSSを機能させる必要がある場合があることに注意してください。

小道具

編集者は、 textareaによって受け入れられたすべての小道具を受け入れます。さらに、次の小道具を渡すことができます。

value （ string ）：エディターの現在の値、つまり表示するコード。これは制御された小道具でなければなりません。
onValueChange （ string => mixed ）：エディターの値が変更されたときに呼び出されるコールバック。これが呼び出されたときに、Value Propを更新する必要があります。
highlight （ string => string | React.Node ）：ハイライトするテキストを受信するコールバック。 prismjsなどのライブラリを使用して、HTML文字列またはsyntaxを強調表示する反応要素を返す必要があります。
tabSize （ number ）：TABキーを押すときに挿入する文字の数。たとえば、4つのスペースインデントの場合、 tabSize 4になり、 insertSpaces trueになります。デフォルト： 2 。
insertSpaces （ boolean ）：インデントにスペースを使用するかどうか。デフォルト： true 。 falseに設定した場合は、 tabSize 1に設定することもできます。
ignoreTabKey （ boolean ）：エディターがタブキープレスを無視して、キーボードユーザーがエディターを通過できるようにするかどうか。ユーザーはCtrl+Shift+M （MAC） / Ctrl+Mを使用してこの動作をfalseことができます。デフォルト： false 。
padding （ number ）：コード用のオプションのパディング。デフォルト： 0 。
textareaId （ string ）：基礎となるtextareaのIDは、 labelの設定に役立ちます。
textareaClassName （ string ）：基礎となるtextareaのクラス名は、そのスタイルをより正確に制御するのに役立ちます。
preClassName （ string ）：基礎となるpreのクラス名は、そのスタイルをより正確に制御するために役立ちます。

デモ

React-simple-code-editor.github.io/ReaCt-simple-code-editor

それがどのように機能するか

これは、 <textarea>上で強調表示されている<pre>ブロックを強調する構文をオーバーレイすることで機能します。タイプ、選択、コピーなどを入力すると、基礎となる<textarea>と対話するため、エクスペリエンスはネイティブになります。これは、動作を再実装する他の編集者と比較して非常に簡単なアプローチです。

構文の強調表示は、HTMLを返し、ユーザーが完全に制御できる限り、サードパーティライブラリで実行できます。

Vanilla <textarea> 、インデントのためのタブ文字の挿入をサポートしていないため、 keydownイベントを聞いてテキストをプログラム的に更新することで再実装します。プログラムでテキストを更新することの1つの注意事項は、元に戻すスタックを失うことです。そのため、独自の元のスタックを維持する必要があります。その結果、VSCodeなどの編集者と同様の単語全体を元に戻すなど、改善された元に戻す動作を実装することもできます。

制限

動作のために、特定の制限があります。

構文強調表示されたコードは、コンテンツに対して異なるフォントファミリ、フォント重量、フォントスタイル、ラインの高さなどを持つことはできません。エディターは、強調表示されたコードを<textarea>に並べることで動作するため、レイアウトに影響するものを変更すると、誤って整理できます。
カスタム元に戻すスタックは、元に戻す/やり直しブラウザーのコンテキストメニューと互換性がありません。ただし、他のフルフィーチャーエディターは、ブラウザの元に戻す/やり直しメニュー項目もサポートしていません。
編集者はパフォーマンスのために最適化されておらず、大規模なドキュメントはタイピング速度に影響を与える可能性があります。
-webkit-text-fill-color: transparentを使用してTextareaにテキストを非表示にします。これは、すべての最新のブラウザー（FirefoxやEdgeなどの非ウェブキットのブラウザーでも機能します）で機能します。 IE 10+では、カーソルを非表示にしないcolor: transparentを使用します。テキストは、サポートされていないブラウザで大胆に見える場合があります。