134432 able to open modal with TableButton

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

@@ -1,6 +1,13 @@
+import { useHandsontableModal } from '../../../stores/use-handosontable';
+
 export const TableButton = (): JSX.Element => {
+  const { open: openHandsontableModal } = useHandsontableModal();
+
+  const openModalHandler = () => {
+    openHandsontableModal();
+  };
   return (
-    <button type="button" className="btn btn-toolbar-button">
+    <button type="button" className="btn btn-toolbar-button" onClick={openModalHandler}>
       <span className="material-symbols-outlined fs-5">table_chart</span>
     </button>
   );

packages/editor/src/stores/use-handosontable.ts

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