@patternfly/quickstarts 6.2.0-prerelease.3 → 6.2.0-prerelease.5

package/dist/ConsoleInternal/components/markdown-view.d.ts

@@ -4,7 +4,7 @@ interface ShowdownExtension {
     regex?: RegExp;
     replace?: (...args: any[]) => string;
 }
-export declare const markdownConvert: (markdown: any, extensions?: ShowdownExtension[]) => any;
+export declare const markdownConvert: (markdown: string, extensions?: ShowdownExtension[]) => Promise<any>;
 interface SyncMarkdownProps {
     content?: string;
     emptyMsg?: string;

package/dist/index.es.js

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import React__default, { createContext, useCallback, useEffect, useState } from 'react';
-import { useIsomorphicLayoutEffect, Tooltip, Alert, CodeBlock, Accordion, AccordionItem, AccordionToggle, AccordionContent, Popover, PopoverPosition, Button, Icon, Flex, FlexItem, Card, CardHeader, CardTitle, CardBody, Stack, Label, CardFooter, Gallery, ToolbarItem, SearchInput, Select, SelectList, SelectOption, MenuToggle, Badge, Toolbar, ToolbarContent, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions, PageSection, Content, Divider, Title, WizardNavItem, ExpandableSection, List, ListItem, Radio, ActionList, ActionListGroup, ActionListItem, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, StackItem } from '@patternfly/react-core';
+import { useIsomorphicLayoutEffect, Tooltip, Alert, CodeBlock, Accordion, AccordionItem, AccordionToggle, AccordionContent, Popover, PopoverPosition, Button, Icon, Flex, FlexItem, Card, CardHeader, CardTitle, CardBody, Stack, Label, CardFooter, Gallery, ToolbarItem, SearchInput, Select, SelectList, SelectOption, MenuToggle, Badge, Toolbar, ToolbarContent, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions, PageSection, Content, Title, Divider, WizardNavItem, ExpandableSection, List, ListItem, Radio, ActionList, ActionListGroup, ActionListItem, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, StackItem } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { css } from '@patternfly/react-styles';
 import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
-import { __rest } from 'tslib';
+import { __rest, __awaiter } from 'tslib';
 import { Modal as Modal$1, ModalVariant } from '@patternfly/react-core/deprecated';
 import * as ReactDOM from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
 import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
-import { Converter } from 'showdown';
+import { marked } from 'marked';
 import SyncAltIcon from '@patternfly/react-icons/dist/js/icons/sync-alt-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
@@ -1168,16 +1168,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const DOMPurify = require('dompurify');
-const markdownConvert = (markdown, extensions) => {
-    const converter = new Converter({
-        tables: true,
-        openLinksInNewWindow: true,
-        strikethrough: true,
-        emoji: false,
-    });
-    if (extensions) {
-        converter.addExtension(extensions);
-    }
+const markdownConvert = (markdown, extensions) => __awaiter(void 0, void 0, void 0, function* () {
     DOMPurify.addHook('beforeSanitizeElements', function (node) {
         // nodeType 1 = element type
         var _a;
@@ -1228,16 +1219,36 @@ const markdownConvert = (markdown, extensions) => {
             node.setAttribute('xlink:show', 'new');
         }
     });
-    return DOMPurify.sanitize(converter.makeHtml(markdown), {
-        USE_PROFILES: {
-            html: true,
-            svg: true,
-        },
-    });
-};
+    // Replace code fences with non markdown formatting relates tokens so that marked doesn't try to parse them as code spans
+    const markdownWithSubstitutedCodeFences = markdown.replace(/```/g, '@@@');
+    const parsedMarkdown = yield marked.parse(markdownWithSubstitutedCodeFences);
+    // Swap the temporary tokens back to code fences before we run the extensions
+    let md = parsedMarkdown.replace(/@@@/g, '```');
+    if (extensions) {
+        // Convert code spans back to md format before we run the custom extension regexes
+        md = md.replace(/<code>(.*)<\/code>/g, '`$1`');
+        extensions.forEach(({ regex, replace }) => {
+            if (regex) {
+                md = md.replace(regex, replace);
+            }
+        });
+        // Convert any remaining backticks back into code spans
+        md = md.replace(/`(.*)`/g, '<code>$1</code>');
+    }
+    return DOMPurify.sanitize(md);
+});
 const SyncMarkdownView = ({ content, emptyMsg, extensions, renderExtension, exactHeight, inline, className, }) => {
     const { getResource } = React.useContext(QuickStartContext);
-    const markup = React.useMemo(() => markdownConvert(content || emptyMsg || getResource('Not available'), extensions), [content, emptyMsg, extensions, getResource]);
+    const [markup, setMarkup] = React.useState('');
+    React.useEffect(() => {
+        function getMd() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const md = yield markdownConvert(content || emptyMsg || getResource('Not available'), extensions);
+                setMarkup(md);
+            });
+        }
+        getMd();
+    }, [content, emptyMsg, getResource, extensions]);
     const innerProps = {
         renderExtension: (extensions === null || extensions === void 0 ? void 0 : extensions.length) > 0 ? renderExtension : undefined,
         exactHeight,
@@ -1836,8 +1847,8 @@ const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) =>
     }
     return (React.createElement(React.Fragment, null,
         (showTitle || showFilter) && (React.createElement(PageSection, { hasBodyWrapper: false },
-            showTitle && (React.createElement(React.Fragment, null,
-                React.createElement(Content, { component: "h1", "data-test": "page-title" }, title || getResource('Quick Starts')),
+            showTitle && (React.createElement(Content, { isEditorial: true },
+                React.createElement(Title, { headingLevel: "h1", "data-test": "page-title" }, title || getResource('Quick Starts')),
                 hint && React.createElement("div", null, hint))),
             showTitle && React.createElement(Divider, { component: "div" }),
             showFilter && (React.createElement(React.Fragment, null,