Solid-CodeMirror提供了一組實用程序，以使SolidJ更容易使CodeMirror6集成。
該圖書館最初是SolidJS Hackathon的進入，但已成為CodeImage的核心編輯。
# pnpm
> pnpm add solid-codemirror
# or yarn
> yarn add solid-codemirror
# or npm
> npm i solid-codemirror注意此庫取決於 @codemirror/state和 @codemirror/view v6.0.0。這些庫被標記為** peerdepentencies **。建議手動安裝它們兩個以具有更多的控制和靈活性以實現
警告您可能會使用Vite遇到此錯誤
Error: Unrecognized extension value in extension set ([object Object]).
This sometimes happens because multipleinstances of @codemirror/state are loaded,
breaking instanceof checks.如果 @codemirror/state和 @codemirror/view也無法正常工作，即使其版本不匹配，您可以嘗試將以下內容添加到您的vite.config.{js,ts} file：
export default defineConfig ( {
// Your configuration
optimizeDeps : {
// Add both @codemirror/state and @codemirror/view to included deps to optimize
include : [ '@codemirror/state' , '@codemirror/view' ] ,
}
} ) | 固體地骨 | @codemirror/state | @codemirror/view | 固體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 |
首先，我們需要通過createCodeMirror函數創建一個新的CodeMirror實例。接下來，必須將給定的ref對象連接到DOM元素，以便使用其自己的EditorState初始化EditorView實例。
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 } /> ;
} ; createCodeMirror函數是solid-codemirror開始創建編輯器的主要函數。它揭示了以下屬性：
| 財產 | 描述 |
|---|---|
ref | 將附加到EditorView實例的HTMLELEMENT對象 |
editorView | CodeMirror的當前編輯瀏覽實例。 null為默認值，當給定的ref安裝在DOM中時，它將被重視 |
createExtension | 使用隔層創建新的CodeMirror的新擴展名的功能。這是createCompartmentExtension助手的縮寫，它會自動附加正確的EditorView實例 |
https://codemirror.net/docs/guide/
CodeMirror的設置為單獨的模塊集合，共同提供了完整的文本和代碼編輯器。從好的一面來看，這意味著您可以選擇所需的功能，甚至可以根據需要替換核心功能。從不太明亮的一面來看，這意味著設置編輯器需要您整理一堆零件。
正如官方文檔所說，CodeMirror6是模塊化的。
固體地核劑將不會成為CodeMirror6的所有模塊的替代，而是嘗試僅提供將它們集成到SOLIDJ中所需的原始詞。
您需要開發編輯器的每個擴展程序必須單獨安裝並單獨集成。
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 ) ;安裝CodeMirror編輯器後，您可以使用接受編輯器視圖和ReadOnly訪問者的createReadonlyEditor函數更新其ReadOnly狀態。
注意更新訪問者，編輯器ReadOnly狀態將自動更新；
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 } / >
}安裝CodeMirror編輯器後，您可以使用createEditorControlledValue控制代碼狀態。
注意編輯器的價值已經記憶
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 } / >
}在安裝CodeMirror編輯器之後，您可以通過createExtension函數處理自定義擴展。它既接受Extension或Accessor<Extension | undefined>然後，當擴展名更改時，它將自動重新配置。否則，您可以使用返回的reconfigure函數手動重新配置它們。
有關更多詳細信息，請參閱有關隔間的官方文件。
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 } / >
}有時，您可能需要更好地拆分自定義擴展，以減少初始捆綁包大小。在這種情況下，您需要使用動態導入才能解決懶惰加載中的模塊。
// ✅ 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
您還可以通過CodeImage實現查看solid-codemirror的高級實現
根據MIT許可獲得許可。
