split global.css

frontend/src/components/react/admin/editor/useLivePreview.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { EditorView } from '@codemirror/view';
+
+interface Opts {
+  getView: () => EditorView | null;
+}
+
+/** Live markdown preview pane: visibility, mobile tab, debounced render. */
+export function useLivePreview({ getView }: Opts) {
+  const [showPreview, setShowPreview] = useState(false);
+  const [mobileView, setMobileView] = useState<'edit' | 'preview'>('edit');
+  const previewRef = useRef<HTMLDivElement>(null);
+  const renderMarkdownRef = useRef<((src: string) => string) | null>(null);
+  const previewTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const updatePreviewRef = useRef<() => void>(() => {});
+
+  const updatePreview = useCallback(async () => {
+    const view = getView();
+    if (!showPreview || !view || !previewRef.current) return;
+    if (!renderMarkdownRef.current) {
+      const mod = await import('../../../../lib/markdown');
+      renderMarkdownRef.current = mod.renderMarkdown;
+    }
+    const content = view.state.doc.toString();
+    previewRef.current.innerHTML = renderMarkdownRef.current(content);
+  }, [showPreview, getView]);
+
+  useEffect(() => {
+    updatePreviewRef.current = updatePreview;
+  }, [updatePreview]);
+
+  useEffect(() => {
+    if (showPreview) updatePreview();
+  }, [showPreview, updatePreview]);
+
+  // Debounced refresh — called from the CodeMirror update listener.
+  const schedulePreview = useCallback(() => {
+    if (previewTimerRef.current) clearTimeout(previewTimerRef.current);
+    previewTimerRef.current = setTimeout(() => updatePreviewRef.current(), 300);
+  }, []);
+
+  return {
+    showPreview,
+    setShowPreview,
+    mobileView,
+    setMobileView,
+    previewRef,
+    updatePreview,
+    schedulePreview,
+  };
+}