improve extension

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -75,6 +75,8 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   useDefaultExtensions(codeMirrorEditor);
   useEditorSettings(codeMirrorEditor, editorSettings, onSave);
 
+  useShowTableIcon(codeMirrorEditor);
+
   useEffect(() => {
     if (indentSize == null) {
       return;
@@ -160,8 +162,6 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [onScroll, codeMirrorEditor]);
 
-  const { editorClass } = useShowTableIcon(codeMirrorEditor);
-
   const {
     getRootProps,
     getInputProps,
@@ -213,7 +213,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   return (
     <div className={`${style['codemirror-editor']} flex-expand-vert overflow-y-hidden`}>
-      <div {...getRootProps()} className={`dropzone  ${editorClass}  ${fileUploadState} flex-expand-vert`}>
+      <div {...getRootProps()} className={`dropzone  ${fileUploadState} flex-expand-vert`}>
         <input {...getInputProps()} />
         <FileDropzoneOverlay isEnabled={isDragActive} />
         <CodeMirrorEditorContainer ref={containerRef} />

packages/editor/src/services/table-util/use-show-table-icon.ts

@@ -10,7 +10,7 @@ import { isInTable } from './insert-new-row-to-table-markdown';
 
 const markdownTableActivatedClass = 'markdown-table-activated';
 
-export const useShowTableIcon = (codeMirrorEditor?: UseCodeMirrorEditor): { editorClass: string } => {
+export const useShowTableIcon = (codeMirrorEditor?: UseCodeMirrorEditor): void => {
 
   const [editorClass, setEditorClass] = useState('');
 
@@ -30,18 +30,24 @@ export const useShowTableIcon = (codeMirrorEditor?: UseCodeMirrorEditor): { edit
       }
     };
 
-    const cursorPositionListener = EditorView.updateListener.of((v: ViewUpdate) => {
-      if (v.transactions.some(tr => tr.selection || tr.docChanged)) {
-        handleFocusChanged();
-      }
-    });
-
-    const cleanupFunction = codeMirrorEditor?.appendExtensions(cursorPositionListener);
+    const cleanupFunction = codeMirrorEditor?.appendExtensions(
+      EditorView.updateListener.of((v: ViewUpdate) => {
+        if (v.transactions.some(tr => tr.selection || tr.docChanged)) {
+          handleFocusChanged();
+        }
+      }),
+    );
 
     return cleanupFunction;
 
   }, [codeMirrorEditor, editor]);
 
-  return { editorClass };
+  useEffect(() => {
+    const cleanupFunction = codeMirrorEditor?.appendExtensions(
+      EditorView.editorAttributes.of({ class: editorClass }),
+    );
+
+    return cleanupFunction;
+  }, [codeMirrorEditor, editorClass]);
 
 };