O Solid-Codemirror fornece um conjunto de utilitários para facilitar a integração Codemirror6 para o SOLIDJS.
Esta biblioteca nasceu inicialmente para ser a entrada do SolidJS Hackathon, mas se tornou o editor principal do CodeImage.
# pnpm
> pnpm add solid-codemirror
# or yarn
> yarn add solid-codemirror
# or npm
> npm i solid-codemirrorNota Esta biblioteca depende de @codemirror/estado e @codemirror/view v6.0.0. Essas bibliotecas são sinalizadas como ** peerdependências **. É recomendável instalar manualmente os dois para ter mais controle e flexibilidade para implementação
Aviso que você pode encontrar este erro usando o Vite
Error: Unrecognized extension value in extension set ([object Object]).
This sometimes happens because multipleinstances of @codemirror/state are loaded,
breaking instanceof checks. Se @codemirror/state e @codemirror/view não estiverem funcionando, mesmo que a versão deles não seja incompatível, você pode tentar adicionar o seguinte ao seu vite.config.{js,ts} arquivo:
export default defineConfig ( {
// Your configuration
optimizeDeps : {
// Add both @codemirror/state and @codemirror/view to included deps to optimize
include : [ '@codemirror/state' , '@codemirror/view' ] ,
}
} ) | Codemirror sólido | @codemirror/estado | @codemirror/view | Solid-js |
|---|---|---|---|
| > = 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 |
Primeiro, precisamos criar uma nova instância de codemirror através da função createCodeMirror . Em seguida, o objeto ref fornecido deve ser anexado a um elemento DOM para inicializar a instância EditorView com seu próprio 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 } /> ;
} ; A função createCodeMirror é a principal função do solid-codemirror para começar a criar seu editor. Ele expõe as seguintes propriedades:
| Propriedade | Descrição |
|---|---|
ref | O objeto HTMLELEMENT que será anexado à instância do EditorView |
editorView | A instância atual do EditorView do codemirror. Será null como padrão, e será valorizado quando o ref dado for montado no DOM |
createExtension | Uma função para criar uma nova extensão para o codemirror usando compartimentos. É uma curta e para o ajudante createCompartmentExtension , que conecta automaticamente a instância EditorView correto |
https://codemirror.net/docs/guide/
O Codemirror é configurado como uma coleção de módulos separados que, juntos, fornecem um texto e editor de código de texto completo. Pelo lado positivo, isso significa que você pode escolher quais recursos precisar e até substituir a funcionalidade principal por uma implementação personalizada, se necessário. No lado menos brilhante, isso significa que a configuração de um editor exige que você junte um monte de peças.
Como diz a documentação oficial, o codemirror6 é modular.
O Solid-Codemirror não substituirá todos os módulos do Codemirror6, mas tentará fornecer apenas os primitivos necessários para integrá-los no SolidJS.
Cada extensão que você precisa para desenvolver seu editor deve ser instalada individualmente e integrada 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 ) ; Depois que o editor de Codemirror é montado, você pode atualizar seu estado readonly usando a função createReadonlyEditor que aceita a visualização do editor e o acessador ReadOnly.
Nota Atualizando o acessador, o Editor Readonly State será atualizado automaticamente;
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 } / >
} Depois que o editor de Codemirror é montado, você pode controlar o estado do código usando o createEditorControlledValue .
Observe que o valor do editor já está memorizado
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 } / >
} Depois que o Editor de Codemirror é montado, você pode lidar com extensões personalizadas graças à função createExtension . Ambos aceitam uma Extension ou Accessor<Extension | undefined> Em seguida, será reconfigurado automaticamente quando a extensão for alterada. Caso contrário, você pode reconfigurá -los manualmente usando a função reconfigure retornada.
Para mais detalhes, consulte a documentação 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 } / >
}Às vezes, pode ser necessário dividir melhor suas extensões personalizadas para reduzir o tamanho inicial do pacote. É o caso em que você precisa usar importações dinâmicas para resolver o módulo em carregamento preguiçoso.
// ✅ 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
Você também pode visualizar uma implementação avançada de solid-codemirror por meio da implementação do CodeImage
Licenciado sob a licença do MIT.
