Solid-Codemirror fournit un ensemble d'utilitaires pour faciliter l'intégration CodeMirror6 pour SOLIDJS.
Cette bibliothèque est initialement née pour être l'entrée du SolidJS Hackathon, mais est devenue l'éditeur de base de CodeImage.
# pnpm
> pnpm add solid-codemirror
# or yarn
> yarn add solid-codemirror
# or npm
> npm i solid-codemirrorRemarque Cette bibliothèque dépend de @ CodeMirror / State et @ CodeMirror / View v6.0.0. Ces bibliothèques sont signalées comme ** PeerDependances **. Il est recommandé d'installer manuellement les deux pour avoir plus de contrôle et de flexibilité pour la mise en œuvre
AVERTISSEZ Vous pouvez rencontrer cette erreur en utilisant VITE
Error: Unrecognized extension value in extension set ([object Object]).
This sometimes happens because multipleinstances of @codemirror/state are loaded,
breaking instanceof checks. Si @ CodeMirror / State et @ CodeMirror / View ne fonctionnent pas même si leur version n'est pas décontractée, vous pouvez essayer d'ajouter ce qui suit à votre fichier vite.config.{js,ts} :
export default defineConfig ( {
// Your configuration
optimizeDeps : {
// Add both @codemirror/state and @codemirror/view to included deps to optimize
include : [ '@codemirror/state' , '@codemirror/view' ] ,
}
} ) | codémireur solide | @ Codemirror / State | @ Codemiror / View | solide |
|---|---|---|---|
| > = 1.3.0 | ^ 6.2.0 | ^ 6.12.0 | ^ 1.7.0 |
| > = 1 <1.3.0 | ^ 6.0.0 | ^ 6.0.0 | ^ 1.6.0 |
Tout d'abord, nous devons créer une nouvelle instance CodeMirror via la fonction createCodeMirror . Ensuite, l'objet ref donné doit être attaché à un élément DOM afin d'initialiser l'instance EditorView avec son propre EditorState .
import { createCodeMirror } from "solid-codemirror" ;
import { createSignal , onMount } from "solid-js" ;
export const App = ( ) => {
const { editorView , ref : editorRef } = createCodeMirror ( {
/**
* The initial value of the editor
*/
value : "console.log('hello world!')" ,
/**
* Fired whenever the editor code value changes.
*/
onValueChange : ( value ) => console . log ( "value changed" , value ) ,
/**
* Fired whenever a change occurs to the document, every time the view updates.
*/
onModelViewUpdate : ( modelView ) => console . log ( "modelView updated" , modelView ) ,
/**
* Fired whenever a transaction has been dispatched to the view.
* Used to add external behavior to the transaction [dispatch function](https://codemirror.net/6/docs/ref/#view.EditorView.dispatch) for this editor view, which is the way updates get routed to the view
*/
onTransactionDispatched : ( tr : Transaction , view : EditorView ) => console . log ( "Transaction" , tr )
} ) ;
return < div ref = { editorRef } /> ;
} ; La fonction createCodeMirror est la fonction principale du solid-codemirror pour commencer à créer votre éditeur. Il expose les propriétés suivantes:
| Propriété | Description |
|---|---|
ref | L'objet htmlelement qui sera attaché à l'instance EditorView |
editorView | L'instance EditorView actuelle de CodeMirror. Sera null par défaut, et il sera apprécié lorsque la ref donnée sera montée dans le DOM |
createExtension | Une fonction pour créer une nouvelle extension pour CodeMirror à l'aide de compartiments. C'est un court-dictorial pour l'assistance createCompartmentExtension qui attache automatiquement la bonne instance EditorView |
https://codeMirror.net/docs/guide/
Codemirror est configuré comme une collection de modules distincts qui, ensemble, fournissent un texte complet et un éditeur de code. Du bon côté, cela signifie que vous pouvez choisir les fonctionnalités dont vous avez besoin, et même remplacer les fonctionnalités de base par une implémentation personnalisée si vous en avez besoin. Du côté moins brillant, cela signifie que la configuration d'un éditeur vous oblige à assembler un tas de pièces.
Comme le dit la documentation officielle, Codemirror6 est modulaire.
Solid-Codemirror ne remplacera pas tous les modules de CodeMirror6, mais essaiera de fournir uniquement les primitives nécessaires pour les intégrer dans SolidJS.
Chaque extension dont vous avez besoin pour développer votre éditeur doit être installée individuellement et intégré individuellement.
focused import { createCodeMirror , createEditorFocus } from 'solid-codemirror' ;
import { createSignal } from 'solid-js' ;
const { editorView } = createCodeMirror ( ) ;
const [ readOnly , setReadOnly ] = createSignal ( true ) ;
const {
focused ,
setFocused
} = createEditorFocus ( editorView , ( focused ) => console . log ( 'focus changed' , focused ) ) ;
// Focus
setFocused ( true ) ;
// Blur
setFocused ( false ) ; Une fois l'éditeur Codemirror monté, vous pouvez mettre à jour son état de lecture à l'aide de la fonction createReadonlyEditor qui accepte la vue de l'éditeur et l'accessoire en lecture.
Remarque Mise à jour de l'accessoire, l'éditeur ReadOnly State sera mis à jour automatiquement;
import { createCodeMirror , createEditorReadonly } from 'solid-codemirror' ;
import { createSignal } from 'solid-js' ;
function App ( ) {
const { ref , editorView } = createCodeMirror ( ) ;
const [ readOnly , setReadOnly ] = createSignal ( true ) ;
createEditorReadonly ( editorView , readonly ) ;
return < div ref = { ref } / >
} Une fois l'éditeur CodeMirror monté, vous pouvez contrôler l'état de code à l'aide du createEditorControlledValue .
Remarque La valeur de l'éditeur est déjà mémorisée
import { createCodeMirror , createEditorControlledValue } from 'solid-codemirror' ;
import { createSignal } from 'solid-js' ;
function App ( ) {
const [ code , setCode ] = createSignal ( "console.log('hello world!')" ) ;
const { ref , editorView } = createCodeMirror ( { onValueChange : setCode } ) ;
createEditorControlledValue ( editorView , code ) ;
// Update code after 2.5s
setTimeout ( ( ) => {
setCode ( "console.log('updated!')" ) ;
} , 2500 ) ;
return < div ref = { ref } / >
} Une fois l'éditeur CodeMirror monté, vous pouvez gérer les extensions personnalisées grâce à la fonction createExtension . Il accepte à la fois une Extension ou Accessor<Extension | undefined> alors il sera automatiquement reconfiguré lorsque l'extension changera. Sinon, vous pouvez les reconfigurer manuellement en utilisant la fonction reconfigure retournée.
Pour plus de détails, consultez la documentation officielle sur les compartiments.
import { createCodeMirror } from 'solid-codemirror' ;
import { createSignal } from 'solid-js' ;
import { EditorView , lineNumbers } from '@codemirror/view' ;
function App ( ) {
const [ code , setCode ] = createSignal ( "console.log('hello world!')" ) ;
const [ showLineNumber , setShowLineNumber ] = createSignal ( true ) ;
const { ref , createExtension } = createCodeMirror ( { onValueChange : setCode } ) ;
const theme = EditorView . theme ( {
'&' : {
background : 'red'
}
} ) ;
// Add a static custom theme
createExtension ( theme ) ;
// Toggle extension
createExtension ( ( ) => showLineNumber ( ) ? lineNumbers ( ) : [ ] ) ;
// Remove line numbers after 2.5s
setTimeout ( ( ) => {
setShowLineNumber ( false ) ;
} , 2500 ) ;
return < div ref = { ref } / >
}Parfois, vous devrez peut-être mieux diviser vos extensions personnalisées afin de réduire la taille initiale du bundle. C'est le cas où vous devez utiliser les importations dynamiques afin de résoudre le module en chargement paresseux.
// ✅ 1. Remove the static import
// import { largeExtension } from './large-extension';
import { createLazyCompartmentExtension } from './createLazyCompartmentExtension' ;
import { Show } from 'solid-js' ;
function App ( ) {
const [ code , setCode ] = createSignal ( "console.log('hello world!')" ) ;
const { ref , createExtension } = createCodeMirror ( { onValueChange : setCode } ) ;
// ✅ 2. Call the helper providing a Promise<Extension>
// The extension will be configured only after the Promise resolves
const largeExt = createLazyCompartmentExtension (
( ) => import ( './large-extension' ) . then ( res => res . largeExtension )
) ;
return (
< div >
< div ref = { ref } />
{ /*✅ 3. You can read the pending state of the Promise*/ }
< Show when = { largeExt . loading } >
Loading...
</ Show >
</ div >
)
} // WIP
Vous pouvez également afficher une implémentation avancée du solid-codemirror via la mise en œuvre de CodeImage
Licencié sous la licence du MIT.
