@pnp/spfx-controls-react 3.26.0-beta.3602956 → 4.0.0-beta.3798679

package/lib-commonjs/controls/richText/RichTextPropertyPane.js

@@ -1,675 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var strings = tslib_1.__importStar(require("ControlStrings"));
-var RichTextPropertyPane_module_scss_1 = tslib_1.__importDefault(require("./RichTextPropertyPane.module.scss"));
-var RteColorPicker_1 = tslib_1.__importDefault(require("./RteColorPicker"));
-var Button_1 = require("@fluentui/react/lib/Button");
-var Panel_1 = require("@fluentui/react/lib/Panel");
-var Tooltip_1 = require("@fluentui/react/lib/Tooltip");
-var Dropdown_1 = require("@fluentui/react/lib/Dropdown");
-var ThemeColorHelper_1 = require("../../common/utilities/ThemeColorHelper");
-var FONT_SIZE_OPTIONS = [
-    { key: 'xsmall', text: '10', data: { px: 10 } },
-    { key: 'small', text: '12', data: { px: 12 } },
-    { key: 'medium', text: '14', data: { px: 14 } },
-    { key: 'mediumplus', text: '16', data: { px: 16 } },
-    { key: 'large', text: '18', data: { px: 18 } },
-    { key: 'xlarge', text: '20', data: { px: 20 } },
-    { key: 'xlargeplus', text: '24', data: { px: 24 } },
-    { key: 'xxlarge', text: '28', data: { px: 28 } },
-    { key: 'xxxlarge', text: '32', data: { px: 32 } },
-    { key: 'xxlargeplus', text: '36', data: { px: 36 } },
-    { key: 'super', text: '42', data: { px: 42 } },
-    { key: 'superlarge', text: '68', data: { px: 68 } }
-];
-var RichTextPropertyPane = /** @class */ (function (_super) {
-    tslib_1.__extends(RichTextPropertyPane, _super);
-    function RichTextPropertyPane(props) {
-        var _this = _super.call(this, props) || this;
-        _this._customSizeValuesPx = new Set();
-        /**
-         * On selection changed event handler
-         */
-        _this.onChangeSelection = function (range, oldRange, source) {
-            var quill = _this.props.editor;
-            if (quill === undefined || range === undefined) {
-                return;
-            }
-            if (range) {
-                var formats = quill.getFormat(range);
-                var renderedStyles = _this.getRenderedStyleValues(range);
-                // Keep Quill inline formats as source of truth; only use rendered values as fallback.
-                if ((formats.size === undefined || formats.size === null || formats.size === '') && renderedStyles.size !== undefined) {
-                    formats.size = renderedStyles.size;
-                }
-                if ((formats.color === undefined || formats.color === null || formats.color === '') && renderedStyles.color !== undefined) {
-                    formats.color = renderedStyles.color;
-                }
-                if ((formats.background === undefined || formats.background === null || formats.background === '') && renderedStyles.background !== undefined) {
-                    formats.background = renderedStyles.background;
-                }
-                _this.refreshCustomSizeValuesFromDocument();
-                _this.setState({
-                    formats: formats
-                });
-            }
-        };
-        /**
-         * Reads computed styles from the selected rendered element to keep tracked
-         * formatting values (size, color, highlight) in sync with custom CSS classes.
-         */
-        _this.getRenderedStyleValues = function (range) {
-            var _a, _b;
-            var quill = _this.props.editor;
-            // Access Quill's root DOM element; if unavailable we cannot read computed styles.
-            var editor = quill === null || quill === void 0 ? void 0 : quill.root;
-            if (!editor) {
-                return {};
-            }
-            // Normalize the selection index to a non-negative value.
-            var requestedIndex = Math.max(0, range.index || 0);
-            // For caret selections (length 0), probe one character back when possible.
-            // This helps when the caret sits at a boundary where the next node has different styles.
-            var probeIndex = range.length === 0 && requestedIndex > 0 ? requestedIndex - 1 : requestedIndex;
-            // Line-level node is the most reliable source for block formats (h2/h3/h4/blockquote/etc.).
-            var line = quill.getLine(probeIndex)[0];
-            // Convert Quill line model node to a DOM element we can inspect.
-            var lineElement = line === null || line === void 0 ? void 0 : line.domNode;
-            // Also inspect the exact piece of content where the cursor/selection is,
-            // so inline color/highlight styles can still be detected when needed.
-            var leaf = quill.getLeaf(probeIndex)[0];
-            var leafNode = leaf === null || leaf === void 0 ? void 0 : leaf.domNode;
-            // If leaf is a text node, use its parent element; otherwise use the element directly.
-            var leafElement = (leafNode === null || leafNode === void 0 ? void 0 : leafNode.nodeType) === Node.TEXT_NODE
-                ? leafNode.parentElement
-                : leafNode;
-            // Choose the best target element for style inspection in priority order:
-            // 1) line element (best for block styles),
-            // 2) nearest block-like ancestor from leaf,
-            // 3) leaf element itself,
-            // 4) editor root as final fallback.
-            var targetElement = lineElement
-                || (leafElement === null || leafElement === void 0 ? void 0 : leafElement.closest('h1, h2, h3, h4, h5, h6, blockquote, p, div, li, ul, ol'))
-                || leafElement
-                || editor;
-            try {
-                // Read final, browser-resolved CSS values after all classes/cascades are applied.
-                var computed = getComputedStyle(targetElement);
-                // Parse numeric font size in pixels from values like "18px".
-                var fontSize_1 = parseInt(computed.fontSize, 10);
-                var hasFontSize = !Number.isNaN(fontSize_1);
-                // Resolve to a known Quill size key when it matches one of our supported options.
-                // Example: 28 -> "xxlarge".
-                var sizeKey = hasFontSize
-                    ? (_b = (_a = FONT_SIZE_OPTIONS.find(function (option) { var _a; return ((_a = option.data) === null || _a === void 0 ? void 0 : _a.px) === fontSize_1; })) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.toString()
-                    : undefined;
-                return {
-                    // If size is known, return the Quill key; otherwise return raw px string (display-only fallback).
-                    size: sizeKey || (hasFontSize ? "".concat(fontSize_1, "px") : undefined),
-                    color: computed.color,
-                    background: computed.backgroundColor
-                };
-            }
-            catch (_c) {
-                return {};
-            }
-        };
-        /**
-         * Render the actions group
-         */
-        _this.renderActionsGroup = function () {
-            return (React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupField },
-                React.createElement("div", { className: "ms-CustomFieldHost" },
-                    React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.controlsInOneRow },
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.UndoTitle, id: "undo-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { onClick: _this.handleUndo, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "undo-propertyPaneButton", iconProps: {
-                                    iconName: 'Undo',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.RedoTitle, id: "redo-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { onClick: _this.handleRedo, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "redo-propertyPaneButton", iconProps: {
-                                    iconName: 'Redo',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.ClearFormattingTitle, id: "clearFormatting-button-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { onClick: _this.handleClearFormatting, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "clearFormatting-button-propertyPaneButton", iconProps: {
-                                    iconName: 'ClearFormatting',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } }))))));
-        };
-        /**
-         * Render font styles group
-         */
-        _this.renderFontStylesGroup = function () {
-            var _a;
-            var selectedHeader = ((_a = _this.state.formats) === null || _a === void 0 ? void 0 : _a.header) ? _this.state.formats.header : 0;
-            return (React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupField },
-                React.createElement(Dropdown_1.Dropdown, { label: strings.FontStyleTitle, ariaLabel: strings.FontStyleTitle, selectedKey: selectedHeader, options: [
-                        { key: 0, text: strings.HeaderNormalText },
-                        { key: 2, text: strings.HeaderH2 },
-                        { key: 3, text: strings.HeaderH3 },
-                        { key: 4, text: strings.HeaderH4 },
-                        { key: 7, text: strings.HeaderBlockQuote }
-                    ], onChanged: _this.onChangeHeading })));
-        };
-        /**
-         * Render font size group
-         */
-        _this.renderFontSizesGroup = function () {
-            var _a;
-            // get the selected header
-            var selectedSize = ((_a = _this.state.formats) === null || _a === void 0 ? void 0 : _a.size) ? _this.state.formats.size : 'large';
-            var sizeOptions = _this.buildSortedSizeOptions(selectedSize);
-            return (React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupField },
-                React.createElement(Dropdown_1.Dropdown, { label: strings.FontSizeTitle, ariaLabel: strings.FontSizeTitle, selectedKey: selectedSize, options: sizeOptions, onChanged: _this.onChangeSize })));
-        };
-        /**
-         * Render inline styles group
-         */
-        _this.renderInlineStylesGroup = function () {
-            return (React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupField },
-                React.createElement("div", { className: "ms-CustomFieldHost" },
-                    React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.controlsInOneRow },
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.BoldTitle, id: "bold-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.bold, onClick: function () { return _this.applyFormat('bold', !_this.state.formats.bold); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "bold-propertyPaneButton", iconProps: {
-                                    iconName: 'Bold',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.ItalicTitle, id: "italic-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.italic, onClick: function () { return _this.applyFormat('italic', !_this.state.formats.italic); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "italic-propertyPaneButton", iconProps: {
-                                    iconName: 'Italic',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.UnderlineTitle, id: "underline-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.underline, onClick: function () { return _this.applyFormat('underline', !_this.state.formats.underline); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "underline-propertyPaneButton", iconProps: {
-                                    iconName: 'Underline',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.StrikethroughTitle, id: "strikethrough-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.strike, onClick: function () { return _this.applyFormat('strike', !_this.state.formats.strike); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "strikethrough-propertyPaneButton", iconProps: {
-                                    iconName: 'Strikethrough',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.SuperscriptTitle, id: "superscript-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.script === 'super', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'super' ? '' : 'super'); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "superscript-propertyPaneButton", iconProps: {
-                                    iconName: 'Superscript',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.SubscriptTitle, id: "subscript-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.script === 'sub', onClick: function () { return _this.applyFormat('script', _this.state.formats.script === 'sub' ? '' : 'sub'); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "subscript-propertyPaneButton", iconProps: {
-                                    iconName: 'Subscript',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } }))))));
-        };
-        /**
-         * Render color styles group
-         */
-        _this.renderColorStylesGroup = function () {
-            var color = _this.state.formats.color || ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RichTextPropertyPane_module_scss_1.default.NeutralPrimary);
-            var backgroundColor = _this.state.formats.background || "rgba(0, 0, 0, 0)";
-            var customFontColors = _this.mergeSwatchColors(_this.props.customColors, _this.getCustomStyleSwatchColors('color'));
-            var customHighlightColors = _this.getCustomStyleSwatchColors('backgroundColor');
-            /**
-             * Add custom colors if passed as a property
-             */
-            var fontColorGroups = ["themeColors", "standardColors"];
-            if (customFontColors.length > 0) {
-                fontColorGroups.push('customColors');
-            }
-            var highlightColorGroups = ["highlightColors"];
-            if (customHighlightColors.length > 0) {
-                highlightColorGroups.push('customColors');
-            }
-            return (React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupField },
-                React.createElement("div", { className: "ms-CustomFieldHost" },
-                    React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.controlsInOneRow },
-                        React.createElement(RteColorPicker_1.default, { colorPickerGroups: fontColorGroups, customColors: customFontColors, buttonLabel: strings.FontColorLabel, id: "fontColor-propertyPaneButton", defaultButtonLabel: strings.AutomaticFontColor, fillThemeColor: true, previewColor: color, selectedColor: color, onColorChanged: _this.handleFillColorChanged, switchToDefaultColor: function () { return _this.handleFillColorChanged(undefined); } }),
-                        React.createElement(RteColorPicker_1.default, { buttonLabel: strings.HighlightColorLabel, colorPickerGroups: highlightColorGroups, fillThemeColor: false, onColorChanged: _this.handleHighlightColorChanged, switchToDefaultColor: function () { return _this.handleHighlightColorChanged(undefined); }, previewColor: backgroundColor, defaultButtonLabel: strings.NoColorHighlightColor, selectedColor: backgroundColor, customColors: customHighlightColors, id: "highlightColor-propertyPaneButton" })))));
-        };
-        /**
-         * Render alignment style groups
-         */
-        _this.renderAlignmentStylesGroup = function () {
-            return (React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupField },
-                React.createElement("div", { className: "ms-CustomFieldHost" },
-                    React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.controlsInOneRow },
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.AlignLeft, id: "left-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.align === undefined, onClick: function () { return _this.applyFormat('align', undefined); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "left-propertyPaneButton", iconProps: {
-                                    iconName: 'AlignLeft',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.AlignCenter, id: "center-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.align === 'center', onClick: function () { return _this.applyFormat('align', 'center'); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "center-propertyPaneButton", iconProps: {
-                                    iconName: 'AlignCenter',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.AlignRight, id: "right-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.align === 'right', onClick: function () { return _this.applyFormat('align', 'right'); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "right-propertyPaneButton", iconProps: {
-                                    iconName: 'AlignRight',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.AlignJustify, id: "justify-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.align === 'justify', onClick: function () { return _this.applyFormat('align', 'justify'); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "justify-propertyPaneButton", iconProps: {
-                                    iconName: 'AlignJustify',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.IncreaseIndentTitle, id: "increaseindent-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { onClick: function () { return _this.onChangeIndent(1); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "increaseindent-propertyPaneButton", iconProps: {
-                                    iconName: 'IncreaseIndentText',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.DecreaseIndentTitle, id: "decreaseindent-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { onClick: function () { return _this.onChangeIndent(-1); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "decreaseindent-propertyPaneButton", iconProps: {
-                                    iconName: 'DecreaseIndentText',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } }))))));
-        };
-        /**
-         * Render list styles group
-         */
-        _this.renderListStylesGroup = function () {
-            return React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupField },
-                React.createElement("div", { className: "ms-CustomFieldHost" },
-                    React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.controlsInOneRow },
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.ListBullet, id: "bullet-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.list === 'bullet', onClick: function () { return _this.applyFormat('list', 'bullet'); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "bullet-propertyPaneButton", iconProps: {
-                                    iconName: 'BulletedList',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.ListNumbered, id: "ordered-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.list === 'ordered', onClick: function () { return _this.applyFormat('list', 'ordered'); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "ordered-propertyPaneButton", iconProps: {
-                                    iconName: 'NumberedList',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })))));
-        };
-        /**
-         * Render hyperlink styles group
-         */
-        _this.renderHyperlinkStylesGroup = function () {
-            return (React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupField },
-                React.createElement("div", { className: "ms-CustomFieldHost" },
-                    React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.controlsInOneRow },
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.LinkTitle, id: "link-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { checked: _this.state.formats.link !== undefined, onClick: function () { return _this.props.onLink(); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "link-propertyPaneButton", iconProps: {
-                                    iconName: 'Link',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } })),
-                        React.createElement(Tooltip_1.TooltipHost, { content: strings.RemoveLinkLabel, id: "unlink-propertyPaneButton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { disabled: _this.state.formats.link === undefined, onClick: function () { return _this.applyFormat('link', false); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneButton, "aria-describedby": "unlink-propertyPaneButton", iconProps: {
-                                    iconName: 'RemoveLink',
-                                    style: {
-                                        fontSize: '20px'
-                                    }
-                                } }))))));
-        };
-        /**
-         * Handle fill color change
-         */
-        _this.handleFillColorChanged = function (color) {
-            _this.applyFormat('color', color);
-        };
-        /**
-         * Handle the hightlight color change
-         */
-        _this.handleHighlightColorChanged = function (color) {
-            _this.applyFormat('background', color);
-        };
-        /**
-         * On heading change
-         */
-        _this.onChangeHeading = function (item) {
-            var quill = _this.props.editor;
-            var newHeadingValue = item.key === 0 ? '' : item.key.toString();
-            // Reset explicit font-size so heading defaults (including customStyles) can apply.
-            quill.format('size', false);
-            quill.format('header', newHeadingValue);
-            setTimeout(function () {
-                _this.onChangeSelection(quill.getSelection());
-            }, 100);
-        };
-        /**
-         * On indentation change.
-         */
-        _this.onChangeIndent = function (direction) {
-            var quill = _this.props.editor;
-            var current = +(quill.getFormat(quill.getSelection()).indent || 0);
-            _this.applyFormat("indent", current + direction);
-        };
-        /**
-         * On size change
-         */
-        _this.onChangeSize = function (item) {
-            if (typeof item.key === 'string' && item.key.endsWith('px')) {
-                var quill_1 = _this.props.editor;
-                // This option represents a computed size outside Quill's whitelist.
-                // Clear inline size so block-level/default styles can drive the rendered size.
-                quill_1.format('size', false);
-                setTimeout(function () {
-                    _this.onChangeSelection(quill_1.getSelection());
-                }, 100);
-                return;
-            }
-            var newSizeValue = item.key === 0 ? '' : item.key.toString();
-            _this.applyFormat("size", newSizeValue);
-        };
-        /**
-         * Builds the size dropdown list by combining:
-         * - Quill whitelist sizes,
-         * - font sizes found in custom style classes,
-         * - and rendered custom sizes detected in the editor.
-         *
-         * Duplicate values are keyed by size and collapsed into a single option.
-         */
-        _this.buildSortedSizeOptions = function (selectedSize) {
-            var optionsByKey = {};
-            // Start with standard Quill sizes.
-            FONT_SIZE_OPTIONS.forEach(function (option) {
-                optionsByKey[option.key.toString()] = option;
-            });
-            // Include custom sizes declared in customStyles.
-            _this.getCustomStyleFontSizesPx().forEach(function (px) {
-                var key = "".concat(px, "px");
-                optionsByKey[key] = {
-                    key: key,
-                    text: String(px),
-                    data: { px: px }
-                };
-            });
-            // Include custom rendered sizes detected from current document content.
-            _this._customSizeValuesPx.forEach(function (px) {
-                var key = "".concat(px, "px");
-                optionsByKey[key] = {
-                    key: key,
-                    text: String(px),
-                    data: { px: px }
-                };
-            });
-            // Keep currently selected value visible even if it is no longer in collected options.
-            if (selectedSize && !optionsByKey[selectedSize]) {
-                optionsByKey[selectedSize] = {
-                    key: selectedSize,
-                    text: selectedSize.endsWith('px') ? selectedSize.replace('px', '') : selectedSize
-                };
-            }
-            // Sort numerically so users see a predictable ascending list.
-            return Object.values(optionsByKey)
-                .sort(function (a, b) { return _this.getSizeOptionPx(a) - _this.getSizeOptionPx(b); });
-        };
-        /**
-         * Resolves a dropdown option to a numeric pixel value for sorting.
-         */
-        _this.getSizeOptionPx = function (option) {
-            var _a, _b;
-            // Preferred source: explicit numeric metadata.
-            var value = (_a = option.data) === null || _a === void 0 ? void 0 : _a.px;
-            if (typeof value === 'number' && !Number.isNaN(value)) {
-                return value;
-            }
-            // Fallback: parse displayed text value.
-            var textValue = parseInt(((_b = option.text) === null || _b === void 0 ? void 0 : _b.toString()) || '', 10);
-            // Invalid values are pushed to the end of the list.
-            return Number.isNaN(textValue) ? Number.MAX_SAFE_INTEGER : textValue;
-        };
-        /**
-         * Extracts distinct font sizes (px) from the custom style configuration.
-         */
-        _this.getCustomStyleFontSizesPx = function () {
-            var customStyles = _this.props.customStyles;
-            if (!customStyles) {
-                return [];
-            }
-            var fontSizesPx = new Set();
-            Object.values(customStyles).forEach(function (style) {
-                var fontSize = style === null || style === void 0 ? void 0 : style.fontSize;
-                var fontSizePx = _this.parseStyleSizePx(fontSize);
-                if (fontSizePx !== undefined) {
-                    fontSizesPx.add(fontSizePx);
-                }
-            });
-            return Array.from(fontSizesPx);
-        };
-        /**
-         * Builds a deduplicated color list from custom style declarations for
-         * either font color or background color.
-         */
-        _this.getCustomStyleSwatchColors = function (styleKey) {
-            var customStyles = _this.props.customStyles;
-            if (!customStyles) {
-                return [];
-            }
-            var colorsByValue = {};
-            Object.values(customStyles).forEach(function (style) {
-                var colorValue = style === null || style === void 0 ? void 0 : style[styleKey];
-                if (typeof colorValue !== 'string' || !colorValue.trim()) {
-                    return;
-                }
-                var normalizedColor = colorValue.trim().toLowerCase();
-                colorsByValue[normalizedColor] = {
-                    color: colorValue,
-                    id: "custom-style-".concat(styleKey, "-").concat(normalizedColor.replace(/[^a-z0-9]+/g, '-')),
-                    label: colorValue
-                };
-            });
-            return Object.values(colorsByValue);
-        };
-        /**
-         * Merges multiple color groups into one list and deduplicates by normalized
-         * color value, so the picker does not show repeated entries.
-         */
-        _this.mergeSwatchColors = function () {
-            var colorGroups = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                colorGroups[_i] = arguments[_i];
-            }
-            var colorsByValue = {};
-            colorGroups.forEach(function (group) {
-                group === null || group === void 0 ? void 0 : group.forEach(function (color) {
-                    var normalizedColor = color.color.trim().toLowerCase();
-                    if (!normalizedColor) {
-                        return;
-                    }
-                    colorsByValue[normalizedColor] = color;
-                });
-            });
-            return Object.values(colorsByValue);
-        };
-        /**
-         * Parses a CSS-like font size input into a numeric pixel value.
-         * Accepts number inputs or strings such as "18px".
-         */
-        _this.parseStyleSizePx = function (fontSize) {
-            if (typeof fontSize === 'number' && !Number.isNaN(fontSize)) {
-                return fontSize;
-            }
-            if (typeof fontSize === 'string') {
-                var parsedFontSize = parseInt(fontSize, 10);
-                if (!Number.isNaN(parsedFontSize)) {
-                    return parsedFontSize;
-                }
-            }
-            return undefined;
-        };
-        /**
-         * Scans the rendered editor content and stores non-whitelisted computed
-         * font sizes. These values are exposed in the size dropdown so current
-         * formatting can still be represented to the user.
-         */
-        _this._lastScannedHtml = undefined;
-        _this.refreshCustomSizeValuesFromDocument = function () {
-            var quill = _this.props.editor;
-            var root = quill === null || quill === void 0 ? void 0 : quill.root;
-            if (!root) {
-                return;
-            }
-            // Scanning every element is expensive, so only rescan when the document
-            // content actually changed (selection-only changes reuse the cache).
-            var currentHtml = root.innerHTML;
-            if (currentHtml === _this._lastScannedHtml) {
-                return;
-            }
-            _this._lastScannedHtml = currentHtml;
-            var customSizeValuesPx = new Set();
-            var fontSizeElements = tslib_1.__spreadArray([root], Array.from(root.querySelectorAll('*')), true);
-            fontSizeElements.forEach(function (element) {
-                // Read the final computed font size after CSS cascade is applied.
-                var computedFontSize = getComputedStyle(element).fontSize;
-                var fontSizePx = parseInt(computedFontSize, 10);
-                if (Number.isNaN(fontSizePx)) {
-                    return;
-                }
-                if (FONT_SIZE_OPTIONS.some(function (option) { var _a; return ((_a = option.data) === null || _a === void 0 ? void 0 : _a.px) === fontSizePx; })) {
-                    return;
-                }
-                customSizeValuesPx.add(fontSizePx);
-            });
-            // Replace the cache atomically to keep updates simple and deterministic.
-            _this._customSizeValuesPx = customSizeValuesPx;
-        };
-        /**
-         * Handle the undo action
-         */
-        _this.handleUndo = function () {
-            var quill = _this.props.editor;
-            quill.getModule("history").undo();
-            setTimeout(function () {
-                _this.onChangeSelection(quill.getSelection());
-            }, 100);
-        };
-        /**
-         * Handle the clear formatting action
-         */
-        _this.handleClearFormatting = function () {
-            var quill = _this.props.editor;
-            var range = quill.getSelection();
-            if (range) {
-                if (range.length > 0) {
-                    quill.removeFormat(range.index, range.length);
-                    setTimeout(function () {
-                        _this.onChangeSelection(quill.getSelection());
-                    }, 100);
-                }
-            }
-        };
-        /**
-         * Handle the redo action
-         */
-        _this.handleRedo = function () {
-            var quill = _this.props.editor;
-            quill.getModule("history").redo();
-            setTimeout(function () {
-                _this.onChangeSelection(quill.getSelection());
-            }, 100);
-        };
-        /**
-         * Navigation render
-         */
-        _this.handleRenderNavigation = function () {
-            return (React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.formattingPaneTitle, "aria-hidden": "true" },
-                strings.FormattingPaneTitle,
-                React.createElement(Button_1.IconButton, { onClick: function () { return _this.props.onClose(); }, className: RichTextPropertyPane_module_scss_1.default.propertyPaneClose, iconProps: {
-                        iconName: 'Cancel'
-                    }, title: strings.CloseButton, ariaLabel: strings.CloseButton })));
-        };
-        _this.state = {
-            formats: {}
-        };
-        return _this;
-    }
-    /**
-     * componentDidUpdate lifecycle hook
-     *
-     * @param prevProps
-     * @param prevState
-     */
-    RichTextPropertyPane.prototype.componentDidUpdate = function (prevProps, prevState) {
-        // if we're just opening, sync the format choices with the current selection
-        if (!prevProps.isOpen && this.props.isOpen) {
-            var quill = this.props.editor;
-            if (quill === undefined) {
-                return;
-            }
-            var range = quill.getSelection();
-            this.onChangeSelection(range, undefined, undefined);
-        }
-    };
-    /**
-     * Default React render method
-     */
-    RichTextPropertyPane.prototype.render = function () {
-        return (React.createElement(Panel_1.Panel, { className: RichTextPropertyPane_module_scss_1.default.richTextPropertyPane, isBlocking: false, isOpen: this.props.isOpen, type: Panel_1.PanelType.smallFixedFar, onDismiss: this.props.onClose, closeButtonAriaLabel: strings.CloseButton, onRenderNavigation: this.handleRenderNavigation, focusTrapZoneProps: {
-                forceFocusInsideTrap: false,
-                isClickableOutsideFocusTrap: true
-            } },
-            React.createElement("div", null,
-                React.createElement("div", null,
-                    React.createElement("div", null,
-                        React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupContent },
-                            this.renderActionsGroup(),
-                            this.renderFontStylesGroup(),
-                            this.renderFontSizesGroup(),
-                            this.renderInlineStylesGroup(),
-                            this.renderColorStylesGroup())),
-                    React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupContent },
-                        React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupHeaderNoAccordion }, strings.ParagraphSectionTitle),
-                        this.renderAlignmentStylesGroup(),
-                        this.renderListStylesGroup()),
-                    React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupContent },
-                        React.createElement("div", { className: RichTextPropertyPane_module_scss_1.default.propertyPaneGroupHeaderNoAccordion }, strings.HyperlinkSectionTitle),
-                        this.renderHyperlinkStylesGroup())))));
-    };
-    /**
-     * Apply the new format
-     *
-     * @param name
-     * @param value
-     */
-    RichTextPropertyPane.prototype.applyFormat = function (name, value) {
-        var _this = this;
-        var quill = this.props.editor;
-        quill.format(name, value);
-        setTimeout(function () {
-            _this.onChangeSelection(quill.getSelection());
-        }, 100);
-    };
-    return RichTextPropertyPane;
-}(React.Component));
-exports.default = RichTextPropertyPane;
-//# sourceMappingURL=RichTextPropertyPane.js.map