fix: source modes trigger onBlur

Fixes #222 Fixes #216
mdx-editor · Dec 7, 2023 · f38c179 · f38c179
1 parent bbc4974
commit f38c179
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/plugins/diff-source/DiffViewer.tsx b/src/plugins/diff-source/DiffViewer.tsx
@@ -24,6 +24,7 @@ interface CmMergeViewProps {
 const CmMergeView: React.FC<CmMergeViewProps> = ({ oldMarkdown, newMarkdown, onUpdate }) => {
   const cmMergeViewRef = React.useRef<MergeView | null>(null)
   const [cmExtensions] = diffSourcePluginHooks.useEmitterValues('cmExtensions')
+  const triggerOnBlur = corePluginHooks.usePublisher('onBlur')
 
   const ref = React.useCallback(
     (el: HTMLDivElement | null) => {
@@ -51,6 +52,12 @@ const CmMergeView: React.FC<CmMergeViewProps> = ({ oldMarkdown, newMarkdown, onU
               EditorView.updateListener.of(({ state }) => {
                 const md = state.doc.toString()
                 onUpdate(md)
+              }),
+              EditorView.focusChangeEffect.of((_, focused) => {
+                if (!focused) {
+                  triggerOnBlur(new FocusEvent('blur'))
+                }
+                return null
               })
             ]
           }
@@ -60,7 +67,7 @@ const CmMergeView: React.FC<CmMergeViewProps> = ({ oldMarkdown, newMarkdown, onU
         cmMergeViewRef.current = null
       }
     },
-    [newMarkdown, oldMarkdown, onUpdate, cmExtensions]
+    [newMarkdown, oldMarkdown, onUpdate, cmExtensions, triggerOnBlur]
   )
 
   return <div ref={ref} />

diff --git a/src/plugins/diff-source/SourceEditor.tsx b/src/plugins/diff-source/SourceEditor.tsx
@@ -19,6 +19,7 @@ export const SourceEditor = () => {
   const [markdown, readOnly] = corePluginHooks.useEmitterValues('markdown', 'readOnly')
   const [cmExtensions] = diffSourcePluginHooks.useEmitterValues('cmExtensions')
   const updateMarkdown = diffSourcePluginHooks.usePublisher('markdownSourceEditorValue')
+  const triggerOnBlur = corePluginHooks.usePublisher('onBlur')
   const editorViewRef = React.useRef<EditorView | null>(null)
 
   const ref = React.useCallback(
@@ -30,6 +31,12 @@ export const SourceEditor = () => {
           ...COMMON_STATE_CONFIG_EXTENSIONS,
           EditorView.updateListener.of(({ state }) => {
             updateMarkdown(state.doc.toString())
+          }),
+          EditorView.focusChangeEffect.of((_, focused) => {
+            if (!focused) {
+              triggerOnBlur(new FocusEvent('blur'))
+            }
+            return null
           })
         ]
         if (readOnly) {
@@ -45,7 +52,7 @@ export const SourceEditor = () => {
         editorViewRef.current = null
       }
     },
-    [markdown, readOnly, updateMarkdown, cmExtensions]
+    [markdown, readOnly, updateMarkdown, cmExtensions, triggerOnBlur]
   )
 
   return <div ref={ref} className="cm-sourceView" />