@lotics/ui 11.8.2 → 11.8.3

package/docs/catalog.md

@@ -267,7 +267,7 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   (the heading ramp: `xl` = `##` section title, `xxl` = `#` page/record title, `xxxl` = hero
   numbers), `weight`, `color`, alignment, tabular numerals.
 - **`markdown`** — `Markdown`: the single canonical markdown renderer for chat, apps, and
-  `AgentRun`; rich on web via react-markdown/remark-gfm with copyable tables, plain-text on
+  `AgentRun`; rich GFM markdown on web with copyable tables, plain-text on
   native; takes a markdown `children` string.
 - **`markdown.css`** — import once for the web markdown styling.
 - **`format_date`** — `formatDate` / `parseDate` / `toISODate` + `DateFormatStyle`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "11.8.2",
+  "version": "11.8.3",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -238,9 +238,14 @@
   "dependencies": {
     "@lotics/docx": "^0.1.0",
     "@lotics/xlsx": "^0.1.0",
+    "mdast-util-from-markdown": "^2.0.3",
+    "mdast-util-gfm-footnote": "^2.1.0",
+    "mdast-util-gfm-strikethrough": "^2.0.0",
+    "mdast-util-gfm-table": "^2.0.0",
+    "mdast-util-gfm-task-list-item": "^2.0.0",
+    "micromark-extension-gfm": "^3.0.0",
     "pdfjs-dist": "^6.0.227",
-    "react-markdown": "^10.0.0",
-    "remark-gfm": "^4.0.0"
+    "react-markdown": "^10.0.0"
   },
   "peerDependencies": {
     "@react-native-picker/picker": ">=2.0.0",
@@ -279,6 +284,8 @@
     "lucide-react": "^0.562.0",
     "react-dom": "^19.2.0",
     "react-native-web": "^0.21.0",
+    "remark-parse": "^11.0.0",
+    "unified": "^11.0.5",
     "vite": "^7.2.4"
   }
 }

package/src/markdown.web.tsx

@@ -2,7 +2,7 @@ import "./markdown.css";
 import React, { useCallback, useRef, useState } from "react";
 import { View } from "react-native";
 import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { remarkGfmSafe } from "./remark_gfm_safe";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 
@@ -10,7 +10,7 @@ export function Markdown({ children }: { children: string }) {
   return (
     <View>
       <div className="ui-markdown">
-        <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+        <ReactMarkdown remarkPlugins={[remarkGfmSafe]} components={markdownComponents}>
           {children}
         </ReactMarkdown>
       </div>

package/src/remark_gfm_safe.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import { remarkGfmSafe } from "./remark_gfm_safe";
+
+/** Parse markdown to an mdast tree and serialize it, so tests assert on the
+ *  resulting document structure without depending on mdast node typings. */
+function parse(markdown: string): string {
+  return JSON.stringify(unified().use(remarkParse).use(remarkGfmSafe).parse(markdown));
+}
+
+describe("remarkGfmSafe", () => {
+  it("autolinks a bare URL in normal text (micromark tokenizer, no lookbehind)", () => {
+    expect(parse("see https://example.com now")).toContain('"url":"https://example.com"');
+  });
+
+  it("autolinks a bare email in normal text (the case the removed sweep also handled)", () => {
+    expect(parse("contact me at a@b.com please")).toContain('"url":"mailto:a@b.com"');
+  });
+
+  it("autolinks a bare www link", () => {
+    expect(parse("visit www.example.com today")).toContain('"url":"http://www.example.com"');
+  });
+
+  it("still parses GFM tables", () => {
+    expect(parse("| a | b |\n| --- | --- |\n| 1 | 2 |")).toContain('"type":"table"');
+  });
+
+  it("still parses strikethrough and task lists", () => {
+    expect(parse("~~gone~~")).toContain('"type":"delete"');
+    expect(parse("- [x] done")).toContain('"checked":true');
+  });
+});

package/src/remark_gfm_safe.ts

@@ -0,0 +1,84 @@
+import type { CompileContext, Extension, Token } from "mdast-util-from-markdown";
+import { gfmFootnoteFromMarkdown } from "mdast-util-gfm-footnote";
+import { gfmStrikethroughFromMarkdown } from "mdast-util-gfm-strikethrough";
+import { gfmTableFromMarkdown } from "mdast-util-gfm-table";
+import { gfmTaskListItemFromMarkdown } from "mdast-util-gfm-task-list-item";
+import { gfm } from "micromark-extension-gfm";
+import type { Plugin } from "unified";
+
+/**
+ * `remark-gfm`, rebuilt so no regex lookbehind reaches the bundle.
+ *
+ * `remark-gfm` pulls `mdast-util-gfm-autolink-literal`, whose module contains an
+ * email autolink regex *literal* with a lookbehind `(?<=…)`. Lookbehind is a
+ * **parse-time** `SyntaxError` on WebKit older than Safari 16.4 — iOS Safari and
+ * every in-app WebView built on it (Zalo, Facebook). Because a regex literal is
+ * validated when the script is parsed, that one literal aborts parsing of the
+ * whole JS bundle, so the entire app fails to load, not just markdown. Merely
+ * disabling the code at runtime is not enough — the literal must never be
+ * bundled, i.e. the module must never be imported.
+ *
+ * So we compose GFM from its parts and provide the autolink-literal fromMarkdown
+ * handlers ourselves (below). These are exactly the upstream token→link
+ * handlers, minus the post-parse regex *sweep* that carried the lookbehind — the
+ * micromark tokenizer already autolinks URLs and emails in normal text without
+ * any lookbehind, so the common case is unchanged; only the rare residual cases
+ * that sweep additionally caught are lost. Tables, strikethrough, task lists,
+ * and footnotes are untouched. No toMarkdown extensions: this feeds
+ * `react-markdown`, which parses only and never serializes.
+ */
+
+function enterLiteralAutolink(this: CompileContext, token: Token): void {
+  this.enter({ type: "link", title: null, url: "", children: [] }, token);
+}
+
+function enterLiteralAutolinkValue(this: CompileContext, token: Token): void {
+  this.config.enter.autolinkProtocol.call(this, token);
+}
+
+function exitLiteralAutolinkHttp(this: CompileContext, token: Token): void {
+  this.config.exit.autolinkProtocol.call(this, token);
+}
+
+function exitLiteralAutolinkWww(this: CompileContext, token: Token): void {
+  this.config.exit.data.call(this, token);
+  const node = this.stack[this.stack.length - 1];
+  if (node?.type === "link") node.url = "http://" + this.sliceSerialize(token);
+}
+
+function exitLiteralAutolinkEmail(this: CompileContext, token: Token): void {
+  this.config.exit.autolinkEmail.call(this, token);
+}
+
+function exitLiteralAutolink(this: CompileContext, token: Token): void {
+  this.exit(token);
+}
+
+const autolinkLiteralFromMarkdown: Extension = {
+  enter: {
+    literalAutolink: enterLiteralAutolink,
+    literalAutolinkEmail: enterLiteralAutolinkValue,
+    literalAutolinkHttp: enterLiteralAutolinkValue,
+    literalAutolinkWww: enterLiteralAutolinkValue,
+  },
+  exit: {
+    literalAutolink: exitLiteralAutolink,
+    literalAutolinkEmail: exitLiteralAutolinkEmail,
+    literalAutolinkHttp: exitLiteralAutolinkHttp,
+    literalAutolinkWww: exitLiteralAutolinkWww,
+  },
+};
+
+export const remarkGfmSafe: Plugin<[]> = function () {
+  const data = this.data();
+  const micromarkExtensions = (data.micromarkExtensions ??= []);
+  const fromMarkdownExtensions = (data.fromMarkdownExtensions ??= []);
+  micromarkExtensions.push(gfm());
+  fromMarkdownExtensions.push([
+    autolinkLiteralFromMarkdown,
+    gfmFootnoteFromMarkdown(),
+    gfmStrikethroughFromMarkdown(),
+    gfmTableFromMarkdown(),
+    gfmTaskListItemFromMarkdown(),
+  ]);
+};