impl useCodeMirrorEditorIsolated

packages/editor/src/components/CodeMirrorEditor.tsx

@@ -5,7 +5,8 @@ import {
 import { keymap } from '@codemirror/view';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
-import { useCodeMirrorEditorMain } from '../stores';
+import { GlobalCodeMirrorEditorKey } from '../consts';
+import { useCodeMirrorEditorIsolated } from '../stores';
 
 import style from './CodeMirrorEditor.module.scss';
 
@@ -34,7 +35,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
       onChange,
     };
   }, [onChange]);
-  const { data: codeMirrorEditor } = useCodeMirrorEditorMain(containerRef.current, cmProps);
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN, containerRef.current, cmProps);
 
   // set handler to save with shortcut key
   useEffect(() => {

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

@@ -5,7 +5,8 @@ import {
 import { toast } from 'react-toastify';
 
 import { CodeMirrorEditor } from '..';
-import { useCodeMirrorEditorMain } from '../../stores';
+import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { useCodeMirrorEditorIsolated } from '../../stores';
 
 import { PlaygroundController } from './PlaygroundController';
 import { Preview } from './Preview';
@@ -14,7 +15,7 @@ export const Playground = (): JSX.Element => {
 
   const [markdownToPreview, setMarkdownToPreview] = useState('');
 
-  const { data: codeMirrorEditor } = useCodeMirrorEditorMain();
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
   const initialValue = '# header\n';
 

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

@@ -2,11 +2,12 @@ import { useCallback } from 'react';
 
 import { useForm } from 'react-hook-form';
 
-import { useCodeMirrorEditorMain } from '../../stores';
+import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { useCodeMirrorEditorIsolated } from '../../stores';
 
 export const InitEditorValueRow = (): JSX.Element => {
 
-  const { data } = useCodeMirrorEditorMain();
+  const { data } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
   const initDoc = data?.initDoc;
   const initEditorValue = useCallback(() => {
@@ -34,7 +35,7 @@ type SetCaretLineRowFormData = {
 
 export const SetCaretLineRow = (): JSX.Element => {
 
-  const { data } = useCodeMirrorEditorMain();
+  const { data } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
   const { register, handleSubmit } = useForm<SetCaretLineRowFormData>({
     defaultValues: {
       lineNumber: 1,

packages/editor/src/consts/global-code-mirror-editor-key.ts

@@ -0,0 +1,4 @@
+export const GlobalCodeMirrorEditorKey = {
+  MAIN: 'main',
+} as const;
+export type GlobalCodeMirrorEditorKey = typeof GlobalCodeMirrorEditorKey[keyof typeof GlobalCodeMirrorEditorKey]

packages/editor/src/consts/index.ts

@@ -0,0 +1 @@
+export * from './global-code-mirror-editor-key';

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

@@ -24,10 +24,14 @@ const defaultExtensionsMain: Extension[] = [
   scrollPastEnd(),
 ];
 
-export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null, props?: ReactCodeMirrorProps): SWRResponse<UseCodeMirrorEditor> => {
+export const useCodeMirrorEditorIsolated = (
+    key?: string, container?: HTMLDivElement | null, props?: ReactCodeMirrorProps,
+): SWRResponse<UseCodeMirrorEditor> => {
+
   const ref = useRef<UseCodeMirrorEditor>();
   const currentData = ref.current;
 
+  const swrKey = key != null ? `codeMirrorEditor_${key}` : null;
   const mergedProps = useMemo<UseCodeMirror>(() => {
     return {
       ...props,
@@ -41,7 +45,7 @@ export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null, props
 
   const newData = useCodeMirrorEditor(mergedProps);
 
-  const shouldUpdate = props != null && (
+  const shouldUpdate = swrKey != null && container != null && props != null && (
     currentData == null
     || (isValid(newData) && !isDeepEquals(currentData, newData))
   );
@@ -52,5 +56,5 @@ export const useCodeMirrorEditorMain = (container?: HTMLDivElement | null, props
     console.info('Initializing codemirror for main');
   }
 
-  return useSWRStatic('codeMirrorEditorMain', shouldUpdate ? newData : undefined);
+  return useSWRStatic(swrKey, shouldUpdate ? newData : undefined);
 };