refactor the extension into separate hooks

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

@@ -1,13 +1,11 @@
 import {
-  forwardRef, useMemo, useRef, useEffect, useState,
+  forwardRef, useMemo, useRef, useEffect,
   DetailedHTMLProps,
 } from 'react';
 
 import { indentUnit } from '@codemirror/language';
-import { StateEffect } from '@codemirror/state';
 import {
   EditorView,
-  ViewUpdate,
 } from '@codemirror/view';
 import { AcceptedUploadFileType } from '@growi/core';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
@@ -19,7 +17,7 @@ import {
 import {
   adjustPasteData, getStrFromBol,
 } from '../../services/paste-util/paste-markdown-util';
-import { isInTable } from '../../services/table-util/insert-new-row-to-table-markdown';
+import { useShowTableIcon } from '../../services/table-util/use-show-table-icon';
 import { useDefaultExtensions, useCodeMirrorEditorIsolated, useEditorSettings } from '../../stores';
 
 import { Toolbar } from './Toolbar';
@@ -74,8 +72,6 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [onChange]);
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
 
-  const [editorClass, setEditorClass] = useState('');
-
   useDefaultExtensions(codeMirrorEditor);
   useEditorSettings(codeMirrorEditor, editorSettings, onSave);
 
@@ -165,30 +161,33 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [onScroll, codeMirrorEditor]);
 
 
-  const markdownTableActivatedClass = 'markdown-table-activated';
-  const editor = codeMirrorEditor?.view;
+  // const markdownTableActivatedClass = 'markdown-table-activated';
+  // const editor = codeMirrorEditor?.view;
 
-  const handleFocusChanged = () => {
-    if (editor == null) {
-      return;
-    }
-    if (isInTable(editor)) {
-      setEditorClass(markdownTableActivatedClass);
-    }
-    else {
-      setEditorClass('');
-    }
-  };
+  // const handleFocusChanged = () => {
+  //   if (editor == null) {
+  //     return;
+  //   }
+  //   if (isInTable(editor)) {
+  //     setEditorClass(markdownTableActivatedClass);
+  //   }
+  //   else {
+  //     setEditorClass('');
+  //   }
+  // };
 
-  const cursorPositionListener = EditorView.updateListener.of((v: ViewUpdate) => {
-    if (v.transactions.some(tr => tr.selection || tr.docChanged)) {
-      handleFocusChanged();
-    }
-  });
+  // const cursorPositionListener = EditorView.updateListener.of((v: ViewUpdate) => {
+  //   if (v.transactions.some(tr => tr.selection || tr.docChanged)) {
+  //     handleFocusChanged();
+  //   }
+  // });
 
-  editor?.dispatch({
-    effects: StateEffect.appendConfig.of(cursorPositionListener),
-  });
+  // editor?.dispatch({
+  //   effects: StateEffect.appendConfig.of(cursorPositionListener),
+  // });
+
+
+  const { editorClass } = useShowTableIcon(codeMirrorEditor);
 
 
   const {

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

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+
+import { ViewUpdate } from '@codemirror/view';
+import { EditorView } from 'codemirror';
+
+
+import { UseCodeMirrorEditor } from '../codemirror-editor';
+
+import { isInTable } from './insert-new-row-to-table-markdown';
+
+const markdownTableActivatedClass = 'markdown-table-activated';
+
+export const useShowTableIcon = (codeMirrorEditor?: UseCodeMirrorEditor): { editorClass: string } => {
+
+  const [editorClass, setEditorClass] = useState('');
+
+  const editor = codeMirrorEditor?.view;
+
+  useEffect(() => {
+
+    const handleFocusChanged = () => {
+      if (editor == null) {
+        return;
+      }
+      if (isInTable(editor)) {
+        setEditorClass(markdownTableActivatedClass);
+      }
+      else {
+        setEditorClass('');
+      }
+    };
+
+    const cursorPositionListener = EditorView.updateListener.of((v: ViewUpdate) => {
+      if (v.transactions.some(tr => tr.selection || tr.docChanged)) {
+        handleFocusChanged();
+      }
+    });
+
+    // const extension = editor?.dispatch({
+    //   effects: StateEffect.appendConfig.of(cursorPositionListener),
+    // });
+
+    const cleanupFunction = codeMirrorEditor?.appendExtensions(cursorPositionListener);
+
+    return cleanupFunction;
+
+  }, [codeMirrorEditor, editor]);
+
+  return { editorClass };
+
+};