[#64933] use svg arrows for editor fold gutter

src/components/CodeMirror.js

@@ -169,6 +169,15 @@ const CodeEditor = styled.div`
       transform: translateX(-11px);
     }
   }
+
+  .fold-arrow {
+    padding: 0 4px;
+    cursor: pointer;
+
+    &.unfold {
+      rotate: -90deg;
+    }
+  }
 `;
 
 const setEditorText = (editor, text) => {
@@ -225,6 +234,7 @@ const CodeMirror = ({ text, id, root, mode, spellcheckOpts, highlights, collabor
         .useHighlighter(highlights)
         .useCompartment(suggestionCompartment, customHighlighter([]))
         .useSpellcheck(spellcheckOpts)
+        .useFoldArrows()
         .if(collaboration.opts.enabled, (b) => b.useCollaboration({ ...collaboration, editorRef }))
         .if(collaboration.opts.commentsEnabled, (b) =>
           b.useComments({ ycomments: collaboration.ycomments }).useSuggestionPopup({ ycomments: collaboration.ycomments, editorMountpoint }),

src/extensions/index.js

@@ -13,8 +13,13 @@ import { foldEffect, unfoldEffect, foldable } from "@codemirror/language";
 import { syncPreviewWithCursor } from "./syncDualPane";
 import { cursorIndicator } from "./cursorIndicator";
 import { customCommonMark, fenceFold, headerIndent } from "./markdownLang";
+import { foldArrowGutter } from "../hooks/markdownFoldButtons";
 
-const basicSetupWithoutHistory = basicSetup.filter((_, i) => i != 3);
+const basicExclude = [
+  3, // history
+  4, // default fold gutter
+];
+const basicSetupWithoutHistory = basicSetup.filter((_, i) => !basicExclude.includes(i));
 const minimalSetupWithoutHistory = minimalSetup.filter((_, i) => i != 1);
 
 const getRelativeCursorLocation = (view) => {
@@ -210,6 +215,11 @@ export class ExtensionBuilder {
     return this;
   }
 
+  useFoldArrows() {
+    this.extensions.push(foldArrowGutter);
+    return this;
+  }
+
   create() {
     return [...this.important, ...this.base, ...this.extensions];
   }

src/hooks/markdownFoldButtons.js

@@ -1,5 +1,5 @@
 import { getLineById, SRC_LINE_ID } from "./markdownSourceMap";
-import { toggleFold, foldable, foldedRanges } from "@codemirror/language";
+import { toggleFold, foldable, foldedRanges, foldGutter } from "@codemirror/language";
 import foldIcon from "../icons/fold.svg";
 
 export function addFoldUI(/** @type {import("markdown-it").Token} */ token, /** @type {string} */ baseOutput, env) {
@@ -62,3 +62,17 @@ export function handlePreviewFold(/** @type {MouseEvent} */ ev, lineMap) {
   });
   toggleFold(window.myst_editor.main_editor);
 }
+
+export const foldArrowGutter = foldGutter({
+  markerDOM(open) {
+    const img = document.createElement("img");
+    img.src = foldIcon;
+    img.alt = "fold";
+    img.title = "Fold line";
+    img.classList.add("fold-arrow");
+    if (!open) {
+      img.classList.add("unfold");
+    }
+    return img;
+  },
+});