@willwang-io/react-djot 0.1.4 → 0.1.5

package/README.md

@@ -99,6 +99,11 @@ export function Example() {
 
 - `doc`
 - `section`
+- `div`
+- `table`
+- `caption`
+- `row`
+- `cell`
 - `para`
 - `heading`
 - `emph`
@@ -106,6 +111,16 @@ export function Example() {
 - `mark` and `highlighted`
 - `superscript` and `supe`
 - `subscript`
+- `insert`
+- `delete`
+- `footnote_reference`
+- `footnote`
+- `endnotes`
+- `double_quoted`
+- `single_quoted`
+- `smart_punctuation`
+- `inline_math`
+- `display_math`
 - `code`
 - `verbatim`
 - `code_block`
@@ -140,6 +155,17 @@ npm run lint
 npm test
 ```
 
+## Demo App
+
+A React + Vite demo app lives in `examples/react-djot-demo`.
+
+```bash
+npm run build
+cd examples/react-djot-demo
+npm install
+npm run dev
+```
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -22,14 +22,86 @@ function pickComponent(components, primary, alias) {
   }
   return components[primary] ?? (alias ? components[alias] : void 0);
 }
-function renderChildren(children, components) {
+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") {
+      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 createFootnoteState(node) {
+  const indexByLabel = /* @__PURE__ */ new Map();
+  const order = [];
+  collectFootnoteReferences(node.children, indexByLabel, order);
+  return {
+    firstRefIdByLabel: /* @__PURE__ */ new Map(),
+    indexByLabel,
+    order,
+    refCountByLabel: /* @__PURE__ */ new Map()
+  };
+}
+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 (react.isValidElement(last)) {
+    next[lastIndex] = react.cloneElement(last, void 0, last.props.children, backlink);
+    return next;
+  }
+  next.push(backlink);
+  return next;
+}
+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 = "";
   for (const node of nodes) {
@@ -37,9 +109,20 @@ function toAltText(nodes) {
       case "str":
       case "code":
       case "verbatim":
+      case "inline_math":
+      case "display_math":
       case "code_block":
         output += node.text;
         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":
         output += " ";
@@ -75,6 +158,32 @@ 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 textAlignForCell(align) {
+  if (align === "left") {
+    return "left";
+  }
+  if (align === "right") {
+    return "right";
+  }
+  if (align === "center") {
+    return "center";
+  }
+  return void 0;
+}
 function renderWithOverride(override, fallback, domProps, customProps, key, children) {
   const Component = override ?? fallback;
   const props = typeof Component === "string" ? withKey(domProps, key) : withKey(
@@ -87,18 +196,21 @@ function renderWithOverride(override, fallback, domProps, customProps, key, chil
   return react.createElement(Component, props, children);
 }
 function renderDoc(node, components, key) {
-  const children = renderChildren(node.children, components);
+  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) {
     if (typeof Component === "string") {
-      return react.createElement(Component, withKey({}, key), children);
+      return react.createElement(Component, withKey({}, key), allChildren);
     }
-    return react.createElement(Component, withKey({ node }, key), children);
+    return react.createElement(Component, withKey({ node }, key), allChildren);
   }
-  return react.createElement(react.Fragment, withKey({}, key), children);
+  return react.createElement(react.Fragment, withKey({}, key), allChildren);
 }
-function renderSection(node, components, key) {
-  const children = renderChildren(node.children, components);
+function renderSection(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
   const Component = pickComponent(components, "section");
   if (Component) {
     if (typeof Component === "string") {
@@ -117,9 +229,86 @@ function renderSection(node, components, key) {
   }
   return react.createElement(react.Fragment, withKey({}, key), children);
 }
-function renderHeading(node, components, key) {
+function renderDiv(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "div"),
+    "div",
+    toDomPropsFromAttributes(node.attributes),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderTable(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "table"),
+    "table",
+    toDomPropsFromAttributes(node.attributes),
+    {
+      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",
+    toDomPropsFromAttributes(node.attributes),
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderRow(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "row"),
+    "tr",
+    toDomPropsFromAttributes(node.attributes),
+    {
+      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 = {
+    ...toDomPropsFromAttributes(node.attributes),
+    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);
+  const children = renderChildren(node.children, components, footnoteState);
   return renderWithOverride(
     pickComponent(components, "heading"),
     `h${level}`,
@@ -132,6 +321,230 @@ function renderHeading(node, components, key) {
     children
   );
 }
+function renderMark(node, components, footnoteState, key, primary, alias) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, primary, alias),
+    "mark",
+    {},
+    {
+      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",
+    {},
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderSubscript(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "subscript"),
+    "sub",
+    {},
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderInsert(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "insert"),
+    "ins",
+    {},
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderDelete(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
+  return renderWithOverride(
+    pickComponent(components, "delete"),
+    "del",
+    {},
+    {
+      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 = react.createElement("sup", null, index);
+  return renderWithOverride(
+    pickComponent(components, "footnote_reference"),
+    "a",
+    {
+      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 = react.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",
+      {
+        id: `fn${index}`,
+        key: label
+      },
+      {
+        index,
+        label,
+        node: footnoteNode
+      },
+      label,
+      content
+    );
+  });
+  const ol = react.createElement("ol", null, items);
+  const sectionChildren = [react.createElement("hr", { key: "hr" }), react.createElement(react.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);
+  if (!Component) {
+    return react.createElement(react.Fragment, withKey({}, key), openQuote, children, closeQuote);
+  }
+  if (typeof Component === "string") {
+    return react.createElement(Component, withKey({}, key), openQuote, children, closeQuote);
+  }
+  return react.createElement(
+    Component,
+    withKey(
+      {
+        node
+      },
+      key
+    ),
+    openQuote,
+    children,
+    closeQuote
+  );
+}
+function renderSmartPunctuation(node, components, key) {
+  const value = toSmartPunctuation(node.type, node.text);
+  const Component = pickComponent(components, "smart_punctuation");
+  if (!Component) {
+    return value;
+  }
+  if (typeof Component === "string") {
+    return react.createElement(Component, withKey({}, key), value);
+  }
+  return react.createElement(
+    Component,
+    withKey(
+      {
+        kind: node.type,
+        node,
+        value
+      },
+      key
+    ),
+    value
+  );
+}
+function renderInlineMath(node, components, key) {
+  const value = node.text;
+  return renderWithOverride(
+    pickComponent(components, "inline_math"),
+    "span",
+    {
+      className: "math inline"
+    },
+    {
+      node,
+      value
+    },
+    key,
+    `\\(${value}\\)`
+  );
+}
+function renderDisplayMath(node, components, key) {
+  const value = node.text;
+  return renderWithOverride(
+    pickComponent(components, "display_math"),
+    "span",
+    {
+      className: "math display"
+    },
+    {
+      node,
+      value
+    },
+    key,
+    `\\[${value}\\]`
+  );
+}
 function renderCode(node, components, key, primary, alias) {
   const value = node.text;
   return renderWithOverride(
@@ -169,8 +582,8 @@ function renderCodeBlock(node, components, key) {
     fallbackChildren
   );
 }
-function renderLink(node, components, key) {
-  const children = renderChildren(node.children, components);
+function renderLink(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
   const href = node.destination;
   return renderWithOverride(
     pickComponent(components, "link"),
@@ -202,8 +615,8 @@ function renderImage(node, components, key) {
     key
   );
 }
-function renderOrderedList(node, components, key) {
-  const children = renderChildren(node.children, components);
+function renderOrderedList(node, components, footnoteState, key) {
+  const children = renderChildren(node.children, components, footnoteState);
   return renderWithOverride(
     pickComponent(components, "ordered_list"),
     "ol",
@@ -218,8 +631,8 @@ function renderOrderedList(node, components, key) {
     children
   );
 }
-function renderBlockQuote(node, components, key, primary, alias) {
-  const children = renderChildren(node.children, components);
+function renderBlockQuote(node, components, footnoteState, key, primary, alias) {
+  const children = renderChildren(node.children, components, footnoteState);
   return renderWithOverride(
     pickComponent(components, primary, alias),
     "blockquote",
@@ -283,13 +696,23 @@ 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 } = options;
+  const children = isParentNode(node) ? renderChildren(node.children, components, footnoteState) : 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"),
@@ -302,7 +725,7 @@ 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"),
@@ -325,6 +748,63 @@ function renderNode(node, options = {}) {
         key,
         children
       );
+    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 "footnote_reference":
+      return renderFootnoteReference(node, components, footnoteState, key);
+    case "footnote":
+      return renderWithOverride(
+        pickComponent(components, "footnote"),
+        "li",
+        {},
+        {
+          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 "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":
@@ -332,7 +812,7 @@ function renderNode(node, options = {}) {
     case "code_block":
       return renderCodeBlock(node, components, key);
     case "link":
-      return renderLink(node, components, key);
+      return renderLink(node, components, footnoteState, key);
     case "image":
       return renderImage(node, components, key);
     case "bullet_list":
@@ -347,7 +827,7 @@ function renderNode(node, options = {}) {
         children
       );
     case "ordered_list":
-      return renderOrderedList(node, components, key);
+      return renderOrderedList(node, components, footnoteState, key);
     case "list_item":
       return renderWithOverride(
         pickComponent(components, "list_item"),
@@ -360,9 +840,9 @@ function renderNode(node, options = {}) {
         children
       );
     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"),