feat: allow passing extensions to the diff/source editors

Fixes #141
Fixes #125
Fixes #124

package.json

@@ -110,6 +110,7 @@
     "@typescript-eslint/parser": "^6.7.2",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.14",
+    "cm6-theme-basic-dark": "^0.2.0",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-standard-with-typescript": "^39.1.0",

src/examples/toolbar.tsx

@@ -25,11 +25,13 @@ import {
   CreateLink,
   DiffSourceToggleWrapper,
   InsertImage,
-  ListsToggle
+  ListsToggle,
+  KitchenSinkToolbar
 } from '..'
 import { ALL_PLUGINS, YoutubeDirectiveDescriptor, virtuosoSampleSandpackConfig } from './_boilerplate'
 import kitchenSinkMarkdown from './assets/kitchen-sink.md?raw'
 import './dark-editor.css'
+import { basicDark } from 'cm6-theme-basic-dark'
 import type { Story } from '@ladle/react'
 
 export const Basics = () => {
@@ -50,7 +52,30 @@ ReadOnly.argTypes = {
 }
 
 export const CustomTheming = () => {
-  return <MDXEditor className="dark-theme dark-editor" markdown={kitchenSinkMarkdown} plugins={ALL_PLUGINS} />
+  return (
+    <MDXEditor
+      className="dark-theme dark-editor"
+      markdown={kitchenSinkMarkdown}
+      plugins={[
+        toolbarPlugin({ toolbarContents: () => <KitchenSinkToolbar /> }),
+        listsPlugin(),
+        quotePlugin(),
+        headingsPlugin({ allowedHeadingLevels: [1, 2, 3] }),
+        linkPlugin(),
+        linkDialogPlugin(),
+        imagePlugin({ imageAutocompleteSuggestions: ['https://via.placeholder.com/150', 'https://via.placeholder.com/150'] }),
+        tablePlugin(),
+        thematicBreakPlugin(),
+        frontmatterPlugin(),
+        codeBlockPlugin({ defaultCodeBlockLanguage: 'txt' }),
+        sandpackPlugin({ sandpackConfig: virtuosoSampleSandpackConfig }),
+        codeMirrorPlugin({ codeBlockLanguages: { js: 'JavaScript', css: 'CSS', txt: 'text', tsx: 'TypeScript' } }),
+        directivesPlugin({ directiveDescriptors: [YoutubeDirectiveDescriptor, AdmonitionDirectiveDescriptor] }),
+        diffSourcePlugin({ viewMode: 'rich-text', diffMarkdown: 'boo', codeMirrorExtensions: [basicDark] }),
+        markdownShortcutPlugin()
+      ]}
+    />
+  )
 }
 
 export const ConditionalToolbar = () => {

src/plugins/diff-source/DiffViewer.tsx

@@ -23,6 +23,7 @@ interface CmMergeViewProps {
 
 const CmMergeView: React.FC<CmMergeViewProps> = ({ oldMarkdown, newMarkdown, onUpdate }) => {
   const cmMergeViewRef = React.useRef<MergeView | null>(null)
+  const [cmExtensions] = diffSourcePluginHooks.useEmitterValues('cmExtensions')
 
   const ref = React.useCallback(
     (el: HTMLDivElement | null) => {
@@ -40,11 +41,12 @@ const CmMergeView: React.FC<CmMergeViewProps> = ({ oldMarkdown, newMarkdown, onU
           gutter: true,
           a: {
             doc: oldMarkdown,
-            extensions: [...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
+            extensions: [...cmExtensions, ...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
           },
           b: {
             doc: newMarkdown,
             extensions: [
+              ...cmExtensions,
               ...COMMON_STATE_CONFIG_EXTENSIONS,
               EditorView.updateListener.of(({ state }) => {
                 const md = state.doc.toString()
@@ -58,7 +60,7 @@ const CmMergeView: React.FC<CmMergeViewProps> = ({ oldMarkdown, newMarkdown, onU
         cmMergeViewRef.current = null
       }
     },
-    [newMarkdown, oldMarkdown, onUpdate]
+    [newMarkdown, oldMarkdown, onUpdate, cmExtensions]
   )
 
   return <div ref={ref} />

src/plugins/diff-source/SourceEditor.tsx

@@ -11,13 +11,16 @@ export const COMMON_STATE_CONFIG_EXTENSIONS: Extension[] = [basicSetup, basicLig
 
 export const SourceEditor = () => {
   const [markdown, readOnly] = corePluginHooks.useEmitterValues('markdown', 'readOnly')
+  const [cmExtensions] = diffSourcePluginHooks.useEmitterValues('cmExtensions')
   const updateMarkdown = diffSourcePluginHooks.usePublisher('markdownSourceEditorValue')
   const editorViewRef = React.useRef<EditorView | null>(null)
 
   const ref = React.useCallback(
     (el: HTMLDivElement | null) => {
       if (el !== null) {
         const extensions = [
+          // custom extensions should come first so that you can override the default extensions
+          ...cmExtensions,
           ...COMMON_STATE_CONFIG_EXTENSIONS,
           EditorView.updateListener.of(({ state }) => {
             updateMarkdown(state.doc.toString())
@@ -36,7 +39,7 @@ export const SourceEditor = () => {
         editorViewRef.current = null
       }
     },
-    [markdown, readOnly, updateMarkdown]
+    [markdown, readOnly, updateMarkdown, cmExtensions]
   )
 
   return <div ref={ref} className="cm-sourceView" />

src/plugins/diff-source/index.tsx

@@ -1,3 +1,4 @@
+import { Extension } from '@codemirror/state'
 import { realmPlugin, system } from '../../gurx'
 import { coreSystem } from '../core'
 import { DiffSourceWrapper } from './DiffSourceWrapper'
@@ -10,6 +11,7 @@ export const diffSourceSystem = system(
   (r, [{ markdown, setMarkdown }]) => {
     const diffMarkdown = r.node('')
     const markdownSourceEditorValue = r.node('')
+    const cmExtensions = r.node<Extension[]>([])
 
     r.link(markdown, markdownSourceEditorValue)
     const viewMode = r.node<ViewMode>('rich-text')
@@ -34,11 +36,17 @@ export const diffSourceSystem = system(
         }
       }
     )
-    return { viewMode, diffMarkdown, markdownSourceEditorValue }
+    return { viewMode, diffMarkdown, markdownSourceEditorValue, cmExtensions }
   },
   [coreSystem]
 )
 
+export interface DiffSourcePluginParams {
+  viewMode?: ViewMode
+  diffMarkdown?: string
+  codeMirrorExtensions?: Extension[]
+}
+
 export const [
   /** @internal */
   diffSourcePlugin,
@@ -48,11 +56,12 @@ export const [
   id: 'diff-source',
   systemSpec: diffSourceSystem,
 
-  applyParamsToSystem(r, params?: { viewMode?: ViewMode; diffMarkdown?: string }) {
+  applyParamsToSystem(r, params?: DiffSourcePluginParams) {
     r.pubKey('viewMode', params?.viewMode || 'rich-text')
   },
-  init(r, params) {
+  init(r, params?: DiffSourcePluginParams) {
     r.pubKey('diffMarkdown', params?.diffMarkdown || '')
+    r.pubKey('cmExtensions', params?.codeMirrorExtensions || [])
     r.pubKey('addEditorWrapper', DiffSourceWrapper)
   }
 })