add mousedown event handler

weseek · May 21, 2024 · 9e74a7a · 9e74a7a
1 parent a4fe1e7
commit 9e74a7a
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 17 deletions.
diff --git a/packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.module.scss b/packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.module.scss
@@ -39,33 +39,38 @@
       font-size: 1.2em;
     }
 
-    .cm-cursor {
-      &:after {
-        position: relative;
-        top: 0em;
-        left: 0.3em;
-        display: block;
-        width: 1em;
-        height: 1em;
-        content: ' ';
-
-        background-repeat: no-repeat;
-        background-size: 1em;
+    .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);
     // }
 
-    .cm-cursor.cm-cursor-primary {
-      &:after {
-        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;
     // }

diff --git a/packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx b/packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx
@@ -1,5 +1,5 @@
 import {
-  forwardRef, useMemo, useRef, useEffect,
+  forwardRef, useMemo, useRef, useEffect, useState,
   DetailedHTMLProps,
 } from 'react';
 
@@ -17,6 +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 { useDefaultExtensions, useCodeMirrorEditorIsolated, useEditorSettings } from '../../stores';
 
 import { Toolbar } from './Toolbar';
@@ -71,6 +72,8 @@ 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);
 
@@ -159,6 +162,37 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [onScroll, codeMirrorEditor]);
 
+  useEffect(() => {
+
+    const markdownTableActivatedClass = 'markdown-table-activated';
+
+    const handleMousedown = (event: Event) => {
+      // event.preventDefault();
+
+      const editor = codeMirrorEditor?.view;
+
+      if (editor == null) {
+        return;
+      }
+
+      if (isInTable(editor)) {
+        // set class
+        setEditorClass(markdownTableActivatedClass);
+      }
+      else {
+        setEditorClass('');
+      }
+    };
+
+    const extension = EditorView.domEventHandlers({
+      mousedown: handleMousedown,
+    });
+
+    const cleanupFunction = codeMirrorEditor?.appendExtensions(extension);
+
+    return cleanupFunction;
+
+  }, [codeMirrorEditor]);
 
   const {
     getRootProps,
@@ -210,7 +244,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [isUploading, isDragAccept, isDragReject, acceptedUploadFileType]);
 
   return (
-    <div className={`${style['codemirror-editor']} flex-expand-vert overflow-y-hidden`}>
+    <div className={`${style['codemirror-editor']} ${editorClass} flex-expand-vert overflow-y-hidden`}>
       <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
         <input {...getInputProps()} />
         <FileDropzoneOverlay isEnabled={isDragActive} />