@patternfly/quickstarts 2.4.3 → 2.4.5

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

@@ -5,7 +5,7 @@ declare type 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>;
 declare type SyncMarkdownProps = {
     content?: string;
     emptyMsg?: string;

package/dist/index.es.js

@@ -4,13 +4,13 @@ import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal a
 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 * 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 ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
@@ -1287,16 +1287,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
         // transform anchor tags
@@ -1323,20 +1314,48 @@ const markdownConvert = (markdown, extensions) => {
             node.setAttribute('xlink:show', 'new');
         }
     });
-    return DOMPurify.sanitize(converter.makeHtml(markdown), {
-        USE_PROFILES: {
-            html: true,
-            svg: true,
-        },
-    });
-};
+    const reverseString = (str) => str
+        .split('')
+        .reverse()
+        .join('');
+    // replace code fences that end in a double curly brace (which are used by our custom md extensions) with non
+    // markdown formatting related tokens so that marked doesn't try to parse them as code spans
+    //
+    // we want to reverse the string before we do the substitution so that we only match the opening code fence which
+    // corresponds to the closing code fence with the double curly brace
+    const reversedMarkdown = reverseString(markdown);
+    const reverseMarkdownWithSubstitutedCodeFences = reversedMarkdown.replace(/{{```((.|\n)*?)```/g, '{{@@@$1@@@');
+    const markdownWithSubstitutedCodeFences = reverseString(reverseMarkdownWithSubstitutedCodeFences);
+    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 = ({ 
 // truncateContent,
 content, emptyMsg, extensions, renderExtension, exactHeight, inline, className, }) => {
     const { getResource } = React.useContext(QuickStartContext);
-    const markup = React.useMemo(() => {
-        return 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,
@@ -2003,12 +2022,22 @@ const TaskIcon = ({ taskIndex, taskStatus }) => {
 };
 const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
     const titleRef = React.useRef(null);
+    const [parsedTitle, setParsedTitle] = React.useState('');
     React.useEffect(() => {
         if (isActiveTask) {
             // Focus the WizardNavItem button element that contains the title
             titleRef.current.parentNode.focus();
         }
     }, [isActiveTask]);
+    React.useEffect(() => {
+        function getParsedTitle() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const convertedMdTitle = yield markdownConvert(title);
+                setParsedTitle(removeParagraphWrap(convertedMdTitle));
+            });
+        }
+        getParsedTitle();
+    }, [title]);
     const classNames = css('pfext-quick-start-task-header__title', {
         'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
         'pfext-quick-start-task-header__title-failed': taskStatus === (QuickStartTaskStatus.FAILED || QuickStartTaskStatus.VISITED),
@@ -2024,7 +2053,7 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
     const content = (React.createElement("div", { className: "pfext-quick-start-task-header", ref: titleRef },
         React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
         React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
-            React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
+            React.createElement("span", { dangerouslySetInnerHTML: { __html: parsedTitle } }),
             isActiveTask && subtitle && (React.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
                 ' ',
                 subtitle))),
@@ -2231,6 +2260,7 @@ const QuickStartPanelContent = (_a) => {
     const titleRef = React.useRef(null);
     const { getResource, activeQuickStartState } = React.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React.useState();
+    const [displayName, setDisplayName] = React.useState('');
     const shadows = useScrollShadows(contentRef);
     const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
     const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
@@ -2258,13 +2288,22 @@ const QuickStartPanelContent = (_a) => {
             titleRef.current.focus();
         }
     }, [quickStart]);
+    React.useEffect(() => {
+        function getDisplayName() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const convertedMdDisplayName = yield markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName);
+                setDisplayName(removeParagraphWrap(convertedMdDisplayName));
+            });
+        }
+        getDisplayName();
+    }, [quickStart]);
     const content = quickStart ? (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
         React.createElement("div", { className: headerClasses },
             React.createElement(DrawerHead, null,
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
                     React.createElement(Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } },
                         React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
+                                __html: displayName,
                             } }),
                         ' ',
                         React.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes) ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)