fix: render heading fold arrows with CSS

Author: tamlok

changes.md

@@ -1,5 +1,6 @@
 # Changes
 ## Unreleased
+* Render Markdown heading fold arrows with CSS so they do not paste as oversized SVGs into rich-text editors
 * Refresh PDF Highlight, Draw, and Text box icons when switching themes
 * Match the PDF viewer's unused space to the active theme, including live theme changes, without recoloring PDF pages
 * Place PDF Find And Replace beside Outline, before the page-navigation controls

src/data/extra/web/css/exportglobalstyles.css

@@ -17,15 +17,19 @@
     width: 2.5rem;
 }
 
-.vx-heading-fold-icon {
-    height: 1.5rem;
-    max-height: 100%;
-    transform-origin: center;
-    width: 1.5rem;
+/* Generated decoration keeps the chevron out of copied HTML content. */
+.vx-heading-fold-toggle::after {
+    border-bottom: 0.125rem solid currentColor;
+    border-right: 0.125rem solid currentColor;
+    box-sizing: content-box;
+    content: '';
+    height: 0.5rem;
+    transform: rotate(45deg);
+    width: 0.5rem;
 }
 
-.vx-heading-fold-toggle[aria-expanded="false"] .vx-heading-fold-icon {
-    transform: rotate(-90deg);
+.vx-heading-fold-toggle[aria-expanded="false"]::after {
+    transform: rotate(-45deg);
 }
 
 .vx-heading-fold > h1:hover > .vx-heading-fold-toggle,

src/data/extra/web/css/globalstyles.css

@@ -70,15 +70,19 @@ figcaption {
     width: 2.5rem;
 }
 
-.vx-heading-fold-icon {
-    height: 1.5rem;
-    max-height: 100%;
-    transform-origin: center;
-    width: 1.5rem;
-}
-
-.vx-heading-fold-toggle[aria-expanded="false"] .vx-heading-fold-icon {
-    transform: rotate(-90deg);
+/* Generated decoration keeps the chevron out of copied HTML content. */
+.vx-heading-fold-toggle::after {
+    border-bottom: 0.125rem solid currentColor;
+    border-right: 0.125rem solid currentColor;
+    box-sizing: content-box;
+    content: '';
+    height: 0.5rem;
+    transform: rotate(45deg);
+    width: 0.5rem;
+}
+
+.vx-heading-fold-toggle[aria-expanded="false"]::after {
+    transform: rotate(-45deg);
 }
 
 .vx-heading-fold > h1:hover > .vx-heading-fold-toggle,

src/data/extra/web/js/nodelinemapper.js

@@ -76,22 +76,6 @@ class HeadingFolding {
             button.setAttribute('aria-expanded', 'true');
             button.setAttribute('aria-controls', content.id);
             button.setAttribute('aria-label', 'Collapse section');
-            // Reuse the bundled arrow_dropdown.svg chevron geometry inline so the
-            // control stays theme-colored and self-contained in standalone exports.
-            let icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-            icon.setAttribute('class', 'vx-heading-fold-icon');
-            icon.setAttribute('viewBox', '0 0 48 48');
-            icon.setAttribute('aria-hidden', 'true');
-            icon.setAttribute('focusable', 'false');
-            let iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            iconPath.setAttribute('d', 'M36 18L24 30L12 18');
-            iconPath.setAttribute('fill', 'none');
-            iconPath.setAttribute('stroke', 'currentColor');
-            iconPath.setAttribute('stroke-width', '4');
-            iconPath.setAttribute('stroke-linecap', 'round');
-            iconPath.setAttribute('stroke-linejoin', 'round');
-            icon.appendChild(iconPath);
-            button.appendChild(icon);
             node.appendChild(button);
 
             stack.push({ level: level, content: content });
@@ -178,7 +162,6 @@ class HeadingFolding {
         p_content.hidden = !p_expanded;
         p_button.setAttribute('aria-expanded', p_expanded ? 'true' : 'false');
         p_button.setAttribute('aria-label', p_expanded ? 'Collapse section' : 'Expand section');
-        // The CSS rotates the single down-chevron SVG when aria-expanded is false.
     }
 
     expandHiddenAncestors(p_node) {

tests/widgets/test_markdownviewer_js.cpp

@@ -1413,11 +1413,6 @@ void TestMarkdownViewerJs::testHeadingFolding_enabledAndDisabledDecoration() {
                    "window.__buttonFor(window.__nodes.alpha).getAttribute('aria-label')"))
                .toString(),
            QStringLiteral("Collapse section"));
-  QCOMPARE(engine
-               .evaluate(QStringLiteral(
-                   "document.body.querySelectorAll('svg.vx-heading-fold-icon').length"))
-               .toInt(),
-           7);
 
   res = engine.evaluate(QStringLiteral("window.__mapper.setHeadingFoldingEnabled(false);"));
   QVERIFY2(!res.isError(), qPrintable(res.toString()));