@pnp/spfx-controls-react 4.0.0-beta.1344828 → 4.0.0-beta.3809332

package/lib/controls/progress/Progress.js

@@ -1,29 +1,4 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
+import { __assign, __extends } from "tslib";
 import * as React from 'react';
 import { ProgressActionState } from './IProgress';
 import { Action } from './Action';

package/lib/controls/progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/controls/progress/Progress.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/controls/progress/Progress.tsx"],"names":[],"mappings":"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"}

package/lib/controls/progress/Progress.module.scss.css

@@ -0,0 +1,89 @@
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+.progress {
+  display: flex;
+  flex-direction: column;
+}
+.progress .header {
+  margin: 12px 0 20px;
+}
+.progress .header .title {
+  font-weight: 600;
+}
+.progress .header .progressIndicator {
+  margin-top: 10px;
+}
+.progress .header .progressSubtext {
+  font-size: 12px;
+}
+.progress .header .longRunningText {
+  font-size: 12px;
+  color: "[theme: bodySubtext, default: #666666]";
+  margin: 12px 0 0;
+}
+.progress .actionsContainer {
+  overflow-y: auto;
+  margin-bottom: 20px;
+}
+.progress .actionsContainer .actionContainer {
+  margin-bottom: 20px;
+}
+.progress .actionsContainer .actionContainer .actionHeader {
+  display: flex;
+}
+.progress .actionsContainer .actionContainer .actionHeader .actionIcon {
+  margin-right: 8px;
+  line-height: 16px;
+  font-size: 16px;
+  flex-shrink: 0;
+  font-weight: 700;
+}
+.progress .actionsContainer .actionContainer .actionHeader .actionIcon.successIcon {
+  color: "[theme: accent, default: #038387]";
+}
+.progress .actionsContainer .actionContainer .actionHeader .actionIcon.errorIcon {
+  color: "[theme: errorText, default: #a80000]";
+}
+.progress .actionsContainer .actionContainer .actionHeader .actionIcon.inactiveIcon {
+  color: "[theme: disableSubtext, default: #d0d0d0]";
+}
+.progress .actionsContainer .actionContainer .actionHeader .spinner {
+  display: inline-block;
+}
+.progress .actionsContainer .actionContainer .actionHeader .label {
+  font-size: 14px;
+  flex-shrink: 1;
+  flex-grow: 1;
+  flex-basis: 0;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  line-height: 16px;
+  color: "[theme: bodyText, default: #333333]";
+}
+.progress .actionsContainer .actionContainer .actionHeader .label.inactive {
+  color: "[theme: disabledBodyText, default: #a6a6a6]";
+}
+.progress .actionsContainer .actionContainer .errorContainer {
+  margin-top: 8px;
+}
+.progress .actionsContainer .actionContainer .errorContainer .errorMessage {
+  margin-left: 24px;
+  color: "[theme: errorText, default: #a80000]";
+  line-height: 14px;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 0;
+}
+.progress .actionsContainer .actionContainer .subActionsContainer {
+  margin-top: 8px;
+}
+.progress .actionsContainer .actionContainer .subActionsContainer .label {
+  color: "[theme: bodySubtext, default: #666666]";
+  margin-left: 24px;
+  font-size: 11px;
+}
+.progress .actionsContainer .actionContainer .subActionsContainer .label.inactive {
+  color: "[theme: disabledBodySubtext, default: #666666]";
+}
+/*# sourceMappingURL=Progress.module.scss.css.map */

package/lib/controls/progress/Progress.module.scss.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../common/temp/node_modules/.pnpm/@fluentui+react@8.106.4_@types+react-dom@17.0.17_@types+react@17.0.45_react-dom@17.0.1_react@17.0.1/node_modules/@fluentui/react/dist/sass/mixins/_Font.Mixins.scss","../../../src/controls/progress/Progress.module.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;ACHA;EACI;EACA;;AAEA;EACI;;AACA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;;AACA;EACI;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAIR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAMZ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;EACA;;AAEA;EACI","sourcesContent":["// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.\r\n\r\n//== Font definitions.\r\n//\r\n\r\n/*\r\n  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license\r\n*/\r\n\r\n// Produce @font-face definitions for the web fonts.\r\n@mixin ms-font-face($font-family-name, $cdn-folder, $cdn-font-name: \"segoeui\") {\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-light;\r\n    font-style: normal;\r\n  }\r\n\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-semilight;\r\n    font-style: normal;\r\n  }\r\n\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-regular;\r\n    font-style: normal;\r\n  }\r\n\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-semibold;\r\n    font-style: normal;\r\n  }\r\n\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-bold;\r\n    font-style: normal;\r\n  }\r\n}\r\n\r\n// Generate overrides to set font-family based on the lang attribute.\r\n@mixin ms-font-family-language-override($language-code, $font-family) {\r\n  *[lang^=\"#{$language-code}\"] .ms-Fabric,\r\n  .ms-Fabric *[lang^=\"#{$language-code}\"],\r\n  .ms-Fabric[lang^=\"#{$language-code}\"] {\r\n    font-family: $font-family;\r\n  }\r\n}\r\n\r\n//== Font weight.\r\n//\r\n\r\n@mixin ms-fontWeight-regular {\r\n  font-weight: $ms-font-weight-regular;\r\n}\r\n@mixin ms-fontWeight-semibold {\r\n  font-weight: $ms-font-weight-semibold;\r\n}\r\n@mixin ms-fontWeight-bold {\r\n  font-weight: $ms-font-weight-bold;\r\n}\r\n\r\n//== Font size.\r\n//\r\n\r\n@mixin ms-fontSize-68 {\r\n  font-size: $ms-font-size-68;\r\n}\r\n@mixin ms-fontSize-42 {\r\n  font-size: $ms-font-size-42;\r\n}\r\n@mixin ms-fontSize-32 {\r\n  font-size: $ms-font-size-32;\r\n}\r\n@mixin ms-fontSize-28 {\r\n  font-size: $ms-font-size-28;\r\n}\r\n@mixin ms-fontSize-24 {\r\n  font-size: $ms-font-size-24;\r\n}\r\n@mixin ms-fontSize-20 {\r\n  font-size: $ms-font-size-20;\r\n}\r\n@mixin ms-fontSize-18 {\r\n  font-size: $ms-font-size-18;\r\n}\r\n@mixin ms-fontSize-16 {\r\n  font-size: $ms-font-size-16;\r\n}\r\n@mixin ms-fontSize-14 {\r\n  font-size: $ms-font-size-14;\r\n}\r\n@mixin ms-fontSize-12 {\r\n  font-size: $ms-font-size-12;\r\n}\r\n@mixin ms-fontSize-10 {\r\n  font-size: $ms-font-size-10;\r\n}\r\n\r\n// Deprecated MDL2 font mixins.\r\n@import \"./Font.Mixins.MDL2\";\r\n","@import 'pkg:@fluentui/react/dist/sass/References.scss';\n\n.progress {\n    display: flex;\n    flex-direction: column;\n\n    .header {\n        margin: 12px 0 20px;\n        .title {\n            font-weight: 600;\n        }\n\n        .progressIndicator {\n            margin-top: 10px;\n        }\n\n        .progressSubtext {\n            font-size: 12px;\n        }\n\n        .longRunningText {\n            font-size: 12px;\n            color: \"[theme: bodySubtext, default: #666666]\";\n            margin: 12px 0 0;\n        }\n    }\n\n    .actionsContainer {\n        overflow-y: auto;\n        margin-bottom: 20px;\n        .actionContainer {\n            margin-bottom: 20px;\n\n            .actionHeader {\n                display: flex;\n\n                .actionIcon {\n                    margin-right: 8px;\n                    line-height: 16px;\n                    font-size: 16px;\n                    flex-shrink: 0;\n                    font-weight: 700;\n\n                    &.successIcon {\n                        color: \"[theme: accent, default: #038387]\";    \n                    }\n\n                    &.errorIcon {\n                        color: \"[theme: errorText, default: #a80000]\";\n                    }\n\n                    &.inactiveIcon {\n                        color: \"[theme: disableSubtext, default: #d0d0d0]\"\n                    }\n                }\n            \n                .spinner {\n                    display: inline-block;\n                }\n                .label {\n                    font-size: 14px;\n                    flex-shrink: 1;\n                    flex-grow: 1;\n                    flex-basis: 0;\n                    overflow-wrap: break-word;\n                    word-wrap: break-word;\n                    line-height: 16px;\n                    color: \"[theme: bodyText, default: #333333]\";\n\n                    &.inactive {\n                        color: \"[theme: disabledBodyText, default: #a6a6a6]\";\n                    }\n\n                }\n            }\n\n            .errorContainer {\n                margin-top: 8px;\n\n                .errorMessage {\n                    margin-left: 24px;\n                    color: \"[theme: errorText, default: #a80000]\";\n                    line-height: 14px;\n                    font-size: 14px;\n                    font-weight: 700;\n                    padding: 0;\n                }\n            }\n\n            .subActionsContainer {\n                margin-top: 8px;\n\n                .label {\n                    color: \"[theme: bodySubtext, default: #666666]\";\n                    margin-left: 24px;\n                    font-size: 11px;\n\n                    &.inactive {\n                        color: \"[theme: disabledBodySubtext, default: #666666]\";\n                    }\n                }\n            }\n        }\n    }\n}"],"file":"Progress.module.scss.css"}

package/lib/controls/richText/RichText.d.ts

@@ -8,6 +8,7 @@ export declare class RichText extends React.Component<IRichTextProps, IRichTextS
     private _propertyPaneRef;
     private _toolbarId;
     private _richTextId;
+    private _customFormattingStylesElement;
     private ddStyleOpts;
     private ddAlignOpts;
     private ddListOpts;
@@ -188,5 +189,16 @@ export declare class RichText extends React.Component<IRichTextProps, IRichTextS
      * Renders the label above the rich text (if specified)
      */
     private onRenderLabel;
+    /**
+     * Build and inject object-based custom formatting styles scoped to this editor instance.
+     */
+    private applyCustomFormattingStyles;
+    private removeCustomFormattingStylesElement;
+    private serializeStyleObject;
+    private convertNumericStyleValue;
+    /**
+     * Resolve theme tokens at runtime to support pre-compiled package CSS.
+     */
+    private getThemeStyle;
 }
 //# sourceMappingURL=RichText.d.ts.map

package/lib/controls/richText/RichText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../../src/controls/richText/RichText.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../../src/controls/richText/RichText.tsx"],"names":[],"mappings":"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"}

package/lib/controls/richText/RichText.js

@@ -1,29 +1,4 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
+import { __assign, __extends } from "tslib";
 import * as React from 'react';
 import * as strings from 'ControlStrings';
 import 'react-quill/dist/quill.snow.css';
@@ -44,7 +19,77 @@ import { Icon } from '@fluentui/react/lib/Icon';
 import { css, elementContains } from '@fluentui/react/lib/Utilities';
 import { initializeIcons } from '@fluentui/react/lib/Icons';
 import { Label } from '@fluentui/react/lib/Label';
-var TOOLBARPADDING = 28;
+import { ThemeColorHelper } from '../../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.
@@ -57,14 +102,14 @@ initializeIcons();
 var RichText = /** @class */ (function (_super) {
     __extends(RichText, _super);
     function RichText(props) {
-        var _this = this;
         var _a;
-        _this = _super.call(this, props) || this;
+        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,
@@ -418,7 +463,6 @@ var RichText = /** @class */ (function (_super) {
                 if (range) {
                     var formats = quill.getFormat(range);
                     if (!isEqual(formats, _this.state.formats)) {
-                        console.log("current format: ".concat(formats.list));
                         newState.formats = formats;
                     }
                 }
@@ -464,6 +508,7 @@ var RichText = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _this.linkQuill = function (e) {
             _this._quillElem = e;
+            _this.applyCustomFormattingStyles();
         };
         /**
          * Links to the property pane element
@@ -482,6 +527,106 @@ var RichText = /** @class */ (function (_super) {
             }
             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.GetThemeColor(styles.NeutralLighterAlt),
+                '--rt-neutralPrimary': ThemeColorHelper.GetThemeColor(styles.NeutralPrimary),
+                '--rt-neutralTertiary': ThemeColorHelper.GetThemeColor(styles.NeutralTertiary),
+                '--rt-themePrimary': ThemeColorHelper.GetThemeColor(styles.ThemePrimary),
+                '--rt-neutralLighter': ThemeColorHelper.GetThemeColor(styles.NeutralLighter),
+                '--rt-neutralDark': ThemeColorHelper.GetThemeColor(styles.NeutralDark),
+                '--rt-themeDarker': ThemeColorHelper.GetThemeColor(styles.ThemeDarker),
+                '--rt-white': ThemeColorHelper.GetThemeColor(styles.White),
+            };
+        };
         telemetry.track('ReactRichText', {
             className: !!props.className,
         });
@@ -497,7 +642,6 @@ var RichText = /** @class */ (function (_super) {
             insertImageUrl: undefined,
             selectedText: undefined,
             selectedUrl: undefined,
-            wrapperTop: 0,
         };
         // Get a unique toolbar id
         _this._toolbarId = 'toolbar_' + Guid.newGuid().toString();
@@ -511,15 +655,10 @@ var RichText = /** @class */ (function (_super) {
     RichText.prototype.componentDidMount = function () {
         // If we're in edit mode, attach the mouse down event
         if (this.props.isEditMode) {
-            document.addEventListener('click', this.handleClickOutside);
+            document.addEventListener('mousedown', this.handleClickOutside);
             document.addEventListener('focus', this.handleClickOutside);
-            var domRect = this._wrapperRef.getBoundingClientRect();
-            var parentDomRect = this._wrapperRef.parentElement.getBoundingClientRect();
-            var toolbarTop = domRect.top - parentDomRect.top - TOOLBARPADDING;
-            this.setState({
-                wrapperTop: toolbarTop,
-            });
         }
+        this.applyCustomFormattingStyles();
     };
     /**
      * Removes the mouse down event
@@ -527,9 +666,10 @@ var RichText = /** @class */ (function (_super) {
     RichText.prototype.componentWillUnmount = function () {
         // If we were in edit mode, remove the mouse down handler
         if (this.props.isEditMode) {
-            document.removeEventListener('click', this.handleClickOutside);
+            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
@@ -538,16 +678,21 @@ var RichText = /** @class */ (function (_super) {
      * @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 (this.props.isEditMode && !prevProps.isEditMode) {
-            document.addEventListener('click', this.handleClickOutside);
+        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('click', this.handleClickOutside);
+            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
@@ -652,10 +797,11 @@ var RichText = /** @class */ (function (_super) {
         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(React.Fragment, null,
+            return (React.createElement("div", { className: css(CONTAINER_CLASS), style: themeStyle },
                 renderLabel,
                 React.createElement("div", { id: this._richTextId, className: css('ql-editor', styles.richtext, this.props.className || null), dangerouslySetInnerHTML: { __html: text } })));
         }
@@ -684,6 +830,7 @@ var RichText = /** @class */ (function (_super) {
         // Add the SharePoint font sizes
         var sizeClass = ReactQuillInstance.import('formats/size');
         sizeClass.whitelist = [
+            'xsmall',
             'small',
             'medium',
             'mediumplus',
@@ -697,37 +844,39 @@ var RichText = /** @class */ (function (_super) {
             'superlarge',
         ];
         ReactQuillInstance.register(sizeClass, true);
-        return (React.createElement("div", { ref: function (ref) {
-                _this._wrapperRef = ref;
-            }, className: css(styles.richtext && this.state.editing ? 'ql-active' : null, this.props.className || null) || null, style: style },
-            renderLabel,
-            React.createElement("div", { id: this._toolbarId, style: { top: this.state.wrapperTop } },
-                showStyles && (React.createElement(Dropdown, { id: "DropDownStyles", className: "".concat(styles.headerDropDown, " ").concat(styles.toolbarDropDown), onRenderCaretDown: function () { return (React.createElement(Icon, { className: styles.toolbarSubmenuCaret, iconName: "CaretDownSolid8" })); }, selectedKey: this.state.formats.header || 0, options: this.ddStyleOpts, onChange: this.onChangeHeading, onRenderOption: this.onRenderStyleOption, onRenderTitle: this.onRenderStyleTitle })),
-                showBold && (React.createElement(TooltipHost, { content: strings.BoldTitle, id: "bold-richtextbutton", calloutProps: { gapSpace: 0 } },
-                    React.createElement(IconButton, { iconProps: { iconName: 'Bold' }, "aria-describedby": "bold-richtextbutton", checked: this.state.formats.bold, onClick: this.onChangeBold }))),
-                showItalic && (React.createElement(TooltipHost, { content: strings.ItalicTitle, id: "italic-richtextbutton", calloutProps: { gapSpace: 0 } },
-                    React.createElement(IconButton, { iconProps: { iconName: 'Italic' }, "aria-describedby": "italic-richtextbutton", checked: this.state.formats.italic, onClick: this.onChangeItalic }))),
-                showUnderline && (React.createElement(TooltipHost, { content: strings.UnderlineTitle, id: "underline-richtextbutton", calloutProps: { gapSpace: 0 } },
-                    React.createElement(IconButton, { iconProps: { iconName: 'Underline' }, "aria-describedby": "underline-richtextbutton", checked: this.state.formats.underline, onClick: this.onChangeUnderline }))),
-                showAlign && (React.createElement(Dropdown, { className: "".concat(styles.toolbarDropDown), id: "DropDownAlign", onRenderCaretDown: function () { return (React.createElement(Icon, { className: styles.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, { className: styles.toolbarDropDown, id: "DropDownLists", onRenderCaretDown: function () { return (React.createElement(Icon, { className: styles.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(TooltipHost, { content: strings.LinkTitle, id: "link-richtextbutton", calloutProps: { gapSpace: 0 } },
-                    React.createElement(IconButton, { 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(TooltipHost, { content: strings.ImageTitle, id: "image-richtextbutton", calloutProps: { gapSpace: 0 } },
-                    React.createElement(IconButton //checked={this.state.formats!.link !== undefined}
-                    , { onClick: this.showInsertImageDialog, "aria-describedby": "image-richtextbutton", iconProps: {
-                            iconName: 'PictureFill',
-                        } }))),
-                showMore && (React.createElement(TooltipHost, { content: strings.MoreTitle, id: "more-richtextbutton", calloutProps: { gapSpace: 0 } },
-                    React.createElement(IconButton, { iconProps: { iconName: 'More' }, "aria-describedby": "more-richtextbutton", onClick: this.handleShowMore })))),
-            React.createElement(ReactQuill, { ref: this.linkQuill, id: this._richTextId, placeholder: placeholder, modules: modules, value: text || '', onChange: this.handleChange, onChangeSelection: this.handleChangeSelection, onFocus: this.handleOnFocus }),
-            React.createElement(RichTextPropertyPane, { ref: this.linkPropertyPane, editor: this.getEditor(), isOpen: this.state.morePaneVisible, onClose: this.handleClosePanel, onLink: this.showInsertLinkDialog, customColors: this.props.customColors }),
-            this.renderLinkDialog(),
-            this.renderImageDialog()));
+        return (React.createElement("div", { className: css(CONTAINER_CLASS), style: themeStyle },
+            React.createElement("div", { ref: function (ref) {
+                    _this._wrapperRef = ref;
+                }, className: css(styles.richtext && this.state.editing ? 'ql-active' : null, this.props.className || null) || null, style: style },
+                renderLabel,
+                React.createElement("div", { className: styles.editorShell },
+                    React.createElement("div", { id: this._toolbarId },
+                        showStyles && (React.createElement(Dropdown, { id: "DropDownStyles", className: "".concat(styles.headerDropDown, " ").concat(styles.toolbarDropDown), onRenderCaretDown: function () { return (React.createElement(Icon, { className: styles.toolbarSubmenuCaret, iconName: "CaretDownSolid8" })); }, selectedKey: this.state.formats.header || 0, options: this.ddStyleOpts, onChange: this.onChangeHeading, onRenderOption: this.onRenderStyleOption, onRenderTitle: this.onRenderStyleTitle })),
+                        showBold && (React.createElement(TooltipHost, { content: strings.BoldTitle, id: "bold-richtextbutton", calloutProps: { gapSpace: 0 } },
+                            React.createElement(IconButton, { iconProps: { iconName: 'Bold' }, "aria-describedby": "bold-richtextbutton", toggle: true, checked: this.state.formats.bold, onClick: this.onChangeBold }))),
+                        showItalic && (React.createElement(TooltipHost, { content: strings.ItalicTitle, id: "italic-richtextbutton", calloutProps: { gapSpace: 0 } },
+                            React.createElement(IconButton, { iconProps: { iconName: 'Italic' }, "aria-describedby": "italic-richtextbutton", toggle: true, checked: this.state.formats.italic, onClick: this.onChangeItalic }))),
+                        showUnderline && (React.createElement(TooltipHost, { content: strings.UnderlineTitle, id: "underline-richtextbutton", calloutProps: { gapSpace: 0 } },
+                            React.createElement(IconButton, { iconProps: { iconName: 'Underline' }, "aria-describedby": "underline-richtextbutton", toggle: true, checked: this.state.formats.underline, onClick: this.onChangeUnderline }))),
+                        showAlign && (React.createElement(Dropdown, { className: "".concat(styles.toolbarDropDown), id: "DropDownAlign", onRenderCaretDown: function () { return (React.createElement(Icon, { className: styles.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, { className: styles.toolbarDropDown, id: "DropDownLists", onRenderCaretDown: function () { return (React.createElement(Icon, { className: styles.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(TooltipHost, { content: strings.LinkTitle, id: "link-richtextbutton", calloutProps: { gapSpace: 0 } },
+                            React.createElement(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(TooltipHost, { content: strings.ImageTitle, id: "image-richtextbutton", calloutProps: { gapSpace: 0 } },
+                            React.createElement(IconButton //checked={this.state.formats!.link !== undefined}
+                            , { onClick: this.showInsertImageDialog, "aria-describedby": "image-richtextbutton", iconProps: {
+                                    iconName: 'PictureFill',
+                                } }))),
+                        showMore && (React.createElement(TooltipHost, { content: strings.MoreTitle, id: "more-richtextbutton", calloutProps: { gapSpace: 0 } },
+                            React.createElement(IconButton, { iconProps: { iconName: 'More' }, "aria-describedby": "more-richtextbutton", onClick: this.handleShowMore })))),
+                    React.createElement(ReactQuill, { ref: this.linkQuill, id: this._richTextId, placeholder: placeholder, modules: modules, value: text || '', onChange: this.handleChange, onChangeSelection: this.handleChangeSelection, onFocus: this.handleOnFocus })),
+                React.createElement(RichTextPropertyPane, { 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