134432 open table modal with open hook

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { HotTable } from '@handsontable/react';
 import Handsontable from 'handsontable';
@@ -34,7 +34,6 @@ export const HandsontableModal = (): JSX.Element => {
   const { data: handsontableModalData, close: closeHandsontableModal } = useHandsontableModal();
 
   const isOpened = handsontableModalData?.isOpened ?? false;
-  const table = handsontableModalData?.table;
   const autoFormatMarkdownTable = handsontableModalData?.autoFormatMarkdownTable ?? false;
   const editor = handsontableModalData?.editor;
   const onSave = handsontableModalData?.onSave;
@@ -102,8 +101,9 @@ export const HandsontableModal = (): JSX.Element => {
   const debouncedHandleWindowExpandedChange = debounce(100, handleWindowExpandedChange);
 
   const handleModalOpen = () => {
-    const initTableInstance = table == null ? defaultMarkdownTable : table.clone();
-    setMarkdownTable(table ?? defaultMarkdownTable);
+    const editorMarkdownTable = mtu.getMarkdownTable(editor);
+    const initTableInstance = editorMarkdownTable == null ? defaultMarkdownTable : editorMarkdownTable.clone();
+    setMarkdownTable(editorMarkdownTable ?? defaultMarkdownTable);
     setMarkdownTableOnInit(initTableInstance);
     debouncedHandleWindowExpandedChange();
   };

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -19,7 +19,6 @@ import { throttle, debounce } from 'throttle-debounce';
 import { useUpdateStateAfterSave, useSaveOrUpdate } from '~/client/services/page-operation';
 import { apiGet, apiPostForm } from '~/client/util/apiv1-client';
 import { toastError, toastSuccess } from '~/client/util/toastr';
-import mtu from '~/components/PageEditor/MarkdownTableUtil';
 import { OptionsToSave } from '~/interfaces/page-operation';
 import { SocketEventName } from '~/interfaces/websocket';
 import {
@@ -34,7 +33,7 @@ import {
   useEditingMarkdown,
   useWaitingSaveProcessing,
 } from '~/stores/editor';
-import { useConflictDiffModal, useHandsontableModal } from '~/stores/modal';
+import { useConflictDiffModal } from '~/stores/modal';
 import {
   useCurrentPagePath, useSWRMUTxCurrentPage, useSWRxCurrentPage, useSWRxTagsInfo, useCurrentPageId, useIsNotFound, useIsLatestRevision, useTemplateBodyData,
 } from '~/stores/page';
@@ -128,8 +127,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   const { mutate: mutateResolvedTheme } = useResolvedThemeForEditor();
 
-  const { open: openHandsontableModal } = useHandsontableModal();
-
   const saveOrUpdate = useSaveOrUpdate();
   const updateStateAfterSave = useUpdateStateAfterSave(pageId, { supressEditingMarkdownMutation: true });
 
@@ -186,12 +183,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
-  const openTableModalHandler = useCallback(() => {
-    const editor = codeMirrorEditor?.view;
-    const markdownTable = mtu.getMarkdownTable(editor);
-    openHandsontableModal(markdownTable, editor);
-  }, [codeMirrorEditor]);
-
   const checkIsConflict = useCallback((data) => {
     const { s2cMessagePageUpdated } = data;
 
@@ -597,7 +588,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
             onUpload={uploadHandler}
             indentSize={currentIndentSize ?? defaultIndentSize}
             acceptedFileType={acceptedFileType}
-            onClickTableBtn={openTableModalHandler}
           />
         </div>
         <div className="page-editor-preview-container flex-expand-vert d-none d-lg-flex">

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -26,7 +26,6 @@ type Props = {
   onChange?: (value: string) => void,
   onUpload?: (files: File[]) => void,
   indentSize?: number,
-  onClickTableBtn?: () => void,
 }
 
 export const CodeMirrorEditor = (props: Props): JSX.Element => {
@@ -36,7 +35,6 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     onChange,
     onUpload,
     indentSize,
-    onClickTableBtn,
   } = props;
 
   const containerRef = useRef(null);
@@ -149,7 +147,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
       <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
         <FileDropzoneOverlay isEnabled={isDragActive} />
         <CodeMirrorEditorContainer ref={containerRef} />
-        <Toolbar editorKey={editorKey} onFileOpen={open} acceptedFileType={acceptedFileType} onClickTableBtn={onClickTableBtn} />
+        <Toolbar editorKey={editorKey} onFileOpen={open} acceptedFileType={acceptedFileType} />
       </div>
     </div>
   );

packages/editor/src/components/CodeMirrorEditor/Toolbar/TableButton.tsx

@@ -1,11 +1,26 @@
-type TableButtonProps = {
-  onClickTableBtn: () => void;
+import { useCallback } from 'react';
+
+import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useHandsontableModal } from '../../../stores/use-table-modal';
+
+type Props = {
+  editorKey: string,
 }
 
-export const TableButton = (props: TableButtonProps): JSX.Element => {
-  const { onClickTableBtn } = props;
+export const TableButton = (props: Props): JSX.Element => {
+  const { editorKey } = props;
+
+  const { open: openTableModal } = useHandsontableModal();
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
+
+  const openTableModalHandler = useCallback(() => {
+    const editor = codeMirrorEditor?.view;
+    console.log(editor);
+    openTableModal(editor);
+  }, [codeMirrorEditor]);
+
   return (
-    <button type="button" className="btn btn-toolbar-button" onClick={onClickTableBtn}>
+    <button type="button" className="btn btn-toolbar-button" onClick={openTableModalHandler}>
       <span className="material-symbols-outlined fs-5">table_chart</span>
     </button>
   );

packages/editor/src/components/CodeMirrorEditor/Toolbar/Toolbar.tsx

@@ -15,13 +15,12 @@ type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   onFileOpen: () => void,
   acceptedFileType: AcceptedUploadFileType,
-  onClickTableBtn?: () => void,
 }
 
 export const Toolbar = memo((props: Props): JSX.Element => {
 
   const {
-    editorKey, onFileOpen, acceptedFileType, onClickTableBtn,
+    editorKey, onFileOpen, acceptedFileType,
   } = props;
 
   return (
@@ -31,7 +30,7 @@ export const Toolbar = memo((props: Props): JSX.Element => {
       <EmojiButton
         editorKey={editorKey}
       />
-      { onClickTableBtn && <TableButton onClickTableBtn={onClickTableBtn} /> }
+      <TableButton editorKey={editorKey} />
       <DiagramButton />
       <TemplateButton />
     </div>

packages/editor/src/components/CodeMirrorEditorComment.tsx

@@ -18,12 +18,11 @@ type Props = {
   onChange?: (value: string) => void,
   onComment?: () => void,
   acceptedFileType?: AcceptedUploadFileType,
-  onClickTableBtn?: () => void,
 }
 
 export const CodeMirrorEditorComment = (props: Props): JSX.Element => {
   const {
-    onComment, onChange, acceptedFileType, onClickTableBtn,
+    onComment, onChange, acceptedFileType,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.COMMENT);
@@ -64,7 +63,6 @@ export const CodeMirrorEditorComment = (props: Props): JSX.Element => {
       editorKey={GlobalCodeMirrorEditorKey.COMMENT}
       onChange={onChange}
       acceptedFileType={acceptedFileTypeNoOpt}
-      onClickTableBtn={onClickTableBtn}
     />
   );
 };

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -19,12 +19,11 @@ type Props = {
   onUpload?: (files: File[]) => void,
   acceptedFileType?: AcceptedUploadFileType,
   indentSize?: number,
-  onClickTableBtn?: () => void,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    onSave, onChange, onUpload, onClickTableBtn, acceptedFileType, indentSize,
+    onSave, onChange, onUpload, acceptedFileType, indentSize,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -68,7 +67,6 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
       onUpload={onUpload}
       acceptedFileType={acceptedFileTypeNoOpt}
       indentSize={indentSize}
-      onClickTableBtn={onClickTableBtn}
     />
   );
 };

packages/editor/src/components/playground/Playground.tsx

@@ -48,10 +48,6 @@ export const Playground = (): JSX.Element => {
 
   }, [codeMirrorEditor]);
 
-  const openHandsontableModal = useCallback(() => {
-    console.log('Open Edit Modal');
-  }, []);
-
   return (
     <div className="d-flex flex-column vw-100 flex-expand-vh-100">
       <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '83px' }}>
@@ -65,7 +61,6 @@ export const Playground = (): JSX.Element => {
             onUpload={uploadHandler}
             indentSize={4}
             acceptedFileType={AcceptedUploadFileType.ALL}
-            onClickTableBtn={openHandsontableModal}
           />
         </div>
         <div className="flex-expand-vert d-none d-lg-flex bg-light text-dark border-start border-dark-subtle p-3">

packages/editor/src/stores/use-table-modal.ts

@@ -0,0 +1,49 @@
+import { useCallback } from 'react';
+
+import { useSWRStatic } from '@growi/core/dist/swr';
+import type { SWRResponse } from 'swr';
+
+type HandsonTableModalSaveHandler = () => void;
+
+type HandsontableModalStatus = {
+  isOpened: boolean,
+  editor: any,
+  // onSave is passed only when editing table directly from the page.
+  onSave?: HandsonTableModalSaveHandler
+}
+
+type HandsontableModalStatusUtils = {
+  open(
+    editor: any,
+    onSave?: HandsonTableModalSaveHandler
+  ): void
+  close(): void
+}
+
+export const useHandsontableModal = (status?: HandsontableModalStatus): SWRResponse<HandsontableModalStatus, Error> & HandsontableModalStatusUtils => {
+  const initialData: HandsontableModalStatus = {
+    isOpened: false,
+    editor: undefined,
+  };
+
+  const swrResponse = useSWRStatic<HandsontableModalStatus, Error>('handsontableModalStatus', status, { fallbackData: initialData });
+
+  const { mutate } = swrResponse;
+
+  const open = useCallback((editor: any, onSave?: HandsonTableModalSaveHandler): void => {
+    mutate({
+      isOpened: true, editor, onSave,
+    });
+  }, [mutate]);
+  const close = useCallback((): void => {
+    mutate({
+      isOpened: false, editor: undefined, onSave: undefined,
+    });
+  }, [mutate]);
+
+  return {
+    ...swrResponse,
+    open,
+    close,
+  };
+};