134432 read table in editor

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -102,7 +102,7 @@ export const HandsontableModal = (): JSX.Element => {
   const debouncedHandleWindowExpandedChange = debounce(100, handleWindowExpandedChange);
 
   const handleModalOpen = () => {
-    const initTableInstance = table == null ? defaultMarkdownTable : table.clone();
+    const initTableInstance = table == null ? defaultMarkdownTable : table;
     setMarkdownTable(table ?? defaultMarkdownTable);
     setMarkdownTableOnInit(initTableInstance);
     debouncedHandleWindowExpandedChange();

apps/app/src/components/PageEditor/MarkdownTableUtil.js

@@ -94,7 +94,7 @@ class MarkdownTableUtil {
       return null;
     }
 
-    const strFromBotToEot = editor.getDoc().getRange(this.getBot(editor), this.getEot(editor));
+    const strFromBotToEot = editor.state.sliceDoc(this.getBot(editor), this.getEot(editor));
     return MarkdownTable.fromMarkdownString(strFromBotToEot);
   }
 

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -19,6 +19,7 @@ import { throttle, debounce } from 'throttle-debounce';
 import { useUpdateStateAfterSave, useSaveOrUpdate } from '~/client/services/page-operation';
 import { apiGet, apiPostForm } from '~/client/util/apiv1-client';
 import { toastError, toastSuccess } from '~/client/util/toastr';
+import mtu from '~/components/PageEditor/MarkdownTableUtil';
 import { OptionsToSave } from '~/interfaces/page-operation';
 import { SocketEventName } from '~/interfaces/websocket';
 import {
@@ -33,7 +34,7 @@ import {
   useEditingMarkdown,
   useWaitingSaveProcessing,
 } from '~/stores/editor';
-import { useConflictDiffModal } from '~/stores/modal';
+import { useConflictDiffModal, useHandsontableModal } from '~/stores/modal';
 import {
   useCurrentPagePath, useSWRMUTxCurrentPage, useSWRxCurrentPage, useSWRxTagsInfo, useCurrentPageId, useIsNotFound, useIsLatestRevision, useTemplateBodyData,
 } from '~/stores/page';
@@ -127,6 +128,8 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   const { mutate: mutateResolvedTheme } = useResolvedThemeForEditor();
 
+  const { open: openHandsontableModal } = useHandsontableModal();
+
   const saveOrUpdate = useSaveOrUpdate();
   const updateStateAfterSave = useUpdateStateAfterSave(pageId, { supressEditingMarkdownMutation: true });
 
@@ -183,6 +186,15 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
+  const openTableModalHandler = useCallback(() => {
+    const editor = codeMirrorEditor?.view;
+    const markdownTable = mtu.getMarkdownTable(editor);
+    if (markdownTable == null) {
+      return;
+    }
+    openHandsontableModal(markdownTable, editor);
+  }, [openHandsontableModal]);
+
 
   const checkIsConflict = useCallback((data) => {
     const { s2cMessagePageUpdated } = data;
@@ -586,6 +598,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
             onUpload={uploadHandler}
             indentSize={currentIndentSize ?? defaultIndentSize}
             acceptedFileType={acceptedFileType}
+            openTabelModal={openTableModalHandler}
           />
         </div>
         <div className="page-editor-preview-container flex-expand-vert d-none d-lg-flex">

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

@@ -26,6 +26,7 @@ type Props = {
   onChange?: (value: string) => void,
   onUpload?: (files: File[]) => void,
   indentSize?: number,
+  openTabelModal: () => void,
 }
 
 export const CodeMirrorEditor = (props: Props): JSX.Element => {
@@ -35,6 +36,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     onChange,
     onUpload,
     indentSize,
+    openTabelModal,
   } = props;
 
   const containerRef = useRef(null);
@@ -139,14 +141,14 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     }
 
     return '';
-  }, [isUploading, isDragAccept,isDragReject, acceptedFileType]);
+  }, [isUploading, isDragAccept, isDragReject, acceptedFileType]);
 
   return (
     <div className={`${style['codemirror-editor']} flex-expand-vert`}>
       <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
-        <FileDropzoneOverlay isEnabled={isDragActive}/>
+        <FileDropzoneOverlay isEnabled={isDragActive} />
         <CodeMirrorEditorContainer ref={containerRef} />
-        <Toolbar editorKey={editorKey} onFileOpen={open} acceptedFileType={acceptedFileType} />
+        <Toolbar editorKey={editorKey} onFileOpen={open} acceptedFileType={acceptedFileType} openTabelModal={openTabelModal} />
       </div>
     </div>
   );

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

@@ -1,29 +1,17 @@
 import { useCallback, useEffect } from 'react';
 
-import { useCodeMirrorEditorIsolated } from '../../../stores';
 import { useHandsontableModal } from '../../../stores/use-handosontable';
 
 
 type TableButtonProps = {
   editorKey: string,
+  openTabelModal: () => void;
 }
 
 export const TableButton = (props: TableButtonProps): JSX.Element => {
-  const { editorKey } = props;
-  const { open: openHandsontableModal } = useHandsontableModal();
-  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
-  useEffect(() => {
-    if (codeMirrorEditor) {
-      const editor = codeMirrorEditor.view;
-      openHandsontableModal(editor);
-    }
-  }, [codeMirrorEditor, openHandsontableModal]);
-  const openTableModalHandler = useCallback(() => {
-    const editor = codeMirrorEditor?.view;
-    openHandsontableModal(editor);
-  }, [codeMirrorEditor?.view, openHandsontableModal]);
+  const { openTabelModal } = props;
   return (
-    <button type="button" className="btn btn-toolbar-button" onClick={openTableModalHandler}>
+    <button type="button" className="btn btn-toolbar-button" onClick={openTabelModal}>
       <span className="material-symbols-outlined fs-5">table_chart</span>
     </button>
   );

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

@@ -15,12 +15,15 @@ import styles from './Toolbar.module.scss';
 type Props = {
   editorKey: string,
   onFileOpen: () => void,
-  acceptedFileType: AcceptedUploadFileType
+  acceptedFileType: AcceptedUploadFileType,
+  openTabelModal: () => void,
 }
 
 export const Toolbar = memo((props: Props): JSX.Element => {
 
-  const { editorKey, onFileOpen, acceptedFileType } = props;
+  const {
+    editorKey, onFileOpen, acceptedFileType, openTabelModal,
+  } = props;
 
   return (
     <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
@@ -29,7 +32,7 @@ export const Toolbar = memo((props: Props): JSX.Element => {
       <EmojiButton
         editorKey={editorKey}
       />
-      <TableButton editorKey={editorKey} />
+      <TableButton editorKey={editorKey} openTabelModal={openTabelModal} />
       <DiagramButton />
       <TemplateButton />
     </div>

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -19,11 +19,12 @@ type Props = {
   onUpload?: (files: File[]) => void,
   acceptedFileType?: AcceptedUploadFileType,
   indentSize?: number,
+  openTabelModal: () => void,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    onSave, onChange, onUpload, acceptedFileType, indentSize,
+    onSave, onChange, onUpload, openTabelModal, acceptedFileType, indentSize,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -67,6 +68,7 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
       onUpload={onUpload}
       acceptedFileType={acceptedFileTypeNoOpt}
       indentSize={indentSize}
+      openTabelModal={openTabelModal}
     />
   );
 };