impl CodeMirrorEditorMainReadOnly

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

@@ -10,7 +10,7 @@ import { type IPageHasId, Origin } from '@growi/core';
 import { useGlobalSocket } from '@growi/core/dist/swr';
 import { pathUtils } from '@growi/core/dist/utils';
 import {
-  CodeMirrorEditorMain, GlobalCodeMirrorEditorKey,
+  CodeMirrorEditorMain, CodeMirrorEditorMainReadOnly, GlobalCodeMirrorEditorKey,
   useCodeMirrorEditorIsolated, useResolvedThemeForEditor,
 } from '@growi/editor';
 import { useRect } from '@growi/ui/dist/utils';
@@ -109,7 +109,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const { data: acceptedUploadFileType } = useAcceptedUploadFileType();
   const { data: conflictDiffModalStatus, close: closeConflictDiffModal } = useConflictDiffModal();
   const { data: editorSettings } = useEditorSettings();
-  const { mutate: mutateIsLatestRevision } = useIsLatestRevision();
+  const { data: isLatestRevision } = useIsLatestRevision();
   const { mutate: mutateRemotePageId } = useRemoteRevisionId();
   const { mutate: mutateRemoteRevisionId } = useRemoteRevisionBody();
   const { mutate: mutateRemoteRevisionLastUpdatedAt } = useRemoteRevisionLastUpdatedAt();
@@ -161,6 +161,11 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     setMarkdownToPreview(value);
   })), []);
 
+  useEffect(() => {
+    console.log('発火')
+    setMarkdownToPreview(initialValue);
+  }, [initialValue]);
+
   const markdownChangedHandler = useCallback((value: string) => {
     setMarkdownPreviewWithDebounce(value);
   }, [setMarkdownPreviewWithDebounce]);
@@ -437,19 +442,28 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
       <div className={`flex-expand-horiz ${props.visibility ? '' : 'd-none'}`}>
         <div className="page-editor-editor-container flex-expand-vert border-end">
-          <CodeMirrorEditorMain
-            onChange={markdownChangedHandler}
-            onSave={saveWithShortcut}
-            onUpload={uploadHandler}
-            acceptedUploadFileType={acceptedUploadFileType}
-            onScroll={scrollEditorHandlerThrottle}
-            indentSize={currentIndentSize ?? defaultIndentSize}
-            user={user ?? undefined}
-            pageId={pageId ?? undefined}
-            initialValue={initialValue}
-            editorSettings={editorSettings}
-            onEditorsUpdated={onEditorsUpdated}
-          />
+          { isLatestRevision
+            ? (
+              <CodeMirrorEditorMain
+              onChange={markdownChangedHandler}
+              onSave={saveWithShortcut}
+              onUpload={uploadHandler}
+              acceptedUploadFileType={acceptedUploadFileType}
+              onScroll={scrollEditorHandlerThrottle}
+              indentSize={currentIndentSize ?? defaultIndentSize}
+              user={user ?? undefined}
+              pageId={pageId ?? undefined}
+              initialValue={initialValue}
+              editorSettings={editorSettings}
+              onEditorsUpdated={onEditorsUpdated}
+            />
+            )
+            : (
+              <CodeMirrorEditorMainReadOnly
+                body={initialValue}
+               />
+            )
+          }
         </div>
         <div
           ref={previewRef}

packages/editor/src/components/CodeMirrorEditorMainReadOnly.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+import { type Extension, EditorState } from '@codemirror/state';
+import { scrollPastEnd } from '@codemirror/view';
+
+import { GlobalCodeMirrorEditorKey } from '../consts';
+import { setDataLine } from '../services/extensions/setDataLine';
+import { useCodeMirrorEditorIsolated } from '../stores';
+
+import { CodeMirrorEditor, CodeMirrorEditorProps } from '.';
+
+const additionalExtensions: Extension[] = [
+  [
+    scrollPastEnd(),
+    setDataLine,
+    EditorState.readOnly.of(true),
+  ],
+] as const;
+
+type Props = CodeMirrorEditorProps & {
+  body?: string,
+}
+
+export const CodeMirrorEditorMainReadOnly = (props: Props): JSX.Element => {
+  const { body, ...otherProps } = props;
+
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
+
+  codeMirrorEditor?.initDoc(body);
+
+  useEffect(() => {
+    return codeMirrorEditor?.appendExtensions?.(additionalExtensions);
+  }, [codeMirrorEditor]);
+
+  return (
+    <CodeMirrorEditor
+      editorKey={GlobalCodeMirrorEditorKey.MAIN}
+      {...otherProps}
+    />
+  );
+};

packages/editor/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './CodeMirrorEditor';
 export * from './CodeMirrorEditorMain';
+export * from './CodeMirrorEditorMainReadOnly';
 export * from './CodeMirrorEditorComment';
 export * from './CodeMirrorEditorDiff';
 export * from './MergeViewer';