chore: add reactive editable editor

src/components/RichTextEditor.tsx

@@ -16,6 +16,7 @@ import { removeCSS, updateCSS } from '@/utils/dynamicCSS'
 
 import '../styles/index.scss'
 import CharactorCount from '@/components/CharactorCount'
+import { editableEditorActions } from '@/store/editableEditor'
 
 /**
  * Interface for RichTextEditor component props
@@ -110,6 +111,7 @@ function RichTextEditor(props: RichTextEditorProps, ref: React.ForwardedRef<{ ed
 
   useEffect(() => {
     editor?.setEditable(!props?.disabled)
+    editableEditorActions.setDisable(!props?.disabled)
   }, [editor, props?.disabled])
 
   useEffect(() => {

src/extensions/Attachment/components/NodeViewAttachment/NodeViewAttachment.tsx

@@ -10,10 +10,13 @@ import styles from './index.module.scss'
 import { extractFileExtension, extractFilename, normalizeFileSize } from '@/utils/file'
 import { ActionButton } from '@/components'
 import { useLocale } from '@/locales'
+import { useEditableEditor } from '@/store/editableEditor'
 
 export function NodeViewAttachment({ editor, node, updateAttributes, deleteNode, extension }: any) {
   const $upload: any = useRef<HTMLInputElement>()
-  const isEditable = editor.isEditable
+
+  const isEditable = useEditableEditor()
+
   const { hasTrigger, fileName, fileSize, fileExt, fileType, url, error } = node.attrs
   const [loading, setLoading] = useState(false)
   const { t } = useLocale()

src/extensions/CodeBlock/components/NodeViewCodeBlock/NodeViewCodeBlock.tsx

@@ -13,6 +13,7 @@ import useCopy from '@/hooks/useCopy'
 import { deleteNode } from '@/utils/delete-node'
 import { DEFAULT_LANGUAGE_CODE_BLOCK } from '@/constants'
 import { IconComponent } from '@/components'
+import { useEditableEditor } from '@/store/editableEditor'
 
 export function NodeViewCodeBlock({ editor, node: { attrs }, updateAttributes, extension }: any) {
   const { isCopied, copyToClipboard } = useCopy()
@@ -21,7 +22,8 @@ export function NodeViewCodeBlock({ editor, node: { attrs }, updateAttributes, e
     return extension.options.languages?.length ? extension.options.languages : DEFAULT_LANGUAGE_CODE_BLOCK
   }, [extension.options.languages])
 
-  const isEditable = editor.isEditable
+  const isEditable = useEditableEditor()
+
   const isPrint = editor?.options?.editorProps?.print
   const { language: defaultLanguage } = attrs
   const $container: any = useRef<HTMLPreElement>()
@@ -31,7 +33,11 @@ export function NodeViewCodeBlock({ editor, node: { attrs }, updateAttributes, e
   return (
     <NodeViewWrapper className={clsx(styles.wrap, !isPrint && styles.maxHeight, 'render-wrapper')}>
 
-      <div className={styles.blockInfo}>
+      <div className={clsx(styles.blockInfo, {
+        [styles.blockInfoEditable]: !isEditable,
+      })}
+
+      >
         <span
           onClick={() => copyToClipboard($container.current.innerText)}
           className={clsx(styles.btnCopy, isCopied && styles.copied)}

src/extensions/CodeBlock/components/NodeViewCodeBlock/index.module.scss

@@ -33,6 +33,10 @@
   gap: 8px;
 }
 
+.blockInfoEditable {
+  display: none;
+}
+
 .selectLang {
   cursor: pointer;
   transition: all .3s;

src/extensions/Iframe/components/IframeNodeView.tsx

@@ -9,9 +9,11 @@ import styles from './index.module.scss'
 // import { getEditorContainerDOMSize } from '@/utils'
 import { Button, Input } from '@/components/ui'
 import { Iframe } from '@/extensions/Iframe/Iframe'
+import { useEditableEditor } from '@/store/editableEditor'
 
 function IframeNodeView({ editor, node, updateAttributes }: any) {
-  const isEditable = editor.isEditable
+  const isEditable = useEditableEditor()
+
   const { url, width, height } = node.attrs
   // const { width: maxWidth } = getEditorContainerDOMSize(editor)
 

src/extensions/TableOfContent/components/NodeViewTableOfContent.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-duplicate-key */
 /* eslint-disable ts/no-unused-expressions */
 import { useCallback, useEffect, useState } from 'react'
 
@@ -8,6 +7,7 @@ import cls from 'clsx'
 
 import styles from './index.module.scss'
 import { useLocale } from '@/locales'
+import { useEditableEditor } from '@/store/editableEditor'
 
 function arrToTree(tocs: any) {
   const result = [] as any
@@ -29,7 +29,7 @@ function arrToTree(tocs: any) {
 }
 
 export function NodeViewTableOfContent({ editor }: any) {
-  const isEditable = editor.isEditable
+  const isEditable = useEditableEditor()
   const [items, setItems] = useState([])
   const { t } = useLocale()
 

src/store/editableEditor.ts

@@ -0,0 +1,16 @@
+import { proxy, useSnapshot } from 'valtio'
+
+const editableEditorProxy = proxy({
+  disable: false,
+})
+
+export function useEditableEditor() {
+  const editableEditor = useSnapshot(editableEditorProxy)
+  return editableEditor.disable
+}
+
+export const editableEditorActions = {
+  setDisable: (disable: boolean) => {
+    editableEditorProxy.disable = disable
+  },
+}