Intégrer un éditeur monégasque dans l’application React | de Jennifer Fu | décembre 2022

Un éditeur prenant en charge 78 langues, avec coloration syntaxique, auto-complétion, autocorrection, etc.

La Editeur monégasque est un éditeur de code basé sur un navigateur fourni par Microsoft. Il est sous licence MIT et est pris en charge dans Edge, Chrome, Firefox, Safari et Opera, mais il n’est pas pris en charge dans les navigateurs mobiles ou les frameworks Web. L’éditeur Monaco alimente Visual Studio Code, un IDE influent pour Windows, Linux et macOS.

Actuellement, l’éditeur de Monaco prend en charge 78 langues, avec la coloration syntaxique, la saisie semi-automatique, la correction automatique et bien d’autres fonctionnalités avancées. Il peut être utilisé pour créer un IDE aussi sophistiqué que Visual Studio Code ou en tant que code pour afficher un outil dans des applications Web.

Une application React peut se déployer monaco-editor directement ou importez des packages encapsulés dans React. Il existe deux forfaits populaires, @monaco-editor/react et react-monaco-editor.

react-monaco-editor est disponible depuis six ans, avec 3 036 étoiles. Il a été géré très activement. Cela nécessite des modifications de pack Web, ce qui n’est pas pratique pour certaines applications, telles que Create React App.

@monaco-editor/react est disponible depuis trois ans, avec 2 162 mises en chantier. Il a été géré assez activement. L’attrait de ce package est qu’il ne nécessite aucune modification autre que l’installation du package lui-même. Une application comme Create React App ne nécessite pas que l’application soit éjectée ou recâblée. Par défaut, il utilise CDN pour télécharger monaco-editor. Cependant, l’importation monaco-editor en tant que npm le paquet peut nécessiter des webpack plugins, comme monaco-editor-webpack-plugin.

À ce moment là, @monaco-editor/react est plus populaire. Nous le prendrons comme base pour intégrer un éditeur Monaco dans l’application Create React.

@monaco-editor/react est un éditeur monégasque pour React. Il utilise monaco-editor dans une application React sans avoir besoin de configurer des plugins ou de modifier les fichiers de configuration pour webpack, rollup, colis ou tout bundler.

L’éditeur de Monaco fournit un script appelé loader, qui fournit des outils pour télécharger les sources de monaco. La bibliothèque, appelée @monaco-editor/loader, gère la partie configuration et chargement. Il fournit également des API faciles à utiliser avec lesquelles interagir. Avec l’aide de loaderil suffit d’une ligne de code pour intégrer un Monaco Editor.

Voici package.json de @monaco-editor/react:

• À la ligne 22, il déclare une dépendance, @monaco-editor/loaderqui sera installé pour node_modules.
• Aux lignes 14 et 15, il déclare peerDependencies de react et react-dom. UN peerDependency déclare la version compatible du package. Si la peerDependency existe déjà dans node_modules avec la bonne version, rien ne se passera. Sinon, l’installation affiche un avertissement.
• A la ligne 13, @monaco-editor/react est également déclaré comme peerDependency. S’il n’existe pas, l’installation affichera l’avertissement suivant.

warning " > @monaco-editor/react@4.4.6" has unmet peer dependency "monaco-editor@>= 0.25.0 < 1".

Le code fonctionne sans @monaco-editor/react. Mais ça marche sans TypeScript définitions pour monaco-editor. Si vous voulez avoir des définitions de type à portée de main, monaco-editor doit être installé.

Nous allons intégrer un éditeur Monaco dans l’application Create React. La commande suivante crée un projet React :

% yarn create react-app react-monaco-editor
% cd react-monaco-editor

Nous installons @monaco-editor/react et monaco-editor.

% yarn add @monaco-editor/react monaco-editor

Après l’installation, ces packages font partie de dependencies dans package.json:

"dependencies": {
"@monaco-editor/react": "^4.4.6",
"monaco-editor": "^0.34.1"
}

L’environnement de travail est prêt.

En effet, il faut une ligne de code pour utiliser l’Editeur de Monaco si la ligne d’import ne compte pas.

Voici la modification src/App.js:

• A la ligne 1, Editor est importé de '@monaco-editor/react'.
• A la ligne 5, l’Editeur de Monaco est créé avec 100% hauteur de vue (vh). Il précise que language est javascriptet value est console.log('Hello, World!');.

Exécuter yarn startet Monaco Editor est intégré à l’application React, avec un contenu prédéfini.

Essayez de supprimer certains caractères dans l’éditeur ci-dessus et un message de validation s’affichera : Unterminated string literal.

Oui, l’éditeur a une capacité de validation.

IntelliSense est un terme général désignant diverses fonctionnalités d’édition de code, notamment la complétion de code, les informations sur les paramètres, les informations rapides et les listes de membres. IntelliSense les fonctionnalités disponibles dans Visual Studio Code sont également disponibles dans l’éditeur Monaco. Hors de la boîte, IntelliSense est prêt pour typescript, javascript, css, less, scss, jsonet html.

Actuellement, Monaco Editor prend en charge 78 langues, qui sont importées dans monaco.contribution.ts. La liste continue de s’allonger au fil du temps.

L’éditeur par défaut est modifiable avec des numéros de ligne. Fournissons un code plus long à intégrer dans src/App.js:

• Aux lignes 4 à 29, value est attribué avec le contenu de l’original src/App.js.
• A la ligne 32, value s’affiche dans l’éditeur.

Exécuter yarn start, et l’éditeur de Monaco affiche les numéros de ligne. Si vous essayez de modifier le code, il est modifiable.

Ajoutez l’accessoire, optionsPour l’éditeur.

<Editor
height="100vh"  
language="javascript"
value={value}
options={{ readOnly: true, lineNumbers: 'off' }}
/>

L’éditeur devient en lecture seule sans numéro de ligne.

Outre readonly et lineNumbersil y a beaucoup d’options dans l’interface, IEditorOptions.

Nous avons codé en dur value dans src/App.js ci-dessus, ce qui n’est pas une bonne pratique. L’une des options consiste à utiliser un téléchargeur de fichiers pour charger les fichiers de manière dynamique.

Voici la modification src/App.js:

• Aux lignes 4 à 6, le composant, FileUploaderest défini en utilisant <input type="file">qui est le champ de sélection de fichier avec un Choose File bouton pour les téléchargements de fichiers. Lors de la sélection d’un fichier, le onFileLoad fonction est déclenchée (ligne 5) pour setFile (ligne 24).
• À la ligne 9, l’état, fileest créé pour le fichier sélectionné.
• À la ligne 10, l’état, valueest créé pour le contenu du fichier sélectionné.
• Aux lignes 12 à 20, useEffect est déclenché sur file changements. Il crée un FileReader (ligne 14), lit le contenu du fichier (ligne 18) et setValue au contenu du fichier (ligne 16).
• A la ligne 24, FileUploader est ajouté.
• À la ligne 25, ajustez la hauteur de l’éditeur à 90vh.

Exécuter yarn startet cliquez sur le Choose File bouton pour charger l’application Create React src/index.js:

Le chargement dynamique n’est-il pas intéressant ?

Charger src/App.css:

Nous voyons beaucoup d’erreurs de syntaxe. Qu’est-ce qui ne va pas?

C’est parce que nous avons codé en dur language à javascript. Il doit être ajusté en fonction du type de fichier chargé. file a un name champ avec extension de fichier et un type champ. Une extension de fichier pourrait être 'js', 'css', 'html', 'json'etc. type champ pourrait être "text/javascript", "text/css", "text/html", "text/json"etc.

Nous utilisons des extensions de fichier pour définir le type de fichier. Voici la modification src/App.js:

• À la ligne 11, l’état, languageest créé pour la langue choisie, qui est utilisée à la ligne 34.
• Aux lignes 20 à 27, l’extension de fichier est évaluée pour générer newLanguagequi sert à setLanguage (ligne 27).

Charger src/App.css à nouveau, et il n’y a pas d’erreurs de syntaxe.

Charger public/index.html:

Bien qu’un Monaco Editor prenne en charge de nombreuses langues, vous souhaiterez peut-être créer votre propre langue. Nous montrons un exemple de la façon de le faire.

Comme nous l’avons mentionné @monaco-editor/loader gère la partie configuration et chargement, loader.init() gère l’ensemble du processus d’initialisation et renvoie l’instance de monaco. La Editor composant utilise cet utilitaire — accède à monaco et crée l’éditeur.

L’exemple suivant est adapté du site web du bureauqui active les couleurs pour un contenu spécifique dans un fichier journal.

• Aux lignes 4 à 40, il définit une fonction pour renvoyer le contenu du fichier journal.
• Aux lignes 43 à 119, useEffect appels loader.init() définir un nouveau langage, mySpecialLanguage.
  – A la ligne 46, la nouvelle langue est enregistrée.
  – Aux lignes 49 à 58, il définit quatre jetons basés sur des expressions régulières, custom-error (ligne 52), custom-notice (ligne 53), custom-info (ligne 54), et custom-date (ligne 55).
  – Aux lignes 61 à 73, il définit le myCoolTheme thème qui contient des règles pour la langue, custom-info est gris (#808080 ligne 65), custom-error est rouge (#FF0000) et bold (ligne 66), custom-notice est orange (#ffa500ligne 67), custom-date est vert (#008800ligne 68), et la couleur par défaut est le noir (#000000ligne 71).
  – Aux lignes 76 à 108, il enregistre des raccourcis d’auto-complétion, simpleText (lignes 79 à 83), testing (lignes 84 à 90), et ifelse (lignes 91 à 104).
  – Aux lignes 110–117, il crée l’éditeur avec le thème spécifié (myCoolThemeligne 113), valeur (getCode()ligne 114) et la langue (mySpecialLanguage, ligne 115). La condition à la ligne 111 garantit que l’éditeur est ajouté une fois.
• À la ligne 121, il crée le container div avec la hauteur de 100vh.

Exécuter yarn startet nous voyons le fichier journal coloré dans l’éditeur.

Cet exemple enregistre certains raccourcis d’auto-complétion, simpleText, testinget ifelse. La vidéo suivante montre comment cela fonctionne :

L’éditeur de Monaco propose un éditeur de diff qui compare deux fichiers. L’utilisation est simple.

Voici la modification src/App.js:

• A la ligne 1, DiffEditor est importé de '@monaco-editor/react'.
• Aux lignes 5 à 9, DiffEditor est utilisé, avec les accessoires de la original et modified Contenu.

Exécuter yarn startet nous voyons le code diff.

Nous avons intégré un éditeur Monaco dans l’application React. Il prend en charge presque toutes les langues populaires, avec la coloration syntaxique. Pour typescript, javascript, css, less, scss, jsonet htmlil offre IntelliSense qui inclut l’achèvement du code, les informations sur les paramètres, les informations rapides et les listes de membres. De plus, nous pouvons créer notre propre langage pour des fonctionnalités supplémentaires, telles que les thèmes de couleur, la saisie semi-automatique et la correction automatique.

Nous avons montré des exemples d’affichage d’un fichier de code dur dans Editorun fichier chargé dynamiquement dans Editoret deux fichiers dans DiffEditor.

Merci d’avoir lu.

Merci, S Sreeram et Siddhartha Chinthapally, d’avoir travaillé avec moi sur Monaco Editor.

Want to Connect?
If you are interested, check out my directory of web development articles.