@willwang-io/react-djot 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,30 +1,100 @@
 import { parse } from '@djot/djot';
-import { Fragment, createElement } from 'react';
+import { Fragment, createElement, isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/Djot.tsx
 function isParentNode(node) {
   return Array.isArray(node.children);
 }
-function isSoftBreakNode(node) {
-  return node.tag === "soft_break" || node.tag === "softbreak";
+function collectFootnoteReferences(nodes, indexByLabel, order) {
+  for (const node of nodes) {
+    if (node.tag === "footnote_reference") {
+      const label = node.text;
+      if (!indexByLabel.has(label)) {
+        const index = order.length + 1;
+        indexByLabel.set(label, index);
+        order.push(label);
+      }
+      continue;
+    }
+    if (isParentNode(node)) {
+      collectFootnoteReferences(node.children, indexByLabel, order);
+    }
+  }
 }
-function isHardBreakNode(node) {
-  return node.tag === "hard_break" || node.tag === "hardbreak";
+function createFootnoteState(node) {
+  const indexByLabel = /* @__PURE__ */ new Map();
+  const order = [];
+  collectFootnoteReferences(node.children, indexByLabel, order);
+  return {
+    autoReferencesByLabel: node.autoReferences ?? {},
+    firstRefIdByLabel: /* @__PURE__ */ new Map(),
+    indexByLabel,
+    order,
+    referencesByLabel: node.references ?? {},
+    refCountByLabel: /* @__PURE__ */ new Map()
+  };
 }
-function pickComponent(components, primary, alias) {
-  if (!components) {
+function resolveReferenceNode(node, footnoteState) {
+  if (!node.reference || !footnoteState) {
     return void 0;
   }
-  return components[primary] ?? (alias ? components[alias] : void 0);
+  return footnoteState.referencesByLabel[node.reference] ?? footnoteState.autoReferencesByLabel[node.reference];
 }
-function renderChildren(children, components) {
-  return children.map(
-    (child, index) => renderNode(child, {
-      components,
-      key: index
-    })
-  );
+function resolveReferenceDestination(node, footnoteState) {
+  if (node.destination) {
+    return node.destination;
+  }
+  return resolveReferenceNode(node, footnoteState)?.destination;
+}
+function ensureFootnoteIndex(label, footnoteState) {
+  const existing = footnoteState.indexByLabel.get(label);
+  if (existing) {
+    return existing;
+  }
+  const index = footnoteState.order.length + 1;
+  footnoteState.indexByLabel.set(label, index);
+  footnoteState.order.push(label);
+  return index;
+}
+function appendBacklink(nodes, backlink) {
+  if (nodes.length === 0) {
+    return [backlink];
+  }
+  const next = nodes.slice();
+  const lastIndex = next.length - 1;
+  const last = next[lastIndex];
+  if (isValidElement(last)) {
+    next[lastIndex] = cloneElement(last, void 0, last.props.children, backlink);
+    return next;
+  }
+  next.push(backlink);
+  return next;
+}
+
+// src/renderNode.utils.ts
+function isParentNode2(node) {
+  return Array.isArray(node.children);
+}
+function toSmartPunctuation(type, fallback) {
+  switch (type) {
+    case "left_double_quote":
+      return "\u201C";
+    case "right_double_quote":
+      return "\u201D";
+    case "left_single_quote":
+      return "\u2018";
+    case "right_single_quote":
+      return "\u2019";
+    case "em_dash":
+      return "\u2014";
+    case "en_dash":
+      return "\u2013";
+    case "ellipses":
+      return "\u2026";
+    default:
+      return fallback;
+  }
 }
 function toAltText(nodes) {
   let output = "";
@@ -33,8 +103,27 @@ function toAltText(nodes) {
       case "str":
       case "code":
       case "verbatim":
+      case "inline_math":
+      case "display_math":
       case "code_block":
-        output += node.text;
+      case "raw_block":
+      case "raw_inline":
+      case "symb":
+      case "url":
+      case "email":
+        output += node.tag === "symb" ? `:${node.alias}:` : node.text;
+        break;
+      case "non_breaking_space":
+        output += "\xA0";
+        break;
+      case "smart_punctuation":
+        output += toSmartPunctuation(node.type, node.text);
+        break;
+      case "double_quoted":
+        output += `\u201C${toAltText(node.children)}\u201D`;
+        break;
+      case "single_quoted":
+        output += `\u2018${toAltText(node.children)}\u2019`;
         break;
       case "soft_break":
       case "softbreak":
@@ -45,7 +134,7 @@ function toAltText(nodes) {
         output += "\n";
         break;
       default:
-        if (isParentNode(node)) {
+        if (isParentNode2(node)) {
           output += toAltText(node.children);
         }
         break;
@@ -71,6 +160,354 @@ function withKey(props, key) {
     key
   };
 }
+function toDomPropsFromAttributes(attributes) {
+  if (!attributes) {
+    return {};
+  }
+  const props = {};
+  for (const [name, value] of Object.entries(attributes)) {
+    if (name === "class") {
+      props.className = value;
+    } else {
+      props[name] = value;
+    }
+  }
+  return props;
+}
+function toDomPropsFromNode(node) {
+  return {
+    ...toDomPropsFromAttributes(node.autoAttributes),
+    ...toDomPropsFromAttributes(node.attributes)
+  };
+}
+function joinClassNames(...values) {
+  const classes = values.filter((value) => Boolean(value && value.length > 0));
+  return classes.length > 0 ? classes.join(" ") : void 0;
+}
+function toStyleObject(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return void 0;
+  }
+  return value;
+}
+function mergeDomProps(node, extra = {}) {
+  const nodeProps = toDomPropsFromNode(node);
+  const merged = {
+    ...extra,
+    ...nodeProps
+  };
+  const className = joinClassNames(
+    typeof extra.className === "string" ? extra.className : void 0,
+    typeof nodeProps.className === "string" ? nodeProps.className : void 0
+  );
+  if (className) {
+    merged.className = className;
+  }
+  const extraStyle = toStyleObject(extra.style);
+  const nodeStyle = toStyleObject(nodeProps.style);
+  if (extraStyle || nodeStyle) {
+    merged.style = {
+      ...extraStyle ?? {},
+      ...nodeStyle ?? {}
+    };
+  }
+  return merged;
+}
+function textAlignForCell(align) {
+  if (align === "left") {
+    return "left";
+  }
+  if (align === "right") {
+    return "right";
+  }
+  if (align === "center") {
+    return "center";
+  }
+  return void 0;
+}
+function toOrderedListType(style) {
+  if (!style || /1/.test(style)) {
+    return void 0;
+  }
+  const type = style.replace(/[().]/g, "");
+  return type.length > 0 ? type : void 0;
+}
+
+// src/renderNode.rawHtml.tsx
+var RAW_HTML_ATTR_PATTERN = /([^\s"'=<>`/]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+var RAW_HTML_TOKEN_PATTERN = /<!--[\s\S]*?-->|<\/?[A-Za-z][^>]*>|[^<]+|</g;
+var RAW_HTML_BLOCKED_TAGS = /* @__PURE__ */ new Set([
+  "base",
+  "embed",
+  "form",
+  "iframe",
+  "meta",
+  "object",
+  "script"
+]);
+var RAW_HTML_BOOLEAN_ATTRS = /* @__PURE__ */ new Set([
+  "allowfullscreen",
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "hidden",
+  "loop",
+  "multiple",
+  "muted",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "selected"
+]);
+var RAW_HTML_UNSAFE_PROTOCOL = /^\s*(?:javascript:|vbscript:|data:)/i;
+var RAW_HTML_URL_ATTRS = /* @__PURE__ */ new Set([
+  "action",
+  "formaction",
+  "href",
+  "poster",
+  "src",
+  "xlink:href"
+]);
+var RAW_HTML_VOID_TAGS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function decodeHtmlEntities(value) {
+  return value.replace(/&(#x?[0-9a-fA-F]+|[a-zA-Z]+);/g, (_match, entity) => {
+    if (entity.startsWith("#x") || entity.startsWith("#X")) {
+      const codePoint = Number.parseInt(entity.slice(2), 16);
+      if (!Number.isNaN(codePoint)) {
+        return String.fromCodePoint(codePoint);
+      }
+      return _match;
+    }
+    if (entity.startsWith("#")) {
+      const codePoint = Number.parseInt(entity.slice(1), 10);
+      if (!Number.isNaN(codePoint)) {
+        return String.fromCodePoint(codePoint);
+      }
+      return _match;
+    }
+    switch (entity) {
+      case "amp":
+        return "&";
+      case "apos":
+        return "'";
+      case "gt":
+        return ">";
+      case "lt":
+        return "<";
+      case "nbsp":
+        return "\xA0";
+      case "quot":
+        return '"';
+      default:
+        return _match;
+    }
+  });
+}
+function parseRawHtmlAttributes(source) {
+  const attributes = [];
+  for (const match of source.matchAll(RAW_HTML_ATTR_PATTERN)) {
+    const name = match[1]?.toLowerCase();
+    if (!name) {
+      continue;
+    }
+    const rawValue = match[2] ?? match[3] ?? match[4] ?? "";
+    const value = decodeHtmlEntities(rawValue);
+    attributes.push({ name, value });
+  }
+  return attributes;
+}
+function parseRawHtmlFragment(source) {
+  const root = {
+    attributes: [],
+    children: [],
+    tagName: "#root",
+    type: "element"
+  };
+  const stack = [root];
+  for (const match of source.matchAll(RAW_HTML_TOKEN_PATTERN)) {
+    const token = match[0];
+    if (token.startsWith("<!--")) {
+      continue;
+    }
+    if (token === "<") {
+      stack[stack.length - 1]?.children.push({ text: "<", type: "text" });
+      continue;
+    }
+    const closingTag = /^<\/\s*([A-Za-z][\w:-]*)\s*>$/.exec(token);
+    if (closingTag) {
+      const closingTagName = closingTag[1];
+      if (!closingTagName) {
+        continue;
+      }
+      const tagName = closingTagName.toLowerCase();
+      for (let index = stack.length - 1; index > 0; index -= 1) {
+        if (stack[index]?.tagName === tagName) {
+          stack.length = index;
+          break;
+        }
+      }
+      continue;
+    }
+    const openingTag = /^<\s*([A-Za-z][\w:-]*)([\s\S]*?)>$/.exec(token);
+    if (openingTag) {
+      const openingTagName = openingTag[1];
+      if (!openingTagName) {
+        continue;
+      }
+      const tagName = openingTagName.toLowerCase();
+      const rawAttributes = openingTag[2] ?? "";
+      const selfClosing = /\/\s*$/.test(rawAttributes) || RAW_HTML_VOID_TAGS.has(tagName);
+      const attrSource = selfClosing ? rawAttributes.replace(/\/\s*$/, "") : rawAttributes;
+      const element = {
+        attributes: parseRawHtmlAttributes(attrSource),
+        children: [],
+        tagName,
+        type: "element"
+      };
+      stack[stack.length - 1]?.children.push(element);
+      if (!selfClosing) {
+        stack.push(element);
+      }
+      continue;
+    }
+    stack[stack.length - 1]?.children.push({
+      text: decodeHtmlEntities(token),
+      type: "text"
+    });
+  }
+  return root.children;
+}
+function toCamelCaseCssProperty(name) {
+  return name.trim().replace(/^-+/, "").replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+function parseStyleAttribute(value) {
+  const style = {};
+  for (const declaration of value.split(";")) {
+    const separatorIndex = declaration.indexOf(":");
+    if (separatorIndex === -1) {
+      continue;
+    }
+    const property = toCamelCaseCssProperty(declaration.slice(0, separatorIndex));
+    const propertyValue = declaration.slice(separatorIndex + 1).trim();
+    if (!property || !propertyValue) {
+      continue;
+    }
+    style[property] = propertyValue;
+  }
+  if (Object.keys(style).length === 0) {
+    return void 0;
+  }
+  return style;
+}
+function toRawHtmlDomProps(attributes) {
+  const props = {};
+  for (const { name, value } of attributes) {
+    if (name.startsWith("on")) {
+      continue;
+    }
+    if (RAW_HTML_URL_ATTRS.has(name) && RAW_HTML_UNSAFE_PROTOCOL.test(value)) {
+      continue;
+    }
+    if (name === "class") {
+      props.className = value;
+      continue;
+    }
+    if (name === "for") {
+      props.htmlFor = value;
+      continue;
+    }
+    if (name === "style") {
+      const style = parseStyleAttribute(value);
+      if (style) {
+        props.style = style;
+      }
+      continue;
+    }
+    if (RAW_HTML_BOOLEAN_ATTRS.has(name) && value.length === 0) {
+      props[name] = true;
+      continue;
+    }
+    props[name] = value;
+  }
+  return props;
+}
+function renderRawHtmlNode(node, key) {
+  if (node.type === "text") {
+    return node.text;
+  }
+  if (RAW_HTML_BLOCKED_TAGS.has(node.tagName)) {
+    return null;
+  }
+  const children = renderRawHtmlNodes(node.children, key);
+  return createElement(
+    node.tagName,
+    withKey(toRawHtmlDomProps(node.attributes), key),
+    children.length > 0 ? children : void 0
+  );
+}
+function renderRawHtmlNodes(nodes, keyPrefix) {
+  const rendered = [];
+  for (const [index, node] of nodes.entries()) {
+    const next = renderRawHtmlNode(node, `${keyPrefix}-${index}`);
+    if (next !== null) {
+      rendered.push(next);
+    }
+  }
+  return rendered;
+}
+function rawHtmlChildren(value, keyPrefix) {
+  return renderRawHtmlNodes(parseRawHtmlFragment(value), keyPrefix);
+}
+
+// src/renderNode.tsx
+function isParentNode3(node) {
+  return Array.isArray(node.children);
+}
+function isSoftBreakNode(node) {
+  return node.tag === "soft_break" || node.tag === "softbreak";
+}
+function isHardBreakNode(node) {
+  return node.tag === "hard_break" || node.tag === "hardbreak";
+}
+function pickComponent(components, primary, alias) {
+  if (!components) {
+    return void 0;
+  }
+  return components[primary] ?? (alias ? components[alias] : void 0);
+}
+function renderChildren(children, components, footnoteState, listTight) {
+  return children.map(
+    (child, index) => renderNode(child, {
+      components,
+      footnoteState,
+      key: index,
+      listTight
+    })
+  );
+}
 function renderWithOverride(override, fallback, domProps, customProps, key, children) {
   const Component = override ?? fallback;
   const props = typeof Component === "string" ? withKey(domProps, key) : withKey(
@@ -80,52 +517,386 @@ function renderWithOverride(override, fallback, domProps, customProps, key, chil
     },
     key
   );
-  return createElement(Component, props, children);
+  return createElement(Component, props, children);
+}
+function renderDoc(node, components, key) {
+  const footnoteState = createFootnoteState(node);
+  const children = renderChildren(node.children, components, footnoteState);
+  const endnotes = renderEndnotes(node, components, footnoteState);
+  const allChildren = endnotes ? [...children, endnotes] : children;
+  const Component = pickComponent(components, "doc");
+  if (Component) {
+    const domProps = mergeDomProps(node);
+    if (typeof Component === "string") {
+      return createElement(Component, withKey(domProps, key), allChildren);
+    }
+    return createElement(Component, withKey({ ...domProps, node }, key), allChildren);
+  }
+  return createElement(Fragment, withKey({}, key), allChildren);
+}
+function renderSection(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "section"),
+    "section",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderDiv(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "div"),
+    "div",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderTable(node, components, footnoteState, key) {
+  const captionChildren = [];
+  const headRows = [];
+  const bodyRows = [];
+  const otherChildren = [];
+  for (const [index, child] of node.children.entries()) {
+    const rendered = renderNode(child, {
+      components,
+      footnoteState,
+      key: index
+    });
+    if (child.tag === "caption") {
+      captionChildren.push(rendered);
+      continue;
+    }
+    if (child.tag === "row") {
+      if (child.head && bodyRows.length === 0) {
+        headRows.push(rendered);
+      } else {
+        bodyRows.push(rendered);
+      }
+      continue;
+    }
+    otherChildren.push(rendered);
+  }
+  const children = [...captionChildren];
+  if (headRows.length > 0) {
+    children.push(createElement("thead", { key: "thead" }, headRows));
+  }
+  if (bodyRows.length > 0) {
+    children.push(createElement("tbody", { key: "tbody" }, bodyRows));
+  }
+  if (otherChildren.length > 0) {
+    children.push(...otherChildren);
+  }
+  return renderWithOverride(
+    pickComponent(components, "table"),
+    "table",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderCaption(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  const Component = pickComponent(components, "caption");
+  if (!Component && children.length === 0) {
+    return null;
+  }
+  return renderWithOverride(
+    Component,
+    "caption",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderRow(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "row"),
+    "tr",
+    mergeDomProps(node),
+    {
+      head: node.head,
+      node
+    },
+    key,
+    children
+  );
+}
+function renderCell(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  const textAlign = textAlignForCell(node.align);
+  const domProps = mergeDomProps(node, {
+    style: textAlign ? { textAlign } : void 0
+  });
+  return renderWithOverride(
+    pickComponent(components, "cell"),
+    node.head ? "th" : "td",
+    domProps,
+    {
+      align: node.align,
+      head: node.head,
+      node
+    },
+    key,
+    children
+  );
+}
+function renderHeading(node, components, footnoteState, key) {
+  const level = clampHeadingLevel(node.level);
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "heading"),
+    `h${level}`,
+    mergeDomProps(node),
+    {
+      level,
+      node
+    },
+    key,
+    children
+  );
+}
+function renderMark(node, components, footnoteState, key, primary, alias) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, primary, alias),
+    "mark",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderSuperscript(node, components, footnoteState, key, primary, alias) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, primary, alias),
+    "sup",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderSubscript(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "subscript"),
+    "sub",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderInsert(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "insert"),
+    "ins",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderDelete(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "delete"),
+    "del",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderFootnoteReference(node, components, footnoteState, key) {
+  const label = node.text;
+  const index = footnoteState ? ensureFootnoteIndex(label, footnoteState) : 1;
+  const refCount = (footnoteState?.refCountByLabel.get(label) ?? 0) + 1;
+  if (footnoteState) {
+    footnoteState.refCountByLabel.set(label, refCount);
+  }
+  const id = refCount === 1 ? `fnref${index}` : `fnref${index}-${refCount}`;
+  if (footnoteState && !footnoteState.firstRefIdByLabel.has(label)) {
+    footnoteState.firstRefIdByLabel.set(label, id);
+  }
+  const href = `#fn${index}`;
+  const children = createElement("sup", null, index);
+  return renderWithOverride(
+    pickComponent(components, "footnote_reference"),
+    "a",
+    mergeDomProps(node, {
+      href,
+      id,
+      role: "doc-noteref"
+    }),
+    {
+      index,
+      label,
+      node
+    },
+    key,
+    children
+  );
+}
+function renderEndnotes(node, components, footnoteState) {
+  if (footnoteState.order.length === 0) {
+    return null;
+  }
+  const items = footnoteState.order.map((label, itemIndex) => {
+    const index = itemIndex + 1;
+    const footnoteNode = node.footnotes?.[label] ?? {
+      children: [],
+      label,
+      tag: "footnote"
+    };
+    const footnoteChildren = renderChildren(footnoteNode.children, components, footnoteState);
+    const backlink = createElement(
+      "a",
+      {
+        href: `#${footnoteState.firstRefIdByLabel.get(label) ?? `fnref${index}`}`,
+        role: "doc-backlink"
+      },
+      "\u21A9\uFE0E"
+    );
+    const content = appendBacklink(footnoteChildren, backlink);
+    return renderWithOverride(
+      pickComponent(components, "footnote"),
+      "li",
+      mergeDomProps(footnoteNode, {
+        id: `fn${index}`,
+        key: label
+      }),
+      {
+        index,
+        label,
+        node: footnoteNode
+      },
+      label,
+      content
+    );
+  });
+  const ol = createElement("ol", null, items);
+  const sectionChildren = [createElement("hr", { key: "hr" }), createElement(Fragment, { key: "ol" }, ol)];
+  return renderWithOverride(
+    pickComponent(components, "endnotes"),
+    "section",
+    {
+      role: "doc-endnotes"
+    },
+    {
+      node,
+      order: footnoteState.order
+    },
+    "endnotes",
+    sectionChildren
+  );
+}
+function renderQuoted(node, components, footnoteState, key, primary, alias, openQuote, closeQuote) {
+  const children = renderChildren(node.children, components, footnoteState);
+  const Component = pickComponent(components, primary, alias);
+  const domProps = mergeDomProps(node);
+  if (!Component) {
+    return createElement(Fragment, withKey({}, key), openQuote, children, closeQuote);
+  }
+  if (typeof Component === "string") {
+    return createElement(Component, withKey(domProps, key), openQuote, children, closeQuote);
+  }
+  return createElement(
+    Component,
+    withKey(
+      {
+        ...domProps,
+        node
+      },
+      key
+    ),
+    openQuote,
+    children,
+    closeQuote
+  );
 }
-function renderDoc(node, components, key) {
-  const children = renderChildren(node.children, components);
-  const Component = pickComponent(components, "doc");
-  if (Component) {
-    if (typeof Component === "string") {
-      return createElement(Component, withKey({}, key), children);
-    }
-    return createElement(Component, withKey({ node }, key), children);
+function renderSmartPunctuation(node, components, key) {
+  const value = toSmartPunctuation(node.type, node.text);
+  const Component = pickComponent(components, "smart_punctuation");
+  const domProps = mergeDomProps(node);
+  if (!Component) {
+    return value;
   }
-  return createElement(Fragment, withKey({}, key), children);
-}
-function renderSection(node, components, key) {
-  const children = renderChildren(node.children, components);
-  const Component = pickComponent(components, "section");
-  if (Component) {
-    if (typeof Component === "string") {
-      return createElement(Component, withKey({}, key), children);
-    }
-    return createElement(
-      Component,
-      withKey(
-        {
-          node
-        },
-        key
-      ),
-      children
-    );
+  if (typeof Component === "string") {
+    return createElement(Component, withKey(domProps, key), value);
   }
-  return createElement(Fragment, withKey({}, key), children);
+  return createElement(
+    Component,
+    withKey(
+      {
+        ...domProps,
+        kind: node.type,
+        node,
+        value
+      },
+      key
+    ),
+    value
+  );
 }
-function renderHeading(node, components, key) {
-  const level = clampHeadingLevel(node.level);
-  const children = renderChildren(node.children, components);
+function renderInlineMath(node, components, key) {
+  const value = node.text;
   return renderWithOverride(
-    pickComponent(components, "heading"),
-    `h${level}`,
-    {},
+    pickComponent(components, "inline_math"),
+    "span",
+    mergeDomProps(node, {
+      className: "math inline"
+    }),
     {
-      level,
-      node
+      node,
+      value
     },
     key,
-    children
+    `\\(${value}\\)`
+  );
+}
+function renderDisplayMath(node, components, key) {
+  const value = node.text;
+  return renderWithOverride(
+    pickComponent(components, "display_math"),
+    "span",
+    mergeDomProps(node, {
+      className: "math display"
+    }),
+    {
+      node,
+      value
+    },
+    key,
+    `\\[${value}\\]`
   );
 }
 function renderCode(node, components, key, primary, alias) {
@@ -133,7 +904,7 @@ function renderCode(node, components, key, primary, alias) {
   return renderWithOverride(
     pickComponent(components, primary, alias),
     "code",
-    {},
+    mergeDomProps(node),
     {
       node,
       value
@@ -155,7 +926,7 @@ function renderCodeBlock(node, components, key) {
   return renderWithOverride(
     pickComponent(components, "code_block"),
     "pre",
-    {},
+    mergeDomProps(node),
     {
       language,
       node,
@@ -165,15 +936,136 @@ function renderCodeBlock(node, components, key) {
     fallbackChildren
   );
 }
-function renderLink(node, components, key) {
-  const children = renderChildren(node.children, components);
-  const href = node.destination;
+function renderRawBlock(node, components, key) {
+  const format = node.format;
+  const value = node.text;
+  const htmlChildren = format === "html" ? rawHtmlChildren(value, `raw-block-${String(key ?? "node")}`) : void 0;
+  const Component = pickComponent(components, "raw_block");
+  const domProps = mergeDomProps(node);
+  if (!Component) {
+    if (format !== "html") {
+      return null;
+    }
+    return createElement(Fragment, withKey({}, key), htmlChildren);
+  }
+  if (typeof Component === "string") {
+    return createElement(Component, withKey(domProps, key), htmlChildren ?? value);
+  }
+  return createElement(
+    Component,
+    withKey(
+      {
+        ...domProps,
+        format,
+        node,
+        value
+      },
+      key
+    ),
+    htmlChildren ?? value
+  );
+}
+function renderRawInline(node, components, key) {
+  const format = node.format;
+  const value = node.text;
+  const htmlChildren = format === "html" ? rawHtmlChildren(value, `raw-inline-${String(key ?? "node")}`) : void 0;
+  const Component = pickComponent(components, "raw_inline");
+  const domProps = mergeDomProps(node);
+  if (!Component) {
+    if (format !== "html") {
+      return null;
+    }
+    return createElement(Fragment, withKey({}, key), htmlChildren);
+  }
+  if (typeof Component === "string") {
+    return createElement(Component, withKey(domProps, key), htmlChildren ?? value);
+  }
+  return createElement(
+    Component,
+    withKey(
+      {
+        ...domProps,
+        format,
+        node,
+        value
+      },
+      key
+    ),
+    htmlChildren ?? value
+  );
+}
+function renderUrl(node, components, key) {
+  const value = node.text;
+  const href = value;
   return renderWithOverride(
-    pickComponent(components, "link"),
+    pickComponent(components, "url"),
     "a",
+    mergeDomProps(node, {
+      href
+    }),
     {
+      href,
+      node,
+      value
+    },
+    key,
+    value
+  );
+}
+function renderEmail(node, components, key) {
+  const value = node.text;
+  const href = `mailto:${value}`;
+  return renderWithOverride(
+    pickComponent(components, "email"),
+    "a",
+    mergeDomProps(node, {
       href
+    }),
+    {
+      href,
+      node,
+      value
     },
+    key,
+    value
+  );
+}
+function renderSymb(node, components, key) {
+  const alias = node.alias;
+  const value = `:${alias}:`;
+  const Component = pickComponent(components, "symb");
+  if (!Component) {
+    return value;
+  }
+  if (typeof Component === "string") {
+    return createElement(Component, withKey(mergeDomProps(node), key), value);
+  }
+  return createElement(
+    Component,
+    withKey(
+      {
+        ...mergeDomProps(node),
+        alias,
+        node,
+        value
+      },
+      key
+    ),
+    value
+  );
+}
+function renderLink(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  const referenceNode = resolveReferenceNode(node, footnoteState);
+  const referenceProps = referenceNode ? toDomPropsFromNode(referenceNode) : {};
+  const href = resolveReferenceDestination(node, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "link"),
+    "a",
+    mergeDomProps(node, {
+      href,
+      ...referenceProps
+    }),
     {
       node
     },
@@ -181,16 +1073,19 @@ function renderLink(node, components, key) {
     children
   );
 }
-function renderImage(node, components, key) {
+function renderImage(node, components, footnoteState, key) {
   const alt = toAltText(node.children) || void 0;
-  const src = node.destination;
+  const referenceNode = resolveReferenceNode(node, footnoteState);
+  const referenceProps = referenceNode ? toDomPropsFromNode(referenceNode) : {};
+  const src = resolveReferenceDestination(node, footnoteState);
   return renderWithOverride(
     pickComponent(components, "image"),
     "img",
-    {
+    mergeDomProps(node, {
       alt,
-      src
-    },
+      src,
+      ...referenceProps
+    }),
     {
       alt,
       node
@@ -198,28 +1093,165 @@ function renderImage(node, components, key) {
     key
   );
 }
-function renderOrderedList(node, components, key) {
-  const children = renderChildren(node.children, components);
+function renderOrderedList(node, components, footnoteState, key) {
+  const tight = node.tight ?? false;
+  const children = renderChildren(node.children, components, footnoteState, tight);
+  const start = node.start !== void 0 && node.start !== 1 ? node.start : void 0;
+  const type = toOrderedListType(node.style);
   return renderWithOverride(
     pickComponent(components, "ordered_list"),
     "ol",
+    mergeDomProps(node, {
+      start,
+      type
+    }),
+    {
+      node,
+      start,
+      tight
+    },
+    key,
+    children
+  );
+}
+function renderDefinitionList(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "definition_list"),
+    "dl",
+    mergeDomProps(node),
     {
-      start: node.start
+      node
     },
+    key,
+    children
+  );
+}
+function renderDefinitionListItem(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  const Component = pickComponent(components, "definition_list_item");
+  const domProps = mergeDomProps(node);
+  if (Component) {
+    if (typeof Component === "string") {
+      return createElement(Component, withKey(domProps, key), children);
+    }
+    return createElement(
+      Component,
+      withKey(
+        {
+          ...domProps,
+          node
+        },
+        key
+      ),
+      children
+    );
+  }
+  return createElement(Fragment, withKey({}, key), children);
+}
+function renderBulletList(node, components, footnoteState, key) {
+  const tight = node.tight ?? false;
+  const children = renderChildren(node.children, components, footnoteState, tight);
+  return renderWithOverride(
+    pickComponent(components, "bullet_list"),
+    "ul",
+    mergeDomProps(node),
     {
       node,
-      start: node.start
+      tight
+    },
+    key,
+    children
+  );
+}
+function renderListItem(node, components, footnoteState, listTight, key) {
+  const override = pickComponent(components, "list_item");
+  if (override) {
+    const domProps = mergeDomProps(node);
+    const contentChildren2 = renderChildren(node.children, components, footnoteState);
+    if (typeof override === "string") {
+      return createElement(override, withKey(domProps, key), contentChildren2);
+    }
+    return createElement(
+      override,
+      withKey({ ...domProps, node, tight: listTight }, key),
+      contentChildren2
+    );
+  }
+  const firstChild = node.children[0];
+  const inlineSource = listTight === true && node.children.length === 1 && firstChild?.tag === "para" ? firstChild.children : node.children;
+  const contentChildren = renderChildren(inlineSource, components, footnoteState);
+  return createElement("li", withKey(mergeDomProps(node), key), contentChildren);
+}
+function renderTerm(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "term"),
+    "dt",
+    mergeDomProps(node),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderDefinition(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "definition"),
+    "dd",
+    mergeDomProps(node),
+    {
+      node
     },
     key,
     children
   );
 }
-function renderBlockQuote(node, components, key, primary, alias) {
-  const children = renderChildren(node.children, components);
+function renderTaskList(node, components, footnoteState, key) {
+  const tight = node.tight ?? false;
+  const children = renderChildren(node.children, components, footnoteState, tight);
+  return renderWithOverride(
+    pickComponent(components, "task_list"),
+    "ul",
+    mergeDomProps(node, { className: "task-list" }),
+    { node, tight },
+    key,
+    children
+  );
+}
+function renderTaskListItem(node, components, footnoteState, listTight, key) {
+  const override = pickComponent(components, "task_list_item");
+  if (override) {
+    const domProps = mergeDomProps(node);
+    const contentChildren2 = renderChildren(node.children, components, footnoteState);
+    if (typeof override === "string") {
+      return createElement(override, withKey(domProps, key), contentChildren2);
+    }
+    return createElement(
+      override,
+      withKey({ ...domProps, node, checkbox: node.checkbox, tight: listTight }, key),
+      contentChildren2
+    );
+  }
+  const firstChild = node.children[0];
+  const inlineSource = listTight === true && node.children.length === 1 && firstChild?.tag === "para" ? firstChild.children : node.children;
+  const contentChildren = renderChildren(inlineSource, components, footnoteState);
+  const checkboxEl = createElement("input", {
+    key: "checkbox",
+    type: "checkbox",
+    disabled: true,
+    checked: node.checkbox === "checked"
+  });
+  return createElement("li", withKey(mergeDomProps(node), key), [checkboxEl, contentChildren]);
+}
+function renderBlockQuote(node, components, footnoteState, key, primary, alias) {
+  const children = renderChildren(node.children, components, footnoteState);
   return renderWithOverride(
     pickComponent(components, primary, alias),
     "blockquote",
-    {},
+    mergeDomProps(node),
     {
       node
     },
@@ -230,16 +1262,49 @@ function renderBlockQuote(node, components, key, primary, alias) {
 function renderStr(node, components, key) {
   const value = node.text;
   const Component = pickComponent(components, "str");
+  const domProps = mergeDomProps(node);
+  const hasNodeDomProps = Object.keys(domProps).length > 0;
+  if (!Component) {
+    if (hasNodeDomProps) {
+      return createElement("span", withKey(domProps, key), value);
+    }
+    return value;
+  }
+  if (typeof Component === "string") {
+    return createElement(Component, withKey(domProps, key), value);
+  }
+  return createElement(
+    Component,
+    withKey(
+      {
+        ...domProps,
+        node,
+        value
+      },
+      key
+    ),
+    value
+  );
+}
+function renderNonBreakingSpace(node, components, key) {
+  const value = "\xA0";
+  const Component = pickComponent(components, "non_breaking_space");
+  const domProps = mergeDomProps(node);
+  const hasNodeDomProps = Object.keys(domProps).length > 0;
   if (!Component) {
+    if (hasNodeDomProps) {
+      return createElement("span", withKey(domProps, key), value);
+    }
     return value;
   }
   if (typeof Component === "string") {
-    return createElement(Component, withKey({}, key), value);
+    return createElement(Component, withKey(domProps, key), value);
   }
   return createElement(
     Component,
     withKey(
       {
+        ...domProps,
         node,
         value
       },
@@ -250,16 +1315,18 @@ function renderStr(node, components, key) {
 }
 function renderSoftBreak(node, components, key) {
   const Component = pickComponent(components, "soft_break", "softbreak");
+  const domProps = mergeDomProps(node);
   if (!Component) {
     return "\n";
   }
   if (typeof Component === "string") {
-    return createElement(Component, withKey({}, key), "\n");
+    return createElement(Component, withKey(domProps, key), "\n");
   }
   return createElement(
     Component,
     withKey(
       {
+        ...domProps,
         node
       },
       key
@@ -271,7 +1338,7 @@ function renderHardBreak(node, components, key) {
   return renderWithOverride(
     pickComponent(components, "hard_break", "hardbreak"),
     "br",
-    {},
+    mergeDomProps(node),
     {
       node
     },
@@ -279,18 +1346,28 @@ function renderHardBreak(node, components, key) {
   );
 }
 function renderNode(node, options = {}) {
-  const { components, key } = options;
-  const children = isParentNode(node) ? renderChildren(node.children, components) : void 0;
+  const { components, footnoteState, key, listTight } = options;
+  const children = isParentNode3(node) ? renderChildren(node.children, components, footnoteState, listTight) : void 0;
   switch (node.tag) {
     case "doc":
       return renderDoc(node, components, key);
     case "section":
-      return renderSection(node, components, key);
+      return renderSection(node, components, footnoteState, key);
+    case "div":
+      return renderDiv(node, components, footnoteState, key);
+    case "table":
+      return renderTable(node, components, footnoteState, key);
+    case "caption":
+      return renderCaption(node, components, footnoteState, key);
+    case "row":
+      return renderRow(node, components, footnoteState, key);
+    case "cell":
+      return renderCell(node, components, footnoteState, key);
     case "para":
       return renderWithOverride(
         pickComponent(components, "para"),
         "p",
-        {},
+        mergeDomProps(node),
         {
           node
         },
@@ -298,12 +1375,12 @@ function renderNode(node, options = {}) {
         children
       );
     case "heading":
-      return renderHeading(node, components, key);
+      return renderHeading(node, components, footnoteState, key);
     case "emph":
       return renderWithOverride(
         pickComponent(components, "emph"),
         "em",
-        {},
+        mergeDomProps(node),
         {
           node
         },
@@ -314,56 +1391,128 @@ function renderNode(node, options = {}) {
       return renderWithOverride(
         pickComponent(components, "strong"),
         "strong",
-        {},
+        mergeDomProps(node),
         {
           node
         },
         key,
         children
       );
-    case "code":
-      return renderCode(node, components, key, "code", "verbatim");
-    case "verbatim":
-      return renderCode(node, components, key, "verbatim", "code");
-    case "code_block":
-      return renderCodeBlock(node, components, key);
-    case "link":
-      return renderLink(node, components, key);
-    case "image":
-      return renderImage(node, components, key);
-    case "bullet_list":
+    case "mark":
+      return renderMark(node, components, footnoteState, key, "mark", "highlighted");
+    case "highlighted":
+      return renderMark(node, components, footnoteState, key, "highlighted", "mark");
+    case "superscript":
+      return renderSuperscript(node, components, footnoteState, key, "superscript", "supe");
+    case "supe":
+      return renderSuperscript(node, components, footnoteState, key, "supe", "superscript");
+    case "subscript":
+      return renderSubscript(node, components, footnoteState, key);
+    case "insert":
+      return renderInsert(node, components, footnoteState, key);
+    case "delete":
+      return renderDelete(node, components, footnoteState, key);
+    case "span":
       return renderWithOverride(
-        pickComponent(components, "bullet_list"),
-        "ul",
-        {},
+        pickComponent(components, "span"),
+        "span",
+        mergeDomProps(node),
         {
           node
         },
         key,
         children
       );
-    case "ordered_list":
-      return renderOrderedList(node, components, key);
-    case "list_item":
+    case "footnote_reference":
+      return renderFootnoteReference(node, components, footnoteState, key);
+    case "footnote":
       return renderWithOverride(
-        pickComponent(components, "list_item"),
+        pickComponent(components, "footnote"),
         "li",
-        {},
+        mergeDomProps(node),
         {
+          index: 0,
+          label: node.label,
           node
         },
         key,
         children
       );
+    case "double_quoted":
+      return renderQuoted(
+        node,
+        components,
+        footnoteState,
+        key,
+        "double_quoted",
+        "single_quoted",
+        "\u201C",
+        "\u201D"
+      );
+    case "single_quoted":
+      return renderQuoted(
+        node,
+        components,
+        footnoteState,
+        key,
+        "single_quoted",
+        "double_quoted",
+        "\u2018",
+        "\u2019"
+      );
+    case "smart_punctuation":
+      return renderSmartPunctuation(node, components, key);
+    case "symb":
+      return renderSymb(node, components, key);
+    case "inline_math":
+      return renderInlineMath(node, components, key);
+    case "display_math":
+      return renderDisplayMath(node, components, key);
+    case "code":
+      return renderCode(node, components, key, "code", "verbatim");
+    case "verbatim":
+      return renderCode(node, components, key, "verbatim", "code");
+    case "code_block":
+      return renderCodeBlock(node, components, key);
+    case "raw_block":
+      return renderRawBlock(node, components, key);
+    case "raw_inline":
+      return renderRawInline(node, components, key);
+    case "url":
+      return renderUrl(node, components, key);
+    case "email":
+      return renderEmail(node, components, key);
+    case "link":
+      return renderLink(node, components, footnoteState, key);
+    case "image":
+      return renderImage(node, components, footnoteState, key);
+    case "bullet_list":
+      return renderBulletList(node, components, footnoteState, key);
+    case "ordered_list":
+      return renderOrderedList(node, components, footnoteState, key);
+    case "list_item":
+      return renderListItem(node, components, footnoteState, listTight, key);
+    case "definition_list":
+      return renderDefinitionList(node, components, footnoteState, key);
+    case "definition_list_item":
+      return renderDefinitionListItem(node, components, footnoteState, key);
+    case "term":
+      return renderTerm(node, components, footnoteState, key);
+    case "definition":
+      return renderDefinition(node, components, footnoteState, key);
+    case "task_list":
+      return renderTaskList(node, components, footnoteState, key);
+    case "task_list_item":
+      return renderTaskListItem(node, components, footnoteState, listTight, key);
     case "blockquote":
-      return renderBlockQuote(node, components, key, "blockquote", "block_quote");
+      return renderBlockQuote(node, components, footnoteState, key, "blockquote", "block_quote");
     case "block_quote":
-      return renderBlockQuote(node, components, key, "block_quote", "blockquote");
+      return renderBlockQuote(node, components, footnoteState, key, "block_quote", "blockquote");
     case "thematic_break":
       return renderWithOverride(
         pickComponent(components, "thematic_break"),
         "hr",
-        {},
+        mergeDomProps(node),
         {
           node
         },
@@ -371,6 +1520,8 @@ function renderNode(node, options = {}) {
       );
     case "str":
       return renderStr(node, components, key);
+    case "non_breaking_space":
+      return renderNonBreakingSpace(node, components, key);
     default:
       if (isSoftBreakNode(node)) {
         return renderSoftBreak(node, components, key);
@@ -381,16 +1532,50 @@ function renderNode(node, options = {}) {
       return null;
   }
 }
-function Djot({ children, components }) {
-  const source = children ?? "";
+var COMPILE_CACHE_LIMIT = 100;
+var compileCache = /* @__PURE__ */ new Map();
+function getCachedAst(source) {
+  const cached = compileCache.get(source);
+  if (!cached) {
+    return void 0;
+  }
+  compileCache.delete(source);
+  compileCache.set(source, cached);
+  return cached;
+}
+function setCachedAst(source, ast) {
+  compileCache.set(source, ast);
+  if (compileCache.size > COMPILE_CACHE_LIMIT) {
+    const oldestSource = compileCache.keys().next().value;
+    if (oldestSource !== void 0) {
+      compileCache.delete(oldestSource);
+    }
+  }
+  return ast;
+}
+function compileDjot(source) {
+  const cached = getCachedAst(source);
+  if (cached) {
+    return cached;
+  }
+  const ast = parse(source);
+  return setCachedAst(source, ast);
+}
+function Djot(props) {
+  const { components } = props;
+  const astFromProps = props.ast;
+  if (astFromProps !== void 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderNode(astFromProps, { components }) });
+  }
+  const source = props.children ?? "";
   if (source.length === 0) {
     return null;
   }
-  const ast = parse(source);
+  const ast = compileDjot(source);
   return /* @__PURE__ */ jsx(Fragment, { children: renderNode(ast, { components }) });
 }
 var Djot_default = Djot;
 
-export { Djot, Djot_default as default, renderNode };
+export { Djot, compileDjot, Djot_default as default, renderNode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map