@rh-support/components 2.5.203 → 2.5.205

package/lib/esm/MarkdownEditor/MarkdownEditor.js

@@ -1,602 +0,0 @@
-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,
-    hideToolbars: false,
-    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, hideToolbars, 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", "hideToolbars", "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", style: hideToolbars ? { display: 'none' } : undefined }, !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", { style: hideToolbars ? { display: 'none' } : undefined }, 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

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

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

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

package/lib/esm/MarkdownEditor/index.js

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