rewrite kit-codemirror: performance, reliability, easier customization

- made `useCodeMirror` easier to reuse, now accepting an object of options and manages the editor in a stateless approach which only guarantees that the `editorRef` is updated for any `useLayoutEffect`/useEffect` which is defined after the hook was called. it now manages extensions in a single compartment, keeping the editors state when extensions are reconfigured
- removed `effects` prop and system, instead directly modify extensions or use `editor` directly via `onViewLifecycle`, `onSetup` or from `useCodeMirror`.
- reworked `useExtension` to automatically add and reconfigure an extension, now can only be used together with `useCodeMirror`, must be called directly after it
- `CodeMirror` replaced prop `classNamesContent: string[]` with `classNameContent: string`
- removed `useEditorClasses` helper hook, now included in `CodeMirror`
- changed internal effects and state flow, for performance and reliability
- added `onSetup` prop to `CodeMirror`, reactively attach event listener without extra state overhead or needing to use the `useCodeMirror` hook
- added `Transaction.remote` annotation to the default `onExternalChange` handler
- added `isRemoteChange` util to check for the remote annotation

Author: elbakerino

babel.config.json

@@ -1,6 +1,11 @@
 {
     "presets": [
-        "@babel/preset-react",
+        [
+            "@babel/preset-react",
+            {
+                "runtime": "automatic"
+            }
+        ],
         "@babel/preset-typescript"
     ],
     "plugins": [
@@ -19,7 +24,12 @@
         "cjs": {
             "presets": [
                 "@babel/preset-env",
-                "@babel/preset-react",
+                [
+                    "@babel/preset-react",
+                    {
+                        "runtime": "automatic"
+                    }
+                ],
                 "@babel/preset-typescript"
             ],
             "plugins": [
@@ -36,7 +46,12 @@
         "test": {
             "presets": [
                 "@babel/preset-env",
-                "@babel/preset-react",
+                [
+                    "@babel/preset-react",
+                    {
+                        "runtime": "automatic"
+                    }
+                ],
                 "@babel/preset-typescript"
             ]
         },

package-lock.json

@@ -29,7 +29,7 @@
         "@codemirror/language": "^6.1.0",
         "@ui-schema/dictionary": "~0.0.13",
         "@ui-schema/ds-material": "~0.4.3",
-        "@ui-schema/kit-codemirror": "~0.2.0",
+        "@ui-schema/kit-codemirror": "^1.0.0-alpha.0",
         "@ui-schema/material-code": "~0.4.7",
         "@ui-schema/ui-schema": "~0.4.7",
         "immutable": "^5.0.0",

packages/demo/package.json

@@ -1,4 +1,6 @@
-import React from 'react'
+import Box from '@mui/material/Box'
+import { useCodeMirror } from '@ui-schema/kit-codemirror'
+import React, { useCallback } from 'react'
 import {
     lineNumbers, highlightActiveLineGutter, highlightSpecialChars,
     drawSelection, dropCursor,
@@ -11,36 +13,25 @@ import { history, defaultKeymap, historyKeymap, indentWithTab } from '@codemirro
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
 import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'
 import { lintKeymap } from '@codemirror/lint'
-import { Compartment, EditorState, Extension } from '@codemirror/state'
+import { Compartment, EditorState, Extension, Prec } from '@codemirror/state'
 import { useEditorTheme } from '@ui-schema/material-code/useEditorTheme'
 import { useHighlightStyle } from '@ui-schema/material-code/useHighlightStyle'
-import { CodeMirrorComponentProps, CodeMirror, CodeMirrorProps } from '@ui-schema/kit-codemirror/CodeMirror'
+import { CodeMirrorComponentProps } from '@ui-schema/kit-codemirror/CodeMirror'
 import { useExtension } from '@ui-schema/kit-codemirror/useExtension'
 import { MuiCodeMirrorStyleProps } from '@ui-schema/material-code'
 
 export const CustomCodeMirror: React.FC<CodeMirrorComponentProps & MuiCodeMirrorStyleProps & { minHeight?: number }> = (
     {
-        // values we want to override in this component
-        value, extensions, effects,
+        value, extensions,
         dense, variant,
-        // custom prop by this `demo` package:
+        onChange,
+        style, classNameContent,
         minHeight,
-        // everything else is just passed down
         ...props
     },
 ) => {
-    const {onChange} = props
     const theme = useEditorTheme(typeof onChange === 'undefined', dense, variant)
     const highlightStyle = useHighlightStyle()
-    const {init: initHighlightExt, effects: effectsHighlightExt} = useExtension(
-        () => syntaxHighlighting(highlightStyle || defaultHighlightStyle, {fallback: true}),
-        [highlightStyle],
-    )
-    const {init: initThemeExt, effects: effectsThemeExt} = useExtension(
-        () => theme,
-        [theme],
-    )
-    const effectsRef = React.useRef<((editor: EditorView) => void)[]>(effects || [])
 
     const extensionsAll: Extension[] = React.useMemo(() => [
         lineNumbers(),
@@ -71,43 +62,50 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps & MuiCodeMirror
             ...lintKeymap,
             indentWithTab,
         ]),
-        initHighlightExt(),
-        initThemeExt(),
         ...(extensions || []),
-    ], [extensions, initHighlightExt, initThemeExt])
-
-    // attach parent plugin effects first
-    React.useMemo(() => {
-        if(!effects) return
-        effectsRef.current.push(...effects)
-    }, [effects])
+    ], [extensions])
 
-    // attach each plugin effect separately (thus only the one which changes get reconfigured)
-    React.useMemo(() => {
-        if(!effectsHighlightExt) return
-        effectsRef.current.push(...effectsHighlightExt)
-    }, [effectsHighlightExt])
-    React.useMemo(() => {
-        if(!effectsThemeExt) return
-        effectsRef.current.push(...effectsThemeExt)
-    }, [effectsThemeExt])
+    const containerRef = React.useRef<HTMLDivElement | null>(null)
+    const [editorRef] = useCodeMirror({
+        onChange,
+        value: value || '',
+        extensions: extensionsAll,
+        containerRef,
+        onViewLifecycle: React.useCallback((view) => {
+            console.log('on-view-lifecycle', view)
+        }, []),
+    })
 
-    const onViewLifecycle: CodeMirrorProps['onViewLifecycle'] = React.useCallback((view) => {
-        console.log('on-view-lifecycle', view)
-    }, [])
+    useExtension(
+        useCallback(
+            () => syntaxHighlighting(highlightStyle || defaultHighlightStyle, {fallback: true}),
+            [highlightStyle],
+        ),
+        editorRef,
+    )
+    useExtension(
+        useCallback(
+            () => theme,
+            [theme],
+        ),
+        editorRef,
+    )
+    useExtension(
+        useCallback(() => {
+            return Prec.lowest(EditorView.editorAttributes.of({class: classNameContent || ''}))
+        }, [classNameContent]),
+        editorRef,
+    )
 
-    return <CodeMirror
-        value={value || ''}
-        extensions={extensionsAll}
-        onViewLifecycle={onViewLifecycle}
-        effects={effectsRef.current.splice(0, effectsRef.current.length)}
+    return <Box
+        ref={containerRef}
         {...props}
 
         // use this to force any min height:
         style={minHeight ? {
+            ...style,
             display: 'flex',
             minHeight: minHeight,
-        } : undefined}
-        // className={className}
+        } : style}
     />
 }

packages/demo/src/components/CustomCodeMirror.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import { Profiler } from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './App'
 
 createRoot(document.querySelector('#root')!)
     .render(
-        <React.Profiler id="App" onRender={() => null}>
+        <Profiler id="App" onRender={() => null}>
             <App/>
-        </React.Profiler>,
+        </Profiler>,
     )