@ckeditor/ckeditor5-font 45.2.1 → 46.0.0-alpha.0

package/build/font.js

@@ -2,4 +2,4 @@
 /*!
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md.
- */(()=>{var e={21:e=>{"use strict";e.exports=function(e,t){Object.keys(t).forEach(function(o){e.setAttribute(o,t[o])})}},51:e=>{"use strict";e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},128:e=>{"use strict";var t={};e.exports=function(e,o){var n=function(e){if(void 0===t[e]){var o=document.querySelector(e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}t[e]=o}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(o)}},237:e=>{"use strict";e.exports=CKEditor5.dll},311:(e,t,o)=>{e.exports=o(237)("./src/ui.js")},355:(e,t,o)=>{e.exports=o(237)("./src/icons.js")},485:(e,t,o)=>{"use strict";o.d(t,{A:()=>s});var n=o(758),r=o.n(n),i=o(935),l=o.n(i)()(r());l.push([e.id,".ck-content .text-tiny{font-size:.7em}.ck-content .text-small{font-size:.85em}.ck-content .text-big{font-size:1.4em}.ck-content .text-huge{font-size:1.8em}",""]);const s=l},584:(e,t,o)=>{e.exports=o(237)("./src/utils.js")},591:e=>{"use strict";var t=[];function o(e){for(var o=-1,n=0;n<t.length;n++)if(t[n].identifier===e){o=n;break}return o}function n(e,n){for(var i={},l=[],s=0;s<e.length;s++){var a=e[s],c=n.base?a[0]+n.base:a[0],u=i[c]||0,d="".concat(c," ").concat(u);i[c]=u+1;var m=o(d),p={css:a[1],media:a[2],sourceMap:a[3],supports:a[4],layer:a[5]};if(-1!==m)t[m].references++,t[m].updater(p);else{var f=r(p,n);n.byIndex=s,t.splice(s,0,{identifier:d,updater:f,references:1})}l.push(d)}return l}function r(e,t){var o=t.domAPI(t);o.update(e);return function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;o.update(e=t)}else o.remove()}}e.exports=function(e,r){var i=n(e=e||[],r=r||{});return function(e){e=e||[];for(var l=0;l<i.length;l++){var s=o(i[l]);t[s].references--}for(var a=n(e,r),c=0;c<i.length;c++){var u=o(i[c]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}i=a}}},639:e=>{"use strict";var t,o=(t=[],function(e,o){return t[e]=o,t.filter(Boolean).join("\n")});function n(e,t,n,r){var i;if(n)i="";else{i="",r.supports&&(i+="@supports (".concat(r.supports,") {")),r.media&&(i+="@media ".concat(r.media," {"));var l=void 0!==r.layer;l&&(i+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),i+=r.css,l&&(i+="}"),r.media&&(i+="}"),r.supports&&(i+="}")}if(e.styleSheet)e.styleSheet.cssText=o(t,i);else{var s=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(s,a[t]):e.appendChild(s)}}var r={singleton:null,singletonCounter:0};e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=r.singletonCounter++,o=r.singleton||(r.singleton=e.insertStyleElement(e));return{update:function(e){n(o,t,!1,e)},remove:function(e){n(o,t,!0,e)}}}},758:e=>{"use strict";e.exports=function(e){return e[1]}},782:(e,t,o)=>{e.exports=o(237)("./src/core.js")},783:(e,t,o)=>{e.exports=o(237)("./src/engine.js")},935:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o="",n=void 0!==t[5];return t[4]&&(o+="@supports (".concat(t[4],") {")),t[2]&&(o+="@media ".concat(t[2]," {")),n&&(o+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),o+=e(t),n&&(o+="}"),t[2]&&(o+="}"),t[4]&&(o+="}"),o}).join("")},t.i=function(e,o,n,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(n)for(var s=0;s<this.length;s++){var a=this[s][0];null!=a&&(l[a]=!0)}for(var c=0;c<e.length;c++){var u=[].concat(e[c]);n&&l[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),o&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=o):u[2]=o),r&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=r):u[4]="".concat(r)),t.push(u))}},t}}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var i=t[n]={id:n,exports:{}};return e[n](i,i.exports,o),i.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};(()=>{"use strict";o.r(n),o.d(n,{Font:()=>Q,FontBackgroundColor:()=>J,FontBackgroundColorEditing:()=>W,FontBackgroundColorUI:()=>Y,FontColor:()=>U,FontColorEditing:()=>R,FontColorUI:()=>q,FontFamily:()=>y,FontFamilyEditing:()=>b,FontFamilyUI:()=>w,FontSize:()=>$,FontSizeEditing:()=>k,FontSizeUI:()=>j});var e=o(782);class t extends e.Command{attributeKey;constructor(e,t){super(e),this.attributeKey=t}refresh(){const e=this.editor.model,t=e.document;this.value=t.selection.getAttribute(this.attributeKey),this.isEnabled=e.schema.checkAttributeInSelection(t.selection,this.attributeKey)}execute(e={}){const t=this.editor.model,o=t.document.selection,n=e.value,r=e.batch,i=e=>{if(o.isCollapsed)n?e.setSelectionAttribute(this.attributeKey,n):e.removeSelectionAttribute(this.attributeKey);else{const r=t.schema.getValidRanges(o.getRanges(),this.attributeKey);for(const t of r)n?e.setAttribute(this.attributeKey,n,t):e.removeAttribute(this.attributeKey,t)}};r?t.enqueueChange(r,e=>{i(e)}):t.change(e=>{i(e)})}}var r=o(311);const i="fontSize",l="fontFamily",s="fontColor",a="fontBackgroundColor";function c(e,t){const o={model:{key:e,values:[]},view:{},upcastAlso:{}};for(const e of t)o.model.values.push(e.model),o.view[e.model]=e.view,e.upcastAlso&&(o.upcastAlso[e.model]=e.upcastAlso);return o}function u(e){return t=>t.getStyle(e).replace(/\s/g,"")}function d(e){return(t,{writer:o})=>o.createAttributeElement("span",{style:`${e}:${t}`},{priority:7})}class m extends t{constructor(e){super(e,l)}}function p(e){return e.map(f).filter(e=>void 0!==e)}function f(e){return"object"==typeof e?e:"default"===e?{title:"Default",model:void 0}:"string"==typeof e?function(e){const t=e.replace(/"|'/g,"").split(","),o=t[0],n=t.map(g).join(", ");return{title:o,model:n,view:{name:"span",styles:{"font-family":n},priority:7}}}(e):void 0}function g(e){return(e=e.trim()).indexOf(" ")>0&&(e=`'${e}'`),e}class b extends e.Plugin{static get pluginName(){return"FontFamilyEditing"}static get isOfficialPlugin(){return!0}constructor(e){super(e),e.config.define(l,{options:["default","Arial, Helvetica, sans-serif","Courier New, Courier, monospace","Georgia, serif","Lucida Sans Unicode, Lucida Grande, sans-serif","Tahoma, Geneva, sans-serif","Times New Roman, Times, serif","Trebuchet MS, Helvetica, sans-serif","Verdana, Geneva, sans-serif"],supportAllValues:!1})}init(){const e=this.editor;e.model.schema.extend("$text",{allowAttributes:l}),e.model.schema.setAttributeProperties(l,{isFormatting:!0,copyOnEnter:!0});const t=p(e.config.get("fontFamily.options")).filter(e=>e.model),o=c(l,t);e.config.get("fontFamily.supportAllValues")?(this._prepareAnyValueConverters(),this._prepareCompatibilityConverter()):e.conversion.attributeToElement(o),e.commands.add(l,new m(e))}_prepareAnyValueConverters(){const e=this.editor;e.conversion.for("downcast").attributeToElement({model:l,view:(e,{writer:t})=>t.createAttributeElement("span",{style:"font-family:"+e},{priority:7})}),e.conversion.for("upcast").elementToAttribute({model:{key:l,value:e=>e.getStyle("font-family")},view:{name:"span",styles:{"font-family":/.*/}}})}_prepareCompatibilityConverter(){this.editor.conversion.for("upcast").elementToAttribute({view:{name:"font",attributes:{face:/.*/}},model:{key:l,value:e=>e.getAttribute("face")}})}}var h=o(584),v=o(355);class w extends e.Plugin{static get pluginName(){return"FontFamilyUI"}static get isOfficialPlugin(){return!0}init(){const e=this.editor,t=e.t,o=this._getLocalizedOptions(),n=e.commands.get(l),i=t("Font Family"),s=function(e,t){const o=new h.Collection;for(const n of e){const e={type:"button",model:new r.ViewModel({commandName:l,commandParam:n.model,label:n.title,role:"menuitemradio",withText:!0})};e.model.bind("isOn").to(t,"value",e=>e===n.model||!(!e||!n.model)&&e.split(",")[0].replace(/'/g,"").toLowerCase()===n.model.toLowerCase()),n.view&&"string"!=typeof n.view&&n.view.styles&&e.model.set("labelStyle",`font-family: ${n.view.styles["font-family"]}`),o.add(e)}return o}(o,n);e.ui.componentFactory.add(l,t=>{const o=(0,r.createDropdown)(t);return(0,r.addListToDropdown)(o,s,{role:"menu",ariaLabel:i}),o.buttonView.set({label:i,icon:v.IconFontFamily,tooltip:!0}),o.extendTemplate({attributes:{class:"ck-font-family-dropdown"}}),o.bind("isEnabled").to(n),this.listenTo(o,"execute",t=>{e.execute(t.source.commandName,{value:t.source.commandParam}),e.editing.view.focus()}),o}),e.ui.componentFactory.add(`menuBar:${l}`,t=>{const o=new r.MenuBarMenuView(t);o.buttonView.set({label:i,icon:v.IconFontFamily}),o.bind("isEnabled").to(n);const l=new r.MenuBarMenuListView(t);for(const n of s){const i=new r.MenuBarMenuListItemView(t,o),s=new r.MenuBarMenuListItemButtonView(t);s.set({role:"menuitemradio",isToggleable:!0}),s.bind(...Object.keys(n.model)).to(n.model),s.delegate("execute").to(o),s.on("execute",()=>{e.execute(n.model.commandName,{value:n.model.commandParam}),e.editing.view.focus()}),i.children.add(s),l.items.add(i)}return o.panelView.children.add(l),o})}_getLocalizedOptions(){const e=this.editor,t=e.t;return p(e.config.get(l).options).map(e=>("Default"===e.title&&(e.title=t("Default")),e))}}class y extends e.Plugin{static get requires(){return[b,w]}static get pluginName(){return"FontFamily"}static get isOfficialPlugin(){return!0}}var x=o(783);class C extends t{constructor(e){super(e,i)}}function F(e){return e.map(e=>function(e){"number"==typeof e&&(e=String(e));if("object"==typeof e&&(t=e,t.title&&t.model&&t.view))return P(e);var t;const o=function(e){return"string"==typeof e?S[e]:S[e.model]}(e);if(o)return P(o);if("default"===e)return{model:void 0,title:"Default"};if(function(e){let t;if("object"==typeof e){if(!e.model)throw new h.CKEditorError("font-size-invalid-definition",null,e);t=parseFloat(e.model)}else t=parseFloat(e);return isNaN(t)}(e))return;return function(e){"string"==typeof e&&(e={title:e,model:`${parseFloat(e)}px`});return e.view={name:"span",styles:{"font-size":e.model}},P(e)}(e)}(e)).filter(e=>void 0!==e)}const S={get tiny(){return{title:"Tiny",model:"tiny",view:{name:"span",classes:"text-tiny",priority:7}}},get small(){return{title:"Small",model:"small",view:{name:"span",classes:"text-small",priority:7}}},get big(){return{title:"Big",model:"big",view:{name:"span",classes:"text-big",priority:7}}},get huge(){return{title:"Huge",model:"huge",view:{name:"span",classes:"text-huge",priority:7}}}};function P(e){return e.view&&"string"!=typeof e.view&&!e.view.priority&&(e.view.priority=7),e}const A=["x-small","x-small","small","medium","large","x-large","xx-large","xxx-large"];class k extends e.Plugin{static get pluginName(){return"FontSizeEditing"}static get isOfficialPlugin(){return!0}constructor(e){super(e),e.config.define(i,{options:["tiny","small","default","big","huge"],supportAllValues:!1})}init(){const e=this.editor;e.model.schema.extend("$text",{allowAttributes:i}),e.model.schema.setAttributeProperties(i,{isFormatting:!0,copyOnEnter:!0});const t=e.config.get("fontSize.supportAllValues"),o=F(this.editor.config.get("fontSize.options")).filter(e=>e.model),n=c(i,o);t?(this._prepareAnyValueConverters(n),this._prepareCompatibilityConverter()):e.conversion.attributeToElement(n),e.commands.add(i,new C(e))}_prepareAnyValueConverters(e){const t=this.editor,o=e.model.values.filter(e=>!(0,x.isLength)(String(e))&&!(0,x.isPercentage)(String(e)));if(o.length)throw new h.CKEditorError("font-size-invalid-use-of-named-presets",null,{presets:o});t.conversion.for("downcast").attributeToElement({model:i,view:(e,{writer:t})=>{if(e)return t.createAttributeElement("span",{style:"font-size:"+e},{priority:7})}}),t.conversion.for("upcast").elementToAttribute({model:{key:i,value:e=>e.getStyle("font-size")},view:{name:"span",styles:{"font-size":/.*/}}})}_prepareCompatibilityConverter(){this.editor.conversion.for("upcast").elementToAttribute({view:{name:"font",attributes:{size:/^[+-]?\d{1,3}$/}},model:{key:i,value:e=>{const t=e.getAttribute("size"),o="-"===t[0]||"+"===t[0];let n=parseInt(t,10);o&&(n=3+n);const r=A.length-1,i=Math.min(Math.max(n,0),r);return A[i]}}})}}var B=o(591),L=o.n(B),O=o(639),N=o.n(O),T=o(128),E=o.n(T),V=o(21),z=o.n(V),I=o(51),M=o.n(I),D=o(485),_={attributes:{"data-cke":!0}};_.setAttributes=z(),_.insert=E().bind(null,"head"),_.domAPI=N(),_.insertStyleElement=M();L()(D.A,_);D.A&&D.A.locals&&D.A.locals;class j extends e.Plugin{static get pluginName(){return"FontSizeUI"}static get isOfficialPlugin(){return!0}init(){const e=this.editor,t=e.t,o=this._getLocalizedOptions(),n=e.commands.get(i),l=t("Font Size"),s=function(e,t){const o=new h.Collection;for(const n of e){const e={type:"button",model:new r.ViewModel({commandName:i,commandParam:n.model,label:n.title,class:"ck-fontsize-option",role:"menuitemradio",withText:!0})};n.view&&"string"!=typeof n.view&&(n.view.styles&&e.model.set("labelStyle",`font-size:${n.view.styles["font-size"]}`),n.view.classes&&e.model.set("class",`${e.model.class} ${n.view.classes}`)),e.model.bind("isOn").to(t,"value",e=>e===n.model),o.add(e)}return o}(o,n);e.ui.componentFactory.add(i,t=>{const o=(0,r.createDropdown)(t);return(0,r.addListToDropdown)(o,s,{role:"menu",ariaLabel:l}),o.buttonView.set({label:l,icon:v.IconFontSize,tooltip:!0}),o.extendTemplate({attributes:{class:["ck-font-size-dropdown"]}}),o.bind("isEnabled").to(n),this.listenTo(o,"execute",t=>{e.execute(t.source.commandName,{value:t.source.commandParam}),e.editing.view.focus()}),o}),e.ui.componentFactory.add(`menuBar:${i}`,t=>{const o=new r.MenuBarMenuView(t);o.buttonView.set({label:l,icon:v.IconFontSize}),o.bind("isEnabled").to(n);const i=new r.MenuBarMenuListView(t);for(const n of s){const l=new r.MenuBarMenuListItemView(t,o),s=new r.MenuBarMenuListItemButtonView(t);s.set({role:"menuitemradio",isToggleable:!0}),s.bind(...Object.keys(n.model)).to(n.model),s.delegate("execute").to(o),s.on("execute",()=>{e.execute(n.model.commandName,{value:n.model.commandParam}),e.editing.view.focus()}),l.children.add(s),i.items.add(l)}return o.panelView.children.add(i),o})}_getLocalizedOptions(){const e=this.editor,t=e.t,o={Default:t("Default"),Tiny:t("Tiny"),Small:t("Small"),Big:t("Big"),Huge:t("Huge")};return F(e.config.get(i).options).map(e=>{const t=o[e.title];return t&&t!=e.title&&(e=Object.assign({},e,{title:t})),e})}}class $ extends e.Plugin{static get requires(){return[k,j]}static get pluginName(){return"FontSize"}static get isOfficialPlugin(){return!0}normalizeSizeOptions(e){return F(e)}}class K extends t{constructor(e){super(e,s)}}class R extends e.Plugin{static get pluginName(){return"FontColorEditing"}static get isOfficialPlugin(){return!0}constructor(e){super(e),e.config.define(s,{colors:[{color:"hsl(0, 0%, 0%)",label:"Black"},{color:"hsl(0, 0%, 30%)",label:"Dim grey"},{color:"hsl(0, 0%, 60%)",label:"Grey"},{color:"hsl(0, 0%, 90%)",label:"Light grey"},{color:"hsl(0, 0%, 100%)",label:"White",hasBorder:!0},{color:"hsl(0, 75%, 60%)",label:"Red"},{color:"hsl(30, 75%, 60%)",label:"Orange"},{color:"hsl(60, 75%, 60%)",label:"Yellow"},{color:"hsl(90, 75%, 60%)",label:"Light green"},{color:"hsl(120, 75%, 60%)",label:"Green"},{color:"hsl(150, 75%, 60%)",label:"Aquamarine"},{color:"hsl(180, 75%, 60%)",label:"Turquoise"},{color:"hsl(210, 75%, 60%)",label:"Light blue"},{color:"hsl(240, 75%, 60%)",label:"Blue"},{color:"hsl(270, 75%, 60%)",label:"Purple"}],columns:5}),e.conversion.for("upcast").elementToAttribute({view:{name:"span",styles:{color:/[\s\S]+/}},model:{key:s,value:u("color")}}),e.conversion.for("upcast").elementToAttribute({view:{name:"font",attributes:{color:/^#?\w+$/}},model:{key:s,value:e=>e.getAttribute("color")}}),e.conversion.for("downcast").attributeToElement({model:s,view:d("color")}),e.commands.add(s,new K(e)),e.model.schema.extend("$text",{allowAttributes:s}),e.model.schema.setAttributeProperties(s,{isFormatting:!0,copyOnEnter:!0})}}class G extends e.Plugin{commandName;componentName;icon;dropdownLabel;columns;constructor(e,{commandName:t,componentName:o,icon:n,dropdownLabel:r}){super(e),this.commandName=t,this.componentName=o,this.icon=n,this.dropdownLabel=r,this.columns=e.config.get(`${this.componentName}.columns`)}init(){const e=this.editor,t=e.locale,o=t.t,n=e.commands.get(this.commandName),i=e.config.get(this.componentName),l=(0,r.normalizeColorOptions)(i.colors),s=(0,r.getLocalizedColorOptions)(t,l),a=i.documentColors,c=!1!==i.colorPicker;e.ui.componentFactory.add(this.componentName,t=>{const l=(0,r.createDropdown)(t);let u=!1;const d=function({dropdownView:e,colors:t,columns:o,removeButtonLabel:n,colorPickerLabel:i,documentColorsLabel:l,documentColorsCount:s,colorPickerViewConfig:a}){const c=e.locale,u=new r.ColorSelectorView(c,{colors:t,columns:o,removeButtonLabel:n,colorPickerLabel:i,documentColorsLabel:l,documentColorsCount:s,colorPickerViewConfig:a});return e.colorSelectorView=u,e.panelView.children.add(u),u}({dropdownView:l,colors:s.map(e=>({label:e.label,color:e.model,options:{hasBorder:e.hasBorder}})),columns:this.columns,removeButtonLabel:o("Remove color"),colorPickerLabel:o("Color picker"),documentColorsLabel:0!==a?o("Document colors"):"",documentColorsCount:void 0===a?this.columns:a,colorPickerViewConfig:!!c&&(i.colorPicker||{})});return d.bind("selectedColor").to(n,"value"),l.buttonView.set({label:this.dropdownLabel,icon:this.icon,tooltip:!0}),l.extendTemplate({attributes:{class:"ck-color-ui-dropdown"}}),l.bind("isEnabled").to(n),d.on("execute",(t,o)=>{l.isOpen&&e.execute(this.commandName,{value:o.value,batch:this._undoStepBatch}),"colorPicker"!==o.source&&e.editing.view.focus(),"colorPickerSaveButton"===o.source&&(l.isOpen=!1)}),d.on("colorPicker:show",()=>{this._undoStepBatch=e.model.createBatch()}),d.on("colorPicker:cancel",()=>{this._undoStepBatch.operations.length&&(l.isOpen=!1,e.execute("undo",this._undoStepBatch)),e.editing.view.focus()}),l.on("change:isOpen",(t,o,n)=>{u||(u=!0,l.colorSelectorView.appendUI()),n&&(0!==a&&d.updateDocumentColors(e.model,this.componentName),d.updateSelectedColors(),d.showColorGridsFragment())}),(0,r.focusChildOnDropdownOpen)(l,()=>l.colorSelectorView.colorGridsFragmentView.staticColorsGrid.items.find(e=>e.isOn)),l}),e.ui.componentFactory.add(`menuBar:${this.componentName}`,t=>{const i=new r.MenuBarMenuView(t);i.buttonView.set({label:this.dropdownLabel,icon:this.icon}),i.bind("isEnabled").to(n);let l=!1;const c=new r.ColorSelectorView(t,{colors:s.map(e=>({label:e.label,color:e.model,options:{hasBorder:e.hasBorder}})),columns:this.columns,removeButtonLabel:o("Remove color"),colorPickerLabel:o("Color picker"),documentColorsLabel:0!==a?o("Document colors"):"",documentColorsCount:void 0===a?this.columns:a,colorPickerViewConfig:!1});return c.bind("selectedColor").to(n,"value"),c.delegate("execute").to(i),c.on("execute",(t,o)=>{e.execute(this.commandName,{value:o.value,batch:this._undoStepBatch}),e.editing.view.focus()}),i.on("change:isOpen",(t,o,n)=>{l||(l=!0,c.appendUI()),n&&(0!==a&&c.updateDocumentColors(e.model,this.componentName),c.updateSelectedColors(),c.showColorGridsFragment())}),i.panelView.children.add(c),i})}}class q extends G{constructor(e){const t=e.locale.t;super(e,{commandName:s,componentName:s,icon:v.IconFontColor,dropdownLabel:t("Font Color")})}static get pluginName(){return"FontColorUI"}}class U extends e.Plugin{static get requires(){return[R,q]}static get pluginName(){return"FontColor"}static get isOfficialPlugin(){return!0}}class H extends t{constructor(e){super(e,a)}}class W extends e.Plugin{static get pluginName(){return"FontBackgroundColorEditing"}static get isOfficialPlugin(){return!0}constructor(e){super(e),e.config.define(a,{colors:[{color:"hsl(0, 0%, 0%)",label:"Black"},{color:"hsl(0, 0%, 30%)",label:"Dim grey"},{color:"hsl(0, 0%, 60%)",label:"Grey"},{color:"hsl(0, 0%, 90%)",label:"Light grey"},{color:"hsl(0, 0%, 100%)",label:"White",hasBorder:!0},{color:"hsl(0, 75%, 60%)",label:"Red"},{color:"hsl(30, 75%, 60%)",label:"Orange"},{color:"hsl(60, 75%, 60%)",label:"Yellow"},{color:"hsl(90, 75%, 60%)",label:"Light green"},{color:"hsl(120, 75%, 60%)",label:"Green"},{color:"hsl(150, 75%, 60%)",label:"Aquamarine"},{color:"hsl(180, 75%, 60%)",label:"Turquoise"},{color:"hsl(210, 75%, 60%)",label:"Light blue"},{color:"hsl(240, 75%, 60%)",label:"Blue"},{color:"hsl(270, 75%, 60%)",label:"Purple"}],columns:5}),e.data.addStyleProcessorRules(x.addBackgroundRules),e.conversion.for("upcast").elementToAttribute({view:{name:"span",styles:{"background-color":/[\s\S]+/}},model:{key:a,value:u("background-color")}}),e.conversion.for("downcast").attributeToElement({model:a,view:d("background-color")}),e.commands.add(a,new H(e)),e.model.schema.extend("$text",{allowAttributes:a}),e.model.schema.setAttributeProperties(a,{isFormatting:!0,copyOnEnter:!0})}}class Y extends G{constructor(e){const t=e.locale.t;super(e,{commandName:a,componentName:a,icon:v.IconFontBackground,dropdownLabel:t("Font Background Color")})}static get pluginName(){return"FontBackgroundColorUI"}}class J extends e.Plugin{static get requires(){return[W,Y]}static get pluginName(){return"FontBackgroundColor"}static get isOfficialPlugin(){return!0}}class Q extends e.Plugin{static get requires(){return[y,$,U,J]}static get pluginName(){return"Font"}static get isOfficialPlugin(){return!0}}})(),(window.CKEditor5=window.CKEditor5||{}).font=n})();
+ */(()=>{var e={21:e=>{"use strict";e.exports=function(e,t){Object.keys(t).forEach(function(o){e.setAttribute(o,t[o])})}},51:e=>{"use strict";e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},128:e=>{"use strict";var t={};e.exports=function(e,o){var n=function(e){if(void 0===t[e]){var o=document.querySelector(e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}t[e]=o}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(o)}},237:e=>{"use strict";e.exports=CKEditor5.dll},311:(e,t,o)=>{e.exports=o(237)("./src/ui.js")},355:(e,t,o)=>{e.exports=o(237)("./src/icons.js")},485:(e,t,o)=>{"use strict";o.d(t,{A:()=>s});var n=o(758),r=o.n(n),i=o(935),l=o.n(i)()(r());l.push([e.id,":root{--ck-content-font-size-tiny:0.7em;--ck-content-font-size-small:0.85em;--ck-content-font-size-big:1.4em;--ck-content-font-size-huge:1.8em}.ck-content .text-tiny{font-size:var(--ck-content-font-size-tiny)}.ck-content .text-small{font-size:var(--ck-content-font-size-small)}.ck-content .text-big{font-size:var(--ck-content-font-size-big)}.ck-content .text-huge{font-size:var(--ck-content-font-size-huge)}",""]);const s=l},584:(e,t,o)=>{e.exports=o(237)("./src/utils.js")},591:e=>{"use strict";var t=[];function o(e){for(var o=-1,n=0;n<t.length;n++)if(t[n].identifier===e){o=n;break}return o}function n(e,n){for(var i={},l=[],s=0;s<e.length;s++){var a=e[s],c=n.base?a[0]+n.base:a[0],u=i[c]||0,d="".concat(c," ").concat(u);i[c]=u+1;var m=o(d),p={css:a[1],media:a[2],sourceMap:a[3],supports:a[4],layer:a[5]};if(-1!==m)t[m].references++,t[m].updater(p);else{var f=r(p,n);n.byIndex=s,t.splice(s,0,{identifier:d,updater:f,references:1})}l.push(d)}return l}function r(e,t){var o=t.domAPI(t);o.update(e);return function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;o.update(e=t)}else o.remove()}}e.exports=function(e,r){var i=n(e=e||[],r=r||{});return function(e){e=e||[];for(var l=0;l<i.length;l++){var s=o(i[l]);t[s].references--}for(var a=n(e,r),c=0;c<i.length;c++){var u=o(i[c]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}i=a}}},639:e=>{"use strict";var t,o=(t=[],function(e,o){return t[e]=o,t.filter(Boolean).join("\n")});function n(e,t,n,r){var i;if(n)i="";else{i="",r.supports&&(i+="@supports (".concat(r.supports,") {")),r.media&&(i+="@media ".concat(r.media," {"));var l=void 0!==r.layer;l&&(i+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),i+=r.css,l&&(i+="}"),r.media&&(i+="}"),r.supports&&(i+="}")}if(e.styleSheet)e.styleSheet.cssText=o(t,i);else{var s=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(s,a[t]):e.appendChild(s)}}var r={singleton:null,singletonCounter:0};e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=r.singletonCounter++,o=r.singleton||(r.singleton=e.insertStyleElement(e));return{update:function(e){n(o,t,!1,e)},remove:function(e){n(o,t,!0,e)}}}},758:e=>{"use strict";e.exports=function(e){return e[1]}},782:(e,t,o)=>{e.exports=o(237)("./src/core.js")},783:(e,t,o)=>{e.exports=o(237)("./src/engine.js")},935:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o="",n=void 0!==t[5];return t[4]&&(o+="@supports (".concat(t[4],") {")),t[2]&&(o+="@media ".concat(t[2]," {")),n&&(o+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),o+=e(t),n&&(o+="}"),t[2]&&(o+="}"),t[4]&&(o+="}"),o}).join("")},t.i=function(e,o,n,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(n)for(var s=0;s<this.length;s++){var a=this[s][0];null!=a&&(l[a]=!0)}for(var c=0;c<e.length;c++){var u=[].concat(e[c]);n&&l[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),o&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=o):u[2]=o),r&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=r):u[4]="".concat(r)),t.push(u))}},t}}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var i=t[n]={id:n,exports:{}};return e[n](i,i.exports,o),i.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};(()=>{"use strict";o.r(n),o.d(n,{Font:()=>Z,FontBackgroundColor:()=>X,FontBackgroundColorCommand:()=>Y,FontBackgroundColorEditing:()=>J,FontBackgroundColorUI:()=>Q,FontColor:()=>W,FontColorCommand:()=>R,FontColorEditing:()=>G,FontColorUI:()=>H,FontColorUIBase:()=>q,FontCommand:()=>t,FontFamily:()=>F,FontFamilyCommand:()=>p,FontFamilyEditing:()=>v,FontFamilyUI:()=>C,FontSize:()=>U,FontSizeCommand:()=>S,FontSizeEditing:()=>O,FontSizeUI:()=>K,_addFontColorSelectorToDropdown:()=>m,_buildFontDefinition:()=>c,_normalizeFontFamilyOptions:()=>f,_normalizeFontSizeOptions:()=>k,_renderDowncastFontElement:()=>d,_renderUpcastFontColorAttribute:()=>u});var e=o(782);class t extends e.Command{attributeKey;constructor(e,t){super(e),this.attributeKey=t}refresh(){const e=this.editor.model,t=e.document;this.value=t.selection.getAttribute(this.attributeKey),this.isEnabled=e.schema.checkAttributeInSelection(t.selection,this.attributeKey)}execute(e={}){const t=this.editor.model,o=t.document.selection,n=e.value,r=e.batch,i=e=>{if(o.isCollapsed)n?e.setSelectionAttribute(this.attributeKey,n):e.removeSelectionAttribute(this.attributeKey);else{const r=t.schema.getValidRanges(o.getRanges(),this.attributeKey);for(const t of r)n?e.setAttribute(this.attributeKey,n,t):e.removeAttribute(this.attributeKey,t)}};r?t.enqueueChange(r,e=>{i(e)}):t.change(e=>{i(e)})}}var r=o(311);const i="fontSize",l="fontFamily",s="fontColor",a="fontBackgroundColor";function c(e,t){const o={model:{key:e,values:[]},view:{},upcastAlso:{}};for(const e of t)o.model.values.push(e.model),o.view[e.model]=e.view,e.upcastAlso&&(o.upcastAlso[e.model]=e.upcastAlso);return o}function u(e){return t=>t.getStyle(e).replace(/\s/g,"")}function d(e){return(t,{writer:o})=>o.createAttributeElement("span",{style:`${e}:${t}`},{priority:7})}function m({dropdownView:e,colors:t,columns:o,removeButtonLabel:n,colorPickerLabel:i,documentColorsLabel:l,documentColorsCount:s,colorPickerViewConfig:a}){const c=e.locale,u=new r.ColorSelectorView(c,{colors:t,columns:o,removeButtonLabel:n,colorPickerLabel:i,documentColorsLabel:l,documentColorsCount:s,colorPickerViewConfig:a});return e.colorSelectorView=u,e.panelView.children.add(u),u}class p extends t{constructor(e){super(e,l)}}function f(e){return e.map(b).filter(e=>void 0!==e)}function g(e){return e.replace(/["']/g,"").split(",").map(e=>e.trim())}function b(e){return"object"==typeof e?e:"default"===e?{title:"Default",model:void 0}:"string"==typeof e?function(e){const t=g(e),o=t[0],n=t.map(h).join(", ");return{title:o,model:n,view:{name:"span",styles:{"font-family":n},priority:7}}}(e):void 0}function h(e){return(e=e.trim()).indexOf(" ")>0&&(e=`'${e}'`),e}class v extends e.Plugin{static get pluginName(){return"FontFamilyEditing"}static get isOfficialPlugin(){return!0}constructor(e){super(e),e.config.define(l,{options:["default","Arial, Helvetica, sans-serif","Courier New, Courier, monospace","Georgia, serif","Lucida Sans Unicode, Lucida Grande, sans-serif","Tahoma, Geneva, sans-serif","Times New Roman, Times, serif","Trebuchet MS, Helvetica, sans-serif","Verdana, Geneva, sans-serif"],supportAllValues:!1})}init(){const e=this.editor;e.model.schema.extend("$text",{allowAttributes:l}),e.model.schema.setAttributeProperties(l,{isFormatting:!0,copyOnEnter:!0});const t=f(e.config.get("fontFamily.options")).filter(e=>e.model),o=c(l,t);e.config.get("fontFamily.supportAllValues")?(this._prepareAnyValueConverters(),this._prepareCompatibilityConverter()):e.conversion.attributeToElement(o),e.commands.add(l,new p(e))}_prepareAnyValueConverters(){const e=this.editor;e.conversion.for("downcast").attributeToElement({model:l,view:(e,{writer:t})=>t.createAttributeElement("span",{style:"font-family:"+e},{priority:7})}),e.conversion.for("upcast").elementToAttribute({model:{key:l,value:e=>e.getStyle("font-family")},view:{name:"span",styles:{"font-family":/.*/}}})}_prepareCompatibilityConverter(){this.editor.conversion.for("upcast").elementToAttribute({view:{name:"font",attributes:{face:/.*/}},model:{key:l,value:e=>e.getAttribute("face")}})}}var y=o(584),w=o(355);class C extends e.Plugin{static get pluginName(){return"FontFamilyUI"}static get isOfficialPlugin(){return!0}init(){const e=this.editor,t=e.t,o=this._getLocalizedOptions(),n=e.commands.get(l),i=t("Font Family"),s=function(e,t){const o=new y.Collection;for(const n of e){const e={type:"button",model:new r.UIModel({commandName:l,commandParam:n.model,label:n.title,role:"menuitemradio",withText:!0})};e.model.bind("isOn").to(t,"value",e=>{if(e===n.model)return!0;if(!e||!n.model)return!1;return g(e)[0].toLowerCase()===g(n.model)[0].toLowerCase()}),n.view&&"string"!=typeof n.view&&n.view.styles&&e.model.set("labelStyle",`font-family: ${n.view.styles["font-family"]}`),o.add(e)}return o}(o,n);e.ui.componentFactory.add(l,t=>{const o=(0,r.createDropdown)(t);return(0,r.addListToDropdown)(o,s,{role:"menu",ariaLabel:i}),o.buttonView.set({label:i,icon:w.IconFontFamily,tooltip:!0}),o.extendTemplate({attributes:{class:"ck-font-family-dropdown"}}),o.bind("isEnabled").to(n),this.listenTo(o,"execute",t=>{e.execute(t.source.commandName,{value:t.source.commandParam}),e.editing.view.focus()}),o}),e.ui.componentFactory.add(`menuBar:${l}`,t=>{const o=new r.MenuBarMenuView(t);o.buttonView.set({label:i,icon:w.IconFontFamily}),o.bind("isEnabled").to(n);const l=new r.MenuBarMenuListView(t);for(const n of s){const i=new r.MenuBarMenuListItemView(t,o),s=new r.MenuBarMenuListItemButtonView(t);s.set({role:"menuitemradio",isToggleable:!0}),s.bind(...Object.keys(n.model)).to(n.model),s.delegate("execute").to(o),s.on("execute",()=>{e.execute(n.model.commandName,{value:n.model.commandParam}),e.editing.view.focus()}),i.children.add(s),l.items.add(i)}return o.panelView.children.add(l),o})}_getLocalizedOptions(){const e=this.editor,t=e.t;return f(e.config.get(l).options).map(e=>("Default"===e.title&&(e.title=t("Default")),e))}}class F extends e.Plugin{static get requires(){return[v,C]}static get pluginName(){return"FontFamily"}static get isOfficialPlugin(){return!0}}var x=o(783);class S extends t{constructor(e){super(e,i)}}function k(e){return e.map(e=>function(e){"number"==typeof e&&(e=String(e));if("object"==typeof e&&(t=e,t.title&&t.model&&t.view))return P(e);var t;const o=function(e){return"string"==typeof e?A[e]:A[e.model]}(e);if(o)return P(o);if("default"===e)return{model:void 0,title:"Default"};if(function(e){let t;if("object"==typeof e){if(!e.model)throw new y.CKEditorError("font-size-invalid-definition",null,e);t=parseFloat(e.model)}else t=parseFloat(e);return isNaN(t)}(e))return;return function(e){"string"==typeof e&&(e={title:e,model:`${parseFloat(e)}px`});return e.view={name:"span",styles:{"font-size":e.model}},P(e)}(e)}(e)).filter(e=>void 0!==e)}const A={get tiny(){return{title:"Tiny",model:"tiny",view:{name:"span",classes:"text-tiny",priority:7}}},get small(){return{title:"Small",model:"small",view:{name:"span",classes:"text-small",priority:7}}},get big(){return{title:"Big",model:"big",view:{name:"span",classes:"text-big",priority:7}}},get huge(){return{title:"Huge",model:"huge",view:{name:"span",classes:"text-huge",priority:7}}}};function P(e){return e.view&&"string"!=typeof e.view&&!e.view.priority&&(e.view.priority=7),e}const B=["x-small","x-small","small","medium","large","x-large","xx-large","xxx-large"];class O extends e.Plugin{static get pluginName(){return"FontSizeEditing"}static get isOfficialPlugin(){return!0}constructor(e){super(e),e.config.define(i,{options:["tiny","small","default","big","huge"],supportAllValues:!1})}init(){const e=this.editor;e.model.schema.extend("$text",{allowAttributes:i}),e.model.schema.setAttributeProperties(i,{isFormatting:!0,copyOnEnter:!0});const t=e.config.get("fontSize.supportAllValues"),o=k(this.editor.config.get("fontSize.options")).filter(e=>e.model),n=c(i,o);t?(this._prepareAnyValueConverters(n),this._prepareCompatibilityConverter()):e.conversion.attributeToElement(n),e.commands.add(i,new S(e))}_prepareAnyValueConverters(e){const t=this.editor,o=e.model.values.filter(e=>!(0,x.isLengthStyleValue)(String(e))&&!(0,x.isPercentageStyleValue)(String(e)));if(o.length)throw new y.CKEditorError("font-size-invalid-use-of-named-presets",null,{presets:o});t.conversion.for("downcast").attributeToElement({model:i,view:(e,{writer:t})=>{if(e)return t.createAttributeElement("span",{style:"font-size:"+e},{priority:7})}}),t.conversion.for("upcast").elementToAttribute({model:{key:i,value:e=>e.getStyle("font-size")},view:{name:"span",styles:{"font-size":/.*/}}})}_prepareCompatibilityConverter(){this.editor.conversion.for("upcast").elementToAttribute({view:{name:"font",attributes:{size:/^[+-]?\d{1,3}$/}},model:{key:i,value:e=>{const t=e.getAttribute("size"),o="-"===t[0]||"+"===t[0];let n=parseInt(t,10);o&&(n=3+n);const r=B.length-1,i=Math.min(Math.max(n,0),r);return B[i]}}})}}var z=o(591),L=o.n(z),T=o(639),N=o.n(T),E=o(128),V=o.n(E),I=o(21),M=o.n(I),_=o(51),D=o.n(_),j=o(485),$={attributes:{"data-cke":!0}};$.setAttributes=M(),$.insert=V().bind(null,"head"),$.domAPI=N(),$.insertStyleElement=D();L()(j.A,$);j.A&&j.A.locals&&j.A.locals;class K extends e.Plugin{static get pluginName(){return"FontSizeUI"}static get isOfficialPlugin(){return!0}init(){const e=this.editor,t=e.t,o=this._getLocalizedOptions(),n=e.commands.get(i),l=t("Font Size"),s=function(e,t){const o=new y.Collection;for(const n of e){const e={type:"button",model:new r.UIModel({commandName:i,commandParam:n.model,label:n.title,class:"ck-fontsize-option",role:"menuitemradio",withText:!0})};n.view&&"string"!=typeof n.view&&(n.view.styles&&e.model.set("labelStyle",`font-size:${n.view.styles["font-size"]}`),n.view.classes&&e.model.set("class",`${e.model.class} ${n.view.classes}`)),e.model.bind("isOn").to(t,"value",e=>e===n.model),o.add(e)}return o}(o,n);e.ui.componentFactory.add(i,t=>{const o=(0,r.createDropdown)(t);return(0,r.addListToDropdown)(o,s,{role:"menu",ariaLabel:l}),o.buttonView.set({label:l,icon:w.IconFontSize,tooltip:!0}),o.extendTemplate({attributes:{class:["ck-font-size-dropdown"]}}),o.bind("isEnabled").to(n),this.listenTo(o,"execute",t=>{e.execute(t.source.commandName,{value:t.source.commandParam}),e.editing.view.focus()}),o}),e.ui.componentFactory.add(`menuBar:${i}`,t=>{const o=new r.MenuBarMenuView(t);o.buttonView.set({label:l,icon:w.IconFontSize}),o.bind("isEnabled").to(n);const i=new r.MenuBarMenuListView(t);for(const n of s){const l=new r.MenuBarMenuListItemView(t,o),s=new r.MenuBarMenuListItemButtonView(t);s.set({role:"menuitemradio",isToggleable:!0}),s.bind(...Object.keys(n.model)).to(n.model),s.delegate("execute").to(o),s.on("execute",()=>{e.execute(n.model.commandName,{value:n.model.commandParam}),e.editing.view.focus()}),l.children.add(s),i.items.add(l)}return o.panelView.children.add(i),o})}_getLocalizedOptions(){const e=this.editor,t=e.t,o={Default:t("Default"),Tiny:t("Tiny"),Small:t("Small"),Big:t("Big"),Huge:t("Huge")};return k(e.config.get(i).options).map(e=>{const t=o[e.title];return t&&t!=e.title&&(e=Object.assign({},e,{title:t})),e})}}class U extends e.Plugin{static get requires(){return[O,K]}static get pluginName(){return"FontSize"}static get isOfficialPlugin(){return!0}normalizeSizeOptions(e){return k(e)}}class R extends t{constructor(e){super(e,s)}}class G extends e.Plugin{static get pluginName(){return"FontColorEditing"}static get isOfficialPlugin(){return!0}constructor(e){super(e),e.config.define(s,{colors:[{color:"hsl(0, 0%, 0%)",label:"Black"},{color:"hsl(0, 0%, 30%)",label:"Dim grey"},{color:"hsl(0, 0%, 60%)",label:"Grey"},{color:"hsl(0, 0%, 90%)",label:"Light grey"},{color:"hsl(0, 0%, 100%)",label:"White",hasBorder:!0},{color:"hsl(0, 75%, 60%)",label:"Red"},{color:"hsl(30, 75%, 60%)",label:"Orange"},{color:"hsl(60, 75%, 60%)",label:"Yellow"},{color:"hsl(90, 75%, 60%)",label:"Light green"},{color:"hsl(120, 75%, 60%)",label:"Green"},{color:"hsl(150, 75%, 60%)",label:"Aquamarine"},{color:"hsl(180, 75%, 60%)",label:"Turquoise"},{color:"hsl(210, 75%, 60%)",label:"Light blue"},{color:"hsl(240, 75%, 60%)",label:"Blue"},{color:"hsl(270, 75%, 60%)",label:"Purple"}],columns:5}),e.conversion.for("upcast").elementToAttribute({view:{name:"span",styles:{color:/[\s\S]+/}},model:{key:s,value:u("color")}}),e.conversion.for("upcast").elementToAttribute({view:{name:"font",attributes:{color:/^#?\w+$/}},model:{key:s,value:e=>e.getAttribute("color")}}),e.conversion.for("downcast").attributeToElement({model:s,view:d("color")}),e.commands.add(s,new R(e)),e.model.schema.extend("$text",{allowAttributes:s}),e.model.schema.setAttributeProperties(s,{isFormatting:!0,copyOnEnter:!0})}}class q extends e.Plugin{commandName;componentName;icon;dropdownLabel;columns;constructor(e,{commandName:t,componentName:o,icon:n,dropdownLabel:r}){super(e),this.commandName=t,this.componentName=o,this.icon=n,this.dropdownLabel=r,this.columns=e.config.get(`${this.componentName}.columns`)}init(){const e=this.editor,t=e.locale,o=t.t,n=e.commands.get(this.commandName),i=e.config.get(this.componentName),l=(0,r.normalizeColorOptions)(i.colors),s=(0,r.getLocalizedColorOptions)(t,l),a=i.documentColors,c=!1!==i.colorPicker;e.ui.componentFactory.add(this.componentName,t=>{const l=(0,r.createDropdown)(t);let u=!1;const d=m({dropdownView:l,colors:s.map(e=>({label:e.label,color:e.model,options:{hasBorder:e.hasBorder}})),columns:this.columns,removeButtonLabel:o("Remove color"),colorPickerLabel:o("Color picker"),documentColorsLabel:0!==a?o("Document colors"):"",documentColorsCount:void 0===a?this.columns:a,colorPickerViewConfig:!!c&&(i.colorPicker||{})});return d.bind("selectedColor").to(n,"value"),l.buttonView.set({label:this.dropdownLabel,icon:this.icon,tooltip:!0}),l.extendTemplate({attributes:{class:"ck-color-ui-dropdown"}}),l.bind("isEnabled").to(n),d.on("execute",(t,o)=>{l.isOpen&&e.execute(this.commandName,{value:o.value,batch:this._undoStepBatch}),"colorPicker"!==o.source&&e.editing.view.focus(),"colorPickerSaveButton"===o.source&&(l.isOpen=!1)}),d.on("colorPicker:show",()=>{this._undoStepBatch=e.model.createBatch()}),d.on("colorPicker:cancel",()=>{this._undoStepBatch.operations.length&&(l.isOpen=!1,e.execute("undo",this._undoStepBatch)),e.editing.view.focus()}),l.on("change:isOpen",(t,o,n)=>{u||(u=!0,l.colorSelectorView.appendUI()),n&&(0!==a&&d.updateDocumentColors(e.model,this.componentName),d.updateSelectedColors(),d.showColorGridsFragment())}),(0,r.focusChildOnDropdownOpen)(l,()=>l.colorSelectorView.colorGridsFragmentView.staticColorsGrid.items.find(e=>e.isOn)),l}),e.ui.componentFactory.add(`menuBar:${this.componentName}`,t=>{const i=new r.MenuBarMenuView(t);i.buttonView.set({label:this.dropdownLabel,icon:this.icon}),i.bind("isEnabled").to(n);let l=!1;const c=new r.ColorSelectorView(t,{colors:s.map(e=>({label:e.label,color:e.model,options:{hasBorder:e.hasBorder}})),columns:this.columns,removeButtonLabel:o("Remove color"),colorPickerLabel:o("Color picker"),documentColorsLabel:0!==a?o("Document colors"):"",documentColorsCount:void 0===a?this.columns:a,colorPickerViewConfig:!1});return c.bind("selectedColor").to(n,"value"),c.delegate("execute").to(i),c.on("execute",(t,o)=>{e.execute(this.commandName,{value:o.value,batch:this._undoStepBatch}),e.editing.view.focus()}),i.on("change:isOpen",(t,o,n)=>{l||(l=!0,c.appendUI()),n&&(0!==a&&c.updateDocumentColors(e.model,this.componentName),c.updateSelectedColors(),c.showColorGridsFragment())}),i.panelView.children.add(c),i})}}class H extends q{constructor(e){const t=e.locale.t;super(e,{commandName:s,componentName:s,icon:w.IconFontColor,dropdownLabel:t("Font Color")})}static get pluginName(){return"FontColorUI"}}class W extends e.Plugin{static get requires(){return[G,H]}static get pluginName(){return"FontColor"}static get isOfficialPlugin(){return!0}}class Y extends t{constructor(e){super(e,a)}}class J extends e.Plugin{static get pluginName(){return"FontBackgroundColorEditing"}static get isOfficialPlugin(){return!0}constructor(e){super(e),e.config.define(a,{colors:[{color:"hsl(0, 0%, 0%)",label:"Black"},{color:"hsl(0, 0%, 30%)",label:"Dim grey"},{color:"hsl(0, 0%, 60%)",label:"Grey"},{color:"hsl(0, 0%, 90%)",label:"Light grey"},{color:"hsl(0, 0%, 100%)",label:"White",hasBorder:!0},{color:"hsl(0, 75%, 60%)",label:"Red"},{color:"hsl(30, 75%, 60%)",label:"Orange"},{color:"hsl(60, 75%, 60%)",label:"Yellow"},{color:"hsl(90, 75%, 60%)",label:"Light green"},{color:"hsl(120, 75%, 60%)",label:"Green"},{color:"hsl(150, 75%, 60%)",label:"Aquamarine"},{color:"hsl(180, 75%, 60%)",label:"Turquoise"},{color:"hsl(210, 75%, 60%)",label:"Light blue"},{color:"hsl(240, 75%, 60%)",label:"Blue"},{color:"hsl(270, 75%, 60%)",label:"Purple"}],columns:5}),e.data.addStyleProcessorRules(x.addBackgroundStylesRules),e.conversion.for("upcast").elementToAttribute({view:{name:"span",styles:{"background-color":/[\s\S]+/}},model:{key:a,value:u("background-color")}}),e.conversion.for("downcast").attributeToElement({model:a,view:d("background-color")}),e.commands.add(a,new Y(e)),e.model.schema.extend("$text",{allowAttributes:a}),e.model.schema.setAttributeProperties(a,{isFormatting:!0,copyOnEnter:!0})}}class Q extends q{constructor(e){const t=e.locale.t;super(e,{commandName:a,componentName:a,icon:w.IconFontBackground,dropdownLabel:t("Font Background Color")})}static get pluginName(){return"FontBackgroundColorUI"}}class X extends e.Plugin{static get requires(){return[J,Q]}static get pluginName(){return"FontBackgroundColor"}static get isOfficialPlugin(){return!0}}class Z extends e.Plugin{static get requires(){return[F,U,W,X]}static get pluginName(){return"Font"}static get isOfficialPlugin(){return!0}}})(),(window.CKEditor5=window.CKEditor5||{}).font=n})();

package/dist/index-content.css

@@ -2,15 +2,21 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+:root{
+	--ck-content-font-size-tiny:0.7em;
+	--ck-content-font-size-small:0.85em;
+	--ck-content-font-size-big:1.4em;
+	--ck-content-font-size-huge:1.8em;
+}
 .ck-content .text-tiny{
-		font-size:.7em;
+		font-size:var(--ck-content-font-size-tiny);
 	}
 .ck-content .text-small{
-		font-size:.85em;
+		font-size:var(--ck-content-font-size-small);
 	}
 .ck-content .text-big{
-		font-size:1.4em;
+		font-size:var(--ck-content-font-size-big);
 	}
 .ck-content .text-huge{
-		font-size:1.8em;
+		font-size:var(--ck-content-font-size-huge);
 	}

package/dist/index-editor.css

@@ -2,3 +2,9 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+:root{
+	--ck-content-font-size-tiny:0.7em;
+	--ck-content-font-size-small:0.85em;
+	--ck-content-font-size-big:1.4em;
+	--ck-content-font-size-huge:1.8em;
+}

package/dist/index.css

@@ -9,19 +9,26 @@
 
 /* The values should be synchronized with the "FONT_SIZE_PRESET_UNITS" object in the "/src/fontsize/utils.js" file. */
 
+:root {
+	--ck-content-font-size-tiny: 0.7em;
+	--ck-content-font-size-small: 0.85em;
+	--ck-content-font-size-big: 1.4em;
+	--ck-content-font-size-huge: 1.8em;
+}
+
 /* Styles should be prefixed with the `.ck-content` class.
 See https://github.com/ckeditor/ckeditor5/issues/6636 */
 .ck-content .text-tiny {
-		font-size: .7em;
+		font-size: var(--ck-content-font-size-tiny);
 	}
 .ck-content .text-small {
-		font-size: .85em;
+		font-size: var(--ck-content-font-size-small);
 	}
 .ck-content .text-big {
-		font-size: 1.4em;
+		font-size: var(--ck-content-font-size-big);
 	}
 .ck-content .text-huge {
-		font-size: 1.8em;
+		font-size: var(--ck-content-font-size-huge);
 	}
 
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../theme/fontsize.css","index.css"],"names":[],"mappings":";;;;AAAA,CAAA;ACCA,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ;AAC3E,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC;AAClF,CAAC,CDAC;;AAEF,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,CAAA,YAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,sBAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAAA,CAAA,QAAA,CAAA,KAAA,CAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAqH;;AAErH,CAAA,CAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,CAAA,QAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,KAAA;ACCA,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CDAC;AAEtD,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA;ACAD,CAAC,CDCC,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,GAAe;ACAjB,CDCC;AAEA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA;ACDD,CAAC,CDEC,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,IAAgB;ACDlB,CDEC;AAEA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA;ACFD,CAAC,CDGC,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,GAAgB;ACFlB,CDGC;AAEA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA;ACHD,CAAC,CDIC,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,GAAgB;ACHlB,CDIC;;ACFD,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC","file":"index.css.map","sourcesContent":["/*\n * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n/* The values should be synchronized with the \"FONT_SIZE_PRESET_UNITS\" object in the \"/src/fontsize/utils.js\" file. */\n\n/* Styles should be prefixed with the `.ck-content` class.\nSee https://github.com/ckeditor/ckeditor5/issues/6636 */\n.ck-content {\n\t& .text-tiny {\n\t\tfont-size: .7em;\n\t}\n\n\t& .text-small {\n\t\tfont-size: .85em;\n\t}\n\n\t& .text-big {\n\t\tfont-size: 1.4em;\n\t}\n\n\t& .text-huge {\n\t\tfont-size: 1.8em;\n\t}\n}\n","/*\n * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n/* The values should be synchronized with the \"FONT_SIZE_PRESET_UNITS\" object in the \"/src/fontsize/utils.js\" file. */\n\n/* Styles should be prefixed with the `.ck-content` class.\nSee https://github.com/ckeditor/ckeditor5/issues/6636 */\n.ck-content .text-tiny {\n\t\tfont-size: .7em;\n\t}\n.ck-content .text-small {\n\t\tfont-size: .85em;\n\t}\n.ck-content .text-big {\n\t\tfont-size: 1.4em;\n\t}\n.ck-content .text-huge {\n\t\tfont-size: 1.8em;\n\t}\n\n/*# sourceMappingURL=index.css.map */"]}
+{"version":3,"sources":["../theme/fontsize.css","index.css"],"names":[],"mappings":";;;;AAAA,CAAA;ACCA,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ;AAC3E,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC;AAClF,CAAC,CDAC;;AAEF,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,CAAA,YAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,sBAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAAA,CAAA,QAAA,CAAA,KAAA,CAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAqH;;AAErH,CAAA,IAAA,CAAA;ACCA,CDAC,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,GAAkC;ACCnC,CDAC,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,IAAoC;ACCrC,CDAC,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,GAAiC;ACClC,CDAC,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,GAAkC;AACnC;;AAEA,CAAA,CAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,CAAA,QAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,KAAA;ACCA,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CDAC;AAEtD,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA;ACAD,CAAC,CDCC,IAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAA2C;ACA7C,CDCC;AAEA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA;ACDD,CAAC,CDEC,IAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAA4C;ACD9C,CDEC;AAEA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA;ACFD,CAAC,CDGC,IAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,IAAA,CAAA,GAAA,CAA0C;ACF5C,CDGC;AAEA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA;ACHD,CAAC,CDIC,IAAA,CAAA,IAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,IAAA,CAAA,IAAA,CAAA,IAAA,CAA2C;ACH7C,CDIC;;ACFD,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC","file":"index.css.map","sourcesContent":["/*\n * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n/* The values should be synchronized with the \"FONT_SIZE_PRESET_UNITS\" object in the \"/src/fontsize/utils.js\" file. */\n\n:root {\n\t--ck-content-font-size-tiny: 0.7em;\n\t--ck-content-font-size-small: 0.85em;\n\t--ck-content-font-size-big: 1.4em;\n\t--ck-content-font-size-huge: 1.8em;\n}\n\n/* Styles should be prefixed with the `.ck-content` class.\nSee https://github.com/ckeditor/ckeditor5/issues/6636 */\n.ck-content {\n\t& .text-tiny {\n\t\tfont-size: var(--ck-content-font-size-tiny);\n\t}\n\n\t& .text-small {\n\t\tfont-size: var(--ck-content-font-size-small);\n\t}\n\n\t& .text-big {\n\t\tfont-size: var(--ck-content-font-size-big);\n\t}\n\n\t& .text-huge {\n\t\tfont-size: var(--ck-content-font-size-huge);\n\t}\n}\n","/*\n * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n/* The values should be synchronized with the \"FONT_SIZE_PRESET_UNITS\" object in the \"/src/fontsize/utils.js\" file. */\n\n:root {\n\t--ck-content-font-size-tiny: 0.7em;\n\t--ck-content-font-size-small: 0.85em;\n\t--ck-content-font-size-big: 1.4em;\n\t--ck-content-font-size-huge: 1.8em;\n}\n\n/* Styles should be prefixed with the `.ck-content` class.\nSee https://github.com/ckeditor/ckeditor5/issues/6636 */\n.ck-content .text-tiny {\n\t\tfont-size: var(--ck-content-font-size-tiny);\n\t}\n.ck-content .text-small {\n\t\tfont-size: var(--ck-content-font-size-small);\n\t}\n.ck-content .text-big {\n\t\tfont-size: var(--ck-content-font-size-big);\n\t}\n.ck-content .text-huge {\n\t\tfont-size: var(--ck-content-font-size-huge);\n\t}\n\n/*# sourceMappingURL=index.css.map */"]}

package/dist/index.js

@@ -3,10 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
-import { ColorSelectorView, createDropdown, addListToDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView, ViewModel, normalizeColorOptions, getLocalizedColorOptions, focusChildOnDropdownOpen } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { ColorSelectorView, createDropdown, addListToDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, MenuBarMenuListItemButtonView, UIModel, normalizeColorOptions, getLocalizedColorOptions, focusChildOnDropdownOpen } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { Collection, CKEditorError } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { IconFontFamily, IconFontSize, IconFontColor, IconFontBackground } from '@ckeditor/ckeditor5-icons/dist/index.js';
-import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { isLengthStyleValue, isPercentageStyleValue, addBackgroundStylesRules } from '@ckeditor/ckeditor5-engine/dist/index.js';
 
 /**
  * The base font command.
@@ -89,6 +89,8 @@ import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-
  */ const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
 /**
  * Builds a proper converter definition out of input data.
+ *
+ * @internal
  */ function buildDefinition(modelAttributeKey, options) {
     const definition = {
         model: {
@@ -113,6 +115,8 @@ import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-
  * responsible for upcasting data to the model.
  *
  * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
+ *
+ * @internal
  */ function renderUpcastAttribute(styleAttr) {
     return (viewElement)=>normalizeColorCode(viewElement.getStyle(styleAttr));
 }
@@ -122,6 +126,8 @@ import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-
  * responsible for downcasting a color attribute to a `<span>` element.
  *
  * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
+ *
+ * @internal
  */ function renderDowncastElement(styleAttr) {
     return (modelAttributeValue, { writer })=>writer.createAttributeElement('span', {
             style: `${styleAttr}:${modelAttributeValue}`
@@ -143,6 +149,7 @@ import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-
  * @param options.documentColorsCount The number of document colors inside the dropdown.
  * @param options.colorPickerViewConfig Configuration of the color picker view.
  * @returns The new color selector view.
+ * @internal
  */ function addColorSelectorToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerViewConfig }) {
     const locale = dropdownView.locale;
     const colorSelectorView = new ColorSelectorView(locale, {
@@ -191,11 +198,19 @@ import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-
  * to the {@link module:font/fontconfig~FontFamilyOption} format.
  *
  * @param configuredOptions An array of options taken from the configuration.
+ * @internal
  */ function normalizeOptions$1(configuredOptions) {
     // Convert options to objects.
     return configuredOptions.map(getOptionDefinition$1)// Filter out undefined values that `getOptionDefinition` might return.
     .filter((option)=>option !== undefined);
 }
+/**
+ * Normalizes the CSS `font-family` property value to an array of unquoted and trimmed font faces.
+ *
+ * @internal
+ */ function normalizeFontFamilies(fontDefinition) {
+    return fontDefinition.replace(/["']/g, '').split(',').map((name)=>name.trim());
+}
 /**
  * Returns an option definition either created from string shortcut.
  * If object is passed then this method will return it without alternating it. Returns undefined for item than cannot be parsed.
@@ -226,7 +241,7 @@ import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-
  * @param fontDefinition A font definition form configuration.
  */ function generateFontPreset(fontDefinition) {
     // Remove quotes from font names. They will be normalized later.
-    const fontNames = fontDefinition.replace(/"|'/g, '').split(',');
+    const fontNames = normalizeFontFamilies(fontDefinition);
     // The first matched font name will be used as dropdown list item title and as model value.
     const firstFontName = fontNames[0];
     // CSS-compatible font names.
@@ -470,7 +485,7 @@ import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-
     for (const option of options){
         const def = {
             type: 'button',
-            model: new ViewModel({
+            model: new UIModel({
                 commandName: FONT_FAMILY,
                 commandParam: option.model,
                 label: option.title,
@@ -486,7 +501,9 @@ import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-
             if (!value || !option.model) {
                 return false;
             }
-            return value.split(',')[0].replace(/'/g, '').toLowerCase() === option.model.toLowerCase();
+            const valueNormalized = normalizeFontFamilies(value)[0].toLowerCase();
+            const optionNormalized = normalizeFontFamilies(option.model)[0].toLowerCase();
+            return valueNormalized === optionNormalized;
         });
         // Try to set a dropdown list item style.
         if (option.view && typeof option.view !== 'string' && option.view.styles) {
@@ -548,6 +565,7 @@ import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-
  * to the {@link module:font/fontconfig~FontSizeOption} format.
  *
  * @param configuredOptions An array of options taken from the configuration.
+ * @internal
  */ function normalizeOptions(configuredOptions) {
     // Convert options to objects.
     return configuredOptions.map((item)=>getOptionDefinition(item))// Filter out undefined values that `getOptionDefinition` might return.
@@ -774,7 +792,7 @@ const styleFontSize = [
         const editor = this.editor;
         // If `fontSize.supportAllValues=true`, we do not allow to use named presets in the plugin's configuration.
         const presets = definition.model.values.filter((value)=>{
-            return !isLength(String(value)) && !isPercentage(String(value));
+            return !isLengthStyleValue(String(value)) && !isPercentageStyleValue(String(value));
         });
         if (presets.length) {
             /**
@@ -967,7 +985,7 @@ const styleFontSize = [
     for (const option of options){
         const def = {
             type: 'button',
-            model: new ViewModel({
+            model: new UIModel({
                 commandName: FONT_SIZE,
                 commandParam: option.model,
                 label: option.title,
@@ -1179,7 +1197,7 @@ const styleFontSize = [
  *
  * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting
  * a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
- */ class ColorUI extends Plugin {
+ */ class FontColorUIBase extends Plugin {
     /**
 	 * The name of the command which will be executed when a color tile is clicked.
 	 */ commandName;
@@ -1280,7 +1298,7 @@ const styleFontSize = [
             colorSelectorView.on('colorPicker:cancel', ()=>{
                 if (this._undoStepBatch.operations.length) {
                     // We need to close the dropdown before the undo batch.
-                    // Otherwise, ColorUI treats undo as a selected color change,
+                    // Otherwise, FontColorUIBase treats undo as a selected color change,
                     // propagating the update to the whole selection.
                     // That's an issue if spans with various colors were selected.
                     dropdownView.isOpen = false;
@@ -1360,7 +1378,7 @@ const styleFontSize = [
 
 /**
  * The font color UI plugin. It introduces the `'fontColor'` dropdown.
- */ class FontColorUI extends ColorUI {
+ */ class FontColorUI extends FontColorUIBase {
     /**
 	 * @inheritDoc
 	 */ constructor(editor){
@@ -1514,7 +1532,7 @@ const styleFontSize = [
             ],
             columns: 5
         });
-        editor.data.addStyleProcessorRules(addBackgroundRules);
+        editor.data.addStyleProcessorRules(addBackgroundStylesRules);
         editor.conversion.for('upcast').elementToAttribute({
             view: {
                 name: 'span',
@@ -1545,7 +1563,7 @@ const styleFontSize = [
 
 /**
  * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
- */ class FontBackgroundColorUI extends ColorUI {
+ */ class FontBackgroundColorUI extends FontColorUIBase {
     /**
 	 * @inheritDoc
 	 */ constructor(editor){
@@ -1627,5 +1645,5 @@ const styleFontSize = [
     }
 }
 
-export { Font, FontBackgroundColor, FontBackgroundColorEditing, FontBackgroundColorUI, FontColor, FontColorEditing, FontColorUI, FontFamily, FontFamilyEditing, FontFamilyUI, FontSize, FontSizeEditing, FontSizeUI };
+export { Font, FontBackgroundColor, FontBackgroundColorCommand, FontBackgroundColorEditing, FontBackgroundColorUI, FontColor, FontColorCommand, FontColorEditing, FontColorUI, FontColorUIBase, FontCommand, FontFamily, FontFamilyCommand, FontFamilyEditing, FontFamilyUI, FontSize, FontSizeCommand, FontSizeEditing, FontSizeUI, addColorSelectorToDropdown as _addFontColorSelectorToDropdown, buildDefinition as _buildFontDefinition, normalizeOptions$1 as _normalizeFontFamilyOptions, normalizeOptions as _normalizeFontSizeOptions, renderDowncastElement as _renderDowncastFontElement, renderUpcastAttribute as _renderUpcastFontColorAttribute };
 //# sourceMappingURL=index.js.map