@rh-support/components 2.4.10-beta.6 → 2.5.1

package/lib/esm/MarkdownEditor/MarkdownEditor.js

@@ -11,8 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import './markdownEditor.css';
 import { parseCommentMarkdown } from '@cee-eng/ui-toolkit';
-import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, Flex, FlexItem, Spinner, Text, TextVariants, Toolbar, ToolbarGroup, ToolbarItem, } from '@patternfly/react-core';
+import { Button, ButtonVariant, DrilldownMenu, Flex, FlexItem, Menu, MenuContainer, MenuContent, MenuItem, MenuList, MenuToggle, Spinner, Text, TextVariants, Toolbar, ToolbarGroup, ToolbarItem, } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownSeparator, DropdownToggle } from '@patternfly/react-core/deprecated';
 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';
@@ -25,6 +27,7 @@ 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";
@@ -50,11 +53,26 @@ const defaultProps = {
         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.' };
+    }
+    // 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' };
+    }
+    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, onCommentExceedCharsLimit, fileSelectorProps: { onClipboardPaste, onFileDelete, 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", "onCommentExceedCharsLimit", "fileSelectorProps"]);
+    const { hidePreviewText, showPreviewText, mdPlaceholder, plainTextPlaceholder, textAreaClassName, bindTextArea, markedownOptions, allowEmoji, hideHeadingOptions, rows, showMarkdownPlainTextToggle, editorMode, className, charLimit, minCharsForCounter, id, value, onCommentExceedCharsLimit, fileSelectorProps: { onClipboardPaste, onFileDelete, 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 [mdValue, setMdValue] = useState(props.value || '');
     const previousFileList = usePrevious(filesList);
     const [isPlainModeEnabled, setIsPlainModeEnabled] = useState(showMarkdownPlainTextToggle && props.editorMode === EditorMode.PLAIN ? true : false);
     const textareaRef = useRef(null);
@@ -75,6 +93,12 @@ function MarkdownEditor(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filesList]);
     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})`;
@@ -114,27 +138,34 @@ function MarkdownEditor(props) {
         event.preventDefault();
         onClipboardPaste(files);
     };
-    const getFileSelectorList = () => {
+    const getFileSelectorList = (isMobile = false) => {
         const filesAsDropdownItems = filesList.map((file) => {
-            return (React.createElement(DropdownItem, { key: file.id, onClick: () => {
-                    onFileInsert(file);
-                } },
-                React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
-                    React.createElement(FlexItem, null,
-                        React.createElement(Text, { component: TextVariants.small }, file.fileName)),
-                    onFileDelete && (React.createElement(FlexItem, { className: "pf-u-ml-auto" },
-                        React.createElement(Button, { variant: ButtonVariant.plain, onClick: (event) => {
-                                onFileSelectToggle(false);
-                                onFileDelete(file);
-                                event.stopPropagation();
-                            } },
-                            React.createElement(TrashIcon, { color: "#c9190b" })))))));
+            return (React.createElement(React.Fragment, null,
+                React.createElement(DropdownItem, { key: file.id, onClick: () => {
+                        onFileInsert(file);
+                    } },
+                    React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
+                        React.createElement(FlexItem, null,
+                            React.createElement(Text, { component: TextVariants.small }, file.fileName)),
+                        onFileDelete && (React.createElement(FlexItem, { className: "pf-v5-u-ml-auto" },
+                            React.createElement(Button, { variant: ButtonVariant.plain, onClick: (event) => {
+                                    onFileSelectToggle(false);
+                                    onFileDelete(file);
+                                    event.stopPropagation();
+                                } },
+                                React.createElement(TrashIcon, { color: "#c9190b" }))))))));
         });
-        return [
-            ...filesAsDropdownItems,
-            ...(filesAsDropdownItems.length > 0 ? [React.createElement(DropdownSeparator, { key: "separator" })] : []),
-            React.createElement(DropdownItem, { key: "separated link", component: attachFileBtn }),
-        ];
+        return isMobile
+            ? [
+                React.createElement(DropdownItem, { key: "separated link", component: attachFileBtn }),
+                ...(filesAsDropdownItems.length > 0 ? [React.createElement(DropdownSeparator, { key: "separator" })] : []),
+                ...filesAsDropdownItems,
+            ]
+            : [
+                ...filesAsDropdownItems,
+                ...(filesAsDropdownItems.length > 0 ? [React.createElement(DropdownSeparator, { key: "separator" })] : []),
+                React.createElement(DropdownItem, { key: "separated link", component: attachFileBtn }),
+            ];
     };
     const bindTextAreaRef = (ref) => {
         textareaRef.current = ref;
@@ -148,16 +179,26 @@ function MarkdownEditor(props) {
         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 (mdValue !== props.value) {
-            setMdValue(props.value);
+        if (value !== mdValue) {
+            setMdValue(value);
         }
-    }, [mdValue, props.value]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
     useEffect(() => {
-        const isPlainMode = props.editorMode === EditorMode.PLAIN ? true : false;
-        if (isPlainMode === isPlainModeEnabled)
-            return;
-        onModeChange(isPlainMode);
+        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(() => {
@@ -174,8 +215,8 @@ function MarkdownEditor(props) {
     }, [mdValue], 500);
     const onValueChangeLocal = (text) => {
         const mode = showMarkdownPlainTextToggle && isPlainModeEnabled ? EditorMode.PLAIN : EditorMode.MARKDOWN;
-        props.onChange(text, mode);
         setMdValue(text);
+        props.onChange(text, mode);
     };
     const textChanged = (event) => {
         let value = event.target.value;
@@ -183,7 +224,12 @@ function MarkdownEditor(props) {
             value = value.replace(emojiPattern, '').trim();
         }
         onValueChangeLocal(value);
-        charLimit - value.length < 0 ? props.onCommentExceedCharsLimit(true) : props.onCommentExceedCharsLimit(false);
+        // 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;
@@ -196,18 +242,95 @@ function MarkdownEditor(props) {
         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 +
-            templateStart +
-            selectedText.trim() +
-            templateEnd +
+            formattedText +
             trailingWhitespace +
             currentText.substring(posEnd);
-        onValueChangeLocal(newText);
+        // Set the value in the textarea
         textareaRef.current.value = newText;
-        textareaRef.current.selectionStart = posEnd + templateStart.length + templateEnd.length;
-        textareaRef.current.selectionEnd = textareaRef.current.selectionStart;
+        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 = () => {
@@ -290,7 +413,7 @@ function MarkdownEditor(props) {
     };
     const quote = () => {
         if (hasSelection()) {
-            wrapSelection('> ', '\n');
+            wrapSelection('> ', '');
         }
         else {
             insert('> QUOTE', 2, 7);
@@ -359,54 +482,117 @@ function MarkdownEditor(props) {
     // editor is disabled and preview is true -> set preview to false
     props.disabled && isPreview && setIsPreview(false);
     const disablePreviewButton = mdValue === '';
-    return (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(Toolbar, { className: "pf-l-flex" },
-            React.createElement(ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
-                React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
-                React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }, "I"),
-                React.createElement("div", { className: "btn-group-separator" }),
-                !props.hideHeadingOptions && (React.createElement(React.Fragment, null,
-                    React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h1, title: "Heading 1", "data-tracking-id": "md-editor-toolbar-h1" }, "H1"),
-                    React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h2, title: "Heading 2", "data-tracking-id": "md-editor-toolbar-h2" }, "H2"),
-                    React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h3, title: "Heading 3", "data-tracking-id": "md-editor-toolbar-h3" }, "H3"),
-                    React.createElement("div", { className: "btn-group-separator" }))),
-                React.createElement(Button, { tabIndex: -1, isDisabled: props.disabled || isPreview, variant: ButtonVariant.plain, onClick: list, title: "Bullet List", "data-tracking-id": "md-editor-toolbar-bul-list" },
-                    React.createElement(ListUlIcon, null)),
-                React.createElement("div", { className: "btn-group-separator" }),
-                React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: link, title: "Link", "data-tracking-id": "md-editor-toolbar-link" },
-                    React.createElement(LinkIcon, null)),
-                React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: quote, title: "Quote", "data-tracking-id": "md-editor-toolbar-quote" },
-                    React.createElement(QuoteRightIcon, null)),
-                React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "md-editor-toolbar-code" },
-                    React.createElement(CodeIcon, null)),
-                showFileSelectorInToolbar && (React.createElement(Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: React.createElement(DropdownToggle, { onToggle: onFileSelectToggle, isDisabled: props.disabled || isPreview },
-                        React.createElement(ImageIcon, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
-            React.createElement(ToolbarItem, null,
-                React.createElement("a", { className: "pf-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")))))),
-        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-l-flex` },
-            React.createElement("span", { className: "markdown-toolbar-left-section" },
-                !isPlainModeEnabled && (React.createElement(Button, { className: "markdown-preview-btn", tabIndex: -1, variant: ButtonVariant.link, onClick: preview, title: "Show preview", "data-tracking-id": `md-preview-${isPreview ? 'hide' : 'show'}`, isDisabled: disablePreviewButton }, 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-u-pl-md" },
-                            React.createElement(Trans, null, "Uploading File"))),
-                    React.createElement(Spinner, { className: "pf-u-ml-sm", size: "md" }))),
-                mdValue.length > props.minCharsForCounter && getCharCountText(mdValue)),
-            React.createElement("span", null,
-                React.createElement(Button, { variant: "plain", className: isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(true), isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" },
-                    React.createElement(Trans, null, "Plain text")),
-                React.createElement(Button, { variant: "plain", className: !isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(false), isDisabled: !isPlainModeEnabled, "data-tracking-id": "md-editor-md" },
-                    React.createElement(Trans, null, "Markdown"))))))));
+    const [isHeadingDropdownOpen, setIsHeadingDropdownOpen] = React.useState(false);
+    const onToggle = (_event, 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-v5-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-v5-l-flex" },
+                    React.createElement(ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
+                        React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
+                        React.createElement(Button, { variant: ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }, "I"),
+                        React.createElement("div", { className: "btn-group-separator" }),
+                        !props.hideHeadingOptions && (React.createElement(React.Fragment, null,
+                            React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h1, title: "Heading 1", "data-tracking-id": "md-editor-toolbar-h1" }, "H1"),
+                            React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h2, title: "Heading 2", "data-tracking-id": "md-editor-toolbar-h2" }, "H2"),
+                            React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h3, title: "Heading 3", "data-tracking-id": "md-editor-toolbar-h3" }, "H3"),
+                            React.createElement("div", { className: "btn-group-separator" }))),
+                        React.createElement(Button, { tabIndex: -1, isDisabled: props.disabled || isPreview, variant: ButtonVariant.plain, onClick: list, title: "Bullet List", "data-tracking-id": "md-editor-toolbar-bul-list" },
+                            React.createElement(ListUlIcon, null)),
+                        React.createElement("div", { className: "btn-group-separator" }),
+                        React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: link, title: "Link", "data-tracking-id": "md-editor-toolbar-link" },
+                            React.createElement(LinkIcon, null)),
+                        React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: quote, title: "Quote", "data-tracking-id": "md-editor-toolbar-quote" },
+                            React.createElement(QuoteRightIcon, null)),
+                        React.createElement(Button, { tabIndex: -1, variant: ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "md-editor-toolbar-code" },
+                            React.createElement(CodeIcon, null)),
+                        showFileSelectorInToolbar && (React.createElement(Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: React.createElement(DropdownToggle, { "aria-label": "file selector", onToggle: (_event, isOpen) => onFileSelectToggle(isOpen), isDisabled: props.disabled || isPreview },
+                                React.createElement(ImageIcon, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
+                    React.createElement(ToolbarItem, null, markdownGuidanceBtn)),
+                React.createElement(Toolbar, { className: "mobile-markdown-toolbar" },
+                    React.createElement("div", { className: "mobile-markdown-toolbar" },
+                        React.createElement(ToolbarGroup, { spaceItems: { default: 'spaceItemsNone' }, "data-tracking-id": "mobile-md-editor-toolbar", className: "markdown-toolbar-left-section" },
+                            !props.hideHeadingOptions && (React.createElement(Dropdown, { isText: true, isPlain: true, onSelect: onHeadingSelect, toggle: React.createElement(DropdownToggle, { id: "heading-selector", onToggle: onToggle }, "Heading"), isOpen: isHeadingDropdownOpen, dropdownItems: [
+                                    React.createElement(DropdownItem, { key: "heading-1", tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: h1, title: "Heading 1", "data-tracking-id": "mobile-md-editor-toolbar-h1" }, "Heading 1"),
+                                    React.createElement(DropdownItem, { tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: h2, title: "Heading 2", "data-tracking-id": "mobile-md-editor-toolbar-h2" }, "Heading 2"),
+                                    React.createElement(DropdownItem, { tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: h3, title: "Heading 3", "data-tracking-id": "mobile-md-editor-toolbar-h3" }, "Heading 3"),
+                                ] })),
+                            React.createElement(Button, { 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" }, "B"),
+                            React.createElement(Button, { 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" }, "I"),
+                            React.createElement(Button, { 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(ListUlIcon, null)),
+                            React.createElement(Button, { 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(CodeIcon, null))),
+                        React.createElement(ToolbarItem, { id: "tools-kebab-menu-container", className: "mobile-markdown-tool-item", spacer: { default: 'spacerSm' } },
+                            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-v5-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.link, onClick: preview, title: "Show preview", "data-tracking-id": `md-preview-${isPreview ? 'hide' : 'show'}`, isDisabled: disablePreviewButton }, 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-v5-u-pl-md uploading-spinner-text" },
+                                React.createElement(Trans, null, "Uploading File"))),
+                        React.createElement(Spinner, { className: "pf-v5-u-ml-sm", size: "sm" }))),
+                    mdValue.length > props.minCharsForCounter && getCharCountText(mdValue)),
+                React.createElement("span", null,
+                    React.createElement(Button, { variant: "plain", className: `${isPlainModeEnabled ? 'markdown-active-mode' : ''} plain-mode-btn`, onClick: () => onModeChange(true), isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" },
+                        React.createElement(Trans, null, "Plain text")),
+                    React.createElement(Button, { variant: "plain", className: `${!isPlainModeEnabled ? 'markdown-active-mode' : ''} markdown-mode-btn`, onClick: () => onModeChange(false), isDisabled: !isPlainModeEnabled, "data-tracking-id": "md-editor-md" },
+                        React.createElement(Trans, null, "Markdown")))))))));
 }
 MarkdownEditor.defaultProps = defaultProps;
 export { MarkdownEditor };

package/lib/esm/MarkdownEditor/markdownEditor.css

@@ -22,10 +22,9 @@
     border: 1px solid #d2d2d2;
     display: block;
     min-height: 100px;
-    overflow: hidden;
 }
 
-.markdown-editor-container .pf-c-toolbar {
+.markdown-editor-container .pf-v5-c-toolbar {
     padding: 0.5rem;
 }
 
@@ -35,6 +34,7 @@
     margin-left: 10px;
     margin-right: 5px;
     width: 1px;
+    margin-top: 10px;
 }
 
 .markdown-content .markdown-text-area {
@@ -65,8 +65,12 @@
     color: #06c;
 }
 
-.markdown-editor-container .markdown-guidance {
-    padding-right: 12px;
+.markdown-editor-container .pf-v5-c-button.pf-m-link.pf-m-inline.markdown-guidance {
+    padding-block-start: 0.375rem;
+    padding-block-end: 0.375rem;
+    padding-inline-start: 0.375rem;
+    padding-inline-end: 0.375rem;
+    box-sizing: border-box;
 }
 
 .markdown-editor-container .character-count-wrapper {
@@ -91,7 +95,6 @@ a[href*='/attachments/']::before,
 button[data-link*='/attachments/']::before {
     margin-right: 4px;
     font-style: normal;
-    font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     content: '📎';
@@ -109,3 +112,108 @@ button[data-link*='/attachments/']::before {
 .markdown-preview {
     border-bottom: none !important;
 }
+
+.desktop-markdown-toolbar {
+    display: flex;
+}
+
+.markdown-toolbar-left-section {
+    display: flex;
+    align-items: center;
+}
+
+.btn-group-separator {
+    display: inline-block;
+    width: 1px;
+    height: 24px;
+    margin: 0 8px;
+    background-color: #ccc;
+}
+
+.markdown-guidance-container {
+    display: none;
+}
+
+.mobile-markdown-toolbar {
+    display: none;
+}
+
+#toolsKebabMenu {
+    overflow: hidden;
+    inset: 0px auto auto -12rem !important;
+
+    .pf-v5-c-menu__list {
+        padding-left: 0px !important;
+        padding-right: 0px !important;
+    }
+
+    .attachments-items li {
+        padding: 0px 10px !important;
+
+        .pf-v5-c-divider {
+            width: 15rem;
+            margin-left: -1rem;
+        }
+    }
+}
+
+/* Mobile toolbar styles */
+@media (max-width: 880px) {
+    .desktop-markdown-toolbar {
+        display: none;
+    }
+
+    .markdown-guidance-container {
+        display: flex;
+        justify-content: flex-end;
+        padding: 9px;
+    }
+
+    .mobile-markdown-toolbar {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        .mobile-markdown-tool-item {
+            width: 2.5rem !important;
+        }
+    }
+
+    .markdown-toolbar-left-section {
+        margin-inline-end: 0px !important;
+    }
+
+    .markdown-preview-btn,
+    .plain-mode-btn,
+    .markdown-mode-btn {
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+
+    .markdown-editor-container .markdown-toggle-toolbar button {
+        font-size: 14px;
+        padding: 10px 0.25rem;
+    }
+}
+
+@media (max-width: 475px) {
+    .markdown-editor-container .pf-v5-c-toolbar {
+        padding: 0.5rem 0rem;
+    }
+
+    .mobile-markdown-toolbar {
+        .mobile-markdown-tool-item {
+            width: 0.1rem !important;
+        }
+
+        #tools-kebab-menu-container {
+            position: relative;
+            right: 2rem;
+        }
+    }
+
+    .uploading-spinner-text {
+        display: none;
+    }
+}

package/lib/esm/MoreOrLess/MoreOrLess.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     className?: string;
     appStickyHeaderRef?: React.MutableRefObject<HTMLElement>;
 }
-declare function MoreOrLess(props: IProps): JSX.Element;
+declare function MoreOrLess(props: IProps): React.JSX.Element;
 declare namespace MoreOrLess {
     var defaultProps: Partial<IProps>;
 }

package/lib/esm/MoreOrLess/MoreOrLess.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreOrLess.d.ts","sourceRoot":"","sources":["../../../src/MoreOrLess/MoreOrLess.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC5D;AAOD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAgEhC;kBAhEQ,UAAU;;;AAoEnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"MoreOrLess.d.ts","sourceRoot":"","sources":["../../../src/MoreOrLess/MoreOrLess.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC5D;AAOD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBAgEhC;kBAhEQ,UAAU;;;AAoEnB,OAAO,EAAE,UAAU,EAAE,CAAC"}