@rh-support/components 2.5.222 → 2.5.225

package/lib/esm/PhoneInput/PhoneInput.js

@@ -107,7 +107,11 @@ const formatNumber = (fullPhoneNumber, localFormat) => {
         }
     }
     const isPatternWithPrefix = (_a = pattern === null || pattern === void 0 ? void 0 : pattern.replace(/\s+/g, '')) === null || _a === void 0 ? void 0 : _a.startsWith(PREFIX);
+    // TODO: Temporary — return pattern without forcing + prefix for portal phone without country code.
+    pattern = isPatternWithPrefix ? pattern : pattern;
+    /* TODO: Revert to previous logic after phone format handling is finalized.
     pattern = isPatternWithPrefix ? pattern : !isEmpty(isPatternWithPrefix) ? PREFIX + pattern : '';
+    */
     return pattern;
 };
 // return phoneline and countrycode for any given phone
@@ -140,7 +144,11 @@ export function PhoneInput(props) {
     const setLocalFormat = (phoneNumber) => {
         const localPhone = removeAllChars(phoneNumber);
         if (shouldNotSetCountryCode) {
+            // TODO: Temporary — portal phone without country code; use mask without + prefix.
+            return DEFAULT_MASK;
+            /* TODO: Revert to previous logic after phone format handling is finalized.
             return DEFAULT_FORMAT; // default format for portal phone without country code
+            */
         }
         let localFormat;
         const exactCountry = getExactCountry(localPhone);
@@ -169,12 +177,23 @@ export function PhoneInput(props) {
         const localFormat = setLocalFormat(phone);
         const _formattedNumber = formatNumber(phone, localFormat);
         setFormattedNumber(_formattedNumber);
-        if (!(phone === null || phone === void 0 ? void 0 : phone.trim().startsWith(PREFIX)) && regex.test(phone) && !isEqual(phone, '-')) {
+        // TODO: Temporary — do not prepend + when shouldNotSetCountryCode is true.
+        if (!shouldNotSetCountryCode &&
+            !(phone === null || phone === void 0 ? void 0 : phone.trim().startsWith(PREFIX)) &&
+            regex.test(phone) &&
+            !isEqual(phone, '-')) {
             onPhoneValueChange(PREFIX + (phone === null || phone === void 0 ? void 0 : phone.trim()));
         }
         else {
             onPhoneValueChange(phone === null || phone === void 0 ? void 0 : phone.slice(0, localFormat === null || localFormat === void 0 ? void 0 : localFormat.length));
         }
+        /* TODO: Revert to previous logic after phone format handling is finalized.
+        if (!phone?.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
+            onPhoneValueChange(PREFIX + phone?.trim());
+        } else {
+            onPhoneValueChange(phone?.slice(0, localFormat?.length));
+        }
+        */
     };
     const onCountrySelect = (_event, itemId) => {
         var _a, _b;
@@ -233,10 +252,18 @@ export function PhoneInput(props) {
             onPhoneValueChange('');
         }
         else {
+            // TODO: Temporary — strip leading + when shouldNotSetCountryCode is true.
+            const normalizedPhone = shouldNotSetCountryCode ? (phoneValue === null || phoneValue === void 0 ? void 0 : phoneValue.replace(/^\++/, '')) || '' : phoneValue;
+            onPhoneValueChange(normalizedPhone);
+            const localFormat = setLocalFormat(normalizedPhone);
+            const _formattedNumber = formatNumber(normalizedPhone, localFormat);
+            setFormattedNumber(_formattedNumber);
+            /* TODO: Revert to previous logic after phone format handling is finalized.
             onPhoneValueChange(phoneValue);
             const localFormat = setLocalFormat(phoneValue);
             const _formattedNumber = formatNumber(phoneValue, localFormat);
             setFormattedNumber(_formattedNumber);
+            */
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [phoneValue]);
@@ -251,10 +278,20 @@ export function PhoneInput(props) {
         else {
             onCountryCodeChange && onCountryCodeChange(PREFIX + countryCode);
         }
+        // TODO: Temporary — strip leading + when shouldNotSetCountryCode is true.
+        const normalizedPhone = shouldNotSetCountryCode
+            ? removeAllSpaces((phoneValue === null || phoneValue === void 0 ? void 0 : phoneValue.replace(/^\++/, '')) || '')
+            : removeAllSpaces(phoneValue);
+        onPhoneValueChange && onPhoneValueChange(normalizedPhone);
+        const localFormat = setLocalFormat(normalizedPhone);
+        const _formattedNumber = formatNumber(normalizedPhone, localFormat);
+        setFormattedNumber(_formattedNumber);
+        /* TODO: Revert to previous logic after phone format handling is finalized.
         onPhoneValueChange && onPhoneValueChange(removeAllSpaces(phoneValue)); // removing trailing and in between spaces
         const localFormat = setLocalFormat(phoneValue);
         const _formattedNumber = formatNumber(phoneValue, localFormat);
         setFormattedNumber(_formattedNumber);
+        */
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [shouldNotSetCountryCode]);
     const toggle = (React.createElement(MenuToggle, { ref: toggleRef, onClick: () => setIsOpen(!isOpen), isExpanded: isOpen, className: "phone-number-select", "data-tracking-id": "case-phone-number-country-code", isDisabled: props.isDisabled, "aria-label": "Country Code" }, iso2 && phoneValue !== '' ? placeholder : t('Country Code')));

package/lib/esm/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,45 @@
+import './richTextEditor.css';
+import Quill from 'quill';
+import React from 'react';
+export interface IRichTextEditorProps {
+    /** HTML string value */
+    value: string;
+    /** Called with HTML string on change */
+    onChange: (html: string) => void;
+    /** Emit plain text for char counting or previews */
+    onChangePlainText?: (text: string) => void;
+    /** Placeholder text when editor is empty */
+    placeholder?: string;
+    /** Disable the editor */
+    disabled?: boolean;
+    /** CSS class for the outer container */
+    className?: string;
+    /** Unique ID */
+    id?: string;
+    /** Hide the formatting toolbar */
+    hideToolbar?: boolean;
+    /** Character limit (counted against plain text) */
+    charLimit?: number;
+    /** Threshold to show character counter */
+    minCharsForCounter?: number;
+    /** Callback when character limit is exceeded */
+    onCharLimitExceeded?: (exceeded: boolean) => void;
+    /** Editor height */
+    height?: string | number;
+    /** Focus handler */
+    onFocus?: () => void;
+    /** Blur handler */
+    onBlur?: () => void;
+    /** Ref binding for programmatic access to the Quill instance */
+    bindEditor?: (editor: Quill) => void;
+    /** Accessible label */
+    'aria-label'?: string;
+    /**
+     * Async callback invoked when the user selects an image file (via toolbar or paste).
+     * Must upload the file and return the image URL to embed.
+     */
+    onImageUpload?: (file: File) => Promise<string>;
+}
+export declare function RichTextEditor(props: Readonly<IRichTextEditorProps>): React.JSX.Element;
+export default RichTextEditor;
+//# sourceMappingURL=RichTextEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AA+B9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,MAAM,WAAW,oBAAoB;IACjC,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gEAAgE;IAChE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACnD;AAQD,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,qBAgvBnE;AAED,eAAe,cAAc,CAAC"}

package/lib/esm/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,463 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import './richTextEditor.css';
+import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownList, FormGroup, MenuToggle, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, TextInput, Toolbar, ToolbarGroup, } from '@patternfly/react-core';
+import AlignCenterIcon from '@patternfly/react-icons/dist/js/icons/align-center-icon';
+import AlignJustifyIcon from '@patternfly/react-icons/dist/js/icons/align-justify-icon';
+import AlignLeftIcon from '@patternfly/react-icons/dist/js/icons/align-left-icon';
+import AlignRightIcon from '@patternfly/react-icons/dist/js/icons/align-right-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import IndentIcon from '@patternfly/react-icons/dist/js/icons/indent-icon';
+import LinkIcon from '@patternfly/react-icons/dist/js/icons/link-icon';
+import ListOlIcon from '@patternfly/react-icons/dist/js/icons/list-ol-icon';
+import ListUlIcon from '@patternfly/react-icons/dist/js/icons/list-ul-icon';
+import OutdentIcon from '@patternfly/react-icons/dist/js/icons/outdent-icon';
+import RemoveFormatIcon from '@patternfly/react-icons/dist/js/icons/remove-format-icon';
+import StrikethroughIcon from '@patternfly/react-icons/dist/js/icons/strikethrough-icon';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ToastNotification } from '../ToastNotification';
+import { useQuillEditor } from './useQuillEditor';
+const defaultCharLimit = 32000;
+const defaultMinCharsForCounter = 31800;
+const ALLOWED_IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']);
+const IMAGE_SIZE_LIMIT = 2 * 1024 * 1024; // 2 MB
+export function RichTextEditor(props) {
+    const { t } = useTranslation();
+    const { value, onChange, onChangePlainText, placeholder = '', disabled = false, className = '', id = 'rich-text-editor', hideToolbar = false, charLimit = defaultCharLimit, minCharsForCounter = defaultMinCharsForCounter, onCharLimitExceeded, height, onFocus, onBlur, bindEditor, 'aria-label': ariaLabel, onImageUpload, } = props;
+    const [isHeadingDropdownOpen, setIsHeadingDropdownOpen] = useState(false);
+    const [charCount, setCharCount] = useState(0);
+    const charLimitExceededRef = useRef(false);
+    const [isLinkModalOpen, setIsLinkModalOpen] = useState(false);
+    const [linkUrl, setLinkUrl] = useState('');
+    const [linkText, setLinkText] = useState('');
+    const savedSelectionRef = useRef(null);
+    const [isImageModalOpen, setIsImageModalOpen] = useState(false);
+    const [imageUrl, setImageUrl] = useState('');
+    const [imageUrlError, setImageUrlError] = useState('');
+    const savedImageSelectionRef = useRef(null);
+    const [, setIsImageUploading] = useState(false);
+    const fileInputRef = useRef(null);
+    const { editorRef, quillRef, activeFormat, setActiveFormat, setContents, setReadOnly } = useQuillEditor({
+        placeholder,
+        readOnly: disabled,
+        onChange: (html) => {
+            onChange(html);
+        },
+        onChangePlainText: (text) => {
+            onChangePlainText === null || onChangePlainText === void 0 ? void 0 : onChangePlainText(text);
+            setCharCount(text.length);
+        },
+        onFocus,
+        onBlur,
+    });
+    // Sync external value into Quill when it changes externally
+    useEffect(() => {
+        setContents(value);
+    }, [value, setContents]);
+    // Sync disabled state
+    useEffect(() => {
+        setReadOnly(disabled);
+    }, [disabled, setReadOnly]);
+    // Bind editor ref externally
+    useEffect(() => {
+        if (quillRef.current && bindEditor) {
+            bindEditor(quillRef.current);
+        }
+    }, [bindEditor, quillRef]);
+    // Character limit exceeded callback
+    useEffect(() => {
+        const exceeded = charCount > charLimit;
+        if (exceeded !== charLimitExceededRef.current) {
+            charLimitExceededRef.current = exceeded;
+            onCharLimitExceeded === null || onCharLimitExceeded === void 0 ? void 0 : onCharLimitExceeded(exceeded);
+        }
+    }, [charCount, charLimit, onCharLimitExceeded]);
+    const onImageUploadRef = useRef(onImageUpload);
+    onImageUploadRef.current = onImageUpload;
+    useEffect(() => {
+        const editorEl = editorRef.current;
+        if (!editorEl || !onImageUploadRef.current)
+            return;
+        const handlePaste = (e) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!((_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.items))
+                return;
+            const imageItem = Array.from(e.clipboardData.items).find((item) => item.type.startsWith('image/') && ALLOWED_IMAGE_TYPES.has(item.type));
+            if (!imageItem)
+                return;
+            const file = imageItem.getAsFile();
+            if (!file)
+                return;
+            if (file.size > IMAGE_SIZE_LIMIT) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const quill = quillRef.current;
+            if (!quill)
+                return;
+            const range = quill.getSelection() || { index: quill.getLength() - 1, length: 0 };
+            setIsImageUploading(true);
+            try {
+                const url = yield onImageUploadRef.current(file);
+                if (url) {
+                    quill.insertEmbed(range.index, 'image', url);
+                    quill.setSelection(range.index + 1, 0, 'silent');
+                }
+            }
+            catch (_b) {
+                // Error handled by the consumer's upload implementation
+            }
+            finally {
+                setIsImageUploading(false);
+            }
+        });
+        editorEl.addEventListener('paste', handlePaste);
+        return () => {
+            editorEl.removeEventListener('paste', handlePaste);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editorRef, quillRef]);
+    const formatToggle = useCallback((format, value) => {
+        const quill = quillRef.current;
+        if (!quill)
+            return;
+        const selection = quill.getSelection();
+        if (!selection)
+            return;
+        const newValue = value !== null && value !== void 0 ? value : !activeFormat[format];
+        quill.format(format, newValue);
+        setActiveFormat((prev) => {
+            const next = Object.assign({}, prev);
+            if (newValue) {
+                next[format] = newValue;
+            }
+            else {
+                delete next[format];
+            }
+            return next;
+        });
+    }, [activeFormat, quillRef, setActiveFormat]);
+    const onLinkClick = useCallback(() => {
+        const quill = quillRef.current;
+        if (!quill)
+            return;
+        const range = quill.getSelection();
+        if (!range)
+            return;
+        if (activeFormat.link) {
+            quill.format('link', false);
+            setActiveFormat((prev) => {
+                const next = Object.assign({}, prev);
+                delete next.link;
+                return next;
+            });
+        }
+        else {
+            savedSelectionRef.current = { index: range.index, length: range.length };
+            setLinkText(range.length > 0 ? quill.getText(range.index, range.length).trim() : '');
+            setLinkUrl('');
+            setIsLinkModalOpen(true);
+        }
+    }, [activeFormat, quillRef, setActiveFormat]);
+    const onLinkInsert = useCallback(() => {
+        const quill = quillRef.current;
+        const saved = savedSelectionRef.current;
+        const url = linkUrl.trim();
+        const text = linkText.trim() || url;
+        if (!quill || !saved || !url)
+            return;
+        if (saved.length > 0) {
+            quill.setSelection(saved.index, saved.length, 'silent');
+            quill.format('link', url);
+        }
+        else {
+            quill.insertText(saved.index, text, 'link', url, 'user');
+            quill.setSelection(saved.index + text.length, 0, 'silent');
+        }
+        setActiveFormat((prev) => (Object.assign(Object.assign({}, prev), { link: url })));
+        savedSelectionRef.current = null;
+        setIsLinkModalOpen(false);
+        setLinkUrl('');
+        setLinkText('');
+    }, [linkUrl, linkText, quillRef, setActiveFormat]);
+    const onLinkCancel = useCallback(() => {
+        savedSelectionRef.current = null;
+        setIsLinkModalOpen(false);
+        setLinkText('');
+        setLinkUrl('');
+    }, []);
+    const handleFileInputChange = useCallback((e) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (fileInputRef.current)
+            fileInputRef.current.value = '';
+        if (!file || !onImageUpload)
+            return;
+        if (!ALLOWED_IMAGE_TYPES.has(file.type)) {
+            ToastNotification.addDangerMessage(t('Invalid file type. Only JPEG, PNG, GIF, and SVG images are allowed.'));
+            return;
+        }
+        if (file.size > IMAGE_SIZE_LIMIT) {
+            ToastNotification.addDangerMessage(t('File is too large. Maximum size is 2 MB.'));
+            return;
+        }
+        const quill = quillRef.current;
+        const saved = savedImageSelectionRef.current;
+        if (!quill || !saved)
+            return;
+        setIsImageUploading(true);
+        try {
+            const url = yield onImageUpload(file);
+            if (url) {
+                quill.focus();
+                quill.setSelection(saved.index, saved.length, 'silent');
+                quill.insertEmbed(saved.index, 'image', url);
+            }
+        }
+        catch (_b) {
+            ToastNotification.addDangerMessage(t('Failed to upload image.'));
+        }
+        finally {
+            setIsImageUploading(false);
+            savedImageSelectionRef.current = null;
+        }
+    }), [onImageUpload, quillRef, t]);
+    const onImageInsert = useCallback(() => {
+        const quill = quillRef.current;
+        const saved = savedImageSelectionRef.current;
+        if (!quill || !saved || !imageUrl.trim())
+            return;
+        const url = imageUrl.trim();
+        try {
+            const parsed = new URL(url);
+            if (parsed.hostname !== 'redhat.com' && !parsed.hostname.endsWith('.redhat.com')) {
+                setImageUrlError(t('Only *.redhat.com URLs are allowed'));
+                return;
+            }
+        }
+        catch (_a) {
+            setImageUrlError(t('Only *.redhat.com URLs are allowed'));
+            return;
+        }
+        quill.setSelection(saved.index, saved.length, 'silent');
+        quill.insertEmbed(saved.index, 'image', url);
+        savedImageSelectionRef.current = null;
+        setIsImageModalOpen(false);
+        setImageUrl('');
+        setImageUrlError('');
+    }, [imageUrl, quillRef, t]);
+    const onImageCancel = useCallback(() => {
+        savedImageSelectionRef.current = null;
+        setIsImageModalOpen(false);
+        setImageUrl('');
+        setImageUrlError('');
+    }, []);
+    const onImageUrlChange = useCallback((_e, val) => {
+        setImageUrl(val);
+        if (val.trim()) {
+            try {
+                const parsed = new URL(val.trim());
+                if (parsed.hostname !== 'redhat.com' && !parsed.hostname.endsWith('.redhat.com')) {
+                    setImageUrlError(t('Only *.redhat.com URLs are allowed'));
+                }
+                else {
+                    setImageUrlError('');
+                }
+            }
+            catch (_a) {
+                setImageUrlError(t('Only *.redhat.com URLs are allowed'));
+            }
+        }
+        else {
+            setImageUrlError('');
+        }
+    }, [t]);
+    const onImageUrlKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onImageInsert();
+        }
+    }, [onImageInsert]);
+    const onLinkTextChange = useCallback((_e, val) => {
+        setLinkText(val);
+    }, []);
+    const onLinkUrlChange = useCallback((_e, val) => {
+        setLinkUrl(val);
+    }, []);
+    const onLinkUrlKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onLinkInsert();
+        }
+    }, [onLinkInsert]);
+    const onToolbarMouseDown = useCallback((e) => {
+        e.preventDefault();
+    }, []);
+    const onBoldClick = useCallback(() => formatToggle('bold'), [formatToggle]);
+    const onItalicClick = useCallback(() => formatToggle('italic'), [formatToggle]);
+    const onUnderlineClick = useCallback(() => formatToggle('underline'), [formatToggle]);
+    const onStrikethroughClick = useCallback(() => formatToggle('strike'), [formatToggle]);
+    const onIndentClick = useCallback(() => {
+        const quill = quillRef.current;
+        if (!quill)
+            return;
+        const range = quill.getSelection();
+        if (!range)
+            return;
+        const current = quill.getFormat(range).indent || 0;
+        quill.format('indent', current + 1);
+        setActiveFormat((prev) => (Object.assign(Object.assign({}, prev), { indent: current + 1 })));
+    }, [quillRef, setActiveFormat]);
+    const onOutdentClick = useCallback(() => {
+        const quill = quillRef.current;
+        if (!quill)
+            return;
+        const range = quill.getSelection();
+        if (!range)
+            return;
+        const current = quill.getFormat(range).indent || 0;
+        if (current > 0) {
+            quill.format('indent', current - 1 || false);
+            setActiveFormat((prev) => (Object.assign(Object.assign({}, prev), { indent: current - 1 || false })));
+        }
+    }, [quillRef, setActiveFormat]);
+    const onAlignClick = useCallback((alignment) => {
+        const quill = quillRef.current;
+        if (!quill)
+            return;
+        const range = quill.getSelection();
+        if (!range)
+            return;
+        const currentAlign = activeFormat.align || false;
+        const newValue = currentAlign === alignment ? false : alignment;
+        quill.format('align', newValue);
+        setActiveFormat((prev) => {
+            const next = Object.assign({}, prev);
+            if (newValue) {
+                next.align = newValue;
+            }
+            else {
+                delete next.align;
+            }
+            return next;
+        });
+    }, [activeFormat.align, quillRef, setActiveFormat]);
+    const onAlignLeftClick = useCallback(() => onAlignClick(false), [onAlignClick]);
+    const onAlignCenterClick = useCallback(() => onAlignClick('center'), [onAlignClick]);
+    const onAlignRightClick = useCallback(() => onAlignClick('right'), [onAlignClick]);
+    const onAlignJustifyClick = useCallback(() => onAlignClick('justify'), [onAlignClick]);
+    const onRemoveFormatClick = useCallback(() => {
+        const quill = quillRef.current;
+        if (!quill)
+            return;
+        const range = quill.getSelection();
+        if (!range)
+            return;
+        if (range.length === 0) {
+            const [line, offset] = quill.getLine(range.index);
+            if (line) {
+                quill.removeFormat(range.index - offset, line.length());
+            }
+        }
+        else {
+            quill.removeFormat(range.index, range.length);
+        }
+        setActiveFormat(quill.getFormat(range));
+    }, [quillRef, setActiveFormat]);
+    const onHeadingSelect = useCallback(() => setIsHeadingDropdownOpen(false), []);
+    const onHeadingToggleClick = useCallback(() => setIsHeadingDropdownOpen((prev) => !prev), []);
+    const onHeading1Click = useCallback(() => formatToggle('header', 1), [formatToggle]);
+    const onHeading2Click = useCallback(() => formatToggle('header', 2), [formatToggle]);
+    const onHeading3Click = useCallback(() => formatToggle('header', 3), [formatToggle]);
+    const onHeadingNormalClick = useCallback(() => formatToggle('header', false), [formatToggle]);
+    const onBulletListClick = useCallback(() => formatToggle('list', activeFormat.list === 'bullet' ? false : 'bullet'), [formatToggle, activeFormat.list]);
+    const onOrderedListClick = useCallback(() => formatToggle('list', activeFormat.list === 'ordered' ? false : 'ordered'), [formatToggle, activeFormat.list]);
+    const headingToggleRenderer = useCallback((toggleRef) => {
+        const headingLevel = activeFormat.header;
+        const label = headingLevel ? `Heading ${headingLevel}` : 'Normal';
+        return (React.createElement(MenuToggle, { ref: toggleRef, onClick: onHeadingToggleClick, isDisabled: disabled, variant: "plain", "aria-label": `Text style: ${label}`, className: `richtext-toolbar-btn ${headingLevel ? 'pf-m-active' : ''}` },
+            React.createElement("span", { className: "toggle-content" },
+                label,
+                " ",
+                React.createElement(CaretDownIcon, { className: "dropdown-caret" }))));
+    }, [activeFormat.header, disabled, onHeadingToggleClick]);
+    const editorStyle = {};
+    if (height) {
+        editorStyle.height = typeof height === 'number' ? `${height}px` : height;
+    }
+    const showCounter = charCount >= minCharsForCounter;
+    const isOverLimit = charCount > charLimit;
+    return (React.createElement("div", { id: id, className: `richtext-editor-container ${disabled ? 'richtext-editor-container--disabled' : ''} ${className}` },
+        !hideToolbar && (React.createElement(Toolbar, { className: "richtext-toolbar", role: "toolbar", "aria-label": "Formatting options", onMouseDown: onToolbarMouseDown },
+            React.createElement(ToolbarGroup, { className: "richtext-toolbar-left-section" },
+                React.createElement(Button, { variant: ButtonVariant.plain, isClicked: !!activeFormat.bold, isDisabled: disabled, onClick: onBoldClick, "aria-label": "Bold", "aria-pressed": !!activeFormat.bold, className: "richtext-toolbar-btn" },
+                    React.createElement("strong", null, "B")),
+                React.createElement(Button, { variant: ButtonVariant.plain, isClicked: !!activeFormat.italic, isDisabled: disabled, onClick: onItalicClick, "aria-label": "Italic", "aria-pressed": !!activeFormat.italic, className: "richtext-toolbar-btn" },
+                    React.createElement("em", null, "I")),
+                React.createElement(Button, { variant: ButtonVariant.plain, isClicked: !!activeFormat.underline, isDisabled: disabled, onClick: onUnderlineClick, "aria-label": "Underline", "aria-pressed": !!activeFormat.underline, className: "richtext-toolbar-btn" },
+                    React.createElement("u", null, "U")),
+                React.createElement(Button, { icon: React.createElement(StrikethroughIcon, null), variant: ButtonVariant.plain, isClicked: !!activeFormat.strike, isDisabled: disabled, onClick: onStrikethroughClick, "aria-label": "Strikethrough", "aria-pressed": !!activeFormat.strike, className: "richtext-toolbar-btn" }),
+                React.createElement("div", { className: "btn-group-separator" }),
+                React.createElement(Dropdown, { isOpen: isHeadingDropdownOpen, onSelect: onHeadingSelect, onOpenChange: setIsHeadingDropdownOpen, toggle: headingToggleRenderer },
+                    React.createElement(DropdownList, null,
+                        React.createElement(DropdownItem, { key: "h1", onClick: onHeading1Click }, "Heading 1"),
+                        React.createElement(DropdownItem, { key: "h2", onClick: onHeading2Click }, "Heading 2"),
+                        React.createElement(DropdownItem, { key: "h3", onClick: onHeading3Click }, "Heading 3"),
+                        React.createElement(DropdownItem, { key: "normal", onClick: onHeadingNormalClick }, "Normal"))),
+                React.createElement("div", { className: "btn-group-separator" }),
+                React.createElement(Button, { icon: React.createElement(ListUlIcon, null), variant: ButtonVariant.plain, isClicked: activeFormat.list === 'bullet', isDisabled: disabled, onClick: onBulletListClick, "aria-label": "Bullet List", "aria-pressed": activeFormat.list === 'bullet', className: "richtext-toolbar-btn" }),
+                React.createElement(Button, { icon: React.createElement(ListOlIcon, null), variant: ButtonVariant.plain, isClicked: activeFormat.list === 'ordered', isDisabled: disabled, onClick: onOrderedListClick, "aria-label": "Ordered List", "aria-pressed": activeFormat.list === 'ordered', className: "richtext-toolbar-btn" }),
+                React.createElement(Button, { icon: React.createElement(IndentIcon, null), variant: ButtonVariant.plain, isDisabled: disabled, onClick: onIndentClick, "aria-label": "Indent", className: "richtext-toolbar-btn" }),
+                React.createElement(Button, { icon: React.createElement(OutdentIcon, null), variant: ButtonVariant.plain, isDisabled: disabled, onClick: onOutdentClick, "aria-label": "Outdent", className: "richtext-toolbar-btn" }),
+                React.createElement("div", { className: "btn-group-separator" }),
+                React.createElement(Button, { icon: React.createElement(AlignLeftIcon, null), variant: ButtonVariant.plain, isClicked: !activeFormat.align, isDisabled: disabled, onClick: onAlignLeftClick, "aria-label": "Align Left", "aria-pressed": !activeFormat.align, className: "richtext-toolbar-btn" }),
+                React.createElement(Button, { icon: React.createElement(AlignCenterIcon, null), variant: ButtonVariant.plain, isClicked: activeFormat.align === 'center', isDisabled: disabled, onClick: onAlignCenterClick, "aria-label": "Align Center", "aria-pressed": activeFormat.align === 'center', className: "richtext-toolbar-btn" }),
+                React.createElement(Button, { icon: React.createElement(AlignRightIcon, null), variant: ButtonVariant.plain, isClicked: activeFormat.align === 'right', isDisabled: disabled, onClick: onAlignRightClick, "aria-label": "Align Right", "aria-pressed": activeFormat.align === 'right', className: "richtext-toolbar-btn" }),
+                React.createElement(Button, { icon: React.createElement(AlignJustifyIcon, null), variant: ButtonVariant.plain, isClicked: activeFormat.align === 'justify', isDisabled: disabled, onClick: onAlignJustifyClick, "aria-label": "Justify", "aria-pressed": activeFormat.align === 'justify', className: "richtext-toolbar-btn" }),
+                React.createElement("div", { className: "btn-group-separator" }),
+                React.createElement(Button, { icon: React.createElement(LinkIcon, null), variant: ButtonVariant.plain, isClicked: !!activeFormat.link, isDisabled: disabled, onClick: onLinkClick, "aria-label": "Link", "aria-pressed": !!activeFormat.link, className: "richtext-toolbar-btn" }),
+                React.createElement(Button, { icon: React.createElement(RemoveFormatIcon, null), variant: ButtonVariant.plain, isDisabled: disabled, onClick: onRemoveFormatClick, "aria-label": "Remove Format", className: "richtext-toolbar-btn" })))),
+        React.createElement("div", { ref: editorRef, role: "textbox", className: "richtext-editor-content", style: editorStyle, "aria-label": ariaLabel, tabIndex: -1, onClick: () => { var _a, _b; return (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[contenteditable="true"]')) === null || _b === void 0 ? void 0 : _b.focus(); }, onKeyDown: (e) => {
+                var _a, _b;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    (_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[contenteditable="true"]')) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+            } }),
+        showCounter && (React.createElement("div", { className: `richtext-char-counter ${isOverLimit ? 'richtext-char-counter--exceeded' : ''}` },
+            charCount,
+            "/",
+            charLimit)),
+        React.createElement(Modal, { variant: ModalVariant.small, isOpen: isLinkModalOpen, onClose: onLinkCancel, "aria-labelledby": "insert-link-title" },
+            React.createElement(ModalHeader, { title: "Insert link", labelId: "insert-link-title" }),
+            React.createElement(ModalBody, null,
+                React.createElement(FormGroup, { label: "Display text", fieldId: "link-text-input" },
+                    React.createElement(TextInput, { id: "link-text-input", value: linkText, onChange: onLinkTextChange, placeholder: "Link text (defaults to URL)" })),
+                React.createElement(FormGroup, { label: "URL", isRequired: true, fieldId: "link-url-input" },
+                    React.createElement(TextInput, { id: "link-url-input", type: "url", value: linkUrl, onChange: onLinkUrlChange, placeholder: "https://", onKeyDown: onLinkUrlKeyDown }))),
+            React.createElement(ModalFooter, null,
+                React.createElement(Button, { variant: ButtonVariant.primary, onClick: onLinkInsert, isDisabled: !linkUrl.trim() }, "Insert"),
+                React.createElement(Button, { variant: ButtonVariant.link, onClick: onLinkCancel }, "Cancel"))),
+        React.createElement("input", { ref: fileInputRef, type: "file", accept: "image/jpeg,image/png,image/gif,image/svg+xml", style: { display: 'none' }, onChange: handleFileInputChange, tabIndex: -1 }),
+        !onImageUpload && (React.createElement(Modal, { variant: ModalVariant.small, isOpen: isImageModalOpen, onClose: onImageCancel, "aria-labelledby": "insert-image-title" },
+            React.createElement(ModalHeader, { title: "Insert image", labelId: "insert-image-title" }),
+            React.createElement(ModalBody, null,
+                React.createElement(FormGroup, { label: "Image URL", isRequired: true, fieldId: "image-url-input" },
+                    React.createElement(TextInput, { id: "image-url-input", type: "url", value: imageUrl, validated: imageUrlError ? 'error' : 'default', onChange: onImageUrlChange, placeholder: "https://example.redhat.com/image.png", onKeyDown: onImageUrlKeyDown }),
+                    imageUrlError && (React.createElement(FormGroup, null,
+                        React.createElement("span", { className: "pf-v6-u-danger-color-100 pf-v6-u-font-size-sm" }, imageUrlError))))),
+            React.createElement(ModalFooter, null,
+                React.createElement(Button, { variant: ButtonVariant.primary, onClick: onImageInsert, isDisabled: !imageUrl.trim() || !!imageUrlError }, "Insert"),
+                React.createElement(Button, { variant: ButtonVariant.link, onClick: onImageCancel }, "Cancel"))))));
+}
+export default RichTextEditor;

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

@@ -0,0 +1,4 @@
+export * from './RichTextEditor';
+export { useQuillEditor } from './useQuillEditor';
+export type { UseQuillEditorOptions } from './useQuillEditor';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/esm/RichTextEditor/index.js

@@ -0,0 +1,2 @@
+export * from './RichTextEditor';
+export { useQuillEditor } from './useQuillEditor';