react simple code editor

React-Simple-Code-Editor

Einfacher Code-Editor mit Syntax-Herd zum No-Frills-Code.

Warum

Mehrere browserbasierte Code-Editoren wie ACE, Codemirror, Monaco usw. bieten die Möglichkeit, einen Codeditor mit vollem Funktionsumfang in Ihre Webseite einzubetten. Wenn Sie jedoch nur einen einfachen Editor mit Syntax -Hervorhebung ohne die zusätzlichen Funktionen benötigen, können sie übertrieben werden, da sie normalerweise keinen kleinen Fußabdruck mit einer kleinen Bündelgröße haben. Diese Bibliothek zielt darauf ab, einen einfachen Code -Editor mit Syntax -Highlight -Support ohne zusätzliche Funktionen zu bieten, perfekt für einfache Einbettungen und Formulare, bei denen Benutzer Code einreichen können.

Merkmale

• Modulare Syntax -Hervorhebung der Bibliothek von Drittanbietern
• Einrückungszeile oder ausgewählter Text durch Drücken der Registerkarte Taste mit anpassungsfähiger Eindrückung
• Automatischer Einzug in neuen Linien
• Wickeln Sie ausgewählten Text in Parens, Klammern oder Zitaten ein
• Ganze Wörter statt Buchstaben nach Buchstaben rückgängig machen
• Ctrl+Shift+M zugänglich, Ctrl+M

Installation

npm install react-simple-code-editor

oder

yarn add react-simple-code-editor

Verwendung

Sie müssen den Editor mit einer Drittanbieterbibliothek verwenden, die eine Syntax -Hervorhebung bietet. Zum Beispiel wird es so aussehen, als würde man mit prismjs folgen:

 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 ,
      } }
    />
  ) ;
}

Beachten Sie, dass Sie je nach Syntax Highlighter möglicherweise zusätzliche CSS für die Arbeitssyntax -Hervorhebung einbeziehen müssen.

Requisiten

Der Herausgeber akzeptiert alle von textarea akzeptierten Requisiten. Zusätzlich können Sie die folgenden Requisiten übergeben:

• value ( string ): Der aktuelle Wert des Editors, dh der zu angezeigte Code. Dies muss eine kontrollierte Requisite sein.
• onValueChange ( string => mixed ): Rückruf, der aufgerufen wird, wenn sich der Wert des Editors ändert. Sie müssen die Wertschöpfung aktualisieren, wenn dies aufgerufen wird.
• highlight ( string => string | React.Node ): Rückruf, der Text zum Markieren empfängt. Sie müssen eine HTML -Zeichenfolge oder ein React -Element mit Syntax -Hervorhebung mit einer Bibliothek wie prismjs zurückgeben.
• tabSize ( number ): Die Anzahl der Zeichen, die beim Drücken der Registerkarte Taste einfügen sollen. Zum Beispiel wird für 4 Space Engitation tabSize 4 und insertSpaces true sein. Standard: 2 .
• insertSpaces ( boolean ): Ob Sie Räume für die Eindrückung verwenden möchten. Standard: true . Wenn Sie es auf false festlegen, möchten Sie möglicherweise auch tabSize auf 1 festlegen.
• ignoreTabKey ( boolean ): Ob der Editor die Registerkarten -Taste ignorieren sollte, damit die Tastaturbenutzer den Editor überschreiten können. Benutzer können dieses Verhalten unter Verwendung von Ctrl+Shift+M (MAC) / Ctrl+M manuell umschalten, wenn dies false ist. Standard: false .
• padding ( number ): Optionale Polsterung für Code. Standard: 0 .
• textareaId ( string ): Eine ID für die zugrunde liegende textarea kann zum Einstellen eines label nützlich sein.
• textareaClassName ( string ): Ein Klassenname für den zugrunde liegenden textarea kann für eine genauere Kontrolle der Stile nützlich sein.
• preClassName ( string ): Ein Klassenname für das zugrunde liegende pre kann für eine genauere Kontrolle der Stile nützlich sein.

Demo

react-simple-code-editor.github.io/react-simple-code-editor

Wie es funktioniert

Es funktioniert durch Überlagern einer von Syntax hervorgehobenen <pre> Block über einen <textarea> . Wenn Sie Text eingeben, auswählen, kopieren usw., interagieren Sie mit der zugrunde liegenden <textarea> , sodass sich die Erfahrung nativ anfühlt. Dies ist ein sehr einfacher Ansatz im Vergleich zu anderen Herausgebern, die das Verhalten erneut implementieren.

Die Syntax -Hervorhebung kann von einer beliebigen Bibliothek von Drittanbietern durchgeführt werden, solange sie HTML zurückgibt und vom Benutzer vollständig kontrollierbar ist.

Die Vanilla <textarea> unterstützt das Einfügen von Registerkarte für die Eindringung nicht. Daher implementieren wir sie erneut, indem wir keydown -Ereignisse anhören und den Text programmgesteuert aktualisieren. Eine Einschränkung mit programmatisch aktualisiertem Text ist, dass wir den Rückgängigungsstapel verlieren. Daher müssen wir unseren eigenen Rückgängerstapel beibehalten. Infolgedessen können wir auch ein verbessertes Rückgängigmachungsverhalten implementieren, z.

Einschränkungen

Aufgrund der Funktionsweise hat es bestimmte Einschränkungen:

• Der Syntax -hervorgehobene Code kann für ihren Inhalt keine unterschiedliche Schriftfamilie, Schriftgewicht, Schriftstil, Linienhöhe usw. haben. Da der Editor arbeitet, indem er den hervorgehobenen Code über einen <textarea> ausgerichtet ist, kann das Ändern von allem, was das Layout beeinflusst, ihn falsch ausrichten.
• Der kundenspezifische Rückgabestapel ist mit dem Kontextmenü des Browsers des Browsers inkompatibel. Auch andere vollständige Editoren der vollständigen vorgestellten Redakteure unterstützen die Menüelemente des Browsers/Redo -Menüpunkts nicht.
• Der Editor ist für die Leistung nicht optimiert und große Dokumente können die Schreibgeschwindigkeit beeinflussen.
• Wir verbergen Text im Textbereich mit -webkit-text-fill-color: transparent , das in allen modernen Browsern (sogar nicht-wirfkiten wie Firefox und Edge) funktioniert. Auf IE 10+ verwenden wir color: transparent , das den Cursor nicht versteckt. Text kann in nicht unterstützten Browsern mutiger erscheinen.

Beitragen

Während der Entwicklung können Sie die Beispiel -App ausführen, um Ihre Änderungen zu testen:

yarn example

Stellen Sie sicher, dass Ihr Code TypeScript und Eslint übergibt. Führen Sie Folgendes aus, um zu überprüfen:

yarn typescript
yarn lint

Führen Sie Folgendes aus, um Formatierungsfehler zu beheben:

yarn lint -- --fix