From db0f7729c58eee8656495a131790a0244e9c0d1f Mon Sep 17 00:00:00 2001 From: JOOHOJANG Date: Mon, 28 Oct 2024 23:16:13 +0900 Subject: [PATCH 1/4] Add throttle to prevent preview's indiscriminate updates --- frontend/src/components/editor/Preview.tsx | 34 +++++++++++++++------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/editor/Preview.tsx b/frontend/src/components/editor/Preview.tsx index f5de285a..b44550e5 100644 --- a/frontend/src/components/editor/Preview.tsx +++ b/frontend/src/components/editor/Preview.tsx @@ -1,10 +1,9 @@ import { CircularProgress, Stack } from "@mui/material"; import "katex/dist/katex.min.css"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState, useMemo } from "react"; import { useSelector } from "react-redux"; import { useCurrentTheme } from "../../hooks/useCurrentTheme"; import { selectEditor } from "../../store/editorSlice"; -import { addSoftLineBreak } from "../../utils/document"; import MarkdownIt from "markdown-it"; import { toHtml } from "hast-util-to-html"; import markdownItKatex from "@vscode/markdown-it-katex"; @@ -18,6 +17,10 @@ import markdownItSanitizer from "markdown-it-sanitizer"; import * as IncrementalDOM from "incremental-dom"; import "./editor.css"; import "./preview.css"; +import _ from "lodash"; +import { addSoftLineBreak } from "../../utils/document"; + +const DELAY = 500; const md = new MarkdownIt({ html: true, @@ -46,27 +49,36 @@ const Preview = () => { const editorStore = useSelector(selectEditor); const [content, setContent] = useState(""); const containerRef = useRef(null); + const throttledUpdatePreviewConetent = useMemo( + () => + _.throttle( + () => { + const editorText = editorStore.doc?.getRoot().content?.toString() || ""; + + // Add soft line break + setContent(addSoftLineBreak(editorText)); + }, + DELAY, + // Set trailing true to prevent ignoring last call + { trailing: true } + ), + [editorStore.doc] + ); useEffect(() => { if (!editorStore.doc) return; - const updatePreviewContent = () => { - const editorText = editorStore.doc?.getRoot().content?.toString() || ""; - // Add soft line break - setContent(addSoftLineBreak(editorText)); - }; - - updatePreviewContent(); + throttledUpdatePreviewConetent(); const unsubscribe = editorStore.doc.subscribe("$.content", () => { - updatePreviewContent(); + throttledUpdatePreviewConetent(); }); return () => { unsubscribe(); setContent(""); }; - }, [editorStore.doc]); + }, [editorStore.doc, throttledUpdatePreviewConetent]); useEffect(() => { if (containerRef.current == null) { From 8e585c4cffeac0b5c649efc4a5f6309ec59636df Mon Sep 17 00:00:00 2001 From: JOOHOJANG Date: Tue, 5 Nov 2024 09:59:29 +0900 Subject: [PATCH 2/4] Update preview text from cmview --- frontend/src/components/editor/Preview.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/editor/Preview.tsx b/frontend/src/components/editor/Preview.tsx index b44550e5..1438beee 100644 --- a/frontend/src/components/editor/Preview.tsx +++ b/frontend/src/components/editor/Preview.tsx @@ -53,7 +53,10 @@ const Preview = () => { () => _.throttle( () => { - const editorText = editorStore.doc?.getRoot().content?.toString() || ""; + const editorText = + editorStore.cmView?.state.doc.toString() || + editorStore.doc?.getRoot().content?.toString() || + ""; // Add soft line break setContent(addSoftLineBreak(editorText)); From 97298e9eb5d43871c64cbf49d6873d750b60f1dd Mon Sep 17 00:00:00 2001 From: JOOHOJANG Date: Tue, 5 Nov 2024 10:15:36 +0900 Subject: [PATCH 3/4] Add cmview into useMemo dependencies --- frontend/src/components/editor/Preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/editor/Preview.tsx b/frontend/src/components/editor/Preview.tsx index 1438beee..d734d641 100644 --- a/frontend/src/components/editor/Preview.tsx +++ b/frontend/src/components/editor/Preview.tsx @@ -65,7 +65,7 @@ const Preview = () => { // Set trailing true to prevent ignoring last call { trailing: true } ), - [editorStore.doc] + [editorStore.doc, editorStore.cmView] ); useEffect(() => { From 1c6b6d7f39d841b7d63620fe80248a0294707056 Mon Sep 17 00:00:00 2001 From: JOOHOJANG Date: Tue, 5 Nov 2024 19:51:04 +0900 Subject: [PATCH 4/4] Fix typo --- frontend/src/components/editor/Preview.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/editor/Preview.tsx b/frontend/src/components/editor/Preview.tsx index d734d641..73dd3625 100644 --- a/frontend/src/components/editor/Preview.tsx +++ b/frontend/src/components/editor/Preview.tsx @@ -49,7 +49,7 @@ const Preview = () => { const editorStore = useSelector(selectEditor); const [content, setContent] = useState(""); const containerRef = useRef(null); - const throttledUpdatePreviewConetent = useMemo( + const throttledUpdatePreviewContent = useMemo( () => _.throttle( () => { @@ -71,17 +71,17 @@ const Preview = () => { useEffect(() => { if (!editorStore.doc) return; - throttledUpdatePreviewConetent(); + throttledUpdatePreviewContent(); const unsubscribe = editorStore.doc.subscribe("$.content", () => { - throttledUpdatePreviewConetent(); + throttledUpdatePreviewContent(); }); return () => { unsubscribe(); setContent(""); }; - }, [editorStore.doc, throttledUpdatePreviewConetent]); + }, [editorStore.doc, throttledUpdatePreviewContent]); useEffect(() => { if (containerRef.current == null) {