diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00ffe80d..1d9af043 100644
--- 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
index 63c44ceb..546abd7e 100644
--- 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
deleted file mode 100644
index 24cae073..00000000
--- a/src/lib/packages/EditorContext/hooks/useEditorViewPlugin.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { EditorStatus, editorViewOptionsCtx } from '@milkdown/core';
-import { Ctx } from '@milkdown/ctx';
-import { useEffect } from 'react';
-
-import { useTextEditorContext } from '../../../components/TextEditorContext/useTextEditorContext';
-import { useMilkdownInstance } from '../../../hooks/useMilkdownInstance';
-
-export const useEditorViewPlugin = () => {
-  const { loading, editor } = useMilkdownInstance();
-  const { mode } = useTextEditorContext();
-
-  useEffect(() => {
-    const effect = async () => {
-      if (loading || !editor || editor.status !== EditorStatus.Created) {
-        return;
-      }
-
-      editor.use(
-        [
-          (ctx: Ctx) => () => {
-            ctx.update(editorViewOptionsCtx, prev => ({
-              ...prev,
-              editable: () => mode === 'active',
-            }));
-          },
-        ].flat()
-      );
-
-      await editor.create();
-    };
-
-    requestAnimationFrame(() => {
-      effect();
-    });
-  }, [loading, editor, mode]);
-};