Solid-Codemirror는 solidjs의 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에 따라 다릅니다. 이 라이브러리는 ** PeerDependencies **로 표시됩니다. 더 많은 제어 및 유연성을 갖도록 두 가지를 수동으로 설치하는 것이 좋습니다.
경고 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} 파일 :
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/보기 | 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 |
먼저 createCodeMirror 함수를 통해 새로운 Codemirror 인스턴스를 만들어야합니다. 다음으로, 주어진 ref 객체는 EditorView 인스턴스를 자신의 EditorState 로 초기화하려면 DOM 요소에 연결되어야합니다.
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에 대한 새로운 확장을 생성하는 함수. 오른쪽 EditorView 인스턴스를 자동으로 첨부하는 createCompartmentExtension 헬퍼의 짧은 지식입니다. |
https://codemirror.net/docs/guide/
Codemirror는 완전한 기능을 갖춘 텍스트 및 코드 편집기를 제공하는 별도의 모듈 모듈 모듈로 설정됩니다. 밝은면에서는 필요한 기능을 선택하고 선택할 수 있으며 필요한 경우 핵심 기능을 사용자 정의 구현으로 바꿀 수 있습니다. 덜 밝은면에서 편집자를 설정하려면 많은 조각을 만들어야합니다.
공식 문서에서 알 수 있듯이 Codemirror6은 모듈 식입니다.
Solid-Codemirror는 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 Accessor를 수락하는 createReadonlyEditor 함수를 사용하여 ReadOnly 상태를 업데이트 할 수 있습니다.
참고 액세서를 업데이트하면 편집자 Readonly State가 자동으로 업데이트됩니다.
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> 허용합니다 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 라이센스에 따라 라이센스.
