@vectojs/markdown 0.12.0 → 0.13.0

package/dist/Markdown.d.ts

@@ -32,6 +32,42 @@ export interface MarkdownTheme {
     /** Base font size in px. */
     fontSize?: number;
 }
+/** A simple concrete container entity for nested layouts. */
+declare class MarkdownContainer extends Entity {
+    isPointInside(_globalX: number, _globalY: number): boolean;
+    render(_r: any): void;
+}
+/**
+ * One display formula: a `$$..$$` block or a closed ```` ```math ```` fence.
+ *
+ * A named class rather than a bare {@link MarkdownContainer} because the formula
+ * needs a stable handle, and after the switch to an inline object it has none:
+ * the typeset raster lives in a `paint` closure captured by the span, so removing
+ * the `Image` entity left nothing exposing either the source or the SVG bytes.
+ * Devtools, tests, and anything auditing what a formula actually rendered all
+ * want that. `markstream-vue` reaches the same conclusion from the DOM side and
+ * publishes `data-markstream-mode` on its math node for the same reason.
+ *
+ * Deliberately carries no typeset-vs-source flag. A formula MathJax has not
+ * converted yet renders as a bare {@link CodeBlock} of its TeX, which this class
+ * does not wrap — wrapping it would put a container between `content` and a
+ * `CodeBlock` that the streamed `setCode` path locates by type. So a flag would
+ * have exactly one reachable value, which is the dead-API trap that cost CTX-0208
+ * a debugging pass. Add it together with wrapping the fallback, or not at all.
+ */
+export declare class MathBlock extends MarkdownContainer {
+    /**
+     * The TeX source, exactly as written between the delimiters.
+     *
+     * Also the projected text and the accessible name, so this is the one string a
+     * reader can find, select, and copy.
+     */
+    readonly formula: string;
+    /** The `data:image/svg+xml` URI of the typeset glyphs. */
+    readonly svgUri: string;
+    constructor(formula: string, svgUri: string);
+    getDevtoolsDescriptor(): DevtoolsDescriptor;
+}
 /**
  * A single self-rendering entity for fenced code blocks.
  *
@@ -851,3 +887,4 @@ export declare class Markdown extends UIComponent {
     /** Structural — children draw themselves. */
     render(_r: IRenderer): void;
 }
+export {};

package/dist/index.js

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   CodeBlock: () => CodeBlock,
   Markdown: () => Markdown,
+  MathBlock: () => MathBlock,
   codeAtlas: () => codeAtlas,
   codeAtlasStats: () => codeAtlasStats,
   isMathJaxReady: () => isMathJaxReady,
@@ -871,6 +872,33 @@ var MarkdownContainer = class extends import_core.Entity {
   render(_r) {
   }
 };
+var MathBlock = class extends MarkdownContainer {
+  /**
+   * The TeX source, exactly as written between the delimiters.
+   *
+   * Also the projected text and the accessible name, so this is the one string a
+   * reader can find, select, and copy.
+   */
+  formula;
+  /** The `data:image/svg+xml` URI of the typeset glyphs. */
+  svgUri;
+  constructor(formula, svgUri) {
+    super();
+    this.formula = formula;
+    this.svgUri = svgUri;
+  }
+  getDevtoolsDescriptor() {
+    return {
+      kind: "MathBlock",
+      groups: [
+        {
+          label: "Math",
+          fields: [{ label: "formula", value: this.formula, readOnly: true }]
+        }
+      ]
+    };
+  }
+};
 var KEYWORD_SETS = {
   js: /* @__PURE__ */ new Set([
     "const",
@@ -3393,23 +3421,40 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
     if (!mathData) return null;
     const intrinsicW = exToPx(mathData.widthEx, t.fontSize);
     const intrinsicH = exToPx(mathData.heightEx, t.fontSize);
-    const mathImg = new import_ui.Image(mathData.uri, {
-      width: Math.min(availableWidth, intrinsicW),
-      height: intrinsicH * Math.min(1, availableWidth / intrinsicW),
-      alt: formula,
-      // The SVG decodes asynchronously and Image paints a placeholder until it
-      // lands. Without this an `onDemand` scene, which repaints only when marked
-      // dirty, leaves the formula a blank slab forever.
-      onLoad: () => {
-        this.scene?.markDirty();
+    const scale = Math.min(1, availableWidth / intrinsicW);
+    const width = intrinsicW * scale;
+    const height = intrinsicH * scale;
+    const uri = mathData.uri;
+    const math = new import_ui.RichText(
+      [
+        {
+          text: import_core.OBJECT_REPLACEMENT,
+          object: {
+            width,
+            height,
+            // The TeX source is what a reader copies and what a screen reader
+            // announces. KaTeX's dual-layer contract carries the same string in an
+            // `<annotation encoding="application/x-tex">`; here the projection is
+            // the semantic layer, so one copy of the source serves both.
+            alt: formula,
+            paint: (surface, box) => paintInlineMath(uri, surface, box)
+          }
+        }
+      ],
+      {
+        font: `${t.fontSize}px ${t.bodyFont}`,
+        color: t.textColor,
+        maxWidth: availableWidth,
+        selectable: this.selectable
       }
-    });
-    const wrapper = new MarkdownContainer();
-    mathImg.x = 16;
-    mathImg.y = 8;
-    wrapper.add(mathImg);
-    wrapper.width = mathImg.width + 16;
-    wrapper.height = mathImg.height + 16;
+    );
+    this.subscribeInlineMathRepaint();
+    const wrapper = new MathBlock(formula, uri);
+    math.x = 16;
+    math.y = 8;
+    wrapper.add(math);
+    wrapper.width = width + 16;
+    wrapper.height = height + 16;
     return wrapper;
   }
   renderToken(token) {
@@ -3607,6 +3652,7 @@ var Markdown = class _Markdown extends import_ui.UIComponent {
 0 && (module.exports = {
   CodeBlock,
   Markdown,
+  MathBlock,
   codeAtlas,
   codeAtlasStats,
   isMathJaxReady,

package/dist/index.mjs

@@ -839,6 +839,33 @@ var MarkdownContainer = class extends Entity {
   render(_r) {
   }
 };
+var MathBlock = class extends MarkdownContainer {
+  /**
+   * The TeX source, exactly as written between the delimiters.
+   *
+   * Also the projected text and the accessible name, so this is the one string a
+   * reader can find, select, and copy.
+   */
+  formula;
+  /** The `data:image/svg+xml` URI of the typeset glyphs. */
+  svgUri;
+  constructor(formula, svgUri) {
+    super();
+    this.formula = formula;
+    this.svgUri = svgUri;
+  }
+  getDevtoolsDescriptor() {
+    return {
+      kind: "MathBlock",
+      groups: [
+        {
+          label: "Math",
+          fields: [{ label: "formula", value: this.formula, readOnly: true }]
+        }
+      ]
+    };
+  }
+};
 var KEYWORD_SETS = {
   js: /* @__PURE__ */ new Set([
     "const",
@@ -3361,23 +3388,40 @@ var Markdown = class _Markdown extends UIComponent {
     if (!mathData) return null;
     const intrinsicW = exToPx(mathData.widthEx, t.fontSize);
     const intrinsicH = exToPx(mathData.heightEx, t.fontSize);
-    const mathImg = new Image(mathData.uri, {
-      width: Math.min(availableWidth, intrinsicW),
-      height: intrinsicH * Math.min(1, availableWidth / intrinsicW),
-      alt: formula,
-      // The SVG decodes asynchronously and Image paints a placeholder until it
-      // lands. Without this an `onDemand` scene, which repaints only when marked
-      // dirty, leaves the formula a blank slab forever.
-      onLoad: () => {
-        this.scene?.markDirty();
+    const scale = Math.min(1, availableWidth / intrinsicW);
+    const width = intrinsicW * scale;
+    const height = intrinsicH * scale;
+    const uri = mathData.uri;
+    const math = new RichText(
+      [
+        {
+          text: OBJECT_REPLACEMENT,
+          object: {
+            width,
+            height,
+            // The TeX source is what a reader copies and what a screen reader
+            // announces. KaTeX's dual-layer contract carries the same string in an
+            // `<annotation encoding="application/x-tex">`; here the projection is
+            // the semantic layer, so one copy of the source serves both.
+            alt: formula,
+            paint: (surface, box) => paintInlineMath(uri, surface, box)
+          }
+        }
+      ],
+      {
+        font: `${t.fontSize}px ${t.bodyFont}`,
+        color: t.textColor,
+        maxWidth: availableWidth,
+        selectable: this.selectable
       }
-    });
-    const wrapper = new MarkdownContainer();
-    mathImg.x = 16;
-    mathImg.y = 8;
-    wrapper.add(mathImg);
-    wrapper.width = mathImg.width + 16;
-    wrapper.height = mathImg.height + 16;
+    );
+    this.subscribeInlineMathRepaint();
+    const wrapper = new MathBlock(formula, uri);
+    math.x = 16;
+    math.y = 8;
+    wrapper.add(math);
+    wrapper.width = width + 16;
+    wrapper.height = height + 16;
     return wrapper;
   }
   renderToken(token) {
@@ -3574,6 +3618,7 @@ var Markdown = class _Markdown extends UIComponent {
 export {
   CodeBlock,
   Markdown,
+  MathBlock,
   codeAtlas,
   codeAtlasStats,
   isMathJaxReady,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/markdown",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "publishConfig": {
     "access": "public"
   },