xmlui 0.9.36 → 0.9.37

package/dist/scripts/src/components/Markdown/MarkdownNative.js

@@ -45,22 +45,11 @@ function PreTagComponent({ id, children, codeHighlighter }) {
     }
     return ((0, jsx_runtime_1.jsx)(CodeBlockNative_1.CodeBlock, { meta: highlighterResult.meta, textToCopy: highlighterResult.codeStr, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "codefence", syntaxHighlightClasses: highlighterResult.classNames, dangerouslySetInnerHTML: { __html: highlighterResult.cleanedHtmlStr } }) }));
 }
-exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, children, style, codeHighlighter, }) {
+exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, children, style, codeHighlighter, showHeadingAnchors = false, }) {
     if (typeof children !== "string") {
         return null;
     }
     children = removeIndents ? removeTextIndents(children) : children;
-    const renderHeading = (level, children) => {
-        if (typeof children === "string") {
-            const [headingLabel, anchorId] = getCustomAnchor(children);
-            if (anchorId) {
-                const currentPath = window.location.href.replace(/(?<!\/)#.*$/, "");
-                const href = `${currentPath}#${anchorId}`;
-                return ((0, jsx_runtime_1.jsxs)(HeadingNative_1.Heading, { level: level, id: anchorId, children: [headingLabel, (0, jsx_runtime_1.jsx)("a", { href: href, id: anchorId, "aria-label": "Permalink for this section", children: "#" })] }));
-            }
-        }
-        return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: level, children: children });
-    };
     return ((0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.markdownContent, style: Object.assign({}, style), children: (0, jsx_runtime_1.jsx)(react_markdown_1.MarkdownHooks, { remarkPlugins: [remark_gfm_1.default, CodeBlockNative_1.markdownCodeBlockParser], rehypePlugins: [rehype_raw_1.default], components: {
                 details(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
@@ -82,22 +71,22 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                     }
                 },
                 h1({ children }) {
-                    return renderHeading("h1", children);
+                    return ((0, jsx_runtime_1.jsx)(LinkAwareHeading, { level: "h1", showHeadingAnchors: showHeadingAnchors, children: children }));
                 },
                 h2({ children }) {
-                    return renderHeading("h2", children);
+                    return ((0, jsx_runtime_1.jsx)(LinkAwareHeading, { level: "h2", showHeadingAnchors: showHeadingAnchors, children: children }));
                 },
                 h3({ children }) {
-                    return renderHeading("h3", children);
+                    return ((0, jsx_runtime_1.jsx)(LinkAwareHeading, { level: "h3", showHeadingAnchors: showHeadingAnchors, children: children }));
                 },
                 h4({ children }) {
-                    return renderHeading("h4", children);
+                    return ((0, jsx_runtime_1.jsx)(LinkAwareHeading, { level: "h4", showHeadingAnchors: showHeadingAnchors, children: children }));
                 },
                 h5({ children }) {
-                    return renderHeading("h5", children);
+                    return ((0, jsx_runtime_1.jsx)(LinkAwareHeading, { level: "h5", showHeadingAnchors: showHeadingAnchors, children: children }));
                 },
                 h6({ children }) {
-                    return renderHeading("h6", children);
+                    return ((0, jsx_runtime_1.jsx)(LinkAwareHeading, { level: "h6", showHeadingAnchors: showHeadingAnchors, children: children }));
                 },
                 p({ id, children }) {
                     return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "markdown", children: children }));
@@ -177,35 +166,6 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                 },
             }, children: children }) }));
 });
-function removeTextIndents(input) {
-    if (!input) {
-        return "";
-    }
-    const lines = input.split("\n");
-    // Find the shortest starting whitespace length
-    const minIndent = lines.reduce((min, line) => {
-        const match = line.match(/^\s*/);
-        const indentLength = match ? match[0].length : 0;
-        return line.trim() ? Math.min(min, indentLength) : min;
-    }, Infinity);
-    // Remove the shortest starting whitespace length from each line
-    const trimmedLines = lines.map((line) => line.startsWith(" ".repeat(minIndent)) ? line.slice(minIndent) : line);
-    return trimmedLines.join("\n");
-}
-function getCustomAnchor(value) {
-    if (!value) {
-        return ["", ""];
-    }
-    // --- Match the pattern: "Heading text [#anchor]"
-    const match = value.match(/^(.*?)\s*\[#([^\]]+)\]$/);
-    if (match) {
-        const headingLabel = match[1].trim(); // Extract the heading text
-        const anchorId = match[2].trim(); // Extract the anchor ID
-        return [headingLabel, anchorId];
-    }
-    // If no match, return the full value as the heading label and an empty anchor ID
-    return [value.trim(), ""];
-}
 const HorizontalRule = () => {
     return (0, jsx_runtime_1.jsx)("hr", { className: Markdown_module_scss_1.default.horizontalRule });
 };
@@ -282,3 +242,105 @@ const OrderedList = ({ children, style }) => {
 const ListItem = ({ children, style }) => {
     return ((0, jsx_runtime_1.jsx)("li", { className: Markdown_module_scss_1.default.listItem, style: style, children: children }));
 };
+function LinkAwareHeading({ children, level, showHeadingAnchors }) {
+    let headingLabel = "";
+    let anchorId = "";
+    if (!children)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    if (typeof children === "string") {
+        [headingLabel, anchorId] = getCustomAnchor(children);
+        // At this point, the anchorId might still be empty
+    }
+    else if (Array.isArray(children)) {
+        if (children.length === 0)
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+        if (children.length === 1) {
+            headingLabel = children[0];
+        }
+        else {
+            headingLabel = children.slice(0, -1);
+            const last = children[children.length - 1];
+            // Check for explicit anchor at the end
+            if (typeof last === "string") {
+                const match = last.trim().match(/^\[#([^\]]+)\]$/);
+                if (match && match.length > 0) {
+                    anchorId = match[1];
+                }
+            }
+        }
+    }
+    else {
+        // Provided children are not a string or array but still valid React elements
+        // if it contains text, use it as the heading label
+        const headingContent = extractTextNodes(children);
+        if (!headingContent)
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+        headingLabel = children;
+    }
+    // Generate implicit anchor if not provided
+    if (!anchorId) {
+        anchorId = headingToAnchorLink(extractTextNodes(headingLabel));
+    }
+    const currentPath = window.location.href.replace(/(?<!\/)#.*$/, "");
+    const href = `${currentPath}#${anchorId}`;
+    return ((0, jsx_runtime_1.jsxs)(HeadingNative_1.Heading, { level: level, id: anchorId, children: [headingLabel, showHeadingAnchors && anchorId && (
+            // NOTE: Anchor is hidden from screen readers
+            // TODO: make sure this is a good idea
+            (0, jsx_runtime_1.jsx)("a", { href: href, id: anchorId, "aria-hidden": "true", children: "#" }))] }));
+}
+// --- Helper functions
+function removeTextIndents(input) {
+    if (!input) {
+        return "";
+    }
+    const lines = input.split("\n");
+    // Find the shortest starting whitespace length
+    const minIndent = lines.reduce((min, line) => {
+        const match = line.match(/^\s*/);
+        const indentLength = match ? match[0].length : 0;
+        return line.trim() ? Math.min(min, indentLength) : min;
+    }, Infinity);
+    // Remove the shortest starting whitespace length from each line
+    const trimmedLines = lines.map((line) => line.startsWith(" ".repeat(minIndent)) ? line.slice(minIndent) : line);
+    return trimmedLines.join("\n");
+}
+function getCustomAnchor(value) {
+    if (!value) {
+        return ["", ""];
+    }
+    // --- Match the pattern: "Heading text [#anchor]"
+    const match = value.match(/^(.*?)\s*\[#([^\]]+)\]$/);
+    if (match) {
+        const headingLabel = match[1].trim(); // Extract the heading text
+        const anchorId = match[2].trim(); // Extract the anchor ID
+        return [headingLabel, anchorId];
+    }
+    // If no match, return the full value as the heading label and an empty anchor ID
+    return [value.trim(), ""];
+}
+function headingToAnchorLink(rawStr) {
+    return (rawStr
+        .trim()
+        .toLocaleLowerCase()
+        // replace all non-alphanumeric characters with hyphens
+        .replaceAll(/[^A-Za-z0-9-]/g, "-")
+        // remove multiple hyphens
+        .replaceAll(/--+/g, "-")
+        // remove leading and trailing hyphens
+        .replace(/^-|-$/, "")
+        // remove backticks
+        .replace(/`/g, "")
+        // remove parentheses
+        .replace(/"|'/g, ""));
+}
+function extractTextNodes(node) {
+    if (typeof node === "string" || typeof node === "number")
+        return node.toString();
+    if (react_2.default.isValidElement(node) && node.props && node.props.children) {
+        if (Array.isArray(node.props.children)) {
+            return node.props.children.map(extractTextNodes).join("");
+        }
+        return extractTextNodes(node.props.children);
+    }
+    return "";
+}

package/dist/scripts/src/components/NavGroup/NavGroup.js

@@ -63,5 +63,5 @@ exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
 });
 exports.navGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavGroupMd, ({ node, extractValue, renderChild }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(NavGroupNative_1.NavGroup, { label: extractValue.asDisplayText(node.props.label), disabled: !extractValue.asOptionalBoolean((_a = node.props.enabled) !== null && _a !== void 0 ? _a : true), to: extractValue.asOptionalString(node.props.to), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, initiallyExpanded: extractValue.asBoolean(node.props.initiallyExpanded), renderChild: renderChild, iconHorizontalExpanded: extractValue.asOptionalString(node.props.iconHorizontalExpanded), iconVerticalExpanded: extractValue.asOptionalString(node.props.iconVerticalExpanded), iconHorizontalCollapsed: extractValue.asOptionalString(node.props.iconHorizontalCollapsed), iconVerticalCollapsed: extractValue.asOptionalString(node.props.iconVerticalCollapsed) }));
+    return ((0, jsx_runtime_1.jsx)(NavGroupNative_1.NavGroup, { label: extractValue.asDisplayText(node.props.label), disabled: !extractValue.asOptionalBoolean((_a = node.props.enabled) !== null && _a !== void 0 ? _a : true), to: extractValue.asOptionalString(node.props.to), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, initiallyExpanded: extractValue.asOptionalBoolean(node.props.initiallyExpanded), renderChild: renderChild, iconHorizontalExpanded: extractValue.asOptionalString(node.props.iconHorizontalExpanded), iconVerticalExpanded: extractValue.asOptionalString(node.props.iconVerticalExpanded), iconHorizontalCollapsed: extractValue.asOptionalString(node.props.iconHorizontalCollapsed), iconVerticalCollapsed: extractValue.asOptionalString(node.props.iconVerticalCollapsed) }));
 });

package/dist/scripts/src/components/Text/Text.js

@@ -63,6 +63,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`textColor-${COMP}`]: "$textColor-primary",
         [`fontFamily-${COMP}`]: "$fontFamily",
         [`fontWeight-${COMP}`]: "$fontWeight-normal",
+        [`fontSize-${COMP}-codefence`]: "$fontSize-small",
         [`fontFamily-${COMP}-code`]: "$fontFamily-monospace",
         [`fontSize-${COMP}-code`]: "$fontSize-small",
         [`borderWidth-${COMP}-code`]: "1px",