From 03a839acc7e20771ffa52d3c93233d7a3e3bf788 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miko=C5=82aj=20Trzci=C5=84ski?= Date: Thu, 26 Sep 2024 10:56:54 +0200 Subject: [PATCH] [#64933] ensure folding arrows are added in larger documents --- src/components/CodeMirror.js | 4 ++++ src/hooks/useText.js | 11 +++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/CodeMirror.js b/src/components/CodeMirror.js index 52e5845..dd089ab 100644 --- a/src/components/CodeMirror.js +++ b/src/components/CodeMirror.js @@ -178,6 +178,10 @@ const CodeEditor = styled.div` rotate: -90deg; } } + + .cm-foldPlaceholder { + margin-left: 4px; + } `; const setEditorText = (editor, text) => { diff --git a/src/hooks/useText.js b/src/hooks/useText.js index fddd2b4..f73da8e 100644 --- a/src/hooks/useText.js +++ b/src/hooks/useText.js @@ -10,7 +10,7 @@ import { StateEffect } from "@codemirror/state"; import markdownMermaid from "./markdownMermaid"; import { EditorView, ViewUpdate } from "@codemirror/view"; import { addFoldUI } from "./markdownFoldButtons"; -import { foldedRanges } from "@codemirror/language"; +import { foldedRanges, ensureSyntaxTree } from "@codemirror/language"; const countOccurences = (str, pattern) => (str?.match(pattern) || []).length; const getUnfoldedMarkdown = (src, /** @type {EditorView} */ view) => { @@ -183,8 +183,8 @@ export const useText = ({ initialText, transforms, customRoles, preview, backsla .map(({ md, startLine, endLine }, id) => { const hash = new IMurMurHash(md, 42).result(); - // Clear source mappings for chunk we are rerendering if (!lookup[hash]) { + // Clear source mappings for chunk we are rerendering let unfoldedStart = startLine; let unfoldedEnd = endLine; for (const range of foldedLines ?? []) { @@ -198,6 +198,13 @@ export const useText = ({ initialText, transforms, customRoles, preview, backsla for (let l = unfoldedStart; l <= unfoldedEnd; l++) { lineMap.current.delete(l); } + + const endLineTo = window.myst_editor.main_editor.state.doc.line(unfoldedEnd).to; + // This might cause longer startup times for larger documents + // Calling this causes the Markdown parser in CodeMirror to parse at least up to the range + // being rendered. Thanks to this, we can query the editor about lines being foldable. + ensureSyntaxTree(window.myst_editor.main_editor.state, endLineTo, 1000); + window.myst_editor.main_editor.dispatch({}); } const html =