refac EditorView creation; CM effects props; add useExtension hook;

- streamlined EditorView creation, switched from state based to ref+memo based with optimized `useLayoutEffect` rendering
    - fixes flickering
    - fixes painting delays
    - cleanup unneeded checks & code
    - easier render-flow intergration
- new `effects` prop + param (`CodeMirror`/`useCodeMirror`) to apply editor effects from e.g. extensions without having the `editor` in the actual component
- new `useExtension` hook to easily update extensions in a `useCallback` fashion
    - fixes unnecessary editor destroy & creation (history lost, flickering etc.)

- mui add new `embed` variant to `useEditorTheme`
- mui add new `dense` option to `useEditorTheme`
- optimized colors in theme + highlighting
- now defaults to fullwidth, to be easier styleable from container component

Author: elbakerino

package-lock.json

@@ -12,7 +12,7 @@ import { customWidgets } from './components/UISchema'
 const customThemes = customTheme('#05aeca')
 
 export const App: React.ComponentType<{}> = () => {
-    const [themeId] = React.useState<'dark' | 'light'>('dark')
+    const [themeId, setThemeId] = React.useState<'dark' | 'light'>('dark')
 
     const [theme, setTheme] = React.useState(customThemes[themeId])
     React.useEffect(() => {
@@ -26,7 +26,7 @@ export const App: React.ComponentType<{}> = () => {
             <BrowserRouter>
                 <React.Suspense fallback={<CircularProgress/>}>
                     <UIMetaProvider t={browserT} widgets={customWidgets}>
-                        <Layout/>
+                        <Layout setTheme={setThemeId}/>
                     </UIMetaProvider>
                 </React.Suspense>
             </BrowserRouter>

packages/demo/package-lock.json

@@ -11,24 +11,35 @@ 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 } from '@codemirror/state'
+import { Compartment, EditorState, Extension } 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 { useExtension } from '@ui-schema/kit-codemirror/useExtension'
 
 export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
     {
         // values we want to override in this component
-        value, extensions,
+        value, extensions, effects,
         // everything else is just passed down
         ...props
     },
 ) => {
     const {onChange} = props
     const theme = useEditorTheme(typeof onChange === 'undefined')
     const highlightStyle = useHighlightStyle()
+    const {init: initHighlightExt, effects: effectsHighlightExt} = useExtension(
+        () => syntaxHighlighting(highlightStyle || defaultHighlightStyle, {fallback: true}),
+        [highlightStyle],
+    )
+    const {init: initThemeExt, effects: effectsThemeExt} = useExtension(
+        () => theme,
+        [theme],
+    )
+    const themeCompartment = React.useRef<Compartment>(new Compartment())
+    const effectsRef = React.useRef<((editor: EditorView) => void)[]>(effects || [])
 
-    const extensionsAll = React.useMemo(() => [
+    const extensionsAll: Extension[] = React.useMemo(() => [
         lineNumbers(),
         EditorView.lineWrapping,
         highlightActiveLineGutter(),
@@ -38,16 +49,15 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
         drawSelection(),
         dropCursor(),
         EditorState.allowMultipleSelections.of(true),
+        new Compartment().of(EditorState.tabSize.of(4)),
         indentOnInput(),
-        syntaxHighlighting(highlightStyle || defaultHighlightStyle, {fallback: true}),
         bracketMatching(),
         closeBrackets(),
         autocompletion(),
         rectangularSelection(),
         // crosshairCursor(),
         highlightActiveLine(),
         highlightSelectionMatches(),
-        new Compartment().of(EditorState.tabSize.of(4)),
         keymap.of([
             ...closeBracketsKeymap,
             ...defaultKeymap,
@@ -58,9 +68,31 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
             ...lintKeymap,
             indentWithTab,
         ]),
-        theme,
+        initHighlightExt(),
+        initThemeExt(),
+        // themeCompartment.current.of(themeRef.current),// only initial theme here to not re-create extensions
         ...(extensions || []),
-    ], [highlightStyle, extensions, theme])
+    ], [extensions, initHighlightExt, initThemeExt])
+
+    React.useMemo(() => {
+        if(!effects) return
+        effectsRef.current.push(...effects)
+    }, [effects])
+    React.useMemo(() => {
+        effectsRef.current.push(
+            function updateTheme(editor) {
+                editor.dispatch({
+                    effects: themeCompartment.current.reconfigure(theme),
+                })
+            },
+        )
+    }, [theme])
+    React.useMemo(() => {
+        effectsRef.current.push(...effectsHighlightExt)
+    }, [effectsHighlightExt])
+    React.useMemo(() => {
+        effectsRef.current.push(...effectsThemeExt)
+    }, [effectsThemeExt])
 
     const onViewLifecycle: CodeMirrorProps['onViewLifecycle'] = React.useCallback((view) => {
         console.log('on-view-lifecycle', view)
@@ -70,6 +102,7 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
         value={value || ''}
         extensions={extensionsAll}
         onViewLifecycle={onViewLifecycle}
+        effects={effectsRef.current.splice(0, effectsRef.current.length)}
         {...props}
         // className={className}
     />

packages/demo/src/App.tsx

@@ -4,8 +4,9 @@ import { PageHome } from '../pages/PageHome'
 import { PageDemoWidget } from '../pages/PageDemoWidget'
 import { PageDemoLangSelectable } from '../pages/PageDemoLangSelectable'
 import { PageDemoComponent } from '../pages/PageDemoComponent'
+import { Button } from '@mui/material'
 
-export const Layout: React.ComponentType<{}> = () => {
+export const Layout: React.ComponentType<{ setTheme: React.Dispatch<React.SetStateAction<'dark' | 'light'>> }> = ({setTheme}) => {
     const scrollWrapper = React.useRef<HTMLDivElement | null>(null)
 
     return <div
@@ -15,7 +16,6 @@ export const Layout: React.ComponentType<{}> = () => {
             flexDirection: 'column',
             maxHeight: '100%',
             position: 'relative',
-            color: '#ffffff',
             overflow: 'auto',
             padding: '0 12px',
         }}
@@ -26,5 +26,8 @@ export const Layout: React.ComponentType<{}> = () => {
             <Route path={'/widget'} element={<PageDemoWidget/>}/>
             <Route path={'/selectable'} element={<PageDemoLangSelectable/>}/>
         </Routes>
+        <Button size={'small'} onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>
+            switch theme
+        </Button>
     </div>
 }

packages/demo/src/components/CustomCodeMirror.tsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 import { Nav } from '../components/Nav'
-import { CodeMirrorOnChange } from '@ui-schema/kit-codemirror'
+import { CodeMirrorOnChange } from '@ui-schema/kit-codemirror/useCodeMirror'
 import { CodeMirrorComponentProps, CodeMirror, CodeMirrorProps } from '@ui-schema/kit-codemirror/CodeMirror'
 import {
     lineNumbers, highlightActiveLineGutter, highlightSpecialChars,
@@ -110,10 +110,11 @@ export const CustomCodeMirror: React.FC<CodeMirrorComponentProps> = (
 const DemoComponent = () => {
     const [value, setValue] = React.useState('')
 
-    const onChange: CodeMirrorOnChange = React.useCallback((_editor, nextValue, prevValue) => {
-        if(nextValue !== prevValue) {
-            setValue(nextValue)
+    const onChange: CodeMirrorOnChange = React.useCallback((editor, newValue) => {
+        if(!editor.docChanged || typeof newValue !== 'string') {
+            return
         }
+        setValue(newValue)
     }, [setValue])
 
     return <React.Fragment>
@@ -128,10 +129,11 @@ const DemoComponentReadOnly = () => {
     const [readOnly, setReadOnly] = React.useState(false)
     const [value, setValue] = React.useState('')
 
-    const onChange: CodeMirrorOnChange = React.useCallback((_editor, nextValue, prevValue) => {
-        if(nextValue !== prevValue) {
-            setValue(nextValue)
+    const onChange: CodeMirrorOnChange = React.useCallback((editor, newValue) => {
+        if(!editor.docChanged || typeof newValue !== 'string') {
+            return
         }
+        setValue(newValue)
     }, [setValue])
 
     return <React.Fragment>

packages/demo/src/components/Layout.tsx

@@ -1,6 +1,6 @@
 {
     "name": "@ui-schema/kit-codemirror",
-    "version": "0.0.1",
+    "version": "0.1.0-alpha.0",
     "description": "CodeMirror v6 as React Component, with hooks and stuff - but only the necessities.",
     "homepage": "https://ui-schema.bemit.codes/docs/kit-codemirror/kit-codemirror",
     "author": {

packages/demo/src/pages/PageDemoComponent.tsx

@@ -9,6 +9,7 @@ export interface CodeMirrorComponentProps {
     value?: string
     extensions?: Extension[]
     classNamesContent?: string[]
+    effects?: ((editor: EditorView) => void)[]
 }
 
 export interface CodeMirrorProps extends CodeMirrorComponentProps {
@@ -29,6 +30,7 @@ export const CodeMirror: React.FC<CodeMirrorProps> = (
         value = '',
         style,
         extensions,
+        effects,
     },
 ) => {
     const containerRef = React.useRef<HTMLDivElement | null>(null)
@@ -40,11 +42,12 @@ export const CodeMirror: React.FC<CodeMirrorProps> = (
         ...(extensions || []),
     ], [extensions])
 
-    const [editor] = useCodeMirror(
+    const editor = useCodeMirror(
         containerRef,
         onChange,
         value,
         extensionsAll,
+        effects,
     )
 
     // but extensions need to receive both: Compartment and Editor (and optionally their values)