update

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -1016,7 +1016,11 @@ class CodeMirrorEditor extends AbstractEditor {
         color={null}
         size="sm"
         title="Table"
-        onClick={() => this.props.onClickTableBtn(mtu.getMarkdownTable(this.getCodeMirror()))}
+        onClick={() => this.props.onClickTableBtn(
+          mtu.getMarkdownTable(this.getCodeMirror()),
+          this.getCodeMirror(),
+          this.props.editorSettings.autoFormatMarkdownTable,
+        )}
       >
         <EditorIcon icon="Table" />
       </Button>,
@@ -1167,9 +1171,10 @@ const CodeMirrorEditorFc = React.forwardRef((props, ref) => {
     openDrawioModal(drawioMxFile);
   }, [openDrawioModal]);
 
-  const openTableModalHandler = useCallback((table) => {
-    openHandsontableModal(table);
-  }, [openHandsontableModal]);
+  const openTableModalHandler = (table, editor, autoFormatMarkdownTable) => {
+    console.log(table, editor, autoFormatMarkdownTable);
+    openHandsontableModal(table, editor, autoFormatMarkdownTable);
+  };
 
   return <CodeMirrorEditor ref={ref} onClickDrawioBtn={openDrawioModalHandler} onClickTableBtn={openTableModalHandler} {...props} />;
 });

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

@@ -34,10 +34,10 @@ export type HandsontableModalProps = {
 
 export const HandsontableModal = (props: HandsontableModalProps): JSX.Element => {
 
-  const { data: handsontableModalData, close: closeHandsontableModal } = useHandsontableModal();
+  const { data: handsontableModalData, close: closeHandsontableModal, onSave } = useHandsontableModal();
   const isOpened = handsontableModalData?.isOpened ?? false;
-
-  // const { onSave, autoFormatMarkdownTable } = props;
+  const autoFormatMarkdownTable = handsontableModalData?.autoFormatMarkdownTable;
+  const editor = handsontableModalData?.editor;
 
   const defaultMarkdownTable = () => {
     return new MarkdownTable(
@@ -131,21 +131,21 @@ export const HandsontableModal = (props: HandsontableModalProps): JSX.Element =>
       return;
     }
 
-    // const markdownTableOption = () => {
-    //   return {
-    //     align: [].concat(markdownTable.options.align),
-    //     pad: autoFormatMarkdownTable !== false,
-    //   };
-    // };
-
-    // const markdownTable = new MarkdownTable(
-    //   hotTable.hotInstance.getData(),
-    //   markdownTableOption,
-    // ).normalizeCells();
-
-    // if (onSave != null) {
-    //   onSave(markdownTable);
-    // }
+    const markdownTableOption = () => {
+      return {
+        align: [].concat(markdownTable.options.align),
+        pad: autoFormatMarkdownTable !== false,
+      };
+    };
+
+    const markdownTable = new MarkdownTable(
+      hotTable.hotInstance.getData(),
+      markdownTableOption,
+    ).normalizeCells();
+
+    if (onSave != null) {
+      onSave(editor, markdownTable);
+    }
 
     cancel();
   };

packages/app/src/stores/modal.tsx

@@ -1,5 +1,7 @@
 import { SWRResponse } from 'swr';
 
+import MarkdownTable from '~/client/models/MarkdownTable';
+import mtu from '~/components/PageEditor/MarkdownTableUtil';
 import { IPageToDeleteWithMeta, IPageToRenameWithMeta } from '~/interfaces/page';
 import {
   OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction, OnPutBackedFunction,
@@ -8,7 +10,6 @@ import { IUserGroupHasId } from '~/interfaces/user';
 
 import { useStaticSWR } from './use-static-swr';
 
-
 /*
 * PageCreateModal
 */
@@ -481,24 +482,45 @@ export const useDrawioModal = (status?: DrawioModalStatus): SWRResponse<DrawioMo
 */
 type HandsontableModalStatus = {
   isOpened: boolean,
-  table: string,
+  table: MarkdownTable,
+  editor: any,
+  autoFormatMarkdownTable: boolean,
 }
 
 type HandsontableModalStatusUtils = {
-  open(table: string): Promise<HandsontableModalStatus | undefined>
+  open(table: MarkdownTable, editor: any, autoFormatMarkdownTable: boolean): Promise<HandsontableModalStatus | undefined>
   close(): Promise<HandsontableModalStatus | undefined>
+  onSave(editor:any, tables: MarkdownTable): void
+  // updateEditor(editor: any): Promise<HandsontableModalStatus | undefined>
+  // updateAutoFormatMarkdownTable(autoFormatMarkdownTable: boolean): Promise<HandsontableModalStatus | undefined>
 }
 
 export const useHandsontableModal = (status?: HandsontableModalStatus): SWRResponse<HandsontableModalStatus, Error> & HandsontableModalStatusUtils => {
-  const initialData: HandsontableModalStatus = { isOpened: false, table: '' };
+  const initialData: HandsontableModalStatus = {
+    isOpened: false, table: new MarkdownTable(), editor: '', autoFormatMarkdownTable: false,
+  };
   const swrResponse = useStaticSWR<HandsontableModalStatus, Error>('handsontableModalStatus', status, { fallbackData: initialData });
 
-  const open = (table: string) => swrResponse.mutate({ isOpened: true, table });
-  const close = () => swrResponse.mutate({ isOpened: false, table: '' });
+  const open = (table: MarkdownTable, editor: any, autoFormatMarkdownTable: boolean) => swrResponse.mutate({
+    isOpened: true, table, editor, autoFormatMarkdownTable,
+  });
+  const close = () => swrResponse.mutate({
+    isOpened: false, table: new MarkdownTable(), editor: '', autoFormatMarkdownTable: false,
+  });
+  const onSave = (editor: any, tables: MarkdownTable) => mtu.replaceFocusedMarkdownTableWithEditor(editor, tables);
+  // const updateEditor = (editor: any) => swrResponse.mutate({
+  //   isOpened: true, table: new MarkdownTable(), editor, autoFormatMarkdownTable: false,
+  // });
+  // const updateAutoFormatMarkdownTable = (autoFormatMarkdownTable: boolean) => swrResponse.mutate({
+  //   isOpened: true, table: new MarkdownTable(), editor: '', autoFormatMarkdownTable,
+  // });
 
   return {
     ...swrResponse,
     open,
     close,
+    onSave,
+    // updateEditor,
+    // updateAutoFormatMarkdownTable,
   };
 };