react simple code editor Download - react simple code editor Téléchargement du code source

react simple code editor

Autres ressources

Release 0.14.1

Télécharger

réagi-code-code-éditeur

Éditeur de code sans fioritures simples avec mise en évidence de la syntaxe.

Pourquoi

Plusieurs éditeurs de code basés sur un navigateur tels que Ace, Codemirror, Monaco, etc. offrent la possibilité d'intégrer un éditeur de code complet dans votre page Web. Cependant, si vous avez juste besoin d'un éditeur simple avec une syntaxe qui met en évidence sans aucune des fonctionnalités supplémentaires, ils peuvent être exagérés car ils n'ont généralement pas une petite empreinte de taille de bundle. Cette bibliothèque vise à fournir un éditeur de code simple avec une syntaxe qui met en évidence la prise en charge sans aucune des fonctionnalités supplémentaires, parfaite pour des intégres et des formulaires simples où les utilisateurs peuvent soumettre du code.

Caractéristiques

Syntaxe modulaire mettant en évidence avec une bibliothèque tierce
Ligne d'achat ou texte sélectionné en appuyant sur la touche Tab, avec une indentation personnalisable
Indent automatique sur les nouvelles lignes
Enveloppez le texte sélectionné dans les parens, les supports ou les citations
Annuler des mots entiers au lieu d'une lettre par lettre
Accessible, utilisez Ctrl+Shift+M (Mac) / Ctrl+M pour basculer la touche de tabulation de capture

Installation

npm install react-simple-code-editor

ou

yarn add react-simple-code-editor

Usage

Vous devez utiliser l'éditeur avec une bibliothèque tierce qui fournit une mise en évidence de la syntaxe. Par exemple, cela ressemblera à suivre avec 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 ,
      } }
    />
  ) ;
}

Notez que selon votre surligneur de syntaxe, vous devrez peut-être inclure des CSS supplémentaires pour la mise en évidence de la syntaxe pour fonctionner.

Accessoires

L'éditeur accepte tous les accessoires acceptés par textarea . De plus, vous pouvez passer les accessoires suivants:

value ( string ): valeur actuelle de l'éditeur, c'est-à-dire le code à afficher. Cela doit être un accessoire contrôlé.
onValueChange ( string => mixed ): rappel qui est appelé lorsque la valeur de l'éditeur change. Vous devrez mettre à jour la valeur de la valeur lorsque cela sera appelé.
highlight ( string => string | React.Node ): rappel qui recevra du texte à mettre en surbrillance. Vous devrez retourner une chaîne HTML ou un élément React avec la syntaxe en surbrillance à l'aide d'une bibliothèque telle que prismjs .
tabSize ( number ): le nombre de caractères à insérer lors de la touche de l'adhésion. Par exemple, pour 4 Space Indentation, tabSize sera 4 et insertSpaces sera true . Par défaut: 2 .
insertSpaces ( boolean ): s'il faut utiliser des espaces pour l'indentation. Par défaut: true . Si vous le définissez sur false , vous pouvez également définir tabSize sur 1 .
ignoreTabKey ( boolean ): si l'éditeur doit ignorer les appuyés sur la touche de l'abat afin que les utilisateurs de clavier puissent s'adapter à l'éditeur. Les utilisateurs peuvent basculer ce comportement en utilisant Ctrl+Shift+M (Mac) / Ctrl+M manuellement lorsque cela est false . Par défaut: false .
padding ( number ): rembourrage facultatif pour le code. Par défaut: 0 .
textareaId ( string ): un ID pour la textarea sous-jacent peut être utile pour définir une label .
textareaClassName ( string ): Un nom de classe pour la textarea sous-jacent peut être utile pour un contrôle plus précis de ses styles.
preClassName ( string ): un nom de classe pour le pre sous-jacent peut être utile pour un contrôle plus précis de ses styles.

Démo

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

Comment ça marche

Il fonctionne en superposant une syntaxe surlignée <pre> Block sur un <textarea> . Lorsque vous tapez, sélectionnez, copiez du texte, etc., vous interagissez avec le <textarea> sous-jacent, de sorte que l'expérience se sent native. Il s'agit d'une approche très simple par rapport aux autres éditeurs qui réimpliquent le comportement.

La mise en évidence de la syntaxe peut être effectuée par n'importe quelle bibliothèque tierce tant qu'elle renvoie HTML et est entièrement contrôlable par l'utilisateur.

Le vanille <textarea> ne prend pas en charge les caractères d'onglet d'insertion pour l'indentation, nous le réimplémentons donc en écoutant des événements keydown et en mettant à jour le texte. Une mise en garde avec une mise à jour programmatique du texte est que nous perdons la pile d'annulation, nous devons donc maintenir notre propre pile d'annulation. En conséquence, nous pouvons également implémenter un comportement d'annulation amélioré comme l'annulation de mots entiers similaires à des éditeurs comme VSCODE.

Limites

En raison de son fonctionnement, il a certaines limites:

Le code en surbrillance de syntaxe ne peut pas avoir une famille de polices, un poids de police, un style de police, une hauteur de ligne etc. pour son contenu. Étant donné que l'éditeur fonctionne en alignant le code en surbrillance sur un <textarea> , modifier tout ce qui affecte la mise en page peut le désaligner.
La pile d'annulation personnalisée est incompatible avec le menu contextuel du navigateur d'annulation / rénovation. Cependant, les autres éditeurs complets ne prennent pas non plus en charge les éléments de menu UNDO / REDO de Browser.
L'éditeur n'est pas optimisé pour les performances et les documents importants peuvent affecter la vitesse de typage.
Nous masquons du texte dans la TextArea en utilisant -webkit-text-fill-color: transparent , qui fonctionne dans tous les navigateurs modernes (même non-webkit tels que Firefox et Edge). Sur IE 10+, nous utilisons color: transparent qui ne cache pas le curseur. Le texte peut apparaître plus audacieux dans les navigateurs non pris en charge.