@stream-mdx/react 0.4.0 → 1.0.0

package/dist/utils/inline-html.cjs

@@ -4,18 +4,14 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
     for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
@@ -23,99 +19,182 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
   mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 
 // src/utils/inline-html.ts
 var inline_html_exports = {};
 __export(inline_html_exports, {
   DEFAULT_INLINE_HTML_RENDERERS: () => DEFAULT_INLINE_HTML_RENDERERS,
+  renderHtmlInlineNode: () => renderHtmlInlineNode,
+  renderHtmlOwnershipTree: () => renderHtmlOwnershipTree,
   renderInlineHtmlSegment: () => renderInlineHtmlSegment
 });
 module.exports = __toCommonJS(inline_html_exports);
-var import_react = __toESM(require("react"), 1);
-var BACKTICK_CONTENT = /^`([\s\S]+)`$/;
-var DEFAULT_INLINE_HTML_RENDERERS = {
+var import_react = __toESM(require("react"), 1), import_core = require("@stream-mdx/core");
+function renderHtmlInlineNode(node, children, elements, key, textValue, urlTransform, filterElement, parentTagName, renderPresentation, renderNativeElement) {
+  if (node.isClose || node.tagName === "script" || node.tagName === "style") return null;
+  if (!node.tagName || node.sanitized === "")
+    return import_react.default.createElement(import_react.default.Fragment, { key }, children);
+  let tag = node.tagName.toLowerCase(), props = mapAttributesToProps(node.attributes ?? {}, urlTransform);
+  props.key = key;
+  let renderElement = () => {
+    let nativeView;
+    return renderNativeElement ? nativeView = renderNativeElement(
+      tag,
+      props,
+      node.isSelfClosing ? void 0 : children,
+      key ?? tag
+    ) : tag === "textarea" ? (props.defaultValue = textValue ?? "", nativeView = import_react.default.createElement(elements?.[tag] ?? tag, props)) : nativeView = import_react.default.createElement(elements?.[tag] ?? tag, props, node.isSelfClosing ? void 0 : children), renderPresentation ? renderPresentation(tag, props, nativeView, children, key ?? tag) : nativeView;
+  };
+  return filterElement ? filterElement(
+    { tagName: tag, properties: props },
+    { source: "html", parentTagName },
+    renderElement,
+    () => children
+  ) : renderElement();
+}
+function renderHtmlOwnershipTree(nodes, elements, renderBlock, renderInline, renderInlineElement, renderParagraph, urlTransform, filterElement, parentTagName, contentComponents, renderPresentation, parentPath = "html", renderComponentPresentation) {
+  return nodes.map((node, index) => {
+    let nodeKey = `${parentPath}:${index}`;
+    if (node.kind === "text") return node.inline && renderInline ? renderInline(node.inline, parentTagName) : node.rawSource ?? node.text;
+    if (node.kind === "block") return renderBlock(node.block, parentTagName);
+    if (node.kind === "component") {
+      let reg = contentComponents?.[node.name];
+      if (!reg)
+        return import_react.default.createElement(import_react.default.Fragment, { key: nodeKey }, node.rawSource ?? `<${node.name} />`);
+      let result = reg.render({
+        props: node.props,
+        key: index,
+        hasChildren: node.children.length > 0,
+        renderChildren: () => renderHtmlOwnershipTree(
+          node.children,
+          elements,
+          renderBlock,
+          renderInline,
+          renderInlineElement,
+          renderParagraph,
+          urlTransform,
+          filterElement,
+          node.name,
+          contentComponents,
+          renderPresentation,
+          nodeKey,
+          renderComponentPresentation
+        ),
+        status: node.status,
+        diagnostic: node.diagnostic
+      });
+      return result.kind === "invalid" ? import_react.default.createElement(import_react.default.Fragment, { key: nodeKey }, node.rawSource ?? `<${node.name} />`) : result.kind === "suppressed" ? null : renderComponentPresentation ? renderComponentPresentation(
+        node.name,
+        result.element,
+        import_react.default.isValidElement(result.element) ? result.element.props.children : void 0,
+        nodeKey,
+        node.status,
+        node.rawSource
+      ) : result.element;
+    }
+    let tag = node.tagName.toLowerCase(), props = mapAttributesToProps(node.attributes, urlTransform);
+    props.key = nodeKey;
+    let children = renderHtmlOwnershipTree(node.children, elements, renderBlock, renderInline, renderInlineElement, renderParagraph, urlTransform, filterElement, tag, contentComponents, renderPresentation, nodeKey, renderComponentPresentation);
+    if (node.paragraphRoot && renderParagraph) {
+      let paragraph = filterElement ? filterElement(
+        { tagName: "p", properties: props, blockType: "paragraph" },
+        { source: "markdown", parentTagName },
+        () => renderParagraph(children),
+        () => children
+      ) : renderParagraph(children);
+      return import_react.default.createElement(import_react.default.Fragment, { key: nodeKey }, paragraph);
+    }
+    if (node.inlineNode && renderInlineElement)
+      return import_react.default.createElement(import_react.default.Fragment, { key: nodeKey }, renderInlineElement(node.inlineNode, children, parentTagName, nodeKey));
+    let renderElement = () => {
+      let nativeView;
+      if (tag === "textarea")
+        props.defaultValue = node.children.map((child) => child.kind === "text" ? child.text : "").join(""), nativeView = import_react.default.createElement(elements[tag] ?? tag, props);
+      else {
+        let content = tag === "pre" && node.children.every((child) => child.kind === "text" && !child.inline) ? node.children.map((child) => child.kind === "text" ? child.text : "").join("") : children;
+        nativeView = import_react.default.createElement(elements[tag] ?? tag, props, node.children.length ? content : void 0);
+      }
+      return renderPresentation ? renderPresentation(tag, props, nativeView, children, nodeKey) : nativeView;
+    };
+    return filterElement ? filterElement(
+      { tagName: tag, properties: props },
+      { source: "html", parentTagName },
+      renderElement,
+      () => children
+    ) : renderElement();
+  });
+}
+var BACKTICK_CONTENT = /^`([\s\S]+)`$/, DEFAULT_INLINE_HTML_RENDERERS = {
   kbd: (descriptor, ctx) => {
-    const trimmed = descriptor.rawInner.trim();
-    const match = BACKTICK_CONTENT.exec(trimmed);
+    let trimmed = descriptor.rawInner.trim(), match = BACKTICK_CONTENT.exec(trimmed);
     if (match) {
-      const codeText = decodeHtmlEntities(match[1]);
-      const props = mapAttributesToProps(descriptor.attributes);
-      if (ctx.key !== void 0 && ctx.key !== null) {
-        props.key = ctx.key;
-      }
-      return import_react.default.createElement("kbd", props, import_react.default.createElement("code", { className: "inline-code" }, codeText));
+      let codeText = decodeHtmlEntities(match[1]), props = mapAttributesToProps(descriptor.attributes);
+      return ctx.key !== void 0 && ctx.key !== null && (props.key = ctx.key), import_react.default.createElement("kbd", props, import_react.default.createElement("code", { className: "inline-code" }, codeText));
     }
     return ctx.defaultRender();
   }
 };
 function renderInlineHtmlSegment(raw, sanitized, options = {}) {
-  const descriptor = parseInlineHtmlDescriptor(raw, sanitized);
-  if (!descriptor) {
+  let descriptor = parseInlineHtmlDescriptor(raw, sanitized);
+  if (!descriptor)
     return null;
-  }
-  const className = options.className ?? "markdown-inline-html";
-  const isInlineTag = INLINE_ELEMENTS.has(descriptor.tagName);
-  const defaultRender = () => {
-    if (!descriptor.sanitized || descriptor.sanitized.length === 0) {
-      if (!descriptor.text) {
-        return null;
-      }
-      if (options.key !== void 0 && options.key !== null) {
-        return import_react.default.createElement(import_react.default.Fragment, { key: options.key }, descriptor.text);
-      }
-      return import_react.default.createElement(import_react.default.Fragment, {}, descriptor.text);
-    }
+  let className = options.className ?? "markdown-inline-html", hasCustomElement = !!options.htmlElements?.[descriptor.tagName], isInlineTag = INLINE_ELEMENTS.has(descriptor.tagName) || hasCustomElement, defaultRender = () => {
+    if (!descriptor.sanitized || descriptor.sanitized.length === 0)
+      return descriptor.text ? options.key !== void 0 && options.key !== null ? import_react.default.createElement(import_react.default.Fragment, { key: options.key }, descriptor.text) : import_react.default.createElement(import_react.default.Fragment, {}, descriptor.text) : null;
     if (isInlineTag) {
-      const parsedElement = renderSanitizedHtmlTree(descriptor.sanitized, options.key);
-      if (parsedElement) {
+      let parsedElement = renderSanitizedHtmlTree(
+        descriptor.sanitized,
+        options.key,
+        options.htmlElements,
+        options.literalTagContent,
+        options.parseMarkdown
+      );
+      if (parsedElement)
         return parsedElement;
-      }
     }
-    const props = {
+    let customElementComp = options.htmlElements?.[descriptor.tagName];
+    if (customElementComp) {
+      let props2 = mapAttributesToProps(descriptor.attributes, options.urlTransform);
+      return options.key !== void 0 && options.key !== null && (props2.key = options.key), import_react.default.createElement(customElementComp, props2, descriptor.text || descriptor.sanitizedInner || void 0);
+    }
+    let props = {
       className,
       dangerouslySetInnerHTML: { __html: descriptor.sanitized }
     };
-    if (options.key !== void 0 && options.key !== null) {
-      props.key = options.key;
-    }
-    return import_react.default.createElement("span", props);
+    return options.key !== void 0 && options.key !== null && (props.key = options.key), import_react.default.createElement("span", props);
   };
-  const allRenderers = options.renderers ? { ...DEFAULT_INLINE_HTML_RENDERERS, ...options.renderers } : DEFAULT_INLINE_HTML_RENDERERS;
-  const renderer = allRenderers[descriptor.tagName];
-  if (renderer) {
-    const rendered = renderer(descriptor, { key: options.key, defaultRender });
-    if (rendered) {
-      if (options.key !== void 0 && options.key !== null && import_react.default.isValidElement(rendered) && rendered.key === null) {
-        return import_react.default.cloneElement(rendered, { key: options.key });
-      }
-      return rendered;
+  if (!hasCustomElement) {
+    let renderer = (options.renderers ? { ...DEFAULT_INLINE_HTML_RENDERERS, ...options.renderers } : DEFAULT_INLINE_HTML_RENDERERS)[descriptor.tagName];
+    if (renderer) {
+      let rendered = renderer(descriptor, { key: options.key, defaultRender });
+      if (rendered)
+        return options.key !== void 0 && options.key !== null && import_react.default.isValidElement(rendered) && rendered.key === null ? import_react.default.cloneElement(rendered, { key: options.key }) : rendered;
     }
   }
   return defaultRender();
 }
 function parseInlineHtmlDescriptor(raw, sanitized) {
-  const normalizedRaw = typeof raw === "string" ? raw.trim() : "";
-  const normalizedSanitized = typeof sanitized === "string" && sanitized.length > 0 ? sanitized.trim() : normalizedRaw;
-  if (!normalizedSanitized) {
-    return null;
-  }
-  const match = normalizedSanitized.match(/^<([A-Za-z][\w:-]*)(\s[^>]*)?>([\s\S]*)<\/\1>$/);
-  if (!match) {
+  let normalizedRaw = typeof raw == "string" ? raw.trim() : "", normalizedSanitized = typeof sanitized == "string" && sanitized.length > 0 ? sanitized.trim() : normalizedRaw;
+  if (!normalizedSanitized)
     return null;
+  let pairedMatch = normalizedSanitized.match(/^<([A-Za-z][\w:-]*)((?:\s+[^>]*)?)>([\s\S]*)<\/\1>$/), tagNameRaw, attrString = "", sanitizedInner = "";
+  if (pairedMatch)
+    tagNameRaw = pairedMatch[1], attrString = pairedMatch[2] ?? "", sanitizedInner = pairedMatch[3] ?? "";
+  else {
+    let selfClosingMatch = normalizedSanitized.match(/^<([A-Za-z][\w:-]*)((?:\s+[^>]*)?)\s*(?:\/?>|>)$/) || normalizedRaw.match(/^<([A-Za-z][\w:-]*)((?:\s+[^>]*)?)\s*(?:\/?>|>)$/);
+    if (!selfClosingMatch)
+      return null;
+    tagNameRaw = selfClosingMatch[1], attrString = selfClosingMatch[2] ?? "", sanitizedInner = "";
   }
-  const [, tagNameRaw, attrString = "", sanitizedInner = ""] = match;
-  const tagName = tagNameRaw.toLowerCase();
-  const attributes = parseAttributes(attrString);
-  let rawInner = "";
+  let tagName = tagNameRaw.toLowerCase(), attributes = parseAttributes(attrString), rawInner = "";
   if (normalizedRaw) {
-    const rawMatch = normalizedRaw.match(/^<([A-Za-z][\w:-]*)(\s[^>]*)?>([\s\S]*)<\/\1>$/);
+    let rawMatch = normalizedRaw.match(/^<([A-Za-z][\w:-]*)(\s[^>]*)?>([\s\S]*)<\/\1>$/);
     rawInner = rawMatch ? rawMatch[3] ?? "" : normalizedRaw;
   }
-  const text = extractPlainText(rawInner || sanitizedInner);
+  let text = extractPlainText(rawInner || sanitizedInner);
   return {
     tagName,
     attributes,
@@ -127,52 +206,91 @@ function parseInlineHtmlDescriptor(raw, sanitized) {
   };
 }
 function parseAttributes(input) {
-  const attrs = {};
+  let attrs = {};
   if (!input) return attrs;
-  const attrPattern = /([A-Za-z_:][\w:.\-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
-  let match = attrPattern.exec(input);
-  while (match !== null) {
-    const name = match[1];
+  let attrPattern = /([A-Za-z_:][\w:.\-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g, match = attrPattern.exec(input);
+  for (; match !== null; ) {
+    let name = match[1];
     if (!name) continue;
-    const value = match[2] ?? match[3] ?? match[4] ?? "";
-    attrs[name] = value;
-    match = attrPattern.exec(input);
+    let value = match[2] ?? match[3] ?? match[4] ?? "";
+    attrs[name] = value, match = attrPattern.exec(input);
   }
   return attrs;
 }
-function mapAttributesToProps(attrs) {
-  const props = {};
-  for (const [key, value] of Object.entries(attrs)) {
-    if (key === "class") {
-      props.className = value;
-    } else if (key === "style") {
-      props.style = parseStyleAttribute(value);
-    } else if (key === "tabindex" || key === "tabIndex") {
-      const normalized = normalizeTabIndex(value);
-      if (normalized !== void 0) {
-        props.tabIndex = normalized;
-      }
-    } else {
-      props[key] = value;
-    }
+var BOOLEAN_HTML_PROPS = {
+  allowFullScreen: !0,
+  async: !0,
+  autoFocus: !0,
+  autoPlay: !0,
+  checked: !0,
+  controls: !0,
+  default: !0,
+  defer: !0,
+  disabled: !0,
+  formNoValidate: !0,
+  hidden: !0,
+  inert: !0,
+  loop: !0,
+  multiple: !0,
+  muted: !0,
+  noModule: !0,
+  noValidate: !0,
+  open: !0,
+  playsInline: !0,
+  readOnly: !0,
+  required: !0,
+  reversed: !0,
+  selected: !0,
+  itemScope: !0
+};
+function mapAttributesToProps(attrs, urlTransform) {
+  let props = {}, transform = urlTransform ?? import_core.defaultUrlTransform;
+  for (let [key, value] of Object.entries(attrs)) {
+    let lower = key.toLowerCase();
+    if (!(0, import_core.isForbiddenAttribute)(lower))
+      if (key === "class")
+        props.className = value;
+      else if (key === "style")
+        props.style = parseStyleAttribute(value);
+      else if (key === "tabindex" || key === "tabIndex") {
+        let normalized = normalizeTabIndex(value);
+        normalized !== void 0 && (props.tabIndex = normalized);
+      } else if (lower === "href") {
+        let safe = transform(value, "href", { source: "html" });
+        safe != null && (props.href = safe);
+      } else if (lower === "src") {
+        let safe = transform(value, "src", { source: "html" });
+        safe != null && (props.src = safe);
+      } else if (lower === "action") {
+        let safe = transform(value, "href", { source: "html" });
+        safe != null && (props.action = safe);
+      } else if (lower === "formaction") {
+        let safe = transform(value, "href", { source: "html" });
+        safe != null && (props.formAction = safe);
+      } else if (lower === "xlink:href" || lower === "xlinkhref") {
+        let safe = transform(value, "href", { source: "html" });
+        safe != null && (props.xlinkHref = safe);
+      } else /^(?:data|aria)[A-Z]/.test(key) ? props[key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)] = value : BOOLEAN_HTML_PROPS[key] ? props[key] = !0 : props[key] = value;
   }
   return props;
 }
 function parseStyleAttribute(value) {
-  const style = {};
+  let style = {};
   if (!value) return style;
-  const pairs = value.split(";");
-  for (const pair of pairs) {
+  let pairs = value.split(";");
+  for (let pair of pairs) {
     if (!pair.trim()) continue;
-    const [property, rawVal] = pair.split(":");
-    if (!property || rawVal === void 0) continue;
-    const camelProp = property.trim().replace(/-([a-z])/g, (_, char) => char.toUpperCase());
-    style[camelProp] = rawVal.trim();
+    let separator = pair.indexOf(":");
+    if (separator <= 0) continue;
+    let property = pair.slice(0, separator).trim(), rawVal = pair.slice(separator + 1).trim();
+    if (!(0, import_core.isSafeStyleDeclaration)(property, rawVal)) continue;
+    let camelProp = property.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    style[camelProp] = rawVal;
   }
   return style;
 }
 function normalizeTabIndex(value) {
-  const numeric = Number(value);
+  let numeric = Number(value);
   return Number.isNaN(numeric) ? void 0 : numeric;
 }
 function decodeHtmlEntities(value) {
@@ -180,76 +298,50 @@ function decodeHtmlEntities(value) {
 }
 function extractPlainText(value) {
   if (!value) return "";
-  const withoutTags = value.replace(/<\/?[^>]+>/g, "");
+  let withoutTags = value.replace(/<\/?[^>]+>/g, "");
   return decodeHtmlEntities(withoutTags);
 }
-function renderSanitizedHtmlTree(html, key) {
-  if (typeof DOMParser === "undefined") {
+var DEFAULT_LITERAL_TAGS = /* @__PURE__ */ new Set(["code", "pre", "script", "style", "textarea"]);
+function renderSanitizedHtmlTree(html, key, htmlElements, literalTagContent, parseMarkdown) {
+  if (typeof DOMParser > "u")
     return null;
-  }
   try {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, "text/html");
-    const body = doc.body;
-    const nodes = Array.from(body.childNodes);
-    if (nodes.length === 0) {
+    let body = new DOMParser().parseFromString(html, "text/html").body, nodes = Array.from(body.childNodes);
+    if (nodes.length === 0)
       return null;
-    }
-    const baseKey = typeof key === "string" || typeof key === "number" ? String(key) : "inline-html";
-    const children = nodes.map((node, index) => convertDomNode(node, `${baseKey}-${index}`)).filter((child) => child !== null && child !== void 0);
-    if (children.length === 0) {
+    let literalTags = literalTagContent ? /* @__PURE__ */ new Set([...DEFAULT_LITERAL_TAGS, ...literalTagContent.map((t) => t.toLowerCase())]) : DEFAULT_LITERAL_TAGS, baseKey = typeof key == "string" || typeof key == "number" ? String(key) : "inline-html", children = nodes.map((node, index) => convertDomNode(node, `${baseKey}-${index}`, htmlElements, literalTags, !1, parseMarkdown)).filter((child) => child != null);
+    if (children.length === 0)
       return null;
-    }
     if (children.length === 1) {
-      const [child] = children;
-      if (import_react.default.isValidElement(child)) {
-        if (key !== void 0 && key !== null) {
-          return import_react.default.cloneElement(child, { key });
-        }
-        return child;
-      }
-      if (typeof child === "string" || typeof child === "number") {
-        if (key !== void 0 && key !== null) {
-          return import_react.default.createElement(import_react.default.Fragment, { key }, child);
-        }
-        return import_react.default.createElement(import_react.default.Fragment, {}, child);
-      }
-      return import_react.default.createElement(import_react.default.Fragment, { key }, child);
+      let [child] = children;
+      return import_react.default.isValidElement(child) ? key != null ? import_react.default.cloneElement(child, { key }) : child : typeof child == "string" || typeof child == "number" ? key != null ? import_react.default.createElement(import_react.default.Fragment, { key }, child) : import_react.default.createElement(import_react.default.Fragment, {}, child) : import_react.default.createElement(import_react.default.Fragment, { key }, child);
     }
     return import_react.default.createElement(import_react.default.Fragment, { key }, ...children);
   } catch {
     return null;
   }
 }
-function convertDomNode(node, key) {
+function convertDomNode(node, key, htmlElements, literalTags, parentIsLiteral, parseMarkdown) {
   if (node.nodeType === Node.TEXT_NODE) {
-    return node.textContent ?? "";
+    let rawText = node.textContent ?? "";
+    return parentIsLiteral || !parseMarkdown ? rawText : parseMarkdown(rawText);
   }
-  if (node.nodeType !== Node.ELEMENT_NODE) {
+  if (node.nodeType !== Node.ELEMENT_NODE)
     return null;
-  }
-  const element = node;
-  const tagName = element.tagName.toLowerCase();
-  const attrs = getElementAttributes(element);
-  const props = mapAttributesToProps(attrs);
+  let element = node, tagName = element.tagName.toLowerCase(), attrs = getElementAttributes(element), props = mapAttributesToProps(attrs);
   props.key = key;
-  const children = [];
+  let isLiteral = parentIsLiteral || (literalTags ? literalTags.has(tagName) : !1), children = [];
   element.childNodes.forEach((child, index) => {
-    const converted = convertDomNode(child, `${key}-${index}`);
-    if (converted !== null && converted !== void 0) {
-      children.push(converted);
-    }
+    let converted = convertDomNode(child, `${key}-${index}`, htmlElements, literalTags, isLiteral, parseMarkdown);
+    converted != null && children.push(converted);
   });
-  if (children.length === 0) {
-    return import_react.default.createElement(tagName, props);
-  }
-  return import_react.default.createElement(tagName, props, ...children);
+  let customComponent = htmlElements?.[tagName];
+  return customComponent ? children.length === 0 ? import_react.default.createElement(customComponent, props) : import_react.default.createElement(customComponent, props, ...children) : children.length === 0 ? import_react.default.createElement(tagName, props) : import_react.default.createElement(tagName, props, ...children);
 }
 function getElementAttributes(element) {
-  const attrs = {};
-  for (const attr of Array.from(element.attributes)) {
+  let attrs = {};
+  for (let attr of Array.from(element.attributes))
     attrs[attr.name] = attr.value;
-  }
   return attrs;
 }
 var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
@@ -259,6 +351,11 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
   "bdi",
   "bdo",
   "br",
+  "img",
+  "input",
+  "picture",
+  "del",
+  "ins",
   "cite",
   "code",
   "data",
@@ -305,5 +402,7 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_INLINE_HTML_RENDERERS,
+  renderHtmlInlineNode,
+  renderHtmlOwnershipTree,
   renderInlineHtmlSegment
 });

package/dist/utils/inline-html.d.cts

@@ -1,13 +1,46 @@
-import React from 'react';
-import { I as InlineHtmlRendererMap } from '../index-D2MYusAM.cjs';
-import '@stream-mdx/core';
+import React__default from 'react';
+import { UrlTransform, InlineNode, HtmlTreeNode } from '@stream-mdx/core';
+import { I as InlineHtmlRendererMap, H as HtmlElements, C as ContentComponentsMap } from '../index-Cmne1yUK.cjs';
+import '../components/bottom-stick-scroll-area.cjs';
+import 'react/jsx-runtime';
+import '../components/diff-renderer.cjs';
+import '@stream-mdx/protocol';
+import '../trusted-mdx-contract-ElKpkDI5.cjs';
+import '@stream-mdx/worker/engine';
+import '../renderer/virtualized-code.cjs';
 
 interface RenderInlineHtmlOptions {
-    key?: React.Key;
+    key?: React__default.Key;
     renderers?: InlineHtmlRendererMap;
     className?: string;
+    htmlElements?: HtmlElements;
+    literalTagContent?: string[];
+    parseMarkdown?: (text: string) => React__default.ReactNode;
+    urlTransform?: UrlTransform;
 }
+/** Render only the sanitized attributes supplied by the engine, with parsed children intact. */
+declare function renderHtmlInlineNode(node: Omit<Extract<InlineNode, {
+    kind: "html";
+}>, "children">, children: React__default.ReactNode, elements?: HtmlElements, key?: React__default.Key, textValue?: string, urlTransform?: UrlTransform, filterElement?: (element: {
+    tagName: string;
+    properties: Record<string, unknown>;
+    blockType?: string;
+}, context: {
+    source: "markdown" | "html";
+    parentTagName?: string;
+}, renderElement: () => React__default.ReactNode, renderChildren?: () => React__default.ReactNode) => React__default.ReactNode, parentTagName?: string, renderPresentation?: (tagName: string, properties: Readonly<Record<string, unknown>>, nativeView: React__default.ReactNode, children: React__default.ReactNode, key: React__default.Key) => React__default.ReactNode, renderNativeElement?: (tagName: string, properties: Readonly<Record<string, unknown>>, children: React__default.ReactNode, key: React__default.Key) => React__default.ReactNode): React__default.ReactNode;
+type RenderComponentPresentation = (name: string, nativeView: React__default.ReactElement, children: React__default.ReactNode, key: React__default.Key, status: "open" | "closed" | "incomplete", rawSource?: string) => React__default.ReactNode;
+declare function renderHtmlOwnershipTree(nodes: HtmlTreeNode[], elements: HtmlElements, renderBlock: (block: Extract<HtmlTreeNode, {
+    kind: "block";
+}>["block"], parentTagName?: string) => React__default.ReactNode, renderInline?: (nodes: InlineNode[], parentTagName?: string) => React__default.ReactNode, renderInlineElement?: (node: InlineNode, children: React__default.ReactNode, parentTagName: string | undefined, key: React__default.Key) => React__default.ReactNode, renderParagraph?: (children: React__default.ReactNode) => React__default.ReactNode, urlTransform?: UrlTransform, filterElement?: (element: {
+    tagName: string;
+    properties: Record<string, unknown>;
+    blockType?: string;
+}, context: {
+    source: "markdown" | "html";
+    parentTagName?: string;
+}, renderElement: () => React__default.ReactNode, renderChildren?: () => React__default.ReactNode) => React__default.ReactNode, parentTagName?: string, contentComponents?: ContentComponentsMap, renderPresentation?: (tagName: string, properties: Readonly<Record<string, unknown>>, nativeView: React__default.ReactNode, children: React__default.ReactNode, key: React__default.Key) => React__default.ReactNode, parentPath?: string, renderComponentPresentation?: RenderComponentPresentation): React__default.ReactNode;
 declare const DEFAULT_INLINE_HTML_RENDERERS: InlineHtmlRendererMap;
-declare function renderInlineHtmlSegment(raw: string | undefined, sanitized: string | undefined, options?: RenderInlineHtmlOptions): React.ReactElement | null;
+declare function renderInlineHtmlSegment(raw: string | undefined, sanitized: string | undefined, options?: RenderInlineHtmlOptions): React__default.ReactElement | null;
 
-export { DEFAULT_INLINE_HTML_RENDERERS, type RenderInlineHtmlOptions, renderInlineHtmlSegment };
+export { DEFAULT_INLINE_HTML_RENDERERS, type RenderComponentPresentation, type RenderInlineHtmlOptions, renderHtmlInlineNode, renderHtmlOwnershipTree, renderInlineHtmlSegment };

package/dist/utils/inline-html.d.ts

@@ -1,13 +1,46 @@
-import React from 'react';
-import { I as InlineHtmlRendererMap } from '../index-D2MYusAM.js';
-import '@stream-mdx/core';
+import React__default from 'react';
+import { UrlTransform, InlineNode, HtmlTreeNode } from '@stream-mdx/core';
+import { I as InlineHtmlRendererMap, H as HtmlElements, C as ContentComponentsMap } from '../index-D7dyyu3q.js';
+import '../components/bottom-stick-scroll-area.js';
+import 'react/jsx-runtime';
+import '../components/diff-renderer.js';
+import '@stream-mdx/protocol';
+import '../trusted-mdx-contract-ElKpkDI5.js';
+import '@stream-mdx/worker/engine';
+import '../renderer/virtualized-code.js';
 
 interface RenderInlineHtmlOptions {
-    key?: React.Key;
+    key?: React__default.Key;
     renderers?: InlineHtmlRendererMap;
     className?: string;
+    htmlElements?: HtmlElements;
+    literalTagContent?: string[];
+    parseMarkdown?: (text: string) => React__default.ReactNode;
+    urlTransform?: UrlTransform;
 }
+/** Render only the sanitized attributes supplied by the engine, with parsed children intact. */
+declare function renderHtmlInlineNode(node: Omit<Extract<InlineNode, {
+    kind: "html";
+}>, "children">, children: React__default.ReactNode, elements?: HtmlElements, key?: React__default.Key, textValue?: string, urlTransform?: UrlTransform, filterElement?: (element: {
+    tagName: string;
+    properties: Record<string, unknown>;
+    blockType?: string;
+}, context: {
+    source: "markdown" | "html";
+    parentTagName?: string;
+}, renderElement: () => React__default.ReactNode, renderChildren?: () => React__default.ReactNode) => React__default.ReactNode, parentTagName?: string, renderPresentation?: (tagName: string, properties: Readonly<Record<string, unknown>>, nativeView: React__default.ReactNode, children: React__default.ReactNode, key: React__default.Key) => React__default.ReactNode, renderNativeElement?: (tagName: string, properties: Readonly<Record<string, unknown>>, children: React__default.ReactNode, key: React__default.Key) => React__default.ReactNode): React__default.ReactNode;
+type RenderComponentPresentation = (name: string, nativeView: React__default.ReactElement, children: React__default.ReactNode, key: React__default.Key, status: "open" | "closed" | "incomplete", rawSource?: string) => React__default.ReactNode;
+declare function renderHtmlOwnershipTree(nodes: HtmlTreeNode[], elements: HtmlElements, renderBlock: (block: Extract<HtmlTreeNode, {
+    kind: "block";
+}>["block"], parentTagName?: string) => React__default.ReactNode, renderInline?: (nodes: InlineNode[], parentTagName?: string) => React__default.ReactNode, renderInlineElement?: (node: InlineNode, children: React__default.ReactNode, parentTagName: string | undefined, key: React__default.Key) => React__default.ReactNode, renderParagraph?: (children: React__default.ReactNode) => React__default.ReactNode, urlTransform?: UrlTransform, filterElement?: (element: {
+    tagName: string;
+    properties: Record<string, unknown>;
+    blockType?: string;
+}, context: {
+    source: "markdown" | "html";
+    parentTagName?: string;
+}, renderElement: () => React__default.ReactNode, renderChildren?: () => React__default.ReactNode) => React__default.ReactNode, parentTagName?: string, contentComponents?: ContentComponentsMap, renderPresentation?: (tagName: string, properties: Readonly<Record<string, unknown>>, nativeView: React__default.ReactNode, children: React__default.ReactNode, key: React__default.Key) => React__default.ReactNode, parentPath?: string, renderComponentPresentation?: RenderComponentPresentation): React__default.ReactNode;
 declare const DEFAULT_INLINE_HTML_RENDERERS: InlineHtmlRendererMap;
-declare function renderInlineHtmlSegment(raw: string | undefined, sanitized: string | undefined, options?: RenderInlineHtmlOptions): React.ReactElement | null;
+declare function renderInlineHtmlSegment(raw: string | undefined, sanitized: string | undefined, options?: RenderInlineHtmlOptions): React__default.ReactElement | null;
 
-export { DEFAULT_INLINE_HTML_RENDERERS, type RenderInlineHtmlOptions, renderInlineHtmlSegment };
+export { DEFAULT_INLINE_HTML_RENDERERS, type RenderComponentPresentation, type RenderInlineHtmlOptions, renderHtmlInlineNode, renderHtmlOwnershipTree, renderInlineHtmlSegment };