Merge remote-tracking branch 'origin/master' into imprv/140987-145787-display-selected-TreeItem-in-PageSelectModal-as-active

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

@@ -43,7 +43,6 @@
 
 }
 
-
 @mixin insertMaterialSymbolAndMessage($code, $message) {
   .overlay-icon:before {
     margin-right: 0.2em;
@@ -138,5 +137,24 @@
     }
     /* 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;
+    }
+  }
+
+  .markdown-table-activated .cm-cursor.cm-cursor-primary {
+    &:after {
+      background-image: url(../../../svg/table.svg);
+    }
+  }
+}

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

@@ -17,6 +17,7 @@ import {
 import {
   adjustPasteData, getStrFromBol,
 } from '../../services/paste-util/paste-markdown-util';
+import { useShowTableIcon } from '../../services/table-util/use-show-table-icon';
 import { useDefaultExtensions, useCodeMirrorEditorIsolated, useEditorSettings } from '../../stores';
 
 import { Toolbar } from './Toolbar';
@@ -74,6 +75,8 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   useDefaultExtensions(codeMirrorEditor);
   useEditorSettings(codeMirrorEditor, editorSettings, onSave);
 
+  useShowTableIcon(codeMirrorEditor);
+
   useEffect(() => {
     if (indentSize == null) {
       return;
@@ -159,7 +162,6 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [onScroll, codeMirrorEditor]);
 
-
   const {
     getRootProps,
     getInputProps,
@@ -211,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 ${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

@@ -0,0 +1,53 @@
+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): void => {
+
+  const [editorClass, setEditorClass] = useState('');
+
+  const editor = codeMirrorEditor?.view;
+
+  useEffect(() => {
+
+    const handleFocusChanged = () => {
+      if (editor == null) {
+        return;
+      }
+      if (isInTable(editor)) {
+        setEditorClass(markdownTableActivatedClass);
+      }
+      else {
+        setEditorClass('');
+      }
+    };
+
+    const cleanupFunction = codeMirrorEditor?.appendExtensions(
+      EditorView.updateListener.of((v: ViewUpdate) => {
+        if (v.transactions.some(tr => tr.selection || tr.docChanged)) {
+          handleFocusChanged();
+        }
+      }),
+    );
+
+    return cleanupFunction;
+
+  }, [codeMirrorEditor, editor]);
+
+  useEffect(() => {
+    const cleanupFunction = codeMirrorEditor?.appendExtensions(
+      EditorView.editorAttributes.of({ class: editorClass }),
+    );
+
+    return cleanupFunction;
+  }, [codeMirrorEditor, editorClass]);
+
+};

packages/editor/svg/table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="203" height="160" viewBox="0 0 20.3 16"><path d="M19.1 16H1.2A1.2 1.2 0 0 1 0 14.8V1.2A1.2 1.2 0 0 1 1.2 0h17.9a1.2 1.2 0 0 1 1.2 1.2v13.6a1.2 1.2 0 0 1-1.2 1.2zm-5.2-4.3v3.2h5.3v-3.2zm-6.4 0v3.2h5.3v-3.2zm-6.4 0v3.2h5.3v-3.2zm12.8-4.2v3.2h5.3V7.5zm-6.4 0v3.2h5.3V7.5zm-6.4 0v3.2h5.3V7.5zm12.8-4.3v3.2h5.3V3.2zm-6.4 0v3.2h5.3V3.2zm-6.4 0v3.2h5.3V3.2z"/></svg>