xmlui 0.9.43 → 0.9.45

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.43",
+    "version": "0.9.45",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -105,6 +105,7 @@
         "vite-plugin-svgr": "4.2.0",
         "vscode-languageserver": "^9.0.1",
         "vscode-languageserver-textdocument": "^1.0.11",
+        "xml-formatter": "^3.6.6",
         "yargs": "17.7.2"
     },
     "devDependencies": {
@@ -148,6 +149,9 @@
         "@rollup/rollup-linux-x64-gnu": "4.20.0",
         "@rollup/rollup-win32-x64-msvc": "4.20.0"
     },
+    "resolutions": {
+        "@radix-ui/react-dismissable-layer": "1.1.10"
+    },
     "files": [
         "dist",
         "src/styles"

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

@@ -13,6 +13,10 @@ const metadata_helpers_1 = require("../../components/metadata-helpers");
 const AppLayoutContext_1 = require("./AppLayoutContext");
 const AppNative_1 = require("./AppNative");
 const react_1 = require("react");
+const IndexerContext_1 = require("./IndexerContext");
+const react_dom_1 = require("react-dom");
+const AppContext_1 = require("../../components-core/AppContext");
+const SearchContext_1 = require("./SearchContext");
 const COMP = "App";
 exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
@@ -75,7 +79,7 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(App_module_scss_1.default.themeVars),
     themeVarDescriptions: {
-        "maxWidth‑content‑App": "This theme variable defines the maximum width of the main content. If the main " +
+        "maxWidth-content-App": "This theme variable defines the maximum width of the main content. If the main " +
             "content is broader, the engine adds margins to keep the expected maximum size.",
         "boxShadow‑header‑App": "This theme variable sets the shadow of the app's header section.",
         "boxShadow‑navPanel‑App": "This theme variable sets the shadow of the app's navigation panel section " +
@@ -153,11 +157,11 @@ function AppNode({ node, extractValue, renderChild, style, lookupEventHandler })
         const cache = new Map();
         return (searchLabel, hierarchy) => {
             // Create a cache key (could be improved with a better serialization of hierarchy)
-            const cacheKey = searchLabel + '_' + hierarchy.length;
+            const cacheKey = searchLabel + "_" + hierarchy.length;
             if (cache.has(cacheKey)) {
                 return cache.get(cacheKey);
             }
-            const result = hierarchy.some(node => {
+            const result = hierarchy.some((node) => {
                 if (node.label === searchLabel) {
                     return true;
                 }
@@ -174,11 +178,7 @@ function AppNode({ node, extractValue, renderChild, style, lookupEventHandler })
     const findOrCreateNavGroup = (0, react_1.useMemo)(() => {
         return (navItems, groupLabel) => {
             // --- Check if a NavGroup with this label already exists
-            const existingGroup = navItems.find(item => {
-                var _a;
-                return item.type === "NavGroup" &&
-                    ((_a = item.props) === null || _a === void 0 ? void 0 : _a.label) === groupLabel;
-            });
+            const existingGroup = navItems.find((item) => { var _a; return item.type === "NavGroup" && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.label) === groupLabel; });
             if (existingGroup) {
                 return existingGroup;
             }
@@ -186,15 +186,15 @@ function AppNode({ node, extractValue, renderChild, style, lookupEventHandler })
             const newGroup = {
                 type: "NavGroup",
                 props: {
-                    label: groupLabel
+                    label: groupLabel,
                 },
-                children: []
+                children: [],
             };
             navItems.push(newGroup);
             return newGroup;
         };
     }, []);
-    const { AppHeader, Footer, NavPanel, restChildren } = (0, react_1.useMemo)(() => {
+    const { AppHeader, Footer, NavPanel, Pages, restChildren } = (0, react_1.useMemo)(() => {
         var _a;
         let AppHeader;
         let Footer;
@@ -254,7 +254,7 @@ function AppNode({ node, extractValue, renderChild, style, lookupEventHandler })
                 NavPanel = {
                     type: "NavPanel",
                     props: {},
-                    children: extraNavs
+                    children: extraNavs,
                 };
             }
         }
@@ -262,9 +262,16 @@ function AppNode({ node, extractValue, renderChild, style, lookupEventHandler })
             AppHeader,
             Footer,
             NavPanel,
+            Pages,
             restChildren,
         };
-    }, [node.children, parseHierarchyLabels, labelExistsInHierarchy, findOrCreateNavGroup]);
+    }, [
+        node.children,
+        extractValue,
+        parseHierarchyLabels,
+        labelExistsInHierarchy,
+        findOrCreateNavGroup,
+    ]);
     // --- Memoize all app props to prevent unnecessary re-renders
     const appProps = (0, react_1.useMemo)(() => ({
         scrollWholePage: extractValue.asOptionalBoolean(node.props.scrollWholePage, true),
@@ -278,7 +285,7 @@ function AppNode({ node, extractValue, renderChild, style, lookupEventHandler })
         logoDark: extractValue(node.props["logo-dark"]),
         logoLight: extractValue(node.props["logo-light"]),
         defaultTone: extractValue(node.props.defaultTone),
-        defaultTheme: extractValue(node.props.defaultTheme)
+        defaultTheme: extractValue(node.props.defaultTheme),
     }), [
         extractValue,
         layoutType,
@@ -292,14 +299,124 @@ function AppNode({ node, extractValue, renderChild, style, lookupEventHandler })
         node.props["logo-light"],
         node.props.defaultTone,
         node.props.defaultTheme,
-        style
+        style,
     ]);
     // Memoize the rendered children to prevent unnecessary re-renders
     const renderedHeader = (0, react_1.useMemo)(() => renderChild(AppHeader), [AppHeader, renderChild]);
     const renderedFooter = (0, react_1.useMemo)(() => renderChild(Footer), [Footer, renderChild]);
     const renderedNavPanel = (0, react_1.useMemo)(() => renderChild(NavPanel), [NavPanel, renderChild]);
     const renderedContent = (0, react_1.useMemo)(() => renderChild(restChildren), [restChildren, renderChild]);
-    return ((0, jsx_runtime_1.jsx)(AppNative_1.App, Object.assign({}, appProps, { header: renderedHeader, footer: renderedFooter, navPanel: renderedNavPanel, navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, children: renderedContent })));
+    return ((0, jsx_runtime_1.jsxs)(AppNative_1.App, Object.assign({}, appProps, { header: renderedHeader, footer: renderedFooter, navPanel: renderedNavPanel, navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, children: [renderedContent, (0, jsx_runtime_1.jsx)(SearchIndexCollector, { Pages: Pages, renderChild: renderChild })] })));
+}
+const HIDDEN_STYLE = {
+    display: "none",
+};
+function SearchIndexCollector({ Pages, renderChild }) {
+    var _a, _b;
+    const appContext = (0, AppContext_1.useAppContext)();
+    const indexerContextValue = (0, react_1.useMemo)(() => ({ indexing: true }), []);
+    const setIndexing = (0, SearchContext_1.useSearchContextSetIndexing)();
+    const [isClient, setIsClient] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsClient(true); // Ensure document.body is available
+        return () => {
+            setIndexing(false);
+        };
+    }, [setIndexing]);
+    // 1. Memoize the list of pages to be indexed
+    const pagesToIndex = (0, react_1.useMemo)(() => {
+        var _a;
+        return (((_a = Pages === null || Pages === void 0 ? void 0 : Pages.children) === null || _a === void 0 ? void 0 : _a.filter((child) => {
+            var _a;
+            return child.type === "Page" && // Ensure 'Page' matches your actual component type name
+                ((_a = child.props) === null || _a === void 0 ? void 0 : _a.url) && // Ensure URL exists
+                !child.props.url.includes("*") &&
+                !child.props.url.includes(":");
+        })) || []);
+    }, [Pages === null || Pages === void 0 ? void 0 : Pages.children]);
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [isDoneIndexing, setIsDoneIndexing] = (0, react_1.useState)(false);
+    const [, startTransitionParent] = (0, react_1.useTransition)(); // Transition for parent updates
+    const handlePageIndexed = (0, react_1.useCallback)(() => {
+        startTransitionParent(() => {
+            // Transition the update to the next page
+            setCurrentIndex((prevIndex) => {
+                const nextIndex = prevIndex + 1;
+                if (nextIndex >= pagesToIndex.length) {
+                    // console.log("All pages indexed.");
+                    setIsDoneIndexing(true); // All pages processed
+                }
+                return nextIndex;
+            });
+        });
+    }, [pagesToIndex.length]); // Recreate if the total number of pages changes
+    if (!((_a = appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.searchIndexEnabled) || isDoneIndexing || !isClient) {
+        return null;
+    }
+    const currentPageToProcess = pagesToIndex[currentIndex];
+    if (!currentPageToProcess) {
+        // This can happen if pagesToIndex is empty or currentIndex went out of bounds unexpectedly.
+        // Setting isDoneIndexing if pagesToIndex is empty initially.
+        if (pagesToIndex.length === 0 && currentIndex === 0 && !isDoneIndexing) {
+            setIsDoneIndexing(true);
+        }
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(IndexerContext_1.IndexerContext.Provider, { value: indexerContextValue, children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { style: HIDDEN_STYLE, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(PageIndexer, { Page: currentPageToProcess, renderChild: renderChild, onIndexed: handlePageIndexed }, ((_b = currentPageToProcess.props) === null || _b === void 0 ? void 0 : _b.url) || currentIndex) }), document.body) }));
+}
+function PageIndexer({ Page, renderChild, onIndexed, }) {
+    var _a, _b;
+    const contentRef = (0, react_1.useRef)(null);
+    const pageUrl = ((_a = Page.props) === null || _a === void 0 ? void 0 : _a.url) || "";
+    const navLabel = ((_b = Page.props) === null || _b === void 0 ? void 0 : _b.navLabel) || "";
+    const searchContextUpdater = (0, SearchContext_1.useSearchContextUpdater)();
+    const [isContentRendered, setIsContentRendered] = (0, react_1.useState)(false);
+    const [isCollected, setIsCollected] = (0, react_1.useState)(false);
+    const [isProcessing, startTransition] = (0, react_1.useTransition)();
+    // Effect 1: Schedule the rendering of the Page's children (low priority)
+    (0, react_1.useEffect)(() => {
+        // console.log(`PageIndexer (${pageUrl}): Scheduling content render.`);
+        startTransition(() => {
+            setIsContentRendered(true); // This will trigger rendering of Page.children
+        });
+    }, [pageUrl]); // Re-run if the Page prop itself changes identity (due to key in parent)
+    // Effect 2: Extract content once Page.children is rendered and ref is available (low priority)
+    (0, react_1.useEffect)(() => {
+        if (isContentRendered && contentRef.current && !isCollected && !isProcessing) {
+            // console.log(`PageIndexer (${pageUrl}): Content rendered, scheduling extraction.`);
+            startTransition(() => {
+                // console.log(`PageIndexer (${pageUrl}): Starting extraction...`);
+                const currentContent = contentRef.current; // Capture ref value
+                if (!currentContent)
+                    return;
+                const clone = currentContent.cloneNode(true);
+                const elementsToRemove = clone.querySelectorAll("style, script");
+                elementsToRemove.forEach((el) => el.remove());
+                const textContent = (clone.textContent || "").trim().replace(/\s+/g, " ");
+                const titleElement = currentContent.querySelector("h1");
+                const title = titleElement ? titleElement.innerText : (navLabel || pageUrl.split("/").pop() || pageUrl);
+                const entry = {
+                    title: title,
+                    content: textContent,
+                    path: pageUrl,
+                };
+                searchContextUpdater(entry);
+                // console.log(`PageIndexer (${pageUrl}): Extraction complete, signaling parent.`);
+                onIndexed(); // Signal completion to parent
+                setIsCollected(true); // Mark as collected
+            });
+        }
+    }, [isContentRendered, pageUrl, searchContextUpdater, onIndexed, isCollected, isProcessing, navLabel]); // Ensure all dependencies are listed
+    // If this PageIndexer instance's work is done, or content not yet rendered, render nothing.
+    // The parent (SearchIndexCollector) will unmount this and mount the next one.
+    if (isCollected || !isContentRendered) {
+        // console.log(`PageIndexer (${pageUrl}): Null render (isCollected: ${isCollected}, isContentRendered: ${isContentRendered})`);
+        return null;
+    }
+    // This part renders when isContentRendered is true and isCollected is false.
+    // The content needs to be in the DOM for contentRef.current to be populated.
+    // console.log(`PageIndexer (${pageUrl}): Rendering content for ref population.`);
+    return (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: renderChild(Page.children) });
 }
 exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
     return ((0, jsx_runtime_1.jsx)(AppNode, { node: node, renderChild: renderChild, extractValue: extractValue, style: layoutCss, lookupEventHandler: lookupEventHandler }));
@@ -323,7 +440,7 @@ function processNavItems(items, parentHierarchy, extractValue) {
                 parentHierarchy.push({
                     type: "NavLink",
                     label: labelValue,
-                    path: itemPath ? extractValue(itemPath) : undefined
+                    path: itemPath ? extractValue(itemPath) : undefined,
                 });
             }
         }
@@ -336,7 +453,7 @@ function processNavItems(items, parentHierarchy, extractValue) {
                 const groupNode = {
                     type: "NavGroup",
                     label: labelValue,
-                    children: []
+                    children: [],
                 };
                 // --- Add to parent hierarchy
                 parentHierarchy.push(groupNode);
@@ -387,8 +504,8 @@ function extractNavPanelFromPages(Pages, NavPanel, processedNavRef, extractValue
                         type: "NavLink",
                         props: {
                             label: hierarchyLabels[0],
-                            to: url
-                        }
+                            to: url,
+                        },
                     });
                 }
                 return;
@@ -409,18 +526,14 @@ function extractNavPanelFromPages(Pages, NavPanel, processedNavRef, extractValue
             // --- Add the leaf NavLink to the deepest NavGroup
             const leafLabel = hierarchyLabels[hierarchyLabels.length - 1];
             // --- Check if this NavLink already exists at this level
-            const existingNavLink = currentLevel.find(item => {
-                var _a;
-                return item.type === "NavLink" &&
-                    ((_a = item.props) === null || _a === void 0 ? void 0 : _a.label) === leafLabel;
-            });
+            const existingNavLink = currentLevel.find((item) => { var _a; return item.type === "NavLink" && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.label) === leafLabel; });
             if (!existingNavLink) {
                 currentLevel.push({
                     type: "NavLink",
                     props: {
                         label: leafLabel,
-                        to: url
-                    }
+                        to: url,
+                    },
                 });
             }
         }

package/dist/scripts/src/components/App/AppNative.js

@@ -31,6 +31,7 @@ const css_utils_1 = require("../../components-core/utils/css-utils");
 const Sheet_1 = require("../../components/App/Sheet");
 const AppHeaderNative_1 = require("../../components/AppHeader/AppHeaderNative");
 const AppLayoutContext_1 = require("./AppLayoutContext");
+const SearchContext_1 = require("./SearchContext");
 function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollbarGutters = false, onReady = lodash_es_1.noop, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, renderChild, name, }) {
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
@@ -227,7 +228,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     const handleOpenChange = (0, react_1.useCallback)((open) => {
         setDrawerVisible(open);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedHelmet, (0, jsx_runtime_1.jsxs)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: handleOpenChange, children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", children: memoizedNavPanelInDrawer }) }), content] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedHelmet, (0, jsx_runtime_1.jsxs)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: handleOpenChange, children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", children: memoizedNavPanelInDrawer }) }), (0, jsx_runtime_1.jsx)(SearchContext_1.SearchContextProvider, { children: content })] })] }));
 }
 function getAppLayoutOrientation(appLayout) {
     switch (appLayout) {

package/dist/scripts/src/components/App/IndexerContext.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndexerContext = void 0;
+exports.useIndexerContext = useIndexerContext;
+const react_1 = __importStar(require("react"));
+exports.IndexerContext = react_1.default.createContext({
+    indexing: false
+});
+function useIndexerContext() {
+    return (0, react_1.useContext)(exports.IndexerContext);
+}

package/dist/scripts/src/components/App/SearchContext.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchContextSetIndexing = exports.useSearchContextContent = exports.useSearchContextUpdater = exports.SearchContextProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_context_selector_1 = require("use-context-selector");
+const react_1 = require("react");
+const constants_1 = require("../../components-core/constants");
+const SearchContext = (0, use_context_selector_1.createContext)(null);
+const SearchContextProvider = ({ children }) => {
+    const [content, setContent] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
+    const [isIndexing, setIsIndexing] = (0, react_1.useState)(true);
+    const storeContent = (0, react_1.useCallback)((entry) => {
+        setContent((prevContent) => (Object.assign(Object.assign({}, prevContent), { [entry.path]: entry })));
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({
+        content,
+        storeContent,
+        isIndexing,
+        setIsIndexing
+    }), [content, isIndexing, storeContent]);
+    return (0, jsx_runtime_1.jsx)(SearchContext.Provider, { value: value, children: children });
+};
+exports.SearchContextProvider = SearchContextProvider;
+const useSearchContextUpdater = () => {
+    return (0, use_context_selector_1.useContextSelector)(SearchContext, (value) => value.storeContent);
+};
+exports.useSearchContextUpdater = useSearchContextUpdater;
+const useSearchContextContent = () => {
+    return (0, use_context_selector_1.useContextSelector)(SearchContext, (value) => value.content);
+};
+exports.useSearchContextContent = useSearchContextContent;
+const useSearchContextSetIndexing = () => {
+    return (0, use_context_selector_1.useContextSelector)(SearchContext, (value) => value.setIsIndexing);
+};
+exports.useSearchContextSetIndexing = useSearchContextSetIndexing;

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

@@ -24,6 +24,7 @@ exports.CodeBlockMd = (0, ComponentDefs_1.createMetadata)({
         "backgroundColor-CodeBlock-highlightRow": "rgba($color-primary-200-rgb, .25)",
         "backgroundColor-CodeBlock-highlightString": "rgba($color-primary-200-rgb, .5)",
         "borderRadius-CodeBlock": "$space-2",
+        "borderColor-CodeBlock-highlightString-emphasis": "$color-attention",
         dark: {
             "backgroundColor-CodeBlock-header": "$color-surface-200",
             "backgroundColor-CodeBlock": "$color-surface-50",

package/dist/scripts/src/components/CodeBlock/CodeBlockNative.js

@@ -17,9 +17,9 @@ const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
 const unist_util_visit_1 = require("unist-util-visit");
 function CodeBlock({ children, meta, textToCopy, style }) {
     if (!meta) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: children }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: children }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyWrapper, children: [children, (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "outlined", themeColor: "primary", size: "sm", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: [children, (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "outlined", themeColor: "primary", size: "sm", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
                                 if (!textToCopy)
                                     return;
                                 navigator.clipboard.writeText(textToCopy);
@@ -76,43 +76,51 @@ function markdownCodeBlockParser() {
             item = item.trim();
             if (item === "")
                 return acc;
-            if (item.indexOf("=") === -1) {
-                if (item.startsWith("/") && item.endsWith("/")) {
-                    const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data];
-                    const newItemBase64 = decodeValue(item.substring(1, item.length - 1));
-                    if (!unparsedSubstrings) {
-                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] = newItemBase64;
-                    }
-                    else {
-                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] =
-                            `${unparsedSubstrings} ${newItemBase64}`;
-                    }
+            if (item.toLocaleLowerCase().startsWith("filename=")) {
+                const index = item.indexOf("=");
+                acc[highlight_code_1.CodeHighlighterMetaKeys.filename.data] = item
+                    .substring(index + 1)
+                    .replace(/"(.+)"/, "$1")
+                    .replace(/'(.+)'/, "$1");
+            }
+            if (item.startsWith("/") && item.endsWith("/")) {
+                const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data];
+                const newItemBase64 = decodeValue(item.substring(1, item.length - 1));
+                if (!unparsedSubstrings) {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] = newItemBase64;
                 }
-                if (item.startsWith("{") && item.endsWith("}")) {
-                    const unparsedRows = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data];
-                    const newItem = item.substring(1, item.length - 1);
-                    if (!unparsedRows) {
-                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = newItem;
-                    }
-                    else {
-                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = `${unparsedRows}, ${newItem}`;
-                    }
+                else {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] =
+                        `${unparsedSubstrings} ${newItemBase64}`;
                 }
-                if (item === "copy") {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.copy.data] = "true";
+            }
+            if (item.startsWith("!/") && item.endsWith("/")) {
+                const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data];
+                const newItemBase64 = decodeValue(item.substring(2, item.length - 1));
+                if (!unparsedSubstrings) {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data] = newItemBase64;
                 }
-                if (item === "rowNumbers") {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.rowNumbers.data] = "true";
+                else {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data] =
+                        `${unparsedSubstrings} ${newItemBase64}`;
                 }
-                return acc;
             }
-            const index = item.indexOf("=");
-            if (item.substring(0, index) !== "filename")
-                return acc;
-            acc["dataFilename"] = item
-                .substring(index + 1)
-                .replace(/"(.+)"/, "$1")
-                .replace(/'(.+)'/, "$1");
+            if (item.startsWith("{") && item.endsWith("}")) {
+                const unparsedRows = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data];
+                const newItem = item.substring(1, item.length - 1);
+                if (!unparsedRows) {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = newItem;
+                }
+                else {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = `${unparsedRows}, ${newItem}`;
+                }
+            }
+            if (item === "copy") {
+                acc[highlight_code_1.CodeHighlighterMetaKeys.copy.data] = "true";
+            }
+            if (item === "rowNumbers") {
+                acc[highlight_code_1.CodeHighlighterMetaKeys.rowNumbers.data] = "true";
+            }
             return acc;
         }, {});
         nodeData.hProperties = Object.assign(Object.assign({}, nodeData.hProperties), parsedMeta);

package/dist/scripts/src/components/CodeBlock/highlight-code.js

@@ -18,6 +18,7 @@ exports.isCodeHighlighter = isCodeHighlighter;
 const react_1 = require("react");
 const highlightRowsClass = "codeBlockHighlightRow";
 const highlightSubstringsClass = "codeBlockHighlightString";
+const highlightSubstringsEmphasisClass = "codeBlockHighlightStringEmphasis";
 /*
  * Encode string, returns base64 value
  * @Params: string
@@ -27,11 +28,11 @@ function encodeValue(value) {
         return null;
     }
     const valueToString = value.toString();
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
         return window.atob(valueToString);
     }
-    const buff = Buffer.from(valueToString, 'base64');
-    return buff.toString('ascii');
+    const buff = Buffer.from(valueToString, "base64");
+    return buff.toString("ascii");
 }
 /**
  * This function handles two things:
@@ -126,9 +127,13 @@ function extractMetaFromChildren(node, keys, code = "") {
             [exports.CodeHighlighterMetaKeys.language.prop]: meta[exports.CodeHighlighterMetaKeys.language.data],
             [exports.CodeHighlighterMetaKeys.copy.prop]: parseBoolean(meta[exports.CodeHighlighterMetaKeys.copy.data]),
             [exports.CodeHighlighterMetaKeys.filename.prop]: meta[exports.CodeHighlighterMetaKeys.filename.data],
-            [exports.CodeHighlighterMetaKeys.rowNumbers.prop]: parseBoolean(meta[exports.CodeHighlighterMetaKeys.rowNumbers.data]),
+            // NOTE: Row numbers are disabled for now, because applying the highlight class removes the "numbered" class
+            /* [CodeHighlighterMetaKeys.rowNumbers.prop]: parseBoolean(
+              meta[CodeHighlighterMetaKeys.rowNumbers.data],
+            ), */
             [exports.CodeHighlighterMetaKeys.highlightRows.prop]: parseRowHighlights(code.split("\n").length, meta[exports.CodeHighlighterMetaKeys.highlightRows.data]),
             [exports.CodeHighlighterMetaKeys.highlightSubstrings.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstrings.data]),
+            [exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data], true),
         };
     }
     return {};
@@ -182,7 +187,7 @@ function parseRowHighlights(codeLines, str) {
         return parsed;
     }
 }
-function parseSubstringHighlights(code, str) {
+function parseSubstringHighlights(code, str, emphasized = false) {
     if (!str)
         return [];
     if (!code)
@@ -190,6 +195,7 @@ function parseSubstringHighlights(code, str) {
     return str
         .split(" ")
         .map((item) => encodeValue(item))
+        .filter((item) => item.trim() !== "")
         .reduce((acc, item) => acc.concat(findAllNonOverlappingSubstrings(code, item)), []);
     function findAllNonOverlappingSubstrings(str, code) {
         const result = [];
@@ -202,7 +208,9 @@ function parseSubstringHighlights(code, str) {
             result.push({
                 start: index,
                 end: index + searchLength,
-                properties: { class: highlightSubstringsClass },
+                properties: {
+                    class: emphasized ? highlightSubstringsEmphasisClass : highlightSubstringsClass,
+                },
             });
             startIndex = index + searchLength; // Jump past this match
         }
@@ -219,5 +227,9 @@ exports.CodeHighlighterMetaKeys = {
     rowNumbers: { data: "data-row-numbers", prop: "rowNumbers" },
     highlightRows: { data: "data-highlight-rows", prop: "highlightRows" },
     highlightSubstrings: { data: "data-highlight-substrings", prop: "highlightSubstrings" },
+    highlightSubstringsEmphasized: {
+        data: "data-highlight-substrings-emp",
+        prop: "highlightSubstringsEmphasized",
+    },
 };
 exports.CodeHighlighterMetaKeysData = Object.values(exports.CodeHighlighterMetaKeys).map((item) => item.data);