refactor code

packages/app/src/components/Page.tsx

@@ -161,25 +161,14 @@ export const Page = (props) => {
     }
   }, [currentPage, mutateCurrentPage, mutateEditingMarkdown, saveOrUpdate, t, tagsInfo]);
 
-
-  const tableByHandsontableModal = useCallback((beginLineNumber, endLineNumber) => {
-    if (currentPage == null) {
-      return;
-    }
-
-    const markdown = currentPage.revision.body;
-    const tableLines = markdown.split(/\r\n|\r|\n/).slice(beginLineNumber - 1, endLineNumber).join('\n');
-    const table = MarkdownTable.fromMarkdownString(tableLines);
-    return table;
-  }, [currentPage]);
-
   // set handler to open HandsonTableModal
   useEffect(() => {
-    const handler = (bol, eol) => {
-      const table = tableByHandsontableModal(bol, eol);
-      if (table == null) {
+    const handler = (bol: number, eol: number) => {
+      if (currentPage == null) {
         return;
       }
+      const markdown = currentPage.revision.body;
+      const table = mtu.getMarkdownTableFromLine(markdown, bol, eol);
       openHandsontableModal(table, undefined, false, table => saveByHandsontableModal(table, bol, eol));
     };
     globalEmitter.on('launchHandsonTableModal', handler);
@@ -187,7 +176,7 @@ export const Page = (props) => {
     return function cleanup() {
       globalEmitter.removeListener('launchHandsonTableModal', handler);
     };
-  }, [openHandsontableModal, saveByHandsontableModal, tableByHandsontableModal]);
+  }, [currentPage, openHandsontableModal, saveByHandsontableModal]);
 
   if (currentPage == null || isGuestUser == null || rendererOptions == null) {
     const entries = Object.entries({

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

@@ -32,6 +32,7 @@ export const HandsontableModal = (): JSX.Element => {
 
   const { t } = useTranslation('commons');
   const { data: handsontableModalData, close: closeHandsontableModal } = useHandsontableModal();
+
   const isOpened = handsontableModalData?.isOpened ?? false;
   const table = handsontableModalData?.table;
   const autoFormatMarkdownTable = handsontableModalData?.autoFormatMarkdownTable ?? false;

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

@@ -96,6 +96,11 @@ class MarkdownTableUtil {
     return MarkdownTable.fromMarkdownString(strFromBotToEot);
   }
 
+  getMarkdownTableFromLine(markdown, bol, eol) {
+    const tableLines = markdown.split(/\r\n|\r|\n/).slice(bol - 1, eol).join('\n');
+    return MarkdownTable.fromMarkdownString(tableLines);
+  }
+
   /**
    * return boolean value whether the cursor position is end of line
    */

packages/app/src/components/ReactMarkdownComponents/TableWithEditButton.module.scss

@@ -1,30 +1,25 @@
 /**
  * for table with handsontable modal button
  */
-.test :global {
-  .editable-with-handsontable {
-    position: relative;
+.editable-with-handsontable :global {
+  position: relative;
 
-    .handsontable-modal-trigger {
-      position: absolute;
-      top: 11px;
-      right: 10px;
-      padding: 0;
-      font-size: 16px;
-      line-height: 1;
-      vertical-align: bottom;
-      background-color: transparent;
-      border: none;
-      opacity: 0;
-    }
-
-    .page-mobile & .handsontable-modal-trigger {
-      opacity: 0.3;
-    }
-
-    &:hover .handsontable-modal-trigger {
-      opacity: 1;
-    }
+  .handsontable-modal-trigger {
+    position: absolute;
+    top: 11px;
+    right: 10px;
+    padding: 0;
+    font-size: 16px;
+    line-height: 1;
+    vertical-align: bottom;
+    background-color: transparent;
+    border: none;
+    opacity: 0;
   }
 }
 
+.editable-with-handsontable:hover :global {
+  .handsontable-modal-trigger {
+    opacity: 1;
+  }
+}

packages/app/src/components/ReactMarkdownComponents/TableWithEditButton.tsx

@@ -18,7 +18,6 @@ type TableWithEditButtonProps = {
   node: Element,
 }
 
-
 export const TableWithEditButton = React.memo((props: TableWithEditButtonProps): JSX.Element => {
   const { node, children } = props;
 
@@ -35,17 +34,15 @@ export const TableWithEditButton = React.memo((props: TableWithEditButtonProps):
   const showEditButton = !isGuestUser && !isSharedUser;
 
   return (
-    <div className={`${styles.test}`}>
-      <div className={`editable-with-handsontable ${styles['editable-with-handsontable']}`}>
-        { showEditButton && (
-          <button className="handsontable-modal-trigger" onClick={editButtonClickHandler}>
-            <i className="icon-note"></i>
-          </button>
-        )}
-        <table className="table table-bordered">
-          {children}
-        </table>
-      </div>
+    <div className={`editable-with-handsontable ${styles['editable-with-handsontable']}`}>
+      { showEditButton && (
+        <button className="handsontable-modal-trigger" onClick={editButtonClickHandler}>
+          <i className="icon-note"></i>
+        </button>
+      )}
+      <table className="table table-bordered">
+        {children}
+      </table>
     </div>
   );
 });

packages/app/src/stores/modal.tsx

@@ -489,43 +489,60 @@ export const useDrawioModal = (status?: DrawioModalStatus): SWRResponse<DrawioMo
 /*
 * HandsonTableModal
 */
+// TODO: Define editor type
+type HandsonTableModalSaveHandler = (table: MarkdownTable) => void;
+
 type HandsontableModalStatus = {
   isOpened: boolean,
-  table?: MarkdownTable,
+  table: MarkdownTable,
   editor?: any,
   autoFormatMarkdownTable?: boolean,
-  onSave?: (table) => any,
+  onSave?: HandsonTableModalSaveHandler
 }
 
 type HandsontableModalStatusUtils = {
   open(
-    table?: MarkdownTable,
+    table: MarkdownTable,
     editor?: any,
     autoFormatMarkdownTable?: boolean,
-    onSave?: (table) => any
-  ): void // Promise<HandsontableModalStatus | undefined>
-  close(): void // Promise<HandsontableModalStatus | undefined>
+    onSave?: HandsonTableModalSaveHandler
+  ): void
+  close(): void
 }
 
 export const useHandsontableModal = (status?: HandsontableModalStatus): SWRResponse<HandsontableModalStatus, Error> & HandsontableModalStatusUtils => {
+  const defaultMarkdownTable = () => {
+    return new MarkdownTable(
+      [
+        ['col1', 'col2', 'col3'],
+        ['', '', ''],
+        ['', '', ''],
+      ],
+      {
+        align: ['', '', ''],
+      },
+    );
+  };
+
   const initialData: HandsontableModalStatus = {
     isOpened: false,
-    table: undefined,
+    table: defaultMarkdownTable(),
     editor: undefined,
     autoFormatMarkdownTable: false,
   };
+
   const swrResponse = useStaticSWR<HandsontableModalStatus, Error>('handsontableModalStatus', status, { fallbackData: initialData });
 
   const { mutate } = swrResponse;
 
-  const open = useCallback((table: MarkdownTable, editor?: any, autoFormatMarkdownTable?: boolean, onSave?: (table) => any): void => {
+  const open = useCallback((table: MarkdownTable, editor?: any, autoFormatMarkdownTable?: boolean, onSave?: HandsonTableModalSaveHandler): void => {
     mutate({
       isOpened: true, table, editor, autoFormatMarkdownTable, onSave,
     });
   }, [mutate]);
   const close = useCallback((): void => {
     mutate({
-      isOpened: false, table: undefined, editor: undefined, autoFormatMarkdownTable: false, onSave: undefined,
+      isOpened: false, table: defaultMarkdownTable(), editor: undefined, autoFormatMarkdownTable: false, onSave: undefined,
     });
   }, [mutate]);
 

packages/app/src/styles/organisms/_wiki.scss

@@ -244,6 +244,12 @@
   }
 }
 
+.page-mobile .editable-with-handsontable {
+  .handsontable-modal-trigger {
+    opacity: 0.3;
+  }
+}
+
 @include bs.media-breakpoint-down(sm) {
   .main .wiki {
     img {