@rh-support/components 2.5.214 → 2.5.222

package/lib/esm/MarkdownEditor/MarkdownEditor.js

@@ -0,0 +1,601 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import './markdownEditor.css';
+import { parseCommentMarkdown } from '@cee-eng/ui-toolkit';
+import { Button, ButtonVariant, Content, ContentVariants, Divider, DrilldownMenu, Dropdown, DropdownItem, DropdownList, Menu, MenuContainer, MenuContent, MenuItem, MenuList, MenuToggle, Spinner, Toolbar, ToolbarGroup, ToolbarItem, } from '@patternfly/react-core';
+import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import CodeIcon from '@patternfly/react-icons/dist/js/icons/code-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/js/icons/ellipsis-v-icon';
+import ImageIcon from '@patternfly/react-icons/dist/js/icons/image-icon';
+import LinkIcon from '@patternfly/react-icons/dist/js/icons/link-icon';
+import ListUlIcon from '@patternfly/react-icons/dist/js/icons/list-ul-icon';
+import QuoteRightIcon from '@patternfly/react-icons/dist/js/icons/quote-right-icon';
+import { emojiPattern, haltEvent, isEmojiPattern, isImageFile } from '@rh-support/utils';
+import cx from 'classnames';
+import DOMPurify from 'dompurify';
+import isEmpty from 'lodash/isEmpty';
+import React, { useEffect, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useDebounce, usePrevious, useUndo } from '../hooks';
+import { ToastNotification } from '../index';
+export var EditorMode;
+(function (EditorMode) {
+    EditorMode["PLAIN"] = "plaintext";
+    EditorMode["MARKDOWN"] = "markdown";
+})(EditorMode || (EditorMode = {}));
+const defaultProps = {
+    value: '',
+    onChange: () => { },
+    id: '',
+    className: '',
+    hidePreviewText: 'Hide preview',
+    showPreviewText: 'Show preview',
+    textAreaClassName: '',
+    mdPlaceholder: 'Add a comment using markdown',
+    plainTextPlaceholder: 'Add a comment to this case',
+    allowEmoji: true,
+    hideHeadingOptions: false,
+    showMarkdownPlainTextToggle: false,
+    editorMode: EditorMode.PLAIN,
+    charLimit: 32000,
+    minCharsForCounter: 31800,
+    fileSelectorProps: {
+        showFileSelectorInToolbar: false,
+    },
+};
+const MAX_FILE_SIZE = 2 * 1024; // 2MB in KB
+const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/gif'];
+export const validateFile = (file) => {
+    // Check file type
+    if (!ALLOWED_FILE_TYPES.includes(file.fileType)) {
+        // ToastNotification.addDangerMessage(t('Invalid file type, Only JPEG, PNG, GIF files are allowed.'));
+        return {
+            isValid: false,
+            errorMsg: 'Invalid file type, Only JPEG, PNG, GIF files are allowed inside Markdown Editor',
+        };
+    }
+    // Check file size
+    if (file.sizeKB > MAX_FILE_SIZE) {
+        // ToastNotification.addDangerMessage(t('File too large, File size must be less than 2MB'));
+        return { isValid: false, errorMsg: 'File too large, File size must be less than 2MB inside Markdown Editor' };
+    }
+    return { isValid: true, errorMsg: '' };
+};
+function MarkdownEditor(props) {
+    const { t } = useTranslation();
+    const { hidePreviewText, showPreviewText, mdPlaceholder, plainTextPlaceholder, textAreaClassName, bindTextArea, markedownOptions, allowEmoji, hideHeadingOptions, rows, showMarkdownPlainTextToggle, editorMode, className, charLimit, minCharsForCounter, id, value, onCommentExceedCharsLimit, fileSelectorProps: { onClipboardPaste, onFileSelect, isSupportedFile, showFileSelectorInToolbar = false, isUploadingFile = false, filesList = [], attachFileBtn, } } = props, textAreaProps = __rest(props, ["hidePreviewText", "showPreviewText", "mdPlaceholder", "plainTextPlaceholder", "textAreaClassName", "bindTextArea", "markedownOptions", "allowEmoji", "hideHeadingOptions", "rows", "showMarkdownPlainTextToggle", "editorMode", "className", "charLimit", "minCharsForCounter", "id", "value", "onCommentExceedCharsLimit", "fileSelectorProps"]);
+    const [isPreview, setIsPreview] = useState(false);
+    const [mdValue, setMdValue] = useState(props.value || '');
+    const previousFileList = usePrevious(filesList);
+    const [isPlainModeEnabled, setIsPlainModeEnabled] = useState(showMarkdownPlainTextToggle && props.editorMode === EditorMode.PLAIN ? true : false);
+    const textareaRef = useRef(null);
+    const { state, setURValue, undo, redo, resetURValue } = useUndo(props.value);
+    // for access inside event handlers
+    const isPlainModeEnabledRef = useRef(isPlainModeEnabled);
+    const [isFileSelectorOpen, setIsFileSelectorOpen] = useState(false);
+    const [isFileFromOnPaste, setIsFileFromOnPaste] = useState(false);
+    const onFileSelectLocal = () => {
+        setIsFileSelectorOpen((open) => !open);
+    };
+    const onFileSelectToggle = (isOpen) => {
+        setIsFileSelectorOpen(isOpen);
+    };
+    useEffect(() => {
+        if (isFileFromOnPaste) {
+            onFileInsert(filesList[0]);
+        }
+        if ((previousFileList || []).length < (filesList || []).length && isUploadingFile) {
+            onFileInsert(filesList[0]);
+        }
+        return () => {
+            setIsFileFromOnPaste(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filesList.length]);
+    const onFileInsert = (file) => {
+        const { isValid, errorMsg } = validateFile(file);
+        if (!isValid) {
+            ToastNotification.addDangerMessage(t(errorMsg));
+            return;
+        }
+        // Create markdown image syntax
+        const template = isImageFile(file.fileType)
+            ? `![${file.fileName}](${file.link})`
+            : `[${file.fileName}](${file.link})`;
+        insert(template, 0, 0);
+        const currentStart = textareaRef.current.selectionStart;
+        textareaRef.current.setSelectionRange(currentStart + template.length, currentStart + template.length);
+        onFileSelect && onFileSelect(file);
+    };
+    function pastedFile(items) {
+        for (const item of items) {
+            if (isSupportedFile && isSupportedFile(item.type)) {
+                return item.getAsFile();
+            }
+        }
+        return null;
+    }
+    const onPaste = (event) => {
+        if (!event.clipboardData || isPlainModeEnabledRef.current)
+            return;
+        if (!event.clipboardData.items)
+            return;
+        const file = pastedFile(event.clipboardData.items);
+        if (!file)
+            return;
+        const files = [file];
+        event.preventDefault();
+        onClipboardPaste(files);
+        setIsFileFromOnPaste(true);
+    };
+    // To handle dropped images
+    const onDrop = (event) => {
+        if (!event.dataTransfer.files)
+            return;
+        const file = event.dataTransfer.files[0];
+        if (!file)
+            return;
+        const files = [file];
+        event.preventDefault();
+        onClipboardPaste(files);
+        setIsFileFromOnPaste(true);
+    };
+    const getFileSelectorList = (isMobile = false) => {
+        const filesAsDropdownItems = filesList
+            .filter((file) => validateFile(file).isValid)
+            .map((file) => (React.createElement(DropdownItem, { key: file.id, value: file, onClick: () => {
+                onFileInsert(file);
+            } },
+            React.createElement(Content, { component: ContentVariants.small }, file.fileName))));
+        if (isMobile) {
+            return [
+                React.createElement(DropdownItem, { key: "separated link", className: "pf-v6-u-p-0 pf-v6-u-m-0 pf-v6-u-w-100" }, attachFileBtn),
+                ...(filesAsDropdownItems.length > 0 ? [React.createElement(Divider, { key: "separator" })] : []),
+                ...filesAsDropdownItems,
+            ];
+        }
+        else {
+            return [
+                ...filesAsDropdownItems,
+                ...(filesAsDropdownItems.length > 0 ? [React.createElement(Divider, { key: "separator" })] : []),
+                React.createElement(DropdownItem, { key: "separated link", className: "pf-v6-u-p-0 pf-v6-u-m-0 pf-v6-u-w-100" }, attachFileBtn),
+            ];
+        }
+    };
+    const bindTextAreaRef = (ref) => {
+        textareaRef.current = ref;
+        if (props.bindTextArea)
+            props.bindTextArea(ref);
+    };
+    const onModeChange = (isPlainMode) => {
+        setIsPlainModeEnabled(isPlainMode);
+        isPlainModeEnabledRef.current = isPlainMode;
+        isPlainMode && isPreview && setIsPreview(false);
+        const mode = isPlainMode ? EditorMode.PLAIN : EditorMode.MARKDOWN;
+        props.onChange(mdValue, mode);
+    };
+    // Add this useEffect to properly initialize the mdValue when component mounts
+    useEffect(() => {
+        setMdValue(props.value || '');
+    }, [props.value]);
+    // Update the existing useEffect to handle both value and editorMode changes
+    useEffect(() => {
+        if (value !== mdValue) {
+            setMdValue(value);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    useEffect(() => {
+        const isPlainMode = props.editorMode === EditorMode.PLAIN;
+        if (isPlainMode !== isPlainModeEnabled) {
+            setIsPlainModeEnabled(isPlainMode);
+            isPlainModeEnabledRef.current = isPlainMode;
+            if (isPlainMode && isPreview) {
+                setIsPreview(false);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.editorMode]);
+    useEffect(() => {
+        // update state on undo redo
+        if (mdValue !== state.present) {
+            onValueChangeLocal(state.present);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state.present]);
+    useDebounce(() => {
+        if (isEmpty(mdValue))
+            return;
+        !isPlainModeEnabled && setURValue(mdValue);
+    }, [mdValue], 500);
+    const onValueChangeLocal = (text) => {
+        const mode = showMarkdownPlainTextToggle && isPlainModeEnabled ? EditorMode.PLAIN : EditorMode.MARKDOWN;
+        setMdValue(text);
+        props.onChange(text, mode);
+    };
+    const textChanged = (event) => {
+        let value = event.target.value;
+        if (!props.allowEmoji && isEmojiPattern(value)) {
+            value = value.replace(emojiPattern, '').trim();
+        }
+        onValueChangeLocal(value);
+        // Add a null check before calling onCommentExceedCharsLimit
+        if (props.onCommentExceedCharsLimit) {
+            charLimit - value.length < 0
+                ? props.onCommentExceedCharsLimit(true)
+                : props.onCommentExceedCharsLimit(false);
+        }
+    };
+    const hasSelection = () => {
+        return textareaRef.current.selectionStart !== textareaRef.current.selectionEnd;
+    };
+    const wrapSelection = (templateStart, templateEnd) => {
+        const currentText = textareaRef.current.value;
+        const posStart = textareaRef.current.selectionStart;
+        const posEnd = textareaRef.current.selectionEnd;
+        const selectedText = currentText.substring(posStart, posEnd);
+        const whitespaceEdges = selectedText.match(/^\s*|\s*$/g) || [];
+        const leadingWhitespace = whitespaceEdges[0] || '';
+        const trailingWhitespace = whitespaceEdges[1] || '';
+        const trimmedText = selectedText.trim();
+        let coreText = trimmedText;
+        // Check existing formatting
+        const existingFormats = {
+            h1: coreText.startsWith('# '),
+            h2: coreText.startsWith('## '),
+            h3: coreText.startsWith('### '),
+            bold: coreText.startsWith('**') && coreText.endsWith('**'),
+            italic: coreText.startsWith('_') && coreText.endsWith('_'),
+            quote: coreText.startsWith('> '),
+            link: coreText.match(/^\[.*\]\(.*\)$/),
+        };
+        // Remove existing formatting to get core text
+        if (existingFormats.h1)
+            coreText = coreText.substring(2);
+        else if (existingFormats.h2)
+            coreText = coreText.substring(3);
+        else if (existingFormats.h3)
+            coreText = coreText.substring(4);
+        if (existingFormats.bold)
+            coreText = coreText.substring(2, coreText.length - 2);
+        if (existingFormats.italic)
+            coreText = coreText.substring(1, coreText.length - 1);
+        if (existingFormats.quote)
+            coreText = coreText.substring(2);
+        if (existingFormats.link) {
+            const match = coreText.match(/^\[(.*)\]\((.*)\)$/);
+            if (match)
+                coreText = match[1];
+        }
+        // Determine what formatting we're adding
+        const newFormat = {
+            h1: templateStart === '# ' && templateEnd === '',
+            h2: templateStart === '## ' && templateEnd === '',
+            h3: templateStart === '### ' && templateEnd === '',
+            bold: templateStart === '**' && templateEnd === '**',
+            italic: templateStart === '_' && templateEnd === '_',
+            quote: templateStart === '> ' && (templateEnd === '' || templateEnd === '\n'),
+            link: templateEnd.includes(']('),
+        };
+        // Apply formatting
+        let formattedText = coreText;
+        // First apply inline formatting (bold, italic)
+        if (newFormat.italic && !existingFormats.italic) {
+            formattedText = `_${formattedText}_`;
+        }
+        if (existingFormats.italic && !newFormat.italic) {
+            formattedText = `_${formattedText}_`;
+        }
+        if (newFormat.bold && !existingFormats.bold) {
+            formattedText = `**${formattedText}**`;
+        }
+        if (existingFormats.bold && !newFormat.bold) {
+            formattedText = `**${formattedText}**`;
+        }
+        // Then apply block-level formatting (headings, quotes)
+        if (newFormat.h1 || existingFormats.h1) {
+            formattedText = `# ${formattedText}`;
+        }
+        else if (newFormat.h2 || existingFormats.h2) {
+            formattedText = `## ${formattedText}`;
+        }
+        else if (newFormat.h3 || existingFormats.h3) {
+            formattedText = `### ${formattedText}`;
+        }
+        // Handle quotes - keep them at the start of the line
+        if (newFormat.quote || existingFormats.quote) {
+            formattedText = `> ${formattedText}`;
+        }
+        // Special handling for links
+        if (newFormat.link) {
+            formattedText = `[${formattedText}](URL "TITLE")`;
+        }
+        if (existingFormats.link && !newFormat.link) {
+            const match = trimmedText.match(/^\[(.*)\]\((.*)\)$/);
+            if (match)
+                formattedText = `[${formattedText}](${match[2]})`;
+        }
+        const newText = currentText.substring(0, posStart) +
+            leadingWhitespace +
+            formattedText +
+            trailingWhitespace +
+            currentText.substring(posEnd);
+        // Set the value in the textarea
+        textareaRef.current.value = newText;
+        textareaRef.current.selectionStart = posStart + leadingWhitespace.length;
+        textareaRef.current.selectionEnd = posStart + leadingWhitespace.length + formattedText.length;
+        textareaRef.current.focus();
+        // Call onValueChangeLocal only once
+        onValueChangeLocal(newText);
+    };
+    const wrapBasedOnNewLines = () => {
+        const currentText = textareaRef.current.value;
+        const posStart = textareaRef.current.selectionStart;
+        const posEnd = textareaRef.current.selectionEnd;
+        const selectedText = currentText.substring(posStart, posEnd);
+        const splitText = selectedText.split('\n');
+        const newText = currentText
+            .substring(0, posStart)
+            .concat(splitText.map((v) => `- ${v}`).join('\n'), '\n', currentText.substring(posEnd));
+        onValueChangeLocal(newText);
+    };
+    const insert = (template, selectionStart, selectionEnd) => {
+        const currentText = textareaRef.current.value;
+        const pos = textareaRef.current.selectionStart;
+        const newText = currentText.substring(0, pos) + template + currentText.substring(pos);
+        onValueChangeLocal(newText);
+        textareaRef.current.value = newText;
+        textareaRef.current.selectionStart = pos + selectionStart;
+        textareaRef.current.selectionEnd = pos + (selectionEnd || selectionStart);
+        textareaRef.current.focus();
+        onValueChangeLocal(newText);
+    };
+    const bold = () => {
+        if (hasSelection()) {
+            wrapSelection('**', '**');
+        }
+        else {
+            insert('**TEXT**', 2, 6);
+        }
+    };
+    const italic = () => {
+        if (hasSelection()) {
+            wrapSelection('_', '_');
+        }
+        else {
+            insert('_TEXT_', 1, 5);
+        }
+    };
+    const h1 = () => {
+        if (hasSelection()) {
+            wrapSelection('# ', '');
+        }
+        else {
+            insert('# HEADING', 2, 9);
+        }
+    };
+    const h2 = () => {
+        if (hasSelection()) {
+            wrapSelection('## ', '');
+        }
+        else {
+            insert('## HEADING', 3, 10);
+        }
+    };
+    const h3 = () => {
+        if (hasSelection()) {
+            wrapSelection('### ', '');
+        }
+        else {
+            insert('### HEADING', 4, 11);
+        }
+    };
+    const list = () => {
+        if (hasSelection()) {
+            wrapBasedOnNewLines();
+        }
+        else {
+            insert('- ITEM', 2, 6);
+        }
+    };
+    const link = () => {
+        if (hasSelection()) {
+            wrapSelection('[', '](URL "TITLE")');
+        }
+        else {
+            insert('[LINK TEXT](URL "TITLE")', 1, 10);
+        }
+    };
+    const quote = () => {
+        if (hasSelection()) {
+            wrapSelection('> ', '');
+        }
+        else {
+            insert('> QUOTE', 2, 7);
+        }
+    };
+    const code = () => {
+        if (hasSelection()) {
+            wrapSelection('~~~\n', '\n~~~\n');
+        }
+        else {
+            insert('~~~\nCODE\n~~~\n', 4, 8);
+        }
+    };
+    const preview = () => {
+        setIsPreview((previewFlag) => !previewFlag);
+    };
+    const previewMDText = (mdText) => {
+        // Preprocess to insert a blank line between list and non-list lines
+        const fixedMdText = mdText.replace(/(^|\n)(-\s.+)(\n(?![-\s]))/g, '$1$2\n\n');
+        const markeddownOptions = Object.assign(Object.assign({}, props.markedownOptions), { openLinksInNewTab: true, gfm: true, breaks: true });
+        return parseCommentMarkdown(fixedMdText, { openImagesInNewTab: false, lazyLoadImages: false }, markeddownOptions);
+    };
+    const keydown = (event) => {
+        if (event.ctrlKey) {
+            switch (event.key) {
+                case 'b':
+                    bold();
+                    haltEvent(event);
+                    break;
+                case 'i':
+                    italic();
+                    haltEvent(event);
+                    break;
+                case '1':
+                    h1();
+                    haltEvent(event);
+                    break;
+                case '2':
+                    h2();
+                    haltEvent(event);
+                    break;
+                case '3':
+                    h3();
+                    haltEvent(event);
+                    break;
+                case 'z':
+                    undo();
+                    haltEvent(event);
+                    break;
+                case 'y':
+                    redo();
+                    haltEvent(event);
+                    break;
+            }
+        }
+    };
+    const getCharCountText = (comment) => {
+        const charCountLeft = charLimit - comment.length;
+        return (React.createElement("span", { className: `character-count-wrapper ${charCountLeft <= 0 ? 'red' : ''}` },
+            "(",
+            t(`{{charCountLeft}} characters left`, { charCountLeft }),
+            ")"));
+    };
+    const contentRows = (props.value && props.value.split('\n').length + 1) || 4;
+    // reset undo redo value after post comment
+    props.disabled && !isEmpty(state.present) && resetURValue('');
+    // editor is disabled and preview is true -> set preview to false
+    props.disabled && isPreview && setIsPreview(false);
+    const disablePreviewButton = mdValue === '';
+    const [isHeadingDropdownOpen, setIsHeadingDropdownOpen] = React.useState(false);
+    const onToggle = (isOpen) => {
+        setIsHeadingDropdownOpen(isOpen);
+    };
+    const onHeadingSelect = () => {
+        setIsHeadingDropdownOpen(false);
+    };
+    const [isDrillMenuOpen, setIsDrillMenuOpen] = React.useState(false);
+    const [activeMenu, setActiveMenu] = useState('toolsKebabMenu');
+    const [menuDrilledIn, setMenuDrilledIn] = useState([]);
+    const [drilldownPath, setDrilldownPath] = useState([]);
+    const [menuHeights, setMenuHeights] = useState({});
+    const toggleRef = useRef(null);
+    const drillMenuRef = useRef(null);
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsDrillMenuOpen(!isDrillMenuOpen);
+        setMenuDrilledIn([]);
+        setDrilldownPath([]);
+        setActiveMenu('toolsKebabMenu');
+    };
+    const drillIn = (_event, fromMenuId, toMenuId, pathId) => {
+        setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
+        setDrilldownPath([...drilldownPath, pathId]);
+        setActiveMenu(toMenuId);
+    };
+    const drillOut = (_event, toMenuId) => {
+        setMenuDrilledIn(menuDrilledIn.slice(0, menuDrilledIn.length - 1));
+        setDrilldownPath(drilldownPath.slice(0, drilldownPath.length - 1));
+        setActiveMenu(toMenuId);
+    };
+    const setHeight = (menuId, height) => {
+        if (!menuHeights[menuId] || (menuId !== 'toolsKebabMenu' && menuHeights[menuId] !== height)) {
+            setMenuHeights(Object.assign(Object.assign({}, menuHeights), { [menuId]: height }));
+        }
+    };
+    const markdownGuidanceBtn = (React.createElement("a", { className: "pf-v6-c-button pf-m-link pf-m-inline markdown-guidance", rel: "noopener noreferrer", target: "_blank", href: "/articles/4729621", "data-tracking-id": "md-guidance" },
+        React.createElement(Trans, null, "Markdown guidance")));
+    return (React.createElement("div", { id: "markdown-editor" },
+        !isPlainModeEnabled && React.createElement("div", { className: "markdown-guidance-container" }, markdownGuidanceBtn),
+        React.createElement("div", { className: `markdown-editor-container ${props.className}`, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
+            React.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (React.createElement(React.Fragment, null,
+                React.createElement(Toolbar, { className: "desktop-markdown-toolbar pf-v6-l-flex" },
+                    React.createElement(ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
+                        React.createElement(Button, { icon: "B", variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }),
+                        React.createElement(Button, { icon: "I", variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }),
+                        React.createElement("div", { className: "btn-group-separator" }),
+                        !props.hideHeadingOptions && (React.createElement(React.Fragment, null,
+                            React.createElement(Button, { icon: "H1", tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h1, title: "Heading 1", "data-tracking-id": "md-editor-toolbar-h1" }),
+                            React.createElement(Button, { icon: "H2", tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h2, title: "Heading 2", "data-tracking-id": "md-editor-toolbar-h2" }),
+                            React.createElement(Button, { icon: "H3", tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h3, title: "Heading 3", "data-tracking-id": "md-editor-toolbar-h3" }),
+                            React.createElement("div", { className: "btn-group-separator" }))),
+                        React.createElement(Button, { icon: React.createElement(ListUlIcon, null), tabIndex: -1, isDisabled: props.disabled || isPreview, variant: ButtonVariant.plain, onClick: list, title: "Bullet List", "data-tracking-id": "md-editor-toolbar-bul-list" }),
+                        React.createElement("div", { className: "btn-group-separator" }),
+                        React.createElement(Button, { icon: React.createElement(LinkIcon, null), tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: link, title: "Link", "data-tracking-id": "md-editor-toolbar-link" }),
+                        React.createElement(Button, { icon: React.createElement(QuoteRightIcon, null), tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: quote, title: "Quote", "data-tracking-id": "md-editor-toolbar-quote" }),
+                        React.createElement(Button, { icon: React.createElement(CodeIcon, null), tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "md-editor-toolbar-code" }),
+                        showFileSelectorInToolbar && (React.createElement(Dropdown, { isOpen: isFileSelectorOpen, onSelect: onFileSelectLocal, onOpenChange: (isOpen) => onFileSelectToggle(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: () => onFileSelectToggle(!isFileSelectorOpen), isExpanded: isFileSelectorOpen, isDisabled: props.disabled || isPreview, "aria-label": "file selector", variant: "plain" },
+                                React.createElement("span", { className: "toggle-content" },
+                                    React.createElement(ImageIcon, null),
+                                    React.createElement(CaretDownIcon, { className: "dropdown-caret" })))), id: "md-editor-toolbar-file-selector", "data-tracking-id": "md-editor-toolbar-file-selector", shouldFocusFirstItemOnOpen: false },
+                            React.createElement(DropdownList, null, getFileSelectorList())))),
+                    React.createElement(ToolbarItem, null, markdownGuidanceBtn)),
+                React.createElement(Toolbar, { className: "mobile-markdown-toolbar" },
+                    React.createElement("div", { className: "mobile-markdown-toolbar" },
+                        React.createElement(ToolbarGroup, { "data-tracking-id": "mobile-md-editor-toolbar", className: "markdown-toolbar-left-section" },
+                            !props.hideHeadingOptions && (React.createElement(Dropdown, { isOpen: isHeadingDropdownOpen, onSelect: onHeadingSelect, onOpenChange: (isOpen) => onToggle(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: () => onToggle(!isHeadingDropdownOpen), isExpanded: isHeadingDropdownOpen, isDisabled: props.disabled || isPreview, "aria-label": "heading selector", variant: "plain", id: "heading-selector" },
+                                    React.createElement("span", { className: "toggle-content" },
+                                        "Heading",
+                                        React.createElement(CaretDownIcon, { className: "dropdown-caret" })))), id: "md-editor-toolbar-heading-selector", "data-tracking-id": "md-editor-toolbar-heading-selector", shouldFocusFirstItemOnOpen: false },
+                                React.createElement(DropdownList, null,
+                                    React.createElement(DropdownItem, { key: "heading-1", isDisabled: props.disabled || isPreview, onClick: h1, "data-tracking-id": "mobile-md-editor-toolbar-h1" }, "Heading 1"),
+                                    React.createElement(DropdownItem, { key: "heading-2", isDisabled: props.disabled || isPreview, onClick: h2, "data-tracking-id": "mobile-md-editor-toolbar-h2" }, "Heading 2"),
+                                    React.createElement(DropdownItem, { key: "heading-3", isDisabled: props.disabled || isPreview, onClick: h3, "data-tracking-id": "mobile-md-editor-toolbar-h3" }, "Heading 3")))),
+                            React.createElement(Button, { icon: "B", variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "mobile-md-editor-toolbar-b", title: "Bold", className: "mobile-markdown-tool-item" }),
+                            React.createElement(Button, { icon: "I", variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "mobile-md-editor-toolbar-i", title: "Italic", className: "mobile-markdown-tool-item" }),
+                            React.createElement(Button, { icon: React.createElement(ListUlIcon, null), tabIndex: -1, isDisabled: props.disabled || isPreview, variant: ButtonVariant.plain, onClick: list, title: "Bullet List", "data-tracking-id": "mobile-md-editor-toolbar-bul-list", className: "mobile-markdown-tool-item" }),
+                            React.createElement(Button, { icon: React.createElement(CodeIcon, null), tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "mobile-md-editor-toolbar-code", className: "mobile-markdown-tool-item" })),
+                        React.createElement(ToolbarItem, { id: "tools-kebab-menu-container", className: "mobile-markdown-tool-item", gap: { default: 'gapSm' } },
+                            React.createElement(MenuContainer, { isOpen: isDrillMenuOpen, onOpenChange: (isOpen) => setIsDrillMenuOpen(isOpen), popperProps: { position: 'left' }, menu: React.createElement(Menu, { id: "toolsKebabMenu", containsDrilldown: true, drilldownItemPath: drilldownPath, drilledInMenus: menuDrilledIn, activeMenu: activeMenu, onDrillIn: drillIn, onDrillOut: drillOut, onGetMenuHeight: setHeight, ref: drillMenuRef },
+                                    React.createElement(MenuContent, { menuHeight: `${menuHeights[activeMenu]}px` },
+                                        React.createElement(MenuList, null,
+                                            React.createElement(MenuItem, { itemId: "link-btn-menu-item", isDisabled: props.disabled || isPreview, onClick: link, "data-tracking-id": "mobile-md-editor-toolbar-link", icon: React.createElement(LinkIcon, { "aria-hidden": true }) }, "Link"),
+                                            React.createElement(MenuItem, { itemId: "code-btn-menu-item", isDisabled: props.disabled || isPreview, onClick: quote, "data-tracking-id": "mobile-md-editor-toolbar-quote", icon: React.createElement(QuoteRightIcon, { "aria-hidden": true }) }, "Quote"),
+                                            React.createElement(MenuItem, { itemId: "group:manage_attachments", direction: "down", icon: React.createElement(ImageIcon, { "aria-hidden": true }), drilldownMenu: React.createElement(DrilldownMenu, { id: "drilldownMenuStart" },
+                                                    React.createElement(MenuItem, { itemId: "group:manage_attachments_breadcrumb", direction: "up" }, "Manage attachments"),
+                                                    React.createElement("div", { className: "attachments-items" }, getFileSelectorList(true))) }, "Manage Attachments")))), menuRef: drillMenuRef, toggle: React.createElement(MenuToggle, { variant: "plain", ref: toggleRef, onClick: onToggleClick, isExpanded: isDrillMenuOpen },
+                                    React.createElement(EllipsisVIcon, null)), toggleRef: toggleRef }))))))),
+            React.createElement("div", { className: "markdown-content" }, !isPreview ? (React.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: cx('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows, style: { height: '313px' } }))) : (React.createElement("div", { className: "markdown-preview-placeholder", style: { height: '313px' } },
+                React.createElement("div", { className: "markdown-preview", style: { maxHeight: '313px' } },
+                    React.createElement("div", { dangerouslySetInnerHTML: {
+                            __html: DOMPurify.sanitize(previewMDText(mdValue)),
+                        } }))))),
+            React.createElement("div", null, props.showMarkdownPlainTextToggle && (React.createElement("div", { className: `markdown-toggle-toolbar pf-v6-l-flex` },
+                React.createElement("span", { className: "markdown-toolbar-left-section pf-m-wrap" },
+                    !isPlainModeEnabled && (React.createElement(Button, { className: "markdown-preview-btn", tabIndex: -1, variant: ButtonVariant.plain, onClick: preview, title: "Show preview", "data-tracking-id": `md-preview-${isPreview ? 'hide' : 'show'}`, isDisabled: disablePreviewButton, icon: React.createElement(Trans, null, isPreview ? (React.createElement("span", null,
+                            " ",
+                            t(hidePreviewText))) : (React.createElement("span", null,
+                            " ",
+                            t(showPreviewText)))) })),
+                    isUploadingFile && (React.createElement(React.Fragment, null,
+                        React.createElement(Trans, null,
+                            React.createElement("small", { className: "pf-v6-u-pl-md uploading-spinner-text" },
+                                React.createElement(Trans, null, "Uploading File"))),
+                        React.createElement(Spinner, { className: "pf-v6-u-ml-sm", size: "sm" }))),
+                    mdValue.length > props.minCharsForCounter && getCharCountText(mdValue)),
+                React.createElement("span", null,
+                    React.createElement(Button, { icon: React.createElement(Trans, null, "Plain text"), variant: "plain", className: `${isPlainModeEnabled ? 'markdown-active-mode' : ''} plain-mode-btn`, onClick: () => onModeChange(true), isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" }),
+                    React.createElement(Button, { icon: React.createElement(Trans, null, "Markdown"), variant: "plain", className: `${!isPlainModeEnabled ? 'markdown-active-mode' : ''} markdown-mode-btn`, onClick: () => onModeChange(false), isDisabled: !isPlainModeEnabled, "data-tracking-id": "md-editor-md" }))))))));
+}
+MarkdownEditor.defaultProps = defaultProps;
+export { MarkdownEditor };

package/lib/esm/MarkdownEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MarkdownEditor';
+//# sourceMappingURL=index.d.ts.map

package/lib/esm/MarkdownEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/lib/esm/MarkdownEditor/index.js

@@ -0,0 +1 @@
+export * from './MarkdownEditor';