monacode

Monacode

Un mince emballage ES-module autour de l'éditeur de Monaco et plus joli

Exploration de la faisabilité d'importer le monaco-éditeur (qui alimente le code) et les modules plus jolis directement dans le navigateur; visant à rendre une ligne facile à apporter un natif comme des expériences d'édition de code aux applications Web sans étape de construction.

Expédite avec toutes les fonctionnalités généralement trouvées dans VS Code Out of the Box: des choses comme le code des conseils, tapez l'inférence, Minimap, Palette de commande, Sélectionner le multi-usines, trouver et remplacer, plier de code, etc.

En plus de ces fonctionnalités, plus jolie a été intégrée afin que la frappe ⌘ + s formara le code.

⚡️ Consultez la version hébergée à https://monacode.live

Usage

Installez le module en tant que module NPM et importez-le à l'aide du spécificateur de module nu, ou importez-le directement à partir d'UNPKG:

 import monacode from 'https://unpkg.com/monacode/index.min.js' ; // 976Kb brotli

// Create a new editor and attach to the document body
const editor = monacode ( {
  container : document . body ,
  value : 'const add = (x, y) => x + y;' ,
} ) ;

// Listen for changes within the editor
editor . getModel ( ) . onDidChangeContent ( ( change ) => {
  const newValue = editor . getValue ( ) ;
  console . log ( newValue ) ;
} ) ;

Il est également possible d'intégrer l'éditeur dans votre application à l'aide d'un iframe (voir démo):

 < iframe
  src =" https://monacode.live?theme=vs-light&value=console.log('hey') "
> </ iframe >

Passez des options de configuration dans le nom IFRAME en tant que paramètres de recherche d'URL, en vous assurant de coder correctement les valeurs. Veuillez noter cependant, il n'est actuellement pas possible de passer des options de configuration imbriquées.

API

Le module exporte une seule fonction par défaut qui accepte un objet config comme argument. La configuration fournie est fusionnée avec une configuration par défaut qui est elle-même un sous-ensemble des options disponibles pour configurer les éditeurs Moanco. Certaines valeurs utiles à savoir incluent:

• container : un élément HTML qui existe dans le DOM (ou une ref si vous utilisez React / Preact)
• value : une chaîne représentant le code initial à rendre dans l'éditeur
• language : une chaîne représentant la langue que l'éditeur devrait essayer la solution de syntaxe et le sujet pour
• fontSize : un nombre indiquant quel code de taille de police de pixel devrait rendre à
• theme : un identifiant de chaîne du thème souhaité ou une URL sur un fichier JSON de thème

L'appel de l'exportation par défaut renvoie une instance de l'éditeur de Monaco sous-jacent. En savoir plus sur la façon d'interagir avec l'éditeur en lisant la documentation de l'API.

Développement

L'exécution de la commande suivante à partir de la racine de ce projet utilise servor pour démarrer un serveur de développement, puis ouvrez votre éditeur et votre navigateur sur l'URL localhost appropriée.

npm start

Production

L'exécution de la commande suivante à partir de la racine de ce projet utilise esbuild Build the Source en un seul fichier index.min.js . Actuellement, ce processus prend ~ 1 seconde et se traduit par un fichier de sortie pesant 4,6 Mo (CommPress jusqu'à moins de 1 Mo avec Brotli).

npm run build

Licence

Licencié sous la licence du MIT.