@willwang-io/react-djot 0.1.5 → 0.1.6

package/dist/index.js

@@ -6,27 +6,6 @@ import { jsx } from 'react/jsx-runtime';
 function isParentNode(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) {
-  return children.map(
-    (child, index) => renderNode(child, {
-      components,
-      footnoteState,
-      key: index
-    })
-  );
-}
 function collectFootnoteReferences(nodes, indexByLabel, order) {
   for (const node of nodes) {
     if (node.tag === "footnote_reference") {
@@ -48,12 +27,26 @@ function createFootnoteState(node) {
   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 resolveReferenceNode(node, footnoteState) {
+  if (!node.reference || !footnoteState) {
+    return void 0;
+  }
+  return footnoteState.referencesByLabel[node.reference] ?? footnoteState.autoReferencesByLabel[node.reference];
+}
+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) {
@@ -78,6 +71,11 @@ function appendBacklink(nodes, backlink) {
   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":
@@ -108,7 +106,15 @@ function toAltText(nodes) {
       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);
@@ -128,7 +134,7 @@ function toAltText(nodes) {
         output += "\n";
         break;
       default:
-        if (isParentNode(node)) {
+        if (isParentNode2(node)) {
           output += toAltText(node.children);
         }
         break;
@@ -168,6 +174,45 @@ function toDomPropsFromAttributes(attributes) {
   }
   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";
@@ -180,6 +225,289 @@ function textAlignForCell(align) {
   }
   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(
@@ -198,39 +526,33 @@ function renderDoc(node, components, key) {
   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({}, key), allChildren);
+      return createElement(Component, withKey(domProps, key), allChildren);
     }
-    return createElement(Component, withKey({ node }, 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);
-  const Component = pickComponent(components, "section");
-  if (Component) {
-    if (typeof Component === "string") {
-      return createElement(Component, withKey({}, key), children);
-    }
-    return createElement(
-      Component,
-      withKey(
-        {
-          node
-        },
-        key
-      ),
-      children
-    );
-  }
-  return createElement(Fragment, withKey({}, key), children);
+  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",
-    toDomPropsFromAttributes(node.attributes),
+    mergeDomProps(node),
     {
       node
     },
@@ -239,11 +561,44 @@ function renderDiv(node, components, footnoteState, key) {
   );
 }
 function renderTable(node, components, footnoteState, key) {
-  const children = renderChildren(node.children, components, footnoteState);
+  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",
-    toDomPropsFromAttributes(node.attributes),
+    mergeDomProps(node),
     {
       node
     },
@@ -260,7 +615,7 @@ function renderCaption(node, components, footnoteState, key) {
   return renderWithOverride(
     Component,
     "caption",
-    toDomPropsFromAttributes(node.attributes),
+    mergeDomProps(node),
     {
       node
     },
@@ -273,7 +628,7 @@ function renderRow(node, components, footnoteState, key) {
   return renderWithOverride(
     pickComponent(components, "row"),
     "tr",
-    toDomPropsFromAttributes(node.attributes),
+    mergeDomProps(node),
     {
       head: node.head,
       node
@@ -285,10 +640,9 @@ function renderRow(node, components, footnoteState, key) {
 function renderCell(node, components, footnoteState, key) {
   const children = renderChildren(node.children, components, footnoteState);
   const textAlign = textAlignForCell(node.align);
-  const domProps = {
-    ...toDomPropsFromAttributes(node.attributes),
+  const domProps = mergeDomProps(node, {
     style: textAlign ? { textAlign } : void 0
-  };
+  });
   return renderWithOverride(
     pickComponent(components, "cell"),
     node.head ? "th" : "td",
@@ -308,7 +662,7 @@ function renderHeading(node, components, footnoteState, key) {
   return renderWithOverride(
     pickComponent(components, "heading"),
     `h${level}`,
-    {},
+    mergeDomProps(node),
     {
       level,
       node
@@ -322,7 +676,7 @@ function renderMark(node, components, footnoteState, key, primary, alias) {
   return renderWithOverride(
     pickComponent(components, primary, alias),
     "mark",
-    {},
+    mergeDomProps(node),
     {
       node
     },
@@ -335,7 +689,7 @@ function renderSuperscript(node, components, footnoteState, key, primary, alias)
   return renderWithOverride(
     pickComponent(components, primary, alias),
     "sup",
-    {},
+    mergeDomProps(node),
     {
       node
     },
@@ -348,7 +702,7 @@ function renderSubscript(node, components, footnoteState, key) {
   return renderWithOverride(
     pickComponent(components, "subscript"),
     "sub",
-    {},
+    mergeDomProps(node),
     {
       node
     },
@@ -361,7 +715,7 @@ function renderInsert(node, components, footnoteState, key) {
   return renderWithOverride(
     pickComponent(components, "insert"),
     "ins",
-    {},
+    mergeDomProps(node),
     {
       node
     },
@@ -374,7 +728,7 @@ function renderDelete(node, components, footnoteState, key) {
   return renderWithOverride(
     pickComponent(components, "delete"),
     "del",
-    {},
+    mergeDomProps(node),
     {
       node
     },
@@ -398,11 +752,11 @@ function renderFootnoteReference(node, components, footnoteState, key) {
   return renderWithOverride(
     pickComponent(components, "footnote_reference"),
     "a",
-    {
+    mergeDomProps(node, {
       href,
       id,
       role: "doc-noteref"
-    },
+    }),
     {
       index,
       label,
@@ -436,10 +790,10 @@ function renderEndnotes(node, components, footnoteState) {
     return renderWithOverride(
       pickComponent(components, "footnote"),
       "li",
-      {
+      mergeDomProps(footnoteNode, {
         id: `fn${index}`,
         key: label
-      },
+      }),
       {
         index,
         label,
@@ -468,16 +822,18 @@ function renderEndnotes(node, components, footnoteState) {
 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({}, key), openQuote, children, closeQuote);
+    return createElement(Component, withKey(domProps, key), openQuote, children, closeQuote);
   }
   return createElement(
     Component,
     withKey(
       {
+        ...domProps,
         node
       },
       key
@@ -490,16 +846,18 @@ function renderQuoted(node, components, footnoteState, key, primary, alias, open
 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;
   }
   if (typeof Component === "string") {
-    return createElement(Component, withKey({}, key), value);
+    return createElement(Component, withKey(domProps, key), value);
   }
   return createElement(
     Component,
     withKey(
       {
+        ...domProps,
         kind: node.type,
         node,
         value
@@ -514,9 +872,9 @@ function renderInlineMath(node, components, key) {
   return renderWithOverride(
     pickComponent(components, "inline_math"),
     "span",
-    {
+    mergeDomProps(node, {
       className: "math inline"
-    },
+    }),
     {
       node,
       value
@@ -530,9 +888,9 @@ function renderDisplayMath(node, components, key) {
   return renderWithOverride(
     pickComponent(components, "display_math"),
     "span",
-    {
+    mergeDomProps(node, {
       className: "math display"
-    },
+    }),
     {
       node,
       value
@@ -546,7 +904,7 @@ function renderCode(node, components, key, primary, alias) {
   return renderWithOverride(
     pickComponent(components, primary, alias),
     "code",
-    {},
+    mergeDomProps(node),
     {
       node,
       value
@@ -568,7 +926,7 @@ function renderCodeBlock(node, components, key) {
   return renderWithOverride(
     pickComponent(components, "code_block"),
     "pre",
-    {},
+    mergeDomProps(node),
     {
       language,
       node,
@@ -578,15 +936,136 @@ function renderCodeBlock(node, components, key) {
     fallbackChildren
   );
 }
-function renderLink(node, components, footnoteState, key) {
-  const children = renderChildren(node.children, components, footnoteState);
-  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
     },
@@ -594,16 +1073,19 @@ function renderLink(node, components, footnoteState, 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
@@ -612,27 +1094,164 @@ function renderImage(node, components, key) {
   );
 }
 function renderOrderedList(node, components, footnoteState, key) {
-  const children = renderChildren(node.children, components, footnoteState);
+  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 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
     },
@@ -643,16 +1262,49 @@ function renderBlockQuote(node, components, footnoteState, 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
       },
@@ -663,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
@@ -684,7 +1338,7 @@ function renderHardBreak(node, components, key) {
   return renderWithOverride(
     pickComponent(components, "hard_break", "hardbreak"),
     "br",
-    {},
+    mergeDomProps(node),
     {
       node
     },
@@ -692,8 +1346,8 @@ function renderHardBreak(node, components, key) {
   );
 }
 function renderNode(node, options = {}) {
-  const { components, footnoteState, key } = options;
-  const children = isParentNode(node) ? renderChildren(node.children, components, footnoteState) : 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);
@@ -713,7 +1367,7 @@ function renderNode(node, options = {}) {
       return renderWithOverride(
         pickComponent(components, "para"),
         "p",
-        {},
+        mergeDomProps(node),
         {
           node
         },
@@ -726,7 +1380,7 @@ function renderNode(node, options = {}) {
       return renderWithOverride(
         pickComponent(components, "emph"),
         "em",
-        {},
+        mergeDomProps(node),
         {
           node
         },
@@ -737,7 +1391,7 @@ function renderNode(node, options = {}) {
       return renderWithOverride(
         pickComponent(components, "strong"),
         "strong",
-        {},
+        mergeDomProps(node),
         {
           node
         },
@@ -758,13 +1412,24 @@ function renderNode(node, options = {}) {
       return renderInsert(node, components, footnoteState, key);
     case "delete":
       return renderDelete(node, components, footnoteState, key);
+    case "span":
+      return renderWithOverride(
+        pickComponent(components, "span"),
+        "span",
+        mergeDomProps(node),
+        {
+          node
+        },
+        key,
+        children
+      );
     case "footnote_reference":
       return renderFootnoteReference(node, components, footnoteState, key);
     case "footnote":
       return renderWithOverride(
         pickComponent(components, "footnote"),
         "li",
-        {},
+        mergeDomProps(node),
         {
           index: 0,
           label: node.label,
@@ -797,6 +1462,8 @@ function renderNode(node, options = {}) {
       );
     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":
@@ -807,34 +1474,36 @@ function renderNode(node, options = {}) {
       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, key);
+      return renderImage(node, components, footnoteState, key);
     case "bullet_list":
-      return renderWithOverride(
-        pickComponent(components, "bullet_list"),
-        "ul",
-        {},
-        {
-          node
-        },
-        key,
-        children
-      );
+      return renderBulletList(node, components, footnoteState, key);
     case "ordered_list":
       return renderOrderedList(node, components, footnoteState, key);
     case "list_item":
-      return renderWithOverride(
-        pickComponent(components, "list_item"),
-        "li",
-        {},
-        {
-          node
-        },
-        key,
-        children
-      );
+      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, footnoteState, key, "blockquote", "block_quote");
     case "block_quote":
@@ -843,7 +1512,7 @@ function renderNode(node, options = {}) {
       return renderWithOverride(
         pickComponent(components, "thematic_break"),
         "hr",
-        {},
+        mergeDomProps(node),
         {
           node
         },
@@ -851,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);
@@ -861,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