clean code for FB

packages/app/src/components/Page.module.scss

@@ -1,15 +1,6 @@
 // mobile
 .page-mobile :global {
-  .wiki .revision-head {
-    .revision-head-link,
-    .revision-head-edit-button {
-      opacity: 0.3;
-    }
-  }
-
-  .editable-with-handsontable {
-    .handsontable-modal-trigger {
-      opacity: 0.3;
-    }
+  .editable-with-handsontable .handsontable-modal-trigger {
+    opacity: 0.3;
   }
 }

packages/app/src/components/Page.tsx

@@ -77,6 +77,7 @@ export const Page = (props) => {
   }, [mutateCurrentPageTocNode, tocRef.current]); // include tocRef.current to call mutateCurrentPageTocNode when tocRef.current changes
 
 
+  // TODO: refactor commonize saveByDrawioModal and saveByHandsontableModal
   const saveByDrawioModal = useCallback(async(drawioMxFile: string, bol: number, eol: number) => {
     if (currentPage == null || tagsInfo == null) {
       return;

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

@@ -159,6 +159,7 @@ class CodeMirrorEditor extends AbstractEditor {
 
     this.foldDrawioSection = this.foldDrawioSection.bind(this);
     this.clickDrawioIconHandler = this.clickDrawioIconHandler.bind(this);
+    this.clickTableIconHandler = this.clickTableIconHandler.bind(this);
 
   }
 

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

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

@@ -15,11 +15,13 @@ declare global {
 
 type TableWithEditButtonProps = {
   children: React.ReactNode,
+  className: string
   node: Element,
 }
 
 export const TableWithEditButton = React.memo((props: TableWithEditButtonProps): JSX.Element => {
-  const { node, children } = props;
+
+  const { children, className, node } = props;
 
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isSharedUser } = useIsSharedUser();
@@ -41,7 +43,7 @@ export const TableWithEditButton = React.memo((props: TableWithEditButtonProps):
           <i className="icon-note"></i>
         </button>
       )}
-      <table className="table table-bordered">
+      <table className={`${className}`}>
         {children}
       </table>
     </div>

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

@@ -235,6 +235,15 @@
   }
 }
 
+// mobile
+.page-mobile .wiki .revision-head {
+
+  .revision-head-link,
+  .revision-head-edit-button {
+    opacity: 0.3;
+  }
+}
+
 @include bs.media-breakpoint-down(sm) {
   .main .wiki {
     img {