Solid-Codemirror menyediakan serangkaian utilitas untuk membuat integrasi Codemirror6 lebih mudah untuk SolidJs.
Perpustakaan ini pada awalnya dilahirkan untuk menjadi entri Hackathon Solidjs, tetapi telah menjadi editor inti CodeImage.
# pnpm
> pnpm add solid-codemirror
# or yarn
> yarn add solid-codemirror
# or npm
> npm i solid-codemirrorPerhatikan pustaka ini tergantung pada @codemirror/state dan @codemirror/view v6.0.0. Perpustakaan ini ditandai sebagai ** Peerdependencies **. Disarankan untuk menginstal keduanya secara manual untuk memiliki lebih banyak kontrol dan fleksibilitas untuk implementasi
PERINGATAN Anda mungkin mengalami kesalahan ini menggunakan vite
Error: Unrecognized extension value in extension set ([object Object]).
This sometimes happens because multipleinstances of @codemirror/state are loaded,
breaking instanceof checks. Jika @codemirror/state dan @codemirror/view tidak berfungsi bahkan jika versinya tidak tidak cocok, Anda dapat mencoba menambahkan yang berikut ini ke file 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' ] ,
}
} ) | Solid-Codemirror | @codemirror/state | @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 |
Pertama, kita perlu membuat instance codemirror baru melalui fungsi createCodeMirror . Selanjutnya, objek ref yang diberikan harus dilampirkan ke elemen DOM untuk menginisialisasi instance EditorView dengan EditorState -nya sendiri.
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 } /> ;
} ; Fungsi createCodeMirror adalah fungsi utama dari solid-codemirror untuk mulai membuat editor Anda. Itu memperlihatkan sifat -sifat berikut:
| Milik | Keterangan |
|---|---|
ref | Objek htmlelement yang akan dilampirkan ke instance editorview |
editorView | Instance editorview saat ini dari Codemirror. Akan menjadi null sebagai default, dan itu akan dihargai ketika ref yang diberikan dipasang di DOM |
createExtension | Fungsi untuk membuat ekstensi baru untuk codemirror menggunakan kompartemen. Ini adalah shortand untuk pembantu createCompartmentExtension yang secara otomatis melampirkan instance EditorView yang tepat |
https://codemirror.net/docs/guide/
Codemirror diatur sebagai kumpulan modul terpisah yang, bersama-sama, menyediakan editor teks dan kode berfitur lengkap. Sisi baiknya, ini berarti Anda dapat memilih dan memilih fitur mana yang Anda butuhkan, dan bahkan menggantikan fungsionalitas inti dengan implementasi khusus jika Anda perlu. Sisi yang kurang cerah, ini berarti pengaturan editor mengharuskan Anda untuk mengumpulkan banyak bagian.
Seperti yang dikatakan dokumentasi resmi, Codemirror6 adalah modular.
Solid-codemirror tidak akan menjadi pengganti untuk semua modul Codemirror6, tetapi akan mencoba memberikan hanya primitif yang diperlukan untuk mengintegrasikannya dalam Solidjs.
Setiap ekstensi yang Anda butuhkan untuk mengembangkan editor Anda harus diinstal secara individual dan diintegrasikan secara individual.
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 ) ; Setelah editor Codemirror dipasang, Anda dapat memperbarui status readonly menggunakan fungsi createReadonlyEditor yang menerima tampilan editor dan aksesor readyly.
Catatan memperbarui aksesor, status editor ReadOnly akan diperbarui secara otomatis;
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 } / >
} Setelah codemirror editor dipasang, Anda dapat mengontrol status kode menggunakan createEditorControlledValue .
Perhatikan nilai editor sudah dimoized
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 } / >
} Setelah Codemirror Editor dipasang, Anda dapat menangani ekstensi khusus berkat fungsi createExtension . Keduanya menerima Extension atau Accessor<Extension | undefined> maka itu akan dikonfigurasi ulang secara otomatis ketika ekstensi berubah. Jika tidak, Anda dapat mengkonfigurasi ulang secara manual mereka menggunakan fungsi reconfigure yang dikembalikan.
Untuk detail lebih lanjut, lihat dokumentasi resmi tentang kompartemen.
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 } / >
}Terkadang Anda mungkin perlu membagi ekstensi khusus Anda dengan lebih baik untuk mengurangi ukuran bundel awal. Ini adalah kasus di mana Anda perlu menggunakan impor dinamis untuk menyelesaikan modul dalam pemuatan malas.
// ✅ 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
Anda juga dapat melihat implementasi canggih dari solid-codemirror melalui Implementasi CodeImage
Berlisensi di bawah lisensi MIT.
