paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-27 10:03:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

copy_and_paste: Remove spannification logic for math expressions.

Browse Source 
We instead use a turndown filter to get
what we want in case of inline expressions.

This removes most of the faulty logic
introduced by @apoorvapendse.

Fixes: https://chat.zulip.org/#narrow/channel/9-issues/topic/HTML.20paragraphs.20misconverted.20by.20copy.20and.20paste/near/2078384
This commit is contained in:
apoorvapendse
2025-02-05 15:24:51 +05:30
committed by Tim Abbott
parent d28f7d8622
commit 5e6764373f
2 changed files with 24 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
web/src/copy_and_paste.ts
View File

@@ -13,66 +13,6 @@ import * as stream_data from "./stream_data.ts";
import * as topic_link_util from "./topic_link_util.ts";
import * as util from "./util.ts";
const all_inline_html_elements = new Set([
"a",
"abbr",
"acronym",
"b",
"bdi",
"bdo",
"big",
"br",
"cite",
"code",
"data",
"del",
"dfn",
"em",
"i",
"img",
"input",
"kbd",
"label",
"map",
"mark",
"output",
"q",
"ruby",
"rp",
"rt",
"s",
"samp",
"select",
"small",
"span",
"strong",
"sub",
"sup",
"textarea",
"time",
"tt",
"u",
"var",
"wbr",
]);
const markdown_map_for_inline_html_tags = new Map([
["strong", "**"],
["b", "**"],
["em", "*"],
["i", "*"],
["code", "`"],
["s", "~~"],
["del", "~~"],
["br", "\n"],
["sub", "<sub>"],
["sup", "<sup>"],
["u", "<u>"],
["mark", "=="],
["kbd", "`"],
["var", "_"],
["cite", "_"],
["q", "“"],
]);
declare global {
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
interface HTMLElementTagNameMap {
@@ -504,41 +444,6 @@ export function paste_handler_converter(
.querySelector("body");
assert(copied_html_fragment !== null);
const para_elements = copied_html_fragment.querySelectorAll("p");
for (const element of para_elements) {
const children = [...element.childNodes];
/*
The aim behind doing this is to convert the intermediate text nodes
between two katex spans into spans.
This is done because filter() function only processes HTMLElements
*/
let katex_node_count = 0;
for (const child of children) {
if (
child instanceof HTMLElement &&
(child.classList.contains("katex") || child.classList.contains("katex-display"))
) {
katex_node_count += 1;
}
}
// We do the text node to span conversions only if
// the children are sandwiched between katex nodes.
if (katex_node_count < 2) {
continue;
}
for (const child of children) {
if (child.nodeType === Node.TEXT_NODE) {
const span = document.createElement("span");
span.classList.add("zulip-paste-parser-text-node");
span.textContent = child.textContent;
child.replaceWith(span);
}
}
}
const copied_within_single_element = within_single_element(copied_html_fragment);
const outer_elements_to_retain = ["PRE", "UL", "OL", "A", "CODE"];
// If the entire selection copied is within a single HTML element (like an
@@ -639,16 +544,13 @@ export function paste_handler_converter(
We make use of a set to keep track whether the parent p is already processed in both the cases.
In case of inline math expressions, the structure is same as math blocks.
Instead of katex-displays being the immediate children of p, we have span.katex or
textnodes(which are converted into spans before parsing) as the immediate children.
Newlines in markdown are translated into <br> instead of empty katex-displays here.
Instead of katex-displays being the immediate children of p, we have span.katex.
For more information:
https://chat.zulip.org/#narrow/channel/9-issues/topic/Replying.20to.20highlighted.20text.2C.20LaTeX.20is.20not.20preserved.20.2331608/near/1991687
*/
const processed_math_block_parents = new Set();
const processed_inline_math_block_parents = new Set();
turndownService.addRule("katex-math-block", {
filter(node) {
if (
@@ -684,7 +586,7 @@ export function paste_handler_converter(
child.classList.contains("katex-display") &&
child.querySelector("math")?.textContent !== ""
) {
math_block_markdown += content;
math_block_markdown += content + "\n\n";
continue;
}
if (consecutive_empty_display_count === 0) {
@@ -701,68 +603,25 @@ export function paste_handler_converter(
},
});
function is_inline_tag(node: HTMLElement): boolean {
return node.nodeType === 1 && all_inline_html_elements.has(node.tagName.toLowerCase());
}
turndownService.addRule("katex-inline-math", {
filter(node) {
// Allow the intermediate text blocks and inline tags with katex siblings, so that they don't get appended to the end.
if (
node.classList.contains("zulip-paste-parser-text-node") ||
(is_inline_tag(node) &&
[...node.parentNode!.children].some(
(sibling) => sibling !== node && sibling.classList.contains("katex"),
))
) {
return true;
}
if (node.classList.contains("katex") && !node.classList.contains("katex-display")) {
// Should explicitly be an inline expression
if (node.classList.contains("katex")) {
const parent = node.parentElement;
if (parent?.classList.contains("katex-display")) {
// This is already processed by the math block rule.
return false;
}
return true;
}
return false;
},
replacement(content, node: Node) {
let parsed_inline_expression = "";
if (node !== null) {
const parent = node.parentElement!;
if (processed_inline_math_block_parents.has(parent)) {
return "";
}
processed_inline_math_block_parents.add(parent);
for (const child of parent.children) {
const tag = child.nodeName.toLowerCase();
const markdown_tag_wrap = markdown_map_for_inline_html_tags.get(tag) ?? "";
if (tag === "br") {
parsed_inline_expression += "\n";
continue;
}
const annotation_element = child.querySelector(
`.katex-mathml annotation[encoding="application/x-tex"]`,
);
if (annotation_element?.textContent) {
const katex_source = annotation_element.textContent;
parsed_inline_expression += `$$${katex_source}$$`;
continue;
}
if (child.classList.contains("katex")) {
parsed_inline_expression += `$$${content}$$`;
continue;
}
// It is a text node that is not between two katex spans
parsed_inline_expression +=
markdown_tag_wrap + child.textContent + markdown_tag_wrap;
continue;
}
}
return parsed_inline_expression;
assert(node instanceof HTMLElement);
const annotation_element = node.querySelector(
`.katex-mathml annotation[encoding="application/x-tex"]`,
);
const katex_source = annotation_element?.textContent?.trim() ?? content;
return `$$${katex_source}$$`;
},
});

16
zerver/tests/fixtures/katex_test_cases.json vendored
View File

@@ -16,7 +16,7 @@
"original_markup":"```math\nc+d=55\n\n\nx + y = 99\n```",
"description": "Selecting only math expression in math block.",
"input": "<p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"mord mathnormal\">c</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.6944em;\"></span><span class=\"mord mathnormal\">d</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.6444em;\"></span><span class=\"mord\">55</span></span></span></span></span>\n\n<span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\"><semantics><mrow><mi>x</mi><mo>+</mo><mi>y</mi><mo>=</mo><mn>99</mn></mrow><annotation encoding=\"application/x-tex\">x + y = 99</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.6667em;vertical-align:-0.0833em;\"></span><span class=\"mord mathnormal\">x</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.1944em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.03588em;\">y</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.6444em;\"></span><span class=\"mord\">99</span></span></span></span></span></p>",
"expected_output": "```math\nc+d=55\n\n\nx + y = 99\n```"
"expected_output": "```math\nc+d=55\n\nx + y = 99\n```"
}
],
"inline_math_expression_tests": [
@@ -44,11 +44,23 @@
"input": "<div class=\"message_content rendered_markdown\"><p>I <em>think</em> <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msup><mi>e</mi><mrow><mi>i</mi><mi>π</mi></mrow></msup><mo>=</mo><mo>−</mo><mn>1</mn></mrow><annotation encoding=\"application/x-tex\">e^{i\\pi} = -1</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.8247em;\"></span><span class=\"mord\"><span class=\"mord mathnormal\">e</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8247em;\"><span style=\"top:-3.063em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mathnormal mtight\" style=\"margin-right:0.03588em;\">iπ</span></span></span></span></span></span></span></span></span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.7278em;vertical-align:-0.0833em;\"></span><span class=\"mord\">−</span><span class=\"mord\">1</span></span></span></span> is the <strong>coolest</strong> thing I've seen since <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><msup><mi>z</mi><mn>2</mn></msup></mrow><annotation encoding=\"application/x-tex\">x^2 + y^2 = z^2</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.8974em;vertical-align:-0.0833em;\"></span><span class=\"mord\"><span class=\"mord mathnormal\">x</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8141em;\"><span style=\"top:-3.063em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:1.0085em;vertical-align:-0.1944em;\"></span><span class=\"mord\"><span class=\"mord mathnormal\" style=\"margin-right:0.03588em;\">y</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8141em;\"><span style=\"top:-3.063em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.8141em;\"></span><span class=\"mord\"><span class=\"mord mathnormal\" style=\"margin-right:0.04398em;\">z</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8141em;\"><span style=\"top:-3.063em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span></span></span></span> blew my mind.</p></div>",
"expected_output":"I *think* $$e^{i\\pi} = -1$$ is the **coolest** thing I've seen since $$x^2 + y^2 = z^2$$ blew my mind."
},{
},
{
"original_markup":"there $$a+b$$ `some code` some text _hello_ `more code` $$y+z=4444$$ ~~don't read this~~ some text `code` $$p+q=44$$ text haha wooo",
"expected_output":"there $$a+b$$ `some code` some text _hello_ `more code` $$y+z=4444$$ ~~don't read this~~ some text `code` $$p+q=44$$ text haha wooo",
"input":"<div class=\"message_content rendered_markdown\"><p>there <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow><annotation encoding=\"application/x-tex\">a+b</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.6667em;vertical-align:-0.0833em;\"></span><span class=\"mord mathnormal\">a</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.6944em;\"></span><span class=\"mord mathnormal\">b</span></span></span></span> <code>some code</code> some text _hello_ <code>more code</code> <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>y</mi><mo>+</mo><mi>z</mi><mo>=</mo><mn>4444</mn></mrow><annotation encoding=\"application/x-tex\">y+z=4444</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.7778em;vertical-align:-0.1944em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.03588em;\">y</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.4306em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.04398em;\">z</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.6444em;\"></span><span class=\"mord\">4444</span></span></span></span> <del>don't read this</del> some text <code>code</code> <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>p</mi><mo>+</mo><mi>q</mi><mo>=</mo><mn>44</mn></mrow><annotation encoding=\"application/x-tex\">p+q=44</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.7778em;vertical-align:-0.1944em;\"></span><span class=\"mord mathnormal\">p</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.1944em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.03588em;\">q</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.6444em;\"></span><span class=\"mord\">44</span></span></span></span> text haha wooo</p></div>",
"description": "Inline expression with inline elements."
},
{
"description":"Nested inline katex siblings",
"expected_output":"like ~~*this* is not $$x^2$$, it's $$xx/2$$, **see?**~~` good",
"original_markup":"like ~~*this* is not $$x^2$$, it's $$xx/2$$, **see?**~~` good",
"input":"<div class=\"message_content rendered_markdown\"><p>like <del><em>this</em> is not <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msup><mi>x</mi><mn>2</mn></msup></mrow><annotation encoding=\"application/x-tex\">x^2</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.8141em;\"></span><span class=\"mord\"><span class=\"mord mathnormal\">x</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8141em;\"><span style=\"top:-3.063em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span></span></span></span>, it's <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>x</mi><mi>x</mi><mi mathvariant=\"normal\">/</mi><mn>2</mn></mrow><annotation encoding=\"application/x-tex\">xx/2</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord mathnormal\">xx</span><span class=\"mord\">/2</span></span></span></span>, <strong>see?</strong></del>` good</p></div>"
},{
"description":"Another katex inline expression containing nested tags",
"expected_output":"world ~~it works **out $$a+b=c$$** so `well` if you try *this*** not $$p+q=r$$ that~~ good good",
"original_markup":"world ~~it works **out $$a+b=c$$** so `well` if you try *this*** not $$p+q=r$$ that~~ good good",
"input":"<p>world <del>it works <strong>out <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mo>=</mo><mi>c</mi></mrow><annotation encoding=\"application/x-tex\">a+b=c</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.6667em;vertical-align:-0.0833em;\"></span><span class=\"mord mathnormal\">a</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.6944em;\"></span><span class=\"mord mathnormal\">b</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.4306em;\"></span><span class=\"mord mathnormal\">c</span></span></span></span></strong> so <code>well</code> if you try <em>this</em>** not <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>p</mi><mo>+</mo><mi>q</mi><mo>=</mo><mi>r</mi></mrow><annotation encoding=\"application/x-tex\">p+q=r</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.7778em;vertical-align:-0.1944em;\"></span><span class=\"mord mathnormal\">p</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.1944em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.03588em;\">q</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.4306em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.02778em;\">r</span></span></span></span> that </del> good good</p>"
}
],
"text_node_to_span_conversion_tests":[