clean code

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

@@ -891,6 +891,16 @@ class CodeMirrorEditor extends AbstractEditor {
     );
   }
 
+  clickTableIconHandler() {
+    const markdownTable = mtu.getMarkdownTable(this.getCodeMirror());
+
+    this.props.onClickTableBtn(
+      markdownTable,
+      this.getCodeMirror(),
+      this.props.editorSettings.autoFormatMarkdownTable,
+    );
+  }
+
   getNavbarItems() {
     return [
       <Button
@@ -1016,13 +1026,7 @@ 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={this.clickTableIconHandler}
       >
         <EditorIcon icon="Table" />
       </Button>,
@@ -1164,8 +1168,8 @@ const CodeMirrorEditorFc = React.forwardRef((props, ref) => {
     openDrawioModal(drawioMxFile, onSave);
   }, [openDrawioModal]);
 
-  const openTableModalHandler = useCallback((table, editor, autoFormatMarkdownTable) => {
-    openHandsontableModal(table, editor, autoFormatMarkdownTable);
+  const openTableModalHandler = useCallback((markdownTable, editor, autoFormatMarkdownTable) => {
+    openHandsontableModal(markdownTable, editor, autoFormatMarkdownTable);
   }, [openHandsontableModal]);
 
   return (

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

@@ -37,7 +37,7 @@ export const HandsontableModal = (): JSX.Element => {
   const table = handsontableModalData?.table;
   const autoFormatMarkdownTable = handsontableModalData?.autoFormatMarkdownTable ?? false;
   const editor = handsontableModalData?.editor;
-  const onSave = handsontableModalData?.onSave;
+  const onSaveDirectlyFromPage = handsontableModalData?.onSave;
 
   const defaultMarkdownTable = () => {
     return new MarkdownTable(
@@ -132,8 +132,9 @@ export const HandsontableModal = (): JSX.Element => {
       markdownTableOption.latest,
     ).normalizeCells();
 
-    if (onSave != null) {
-      onSave(newMarkdownTable);
+    // onSaveDirectlyFromPage is passed only when editing table directly from the page.
+    if (onSaveDirectlyFromPage != null) {
+      onSaveDirectlyFromPage(newMarkdownTable);
       cancel();
       return;
     }

packages/app/src/stores/modal.tsx

@@ -489,14 +489,15 @@ export const useDrawioModal = (status?: DrawioModalStatus): SWRResponse<DrawioMo
 /*
 * HandsonTableModal
 */
-// TODO: Define editor type
 type HandsonTableModalSaveHandler = (table: MarkdownTable) => void;
 
 type HandsontableModalStatus = {
   isOpened: boolean,
   table: MarkdownTable,
+  // TODO: Define editor type
   editor?: any,
   autoFormatMarkdownTable?: boolean,
+  // onSave is passed only when editing table directly from the page.
   onSave?: HandsonTableModalSaveHandler
 }
 
@@ -510,20 +511,20 @@ type HandsontableModalStatusUtils = {
   close(): void
 }
 
-export const useHandsontableModal = (status?: HandsontableModalStatus): SWRResponse<HandsontableModalStatus, Error> & HandsontableModalStatusUtils => {
-  const defaultMarkdownTable = () => {
-    return new MarkdownTable(
-      [
-        ['col1', 'col2', 'col3'],
-        ['', '', ''],
-        ['', '', ''],
-      ],
-      {
-        align: ['', '', ''],
-      },
-    );
-  };
+const defaultMarkdownTable = () => {
+  return new MarkdownTable(
+    [
+      ['col1', 'col2', 'col3'],
+      ['', '', ''],
+      ['', '', ''],
+    ],
+    {
+      align: ['', '', ''],
+    },
+  );
+};
 
+export const useHandsontableModal = (status?: HandsontableModalStatus): SWRResponse<HandsontableModalStatus, Error> & HandsontableModalStatusUtils => {
   const initialData: HandsontableModalStatus = {
     isOpened: false,
     table: defaultMarkdownTable(),