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许可获得许可。
