remove ref

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

@@ -63,6 +63,7 @@ import Preview from './Preview';
 import { scrollEditor, scrollPreview } from './ScrollSyncHelper';
 
 import '@growi/editor/dist/style.css';
+import { preview } from 'vite';
 
 
 const logger = loggerFactory('growi:PageEditor');
@@ -386,6 +387,31 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   const scrollPreviewHandlerThrottle = useMemo(() => throttle(25, scrollPreviewHandler), [scrollPreviewHandler]);
 
+  const [pastEnd, setPastEnd] = useState(0);
+  useEffect(() => {
+    if (previewRef.current == null) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        console.log(entry.contentRect);
+        const previewHeight = entry.contentRect.height;
+        let lastElementHeight = 0;
+        if (previewRef.current != null) {
+          const previewElements = previewRef.current.getElementsByClassName('has-data-line');
+          lastElementHeight = previewElements[previewElements.length - 1].getBoundingClientRect().height;
+        }
+        setPastEnd(previewHeight - lastElementHeight - 10);
+      }
+    });
+
+    resizeObserver.observe(previewRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [setPastEnd]);
+
   const afterResolvedHandler = useCallback(async() => {
     // get page data from db
     const pageData = await mutateCurrentPage();
@@ -419,7 +445,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     codeMirrorEditor?.setCaretLine();
   }, [codeMirrorEditor]);
 
-
   // set handler to save and return to View
   useEffect(() => {
     globalEmitter.on('saveAndReturnToView', saveAndReturnToViewHandler);
@@ -509,7 +534,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
             markdown={markdownToPreview}
             pagePath={currentPagePath}
             expandContentWidth={shouldExpandContent}
-            pastEnd={previewRef?.current?.getBoundingClientRect().height ?? 200 - 200}
+            pastEnd={pastEnd}
           />
         </div>
         {/*