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

package/lib/controls/richText/RichText.module.scss.css

@@ -0,0 +1,405 @@
+/*
+  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
+*/
+:export {
+  NeutralLighterAlt: "[theme:neutralLighterAlt, default:#faf9f8]";
+  NeutralPrimary: "[theme:neutralPrimary, default:#323130]";
+  NeutralTertiary: "[theme:neutralTertiary, default:#a19f9d]";
+  ThemePrimary: "[theme:themePrimary, default:#0078d4]";
+  NeutralLighter: "[theme:neutralLighter, default:#f3f2f1]";
+  NeutralDark: "[theme:neutralDark, default:#201f1e]";
+  ThemeDarker: "[theme:themeDarker, default:#004578]";
+  White: "[theme:white, default:#ffffff]";
+}
+
+.richtext {
+  color: inherit;
+}
+
+.insertLinkDialog :global .ms-Dialog-main {
+  max-width: 540px;
+  width: 540px;
+}
+.insertLinkDialog .actions {
+  position: relative;
+  width: 100%;
+  min-height: 24px;
+  line-height: 24px;
+  margin-top: 20px;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  margin-left: 0px;
+  font-size: 0px;
+}
+.insertLinkDialog .actions .actionsRight {
+  text-align: right;
+  margin-right: -4px;
+  font-size: 0px;
+}
+.insertLinkDialog .actions .actionsRight .action {
+  margin-top: 0px;
+  margin-right: 4px;
+  margin-bottom: 0px;
+  margin-left: 4px;
+}
+.insertLinkDialog .actions .actionsRight .unlinkButton {
+  margin-top: 4px;
+  font-size: 14px;
+  float: left;
+}
+
+.headerDropDown {
+  width: 160px;
+}
+
+.toolbarDropDown {
+  height: 34px;
+}
+
+.toolbarDropDownTitleIcon {
+  margin-top: -2px;
+  margin-right: 0px;
+}
+
+.toolbarDropDownIcon {
+  margin-top: -2px;
+  margin-right: 0px;
+  margin-left: -4px;
+}
+
+.toolbarDropDownOption.toolbarButtonH2 {
+  font-size: 20px;
+  font-weight: 600;
+}
+.toolbarDropDownOption.toolbarButtonH3 {
+  font-size: 18px;
+  font-weight: 600;
+}
+.toolbarDropDownOption.toolbarButtonH4 {
+  font-size: 16px;
+  font-weight: 600;
+}
+.toolbarDropDownOption.toolbarButtonBlockQuote {
+  font-size: 16px;
+  font-style: italic;
+}
+.toolbarDropDownOption.toolbarButtonNormal {
+  font-size: 16px;
+}
+
+.toolbarSubmenuCaret {
+  display: inline-block;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 8px;
+  top: 50%;
+  color: var(--rt-neutralLighterAlt, #f8f8f8);
+}
+
+.toolbarSubmenuDisplayButton {
+  width: 100%;
+}
+
+.editorShell {
+  position: relative;
+}
+
+:global .pnp-richtext-quill-container .ql-toolbar {
+  background-color: transparent;
+  color: var(--rt-neutralLighterAlt, #f8f8f8);
+  border: none;
+  display: none;
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-TooltipHost {
+  display: inline-block !important;
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-container {
+  display: inline-block !important;
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Button {
+  background-color: var(--rt-neutralPrimary, #323130);
+  color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Button:hover {
+  background-color: var(--rt-neutralTertiary, #a19f9d);
+  color: var(--rt-neutralLighterAlt, #f8f8f8);
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Button:focus {
+  border: 1px solid var(--rt-neutralLighterAlt, #f8f8f8);
+  outline: 0;
+  color: var(--rt-neutralLighterAlt, #f8f8f8);
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Button:active {
+  color: var(--rt-neutralLighterAlt, #f8f8f8);
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Button.is-checked {
+  background-color: var(--rt-themePrimary, #0078d4) !important;
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-title {
+  background-color: var(--rt-neutralPrimary, #323130);
+  color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
+  border: none;
+  min-height: 34px;
+  padding-bottom: 0px;
+  padding-left: 9px;
+  padding-right: 20px;
+  padding-top: 2px;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  -webkit-transition-property: background-color, color;
+  transition-property: background-color, color;
+  border-radius: 0;
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-title:hover {
+  background-color: var(--rt-neutralTertiary, #a19f9d);
+  color: var(--rt-neutralLighterAlt, #f8f8f8);
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-title:focus {
+  border: 1px solid var(--rt-neutralLighterAlt, #f8f8f8);
+  outline: 0;
+  color: var(--rt-neutralLighterAlt, #f8f8f8);
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-title:active {
+  color: var(--rt-neutralLighterAlt, #f8f8f8);
+}
+:global .pnp-richtext-quill-container .ql-toolbar .ms-Dropdown-caretDownWrapper {
+  right: 4px;
+  margin-top: -1px;
+}
+:global .pnp-richtext-quill-container .ql-snow.ql-toolbar button,
+:global .pnp-richtext-quill-container .ql-snow .ql-toolbar button {
+  background-color: var(--rt-neutralPrimary, #323130);
+  color: var(--rt-neutralLighterAlt, #f8f8f8);
+  font-size: 16px;
+  min-width: 34px;
+  height: 34px;
+  padding-top: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 0;
+}
+:global .pnp-richtext-quill-container .ql-toolbar.ql-snow {
+  padding: 0px;
+  font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
+  border: none;
+  margin-bottom: 0;
+  z-index: 3;
+  -webkit-animation-name: ms-fadeIn, ms-slideUpIn10;
+  animation-name: ms-fadeIn, ms-slideUpIn10;
+  -webkit-animation-duration: 167ms;
+  animation-duration: 167ms;
+  -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);
+  transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+:global .pnp-richtext-quill-container .ql-snow.ql-toolbar:after,
+:global .pnp-richtext-quill-container .ql-snow .ql-toolbar:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+:global .pnp-richtext-quill-container .ql-container.ql-snow {
+  border: none;
+}
+:global .pnp-richtext-quill-container .ql-active .ql-editor:hover {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--rt-neutralTertiary, #a19f9d);
+}
+:global .pnp-richtext-quill-container .ql-active .ql-editor:focus,
+:global .pnp-richtext-quill-container .ql-active .ql-editor:active,
+:global .pnp-richtext-quill-container .ql-active .ql-editor:active:hover {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--rt-themePrimary, #0078d4);
+}
+:global .pnp-richtext-quill-container .ql-active .ql-toolbar {
+  display: inline-flex;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  opacity: 1;
+  height: 34px;
+  -webkit-box-shadow: 0 0 5px 0 #c8c8c8;
+  box-shadow: 0px 0px 5px 0px #c8c8c8;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor, :global .pnp-richtext-quill-container .ql-editor {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  min-height: 68px;
+  font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
+  font-size: 18px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor h2, :global .pnp-richtext-quill-container .ql-editor h2 {
+  font-weight: 600 !important;
+  font-size: 28px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor h3, :global .pnp-richtext-quill-container .ql-editor h3 {
+  font-size: 24px;
+  font-weight: 600 !important;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor h4, :global .pnp-richtext-quill-container .ql-editor h4 {
+  font-size: 20px;
+  font-weight: 600 !important;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor blockquote,
+:global .pnp-richtext-quill-container .ql-snow .ql-editor div,
+:global .pnp-richtext-quill-container .ql-snow .ql-editor h2,
+:global .pnp-richtext-quill-container .ql-snow .ql-editor h3,
+:global .pnp-richtext-quill-container .ql-snow .ql-editor h4,
+:global .pnp-richtext-quill-container .ql-snow .ql-editor ol,
+:global .pnp-richtext-quill-container .ql-snow .ql-editor p,
+:global .pnp-richtext-quill-container .ql-snow .ql-editor ul, :global .pnp-richtext-quill-container .ql-editor blockquote,
+:global .pnp-richtext-quill-container .ql-editor div,
+:global .pnp-richtext-quill-container .ql-editor h2,
+:global .pnp-richtext-quill-container .ql-editor h3,
+:global .pnp-richtext-quill-container .ql-editor h4,
+:global .pnp-richtext-quill-container .ql-editor ol,
+:global .pnp-richtext-quill-container .ql-editor p,
+:global .pnp-richtext-quill-container .ql-editor ul {
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.3;
+  word-wrap: break-word;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor blockquote, :global .pnp-richtext-quill-container .ql-editor blockquote {
+  border-bottom-color: var(--rt-neutralLighter, #edebe9);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-left-style: none;
+  border-left-width: 0;
+  border-left-color: transparent;
+  border-right-style: none;
+  border-right-width: 0;
+  border-right-color: transparent;
+  border-top-color: var(--rt-neutralLighter, #edebe9);
+  border-top-style: solid;
+  border-top-width: 1px;
+  font-size: 20px;
+  font-style: italic;
+  font-weight: 600;
+  line-height: 1.3;
+  margin-bottom: 28px;
+  padding-bottom: 32px;
+  margin-top: 28px;
+  margin-right: 0px;
+  margin-left: 0px;
+  padding-left: 32px;
+  padding-right: 32px;
+  padding-top: 32px;
+  text-align: center;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-xsmall, :global .pnp-richtext-quill-container .ql-editor .ql-size-xsmall {
+  font-size: 10px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-small, :global .pnp-richtext-quill-container .ql-editor .ql-size-small {
+  font-size: 12px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-medium, :global .pnp-richtext-quill-container .ql-editor .ql-size-medium {
+  font-size: 14px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-mediumplus, :global .pnp-richtext-quill-container .ql-editor .ql-size-mediumplus {
+  font-size: 16px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-large, :global .pnp-richtext-quill-container .ql-editor .ql-size-large {
+  font-size: 18px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-xlarge, :global .pnp-richtext-quill-container .ql-editor .ql-size-xlarge {
+  font-size: 20px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-xlargeplus, :global .pnp-richtext-quill-container .ql-editor .ql-size-xlargeplus {
+  font-size: 24px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-xxlarge, :global .pnp-richtext-quill-container .ql-editor .ql-size-xxlarge {
+  font-size: 28px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-xxxlarge, :global .pnp-richtext-quill-container .ql-editor .ql-size-xxxlarge {
+  font-size: 32px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-xxlargeplus, :global .pnp-richtext-quill-container .ql-editor .ql-size-xxlargeplus {
+  font-size: 36px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-super, :global .pnp-richtext-quill-container .ql-editor .ql-size-super {
+  font-size: 42px;
+}
+:global .pnp-richtext-quill-container .ql-snow .ql-editor .ql-size-superlarge, :global .pnp-richtext-quill-container .ql-editor .ql-size-superlarge {
+  font-size: 68px;
+}
+@media screen and (min-width: 1024px) {
+  :global .pnp-richtext-quill-container .ql-editor div,
+  :global .pnp-richtext-quill-container .ql-editor ol,
+  :global .pnp-richtext-quill-container .ql-editor p,
+  :global .pnp-richtext-quill-container .ql-editor ul {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.3;
+  }
+}
+:global .pnp-richtext-quill-container .ql-active .ql-editor {
+  color: inherit;
+}
+:global .pnp-richtext-quill-container .ql-tooltip {
+  display: none !important;
+}
+:global .pnp-richtext-quill-container .ql-editor.ql-blank::before {
+  font-style: normal;
+  color: var(--rt-neutralTertiary, #a19f9d);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.3;
+}
+:global .pnp-richtext-quill-container .quill .ql-editor {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--rt-neutralTertiary, #a19f9d);
+}
+:global .pnp-richtext-quill-container .quill .ql-editor:hover {
+  border-color: var(--rt-neutralDark, #201f1e);
+}
+:global .pnp-richtext-quill-container .quill .ql-editor:active::after, :global .pnp-richtext-quill-container .quill .ql-editor:active:focus::after, :global .pnp-richtext-quill-container .quill .ql-editor:active:hover::after, :global .pnp-richtext-quill-container .quill .ql-editor:focus::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  border-style: solid;
+  border-width: 2px;
+  inset: -1px;
+  border-color: var(--rt-themePrimary, #0078d4);
+  border-radius: 2px;
+}
+:global .pnp-richtext-quill-container .ql-editor a {
+  color: var(--rt-themePrimary, #0078d4);
+}
+:global .pnp-richtext-quill-container .ql-editor a:hover {
+  color: var(--rt-themeDarker, #004578);
+}
+:global .pnp-richtext-quill-container .ql-editor ol li:not(.ql-direction-rtl),
+:global .pnp-richtext-quill-container .ql-editor ul li:not(.ql-direction-rtl) {
+  padding-left: 0;
+}
+:global .pnp-richtext-quill-container div#DropDownStyles-list .ms-Dropdown-item, :global .pnp-richtext-quill-container div#DropDownAlign-list .ms-Dropdown-item, :global .pnp-richtext-quill-container div#DropDownLists-list .ms-Dropdown-item {
+  background-color: var(--rt-neutralPrimary, #323130) !important;
+  color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  -webkit-transition-property: background-color, color;
+  transition-property: background-color, color;
+}
+:global .pnp-richtext-quill-container div#DropDownStyles-list .ms-Dropdown-item:hover, :global .pnp-richtext-quill-container div#DropDownAlign-list .ms-Dropdown-item:hover, :global .pnp-richtext-quill-container div#DropDownLists-list .ms-Dropdown-item:hover {
+  background-color: var(--rt-neutralTertiary, #a19f9d) !important;
+  color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
+  cursor: pointer;
+}
+:global .pnp-richtext-quill-container div#DropDownStyles-list .ms-Dropdown-item.is-selected,
+:global .pnp-richtext-quill-container div#DropDownStyles-list .ms-Dropdown-item.is-selected:hover, :global .pnp-richtext-quill-container div#DropDownAlign-list .ms-Dropdown-item.is-selected,
+:global .pnp-richtext-quill-container div#DropDownAlign-list .ms-Dropdown-item.is-selected:hover, :global .pnp-richtext-quill-container div#DropDownLists-list .ms-Dropdown-item.is-selected,
+:global .pnp-richtext-quill-container div#DropDownLists-list .ms-Dropdown-item.is-selected:hover {
+  background-color: var(--rt-themePrimary, #0078d4) !important;
+  color: var(--rt-neutralLighterAlt, #f8f8f8) !important;
+}
+/*# sourceMappingURL=RichText.module.scss.css.map */

package/lib/controls/richText/RichText.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/richText/RichText.module.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;ACHA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAKE;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKE;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;AAAA;AAAA;AAAA;IAIE;IACA;IACA;;;AAIJ;EAEE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOJ;EACE;;AACA;EACE;;AAKN;AAAA;EAEE;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA","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:export {\n  NeutralLighterAlt: \"[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]\";\n  NeutralPrimary: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\";\n  NeutralTertiary: \"[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]\";\n  ThemePrimary: \"[theme:themePrimary, default:#{$ms-color-themePrimary}]\";\n  NeutralLighter: \"[theme:neutralLighter, default:#{$ms-color-neutralLighter}]\";\n  NeutralDark: \"[theme:neutralDark, default:#{$ms-color-neutralDark}]\";\n  ThemeDarker: \"[theme:themeDarker, default:#{$ms-color-themeDarker}]\";\n  White: \"[theme:white, default:#{$ms-color-white}]\";\n}\n\n.richtext {\n  color: inherit;\n}\n\n.insertLinkDialog {\n  :global {\n    .ms-Dialog-main {\n      max-width: 540px;\n      width: 540px;\n    }\n  }\n\n  .actions {\n    position: relative;\n    width: 100%;\n    min-height: 24px;\n    line-height: 24px;\n    margin-top: 20px;\n    margin-right: 0px;\n    margin-bottom: 0px;\n    margin-left: 0px;\n    font-size: 0px;\n\n    .actionsRight {\n      text-align: right;\n      margin-right: -4px;\n      font-size: 0px;\n\n      .action {\n        margin-top: 0px;\n        margin-right: 4px;\n        margin-bottom: 0px;\n        margin-left: 4px;\n      }\n\n      .unlinkButton {\n        margin-top: 4px;\n        font-size: 14px;\n        float: left;\n      }\n    }\n  }\n}\n\n.headerDropDown {\n  width: 160px;\n}\n\n.toolbarDropDown {\n  height: 34px;\n}\n.toolbarDropDownTitleIcon {\n  margin-top: -2px;\n  margin-right: 0px;\n}\n\n.toolbarDropDownIcon {\n  margin-top: -2px;\n  margin-right: 0px;\n  margin-left: -4px;\n}\n\n.toolbarDropDownOption {\n\n  &.toolbarButtonH2 {\n    font-size: 20px;\n    font-weight: 600;\n  }\n\n  &.toolbarButtonH3 {\n    font-size: 18px;\n    font-weight: 600;\n  }\n\n  &.toolbarButtonH4 {\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  &.toolbarButtonBlockQuote {\n    font-size: 16px;\n    font-style: italic;\n  }\n\n  &.toolbarButtonNormal {\n    font-size: 16px;\n  }\n}\n\n.toolbarSubmenuCaret {\n  display: inline-block;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 8px;\n  top: 50%;\n  color: var(--rt-neutralLighterAlt, #f8f8f8);\n}\n\n.toolbarSubmenuDisplayButton {\n  width: 100%;\n}\n\n.editorShell {\n  position: relative;\n}\n\n:global {\n  .pnp-richtext-quill-container {\n    .ql-toolbar {\n      background-color: transparent;\n      color: var(--rt-neutralLighterAlt, #f8f8f8);\n      border: none;\n      display: none;\n\n      .ms-TooltipHost {\n        display: inline-block !important;\n      }\n\n      .ms-Dropdown-container {\n        display: inline-block !important;\n      }\n\n      .ms-Button {\n        background-color: var(--rt-neutralPrimary, #323130);\n        color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n\n        &:hover {\n          background-color: var(--rt-neutralTertiary, #a19f9d);\n          color: var(--rt-neutralLighterAlt, #f8f8f8);\n        }\n\n        &:focus {\n          border: 1px solid var(--rt-neutralLighterAlt, #f8f8f8);\n          outline: 0;\n          color: var(--rt-neutralLighterAlt, #f8f8f8);\n        }\n\n        &:active {\n          color: var(--rt-neutralLighterAlt, #f8f8f8);\n        }\n\n        &.is-checked {\n          background-color: var(--rt-themePrimary, #0078d4) !important;\n        }\n      }\n      .ms-Dropdown-title {\n        background-color: var(--rt-neutralPrimary, #323130);\n        color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n        border: none;\n        min-height: 34px;\n        padding-bottom: 0px;\n        padding-left: 9px;\n        padding-right: 20px;\n        padding-top: 2px;\n        -webkit-transition: all 0.3s;\n        transition: all 0.3s;\n        -webkit-transition-property: background-color, color;\n        transition-property: background-color, color;\n        border-radius: 0;\n\n        &:hover {\n          background-color: var(--rt-neutralTertiary, #a19f9d);\n          color: var(--rt-neutralLighterAlt, #f8f8f8);\n        }\n\n        &:focus {\n          border: 1px solid var(--rt-neutralLighterAlt, #f8f8f8);\n          outline: 0;\n          color: var(--rt-neutralLighterAlt, #f8f8f8);\n        }\n\n        &:active {\n          color: var(--rt-neutralLighterAlt, #f8f8f8);\n        }\n      }\n\n      .ms-Dropdown-caretDownWrapper {\n        right: 4px;\n        margin-top: -1px;\n      }\n    }\n\n    .ql-snow.ql-toolbar button,\n    .ql-snow .ql-toolbar button {\n      background-color: var(--rt-neutralPrimary, #323130);\n      color: var(--rt-neutralLighterAlt, #f8f8f8);\n      font-size: 16px;\n      min-width: 34px;\n      height: 34px;\n      padding-top: 4px;\n      padding-left: 8px;\n      padding-right: 8px;\n      border-radius: 0;\n    }\n\n    .ql-toolbar.ql-snow {\n      padding: 0px;\n      font-family: \"Segoe UI Web (West European)\", Segoe UI, -apple-system,\n        BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;\n      border: none;\n      margin-bottom: 0;\n      z-index: 3;\n      -webkit-animation-name: ms-fadeIn, ms-slideUpIn10;\n      animation-name: ms-fadeIn, ms-slideUpIn10;\n      -webkit-animation-duration: 167ms;\n      animation-duration: 167ms;\n      -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);\n      animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);\n      -webkit-animation-fill-mode: both;\n      animation-fill-mode: both;\n      -webkit-transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);\n      transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);\n    }\n\n    .ql-snow.ql-toolbar:after,\n    .ql-snow .ql-toolbar:after {\n      clear: both;\n      content: \"\";\n      display: table;\n    }\n    .ql-container.ql-snow {\n      border: none;\n    }\n\n    .ql-active .ql-editor:hover {\n      border-width: 1px;\n      border-style: solid;\n      border-color: var(--rt-neutralTertiary, #a19f9d);\n    }\n\n    .ql-active .ql-editor:focus,\n    .ql-active .ql-editor:active,\n    .ql-active .ql-editor:active:hover {\n      border-width: 1px;\n      border-style: solid;\n      border-color: var(--rt-themePrimary, #0078d4);\n    }\n\n    .ql-active .ql-toolbar {\n      display: inline-flex;\n      position: absolute;\n      bottom: 100%;\n      left: 0;\n      opacity: 1;\n      height: 34px;\n      -webkit-box-shadow: 0 0 5px 0 #c8c8c8;\n      box-shadow: 0px 0px 5px 0px #c8c8c8;\n    }\n\n    .ql-snow .ql-editor, .ql-editor{\n      // border: 1px solid transparent;\n      padding-left: 10px;\n      padding-right: 10px;\n      padding-top: 8px;\n      padding-bottom: 8px;\n      min-height: 68px;\n      font-family: \"Segoe UI Web (West European)\", Segoe UI, -apple-system,\n        BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;\n      font-size: 18px;\n\n      h2 {\n        font-weight: 600 !important;\n        font-size: 28px;\n      }\n\n      h3 {\n        font-size: 24px;\n        font-weight: 600 !important;\n      }\n\n      h4 {\n        font-size: 20px;\n        font-weight: 600 !important;\n      }\n\n      blockquote,\n      div,\n      h2,\n      h3,\n      h4,\n      ol,\n      p,\n      ul {\n        -webkit-font-smoothing: antialiased;\n        line-height: 1.3;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        border-bottom-color: var(--rt-neutralLighter, #edebe9);\n        border-bottom-style: solid;\n        border-bottom-width: 1px;\n        border-left-style: none;\n        border-left-width: 0;\n        border-left-color: transparent;\n        border-right-style: none;\n        border-right-width: 0;\n        border-right-color: transparent;\n        border-top-color: var(--rt-neutralLighter, #edebe9);\n        border-top-style: solid;\n        border-top-width: 1px;\n        font-size: 20px;\n        font-style: italic;\n        font-weight: 600;\n        line-height: 1.3;\n        margin-bottom: 28px;\n        padding-bottom: 32px;\n        margin-top: 28px;\n        margin-right: 0px;\n        margin-left: 0px;\n        padding-left: 32px;\n        padding-right: 32px;\n        padding-top: 32px;\n        text-align: center;\n      }\n\n      .ql-size-xsmall {\n        font-size: 10px;\n      }\n\n      .ql-size-small {\n        font-size: 12px;\n      }\n\n      .ql-size-medium {\n        font-size: 14px;\n      }\n\n      .ql-size-mediumplus {\n        font-size: 16px;\n      }\n\n      .ql-size-large {\n        font-size: 18px;\n      }\n\n      .ql-size-xlarge {\n        font-size: 20px;\n      }\n\n      .ql-size-xlargeplus {\n        font-size: 24px;\n      }\n\n      .ql-size-xxlarge {\n        font-size: 28px;\n      }\n\n      .ql-size-xxxlarge {\n        font-size: 32px;\n      }\n\n      .ql-size-xxlargeplus {\n        font-size: 36px;\n      }\n\n      .ql-size-super {\n        font-size: 42px;\n      }\n\n      .ql-size-superlarge {\n        font-size: 68px;\n      }\n    }\n\n    @media screen and (min-width: 1024px) {\n      .ql-editor div,\n      .ql-editor ol,\n      .ql-editor p,\n      .ql-editor ul {\n        font-size: 18px;\n        font-weight: 400;\n        line-height: 1.3;\n      }\n    }\n\n    .ql-active .ql-editor {\n      // background-color: red;\n      color: inherit;\n    }\n\n    .ql-tooltip {\n      display: none !important;\n    }\n\n    .ql-editor.ql-blank::before {\n      font-style: normal;\n      color: var(--rt-neutralTertiary, #a19f9d);\n      font-size: 18px;\n      font-weight: 400;\n      line-height: 1.3;\n    }\n\n    // correct border/hover/active border, same as with other controls, no jumping\n    .quill {\n      .ql-editor {\n        border-width: 1px;\n        border-style: solid;\n        border-color: var(--rt-neutralTertiary, #a19f9d);\n        &:hover {\n          border-color: var(--rt-neutralDark, #201f1e);\n        }\n        &:active::after, &:active:focus::after, &:active:hover::after, &:focus::after {\n          content: \"\";\n          pointer-events: none;\n          position: absolute;\n          border-style: solid;\n          border-width: 2px;\n          inset: -1px;\n          border-color: var(--rt-themePrimary, #0078d4);\n          border-radius: 2px;\n        }\n      }\n    }\n\n    // hyperlink color on dark theme\n    .ql-editor {\n      a {\n        color: var(--rt-themePrimary, #0078d4);\n        &:hover {\n          color: var(--rt-themeDarker, #004578);\n        }\n      }\n    }\n\n    .ql-editor ol li:not(.ql-direction-rtl),\n    .ql-editor ul li:not(.ql-direction-rtl) {\n      padding-left: 0;\n    }\n\n    div#DropDownStyles-list, div#DropDownAlign-list, div#DropDownLists-list {\n      .ms-Dropdown-item {\n        background-color: var(--rt-neutralPrimary, #323130) !important;\n        color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n        -webkit-transition: all 0.3s;\n        transition: all 0.3s;\n        -webkit-transition-property: background-color, color;\n        transition-property: background-color, color;\n      }\n\n      .ms-Dropdown-item:hover {\n        background-color: var(--rt-neutralTertiary, #a19f9d) !important;\n        color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n        cursor: pointer;\n      }\n\n      .ms-Dropdown-item.is-selected,\n      .ms-Dropdown-item.is-selected:hover {\n        background-color: var(--rt-themePrimary, #0078d4) !important;\n        color: var(--rt-neutralLighterAlt, #f8f8f8) !important;\n      }\n    }\n  }\n}\n"],"file":"RichText.module.scss.css"}

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

@@ -43,6 +43,11 @@ export interface IRichTextProps {
      * Additional colors to include in swatch
      */
     customColors?: ISwatchColor[];
+    /**
+     * Optional object-based formatting styles applied by the component itself.
+     * Each key targets a built-in rich text element type.
+     */
+    customStyles?: IRichTextCustomFormattingStyles;
     /**
      * Callback issued when the rich text changes.
      * Returns the text that will be inserted in the rich text control.
@@ -104,6 +109,18 @@ export interface StyleOptions {
      */
     showUnderline?: boolean;
 }
+export interface IRichTextCustomFormattingStyles {
+    normal?: React.CSSProperties;
+    header2?: React.CSSProperties;
+    header3?: React.CSSProperties;
+    header4?: React.CSSProperties;
+    blockQuote?: React.CSSProperties;
+    div?: React.CSSProperties;
+    p?: React.CSSProperties;
+    ul?: React.CSSProperties;
+    ol?: React.CSSProperties;
+    li?: React.CSSProperties;
+}
 export interface IRichTextState {
     /**
      * Whether the rich text is currently editing (i.e.: has focus)
@@ -151,6 +168,5 @@ export interface IRichTextState {
     selectedUrl: string;
     /** The text */
     text: string;
-    wrapperTop: number;
 }
 //# sourceMappingURL=RichText.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichText.types.d.ts","sourceRoot":"","sources":["../../../src/controls/richText/RichText.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAE9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAEpC;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,GAAG,CAAC,OAAO,CAAC;CACxD;AAED,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;SAGK;IACL,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,OAAO,EAAE,GAAG,CAAC;IAEb;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IAGpB;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,GAAG,CAAC;IAEpB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB,eAAe;IACf,IAAI,EAAE,MAAM,CAAC;IAEb,UAAU,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"RichText.types.d.ts","sourceRoot":"","sources":["../../../src/controls/richText/RichText.types.ts"],"names":[],"mappings":"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"}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IRichTextPropertyPaneProps, IRichTextPropertyPaneState } from './RichTextPropertyPane.types';
 import { RangeStatic } from 'quill';
 export default class RichTextPropertyPane extends React.Component<IRichTextPropertyPaneProps, IRichTextPropertyPaneState> {
+    private _customSizeValuesPx;
     constructor(props: IRichTextPropertyPaneProps);
     /**
      * componentDidUpdate lifecycle hook
@@ -18,6 +19,11 @@ export default class RichTextPropertyPane extends React.Component<IRichTextPrope
      * On selection changed event handler
      */
     onChangeSelection: (range: RangeStatic, oldRange?: RangeStatic, source?: RangeStatic) => void;
+    /**
+     * Reads computed styles from the selected rendered element to keep tracked
+     * formatting values (size, color, highlight) in sync with custom CSS classes.
+     */
+    private getRenderedStyleValues;
     /**
      * Render the actions group
      */
@@ -70,6 +76,45 @@ export default class RichTextPropertyPane extends React.Component<IRichTextPrope
      * On size change
      */
     private onChangeSize;
+    /**
+     * 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.
+     */
+    private buildSortedSizeOptions;
+    /**
+     * Resolves a dropdown option to a numeric pixel value for sorting.
+     */
+    private getSizeOptionPx;
+    /**
+     * Extracts distinct font sizes (px) from the custom style configuration.
+     */
+    private getCustomStyleFontSizesPx;
+    /**
+     * Builds a deduplicated color list from custom style declarations for
+     * either font color or background color.
+     */
+    private getCustomStyleSwatchColors;
+    /**
+     * Merges multiple color groups into one list and deduplicates by normalized
+     * color value, so the picker does not show repeated entries.
+     */
+    private mergeSwatchColors;
+    /**
+     * Parses a CSS-like font size input into a numeric pixel value.
+     * Accepts number inputs or strings such as "18px".
+     */
+    private parseStyleSizePx;
+    /**
+     * 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.
+     */
+    private _lastScannedHtml;
+    private refreshCustomSizeValuesFromDocument;
     /**
      * Apply the new format
      *

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextPropertyPane.d.ts","sourceRoot":"","sources":["../../../src/controls/richText/RichTextPropertyPane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAMtG,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,0BAA0B,EAAE,0BAA0B,CAAC;gBAE3G,KAAK,EAAE,0BAA0B;IAQ7C;;;;;OAKG;IACI,kBAAkB,CAAC,SAAS,EAAE,0BAA0B,EAAE,SAAS,EAAE,0BAA0B,GAAG,IAAI;IAa7G;;OAEG;IACI,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC;IAuC/D;;OAEG;IACI,iBAAiB,UAAW,WAAW,aAAa,WAAW,WAAW,WAAW,KAAG,IAAI,CAYlG;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAkDzB;IAED;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAmB5B;IAED;;OAEG;IACH,OAAO,CAAC,oBAAoB,CA2B3B;IAED;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAkG9B;IAED;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAyC7B;IAED;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAkGjC;IAED;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAoC5B;IAED;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAsCjC;IAED;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAE7B;IAED;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAElC;IAED;;OAEG;IACH,OAAO,CAAC,eAAe,CAGtB;IAED;;OAEG;IACH,OAAO,CAAC,cAAc,CAIrB;IAED;;OAEG;IACH,OAAO,CAAC,YAAY,CAGnB;IAED;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IAQnB;;OAEG;IACH,OAAO,CAAC,UAAU,CAMjB;IAED;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAW5B;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAMjB;IAED;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAY7B;CACF"}
+{"version":3,"file":"RichTextPropertyPane.d.ts","sourceRoot":"","sources":["../../../src/controls/richText/RichTextPropertyPane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAOtG,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAiBpC,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,0BAA0B,EAAE,0BAA0B,CAAC;IACvH,OAAO,CAAC,mBAAmB,CAAkC;gBAEjD,KAAK,EAAE,0BAA0B;IAQ7C;;;;;OAKG;IACI,kBAAkB,CAAC,SAAS,EAAE,0BAA0B,EAAE,SAAS,EAAE,0BAA0B,GAAG,IAAI;IAa7G;;OAEG;IACI,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC;IAuC/D;;OAEG;IACI,iBAAiB,GAAI,OAAO,WAAW,EAAE,WAAW,WAAW,EAAE,SAAS,WAAW,KAAG,IAAI,CA2BlG;IAED;;;OAGG;IACH,OAAO,CAAC,sBAAsB,CAiE7B;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAkDzB;IAED;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAmB5B;IAED;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAe3B;IAED;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAkG9B;IAED;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAoD7B;IAED;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAkGjC;IAED;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAoC5B;IAED;;OAEG;IACH,OAAO,CAAC,0BAA0B,CAsCjC;IAED;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAE7B;IAED;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAElC;IAED;;OAEG;IACH,OAAO,CAAC,eAAe,CAUtB;IAED;;OAEG;IACH,OAAO,CAAC,cAAc,CAIrB;IAED;;OAEG;IACH,OAAO,CAAC,YAAY,CAcnB;IAED;;;;;;;OAOG;IACH,OAAO,CAAC,sBAAsB,CAuC7B;IAED;;OAEG;IACH,OAAO,CAAC,eAAe,CAWtB;IAED;;OAEG;IACH,OAAO,CAAC,yBAAyB,CAkBhC;IAED;;;OAGG;IACH,OAAO,CAAC,0BAA0B,CAuBjC;IAED;;;OAGG;IACH,OAAO,CAAC,iBAAiB,CAexB;IAED;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAavB;IAED;;;;OAIG;IACH,OAAO,CAAC,gBAAgB,CAAiC;IAEzD,OAAO,CAAC,mCAAmC,CAuC1C;IAED;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IAQnB;;OAEG;IACH,OAAO,CAAC,UAAU,CAMjB;IAED;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAW5B;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAMjB;IAED;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAY7B;CACF"}