Solid-Codemirror bietet eine Reihe von Dienstprogrammen, um SolidJs die Codemirror6- Integration zu erleichtern.
Diese Bibliothek wurde zunächst als Eintrag des SolidJS -Hackathons geboren, ist jedoch zum Kernredakteur von CaseiMage geworden.
# pnpm
> pnpm add solid-codemirror
# or yarn
> yarn add solid-codemirror
# or npm
> npm i solid-codemirrorBeachten Sie, dass diese Bibliothek von @codemirror/state und @codemirror/v6.0.0 abhängt. Diese Bibliotheken werden als ** PeerDependenzen ** gekennzeichnet. Es wird empfohlen, beide manuell zu installieren, um mehr Kontrolle und Flexibilität für die Implementierung zu haben
Warnung Sie können diesen Fehler mit VITE begegnen
Error: Unrecognized extension value in extension set ([object Object]).
This sometimes happens because multipleinstances of @codemirror/state are loaded,
breaking instanceof checks. Wenn @codemirror/status und @codemirror/view nicht funktionieren, auch wenn ihre Version nicht nicht übereinstimmt, können Sie versuchen, Ihrem vite.config.{js,ts} Datei Folgendes hinzuzufügen:
export default defineConfig ( {
// Your configuration
optimizeDeps : {
// Add both @codemirror/state and @codemirror/view to included deps to optimize
include : [ '@codemirror/state' , '@codemirror/view' ] ,
}
} ) | Solid-Codemirror | @codemirror/Status | @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 |
Zunächst müssen wir eine neue Codemirror -Instanz über die createCodeMirror -Funktion erstellen. Als nächstes muss das angegebene ref -Objekt an ein DOM -Element angehängt werden, um die EditorView -Instanz mit seinem eigenen EditorState zu initialisieren.
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 } /> ;
} ; Die Funktion createCodeMirror ist die Hauptfunktion von solid-codemirror um Ihren Editor zu erstellen. Es enthüllt die folgenden Eigenschaften:
| Eigentum | Beschreibung |
|---|---|
ref | Das HTMLelement -Objekt, das an die EditorView -Instanz angehängt wird |
editorView | Die aktuelle EditorView -Instanz von Codemirror. Wird als standardmäßig null sein und es wird bewertet, wenn der gegebene ref in der DOM montiert ist |
createExtension | Die Funktion zum Erstellen einer neuen Erweiterung für Codemirror mithilfe von Kompartimenten. Es ist ein Kurzwand für den createCompartmentExtension -Helfer, der automatisch die richtige EditorView -Instanz anhält |
https://codemirror.net/docs/guide/
Codemirror wird als Sammlung separater Module eingerichtet, die zusammen einen vollwertigen Text- und Code-Editor bieten. Auf der hellen Seite bedeutet dies, dass Sie auswählen können, welche Funktionen Sie benötigen, und sogar die Kernfunktionalität durch eine benutzerdefinierte Implementierung ersetzen können, wenn Sie dies benötigen. Auf der weniger hellen Seite bedeutet dies, dass Sie ein paar Stücke zusammenstellen müssen.
Wie die offizielle Dokumentation sagt, ist Codemirror6 modular.
Solid-Codemirror ist nicht ein Ersatz für alle Module von Codemirror6, sondern versucht, nur die Primitiven bereitzustellen, die erforderlich sind, um sie in SolidJs zu integrieren.
Jede Erweiterung, die Sie zur Entwicklung Ihres Editors benötigen , muss einzeln installiert und einzeln integriert werden.
focused Zustandsänderungen 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 ) ; Nachdem der Codemirror -Editor montiert ist, können Sie seinen Readonly -Status mit der Funktion createReadonlyEditor aktualisieren, die die Editor -Ansicht und den Readonly Accessor akzeptiert.
HINWEIS Aktualisieren des Accessors, der Editor Readonly -Status wird automatisch aktualisiert.
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 } / >
} Nachdem der Codemirror -Editor montiert ist, können Sie den Codestatus mit dem createEditorControlledValue steuern.
Beachten Sie, dass der Wert des Editors bereits in die Memo gestellt wird
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 } / >
} Nachdem der Codemirror -Editor montiert ist, können Sie dank der Funktion createExtension benutzerdefinierte Erweiterungen verarbeiten. Beide akzeptieren eine Extension oder eine Accessor<Extension | undefined> Dann wird es automatisch neu konfiguriert, wenn sich die Erweiterung ändert. Andernfalls können Sie sie mit der zurückgegebenen reconfigure manuell neu konfigurieren.
Weitere Informationen finden Sie in der offiziellen Dokumentation zu Kompartimenten.
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 } / >
}Manchmal müssen Sie Ihre benutzerdefinierten Erweiterungen besser teilen, um die anfängliche Bündelgröße zu verringern. Dies ist der Fall, in dem Sie dynamische Importe verwenden müssen, um das Modul bei faulem Laden zu beheben.
// ✅ 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
Sie können auch eine fortschrittliche Implementierung von solid-codemirror durch Codeimer-Implementierung anzeigen
Lizenziert unter der MIT -Lizenz.
