@oxide/design-system 6.3.0 → 6.4.1-canary.dca2986

package/dist/components/src/asciidoc/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _oxide_react_asciidoc from '@oxide/react-asciidoc';
-import { DocumentSection, Block, DocumentBlock } from '@oxide/react-asciidoc';
+import { DocumentSection, Block, DocumentBlock, InlineOverrides } from '@oxide/react-asciidoc';
 import * as _asciidoctor_core from '@asciidoctor/core';
-import { Document, Registry, Html5Converter, Block as Block$1 } from '@asciidoctor/core';
+import { Document, Registry } from '@asciidoctor/core';
 
 declare function useIntersectionObserver(elements: Element[], callback: IntersectionObserverCallback, options: IntersectionObserverInit): IntersectionObserver | null;
 declare function useActiveSectionTracking(initialSections: Element[], onSectionChange: (element: Element) => void, debug?: boolean): {
@@ -35,6 +35,7 @@ declare const attrs: {
     sectlinks: string;
     stem: string;
     stylesheet: boolean;
+    icons: string;
 };
 declare const loadAsciidoctor: ({ extensions, }: {
     extensions?: ((this: Registry) => void)[];
@@ -63,10 +64,19 @@ declare const AsciiDocBlocks: {
  * '/<wbr/>path/<wbr/>to/<wbr/>long/<wbr/>file.txt'
  */
 declare const renderWithBreaks: (text: string) => string;
-declare class InlineConverter {
-    baseConverter: Html5Converter;
-    constructor();
-    convert(node: Block$1, transform: string): string;
-}
+/**
+ * Inline-level overrides for the renderer. Pass these to `<Asciidoc>` as
+ * `options.inlineOverrides` to apply our customisations to inline content:
+ *
+ *   <Asciidoc document={doc} options={{ overrides: AsciiDocBlocks, inlineOverrides }} />
+ *
+ * The only customisation today is inserting `<wbr/>` break opportunities into
+ * inline monospaced (`code`) spans so long paths and URLs wrap nicely. Every
+ * other quoted subtype is rendered exactly as the renderer would by default —
+ * we round-trip the node through `inlineHtml` (the renderer's own serialiser)
+ * and `parse` it back into React elements, so there's no risk of drifting from
+ * the stock output.
+ */
+declare const inlineOverrides: InlineOverrides;
 
-export { AsciiDocBlocks, DesktopOutline, InlineConverter, SmallScreenOutline, attrs, handleDocument, highlight, loadAsciidoctor, renderWithBreaks, useActiveSectionTracking, useDelegatedReactRouterLinks, useIntersectionObserver };
+export { AsciiDocBlocks, DesktopOutline, SmallScreenOutline, attrs, handleDocument, highlight, inlineOverrides, loadAsciidoctor, renderWithBreaks, useActiveSectionTracking, useDelegatedReactRouterLinks, useIntersectionObserver };

package/dist/components/src/asciidoc/index.js

@@ -7,11 +7,14 @@ import {
 } from "../../../chunk-H5ZEQGTH.js";
 
 // components/src/asciidoc/index.tsx
-import asciidoctor2 from "@asciidoctor/core";
-import { Content as Content4 } from "@oxide/react-asciidoc";
+import {
+  Content as Content4,
+  inlineHtml,
+  parse as parse3
+} from "@oxide/react-asciidoc";
 
 // components/src/asciidoc/Admonition.tsx
-import { Content, parse } from "@oxide/react-asciidoc";
+import { Content, RenderInline } from "@oxide/react-asciidoc";
 import { jsx, jsxs } from "react/jsx-runtime";
 var themeForAdmonition = {
   note: "green-theme",
@@ -36,8 +39,8 @@ var Admonition = ({ node }) => {
     /* @__PURE__ */ jsxs("div", { className: "admonition-content content", children: [
       /* @__PURE__ */ jsx("div", { children: titleCase(attrs2.name.toString()) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        node.title && /* @__PURE__ */ jsx("div", { className: "admonition-title", children: node.title }),
-        node.content && parse(node.content),
+        node.titleInlines && /* @__PURE__ */ jsx("div", { className: "admonition-title", children: /* @__PURE__ */ jsx(RenderInline, { nodes: node.titleInlines }) }),
+        node.inlines && /* @__PURE__ */ jsx(RenderInline, { nodes: node.inlines }),
         /* @__PURE__ */ jsx(Content, { blocks: node.blocks })
       ] })
     ] })
@@ -84,20 +87,20 @@ var Warning12 = ({ className }) => /* @__PURE__ */ jsx(
 var Admonition_default = Admonition;
 
 // components/src/asciidoc/Section.tsx
-import { Content as Content2, parse as parse2 } from "@oxide/react-asciidoc";
+import { Content as Content2, parse, RenderInline as RenderInline2 } from "@oxide/react-asciidoc";
 import cn from "classnames";
 import { createElement } from "react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var stripAnchors = (str) => str.replace(/<a[^>]*>(.*?)<\/a>/gi, "$1");
 var Section = ({ node }) => {
   const level = node.level;
   let title = "";
   let sectNum = node.num;
   sectNum = sectNum && sectNum[0] === "." ? "" : sectNum;
+  const titleContent = node.hasCaption ? parse(node.title) : /* @__PURE__ */ jsx2(RenderInline2, { nodes: node.titleInlines });
   title = /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2("span", { className: "anchor", id: node.id || "", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs2("a", { className: "link group", href: `#${node.id}`, children: [
-      parse2(stripAnchors(node.title)),
+      titleContent,
       /* @__PURE__ */ jsx2(Link16Icon_default, { className: "text-accent-secondary ml-2 hidden group-hover:inline-block" })
     ] })
   ] });
@@ -106,10 +109,15 @@ var Section = ({ node }) => {
       /* @__PURE__ */ jsx2("h1", { className: cn("sect0", node.role), "data-sectnum": sectNum, children: title }),
       /* @__PURE__ */ jsx2(Content2, { blocks: node.blocks })
     ] });
+  } else if (level === 1) {
+    return /* @__PURE__ */ jsxs2("div", { className: cn("sect1", node.role), children: [
+      createElement("h2", { "data-sectnum": sectNum }, title),
+      /* @__PURE__ */ jsx2("div", { className: "sectionbody", children: /* @__PURE__ */ jsx2(Content2, { blocks: node.blocks }) })
+    ] });
   } else {
     return /* @__PURE__ */ jsxs2("div", { className: cn(`sect${level}`, node.role), children: [
       createElement(`h${level + 1}`, { "data-sectnum": sectNum }, title),
-      /* @__PURE__ */ jsx2("div", { className: "sectionbody", children: /* @__PURE__ */ jsx2(Content2, { blocks: node.blocks }) })
+      /* @__PURE__ */ jsx2(Content2, { blocks: node.blocks })
     ] });
   }
 };
@@ -122,11 +130,12 @@ var Table = ({ node }) => /* @__PURE__ */ jsx3("div", { className: "table-wrappe
 var Table_default = Table;
 
 // components/src/asciidoc/TableOfContents.tsx
-import { parse as parse3 } from "@oxide/react-asciidoc";
+import { parse as parse2 } from "@oxide/react-asciidoc";
 import * as Accordion from "@radix-ui/react-accordion";
 import cn2 from "classnames";
 import { Fragment as Fragment2, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var dropAnchors = (html) => html.includes("<a") ? html.replace(/<(?:a\b[^>]*|\/a)>/g, "") : html;
 function useIntersectionObserver(elements, callback, options) {
   const [observer, setObserver] = useState(null);
   useEffect(() => {
@@ -300,7 +309,7 @@ var DesktopOutline = ({
               style: {
                 paddingLeft: `${0.5 + item.level * 0.5}rem`
               },
-              children: parse3(stripAnchors(item.title))
+              children: parse2(dropAnchors(item.title))
             }
           )
         }
@@ -338,7 +347,7 @@ var SmallScreenOutline = ({
               style: {
                 paddingLeft: `${0.5 + item.level * 0.5}rem`
               },
-              children: parse3(stripAnchors(item.title))
+              children: parse2(dropAnchors(item.title))
             }
           )
         }
@@ -403,6 +412,7 @@ function useDelegatedReactRouterLinks(navigate, nodeRef, key) {
 // components/src/asciidoc/util.ts
 import asciidoctor from "@asciidoctor/core";
 import {
+  Inline,
   prepareDocument,
   processDocument
 } from "@oxide/react-asciidoc";
@@ -2005,18 +2015,15 @@ var oxide_syntax_default = {
 };
 
 // components/src/asciidoc/util.ts
-var highlighter = null;
+var highlighterPromise = null;
 var customLanguages = ["oxql", "p4"];
 var supportedLanguages = [...Object.keys(bundledLanguages), ...customLanguages];
-async function getHighlighter() {
-  if (!highlighter) {
+function getHighlighter() {
+  if (!highlighterPromise) {
     const langs = [{ ...oxql_tmLanguage_default }, { ...p4_tmLanguage_default }];
-    highlighter = await createHighlighter({
-      themes: [oxide_syntax_default],
-      langs
-    });
+    highlighterPromise = createHighlighter({ themes: [oxide_syntax_default], langs });
   }
-  return highlighter;
+  return highlighterPromise;
 }
 async function highlightCode(code, lang, { inline = false } = {}) {
   const h = await getHighlighter();
@@ -2033,20 +2040,26 @@ async function highlightCode(code, lang, { inline = false } = {}) {
 var highlight = async (block) => {
   if (block.type === "listing") {
     const literalBlock = block;
-    if (!literalBlock.content) {
+    if (typeof literalBlock.source !== "string") {
       return block;
     }
-    const calloutRegex = /<i class="conum" data-value="\d+"><\/i>/g;
+    const lineComment = literalBlock.attributes["line-comment"];
+    const content = Inline.subCalloutsRaw(
+      literalBlock.source,
+      true,
+      lineComment !== void 0 ? String(lineComment) : void 0
+    );
+    const calloutRegex = /<i class="conum" data-value="\d+"><\/i>(?:<b>\(\d+\)<\/b>)?/g;
     const callouts = [];
-    const placeholderContent = literalBlock.content.replace(calloutRegex, (match) => {
+    const placeholderContent = content.replace(calloutRegex, (match) => {
       callouts.push(match);
-      return `__CALLOUT_PLACEHOLDER_${callouts.length - 1}__`;
+      return `CALLOUTPLACEHOLDER${callouts.length - 1}END`;
     });
     if (!literalBlock.language) {
       return {
         ...block,
-        content: placeholderContent.replace(
-          /__CALLOUT_PLACEHOLDER_(\d+)__/g,
+        content: Inline.subSpecialchars(placeholderContent).replace(
+          /CALLOUTPLACEHOLDER(\d+)END/g,
           (_, index) => callouts[parseInt(index)]
         )
       };
@@ -2057,7 +2070,7 @@ var highlight = async (block) => {
       { inline: true }
     );
     const restoredContent = highlightedContent.replace(
-      /__CALLOUT_PLACEHOLDER_(\d+)__/g,
+      /CALLOUTPLACEHOLDER(\d+)END/g,
       (_, index) => callouts[parseInt(index)]
     );
     return {
@@ -2070,42 +2083,23 @@ var highlight = async (block) => {
 var attrs = {
   sectlinks: "true",
   stem: "latexmath",
-  stylesheet: false
+  stylesheet: false,
+  icons: "font"
 };
 var loadAsciidoctor = ({
   extensions = []
 }) => {
-  const ad2 = asciidoctor();
-  class InlineConverter2 {
-    baseConverter;
-    constructor() {
-      this.baseConverter = new ad2.Html5Converter();
-    }
-    convert(node, transform) {
-      switch (node.getNodeName()) {
-        case "inline_callout":
-          return convertInlineCallout(node);
-        // We know this is always inline
-        default:
-          break;
-      }
-      return this.baseConverter.convert(node, transform);
-    }
-  }
-  extensions.forEach((extension) => ad2.Extensions.register(extension));
-  ad2.ConverterFactory.register(new InlineConverter2(), ["html5"]);
-  return ad2;
+  const ad = asciidoctor();
+  extensions.forEach((extension) => ad.Extensions.register(extension));
+  return ad;
 };
-function convertInlineCallout(node) {
-  return `<i class="conum" data-value="${node.getText()}"></i>`;
-}
 var handleDocument = async (document) => {
   const doc = prepareDocument(document);
   return await processDocument(doc, highlight);
 };
 
 // components/src/asciidoc/index.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
 var MinimalDocument = ({ document }) => /* @__PURE__ */ jsx5("div", { id: "content", className: "asciidoc-body w-full", children: /* @__PURE__ */ jsx5(Content4, { blocks: document.blocks }) });
 var AsciiDocBlocks = {
   Admonition: Admonition_default,
@@ -2121,74 +2115,23 @@ var renderWithBreaks = (text) => {
     return segment.replace(/(?:^|(?<=\S))\/(?=\S)/g, "/<wbr/>");
   }).join("");
 };
-var QUOTE_TAGS = {
-  "monospaced": ["<code>", "</code>", true],
-  "emphasis": ["<em>", "</em>", true],
-  "strong": ["<strong>", "</strong>", true],
-  "double": ["&#8220;", "&#8221;"],
-  "single": ["&#8216;", "&#8217;"],
-  "mark": ["<mark>", "</mark>", true],
-  "superscript": ["<sup>", "</sup>", true],
-  "subscript": ["<sub>", "</sub>", true],
-  "unquoted": ["<span>", "</span>", true],
-  "asciimath": ["\\$", "\\$"],
-  "latexmath": ["\\(", "\\)"]
-};
-var chop = (str) => str.substring(0, str.length - 1);
-var convertInlineQuoted = (node) => {
-  const type = node.getType();
-  const quoteTag = QUOTE_TAGS[type];
-  const [open, close, tag] = quoteTag || ["", ""];
-  let text = node.getText();
-  if (type === "monospaced") {
-    text = renderWithBreaks(text);
-  }
-  const id = node.getId();
-  const role = node.getRole();
-  const idAttr = id ? `id="${id}"` : "";
-  const classAttr = role ? `class="${role}"` : "";
-  const attrs2 = `${idAttr} ${classAttr}`;
-  if (id || role) {
-    if (tag) {
-      return `${chop(open)} ${attrs2}>${text}${close}`;
-    } else {
-      return `<span ${attrs2}>${open}${text}${close}</span>`;
-    }
-  } else {
-    return `${open}${text}${close}`;
-  }
-};
-function convertInlineCallout2(node) {
-  return `<i class="conum" data-value="${node.getText()}"></i>`;
-}
-var ad = asciidoctor2();
-var InlineConverter = class {
-  baseConverter;
-  constructor() {
-    this.baseConverter = new ad.Html5Converter();
-  }
-  convert(node, transform) {
-    switch (node.getNodeName()) {
-      case "inline_quoted":
-        return convertInlineQuoted(node);
-      // We know this is always inline
-      case "inline_callout":
-        return convertInlineCallout2(node);
-      // We know this is always inline
-      default:
-        break;
+var inlineOverrides = {
+  quoted: ({ node }) => {
+    let { __html } = inlineHtml([node]);
+    if (node.subtype === "monospaced") {
+      __html = renderWithBreaks(__html);
     }
-    return this.baseConverter.convert(node, transform);
+    return /* @__PURE__ */ jsx5(Fragment3, { children: parse3(__html) });
   }
 };
 export {
   AsciiDocBlocks,
   DesktopOutline,
-  InlineConverter,
   SmallScreenOutline,
   attrs,
   handleDocument,
   highlight,
+  inlineOverrides,
   loadAsciidoctor,
   renderWithBreaks,
   useActiveSectionTracking,