Solid-codeMirror proporciona un conjunto de utilidades para facilitar la integración de CodeMirror6 para SOLLIDJS.
Inicialmente, esta biblioteca nació para ser la entrada del Hackathon SolidJS, pero se ha convertido en el editor principal de CodeImage.
# pnpm
> pnpm add solid-codemirror
# or yarn
> yarn add solid-codemirror
# or npm
> npm i solid-codemirrorNota Esta biblioteca depende de @codemirror/state y @codemirror/ver v6.0.0. Estas bibliotecas se marcan como ** Peerdependencias **. Se recomienda instalarlos manualmente a ambos para tener más control y flexibilidad para la implementación.
Advertencia que puede encontrar este error usando 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 y @codemirror/ver no funcionan incluso si su versión no es un desajuste, puede intentar agregar lo siguiente a su vite.config.{js,ts} archivo:
export default defineConfig ( {
// Your configuration
optimizeDeps : {
// Add both @codemirror/state and @codemirror/view to included deps to optimize
include : [ '@codemirror/state' , '@codemirror/view' ] ,
}
} ) | codemirconín | @codemirror/estado | @codemirror/ver | sólido |
|---|---|---|---|
| > = 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 |
Primero, necesitamos crear una nueva instancia de CodeMirror a través de la función createCodeMirror . A continuación, el objeto ref dado debe adjuntarse a un elemento DOM para inicializar la instancia EditorView con su propio 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 función createCodeMirror es la función principal de solid-codemirror para comenzar a crear su editor. Expone las siguientes propiedades:
| Propiedad | Descripción |
|---|---|
ref | El objeto htmlelement que se adjuntará a la instancia de EditorView |
editorView | La instancia actual de EditorView de CodeMirror. Será null como predeterminado, y se valorará cuando la ref dada esté montada en el DOM |
createExtension | Una función para crear una nueva extensión para CodeMirror utilizando compartimentos. Es un corto y para el ayudante createCompartmentExtension que adjunta automáticamente la instancia correcta EditorView |
https://codemirror.net/docs/guide/
CodeMirror está configurado como una colección de módulos separados que, juntos, proporcionan un editor de texto y texto con todas las funciones. En el lado positivo, esto significa que puede elegir qué características necesita, e incluso reemplazar la funcionalidad central con una implementación personalizada si es necesario. En el lado menos brillante, esto significa que configurar un editor requiere que argumenta un montón de piezas.
Como dice la documentación oficial, CodeMirror6 es modular.
El código de código sólido no será un reemplazo para todos los módulos de CodeMirror6, pero intentará proporcionar solo las primitivas necesarias para integrarlos en SOLLYJS.
Cada extensión que necesita desarrollar su editor debe instalarse individualmente e integrarse individualmente.
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 ) ; Después de montar el editor de CodeMirror, puede actualizar su estado de lectura utilizando la función createReadonlyEditor que acepta la vista del editor y el accesor de Readonly.
Nota Actualización del accesor, el editor Readonly State se actualizará automáticamente;
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 } / >
} Después de montar el editor de CodeMirror, puede controlar el estado del código utilizando el createEditorControlledValue .
Tenga en cuenta que el valor del editor ya está memoizado
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 } / >
} Después de montar el editor de CodeMirror, puede manejar extensiones personalizadas gracias a la función createExtension . Tanto acepta una Extension o Accessor<Extension | undefined> , entonces se reconfigurará automáticamente cuando cambie la extensión. De lo contrario, puede reconfigurarlos manualmente utilizando la función reconfigure devuelta.
Para obtener más detalles, consulte la documentación oficial sobre compartimentos.
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 } / >
}A veces es posible que deba dividir mejor sus extensiones personalizadas para reducir el tamaño inicial del paquete. Este es el caso en el que necesita usar importaciones dinámicas para resolver el módulo en la carga perezosa.
// ✅ 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
También puede ver una implementación avanzada de solid-codemirror a través de la implementación de CodeImage
Licenciado bajo la licencia del MIT.
