refactor CodeMirrorEditor component

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

@@ -8,7 +8,7 @@ import nodePath from 'path';
 import { keymap } from '@codemirror/view';
 import type { IPageHasId } from '@growi/core';
 import { pathUtils } from '@growi/core/dist/utils';
-import { CodeMirrorEditor, useCodeMirrorEditorMain } from '@growi/editor';
+import { CodeMirrorEditor, GlobalCodeMirrorEditorKey, useCodeMirrorEditorIsolated } from '@growi/editor';
 import detectIndent from 'detect-indent';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
@@ -171,7 +171,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   }, [mutateIsEnabledUnsavedWarningWithDebounce, setMarkdownPreviewWithDebounce]);
 
 
-  const { data: codeMirrorEditor } = useCodeMirrorEditorMain();
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
 
   const checkIsConflict = useCallback((data) => {
@@ -590,6 +590,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
           onSave={saveWithShortcut}
         /> */}
         <CodeMirrorEditor
+          editorKey={GlobalCodeMirrorEditorKey.MAIN}
           onChange={markdownChangedHandler}
           onSave={saveWithShortcut}
         />

packages/editor/package.json

@@ -34,6 +34,7 @@
     "eslint-plugin-react-refresh": "^0.4.1",
     "react-hook-form": "^7.45.4",
     "react-toastify": "^9.1.3",
-    "swr": "^2.2.2"
+    "swr": "^2.2.2",
+    "ts-deepmerge": "^6.2.0"
   }
 }

packages/editor/src/components/CodeMirrorEditor.tsx

@@ -18,12 +18,14 @@ const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
 
 
 type Props = {
+  editorKey: string | GlobalCodeMirrorEditorKey,
   onChange?: (value: string) => void,
   onSave?: () => void,
 }
 
 export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const {
+    editorKey,
     onSave, onChange,
   } = props;
 
@@ -34,7 +36,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
       onChange,
     };
   }, [onChange]);
-  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN, containerRef.current, cmProps);
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
 
   // set handler to save with shortcut key
   useEffect(() => {

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

@@ -45,6 +45,7 @@ export const Playground = (): JSX.Element => {
       <div className="flex-expand-horiz">
         <div className="flex-expand-vert">
           <CodeMirrorEditor
+            editorKey={GlobalCodeMirrorEditorKey.MAIN}
             onSave={saveHandler}
             onChange={setMarkdownToPreview}
           />

packages/editor/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './consts';
 export * from './services';
 export * from './stores';

packages/editor/src/stores/codemirror-editor.ts

@@ -26,7 +26,7 @@ const defaultExtensionsMain: Extension[] = [
 ];
 
 export const useCodeMirrorEditorIsolated = (
-    key?: string, container?: HTMLDivElement | null, props?: ReactCodeMirrorProps,
+    key: string | null, container?: HTMLDivElement | null, props?: ReactCodeMirrorProps,
 ): SWRResponse<UseCodeMirrorEditor> => {
 
   const ref = useRef<UseCodeMirrorEditor>();