@ai-matrx/rich-content 0.2.3 → 0.2.6

package/dist/levels/prose/prose-block-elements.js

@@ -0,0 +1,313 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { InlineCodeSnippet } from "../../display/chat-markdown/InlineCodeSnippet.js";
+import { MarkdownTableScrollArea } from "../../display/tables/MarkdownTableScrollArea.js";
+import {
+  THICK_HR_SENTINEL,
+  detectTextDirection,
+  getDirectionClasses,
+  getDirectionFontSize
+} from "./prose-prepare.js";
+import { PROSE_INLINE_ELEMENTS } from "./prose-inline-elements.js";
+const ListItemComponent = ({ children, node, id, value }) => {
+  const itemText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+  const itemDirection = detectTextDirection(itemText);
+  const nodeClassName = node?.properties?.className;
+  const isTaskItem = Array.isArray(nodeClassName) && nodeClassName.includes("task-list-item");
+  if (isTaskItem) {
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        id,
+        value,
+        className: `mb-1 ${getDirectionFontSize(itemDirection)} ${getDirectionClasses(itemDirection)}`,
+        dir: itemDirection,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      id,
+      value,
+      className: `mb-1 ${getDirectionFontSize(itemDirection)} ${getDirectionClasses(itemDirection)}`,
+      dir: itemDirection,
+      children
+    }
+  );
+};
+function renderProseTable({ node, children, ...props }, after) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(MarkdownTableScrollArea, { className: "my-3 rounded-md border border-border", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm border-collapse", ...props, children }) }),
+    after
+  ] });
+}
+const PROSE_BLOCK_ELEMENTS = {
+  ...PROSE_INLINE_ELEMENTS,
+  p: ({ node, children, ...props }) => {
+    const childArray = React.Children.toArray(children);
+    if (childArray.length === 1 && childArray[0] === "\xA0") {
+      return /* @__PURE__ */ jsx("div", { className: "h-[0.75em]" });
+    }
+    if (childArray.length === 1 && childArray[0] === THICK_HR_SENTINEL) {
+      return /* @__PURE__ */ jsx(
+        "hr",
+        {
+          className: "my-5 border-0 h-[3px] rounded-full bg-blue-500 dark:bg-blue-400",
+          role: "separator"
+        }
+      );
+    }
+    let isMathOnly = false;
+    if (childArray.length === 1) {
+      const child = childArray[0];
+      if (child && typeof child === "object" && "props" in child && child.props && typeof child.props === "object" && "className" in child.props && typeof child.props.className === "string") {
+        isMathOnly = child.props.className.includes("katex");
+      }
+    }
+    const extractTextFromChildren = (children2) => {
+      if (typeof children2 === "string") return children2;
+      if (Array.isArray(children2)) {
+        return children2.map((child) => extractTextFromChildren(child)).join("");
+      }
+      if (children2 && typeof children2 === "object" && "props" in children2 && children2.props && typeof children2.props === "object" && "children" in children2.props) {
+        return extractTextFromChildren(children2.props.children);
+      }
+      return "";
+    };
+    const paragraphText = extractTextFromChildren(children);
+    const paragraphDirection = detectTextDirection(paragraphText);
+    const paragraphDirClasses = getDirectionClasses(paragraphDirection);
+    if (isMathOnly) {
+      return /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "font-sans tracking-wide leading-relaxed text-base mb-4 text-center",
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: `font-sans tracking-wide leading-relaxed ${getDirectionFontSize(paragraphDirection)} mb-2 pl-0 ml-0 ${paragraphDirClasses}`,
+        dir: paragraphDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  blockquote: ({ node, children, ...props }) => {
+    const blockquoteText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+    const blockquoteDirection = detectTextDirection(blockquoteText);
+    const isRtl = blockquoteDirection === "rtl";
+    return /* @__PURE__ */ jsx(
+      "blockquote",
+      {
+        className: `${isRtl ? "pr-4 border-r-4" : "pl-4 border-l-4"} py-3 border-blue-200 dark:border-blue-700 italic text-gray-700 dark:text-gray-300 bg-blue-50 dark:bg-blue-950/20 ${getDirectionClasses(blockquoteDirection)}`,
+        dir: blockquoteDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  ul: ({ node, children, ...props }) => {
+    const listText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+    const listDirection = detectTextDirection(listText);
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: `matrx-md-ul mb-3 leading-relaxed ${getDirectionFontSize(listDirection)} pl-6 ${getDirectionClasses(listDirection)}`,
+        dir: listDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  ol: ({ node, children, ...props }) => {
+    const listText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+    const listDirection = detectTextDirection(listText);
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: `matrx-md-ol mb-3 leading-relaxed ${getDirectionFontSize(listDirection)} pl-6 ${getDirectionClasses(listDirection)}`,
+        dir: listDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  li: ({ node, children, ...props }) => {
+    return /* @__PURE__ */ jsx(ListItemComponent, { node, id: props.id, value: props.value !== void 0 && Number.isFinite(Number(props.value)) ? Number(props.value) : void 0, children });
+  },
+  h1: ({ node, children, ...props }) => {
+    const headingText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+    const headingDirection = detectTextDirection(headingText);
+    return /* @__PURE__ */ jsx(
+      "h1",
+      {
+        className: `text-xl text-blue-500 font-bold mt-4 mb-2 font-heading ${getDirectionClasses(headingDirection)}`,
+        dir: headingDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  h2: ({ node, children, ...props }) => {
+    const headingText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+    const headingDirection = detectTextDirection(headingText);
+    return /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: `text-lg text-blue-500 font-semibold mt-3 mb-1.5 font-heading ${getDirectionClasses(headingDirection)}`,
+        dir: headingDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  h3: ({ node, children, ...props }) => {
+    const headingText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+    const headingDirection = detectTextDirection(headingText);
+    return /* @__PURE__ */ jsx(
+      "h3",
+      {
+        className: `text-base text-blue-500 font-semibold mt-2 mb-1 font-heading ${getDirectionClasses(headingDirection)}`,
+        dir: headingDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  h4: ({ node, children, ...props }) => {
+    const headingText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+    const headingDirection = detectTextDirection(headingText);
+    return /* @__PURE__ */ jsx(
+      "h4",
+      {
+        className: `text-sm text-blue-400 font-semibold mt-2 mb-1 font-heading ${getDirectionClasses(headingDirection)}`,
+        dir: headingDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  pre: ({ node, children, ...props }) => {
+    const childArray = React.Children.toArray(children);
+    const codeChild = childArray.find((child) => {
+      if (!React.isValidElement(child)) return false;
+      const p = child.props;
+      return p.node?.tagName === "code" || typeof p.className === "string";
+    });
+    if (React.isValidElement(codeChild)) {
+      const codeProps = codeChild.props;
+      const langClass = String(codeProps.className || "");
+      const langMatch = langClass.match(/language-(\w+)/);
+      const language = langMatch?.[1];
+      const codeText = String(codeProps.children ?? "").replace(
+        /\n$/,
+        ""
+      );
+      if (codeText) {
+        return /* @__PURE__ */ jsx(
+          InlineCodeSnippet,
+          {
+            code: codeText,
+            language,
+            className: "my-2",
+            renderVariables: true
+          }
+        );
+      }
+    }
+    return /* @__PURE__ */ jsx("pre", { className: "my-3", ...props, children });
+  },
+  hr: ({ node, ...props }) => /* @__PURE__ */ jsx(
+    "hr",
+    {
+      className: "my-3 border-t border-gray-300 dark:border-gray-600",
+      ...props
+    }
+  ),
+  div: ({ node, className, children, ...props }) => {
+    return /* @__PURE__ */ jsx("div", { className, ...props, children });
+  },
+  table: (props) => renderProseTable(props),
+  thead: ({ node, children, ...props }) => /* @__PURE__ */ jsx("thead", { className: "bg-muted/50", ...props, children }),
+  tbody: ({ node, children, ...props }) => /* @__PURE__ */ jsx("tbody", { ...props, children }),
+  tr: ({ node, children, ...props }) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: "border-t border-border/30 hover:bg-muted/20 transition-colors",
+      ...props,
+      children
+    }
+  ),
+  th: ({ node, children, ...props }) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: "px-3 py-1.5 text-left text-xs font-semibold text-foreground border-r border-border/30 last:border-r-0",
+      ...props,
+      children
+    }
+  ),
+  td: ({ node, children, ...props }) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: "px-3 py-1.5 text-foreground border-r border-border/30 last:border-r-0",
+      ...props,
+      children
+    }
+  )
+};
+const PROSE_FRAME_CSS = `
+                    /* Center display math that appears after a line break */
+                    .math-content-wrapper p > .block + .katex {
+                        display: block;
+                        text-align: center;
+                        margin: 1em 0;
+                        font-size: 1.5em;
+                    }
+                    /* Increase font size for standalone math paragraphs */
+                    .math-content-wrapper p.text-center .katex {
+                        font-size: 1.5em;
+                    }
+                    /* Override pre tags that contain inline code (indented text blocks) */
+                    .math-content-wrapper pre:has(> code.bg-blue-100),
+                    .math-content-wrapper pre:has(> code.dark\\:bg-blue-900\\/30) {
+                        white-space: pre-wrap;
+                        word-wrap: break-word;
+                        overflow-wrap: anywhere;
+                        font-family: inherit;
+                        background: transparent;
+                        padding: 0;
+                        margin: 0;
+                    }
+                    /* Make the code inside these pre tags behave like inline code */
+                    .math-content-wrapper pre:has(> code.bg-blue-100) > code,
+                    .math-content-wrapper pre:has(> code.dark\\:bg-blue-900\\/30) > code {
+                        white-space: normal;
+                        display: inline;
+                        overflow-wrap: anywhere;
+                        word-break: normal;
+                    }
+                `;
+function proseFrameClass(direction) {
+  return `relative my-2 group ${getDirectionClasses(direction)} math-content-wrapper overflow-x-hidden min-w-0 break-words`;
+}
+function proseElementsWithNested(renderNested) {
+  if (!renderNested) return PROSE_BLOCK_ELEMENTS;
+  return {
+    ...PROSE_BLOCK_ELEMENTS,
+    "matrx-nested": (props) => renderNested(String(props["data-source"] ?? ""))
+  };
+}
+export {
+  PROSE_BLOCK_ELEMENTS,
+  PROSE_FRAME_CSS,
+  proseElementsWithNested,
+  proseFrameClass,
+  renderProseTable
+};

package/dist/levels/prose/prose-inline-elements.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { MarkdownComponents as Components } from "../../markdown-core/markdown-core-types.js";
+/**
+ * Splits a plain string into an array mixing literal spans and
+ * MatrxVariableInline elements. Used for inline code and fenced-code paths
+ * where the remark plugin intentionally leaves `{{var}}` unexpanded.
+ */
+export declare function splitWithVariables(text: string): React.ReactNode[];
+/**
+ * Inline-mark renderers shared by every level. Module scope, so the map's
+ * identity is stable across renders (react-markdown re-renders on change).
+ */
+export declare const PROSE_INLINE_ELEMENTS: Components;

package/dist/levels/prose/prose-inline-elements.js

@@ -0,0 +1,143 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system";
+import { LinkComponent } from "../../display/blocks/links/LinkComponent.js";
+import { useHeadingAnchors } from "../../markdown-core/heading-anchors-context.js";
+import { isHeadingAnchorProps } from "../../markdown-core/heading-anchors-props.js";
+import { MatrxVariableInline } from "../../display/chat-markdown/matrx-variables/MatrxVariableInline.js";
+import { CitationMarkerInline } from "../../host/app-bindings.js";
+import { InDocAnchor } from "../../markdown-core/syntax/elements/InDocAnchor.js";
+import { RemoteImageGate } from "./remote-image-policy.js";
+import {
+  isInDocHref,
+  renderMarkdownInput
+} from "../../markdown-core/syntax/elements/core-syntax-elements.js";
+import {
+  detectTextDirection,
+  getDirectionClasses
+} from "./prose-prepare.js";
+const INLINE_VARIABLE_RE = /\{\{([a-zA-Z_][a-zA-Z0-9_.]*)\}\}/g;
+function splitWithVariables(text) {
+  INLINE_VARIABLE_RE.lastIndex = 0;
+  const nodes = [];
+  let lastIdx = 0;
+  let match;
+  let i = 0;
+  while ((match = INLINE_VARIABLE_RE.exec(text)) !== null) {
+    if (match.index > lastIdx) nodes.push(text.slice(lastIdx, match.index));
+    nodes.push(/* @__PURE__ */ jsx(MatrxVariableInline, { "data-name": match[1] }, i++));
+    lastIdx = match.index + match[0].length;
+  }
+  if (lastIdx < text.length) nodes.push(text.slice(lastIdx));
+  return nodes.length > 0 ? nodes : [text];
+}
+function LinkElement({ node, href, children, ...rest }) {
+  const anchorsOn = useHeadingAnchors();
+  if (!anchorsOn && isHeadingAnchorProps(rest)) return null;
+  return isInDocHref(href) ? /* @__PURE__ */ jsx(InDocAnchor, { href, ...rest, children }) : href ? /* @__PURE__ */ jsx(LinkComponent, { href, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+}
+const PROSE_INLINE_ELEMENTS = {
+  a: LinkElement,
+  // Task checkboxes: interactive only under a save adapter
+  // (MarkdownSourceEditProvider), read-only state marks otherwise.
+  input: ({ node, ...props }) => renderMarkdownInput(props),
+  strong: ({ node, children, ...props }) => {
+    const isInHeading = false;
+    const boldText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+    const boldDirection = detectTextDirection(boldText);
+    const boldDirClasses = getDirectionClasses(boldDirection);
+    return /* @__PURE__ */ jsx(
+      "strong",
+      {
+        className: `${isInHeading ? "" : "font-extrabold"} ${boldDirClasses}`,
+        dir: boldDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  em: ({ node, children, ...props }) => {
+    const isInHeading = false;
+    const italicText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
+    const italicDirection = detectTextDirection(italicText);
+    const italicDirClasses = getDirectionClasses(italicDirection);
+    return /* @__PURE__ */ jsx(
+      "em",
+      {
+        className: `${isInHeading ? "italic" : "italic text-blue-600 dark:text-blue-400"} ${italicDirClasses}`,
+        dir: italicDirection,
+        ...props,
+        children
+      }
+    );
+  },
+  code: ({ node, className, children, ...props }) => {
+    const langClass = className || "";
+    const isFenced = langClass.startsWith("language-");
+    if (isFenced) {
+      return /* @__PURE__ */ jsx("code", { className, ...props, children });
+    }
+    const rawText = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : null;
+    const codeContent = rawText && rawText.includes("{{") ? splitWithVariables(rawText) : children;
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        "data-kind-source": "explicit",
+        className: cn(
+          "px-1.5 py-0 rounded font-mono text-sm font-medium",
+          "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+          className
+        ),
+        style: {
+          overflowWrap: "anywhere",
+          wordBreak: "normal"
+        },
+        ...props,
+        children: codeContent
+      }
+    );
+  },
+  img: ({ node, ...props }) => (
+    // The core's URL sanitizer turns a refused address (javascript:,
+    // vbscript:, data:text/html…) into an empty src. An <img src=""> draws a
+    // broken image and re-requests the page, so a refused image is never
+    // drawn: it says so, with its alt text (guard:
+    // components/rich-content/__tests__/refused-image-url.test.tsx).
+    typeof props.src === "string" && props.src.trim() !== "" ? (
+      // Inline images flow rather than fill the width, so multiple images on
+      // one line sit side by side and wrap. Standalone images on their own
+      // line take the dedicated full-width ImageBlock path (the splitter
+      // only leaves an image here when it shares a line with other content).
+      // A remote image obeys the level's policy (remote-image-policy.tsx).
+      /* @__PURE__ */ jsx(RemoteImageGate, { src: props.src, alt: props.alt, children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "inline-block h-auto max-w-full rounded-md my-2 mr-2 object-contain align-top",
+          style: { maxHeight: 700 },
+          referrerPolicy: "no-referrer",
+          ...props,
+          alt: props.alt || "Image"
+        }
+      ) })
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-rc-refused-image": "",
+        className: "rounded border border-dashed border-border px-1 text-xs text-muted-foreground",
+        children: props.alt ? `Image not shown (\u201C${props.alt}\u201D) \u2014 its address is not allowed.` : "Image not shown \u2014 its address is not allowed."
+      }
+    )
+  ),
+  br: ({ node, ...props }) => /* @__PURE__ */ jsx("br", {}),
+  span: ({ node, className, children, ...props }) => {
+    return /* @__PURE__ */ jsx("span", { className, ...props, children });
+  },
+  "matrx-variable": ({ node, ...props }) => /* @__PURE__ */ jsx(MatrxVariableInline, { ...props }),
+  // Inline citation marker `<matrxcite n="…" />` (emitted into display
+  // text by message-citations.insertCitationMarkers, converted to a
+  // `matrx-cite` element by remarkMatrxCite) → numbered superscript chip.
+  "matrx-cite": ({ node, ...props }) => /* @__PURE__ */ jsx(CitationMarkerInline, { ...props })
+};
+export {
+  PROSE_INLINE_ELEMENTS,
+  splitWithVariables
+};

package/dist/levels/prose/prose-prepare.d.ts

@@ -0,0 +1,50 @@
+/** Private-use sentinel for a standalone `===` line. The `p` renderer swaps a
+ *  paragraph whose only child is this token for a thick blue rule. */
+export declare const THICK_HR_SENTINEL = "\uE000THICK_HR\uE000";
+/**
+ * Turn standalone `===` lines into their own sentinel paragraphs, leaving
+ * fenced code untouched so a sample of `===` stays `===`.
+ *
+ * A blank line is forced on both sides. The one before stops CommonMark from
+ * reading the previous line as a setext heading. The one after is required
+ * because remark-breaks turns a single newline into a `<br>` inside the same
+ * paragraph, and the rule only replaces a paragraph whose only child is the
+ * sentinel. Without that break the token is painted as text.
+ */
+export declare function isolateThickHorizontalRules(source: string): string;
+export declare const detectTextDirection: (text: string) => "rtl" | "ltr";
+export declare const getDirectionClasses: (direction: "rtl" | "ltr") => "text-left ltr" | "text-right rtl";
+export declare const getDirectionFontSize: (direction: "rtl" | "ltr") => "text-base" | "text-sm";
+/**
+ * Swap every fenced code region for a one-line private-use token, and give
+ * back a function that puts the original bytes back. Null when there is no
+ * fence (the common case costs one scan). An unclosed fence (a stream still
+ * arriving) is protected to the end.
+ */
+export declare function protectFencedCode(source: string): {
+    text: string;
+    restore: (s: string) => string;
+} | null;
+/**
+ * Leading spaces become nbsp so a model's hand-indented text keeps its shape
+ * — EXCEPT where the indentation is markdown structure: a list marker line,
+ * and any indented line that continues a list item (a quote, a callout, a
+ * `:::` directive, a second paragraph under `- item`). Flattening those to
+ * nbsp printed `> [!caution]` and `:::` as literal text inside list items
+ * (verify-RC-B8 failure 1). A list context ends at the first non-indented,
+ * non-blank line that is not itself a list item.
+ */
+export declare function preserveIndentation(source: string): string;
+/**
+ * Prose preparation for ONE GFM table cell (verify-RC-B4 R6-1): the inline
+ * steps only. A cell is inline content, so `* see note` stays `* see note`
+ * (the document pass rewrites a leading `* ` bullet to `- `).
+ */
+export declare function preprocessCellProse(rawContent: string): string;
+/**
+ * Massage raw model prose into the markdown the core parses: escape non-HTML
+ * angle-bracket tokens, keep indentation, normalize list/bold spacing, turn
+ * `===` into the thick rule sentinel and extra blank lines into spacers.
+ * Math is NOT touched here — the core's math normalizer owns it.
+ */
+export declare function preprocessProse(rawContent: string): string;