1- import { SUPPORTED_LANGUAGES } from ' @codeimage/config' ;
2- import { getRootEditorStore } from ' @codeimage/store/editor' ;
3- import { getActiveEditorStore } from ' @codeimage/store/editor/activeEditor' ;
4- import { getThemeStore } from ' @codeimage/store/theme/theme.store' ;
1+ import { SUPPORTED_LANGUAGES } from " @codeimage/config" ;
2+ import { getRootEditorStore } from " @codeimage/store/editor" ;
3+ import { getActiveEditorStore } from " @codeimage/store/editor/activeEditor" ;
4+ import { getThemeStore } from " @codeimage/store/theme/theme.store" ;
55import {
66 autocompletion ,
77 closeBrackets ,
88 closeBracketsKeymap ,
99 completionKeymap ,
10- } from '@codemirror/autocomplete' ;
11- import {
12- defaultKeymap ,
13- history ,
14- historyKeymap ,
15- indentWithTab ,
16- } from '@codemirror/commands' ;
17- import { bracketMatching , indentOnInput } from '@codemirror/language' ;
18- import type { Extension } from '@codemirror/state' ;
19- import { EditorState } from '@codemirror/state' ;
10+ } from "@codemirror/autocomplete" ;
11+ import { defaultKeymap , history , historyKeymap , indentWithTab } from "@codemirror/commands" ;
12+ import { bracketMatching , indentOnInput } from "@codemirror/language" ;
13+ import type { Extension } from "@codemirror/state" ;
14+ import { EditorState } from "@codemirror/state" ;
2015import {
2116 crosshairCursor ,
2217 drawSelection ,
@@ -26,11 +21,11 @@ import {
2621 keymap ,
2722 lineNumbers ,
2823 rectangularSelection ,
29- } from ' @codemirror/view' ;
30- import { createCodeMirror , createEditorReadonly } from ' solid-codemirror' ;
31- import type { VoidProps } from ' solid-js' ;
32- import { createEffect , createMemo , createResource , on } from ' solid-js' ;
33- import { createTabIcon } from ' ../../hooks/use-tab-icon' ;
24+ } from " @codemirror/view" ;
25+ import { createCodeMirror , createEditorReadonly } from " solid-codemirror" ;
26+ import type { VoidProps } from " solid-js" ;
27+ import { createEffect , createMemo , createResource , on } from " solid-js" ;
28+ import { createTabIcon } from " ../../hooks/use-tab-icon" ;
3429
3530const EDITOR_BASE_SETUP : Extension = [
3631 highlightSpecialChars ( ) ,
@@ -60,16 +55,16 @@ interface CustomEditorProps {
6055}
6156
6257export default function CustomEditor ( props : VoidProps < CustomEditorProps > ) {
63- const { themeArray : themes } = getThemeStore ( ) ;
58+ const { themeArray : themes } = getThemeStore ( ) ;
6459 const languages = SUPPORTED_LANGUAGES ;
6560 const {
6661 state : editorState ,
6762 canvasEditorEvents,
68- computed : { selectedFont} ,
63+ computed : { selectedFont } ,
6964 } = getRootEditorStore ( ) ;
70- const { editor} = getActiveEditorStore ( ) ;
65+ const { editor } = getActiveEditorStore ( ) ;
7166 const selectedLanguage = createMemo ( ( ) =>
72- languages . find ( language => language . id === editor ( ) ?. languageId ) ,
67+ languages . find ( ( language ) => language . id === editor ( ) ?. languageId ) ,
7368 ) ;
7469
7570 const {
@@ -78,26 +73,24 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
7873 createExtension,
7974 } = createCodeMirror ( {
8075 value : editor ( ) ?. code ,
81- onTransactionDispatched : tr => canvasEditorEvents . emit ( tr ) ,
76+ onTransactionDispatched : ( tr ) => canvasEditorEvents . emit ( tr ) ,
8277 onValueChange : props . onValueChange ,
8378 } ) ;
8479
8580 createEffect ( ( ) => props . onEditorViewChange ?.( editorView ( ) ) ) ;
8681
87- const [ currentLanguage ] = createResource ( selectedLanguage , ( { plugin} ) =>
88- plugin ( ) ,
89- ) ;
82+ const [ currentLanguage ] = createResource ( selectedLanguage , ( { plugin } ) => plugin ( ) ) ;
9083
9184 const icon = createTabIcon (
9285 ( ) => editor ( ) ?. tab . tabName ?? null ,
93- ( ) => editor ( ) ?. languageId ?? '' ,
86+ ( ) => editor ( ) ?. languageId ?? "" ,
9487 true ,
9588 ) ;
9689
97- const [ currentExtraLanguage ] = createResource ( icon , iconDef => {
90+ const [ currentExtraLanguage ] = createResource ( icon , ( iconDef ) => {
9891 return iconDef ?. extraLanguage
9992 ?. extension ( )
100- . then ( extension => {
93+ . then ( ( extension ) => {
10194 return {
10295 extension,
10396 overrideParent : iconDef . extraLanguage ?. overrideParent ,
@@ -108,39 +101,38 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
108101
109102 const themeConfiguration = createMemo (
110103 ( ) =>
111- themes ( ) . find ( theme => theme ( ) ?. id === editorState . options . themeId ) ?.( ) ??
112- themes ( ) [ 0 ] ( ) ,
104+ themes ( ) . find ( ( theme ) => theme ( ) ?. id === editorState . options . themeId ) ?.( ) ?? themes ( ) [ 0 ] ( ) ,
113105 ) ;
114106
115107 const baseTheme = EditorView . theme ( {
116- '&' : {
117- textAlign : ' left' ,
118- background : ' transparent !important' ,
108+ "&" : {
109+ textAlign : " left" ,
110+ background : " transparent !important" ,
119111 } ,
120- ' .cm-content' {
121- textAlign : ' left' ,
112+ " .cm-content" {
113+ textAlign : " left" ,
122114 } ,
123- ' .cm-gutters' {
124- backgroundColor : ' transparent' ,
125- border : ' none' ,
115+ " .cm-gutters" {
116+ backgroundColor : " transparent" ,
117+ border : " none" ,
126118 } ,
127- ' .cm-lineNumbers' {
128- position : ' sticky' ,
129- flexDirection : ' column' ,
119+ " .cm-lineNumbers" {
120+ position : " sticky" ,
121+ flexDirection : " column" ,
130122 flexShrink : 0 ,
131123 } ,
132- ' .cm-lineNumbers .cm-gutterElement' {
133- textAlign : ' right' ,
134- padding : ' 0 16px 0 8px' ,
135- lineHeight : ' 21px' ,
124+ " .cm-lineNumbers .cm-gutterElement" {
125+ textAlign : " right" ,
126+ padding : " 0 16px 0 8px" ,
127+ lineHeight : " 21px" ,
136128 } ,
137- ' .cm-line' {
138- padding : ' 0 2px 0 8px' ,
129+ " .cm-line" {
130+ padding : " 0 2px 0 8px" ,
139131 } ,
140- ' .cm-cursor' {
141- borderLeftWidth : ' 2px' ,
142- height : ' 21px' ,
143- transform : ' translateY(-10%)' ,
132+ " .cm-cursor" {
133+ borderLeftWidth : " 2px" ,
134+ height : " 21px" ,
135+ transform : " translateY(-10%)" ,
144136 } ,
145137 } ) ;
146138
@@ -150,15 +142,15 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
150142 fontWeight = editorState . options . fontWeight ,
151143 enableLigatures = editorState . options . enableLigatures ;
152144
153- const fontVariantLigatures = ! ! enableLigatures ? ' normal' ' none' ;
145+ const fontVariantLigatures = ! ! enableLigatures ? " normal" " none" ;
154146
155147 return EditorView . theme ( {
156- ' .cm-content *' {
148+ " .cm-content *" {
157149 fontFamily : `${ fontName } ,
158150 fontWeight : fontWeight ,
159151 fontVariantLigatures,
160152 } ,
161- ' .cm-gutters' {
153+ " .cm-gutters" {
162154 fontFamily : `${ fontName } ,
163155 fontWeight : 400 ,
164156 fontVariantLigatures,
@@ -170,13 +162,12 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
170162 createExtension ( EditorView . lineWrapping ) ;
171163 createExtension ( ( ) =>
172164 EditorView . contentAttributes . of ( {
173- ' aria-label' : ' codeimage-editor' ,
165+ " aria-label" : " codeimage-editor" ,
174166 } ) ,
175167 ) ;
176168 createExtension ( ( ) => customFontExtension ( ) ) ;
177169 createExtension ( ( ) => {
178170 const language = currentLanguage ( ) ;
179- console . log ( language ) ;
180171 const extraLanguage = currentExtraLanguage ( ) ;
181172 if ( ! extraLanguage && ! language ) {
182173 return [ ] ;
@@ -194,7 +185,7 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
194185 const lnStart = lineNumberStart ( ) ?? 1 ;
195186 const newLn = ( ln : number ) => ln + ( lnStart - 1 ) ;
196187 return editorState . options . showLineNumbers
197- ? lineNumbers ( { formatNumber : lineNo => String ( newLn ( lineNo ) ) } )
188+ ? lineNumbers ( { formatNumber : ( lineNo ) => String ( newLn ( lineNo ) ) } )
198189 : [ ] ;
199190 } ) ;
200191 createExtension ( ( ) => themeConfiguration ( ) ?. editorTheme || [ ] ) ;
@@ -205,15 +196,15 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
205196 createEffect (
206197 on (
207198 ( ) => props . readOnly ,
208- readOnly => {
199+ ( readOnly ) => {
209200 const extension = readOnly ? [ ] : EDITOR_BASE_SETUP ;
210201 reconfigureBaseSetup ( extension ) ;
211202 } ,
212203 ) ,
213204 ) ;
214205
215206 return (
216- < code class = { `language-${ selectedLanguage ( ) ?. id ?? ' default' } } >
207+ < code class = { `language-${ selectedLanguage ( ) ?. id ?? " default" } } >
217208 < div ref = { setRef } />
218209 </ code >
219210 ) ;
0 commit comments