first move need refactor

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

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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { HotTable } from '@handsontable/react';
 import Handsontable from 'handsontable';
@@ -33,9 +33,12 @@ export const HandsontableModal = (): JSX.Element => {
   const { t } = useTranslation('commons');
   const { data: handsontableModalData, close: closeHandsontableModal, onSave } = useHandsontableModal();
   const isOpened = handsontableModalData?.isOpened ?? false;
+  const tableData = handsontableModalData?.table;
   const autoFormatMarkdownTable = handsontableModalData?.autoFormatMarkdownTable;
   const editor = handsontableModalData?.editor;
 
+  console.log('tableData', tableData);
+
   const defaultMarkdownTable = () => {
     return new MarkdownTable(
       [
@@ -83,9 +86,23 @@ export const HandsontableModal = (): JSX.Element => {
   const [isDataImportAreaExpanded, setIsDataImportAreaExpanded] = useState<boolean>(false);
   const [isWindowExpanded, setIsWindowExpanded] = useState<boolean>(false);
   const [markdownTableOnInit, setMarkdownTableOnInit] = useState<MarkdownTable>(() => defaultMarkdownTable());
-  const [markdownTable, setMarkdownTable] = useState<MarkdownTable>(() => defaultMarkdownTable());
+  const [markdownTable, setMarkdownTable] = useState<MarkdownTable>(tableData ?? defaultMarkdownTable);
   const [handsontableHeight, setHandsontableHeight] = useState<number>(DEFAULT_HOT_HEIGHT);
 
+  useEffect(() => {
+    setMarkdownTable(tableData ?? defaultMarkdownTable);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpened]);
+
+  const markdownTableOption = {
+    get latest() {
+      return {
+        align: [].concat(markdownTable.options.align),
+        pad: autoFormatMarkdownTable !== false,
+      };
+    },
+  };
+
   const init = (markdownTable: MarkdownTable) => {
     const initMarkdownTable = markdownTable || defaultMarkdownTable();
     setMarkdownTableOnInit(initMarkdownTable);
@@ -110,27 +127,18 @@ export const HandsontableModal = (): JSX.Element => {
     setIsWindowExpanded(false);
   };
 
-  const markdownTableOption = {
-    get latest() {
-      return {
-        align: [].concat(markdownTable.options.align),
-        pad: autoFormatMarkdownTable !== false,
-      };
-    },
-  };
-
   const save = async() => {
     if (hotTable == null) {
       return;
     }
 
-    const updateMarkdownTable = new MarkdownTable(
+    const newMarkdownTable = new MarkdownTable(
       hotTable.hotInstance.getData(),
       markdownTableOption.latest,
     ).normalizeCells();
 
     if (onSave != null) {
-      onSave(editor, updateMarkdownTable);
+      onSave(editor, newMarkdownTable);
     }
 
     cancel();
@@ -192,7 +200,9 @@ export const HandsontableModal = (): JSX.Element => {
     const align = markdownTable.options.align;
     const hotInstance = hotTable.hotInstance;
 
-    if (hotInstance.isDestroyed === true) {
+    console.log('aa', markdownTable);
+
+    if (hotInstance.isDestroyed === true || align == null) {
       return;
     }
 

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

@@ -93,6 +93,7 @@ class MarkdownTableUtil {
     }
 
     const strFromBotToEot = editor.getDoc().getRange(this.getBot(editor), this.getEot(editor));
+    console.log('get', MarkdownTable.fromMarkdownString(strFromBotToEot));
     return MarkdownTable.fromMarkdownString(strFromBotToEot);
   }