copy: Style KaTeX annotations to be included in copy HTML.

apoorvapendse · timabbott · commit 353f57e518b8 · 2025-03-19T10:07:32.000-07:00
We've for a while been finding that copy/paste of LaTeX only worked if we had a more JS-heavy copy handler that directly copies the HTML/text using events, rather than just allowing the browser's native copying logic to do its thing. We've discovered the bug was that the `<annotation>` tag in MathML is not rendered in some browsers which results in default copy behavior of the browser breaking KaTeX copy-pasting and quoting by omitting the `<annotation>` in the copied HTML as Chrome and possibly other browsers select only what is visible. From https://www.w3.org/TR/selection-api/ > Chrome 16 dev behaves as you'd expect given its Selection implementation. It refuses to select anything that's not visible, so it's almost always wrong. Opera 11.50 just does nothing in all my tests, as usual. This can be observed in the `paste_html` fixtures present in #33993 (comment). We fix this by simply overriding the `display:none` property from the <annotation> tag in the user agent stylesheet, which lets the browser select and ultimately copy it which results in the annotation being present in the `paste_html` and restore the working of KaTeX quoting/copy-pasting. This appears to have no visible impact, since browsers don't actually have a way to display the annotations.
diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
@@ -280,6 +280,16 @@
         overflow: auto hidden;
     }
 
+    .katex-mathml annotation {
+        /* Because annotations are never displayable, browser user-agent
+           stylesheets mark them as not displayable, which has the
+           side effect of having them not be included in the HTML
+           version of copying the content. Override this, so KaTeX can
+           be copy/pasted within Zulip. */
+        user-select: all;
+        display: inline;
+    }
+
     .tex-error {
         color: hsl(0deg 0% 50%);
     }
