136480 enable templete modal in editor

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

@@ -1,6 +1,27 @@
-export const TemplateButton = (): JSX.Element => {
+import { useCallback } from 'react';
+
+
+import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useTemplateModalForEditor } from '../../../stores/use-templete';
+
+type Props = {
+  editorKey: string,
+}
+
+export const TemplateButton = (props: Props): JSX.Element => {
+  const { editorKey } = props;
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
+  const { open: openTempleteModal } = useTemplateModalForEditor();
+
+  const onClickTempleteButton = useCallback(() => {
+    const editor = codeMirrorEditor?.view;
+    const insertText = (text: string) => editor?.dispatch(editor.state.replaceSelection(text));
+    const onSubmit = (templateText: string) => insertText(templateText);
+    openTempleteModal({ onSubmit });
+  }, [codeMirrorEditor?.view, openTempleteModal]);
+
   return (
-    <button type="button" className="btn btn-toolbar-button">
+    <button type="button" className="btn btn-toolbar-button" onClick={onClickTempleteButton}>
       <span className="material-symbols-outlined fs-5">file_copy</span>
     </button>
   );

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

@@ -29,7 +29,7 @@ export const Toolbar = memo((props: Props): JSX.Element => {
       />
       <TableButton editorKey={editorKey} />
       <DiagramButton />
-      <TemplateButton />
+      <TemplateButton editorKey={editorKey} />
     </div>
   );
 });

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

@@ -0,0 +1,30 @@
+import { useSWRStatic } from '@growi/core/dist/swr';
+import type { SWRResponse } from 'swr';
+
+type TemplateSelectedCallback = (templateText: string) => void;
+type TemplateModalOptions = {
+  onSubmit?: TemplateSelectedCallback,
+}
+export type TemplateModalStatus = TemplateModalOptions & {
+  isOpened: boolean,
+}
+
+type TemplateModalUtils = {
+  open(opts: TemplateModalOptions): void,
+  close(): void,
+}
+
+export const useTemplateModalForEditor = (): SWRResponse<TemplateModalStatus, Error> & TemplateModalUtils => {
+
+  const initialStatus: TemplateModalStatus = { isOpened: false };
+  const swrResponse = useSWRStatic<TemplateModalStatus, Error>('templateModal', undefined, { fallbackData: initialStatus });
+
+  return Object.assign(swrResponse, {
+    open: (opts: TemplateModalOptions) => {
+      swrResponse.mutate({ isOpened: true, onSubmit: opts.onSubmit });
+    },
+    close: () => {
+      swrResponse.mutate({ isOpened: false });
+    },
+  });
+};