Merge branch 'alpha'

package.json

@@ -37,6 +37,7 @@
   "license": "MIT",
   "dependencies": {
     "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/language-data": "^6.5.1",
     "@codemirror/merge": "^6.4.0",
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.23.0",

src/examples/assets/code-blocks.md

@@ -2,7 +2,7 @@ Blocks of code
 
 JavaScript:
 
-```js
+```jsx
 export default function App() {
   return <h1>Hello world from a markdown</h1>
 }

src/examples/basics.tsx

@@ -29,6 +29,7 @@ import codeBlocksMarkdown from './assets/code-blocks.md?raw'
 import imageMarkdown from './assets/image.md?raw'
 import jsxMarkdown from './assets/jsx.md?raw'
 import tableMarkdown from './assets/table.md?raw'
+import { basicDark } from 'cm6-theme-basic-dark'
 
 import { virtuosoSampleSandpackConfig } from './_boilerplate'
 
@@ -226,7 +227,10 @@ export function CodeBlock() {
       plugins={[
         codeBlockPlugin({ codeBlockEditorDescriptors: [PlainTextCodeEditorDescriptor] }),
         sandpackPlugin({ sandpackConfig: virtuosoSampleSandpackConfig }),
-        codeMirrorPlugin({ codeBlockLanguages: { js: 'JavaScript', css: 'CSS' } })
+        codeMirrorPlugin({
+          codeBlockLanguages: { jsx: 'JavaScript (react)', js: 'JavaScript', css: 'CSS' }
+          // codeMirrorExtensions: [basicDark]
+        })
       ]}
     />
   )

src/plugins/codeblock/CodeBlockNode.tsx

@@ -168,33 +168,31 @@ const CodeBlockEditorContextProvider: React.FC<{
   lexicalNode: CodeBlockNode
   children: React.ReactNode
 }> = ({ parentEditor, lexicalNode, children }) => {
-  return (
-    <CodeBlockEditorContext.Provider
-      value={{
-        lexicalNode,
-        setCode: (code: string) => {
-          parentEditor.update(() => {
-            lexicalNode.setCode(code)
-            setTimeout(() => {
-              parentEditor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, undefined)
-            }, 0)
-          })
-        },
-        setLanguage: (language: string) => {
-          parentEditor.update(() => {
-            lexicalNode.setLanguage(language)
-          })
-        },
-        setMeta: (meta: string) => {
-          parentEditor.update(() => {
-            lexicalNode.setMeta(meta)
-          })
-        }
-      }}
-    >
-      {children}
-    </CodeBlockEditorContext.Provider>
-  )
+  const contextValue = React.useMemo(() => {
+    return {
+      lexicalNode,
+      setCode: (code: string) => {
+        parentEditor.update(() => {
+          lexicalNode.setCode(code)
+          setTimeout(() => {
+            parentEditor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, undefined)
+          }, 0)
+        })
+      },
+      setLanguage: (language: string) => {
+        parentEditor.update(() => {
+          lexicalNode.setLanguage(language)
+        })
+      },
+      setMeta: (meta: string) => {
+        parentEditor.update(() => {
+          lexicalNode.setMeta(meta)
+        })
+      }
+    }
+  }, [lexicalNode, parentEditor])
+
+  return <CodeBlockEditorContext.Provider value={contextValue}>{children}</CodeBlockEditorContext.Provider>
 }
 
 /**

src/plugins/codemirror/CodeMirrorEditor.tsx

@@ -1,43 +1,87 @@
-import { SandpackProvider, CodeEditor as TheEditorFromSandpack } from '@codesandbox/sandpack-react'
 import React from 'react'
 import styles from '../../styles/ui.module.css'
 import { CodeBlockEditorProps } from '../codeblock'
 import { useCodeBlockEditorContext } from '../codeblock/CodeBlockNode'
 import { readOnly$ } from '../core'
-import { useCodeMirrorRef } from '../sandpack/useCodeMirrorRef'
 import { useCellValues } from '@mdxeditor/gurx'
-import { codeMirrorTheme$ } from '.'
+
+import { EditorState, Extension } from '@codemirror/state'
+import { EditorView, lineNumbers } from '@codemirror/view'
+import { basicLight } from 'cm6-theme-basic-light'
+import { basicSetup } from 'codemirror'
+import { languages } from '@codemirror/language-data'
+import { useCodeMirrorRef } from '../sandpack/useCodeMirrorRef'
+import { codeMirrorAutoLoadLanguageSupport$, codeMirrorExtensions$ } from '.'
+
+export const COMMON_STATE_CONFIG_EXTENSIONS: Extension[] = []
 
 export const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }: CodeBlockEditorProps) => {
-  const codeMirrorRef = useCodeMirrorRef(nodeKey, 'codeblock', 'jsx', focusEmitter)
-  const [readOnly, theme] = useCellValues(readOnly$, codeMirrorTheme$)
+  const [readOnly, codeMirrorExtensions, autoLoadLanguageSupport] = useCellValues(
+    readOnly$,
+    codeMirrorExtensions$,
+    codeMirrorAutoLoadLanguageSupport$
+  )
+
+  const codeMirrorRef = useCodeMirrorRef(nodeKey, 'codeblock', language, focusEmitter)
   const { setCode } = useCodeBlockEditorContext()
+  const editorViewRef = React.useRef<EditorView | null>(null)
+  const elRef = React.useRef<HTMLDivElement | null>(null)
+
+  const setCodeRef = React.useRef(setCode)
+  setCodeRef.current = setCode
+  codeMirrorRef.current = {
+    getCodemirror: () => editorViewRef.current!
+  }
 
   React.useEffect(() => {
-    codeMirrorRef.current?.getCodemirror()?.dom.addEventListener('paste', (e) => {
-      e.stopPropagation()
-    })
-  }, [codeMirrorRef, language])
+    void (async () => {
+      const extensions = [
+        ...codeMirrorExtensions,
+        basicSetup,
+        basicLight,
+        lineNumbers(),
+        EditorView.lineWrapping,
+        EditorView.updateListener.of(({ state }) => {
+          setCodeRef.current(state.doc.toString())
+        })
+      ]
+      if (readOnly) {
+        extensions.push(EditorState.readOnly.of(true))
+      }
+      if (language !== '' && autoLoadLanguageSupport) {
+        const languageData = languages.find((l) => {
+          return l.name === language || l.alias.includes(language) || l.extensions.includes(language)
+        })
+        if (languageData) {
+          try {
+            const languageSupport = await languageData.load()
+            extensions.push(languageSupport.extension)
+          } catch (e) {
+            console.warn('failed to load language support for', language)
+          }
+        }
+      }
+      elRef.current!.innerHTML = ''
+      editorViewRef.current = new EditorView({
+        parent: elRef.current!,
+        state: EditorState.create({ doc: code, extensions })
+      })
+    })()
+    return () => {
+      editorViewRef.current?.destroy()
+      editorViewRef.current = null
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [readOnly, language])
 
   return (
     <div
-      className={styles.sandpackWrapper}
+      className={styles.codeMirrorWrapper}
       onKeyDown={(e) => {
         e.stopPropagation()
       }}
     >
-      <SandpackProvider theme={theme}>
-        <TheEditorFromSandpack
-          readOnly={readOnly}
-          showLineNumbers
-          initMode="immediate"
-          key={language}
-          filePath={`file.${language || 'txt'}`}
-          code={code}
-          onCodeUpdate={setCode}
-          ref={codeMirrorRef}
-        />
-      </SandpackProvider>
+      <div ref={elRef} />
     </div>
   )
 }

src/plugins/codemirror/index.tsx

@@ -2,7 +2,7 @@ import { realmPlugin } from '../../RealmWithPlugins'
 import { Cell, Signal, map } from '@mdxeditor/gurx'
 import { CodeBlockEditorDescriptor, appendCodeBlockEditorDescriptor$, insertCodeBlock$ } from '../codeblock'
 import { CodeMirrorEditor } from './CodeMirrorEditor'
-import { SandpackThemeProp } from '@codesandbox/sandpack-react/types'
+import { Extension } from '@codemirror/state'
 
 /**
  * The codemirror code block languages.
@@ -37,13 +37,17 @@ export const insertCodeMirror$ = Signal<{ language: string; code: string }>((r)
 })
 
 /**
- * The theme CodeMirrorEditor used.
- * It can be "light" | "dark" | "auto",
- * or the theme in "@codesandbox/sandpack-themes" package,
- * or you can also custom one,
- * learn more https://sandpack.codesandbox.io/docs/getting-started/themes#custom-theme
+ * The code mirror extensions for the coemirror code block editor.
+ * @group CodeMirror
  */
-export const codeMirrorTheme$ = Cell<SandpackThemeProp>('auto')
+export const codeMirrorExtensions$ = Cell<Extension[]>([])
+
+/**
+ * Whether or not to try to dynamically load the code block language support.
+ * Disable if you want to manually pass the supported languages.
+ * @group CodeMirror
+ */
+export const codeMirrorAutoLoadLanguageSupport$ = Cell<boolean>(true)
 
 /**
  * A plugin that adds lets users edit code blocks with CodeMirror.
@@ -52,22 +56,30 @@ export const codeMirrorTheme$ = Cell<SandpackThemeProp>('auto')
 export const codeMirrorPlugin = realmPlugin<{
   codeBlockLanguages: Record<string, string>
   /**
-   * The theme of CodeMirrorEditor
+   * Optional, additional CodeMirror extensions to load in the diff/source mode.
+   */
+  codeMirrorExtensions?: Extension[]
+  /**
+   * Whether or not to try to dynamically load the code block language support.
+   * Disable if you want to manually pass the supported languages.
+   * @group CodeMirror
    */
-  theme?: SandpackThemeProp
+  autoLoadLanguageSupport?: boolean
 }>({
   update(r, params) {
     r.pubIn({
       [codeBlockLanguages$]: params?.codeBlockLanguages,
-      [codeMirrorTheme$]: params?.theme || 'auto'
+      [codeMirrorExtensions$]: params?.codeMirrorExtensions || [],
+      [codeMirrorAutoLoadLanguageSupport$]: params?.autoLoadLanguageSupport ?? true
     })
   },
 
   init(r, params) {
     r.pubIn({
       [codeBlockLanguages$]: params?.codeBlockLanguages,
-      [codeMirrorTheme$]: params?.theme || 'auto',
-      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor(params?.codeBlockLanguages || {})
+      [codeMirrorExtensions$]: params?.codeMirrorExtensions || [],
+      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor(params?.codeBlockLanguages || {}),
+      [codeMirrorAutoLoadLanguageSupport$]: params?.autoLoadLanguageSupport ?? true
     })
   }
 })

src/plugins/sandpack/useCodeMirrorRef.ts

@@ -10,7 +10,7 @@ export function useCodeMirrorRef(nodeKey: string, editorType: 'codeblock' | 'san
   const activeEditor = useCellValue(activeEditor$)
   const setEditorInFocus = usePublisher(editorInFocus$)
   // const setActiveEditorType = usePublisher('activeEditorType')
-  const codeMirrorRef = React.useRef<CodeMirrorRef>(null)
+  const codeMirrorRef = React.useRef<CodeMirrorRef | null>(null)
   const { lexicalNode } = useCodeBlockEditorContext()
 
   // these flags escape the editor with arrows.
@@ -90,7 +90,7 @@ export function useCodeMirrorRef(nodeKey: string, editorType: 'codeblock' | 'san
     setTimeout(() => {
       codeMirror?.getCodemirror()?.contentDOM?.addEventListener('focus', onFocusHandler)
       codeMirror?.getCodemirror()?.contentDOM?.addEventListener('keydown', onKeyDownHandler)
-    }, 100)
+    }, 300)
 
     return () => {
       codeMirror?.getCodemirror()?.contentDOM.removeEventListener('focus', onFocusHandler)

src/styles/ui.module.css

@@ -361,8 +361,12 @@
   padding: var(--spacing-3);
 }
 
-.sandpackWrapper {
+.codeMirrorWrapper {
   margin-bottom: var(--spacing-5);
+  border: 1px solid var(--baseLine);
+  border-radius: var(--radius-medium);
+  overflow: hidden;
+  padding: 0.8rem;
 }
 
 .frontmatterWrapper {
@@ -1178,7 +1182,7 @@ form.multiFieldForm {
   vertical-align: baseline;
   align-items: center;
   position: relative;
-  
+
   &::after,
   & input {
     width: auto;
@@ -1193,11 +1197,11 @@ form.multiFieldForm {
     border: none;
     color: inherit;
   }
-  
+
   span {
     padding: 0.25em;
   }
-  
+
   &::after {
     content: attr(data-value);
     white-space: pre-wrap;