Bug/scihub 1401 edit mode does not change (#91)

* bug/SCIHUB-1401 migrate to new milkdown way of handling editable flag * bug/SCIHUB-1401 updated changelog * bug/SCIHUB-1401 remove type from useRef --------- Co-authored-by: Krzysztof Nofz <[email protected]>
DareData · Mar 18, 2024 · 4308895 · 4308895
1 parent 2d60ffb
commit 4308895
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## [v0.3.1]
+
+## Fixed
+- After changing prop mode, it was still possible to write in the editor even though it was disabled.
+
 ## [v0.3.0]
 
 ## Added

diff --git a/src/lib/packages/EditorContext/EditorContextProvider.tsx b/src/lib/packages/EditorContext/EditorContextProvider.tsx
@@ -4,16 +4,14 @@ import {
   defaultValueCtx,
   editorViewOptionsCtx,
 } from '@milkdown/core';
-import { Ctx } from '@milkdown/ctx';
 import { clipboard } from '@milkdown/plugin-clipboard';
 import { emoji } from '@milkdown/plugin-emoji';
 import { history } from '@milkdown/plugin-history';
 import { trailing } from '@milkdown/plugin-trailing';
 import { useEditor, UseEditorReturn } from '@milkdown/react';
-import { createContext, useMemo } from 'react';
+import { createContext, useEffect, useMemo, useRef } from 'react';
 
 import { useCommonmarkPlugin } from './hooks/useCommonmarkPlugin/useCommonmarkPlugin';
-import { useEditorViewPlugin } from './hooks/useEditorViewPlugin';
 import { useGfmPlugin } from './hooks/useGfmPlugin/useGfmPlugin';
 import { useListenerPlugin } from './hooks/useListenerPlugin';
 import { useMathPlugin } from './hooks/useMathPlugin';
@@ -24,6 +22,7 @@ import { usePlaceholderPlugin } from './hooks/usePlaceholderPlugin';
 import { usePrismPlugin } from './hooks/usePrismPlugin';
 import { useSlashPlugin } from './hooks/useSlashPlugin';
 import { useUploadPlugin } from './hooks/useUploadPlugin/useUploadPlugin';
+import { useTextEditorContext } from '../../components/TextEditorContext/useTextEditorContext';
 
 type EditorContextData = {
   editor: UseEditorReturn | null;
@@ -48,6 +47,9 @@ export const EditorContextProvider: React.FC<EditorContextProviderProps> = ({
   debounceChange,
   defaultMarkdownValue,
 }) => {
+  const { mode } = useTextEditorContext();
+  const isEditable = useRef(mode === 'active');
+
   const gfmPlugin = useGfmPlugin();
   const mathPlugin = useMathPlugin();
   const uploadPlugin = useUploadPlugin();
@@ -64,14 +66,16 @@ export const EditorContextProvider: React.FC<EditorContextProviderProps> = ({
     debounceChange,
   });
 
-  useEditorViewPlugin();
-
   const editor = useEditor(
     root =>
       MilkdownEditor.make()
         .config(ctx => {
           ctx.set(rootCtx, root);
           ctx.set(defaultValueCtx, defaultMarkdownValue);
+          ctx.update(editorViewOptionsCtx, prev => ({
+            ...prev,
+            editable: () => isEditable.current,
+          }));
         })
         .use(commonmarkPlugin)
         .use(placeholderPlugin)
@@ -104,6 +108,10 @@ export const EditorContextProvider: React.FC<EditorContextProviderProps> = ({
     ]
   );
 
+  useEffect(() => {
+    isEditable.current = mode === 'active';
+  }, [isEditable, mode]);
+
   const context = useMemo(() => ({ editor }), [editor]);
 
   return (

diff --git a/src/lib/packages/EditorContext/hooks/useEditorViewPlugin.tsx b/src/lib/packages/EditorContext/hooks/useEditorViewPlugin.tsx