@primeui-devkit/lit-markdown 0.1.0-rc.3 → 0.1.0-rc.5

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-import { MarkdownTree } from '@primeui-devkit/markdown-core';
+import { MarkdownTree, MarkdownPlugin } from '@primeui-devkit/markdown-core';
+import { SanitizeOptions } from '@primeui-devkit/markdown-core/plugins/sanitize';
+export { SanitizeOptions } from '@primeui-devkit/markdown-core/plugins/sanitize';
 import { ReactiveElement } from 'lit';
 
 type MdNode = string | MdElementNode;
@@ -12,14 +14,16 @@ type RenderData = {
 };
 /** A custom renderer receives the node's props and already-rendered children and returns a DOM node it owns. */
 type LitComponentRenderer = (props: Record<string, unknown>, children: DocumentFragment, node: MdElementNode) => Node;
-declare function renderNode(node: MdNode, components: Record<string, LitComponentRenderer>, renderData?: RenderData): Node;
-declare function renderTree(tree: MarkdownTree, components?: Record<string, LitComponentRenderer>): DocumentFragment;
-/**
- * <lit-markdown> — renders a pre-parsed tree (or parses `markdown` at runtime).
- * Light DOM on purpose: the shared prose.css and host styles apply directly.
- * The DOM is rebuilt ONLY when tree/markdown/components references change, so
- * stateful custom-rendered children survive unrelated re-renders.
- */
+/** Options shared by every renderer. */
+interface RenderOptions {
+    /** Removes what would run script, submit a form, restyle the page or swap in another component; `false` renders the tree as given. @default true */
+    sanitize?: boolean | SanitizeOptions;
+}
+/** Renders one node, sanitized first unless `sanitize: false`. */
+declare function renderNode(node: MdNode, components: Record<string, LitComponentRenderer>, renderData?: RenderData, options?: RenderOptions): Node;
+/** Renders a tree, sanitized first unless `sanitize: false`, so custom renderers only ever receive sanitized props. */
+declare function renderTree(tree: MarkdownTree, components?: Record<string, LitComponentRenderer>, options?: RenderOptions): DocumentFragment;
+/** `<lit-markdown>`: renders a tree, or parses `markdown`, in light DOM so prose.css applies. Rebuilds only when its inputs change. */
 declare class LitMarkdown extends ReactiveElement {
     #private;
     static properties: {
@@ -32,10 +36,20 @@ declare class LitMarkdown extends ReactiveElement {
         components: {
             attribute: boolean;
         };
+        sanitize: {
+            attribute: boolean;
+        };
+        plugins: {
+            attribute: boolean;
+        };
     };
     tree: MarkdownTree | null;
     markdown: string;
     components: Record<string, LitComponentRenderer>;
+    /** The shared sanitize option, applied to `markdown` as it is parsed and to `tree` as it renders. @default true */
+    sanitize: boolean | SanitizeOptions;
+    /** Plugins for `markdown`; the sanitizer runs after them. */
+    plugins: MarkdownPlugin<any, any>[];
     constructor();
     protected createRenderRoot(): this;
     protected update(changed: Map<string, unknown>): void;
@@ -43,4 +57,4 @@ declare class LitMarkdown extends ReactiveElement {
 declare function defineLitMarkdown(tagName?: string): void;
 
 export { LitMarkdown, defineLitMarkdown, renderNode, renderTree };
-export type { LitComponentRenderer };
+export type { LitComponentRenderer, RenderOptions };

package/dist/index.js

@@ -1 +1 @@
-import{resolveAttributes as e}from"@primeui-devkit/markdown-core";import{ReactiveElement as t}from"lit";const n=/* @__PURE__ */ new Set([`h1`,`h2`,`h3`,`h4`,`h5`,`h6`]),r=/* @__PURE__ */ new Set([`p`,`a`,`blockquote`,`code`,`em`,`strong`,`hr`,`img`,`li`,`ol`,`ul`,`table`,`thead`,`tbody`,`tr`,`th`,`td`]),i=`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;function a(t,n,r){for(let[i,a]of Object.entries(e(n,r,{parseJson:!0}))){if(Array.isArray(a)){let e=a.filter(Boolean).join(` `);e&&t.setAttribute(i,e);continue}a!=null&&typeof a!=`function`&&typeof a!=`object`&&(typeof a==`boolean`?a&&t.setAttribute(i,``):t.setAttribute(i,String(a)))}}function o(e,t,n){let r=document.createElement(e);r.className=`prose-${e}`;let i=typeof t.id==`string`?t.id:null;if(i){r.id=i;let e=document.createElement(`a`);e.href=`#${i}`,e.className=`prose-heading-link`;let t=document.createElement(`span`);t.className=`prose-heading-anchor`,t.textContent=`#`,e.append(t,n),r.append(e)}else r.append(n);return r}function s(e,t){let n=document.createElement(`div`);n.className=`prose-pre`;let r=typeof e.filename==`string`?e.filename:``,a=r.replace(`:line-numbers`,``);if(a){let e=document.createElement(`div`);e.className=`prose-pre-filename`,e.innerHTML=`<span></span>`,e.querySelector(`span`).textContent=a,n.append(e)}let o=document.createElement(`div`);o.className=`prose-pre-actions`;let s=document.createElement(`button`);s.type=`button`,s.className=`prose-pre-copy`,s.title=`Copy Code`,s.innerHTML=i,s.addEventListener(`click`,async()=>{let t=typeof e.code==`string`?e.code:``;t&&(await navigator.clipboard.writeText(t),s.innerHTML=`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg>`,s.title=`Copied`,setTimeout(()=>{s.innerHTML=i,s.title=`Copy Code`},2e3))}),o.append(s),n.append(o);let c=document.createElement(`pre`);return c.className=[Array.isArray(e.class)?e.class.filter(Boolean).join(` `):typeof e.class==`string`?e.class:``,r.includes(`:line-numbers`)?`prose-pre-line-numbers`:``].filter(Boolean).join(` `),c.append(t),n.append(c),n}function c(e){let t=document.createElement(`div`);t.className=`prose-table-scroll`;let n=document.createElement(`table`);return n.className=`prose-table`,n.append(e),t.append(n),t}function l(e,t,i=u()){if(typeof e==`string`)return document.createTextNode(e);let[d,f={},...p]=e;if(d===null)return document.createDocumentFragment();let m=document.createDocumentFragment();for(let e of p)m.append(l(e,t,{...i,props:f}));let h=t[d];if(h)return h(f,m,e);if(n.has(d))return o(d,f,m);if(d===`pre`)return s(f,m);if(d===`table`)return c(m);let g=document.createElement(d);return a(g,f,i),r.has(d)&&g.classList.add(`prose-${d}`),g.append(m),g}const u=()=>({frontmatter:{},meta:{},data:{},props:{}});function d(e,t={}){let n=document.createDocumentFragment(),{frontmatter:r={},meta:i={}}=e,a={frontmatter:r,meta:i,data:{},props:{}};for(let r of e.nodes||[])n.append(l(r,t,a));return n}var f=class extends t{static properties={tree:{attribute:!1},markdown:{type:String},components:{attribute:!1}};#e=0;constructor(){super(),this.tree=null,this.markdown=``,this.components={}}createRenderRoot(){return this}update(e){if(super.update(e),e.has(`markdown`)&&this.markdown){let e=++this.#e;import(`@primeui-devkit/markdown-core`).then(e=>e.parseMarkdown(this.markdown)).then(t=>{e===this.#e&&(this.tree=t)});return}(e.has(`tree`)||e.has(`components`))&&(this.replaceChildren(),this.tree&&(this.classList.add(`prose`),this.append(d(this.tree,this.components))))}};function p(e=`lit-markdown`){customElements.get(e)||customElements.define(e,f)}export{f as LitMarkdown,p as defineLitMarkdown,l as renderNode,d as renderTree};
+import{pascalCase as e,resolveAttributes as t}from"@primeui-devkit/markdown-core";import{sanitizeOptions as n,sanitizeTree as r}from"@primeui-devkit/markdown-core/plugins/sanitize";import{ReactiveElement as i}from"lit";const a=/* @__PURE__ */ new Set([`h1`,`h2`,`h3`,`h4`,`h5`,`h6`]),o=/* @__PURE__ */ new Set([`p`,`a`,`blockquote`,`code`,`em`,`strong`,`hr`,`img`,`li`,`ol`,`ul`,`table`,`thead`,`tbody`,`tr`,`th`,`td`]),s=`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`,c=`http://www.w3.org/2000/svg`,l=`http://www.w3.org/1998/Math/MathML`;function u(e,t){return e===`svg`?c:e===`math`?l:t===c||t===l?t:void 0}const d=(e,t)=>t?document.createElementNS(t,e):document.createElement(e);function f(e,n,r){for(let[i,a]of Object.entries(t(n,r,{parseJson:!0}))){if(Array.isArray(a)){let t=a.filter(Boolean).join(` `);t&&e.setAttribute(i,t);continue}a!=null&&typeof a!=`function`&&typeof a!=`object`&&(typeof a==`boolean`?a&&e.setAttribute(i,``):e.setAttribute(i,String(a)))}}function p(e,t,n){let r=document.createElement(e);r.className=`prose-${e}`;let i=typeof t.id==`string`?t.id:null;if(i){r.id=i;let e=document.createElement(`a`);e.href=`#${i}`,e.className=`prose-heading-link`;let t=document.createElement(`span`);t.className=`prose-heading-anchor`,t.textContent=`#`,e.append(t,n),r.append(e)}else r.append(n);return r}function m(e,t){let n=document.createElement(`div`);n.className=`prose-pre`;let r=typeof e.filename==`string`?e.filename:``,i=r.replace(`:line-numbers`,``);if(i){let e=document.createElement(`div`);e.className=`prose-pre-filename`,e.innerHTML=`<span></span>`,e.querySelector(`span`).textContent=i,n.append(e)}let a=document.createElement(`div`);a.className=`prose-pre-actions`;let o=document.createElement(`button`);o.type=`button`,o.className=`prose-pre-copy`,o.title=`Copy Code`,o.innerHTML=s,o.addEventListener(`click`,async()=>{let t=typeof e.code==`string`?e.code:``;t&&(await navigator.clipboard.writeText(t),o.innerHTML=`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg>`,o.title=`Copied`,setTimeout(()=>{o.innerHTML=s,o.title=`Copy Code`},2e3))}),a.append(o),n.append(a);let c=document.createElement(`pre`);return c.className=[Array.isArray(e.class)?e.class.filter(Boolean).join(` `):typeof e.class==`string`?e.class:``,r.includes(`:line-numbers`)?`prose-pre-line-numbers`:``].filter(Boolean).join(` `),c.append(t),n.append(c),n}function h(e){let t=document.createElement(`div`);t.className=`prose-table-scroll`;let n=document.createElement(`table`);return n.className=`prose-table`,n.append(e),t.append(n),t}const g=(e,t)=>Object.hasOwn(e,t)?e[t]:void 0;function _(t,n){let r=e(t);return g(n,`Prose${r}`)??g(n,t)??g(n,r)}function v(e,t,n,r){if(typeof e==`string`)return document.createTextNode(e);let[i,s={},...c]=e;if(typeof i!=`string`)return document.createDocumentFragment();let l=u(i,r),g=document.createDocumentFragment(),y=i===`foreignObject`?void 0:l;for(let e of c)g.append(v(e,t,{...n,props:s},y));let b=_(i,t);if(b)return b(s,g,e);if(!l&&a.has(i))return p(i,s,g);if(!l&&i===`pre`)return m(s,g);if(!l&&i===`table`)return h(g);let x=d(i,l);return f(x,s,n),!l&&o.has(i)&&x.classList.add(`prose-${i}`),x.append(g),x}const y=()=>({frontmatter:{},meta:{},data:{},props:{}}),b=(e,t)=>{let i=n(t.sanitize);return i?r({nodes:e},i).nodes:e};function x(e,t,n=y(),r={}){let i=document.createDocumentFragment();for(let a of b([e],r))i.append(v(a,t,n));return i.childNodes.length===1?i.firstChild:i}function S(e,t={},i={}){let a=document.createDocumentFragment(),o=n(i.sanitize),s=o?r(e,o):e,{frontmatter:c={},meta:l={}}=s,u={frontmatter:c,meta:l,data:{},props:{}};for(let e of s.nodes||[])a.append(v(e,t,u));return a}var C=class extends i{static properties={tree:{attribute:!1},markdown:{type:String},components:{attribute:!1},sanitize:{attribute:!1},plugins:{attribute:!1}};#e=0;constructor(){super(),this.tree=null,this.markdown=``,this.components={},this.sanitize=!0,this.plugins=[]}createRenderRoot(){return this}update(e){if(super.update(e),e.has(`markdown`)||this.markdown&&(e.has(`plugins`)||e.has(`sanitize`))){let t=++this.#e;if(!this.markdown)e.get(`markdown`)&&(this.tree=null);else{let e=this.markdown,r=this.plugins,i=n(this.sanitize);Promise.all([import(`@primeui-devkit/markdown-core`),import(`@primeui-devkit/markdown-core/plugins/sanitize`)]).then(([t,{default:n}])=>t.parseMarkdown(e,{plugins:[...r,...i?[n(i)]:[]]})).then(e=>{t===this.#e&&(this.tree=e)},e=>{t===this.#e&&this.dispatchEvent(new CustomEvent(`markdown-error`,{detail:e}))});return}}(e.has(`tree`)||e.has(`components`)||e.has(`sanitize`))&&(this.replaceChildren(),this.classList.add(`prose`,`markdown-content`),this.tree&&this.append(S(this.tree,this.components,{sanitize:this.sanitize})))}};function w(e=`lit-markdown`){customElements.get(e)||customElements.define(e,C)}export{C as LitMarkdown,w as defineLitMarkdown,x as renderNode,S as renderTree};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primeui-devkit/lit-markdown",
-  "version": "0.1.0-rc.3",
+  "version": "0.1.0-rc.5",
   "author": "PrimeTek Informatics",
   "description": "Lit renderer for the PrimeUI DevKit markdown AST with built-in prose behaviors: heading anchors, code copy button and table scroll wrapper. Renders into light DOM so shared prose styles apply.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -34,7 +34,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@primeui-devkit/markdown-core": "0.1.0-rc.3"
+    "@primeui-devkit/markdown-core": "0.1.0-rc.5"
   },
   "peerDependencies": {
     "lit": "^3.0.0"
@@ -45,10 +45,10 @@
     "lit": "^3.0.0",
     "typescript": "~6.0.0",
     "vitest": "4.1.11",
-    "@primeui-devkit/test-config": "0.1.0-rc.1",
-    "@primeui-devkit/cli": "0.1.0-rc.1",
-    "@primeui-devkit/ts-config": "0.1.0-rc.1",
-    "@primeui-devkit/bundle": "0.1.0-rc.1"
+    "@primeui-devkit/bundle": "0.1.0-rc.2",
+    "@primeui-devkit/ts-config": "0.1.0-rc.2",
+    "@primeui-devkit/cli": "0.1.0-rc.2",
+    "@primeui-devkit/test-config": "0.1.0-rc.2"
   },
   "engines": {
     "node": ">=22.18.0"