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

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

@@ -1,919 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichText = void 0;
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var strings = tslib_1.__importStar(require("ControlStrings"));
-require("react-quill/dist/quill.snow.css");
-var RichTextPropertyPane_1 = tslib_1.__importDefault(require("./RichTextPropertyPane"));
-var react_quill_1 = tslib_1.__importStar(require("react-quill"));
-var RichText_module_scss_1 = tslib_1.__importDefault(require("./RichText.module.scss"));
-var sp_core_library_1 = require("@microsoft/sp-core-library");
-var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
-var isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
-var Button_1 = require("@fluentui/react/lib/Button");
-var Tooltip_1 = require("@fluentui/react/lib/Tooltip");
-var Dialog_1 = require("@fluentui/react/lib/Dialog");
-var TextField_1 = require("@fluentui/react/lib/TextField");
-var Link_1 = require("@fluentui/react/lib/Link");
-var Button_2 = require("@fluentui/react/lib/Button");
-var Dropdown_1 = require("@fluentui/react/lib/Dropdown");
-var Icon_1 = require("@fluentui/react/lib/Icon");
-var Utilities_1 = require("@fluentui/react/lib/Utilities");
-var Icons_1 = require("@fluentui/react/lib/Icons");
-var Label_1 = require("@fluentui/react/lib/Label");
-var ThemeColorHelper_1 = require("../../common/utilities/ThemeColorHelper");
-var CONTAINER_CLASS = 'pnp-richtext-quill-container';
-var CUSTOM_FORMATTING_STYLE_SELECTORS = {
-    normal: '',
-    header2: 'h2',
-    header3: 'h3',
-    header4: 'h4',
-    blockQuote: 'blockquote',
-    div: 'div',
-    p: 'p',
-    ul: 'ul',
-    ol: 'ol',
-    li: 'li',
-};
-var UNITLESS_CSS_PROPERTIES = (function () {
-    var properties = new Set([
-        'animationIterationCount',
-        'aspectRatio',
-        'borderImageOutset',
-        'borderImageSlice',
-        'borderImageWidth',
-        'boxFlex',
-        'boxFlexGroup',
-        'boxOrdinalGroup',
-        'columnCount',
-        'columns',
-        'fillOpacity',
-        'flex',
-        'flexGrow',
-        'flexPositive',
-        'flexShrink',
-        'flexNegative',
-        'flexOrder',
-        'floodOpacity',
-        'fontWeight',
-        'gridArea',
-        'gridColumn',
-        'gridColumnEnd',
-        'gridColumnSpan',
-        'gridColumnStart',
-        'gridRow',
-        'gridRowEnd',
-        'gridRowSpan',
-        'gridRowStart',
-        'lineClamp',
-        'lineHeight',
-        'opacity',
-        'order',
-        'orphans',
-        'scale',
-        'stopOpacity',
-        'strokeDasharray',
-        'strokeDashoffset',
-        'strokeMiterlimit',
-        'strokeOpacity',
-        'strokeWidth',
-        'tabSize',
-        'widows',
-        'zIndex',
-        'zoom',
-    ]);
-    var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
-    var baseProperties = Array.from(properties);
-    baseProperties.forEach(function (propertyName) {
-        var capitalizedPropertyName = propertyName.charAt(0).toUpperCase() + propertyName.slice(1);
-        prefixes.forEach(function (prefix) {
-            properties.add("".concat(prefix).concat(capitalizedPropertyName));
-        });
-    });
-    return properties;
-})();
-/**
- * Creates a rich text editing control that mimics the out-of-the-box
- * SharePoint Rich Text control.
- * NOTE:
- * Quill.js has a few quirks that we can't work around
- * - Block quotes only work on single lines. This is a frequently-requested feature with Quill that isn't available yet.
- * - Tables aren't supported yet. I'll gladly add table formatting support if users request it.
- */
-(0, Icons_1.initializeIcons)();
-var RichText = /** @class */ (function (_super) {
-    tslib_1.__extends(RichText, _super);
-    function RichText(props) {
-        var _a;
-        var _this = _super.call(this, props) || this;
-        _this._quillElem = undefined;
-        _this._wrapperRef = undefined;
-        _this._propertyPaneRef = undefined;
-        _this._toolbarId = undefined;
-        _this._richTextId = undefined;
-        _this._customFormattingStylesElement = undefined;
-        _this.ddStyleOpts = [
-            {
-                key: 2,
-                text: strings.HeaderH2,
-                data: { className: RichText_module_scss_1.default.toolbarButtonH2 },
-            },
-            {
-                key: 3,
-                text: strings.HeaderH3,
-                data: { className: RichText_module_scss_1.default.toolbarButtonH3 },
-            },
-            {
-                key: 4,
-                text: strings.HeaderH4,
-                data: { className: RichText_module_scss_1.default.toolbarButtonH4 },
-            },
-            {
-                key: 0,
-                text: strings.HeaderNormalText,
-                data: { className: RichText_module_scss_1.default.toolbarButtonNormal },
-            },
-            {
-                key: 7,
-                text: strings.HeaderBlockQuote,
-                data: { className: RichText_module_scss_1.default.toolbarButtonBlockQuote },
-            },
-        ];
-        _this.ddAlignOpts = [
-            {
-                key: 'left',
-                text: strings.AlignLeft,
-                data: { icon: 'AlignLeft' },
-            },
-            {
-                key: 'center',
-                text: strings.AlignCenter,
-                data: { icon: 'AlignCenter' },
-            },
-            {
-                key: 'right',
-                text: strings.AlignRight,
-                data: { icon: 'AlignRight' },
-            },
-        ];
-        _this.ddListOpts = [
-            {
-                key: 'bullet',
-                text: strings.ListBullet,
-                data: { icon: 'BulletedList' },
-            },
-            {
-                key: 'ordered',
-                text: strings.ListNumbered,
-                data: { icon: 'NumberedList' },
-            },
-        ];
-        /**
-         * Returns a handle to the Quill editor
-         */
-        _this.getEditor = function () {
-            try {
-                return _this._quillElem.getEditor();
-            }
-            catch (_a) {
-                return undefined;
-            }
-        };
-        /**
-         * Renders the "Insert Link" dialog
-         */
-        _this.renderLinkDialog = function () {
-            return (React.createElement(Dialog_1.Dialog, { hidden: _this.state.hideDialog, onDismiss: _this.closeDialog, dialogContentProps: {
-                    type: Dialog_1.DialogType.normal,
-                    title: strings.InsertLinkTitle,
-                }, modalProps: {
-                    className: RichText_module_scss_1.default.insertLinkDialog,
-                    isBlocking: true,
-                    containerClassName: 'ms-dialogMainOverride',
-                } },
-                React.createElement(TextField_1.TextField, { label: strings.AddressFieldLabel, placeholder: "https://", value: _this.state.insertUrl !== undefined ? _this.state.insertUrl : '', onChange: function (e, newValue) {
-                        _this.setState({
-                            insertUrl: newValue,
-                        });
-                    } }),
-                React.createElement(TextField_1.TextField, { label: strings.TextToDisplayLabel, value: _this.state.insertUrlText, onChange: function (e, newValue) {
-                        if (newValue !== _this.state.insertUrlText) {
-                            _this.setState({
-                                insertUrlText: newValue,
-                            });
-                        }
-                    } }),
-                React.createElement(Dialog_1.DialogFooter, { className: RichText_module_scss_1.default.actions },
-                    React.createElement("div", { className: "ms-Dialog-actionsRight ".concat(RichText_module_scss_1.default.actionsRight) },
-                        _this.state.selectedUrl && (React.createElement(Link_1.Link, { className: "".concat(RichText_module_scss_1.default.action, " ").concat(RichText_module_scss_1.default.unlinkButton), onClick: _this.handleRemoveLink }, strings.RemoveLinkLabel)),
-                        React.createElement(Button_2.PrimaryButton, { className: RichText_module_scss_1.default.action, onClick: _this.handleCreateLink, text: strings.SaveButtonLabel, disabled: _this.checkLinkUrl() }),
-                        React.createElement(Button_2.DefaultButton, { className: RichText_module_scss_1.default.action, onClick: _this.closeDialog, text: strings.CancelButtonLabel })))));
-        };
-        /**
-         * Renders the "Insert Image" dialog
-         */
-        _this.renderImageDialog = function () {
-            return (React.createElement(Dialog_1.Dialog, { hidden: _this.state.hideImageDialog, onDismiss: _this.closeImageDialog, dialogContentProps: {
-                    type: Dialog_1.DialogType.normal,
-                    title: strings.InsertImageTitle,
-                }, modalProps: {
-                    className: RichText_module_scss_1.default.insertLinkDialog,
-                    isBlocking: true,
-                    containerClassName: 'ms-dialogMainOverride',
-                } },
-                React.createElement(TextField_1.TextField, { label: strings.AddressFieldLabel, value: _this.state.insertImageUrl !== undefined
-                        ? _this.state.insertImageUrl
-                        : '', onChange: function (e, newValue) {
-                        _this.setState({
-                            insertImageUrl: newValue,
-                        });
-                    } }),
-                React.createElement(Dialog_1.DialogFooter, { className: RichText_module_scss_1.default.actions },
-                    React.createElement("div", { className: "ms-Dialog-actionsRight ".concat(RichText_module_scss_1.default.actionsRight) },
-                        React.createElement(Button_2.PrimaryButton, { className: RichText_module_scss_1.default.action, onClick: _this.handleInsertImage, text: strings.SaveButtonLabel, disabled: _this.checkImageLinkUrl() }),
-                        React.createElement(Button_2.DefaultButton, { className: RichText_module_scss_1.default.action, onClick: _this.closeImageDialog, text: strings.CancelButtonLabel })))));
-        };
-        /**
-         * Style trigger events
-         */
-        _this.onChangeBold = function () {
-            var newBoldValue = !_this.state.formats.bold;
-            _this.applyFormat('bold', newBoldValue);
-        };
-        _this.onChangeItalic = function () {
-            var newValue = !_this.state.formats.italic;
-            _this.applyFormat('italic', newValue);
-        };
-        _this.onChangeUnderline = function () {
-            var newValue = !_this.state.formats.underline;
-            _this.applyFormat('underline', newValue);
-        };
-        _this.onChangeHeading = function (_event, item, _index) {
-            var newHeadingValue = item.key === 0 ? '' : item.key.toString();
-            _this.applyFormat('header', newHeadingValue);
-        };
-        _this.onChangeAlign = function (_event, item, _index) {
-            var newAlignValue = item.key === 'left' ? false : item.key.toString();
-            _this.applyFormat('align', newAlignValue);
-        };
-        _this.onChangeList = function (_event, item, _index) {
-            // if we're already in list mode, toggle off
-            var key = item.key;
-            var newAlignValue = (key === 'bullet' && _this.state.formats.list === 'bullet') ||
-                (key === 'ordered' && _this.state.formats.list === 'ordered')
-                ? false
-                : key;
-            _this.applyFormat('list', newAlignValue);
-        };
-        /**
-         * Displays the insert link dialog
-         */
-        _this.showInsertLinkDialog = function () {
-            var quill = _this.getEditor();
-            var range = quill.getSelection();
-            var linkText = _this.state.selectedText;
-            if (_this.state.selectedUrl !== undefined &&
-                _this.state.selectedText === '') {
-                var text = _this.state.text;
-                var urlStartIndex = text.indexOf(_this.state.selectedUrl);
-                var startTextIndex = text.indexOf('>', urlStartIndex) + 1;
-                var endTextIndex = text.indexOf('<', startTextIndex);
-                var realLength = endTextIndex - startTextIndex;
-                linkText = text.substr(startTextIndex, realLength);
-                //Find where the link text starts and select that
-                var editorText = quill.getText();
-                var linkStart = editorText.indexOf(linkText);
-                range.index = linkStart;
-                range.length = linkText.length;
-            }
-            _this.setState({
-                hideDialog: false,
-                insertUrlText: linkText,
-                insertUrl: _this.state.selectedUrl,
-                selectedRange: range,
-            });
-        };
-        /**
-         * Hides the insert link dialog
-         */
-        _this.closeDialog = function () {
-            _this.setState({ hideDialog: true });
-        };
-        /**
-         * Displays the insert link dialog
-         */
-        _this.showInsertImageDialog = function () {
-            var quill = _this.getEditor();
-            var range = quill.getSelection();
-            _this.setState({
-                hideImageDialog: false,
-                selectedRange: range,
-            });
-        };
-        /**
-         * Hides the insert image dialog
-         */
-        _this.closeImageDialog = function () {
-            _this.setState({
-                hideImageDialog: true,
-                insertImageUrl: undefined,
-            });
-        };
-        /**
-         * When user enters the richtext editor, displays the border
-         */
-        _this.handleOnFocus = function (range, source, editor) {
-            if (!_this.state.editing) {
-                _this.setState({ editing: true });
-            }
-        };
-        /**
-         * Called when user removes the link
-         */
-        _this.handleRemoveLink = function () {
-            var quill = _this.getEditor();
-            quill.format('link', false);
-            _this.closeDialog();
-        };
-        /**
-         * Called when user creates a new link
-         */
-        _this.handleCreateLink = function () {
-            var quill = _this.getEditor();
-            var range = _this.state.selectedRange;
-            var cursorPosition = range.index;
-            if (range.length > 0) {
-                quill.deleteText(range.index, range.length);
-            }
-            if (cursorPosition > -1) {
-                var textToInsert = _this.state.insertUrlText !== undefined &&
-                    _this.state.insertUrlText !== ''
-                    ? _this.state.insertUrlText
-                    : _this.state.insertUrl;
-                var urlToInsert = _this.state.insertUrl;
-                quill.insertText(cursorPosition, textToInsert);
-                quill.setSelection(cursorPosition, textToInsert.length);
-                quill.formatText(cursorPosition, textToInsert.length, 'link', urlToInsert);
-            }
-            _this.setState({
-                hideDialog: true,
-                insertUrl: undefined,
-                insertUrlText: undefined,
-            });
-        };
-        /**
-         * Called when user insert an image
-         */
-        _this.handleInsertImage = function () {
-            var _a = _this.state, insertImageUrl = _a.insertImageUrl, selectedRange = _a.selectedRange;
-            try {
-                var quill = _this.getEditor();
-                var cursorPosition = selectedRange.index;
-                quill.insertEmbed(cursorPosition, 'image', insertImageUrl, 'user');
-                _this.setState({
-                    insertImageUrl: undefined,
-                    hideImageDialog: true,
-                });
-            }
-            catch (_b) {
-                //Close the image dialog if something went wrong
-                _this.setState({
-                    insertImageUrl: undefined,
-                    hideImageDialog: true,
-                });
-            }
-        };
-        /**
-         * Disable Save-button if hyperlink is undefined or empty
-         * This prevents the user of adding an empty hyperlink
-         */
-        _this.checkLinkUrl = function () {
-            if (_this.state.insertUrl !== undefined && _this.state.insertUrl !== '') {
-                return false;
-            }
-            return true;
-        };
-        /**
-         * Disable Save-button if hyperlink for the imported image is undefined or empty
-         * This prevents the user of adding an empty image
-         */
-        _this.checkImageLinkUrl = function () {
-            if (_this.state.insertImageUrl !== undefined &&
-                _this.state.insertImageUrl !== '') {
-                return false;
-            }
-            return true;
-        };
-        /**
-         * Called when richtext selection changes
-         */
-        _this.handleChangeSelection = function (range, oldRange, source) {
-            var quill = _this.getEditor();
-            try {
-                if (quill) {
-                    // Get the selected text
-                    var selectedText = quill.getText(range);
-                    // Get the current format
-                    var formats = quill.getFormat(range);
-                    // Get the currently selected url
-                    var selectedUrl = formats.link ? formats.link : undefined;
-                    _this.setState({
-                        selectedText: selectedText,
-                        selectedUrl: selectedUrl,
-                        formats: formats,
-                    });
-                    if (_this._propertyPaneRef && _this.state.morePaneVisible) {
-                        _this._propertyPaneRef.onChangeSelection(range, oldRange, source);
-                    }
-                }
-            }
-            catch (_a) {
-                // no-op;
-            }
-        };
-        /**
-         * Called when user clicks on the close icon
-         */
-        _this.handleClosePanel = function () {
-            _this.closePanel();
-        };
-        /**
-         * Closes the panel
-         */
-        _this.closePanel = function () {
-            _this.setState({ morePaneVisible: false });
-        };
-        /**
-         * Called when user clicks on the more button
-         */
-        _this.handleShowMore = function () {
-            _this.setState({
-                morePaneVisible: !_this.state.morePaneVisible,
-            }, function () {
-                _this.getEditor().focus();
-            });
-        };
-        /**
-         * Called when user changes the text of the editor
-         */
-        _this.handleChange = function (value) {
-            var onChange = _this.props.onChange;
-            var newState = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
-            var quill = _this.getEditor();
-            if (quill) {
-                var range = quill.getSelection();
-                if (range) {
-                    var formats = quill.getFormat(range);
-                    if (!(0, isEqual_1.default)(formats, _this.state.formats)) {
-                        newState.formats = formats;
-                    }
-                }
-            }
-            // do we need to pass this to a handler?
-            if (onChange) {
-                // yes, get the changed text from the handler
-                var newText = onChange(value);
-                newState.text = newText;
-            }
-            else {
-                // no, write the text to the state
-                newState.text = value;
-            }
-            _this.setState(tslib_1.__assign({}, newState));
-        };
-        /**
-         * Keeps track of whether we clicked outside the element
-         */
-        _this.handleClickOutside = function (event) {
-            var outside = !(0, Utilities_1.elementContains)(_this._wrapperRef, event.target);
-            // Did we click outside?
-            if (outside) {
-                // If we are currently editing, stop editing
-                // -- unless we're using the property pane or the dialog
-                if (_this.state.editing) {
-                    _this.setState({
-                        editing: false,
-                    });
-                }
-            }
-            else {
-                // We clicked inside
-                if (!_this.state.editing) {
-                    // if we aren't currently editing, start editing
-                    _this.setState({ editing: true });
-                }
-            }
-        };
-        /**
-         * Links to the quill reference
-         */
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        _this.linkQuill = function (e) {
-            _this._quillElem = e;
-            _this.applyCustomFormattingStyles();
-        };
-        /**
-         * Links to the property pane element
-         */
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        _this.linkPropertyPane = function (e) {
-            _this._propertyPaneRef = e;
-        };
-        /**
-         * Renders the label above the rich text (if specified)
-         */
-        _this.onRenderLabel = function () {
-            var label = _this.props.label;
-            if (label) {
-                return React.createElement(Label_1.Label, { htmlFor: _this._richTextId }, label);
-            }
-            return null;
-        };
-        /**
-         * Build and inject object-based custom formatting styles scoped to this editor instance.
-         */
-        _this.applyCustomFormattingStyles = function () {
-            var formattingStyles = _this.props.customStyles;
-            // No custom formatting means any previously injected rules should be removed.
-            if (!formattingStyles) {
-                _this.removeCustomFormattingStylesElement();
-                return;
-            }
-            // Read mode uses the id directly on .ql-editor, edit mode renders .ql-editor inside an id'd wrapper.
-            var escapedRichTextId = typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
-                ? CSS.escape(_this._richTextId)
-                : _this._richTextId;
-            var baseSelectors = [
-                "#".concat(escapedRichTextId, ".ql-editor"),
-                "#".concat(escapedRichTextId, " .ql-editor"),
-            ];
-            var rules = [];
-            Object.keys(CUSTOM_FORMATTING_STYLE_SELECTORS).forEach(function (key) {
-                var styleObject = formattingStyles[key];
-                var declaration = _this.serializeStyleObject(styleObject);
-                // Skip empty style blocks so we don't emit empty CSS rules.
-                if (!declaration) {
-                    return;
-                }
-                var selectorSuffix = CUSTOM_FORMATTING_STYLE_SELECTORS[key];
-                // Build selectors per key, for example: root h2, root blockquote, root li.
-                var selector = selectorSuffix
-                    ? baseSelectors.map(function (base) { return "".concat(base, " ").concat(selectorSuffix); }).join(', ')
-                    : baseSelectors.join(', ');
-                rules.push("".concat(selector, " { ").concat(declaration, " }"));
-            });
-            // Store one style sheet text blob for this instance.
-            var styleText = rules.join('\n');
-            if (!styleText) {
-                _this.removeCustomFormattingStylesElement();
-                return;
-            }
-            // Create the style element once, then only update its text content.
-            if (!_this._customFormattingStylesElement) {
-                _this._customFormattingStylesElement = document.createElement('style');
-                _this._customFormattingStylesElement.setAttribute('data-richtext-formatting', _this._richTextId);
-                document.head.appendChild(_this._customFormattingStylesElement);
-            }
-            _this._customFormattingStylesElement.textContent = styleText;
-        };
-        _this.removeCustomFormattingStylesElement = function () {
-            var _a;
-            // Guard against repeated cleanup calls.
-            if ((_a = _this._customFormattingStylesElement) === null || _a === void 0 ? void 0 : _a.parentNode) {
-                _this._customFormattingStylesElement.parentNode.removeChild(_this._customFormattingStylesElement);
-            }
-            _this._customFormattingStylesElement = undefined;
-        };
-        _this.serializeStyleObject = function (style) {
-            if (!style) {
-                return '';
-            }
-            // Convert a React style object into plain CSS declarations.
-            var declarations = Object.entries(style)
-                .map(function (_a) {
-                var propertyName = _a[0], value = _a[1];
-                if (value === undefined || value === null || value === '') {
-                    return '';
-                }
-                // Keep CSS variables intact; convert camelCase names to kebab-case.
-                var cssProperty = propertyName.startsWith('--')
-                    ? propertyName
-                    : propertyName.replace(/[A-Z]/g, function (match) { return "-".concat(match.toLowerCase()); });
-                var cssValue = typeof value === 'number'
-                    ? _this.convertNumericStyleValue(propertyName, value)
-                    : String(value);
-                return "".concat(cssProperty, ": ").concat(cssValue, ";");
-            })
-                .filter(function (declaration) { return declaration.length > 0; });
-            return declarations.join(' ');
-        };
-        _this.convertNumericStyleValue = function (_propertyName, value) {
-            // Keep custom unitless properties untouched; default all others to px.
-            if (value === 0 || UNITLESS_CSS_PROPERTIES.has(_propertyName)) {
-                return String(value);
-            }
-            return "".concat(value, "px");
-        };
-        /**
-         * Resolve theme tokens at runtime to support pre-compiled package CSS.
-         */
-        _this.getThemeStyle = function () {
-            return {
-                '--rt-neutralLighterAlt': ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RichText_module_scss_1.default.NeutralLighterAlt),
-                '--rt-neutralPrimary': ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RichText_module_scss_1.default.NeutralPrimary),
-                '--rt-neutralTertiary': ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RichText_module_scss_1.default.NeutralTertiary),
-                '--rt-themePrimary': ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RichText_module_scss_1.default.ThemePrimary),
-                '--rt-neutralLighter': ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RichText_module_scss_1.default.NeutralLighter),
-                '--rt-neutralDark': ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RichText_module_scss_1.default.NeutralDark),
-                '--rt-themeDarker': ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RichText_module_scss_1.default.ThemeDarker),
-                '--rt-white': ThemeColorHelper_1.ThemeColorHelper.GetThemeColor(RichText_module_scss_1.default.White),
-            };
-        };
-        telemetry.track('ReactRichText', {
-            className: !!props.className,
-        });
-        _this.state = {
-            text: _this.props.value,
-            editing: false,
-            morePaneVisible: false,
-            hideDialog: true,
-            hideImageDialog: true,
-            formats: {},
-            insertUrl: undefined,
-            insertUrlText: undefined,
-            insertImageUrl: undefined,
-            selectedText: undefined,
-            selectedUrl: undefined,
-        };
-        // Get a unique toolbar id
-        _this._toolbarId = 'toolbar_' + sp_core_library_1.Guid.newGuid().toString();
-        // Get a unique rich text id if not provided by props
-        _this._richTextId = (_a = props.id) !== null && _a !== void 0 ? _a : 'richText_' + sp_core_library_1.Guid.newGuid().toString();
-        return _this;
-    }
-    /**
-     * Attaches to mouse down events to determine if we clicked outside
-     */
-    RichText.prototype.componentDidMount = function () {
-        // If we're in edit mode, attach the mouse down event
-        if (this.props.isEditMode) {
-            document.addEventListener('mousedown', this.handleClickOutside);
-            document.addEventListener('focus', this.handleClickOutside);
-        }
-        this.applyCustomFormattingStyles();
-    };
-    /**
-     * Removes the mouse down event
-     */
-    RichText.prototype.componentWillUnmount = function () {
-        // If we were in edit mode, remove the mouse down handler
-        if (this.props.isEditMode) {
-            document.removeEventListener('mousedown', this.handleClickOutside);
-            document.removeEventListener('focus', this.handleClickOutside);
-        }
-        this.removeCustomFormattingStylesElement();
-    };
-    /**
-     * If we're switching from non-edit mode to edit mode, attach mouse down event
-     * If we're going from edit mode to non-edit mode, remove mouse down event
-     * @param prevProps
-     * @param prevState
-     */
-    RichText.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var enteredEditMode = this.props.isEditMode && !prevProps.isEditMode;
-        // If we're going from non-edit to edit mode
-        if (enteredEditMode) {
-            document.addEventListener('mousedown', this.handleClickOutside);
-            document.addEventListener('focus', this.handleClickOutside);
-        }
-        // If we're going from edit mode to non-edit mode
-        if (!this.props.isEditMode && prevProps.isEditMode) {
-            document.removeEventListener('mousedown', this.handleClickOutside);
-            document.removeEventListener('focus', this.handleClickOutside);
-        }
-        if (prevProps.customStyles !== this.props.customStyles ||
-            prevProps.isEditMode !== this.props.isEditMode) {
-            this.applyCustomFormattingStyles();
-        }
-    };
-    /**
-     * shouldComponentUpdate lifecycle hook
-     *
-     * @param nextProps
-     * @param nextState
-     */
-    RichText.prototype.shouldComponentUpdate = function (nextProps, nextState) {
-        // Checks if the value coming in is the same
-        if ((0, isEqual_1.default)(nextState, this.state) && (0, isEqual_1.default)(nextProps, this.props)) {
-            return false;
-        }
-        return true;
-    };
-    RichText.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
-        if (nextProps.value !== this.props.value &&
-            nextProps.value !== this.state.text) {
-            this.setState({
-                text: nextProps.value,
-            });
-        }
-    };
-    /**
-     * Render style option
-     *
-     * @param option
-     */
-    RichText.prototype.onRenderStyleOption = function (option) {
-        var _a;
-        return (React.createElement(Tooltip_1.TooltipHost, { content: option.text, id: "".concat(option.text, "-toolbarButton"), calloutProps: { gapSpace: 0 } },
-            React.createElement("div", { className: "".concat(RichText_module_scss_1.default.toolbarDropDownOption, " ").concat(((_a = option.data) === null || _a === void 0 ? void 0 : _a.className) ? option.data.className : ''), "aria-describedby": "".concat(option.text, "-toolbarButton") },
-                React.createElement("span", null, option.text))));
-    };
-    /**
-     * Render the title of the style dropdown
-     *
-     * @param options
-     */
-    RichText.prototype.onRenderStyleTitle = function (options) {
-        var option = options[0];
-        return (React.createElement(Tooltip_1.TooltipHost, { content: option.text, id: "".concat(option.text, "-dropDownTitle"), calloutProps: { gapSpace: 0 } },
-            React.createElement("div", { className: RichText_module_scss_1.default.toolbarSubmenuDisplayButton, "aria-describedby": "".concat(option.text, "-dropDownTitle") },
-                React.createElement("span", null, option.text))));
-    };
-    /**
-     * Render align option
-     *
-     * @param option
-     */
-    RichText.prototype.onRenderAlignOption = function (option) {
-        var _a;
-        return (React.createElement(Tooltip_1.TooltipHost, { content: option.text, id: "".concat(option.text, "-toolbarButton"), calloutProps: { gapSpace: 0 } },
-            React.createElement("div", { className: "".concat(RichText_module_scss_1.default.toolbarDropDownOption, " ").concat(((_a = option.data) === null || _a === void 0 ? void 0 : _a.className) ? option.data.className : ''), "aria-describedby": "".concat(option.text, "-toolbarButton") },
-                React.createElement(Icon_1.Icon, { className: RichText_module_scss_1.default.toolbarDropDownIcon, iconName: option.data.icon, "aria-hidden": "true" }))));
-    };
-    /**
-     * Render the list dropdown title
-     *
-     * @param options
-     */
-    RichText.prototype.onRenderListTitle = function (options) {
-        var option = options[0];
-        return (React.createElement(Tooltip_1.TooltipHost, { content: option.text, id: "".concat(option.text, "-dropDownTitle"), calloutProps: { gapSpace: 0 } },
-            React.createElement("div", { className: RichText_module_scss_1.default.toolbarSubmenuDisplayButton, "aria-describedby": "".concat(option.text, "-dropDownTitle") },
-                React.createElement(Icon_1.Icon, { className: RichText_module_scss_1.default.toolbarDropDownTitleIcon, iconName: option.data.icon, "aria-hidden": "true" }))));
-    };
-    /**
-     * Render the title of the align dropdown
-     *
-     * @param options
-     */
-    RichText.prototype.onRenderAlignTitle = function (options) {
-        var option = options[0];
-        return (React.createElement(Tooltip_1.TooltipHost, { content: option.text, id: "".concat(option.text, "-dropDownTitle"), calloutProps: { gapSpace: 0 } },
-            React.createElement("div", { className: RichText_module_scss_1.default.toolbarSubmenuDisplayButton, "aria-describedby": "".concat(option.text, "-dropDownTitle") },
-                React.createElement(Icon_1.Icon, { className: RichText_module_scss_1.default.toolbarDropDownTitleIcon, iconName: option.data.icon, "aria-hidden": "true" }))));
-    };
-    /**
-     * Render list dropdown option
-     *
-     * @param option
-     */
-    RichText.prototype.onRenderListOption = function (option) {
-        var _a;
-        return (React.createElement(Tooltip_1.TooltipHost, { content: option.text, id: "".concat(option.text, "-toolbarButton"), calloutProps: { gapSpace: 0 } },
-            React.createElement("div", { className: "".concat(RichText_module_scss_1.default.toolbarDropDownOption, " ").concat(((_a = option.data) === null || _a === void 0 ? void 0 : _a.className) ? option.data.className : ''), "aria-describedby": "".concat(option.text, "-toolbarButton") },
-                React.createElement(Icon_1.Icon, { className: RichText_module_scss_1.default.toolbarDropDownIcon, iconName: option.data.icon, "aria-hidden": "true" }))));
-    };
-    /**
-     * Render the list dropdown placeholder
-     */
-    RichText.prototype.onRenderListPlaceholder = function () {
-        return (React.createElement(Tooltip_1.TooltipHost, { content: 'Placeholder', id: "Placeholder-dropDownTitle", calloutProps: { gapSpace: 0 } },
-            React.createElement("div", { className: RichText_module_scss_1.default.toolbarSubmenuDisplayButton, "aria-describedby": "Placeholder-dropDownTitle" },
-                React.createElement(Icon_1.Icon, { className: RichText_module_scss_1.default.toolbarDropDownTitleIcon, iconName: 'BulletedList', "aria-hidden": "true" }))));
-    };
-    /**
-     * Renders the Rich Text Editor
-     */
-    RichText.prototype.render = function () {
-        var _this = this;
-        var _a, _b;
-        var text = this.state.text;
-        var isEditMode = this.props.isEditMode;
-        var themeStyle = this.getThemeStyle();
-        var renderLabel = (_a = (this.props.onRenderLabel && this.props.onRenderLabel(this.props))) !== null && _a !== void 0 ? _a : this.onRenderLabel();
-        // If we're not in edit mode, display read-only version of the html
-        if (!isEditMode) {
-            return (React.createElement("div", { className: (0, Utilities_1.css)(CONTAINER_CLASS), style: themeStyle },
-                renderLabel,
-                React.createElement("div", { id: this._richTextId, className: (0, Utilities_1.css)('ql-editor', RichText_module_scss_1.default.richtext, this.props.className || null), dangerouslySetInnerHTML: { __html: text } })));
-        }
-        // Okay, we're in edit mode.
-        var _c = this.props, placeholder = _c.placeholder, style = _c.style, _d = _c.styleOptions, showStyles = _d.showStyles, showBold = _d.showBold, showItalic = _d.showItalic, showUnderline = _d.showUnderline, showAlign = _d.showAlign, showList = _d.showList, showLink = _d.showLink, showMore = _d.showMore, showImage = _d.showImage;
-        // Get a unique id for the toolbar
-        var modules = {
-            toolbar: {
-                container: '#' + this._toolbarId,
-                handlers: [
-                    'link', // disable the link handler so we can add our own
-                ],
-            },
-            clipboard: {
-                matchVisual: false, // prevents weird bug that inserts blank lines when loading stored text
-            },
-        };
-        // Remove fonts and set Segoe UI as the main font
-        var font = react_quill_1.Quill.import('formats/font');
-        font.whitelist = ['Segoe UI'];
-        react_quill_1.Quill.register(font, true);
-        // Set headers and add blockquote capability
-        var header = react_quill_1.Quill.import('formats/header');
-        header.tagName = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'blockquote'];
-        react_quill_1.Quill.register(header, true);
-        // Add the SharePoint font sizes
-        var sizeClass = react_quill_1.Quill.import('formats/size');
-        sizeClass.whitelist = [
-            'xsmall',
-            'small',
-            'medium',
-            'mediumplus',
-            'large',
-            'xlarge',
-            'xlargeplus',
-            'xxlarge',
-            'xxxlarge',
-            'xxlargeplus',
-            'super',
-            'superlarge',
-        ];
-        react_quill_1.Quill.register(sizeClass, true);
-        return (React.createElement("div", { className: (0, Utilities_1.css)(CONTAINER_CLASS), style: themeStyle },
-            React.createElement("div", { ref: function (ref) {
-                    _this._wrapperRef = ref;
-                }, className: (0, Utilities_1.css)(RichText_module_scss_1.default.richtext && this.state.editing ? 'ql-active' : null, this.props.className || null) || null, style: style },
-                renderLabel,
-                React.createElement("div", { className: RichText_module_scss_1.default.editorShell },
-                    React.createElement("div", { id: this._toolbarId },
-                        showStyles && (React.createElement(Dropdown_1.Dropdown, { id: "DropDownStyles", className: "".concat(RichText_module_scss_1.default.headerDropDown, " ").concat(RichText_module_scss_1.default.toolbarDropDown), onRenderCaretDown: function () { return (React.createElement(Icon_1.Icon, { className: RichText_module_scss_1.default.toolbarSubmenuCaret, iconName: "CaretDownSolid8" })); }, selectedKey: this.state.formats.header || 0, options: this.ddStyleOpts, onChange: this.onChangeHeading, onRenderOption: this.onRenderStyleOption, onRenderTitle: this.onRenderStyleTitle })),
-                        showBold && (React.createElement(Tooltip_1.TooltipHost, { content: strings.BoldTitle, id: "bold-richtextbutton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Bold' }, "aria-describedby": "bold-richtextbutton", toggle: true, checked: this.state.formats.bold, onClick: this.onChangeBold }))),
-                        showItalic && (React.createElement(Tooltip_1.TooltipHost, { content: strings.ItalicTitle, id: "italic-richtextbutton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Italic' }, "aria-describedby": "italic-richtextbutton", toggle: true, checked: this.state.formats.italic, onClick: this.onChangeItalic }))),
-                        showUnderline && (React.createElement(Tooltip_1.TooltipHost, { content: strings.UnderlineTitle, id: "underline-richtextbutton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Underline' }, "aria-describedby": "underline-richtextbutton", toggle: true, checked: this.state.formats.underline, onClick: this.onChangeUnderline }))),
-                        showAlign && (React.createElement(Dropdown_1.Dropdown, { className: "".concat(RichText_module_scss_1.default.toolbarDropDown), id: "DropDownAlign", onRenderCaretDown: function () { return (React.createElement(Icon_1.Icon, { className: RichText_module_scss_1.default.toolbarSubmenuCaret, iconName: "CaretDownSolid8" })); }, selectedKey: this.state.formats.align || 'left', options: this.ddAlignOpts, onChange: this.onChangeAlign, onRenderOption: this.onRenderAlignOption, onRenderTitle: this.onRenderAlignTitle })),
-                        showList && (React.createElement(Dropdown_1.Dropdown, { className: RichText_module_scss_1.default.toolbarDropDown, id: "DropDownLists", onRenderCaretDown: function () { return (React.createElement(Icon_1.Icon, { className: RichText_module_scss_1.default.toolbarSubmenuCaret, iconName: "CaretDownSolid8" })); }, selectedKey: this.state.formats.list, options: this.ddListOpts, 
-                            // this option is not available yet
-                            notifyOnReselect: true, onChange: this.onChangeList, onRenderOption: this.onRenderListOption, onRenderTitle: this.onRenderListTitle, onRenderPlaceholder: this.onRenderListPlaceholder })),
-                        showLink && (React.createElement(Tooltip_1.TooltipHost, { content: strings.LinkTitle, id: "link-richtextbutton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { toggle: true, checked: ((_b = this.state.formats) === null || _b === void 0 ? void 0 : _b.link) !== undefined, onClick: this.showInsertLinkDialog, "aria-describedby": "link-richtextbutton", iconProps: {
-                                    iconName: 'Link',
-                                } }))),
-                        showImage && (React.createElement(Tooltip_1.TooltipHost, { content: strings.ImageTitle, id: "image-richtextbutton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton //checked={this.state.formats!.link !== undefined}
-                            , { onClick: this.showInsertImageDialog, "aria-describedby": "image-richtextbutton", iconProps: {
-                                    iconName: 'PictureFill',
-                                } }))),
-                        showMore && (React.createElement(Tooltip_1.TooltipHost, { content: strings.MoreTitle, id: "more-richtextbutton", calloutProps: { gapSpace: 0 } },
-                            React.createElement(Button_1.IconButton, { iconProps: { iconName: 'More' }, "aria-describedby": "more-richtextbutton", onClick: this.handleShowMore })))),
-                    React.createElement(react_quill_1.default, { ref: this.linkQuill, id: this._richTextId, placeholder: placeholder, modules: modules, value: text || '', onChange: this.handleChange, onChangeSelection: this.handleChangeSelection, onFocus: this.handleOnFocus })),
-                React.createElement(RichTextPropertyPane_1.default, { ref: this.linkPropertyPane, editor: this.getEditor(), isOpen: this.state.morePaneVisible, onClose: this.handleClosePanel, onLink: this.showInsertLinkDialog, customColors: this.props.customColors, customStyles: this.props.customStyles }),
-                this.renderLinkDialog(),
-                this.renderImageDialog())));
-    };
-    /**
-     * Applies a format to the selection
-     * @param name format name
-     * @param value format value, or false to unset format
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    RichText.prototype.applyFormat = function (name, value) {
-        var _this = this;
-        var quill = this.getEditor();
-        quill.format(name, value);
-        // We use a timeout to ensure that format has been applied and buttons are updated
-        setTimeout(function () {
-            _this.handleChangeSelection(quill.getSelection(), undefined, undefined);
-        }, 100);
-    };
-    /**
-     * Sets default properties
-     */
-    RichText.defaultProps = {
-        isEditMode: true,
-        styleOptions: {
-            showStyles: true,
-            showBold: true,
-            showItalic: true,
-            showUnderline: true,
-            showAlign: true,
-            showList: true,
-            showLink: true,
-            showImage: true,
-            showMore: true,
-        },
-    };
-    return RichText;
-}(React.Component));
-exports.RichText = RichText;
-//# sourceMappingURL=RichText.js.map