add event listener for detecting change of cursor position

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.module.scss

@@ -38,39 +38,6 @@
     .cm-header-6 {
       font-size: 1.2em;
     }
-
-    .markdown-table-activated {
-      .cm-cursor {
-        &:after {
-          position: relative;
-          top: 0em;
-          left: 0.3em;
-          display: block;
-          width: 1em;
-          height: 1em;
-          content: ' ';
-
-          background-repeat: no-repeat;
-          background-size: 1em;
-        }
-      }
-    }
-
-    // .cm-cursor.cm-cursor-primary {
-    //   background-image: url(../../../svg/table.svg);
-    // }
-
-    .markdown-table-activated {
-      .cm-cursor.cm-cursor-primary {
-        &:after {
-          background-image: url(../../../svg/table.svg);
-        }
-      }
-    }
-
-
-
-
     // .cm-cursor.cm-cursor-primary {
     //   border-color: aqua;
     // }
@@ -79,7 +46,6 @@
 
 }
 
-
 @mixin insertMaterialSymbolAndMessage($code, $message) {
   .overlay-icon:before {
     margin-right: 0.2em;
@@ -174,5 +140,26 @@
     }
     /* end of.dropzone */
   }
-}
 
+  .markdown-table-activated .cm-cursor {
+    &:after {
+      position: relative;
+      top: 0em;
+      left: 0.3em;
+      display: block;
+      width: 1em;
+      height: 1em;
+      content: ' ';
+      background-repeat: no-repeat;
+      background-size: 1em;
+    }
+  }
+  // .cm-cursor.cm-cursor-primary {
+  //   background-image: url(../../../svg/table.svg);
+  // }
+  .markdown-table-activated .cm-cursor.cm-cursor-primary {
+    &:after {
+      background-image: url(../../../svg/table.svg);
+    }
+  }
+}

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

@@ -4,8 +4,10 @@ import {
 } 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';
@@ -162,37 +164,69 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [onScroll, codeMirrorEditor]);
 
-  useEffect(() => {
+  // useEffect(() => {
 
-    const markdownTableActivatedClass = 'markdown-table-activated';
+  //   const markdownTableActivatedClass = 'markdown-table-activated';
 
-    const handleMousedown = (event: Event) => {
-      // event.preventDefault();
+  //   const editor = codeMirrorEditor?.view;
 
-      const editor = codeMirrorEditor?.view;
+  //   const handleFocusChanged = () => {
 
-      if (editor == null) {
-        return;
-      }
+  //     if (editor == null) {
+  //       return;
+  //     }
 
-      if (isInTable(editor)) {
-        // set class
-        setEditorClass(markdownTableActivatedClass);
-      }
-      else {
-        setEditorClass('');
-      }
-    };
+  //     if (isInTable(editor)) {
+  //       // set class
+  //       setEditorClass(markdownTableActivatedClass);
+  //     }
+  //     else {
+  //       setEditorClass('');
+  //     }
 
-    const extension = EditorView.domEventHandlers({
-      mousedown: handleMousedown,
-    });
+  //   };
 
-    const cleanupFunction = codeMirrorEditor?.appendExtensions(extension);
+  //   const extension = EditorView.domEventHandlers({
+  //     cursorActivity: handleFocusChanged,
+  //   });
 
-    return cleanupFunction;
+  //   EditorView.updateListener.of((v: ViewUpdate) => {
+  //     if (v.transactions.some(tr => tr.selection)) {
+  //       handleFocusChanged();
+  //     }
+  //   });
 
-  }, [codeMirrorEditor]);
+  //   const cleanupFunction = codeMirrorEditor?.appendExtensions(extension);
+
+  //   return cleanupFunction;
+
+  // }, [codeMirrorEditor]);
+
+  const markdownTableActivatedClass = 'markdown-table-activated';
+  const editor = codeMirrorEditor?.view;
+  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();
+    }
+  });
+
+  editor?.dispatch({
+    effects: StateEffect.appendConfig.of(cursorPositionListener),
+  });
+
+  // EditorView.;
 
   const {
     getRootProps,
@@ -244,8 +278,8 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [isUploading, isDragAccept, isDragReject, acceptedUploadFileType]);
 
   return (
-    <div className={`${style['codemirror-editor']} ${editorClass} flex-expand-vert overflow-y-hidden`}>
-      <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
+    <div className={`${style['codemirror-editor']} flex-expand-vert overflow-y-hidden`}>
+      <div {...getRootProps()} className={`dropzone  ${editorClass}  ${fileUploadState} flex-expand-vert`}>
         <input {...getInputProps()} />
         <FileDropzoneOverlay isEnabled={isDragActive} />
         <CodeMirrorEditorContainer ref={containerRef} />