Files
multica/packages/views/editor/utils/highlight-match.test.ts
Jiayuan Zhang 0d51614c9c feat(editor): text highlight (==text==) in description & comments [MUL-2934] (#3661)
* feat(editor): support text highlight (==text==) in description & comments

Adds a single-color (yellow) text highlight mark to the shared rich-text
editor, round-tripped through stored Markdown as ==text==.

- HighlightExtension: @tiptap/extension-highlight + @tiptap/markdown hooks
  (markdownTokenizer/parseMarkdown/renderMarkdown) so ==text== <-> <mark>
  round-trips; inner inline formatting preserved via inlineTokens.
- Bubble menu: highlight toggle button (Mod-Shift-H), i18n in 4 locales.
- Read-only renderer: highlightToHtml lowers ==text== -> <mark> (skips code
  and math); rehype-sanitize schema whitelists <mark>. Nested Markdown inside
  a highlight still parses via the existing rehype-raw step.
- prose.css: single yellow <mark> style, legible in light/dark.

Pinned @tiptap/extension-highlight to exact 3.22.1 to match @tiptap/core
(>=3.23 expects a getStyleProperty export core 3.22.1 doesn't have).

Web/desktop only. Mobile (native md4c, no == syntax, no custom renderers)
is tracked as a follow-up. MUL-2934.

Tests: editor round-trip (cross-process serialization protocol), readonly
<mark> rendering + sanitize, and the ==->mark transform incl. code-skip.

Co-authored-by: multica-agent <github@multica.ai>

* fix(editor): align highlight boundary rules across editor & readonly

Addresses two boundary bugs from review (PR #3661):

1. A == inside inline code/math could close a highlight when the opening
   == was outside the literal span (e.g. ==a `b==c` d== wrongly became
   <mark>a `b</mark>c` d==). Both the editor tokenizer's lazy regex and the
   readonly transform only guarded the opening fence, not the closing one.
2. The readonly transform matched across blank lines (==a\n\nb==) while the
   editor lexes those as two literal paragraphs — a storage↔editor↔readonly
   mismatch.

Fix: extract one shared matcher (utils/highlight-match.ts) used by BOTH the
editor tokenizer and the readonly lowering, so the rules can't drift. It skips
fences that fall inside code/math literal ranges (open or close) and caps the
inner span at the first blank line.

Tests: shared-matcher unit tests + both repros covered on the editor
(round-trip/HTML) and readonly (transform + rendered DOM) sides.

Co-authored-by: multica-agent <github@multica.ai>

* fix(editor): handle CRLF in highlight blank-line boundary

BLANK_LINE_RE only matched LF, so a CRLF blank line (==a\r\n\r\nb==) was not
recognized as a block boundary and got highlighted. Widen to \r?\n[ \t]*\r?\n.

Tests: CRLF blank-line (no highlight) + CRLF soft-break (still highlights) on
the matcher, readonly transform, and editor sides.

Co-authored-by: multica-agent <github@multica.ai>

---------

Co-authored-by: Lambda <lambda@multica.ai>
Co-authored-by: multica-agent <github@multica.ai>
2026-06-02 17:24:55 +02:00

73 lines
2.2 KiB
TypeScript

import { describe, it, expect } from "vitest";
import { matchHighlightAt, findLiteralRanges } from "./highlight-match";
/** Convenience: match at the first `==` and return the inner text, or null. */
function inner(text: string): string | null {
const i = text.indexOf("==");
if (i === -1) return null;
const m = matchHighlightAt(text, i);
return m ? m.inner : null;
}
describe("matchHighlightAt", () => {
it("matches a basic highlight at the opening fence", () => {
const m = matchHighlightAt("==hi==", 0);
expect(m).toEqual({ end: 6, inner: "hi" });
});
it("returns null when the opening fence is not at i", () => {
expect(matchHighlightAt("x==hi==", 0)).toBeNull();
});
it("rejects whitespace directly inside the fences", () => {
expect(inner("== x ==")).toBeNull();
});
it("rejects empty content", () => {
expect(inner("====")).toBeNull();
});
it("skips a closing == that sits inside inline code", () => {
// ==a `b==c` d== → inner is the whole `a `b==c` d`, not `a `b`
expect(inner("==a `b==c` d==")).toBe("a `b==c` d");
});
it("skips a closing == that sits inside inline math", () => {
expect(inner("==a $b==c$ d==")).toBe("a $b==c$ d");
});
it("does not open a highlight whose opening == is inside inline code", () => {
expect(inner("`x==y==z`")).toBeNull();
});
it("does not cross a blank line", () => {
expect(inner("==a\n\nb==")).toBeNull();
});
it("allows a soft line break inside a block", () => {
expect(inner("==a\nb==")).toBe("a\nb");
});
it("does not cross a CRLF blank line", () => {
expect(inner("==a\r\n\r\nb==")).toBeNull();
});
it("allows a CRLF soft line break inside a block", () => {
expect(inner("==a\r\nb==")).toBe("a\r\nb");
});
it("matches the nearest valid closing fence", () => {
// first valid close wins; trailing == is left over
expect(matchHighlightAt("==a==b==", 0)).toEqual({ end: 5, inner: "a" });
});
});
describe("findLiteralRanges", () => {
it("treats == inside a fenced block as literal", () => {
const text = "```\n==x==\n```";
const ranges = findLiteralRanges(text);
const fencePos = text.indexOf("==x==");
expect(ranges.some((r) => fencePos >= r.start && fencePos < r.end)).toBe(true);
});
});