open close hook

packages/app/src/components/Layout/BasicLayout.tsx

@@ -23,6 +23,7 @@ const PageRenameModal = dynamic(() => import('../PageRenameModal'), { ssr: false
 const PagePresentationModal = dynamic(() => import('../PagePresentationModal'), { ssr: false });
 const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal'), { ssr: false });
 const DrawioModal = dynamic(() => import('../PageEditor/DrawioModal').then(mod => mod.DrawioModal), { ssr: false });
+const HandsontableModal = dynamic(() => import('../PageEditor/HandsontableModal').then(mod => mod.HandsontableModal), { ssr: false });
 // Fab
 const Fab = dynamic(() => import('../Fab').then(mod => mod.Fab), { ssr: false });
 
@@ -65,6 +66,7 @@ export const BasicLayout = ({
         <PageRenameModal />
         <PageAccessoriesModal />
         <DrawioModal />
+        <HandsontableModal />
       </DndProvider>
 
       <PagePresentationModal />

packages/app/src/components/Page.tsx

@@ -28,7 +28,7 @@ import loggerFactory from '~/utils/logger';
 import RevisionRenderer from './Page/RevisionRenderer';
 import { DrawioModal } from './PageEditor/DrawioModal';
 // import MarkdownTable from '~/client/models/MarkdownTable';
-import type { HandsontableModalProps } from './PageEditor/HandsontableModal';
+// import type { HandsontableModalProps } from './PageEditor/HandsontableModal';
 import mdu from './PageEditor/MarkdownDrawioUtil';
 import mtu from './PageEditor/MarkdownTableUtil';
 
@@ -37,7 +37,7 @@ declare const globalEmitter: EventEmitter;
 
 // const DrawioModal = dynamic(() => import('./PageEditor/DrawioModal'), { ssr: false });
 const GridEditModal = dynamic(() => import('./PageEditor/GridEditModal'), { ssr: false });
-const HandsontableModal = dynamic<HandsontableModalProps>(() => import('./PageEditor/HandsontableModal').then(mod => mod.HandsontableModal), { ssr: false });
+// const HandsontableModal = dynamic<HandsontableModalProps>(() => import('./PageEditor/HandsontableModal').then(mod => mod.HandsontableModal), { ssr: false });
 const LinkEditModal = dynamic(() => import('./PageEditor/LinkEditModal'), { ssr: false });
 
 const logger = loggerFactory('growi:Page');
@@ -59,7 +59,7 @@ class PageSubstance extends React.Component<PageSubstanceProps> {
 
   linkEditModal: any;
 
-  handsontableModal: any;
+  // handsontableModal: any;
 
   drawioModal: any;
 
@@ -73,10 +73,10 @@ class PageSubstance extends React.Component<PageSubstanceProps> {
 
     this.gridEditModal = React.createRef();
     this.linkEditModal = React.createRef();
-    this.handsontableModal = React.createRef();
+    // this.handsontableModal = React.createRef();
     this.drawioModal = React.createRef();
 
-    this.saveHandlerForHandsontableModal = this.saveHandlerForHandsontableModal.bind(this);
+    // this.saveHandlerForHandsontableModal = this.saveHandlerForHandsontableModal.bind(this);
     this.saveHandlerForDrawioModal = this.saveHandlerForDrawioModal.bind(this);
   }
 
@@ -189,7 +189,7 @@ class PageSubstance extends React.Component<PageSubstanceProps> {
           <>
             <GridEditModal ref={this.gridEditModal} />
             <LinkEditModal ref={this.linkEditModal} />
-            <HandsontableModal ref={this.handsontableModal} onSave={this.saveHandlerForHandsontableModal} />
+            {/* <HandsontableModal ref={this.handsontableModal} onSave={this.saveHandlerForHandsontableModal} /> */}
             {/* TODO: use global DrawioModal https://redmine.weseek.co.jp/issues/105981 */}
             {/* <DrawioModal
               ref={this.drawioModal}

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

@@ -11,21 +11,21 @@ import { throttle, debounce } from 'throttle-debounce';
 import urljoin from 'url-join';
 
 import InterceptorManager from '~/services/interceptor-manager';
-import { useDrawioModal } from '~/stores/modal';
+import { useHandsontableModal, useDrawioModal } from '~/stores/modal';
 import loggerFactory from '~/utils/logger';
 
 import { UncontrolledCodeMirror } from '../UncontrolledCodeMirror';
 
 import AbstractEditor from './AbstractEditor';
 import CommentMentionHelper from './CommentMentionHelper';
-import { DrawioModal } from './DrawioModal';
+// import { DrawioModal } from './DrawioModal';
 import EditorIcon from './EditorIcon';
 import EmojiPicker from './EmojiPicker';
 import EmojiPickerHelper from './EmojiPickerHelper';
 import GridEditModal from './GridEditModal';
 // TODO: re-impl with https://redmine.weseek.co.jp/issues/107248
 // import geu from './GridEditorUtil';
-import { HandsontableModal } from './HandsontableModal';
+// import { HandsontableModal } from './HandsontableModal';
 import LinkEditModal from './LinkEditModal';
 import mdu from './MarkdownDrawioUtil';
 import markdownLinkUtil from './MarkdownLinkUtil';
@@ -116,8 +116,8 @@ class CodeMirrorEditor extends AbstractEditor {
     this.cm = React.createRef();
     this.gridEditModal = React.createRef();
     this.linkEditModal = React.createRef();
-    this.handsontableModal = React.createRef();
-    this.drawioModal = React.createRef();
+    // this.handsontableModal = React.createRef();
+    // this.drawioModal = React.createRef();
 
     this.init();
 
@@ -156,7 +156,7 @@ class CodeMirrorEditor extends AbstractEditor {
     // TODO: re-impl with https://redmine.weseek.co.jp/issues/107248
     // this.showGridEditorHandler = this.showGridEditorHandler.bind(this);
     this.showLinkEditHandler = this.showLinkEditHandler.bind(this);
-    this.showHandsonTableHandler = this.showHandsonTableHandler.bind(this);
+    // this.showHandsonTableHandler = this.showHandsonTableHandler.bind(this);
 
     this.foldDrawioSection = this.foldDrawioSection.bind(this);
     this.onSaveForDrawio = this.onSaveForDrawio.bind(this);
@@ -869,9 +869,9 @@ class CodeMirrorEditor extends AbstractEditor {
     this.linkEditModal.current.show(markdownLinkUtil.getMarkdownLink(this.getCodeMirror()));
   }
 
-  showHandsonTableHandler() {
-    this.handsontableModal.current.show(mtu.getMarkdownTable(this.getCodeMirror()));
-  }
+  // showHandsonTableHandler() {
+  //   this.handsontableModal.current.show(mtu.getMarkdownTable(this.getCodeMirror()));
+  // }
 
 
   // fold draw.io section (::: drawio ~ :::)
@@ -1016,7 +1016,7 @@ class CodeMirrorEditor extends AbstractEditor {
         color={null}
         size="sm"
         title="Table"
-        onClick={this.showHandsonTableHandler}
+        onClick={() => this.props.onClickTableBtn(mtu.getMarkdownTable(this.getCodeMirror()))}
       >
         <EditorIcon icon="Table" />
       </Button>,
@@ -1135,11 +1135,11 @@ class CodeMirrorEditor extends AbstractEditor {
           ref={this.linkEditModal}
           onSave={(linkText) => { return markdownLinkUtil.replaceFocusedMarkdownLinkWithEditor(this.getCodeMirror(), linkText) }}
         />
-        <HandsontableModal
+        {/* <HandsontableModal
           ref={this.handsontableModal}
           onSave={(table) => { return mtu.replaceFocusedMarkdownTableWithEditor(this.getCodeMirror(), table) }}
           autoFormatMarkdownTable={this.props.editorSettings.autoFormatMarkdownTable}
-        />
+        /> */}
       </div>
     );
   }
@@ -1161,12 +1161,17 @@ CodeMirrorEditor.defaultProps = {
 
 const CodeMirrorEditorFc = React.forwardRef((props, ref) => {
   const { open: openDrawioModal } = useDrawioModal();
+  const { open: openHandsontableModal } = useHandsontableModal();
 
   const openDrawioModalHandler = useCallback((drawioMxFile) => {
     openDrawioModal(drawioMxFile);
   }, [openDrawioModal]);
 
-  return <CodeMirrorEditor ref={ref} onClickDrawioBtn={openDrawioModalHandler} {...props} />;
+  const openTableModalHandler = useCallback((table) => {
+    openHandsontableModal(table);
+  }, [openHandsontableModal]);
+
+  return <CodeMirrorEditor ref={ref} onClickDrawioBtn={openDrawioModalHandler} onClickTableBtn={openTableModalHandler} {...props} />;
 });
 
 CodeMirrorEditorFc.displayName = 'CodeMirrorEditorFc';

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

@@ -9,11 +9,13 @@ import {
 import { debounce } from 'throttle-debounce';
 
 import MarkdownTable from '~/client/models/MarkdownTable';
+import { useHandsontableModal } from '~/stores/modal';
 
 import ExpandOrContractButton from '../ExpandOrContractButton';
 
 import MarkdownTableDataImportForm from './MarkdownTableDataImportForm';
 
+
 import styles from './HandsontableModal.module.scss';
 import 'handsontable/dist/handsontable.full.min.css';
 
@@ -26,14 +28,17 @@ const MARKDOWNTABLE_TO_HANDSONTABLE_ALIGNMENT_SYMBOL_MAPPING = {
 };
 
 export type HandsontableModalProps = {
-  ref: any,
-  onSave: (markdownTable: MarkdownTable) => Promise<void>,
-  autoFormatMarkdownTable: boolean,
+  // ref: any,
+  // onSave: (markdownTable: MarkdownTable) => Promise<void>,
+  // autoFormatMarkdownTable: boolean,
 }
 
 export const HandsontableModal = (props: HandsontableModalProps): JSX.Element => {
 
-  const { onSave, autoFormatMarkdownTable } = props;
+  const { data: handsontableModalData, close: closeHandsontableModal } = useHandsontableModal();
+  const isOpened = handsontableModalData?.isOpened ?? false;
+
+  // const { onSave, autoFormatMarkdownTable } = props;
 
   const [hotTable, setHotTable] = useState<HotTable | null>();
   const [hotTableContainer, setHotTableContainer] = useState<HTMLDivElement | null>();
@@ -80,7 +85,7 @@ export const HandsontableModal = (props: HandsontableModalProps): JSX.Element =>
    *
    * However, all operations are reflected in the data to be saved because the HotTable data is used when the save method is called.
    */
-  const [isShow, setIsShow] = useState<boolean>(false);
+  // const [isShow, setIsShow] = useState<boolean>(false);
   const [isDataImportAreaExpanded, setIsDataImportAreaExpanded] = useState<boolean>(false);
   const [isWindowExpanded, setIsWindowExpanded] = useState<boolean>(false);
   const [markdownTableOnInit, setMarkdownTableOnInit] = useState<MarkdownTable>(() => defaultMarkdownTable());
@@ -135,11 +140,12 @@ export const HandsontableModal = (props: HandsontableModalProps): JSX.Element =>
   //   setIsShow(true);
   // };
 
-  const hide = () => {
-    setIsShow(false);
-    setIsDataImportAreaExpanded(false);
-    setIsWindowExpanded(false);
-  };
+  // included to cancel
+  // const hide = () => {
+  //   setIsShow(false);
+  //   setIsDataImportAreaExpanded(false);
+  //   setIsWindowExpanded(false);
+  // };
 
   /**
    * Reset table data to initial value
@@ -153,31 +159,34 @@ export const HandsontableModal = (props: HandsontableModalProps): JSX.Element =>
   };
 
   const cancel = () => {
-    hide();
+    closeHandsontableModal();
+    setIsDataImportAreaExpanded(false);
+    setIsWindowExpanded(false);
   };
 
-  const markdownTableOption = () => {
-    return {
-      align: [].concat(markdownTable.options.align),
-      pad: autoFormatMarkdownTable !== false,
-    };
-  };
 
   const save = () => {
     if (hotTable == null) {
       return;
     }
 
-    const markdownTable = new MarkdownTable(
-      hotTable.hotInstance.getData(),
-      markdownTableOption,
-    ).normalizeCells();
+    // const markdownTableOption = () => {
+    //   return {
+    //     align: [].concat(markdownTable.options.align),
+    //     pad: autoFormatMarkdownTable !== false,
+    //   };
+    // };
 
-    if (onSave != null) {
-      onSave(markdownTable);
-    }
+    // const markdownTable = new MarkdownTable(
+    //   hotTable.hotInstance.getData(),
+    //   markdownTableOption,
+    // ).normalizeCells();
+
+    // if (onSave != null) {
+    //   onSave(markdownTable);
+    // }
 
-    hide();
+    cancel();
   };
 
   const beforeColumnResizeHandler = (currentColumn) => {
@@ -456,7 +465,7 @@ export const HandsontableModal = (props: HandsontableModalProps): JSX.Element =>
 
   return (
     <Modal
-      isOpen={isShow}
+      isOpen={isOpened}
       toggle={cancel}
       backdrop="static"
       keyboard={false}

packages/app/src/pages/[[...path]].page.tsx

@@ -23,7 +23,6 @@ import { Comments } from '~/components/Comments';
 import { PageAlerts } from '~/components/PageAlert/PageAlerts';
 // import { useTranslation } from '~/i18n';
 import { CurrentPageContentFooter } from '~/components/PageContentFooter';
-import { HandsontableModal } from '~/components/PageEditor/HandsontableModal';
 import { UsersHomePageFooterProps } from '~/components/UsersHomePageFooter';
 import type { CrowiRequest } from '~/interfaces/crowi-request';
 // import { renderScriptTagByName, renderHighlightJsStyleTag } from '~/service/cdn-resources-loader';
@@ -341,7 +340,6 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
 
           <UnsavedAlertDialog />
           <DescendantsPageListModal />
-          <HandsontableModal />
           {shouldRenderPutbackPageModal && <PutbackPageModal />}
         </div>
       </BasicLayout>

packages/app/src/stores/modal.tsx

@@ -33,30 +33,6 @@ export const usePageCreateModal = (status?: CreateModalStatus): SWRResponse<Crea
   };
 };
 
-/*
-* HandsonTableModal
-*/
-type HandsontableModalStatus = {
-  isOpened: boolean,
-  path?: string,
-}
-
-type HandsontableModalStatusUtils = {
-  open(path?: string): Promise<HandsontableModalStatus | undefined>
-  close(): Promise<HandsontableModalStatus | undefined>
-}
-
-export const useHandsontableModal = (status?: HandsontableModalStatus): SWRResponse<HandsontableModalStatus, Error> & HandsontableModalStatusUtils => {
-  const initialData: HandsontableModalStatus = { isOpened: false };
-  const swrResponse = useStaticSWR<HandsontableModalStatus, Error>('handsontableModalStatus', status, { fallbackData: initialData });
-
-  return {
-    ...swrResponse,
-    open: (path?: string) => swrResponse.mutate({ isOpened: true, path }),
-    close: () => swrResponse.mutate({ isOpened: false }),
-  };
-};
-
 /*
 * PageDeleteModal
 */
@@ -485,13 +461,40 @@ export const useDrawioModal = (status?: DrawioModalStatus): SWRResponse<DrawioMo
   };
   const swrResponse = useStaticSWR<DrawioModalStatus, Error>('drawioModalStatus', status, { fallbackData: initialData });
 
+  const open = (drawioMxFile: string): void => {
+    swrResponse.mutate({ isOpened: true, drawioMxFile });
+  };
+
   const close = (): void => {
     swrResponse.mutate({ isOpened: false, drawioMxFile: '' });
   };
 
-  const open = (drawioMxFile: string): void => {
-    swrResponse.mutate({ isOpened: true, drawioMxFile });
+  return {
+    ...swrResponse,
+    open,
+    close,
   };
+};
+
+/*
+* HandsonTableModal
+*/
+type HandsontableModalStatus = {
+  isOpened: boolean,
+  table: string,
+}
+
+type HandsontableModalStatusUtils = {
+  open(table: string): Promise<HandsontableModalStatus | undefined>
+  close(): Promise<HandsontableModalStatus | undefined>
+}
+
+export const useHandsontableModal = (status?: HandsontableModalStatus): SWRResponse<HandsontableModalStatus, Error> & HandsontableModalStatusUtils => {
+  const initialData: HandsontableModalStatus = { isOpened: false, table: '' };
+  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: '' });
 
   return {
     ...swrResponse,