cleanup

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

@@ -1,11 +1,9 @@
-import react, { useMemo, useRef, type CSSProperties } from 'react';
+import react, { useMemo, useRef } from 'react';
 
 import { CodeMirrorEditorReadOnly, GlobalCodeMirrorEditorKey } from '@growi/editor';
-import { useRect } from '@growi/ui/dist/utils';
 import { throttle } from 'throttle-debounce';
 
 import { useShouldExpandContent } from '~/client/services/layout';
-import { useEditingMarkdown } from '~/stores/editor';
 import { useSWRxCurrentPage, useIsLatestRevision } from '~/stores/page';
 import { usePreviewOptions } from '~/stores/renderer';
 
@@ -15,11 +13,9 @@ import { useScrollSync } from './ScrollSyncHelper';
 
 export const PageEditorReadOnly = react.memo((): JSX.Element => {
   const previewRef = useRef<HTMLDivElement>(null);
-  const [previewRect] = useRect(previewRef);
 
   const { data: currentPage } = useSWRxCurrentPage();
   const { data: rendererOptions } = usePreviewOptions();
-  const { data: editingMarkdown } = useEditingMarkdown();
   const { data: isLatestRevision } = useIsLatestRevision();
   const shouldExpandContent = useShouldExpandContent(currentPage);
 
@@ -27,29 +23,20 @@ export const PageEditorReadOnly = react.memo((): JSX.Element => {
   const scrollEditorHandlerThrottle = useMemo(() => throttle(25, scrollEditorHandler), [scrollEditorHandler]);
   const scrollPreviewHandlerThrottle = useMemo(() => throttle(25, scrollPreviewHandler), [scrollPreviewHandler]);
 
-  const pastEndStyle: CSSProperties | undefined = useMemo(() => {
-    if (previewRect == null) {
-      return undefined;
-    }
-
-    const previewRectHeight = previewRect.height;
-
-    // containerHeight - 1.5 line height
-    return { paddingBottom: `calc(${previewRectHeight}px - 2em)` };
-  }, [previewRect]);
+  const revisionBody = currentPage?.revision?.body;
 
   if (rendererOptions == null || isLatestRevision) {
     return <></>;
   }
 
   return (
-    <div data-testid="page-editor" id="page-editor" className="flex-expand-vert">
+    <div id="page-editor" className="flex-expand-vert">
       <EditorNavbar />
 
       <div className="flex-expand-horiz">
         <div className="page-editor-editor-container flex-expand-vert border-end">
           <CodeMirrorEditorReadOnly
-            body={editingMarkdown}
+            markdown={revisionBody}
             onScroll={scrollEditorHandlerThrottle}
           />
         </div>
@@ -59,11 +46,10 @@ export const PageEditorReadOnly = react.memo((): JSX.Element => {
           className="page-editor-preview-container flex-expand-vert overflow-y-auto d-none d-lg-flex"
         >
           <Preview
-            rendererOptions={rendererOptions}
-            markdown={editingMarkdown}
+            markdown={revisionBody}
             pagePath={currentPage?.path}
+            rendererOptions={rendererOptions}
             expandContentWidth={shouldExpandContent}
-            style={pastEndStyle}
           />
         </div>
       </div>

packages/editor/src/components/CodeMirrorEditorReadOnly.tsx

@@ -6,7 +6,7 @@ import { GlobalCodeMirrorEditorKey } from '../consts';
 import { setDataLine } from '../services/extensions/setDataLine';
 import { useCodeMirrorEditorIsolated } from '../stores';
 
-import { CodeMirrorEditor, CodeMirrorEditorProps } from '.';
+import { CodeMirrorEditor } from '.';
 
 const additionalExtensions: Extension[] = [
   [
@@ -15,16 +15,15 @@ const additionalExtensions: Extension[] = [
   ],
 ];
 
-type Props = CodeMirrorEditorProps & {
-  body?: string,
+type Props = {
+  markdown?: string,
+  onScroll?: () => void,
 }
 
-export const CodeMirrorEditorReadOnly = (props: Props): JSX.Element => {
-  const { body, ...otherProps } = props;
-
+export const CodeMirrorEditorReadOnly = ({ markdown, onScroll }: Props): JSX.Element => {
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.READONLY);
 
-  codeMirrorEditor?.initDoc(body);
+  codeMirrorEditor?.initDoc(markdown);
 
   useEffect(() => {
     return codeMirrorEditor?.appendExtensions?.(additionalExtensions);
@@ -34,7 +33,7 @@ export const CodeMirrorEditorReadOnly = (props: Props): JSX.Element => {
     <CodeMirrorEditor
       hideToolbar
       editorKey={GlobalCodeMirrorEditorKey.READONLY}
-      {...otherProps}
+      onScroll={onScroll}
     />
   );
 };