@orangelogic/design-system 2.221.0 → 2.222.0

package/library/components/atoms.js

@@ -45,7 +45,7 @@ import { default as Qe } from "./include.js";
 import { C as qe } from "../chunks/input.B1JamaTE.js";
 import { default as Ke } from "./input-group.js";
 import { default as We } from "./line-clamp.js";
-import { C as Ye } from "../chunks/markdown.Cc9XwWxA.js";
+import { C as Ye } from "../chunks/markdown.DP1DqzwO.js";
 import { default as _e } from "./menu.js";
 import { default as oo } from "./menu-item.js";
 import { default as ao } from "./menu-label.js";

package/library/components/markdown.js

@@ -1,5 +1,5 @@
 import "../chunks/icon-button.BBLy-yj3.js";
-import { C as s } from "../chunks/markdown.Cc9XwWxA.js";
+import { C as s } from "../chunks/markdown.DP1DqzwO.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.CXIpdSSZ.js";
 import "../chunks/watch.DJF5K-8U.js";

package/library/components/types.js

@@ -46,7 +46,7 @@ import { default as fZt } from "./include.js";
 import { C as eo, I as ZS } from "../chunks/input.B1JamaTE.js";
 import { default as yZt } from "./input-group.js";
 import Bp from "./line-clamp.js";
-import { C as l3, e as pee, x as hee, s as gee, p as pM, a as mee } from "../chunks/markdown.Cc9XwWxA.js";
+import { C as l3, e as pee, x as hee, s as gee, p as pM, a as mee } from "../chunks/markdown.DP1DqzwO.js";
 import hl from "./menu.js";
 import gl from "./menu-item.js";
 import d6 from "./menu-label.js";
@@ -50883,7 +50883,7 @@ let jr = class extends hn {
         }
       }
     };
-    return D`<cx-markdown markdown=${n.trim() ? n : "<p></p>"} .extensions=${[i]} .renderer=${{
+    return D`<cx-markdown show-math-notation markdown=${n.trim() ? n : "<p></p>"} .extensions=${[i]} .renderer=${{
       // Method, not an arrow: marked binds renderer methods to expose `this.parser`.
       paragraph({ tokens: r }) {
         return this.parser.parseInline(r);

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.221.0",
+  "version": "2.222.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/markdown/markdown.d.ts

@@ -1,6 +1,6 @@
 import { default as CxIconButton } from '../icon-button/icon-button.ts';
 import { default as CortexLightElement } from '../../../../base/src/cortex-light-element.ts';
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { RendererObject, TokenizerAndRendererExtension } from 'marked';
 
 /**
@@ -10,7 +10,8 @@ import { RendererObject, TokenizerAndRendererExtension } from 'marked';
  * cx-markdown is powered by [MarkedJs](https://marked.js.org/).
  *
  * Fenced `mermaid` code blocks render as diagrams; Mermaid is imported lazily only when one is
- * present. Output is sanitized with DOMPurify unless `live-script` is set.
+ * present; with `show-math-notation` set, `$…$` and `$$…$$` render through KaTeX the same way.
+ * Output is sanitized with DOMPurify unless `live-script` is set.
  *
  * Leading YAML frontmatter renders as a collapsed disclosure instead of an `<hr>` plus heading, and
  * is parsed onto the `frontmatter` property.
@@ -24,7 +25,7 @@ import { RendererObject, TokenizerAndRendererExtension } from 'marked';
  * buttons, Mermaid nodes — do not bubble past the component. Clicks on inert content still do.
  *
  * @event cx-ready - Emitted when the markdown has been rendered, deferred until any Mermaid
- * diagrams have been drawn.
+ * diagrams and formulas have been drawn.
  */
 export default class CxMarkdown extends CortexLightElement {
     #private;
@@ -33,6 +34,8 @@ export default class CxMarkdown extends CortexLightElement {
         'cx-icon-button': typeof CxIconButton;
     };
     private readonly localize;
+    /** KaTeX loader, held in a field like other I/O so a test can keep the import pending. */
+    private loadKatex;
     /**
      * YAML frontmatter parsed from `markdown`, empty when there is none. Derived output — assigning
      * to it has no effect. Read it after `cx-ready`. Deliberately non-reactive: the disclosure is
@@ -54,6 +57,11 @@ export default class CxMarkdown extends CortexLightElement {
      * adds `rel="noopener noreferrer"`. Empty (the default) leaves anchors untouched.
      */
     linkTarget: string;
+    /**
+     * Renders `$…$` and `$$…$$` with KaTeX, loaded lazily. Invalid TeX, or a browser without
+     * MathML, keeps its source.
+     */
+    showMathNotation: boolean;
     /**
      * The markdown to render.
      */
@@ -73,6 +81,7 @@ export default class CxMarkdown extends CortexLightElement {
     rendered: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     updateRendered(): void;
     /**
      * Light DOM means every click reaches ancestors, which commonly treat one as "start editing".

package/library/packages/atoms/src/components/markdown/parser.d.ts

@@ -1,9 +1,12 @@
-import { Marked, Tokens } from 'marked';
+import { CreateParserOptions } from '../../../../types/src/markdown';
+import { Marked, MarkedExtension, Renderer, Tokens } from 'marked';
 
 /** Class name cx-markdown looks for when deciding whether to load Mermaid. */
 export declare const MERMAID_CLASS_NAME = "mermaid";
 /** Class name on the disclosure wrapping YAML frontmatter. */
 export declare const FRONTMATTER_CLASS_NAME = "cx-frontmatter";
+/** Class name cx-markdown looks for when deciding whether to load KaTeX. */
+export declare const MATH_CLASS_NAME = "cx-math";
 export type ExtractedFrontmatter = {
     /** The markdown with the frontmatter block removed. */
     body: string;
@@ -16,8 +19,10 @@ export declare function extractFrontmatter(source: string): ExtractedFrontmatter
 /** Collapsed disclosure shown in place of the frontmatter block. */
 export declare function renderFrontmatterDetails(raw: string, label: string): string;
 export declare const baseRenderer: {
-    code(this: import('marked').Renderer<string, string>, { escaped, lang: infoString, text }: Tokens.Code): string;
+    code(this: Renderer<string, string>, { escaped, lang: infoString, text }: Tokens.Code): string;
 };
+/** Opt-in `$…$` / `$$…$$` support; `createParser({ math })` registers it. */
+export declare const mathExtension: MarkedExtension;
 /**
  * https://marked.js.org/using_advanced in Marked instance section.
  * https://marked.js.org/using_pro in Marked marked.use() section.
@@ -25,5 +30,5 @@ export declare const baseRenderer: {
  *
  * Change from Singleton to Factory pattern: returns a new isolated Marked parser.
  */
-export declare function createParser(): Marked<string, string>;
+export declare function createParser({ math }?: CreateParserOptions): Marked<string, string>;
 export type Parser = ReturnType<typeof createParser>;

package/library/packages/tools/src/tiptap/utils/md/schema.d.ts

@@ -10,4 +10,4 @@ import { Schema } from '@tiptap/pm/model';
  * Constructs the model cannot represent are not dropped: `html_block` and `html_inline` hold their
  * source verbatim and are replayed on the way out.
  */
-export declare const markdownSchema: Schema<"image" | "blockquote" | "table" | "text" | "heading" | "paragraph" | "frontmatter" | "doc" | "horizontal_rule" | "bullet_list" | "code_block" | "list_item" | "ordered_list" | "table_row" | "table_cell" | "table_header" | "hard_break" | "html_block" | "html_inline", "link" | "code" | "em" | "strong" | "strike">;
+export declare const markdownSchema: Schema<"image" | "blockquote" | "table" | "text" | "heading" | "paragraph" | "list_item" | "frontmatter" | "doc" | "horizontal_rule" | "bullet_list" | "code_block" | "ordered_list" | "table_row" | "table_cell" | "table_header" | "hard_break" | "html_block" | "html_inline", "link" | "code" | "em" | "strong" | "strike">;

package/library/react-web-component.d.ts

@@ -3527,6 +3527,10 @@
           * Target applied to every rendered link. Set to `_blank` to open links in a new tab, which also adds `rel="noopener noreferrer"`. Empty (the default) leaves anchors untouched.
         */
         linkTarget?: string;
+        /**
+          * Renders `$…$` and `$$…$$` with KaTeX, loaded lazily. Invalid TeX, or a browser without MathML, keeps its source.
+        */
+        showMathNotation?: boolean;
         /**
           * The markdown to render.
         */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.221.0",
+  "version": "2.222.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {