@ckeditor/ckeditor5-highlight 36.0.0 → 37.0.0-alpha.0

package/build/highlight.js

@@ -2,4 +2,4 @@
 /*!
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md.
- */(()=>{var e={458:(e,t,i)=>{"use strict";i.d(t,{Z:()=>o});var r=i(609),n=i.n(r)()((function(e){return e[1]}));n.push([e.id,":root{--ck-highlight-marker-yellow:#fdfd77;--ck-highlight-marker-green:#62f962;--ck-highlight-marker-pink:#fc7899;--ck-highlight-marker-blue:#72ccfd;--ck-highlight-pen-red:#e71313;--ck-highlight-pen-green:#128a00}.ck-content .marker-yellow{background-color:var(--ck-highlight-marker-yellow)}.ck-content .marker-green{background-color:var(--ck-highlight-marker-green)}.ck-content .marker-pink{background-color:var(--ck-highlight-marker-pink)}.ck-content .marker-blue{background-color:var(--ck-highlight-marker-blue)}.ck-content .pen-red{background-color:transparent;color:var(--ck-highlight-pen-red)}.ck-content .pen-green{background-color:transparent;color:var(--ck-highlight-pen-green)}",""]);const o=n},609:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var i=e(t);return t[2]?"@media ".concat(t[2]," {").concat(i,"}"):i})).join("")},t.i=function(e,i,r){"string"==typeof e&&(e=[[null,e,""]]);var n={};if(r)for(var o=0;o<this.length;o++){var l=this[o][0];null!=l&&(n[l]=!0)}for(var a=0;a<e.length;a++){var c=[].concat(e[a]);r&&n[c[0]]||(i&&(c[2]?c[2]="".concat(i," and ").concat(c[2]):c[2]=i),t.push(c))}},t}},62:(e,t,i)=>{"use strict";var r,n=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},o=function(){var e={};return function(t){if(void 0===e[t]){var i=document.querySelector(t);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(e){i=null}e[t]=i}return e[t]}}(),l=[];function a(e){for(var t=-1,i=0;i<l.length;i++)if(l[i].identifier===e){t=i;break}return t}function c(e,t){for(var i={},r=[],n=0;n<e.length;n++){var o=e[n],c=t.base?o[0]+t.base:o[0],s=i[c]||0,h="".concat(c," ").concat(s);i[c]=s+1;var g=a(h),d={css:o[1],media:o[2],sourceMap:o[3]};-1!==g?(l[g].references++,l[g].updater(d)):l.push({identifier:h,updater:v(d,t),references:1}),r.push(h)}return r}function s(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var n=i.nc;n&&(r.nonce=n)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var l=o(e.insert||"head");if(!l)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");l.appendChild(t)}return t}var h,g=(h=[],function(e,t){return h[e]=t,h.filter(Boolean).join("\n")});function d(e,t,i,r){var n=i?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=g(t,n);else{var o=document.createTextNode(n),l=e.childNodes;l[t]&&e.removeChild(l[t]),l.length?e.insertBefore(o,l[t]):e.appendChild(o)}}function u(e,t,i){var r=i.css,n=i.media,o=i.sourceMap;if(n?e.setAttribute("media",n):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var m=null,p=0;function v(e,t){var i,r,n;if(t.singleton){var o=p++;i=m||(m=s(t)),r=d.bind(null,i,o,!1),n=d.bind(null,i,o,!0)}else i=s(t),r=u.bind(null,i,t),n=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(i)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else n()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=n());var i=c(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<i.length;r++){var n=a(i[r]);l[n].references--}for(var o=c(e,t),s=0;s<i.length;s++){var h=a(i[s]);0===l[h].references&&(l[h].updater(),l.splice(h,1))}i=o}}}},704:(e,t,i)=>{e.exports=i(79)("./src/core.js")},273:(e,t,i)=>{e.exports=i(79)("./src/ui.js")},79:e=>{"use strict";e.exports=CKEditor5.dll}},t={};function i(r){var n=t[r];if(void 0!==n)return n.exports;var o=t[r]={id:r,exports:{}};return e[r](o,o.exports,i),o.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.nc=void 0;var r={};(()=>{"use strict";i.r(r),i.d(r,{Highlight:()=>d,HighlightEditing:()=>n,HighlightUI:()=>h});var e=i(704);class t extends e.Command{refresh(){const e=this.editor.model,t=e.document;this.value=t.selection.getAttribute("highlight"),this.isEnabled=e.schema.checkAttributeInSelection(t.selection,"highlight")}execute(e={}){const t=this.editor.model,i=t.document.selection,r=e.value;t.change((e=>{if(i.isCollapsed){const t=i.getFirstPosition();if(i.hasAttribute("highlight")){const i=e=>e.item.hasAttribute("highlight")&&e.item.getAttribute("highlight")===this.value,n=t.getLastMatchingPosition(i,{direction:"backward"}),o=t.getLastMatchingPosition(i),l=e.createRange(n,o);r&&this.value!==r?(t.isEqual(o)||e.setAttribute("highlight",r,l),e.setSelectionAttribute("highlight",r)):(t.isEqual(o)||e.removeAttribute("highlight",l),e.removeSelectionAttribute("highlight"))}else r&&e.setSelectionAttribute("highlight",r)}else{const n=t.schema.getValidRanges(i.getRanges(),"highlight");for(const t of n)r?e.setAttribute("highlight",r,t):e.removeAttribute("highlight",t)}}))}}class n extends e.Plugin{static get pluginName(){return"HighlightEditing"}constructor(e){super(e),e.config.define("highlight",{options:[{model:"yellowMarker",class:"marker-yellow",title:"Yellow marker",color:"var(--ck-highlight-marker-yellow)",type:"marker"},{model:"greenMarker",class:"marker-green",title:"Green marker",color:"var(--ck-highlight-marker-green)",type:"marker"},{model:"pinkMarker",class:"marker-pink",title:"Pink marker",color:"var(--ck-highlight-marker-pink)",type:"marker"},{model:"blueMarker",class:"marker-blue",title:"Blue marker",color:"var(--ck-highlight-marker-blue)",type:"marker"},{model:"redPen",class:"pen-red",title:"Red pen",color:"var(--ck-highlight-pen-red)",type:"pen"},{model:"greenPen",class:"pen-green",title:"Green pen",color:"var(--ck-highlight-pen-green)",type:"pen"}]})}init(){const e=this.editor;e.model.schema.extend("$text",{allowAttributes:"highlight"});const i=e.config.get("highlight.options");e.conversion.attributeToElement(function(e){const t={model:{key:"highlight",values:[]},view:{}};for(const i of e)t.model.values.push(i.model),t.view[i.model]={name:"mark",classes:i.class};return t}(i)),e.commands.add("highlight",new t(e))}}var o=i(273);var l=i(62),a=i.n(l),c=i(458),s={injectType:"singletonStyleTag",attributes:{"data-cke":!0},insert:"head",singleton:!0};a()(c.Z,s);c.Z.locals;class h extends e.Plugin{get localizedOptionTitles(){const e=this.editor.t;return{"Yellow marker":e("Yellow marker"),"Green marker":e("Green marker"),"Pink marker":e("Pink marker"),"Blue marker":e("Blue marker"),"Red pen":e("Red pen"),"Green pen":e("Green pen")}}static get pluginName(){return"HighlightUI"}init(){const e=this.editor.config.get("highlight.options");for(const t of e)this._addHighlighterButton(t);this._addRemoveHighlightButton(),this._addDropdown(e)}_addRemoveHighlightButton(){const t=this.editor.t,i=this.editor.commands.get("highlight");this._addButton("removeHighlight",t("Remove highlight"),e.icons.eraser,null,(e=>{e.bind("isEnabled").to(i,"isEnabled")}))}_addHighlighterButton(e){const t=this.editor.commands.get("highlight");this._addButton("highlight:"+e.model,e.title,g(e.type),e.model,(function(i){i.bind("isEnabled").to(t,"isEnabled"),i.bind("isOn").to(t,"value",(t=>t===e.model)),i.iconView.fillColor=e.color,i.isToggleable=!0}))}_addButton(e,t,i,r,n){const l=this.editor;l.ui.componentFactory.add(e,(e=>{const a=new o.ButtonView(e),c=this.localizedOptionTitles[t]?this.localizedOptionTitles[t]:t;return a.set({label:c,icon:i,tooltip:!0}),a.on("execute",(()=>{l.execute("highlight",{value:r}),l.editing.view.focus()})),n(a),a}))}_addDropdown(e){const t=this.editor,i=t.t,r=t.ui.componentFactory,n=e[0],l=e.reduce(((e,t)=>(e[t.model]=t,e)),{});r.add("highlight",(a=>{const c=t.commands.get("highlight"),s=(0,o.createDropdown)(a,o.SplitButtonView),h=s.buttonView;h.set({label:i("Highlight"),tooltip:!0,lastExecuted:n.model,commandValue:n.model,isToggleable:!0}),h.bind("icon").to(c,"value",(e=>g(d(e,"type")))),h.bind("color").to(c,"value",(e=>d(e,"color"))),h.bind("commandValue").to(c,"value",(e=>d(e,"model"))),h.bind("isOn").to(c,"value",(e=>!!e)),h.delegate("execute").to(s);function d(e,t){const i=e&&e!==h.lastExecuted?e:h.lastExecuted;return l[i][t]}return s.bind("isEnabled").to(c,"isEnabled"),(0,o.addToolbarToDropdown)(s,(()=>{const t=e.map((e=>{const t=r.create("highlight:"+e.model);return this.listenTo(t,"execute",(()=>{s.buttonView.set({lastExecuted:e.model})})),t}));return t.push(new o.ToolbarSeparatorView),t.push(r.create("removeHighlight")),t}),{enableActiveItemFocusOnDropdownOpen:!0,ariaLabel:i("Text highlight toolbar")}),function(e){const t=e.buttonView.actionView;t.iconView.bind("fillColor").to(e.buttonView,"color")}(s),h.on("execute",(()=>{t.execute("highlight",{value:h.commandValue})})),this.listenTo(s,"execute",(()=>{t.editing.view.focus()})),s}))}}function g(e){return"marker"===e?'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path class="ck-icon__fill" d="M10.798 1.59 3.002 12.875l1.895 1.852 2.521 1.402 6.997-12.194z"/><path d="m2.556 16.727.234-.348c-.297-.151-.462-.293-.498-.426-.036-.137.002-.416.115-.837.094-.25.15-.449.169-.595a4.495 4.495 0 0 0 0-.725c-.209-.621-.303-1.041-.284-1.26.02-.218.178-.506.475-.862l6.77-9.414c.539-.91 1.605-.85 3.199.18 1.594 1.032 2.188 1.928 1.784 2.686l-5.877 10.36c-.158.412-.333.673-.526.782-.193.108-.604.179-1.232.21-.362.131-.608.237-.738.318-.13.081-.305.238-.526.47-.293.265-.504.397-.632.397-.096 0-.27-.075-.524-.226l-.31.41-1.6-1.12zm-.279.415 1.575 1.103-.392.515H1.19l1.087-1.618zm8.1-13.656-4.953 6.9L8.75 12.57l4.247-7.574c.175-.25-.188-.647-1.092-1.192-.903-.546-1.412-.652-1.528-.32zM8.244 18.5 9.59 17h9.406v1.5H8.245z"/></svg>':'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path class="ck-icon__fill" d="M10.126 2.268 2.002 13.874l1.895 1.852 2.521 1.402L14.47 5.481l-1.543-2.568-2.801-.645z"/><path d="m4.5 18.088-2.645-1.852-.04-2.95-.006-.005.006-.008v-.025l.011.008L8.73 2.97c.165-.233.356-.417.567-.557l-1.212.308L4.604 7.9l-.83-.558 3.694-5.495 2.708-.69 1.65 1.145.046.018.85-1.216 2.16 1.512-.856 1.222c.828.967 1.144 2.141.432 3.158L7.55 17.286l.006.005-3.055.797H4.5zm-.634.166-1.976.516-.026-1.918 2.002 1.402zM9.968 3.817l-.006-.004-6.123 9.184 3.277 2.294 6.108-9.162.005.003c.317-.452-.16-1.332-1.064-1.966-.891-.624-1.865-.776-2.197-.349zM8.245 18.5 9.59 17h9.406v1.5H8.245z"/></svg>'}class d extends e.Plugin{static get requires(){return[n,h]}static get pluginName(){return"Highlight"}}})(),(window.CKEditor5=window.CKEditor5||{}).highlight=r})();
+ */(()=>{var e={458:(e,t,i)=>{"use strict";i.d(t,{Z:()=>o});var r=i(609),n=i.n(r)()((function(e){return e[1]}));n.push([e.id,":root{--ck-highlight-marker-yellow:#fdfd77;--ck-highlight-marker-green:#62f962;--ck-highlight-marker-pink:#fc7899;--ck-highlight-marker-blue:#72ccfd;--ck-highlight-pen-red:#e71313;--ck-highlight-pen-green:#128a00}.ck-content .marker-yellow{background-color:var(--ck-highlight-marker-yellow)}.ck-content .marker-green{background-color:var(--ck-highlight-marker-green)}.ck-content .marker-pink{background-color:var(--ck-highlight-marker-pink)}.ck-content .marker-blue{background-color:var(--ck-highlight-marker-blue)}.ck-content .pen-red{background-color:transparent;color:var(--ck-highlight-pen-red)}.ck-content .pen-green{background-color:transparent;color:var(--ck-highlight-pen-green)}",""]);const o=n},609:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var i=e(t);return t[2]?"@media ".concat(t[2]," {").concat(i,"}"):i})).join("")},t.i=function(e,i,r){"string"==typeof e&&(e=[[null,e,""]]);var n={};if(r)for(var o=0;o<this.length;o++){var l=this[o][0];null!=l&&(n[l]=!0)}for(var a=0;a<e.length;a++){var c=[].concat(e[a]);r&&n[c[0]]||(i&&(c[2]?c[2]="".concat(i," and ").concat(c[2]):c[2]=i),t.push(c))}},t}},62:(e,t,i)=>{"use strict";var r,n=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},o=function(){var e={};return function(t){if(void 0===e[t]){var i=document.querySelector(t);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(e){i=null}e[t]=i}return e[t]}}(),l=[];function a(e){for(var t=-1,i=0;i<l.length;i++)if(l[i].identifier===e){t=i;break}return t}function c(e,t){for(var i={},r=[],n=0;n<e.length;n++){var o=e[n],c=t.base?o[0]+t.base:o[0],s=i[c]||0,h="".concat(c," ").concat(s);i[c]=s+1;var g=a(h),d={css:o[1],media:o[2],sourceMap:o[3]};-1!==g?(l[g].references++,l[g].updater(d)):l.push({identifier:h,updater:v(d,t),references:1}),r.push(h)}return r}function s(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var n=i.nc;n&&(r.nonce=n)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var l=o(e.insert||"head");if(!l)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");l.appendChild(t)}return t}var h,g=(h=[],function(e,t){return h[e]=t,h.filter(Boolean).join("\n")});function d(e,t,i,r){var n=i?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=g(t,n);else{var o=document.createTextNode(n),l=e.childNodes;l[t]&&e.removeChild(l[t]),l.length?e.insertBefore(o,l[t]):e.appendChild(o)}}function u(e,t,i){var r=i.css,n=i.media,o=i.sourceMap;if(n?e.setAttribute("media",n):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var m=null,p=0;function v(e,t){var i,r,n;if(t.singleton){var o=p++;i=m||(m=s(t)),r=d.bind(null,i,o,!1),n=d.bind(null,i,o,!0)}else i=s(t),r=u.bind(null,i,t),n=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(i)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else n()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=n());var i=c(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<i.length;r++){var n=a(i[r]);l[n].references--}for(var o=c(e,t),s=0;s<i.length;s++){var h=a(i[s]);0===l[h].references&&(l[h].updater(),l.splice(h,1))}i=o}}}},704:(e,t,i)=>{e.exports=i(79)("./src/core.js")},273:(e,t,i)=>{e.exports=i(79)("./src/ui.js")},79:e=>{"use strict";e.exports=CKEditor5.dll}},t={};function i(r){var n=t[r];if(void 0!==n)return n.exports;var o=t[r]={id:r,exports:{}};return e[r](o,o.exports,i),o.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.nc=void 0;var r={};(()=>{"use strict";i.r(r),i.d(r,{Highlight:()=>m,HighlightEditing:()=>n,HighlightUI:()=>d});var e=i(704);class t extends e.Command{refresh(){const e=this.editor.model,t=e.document;this.value=t.selection.getAttribute("highlight"),this.isEnabled=e.schema.checkAttributeInSelection(t.selection,"highlight")}execute(e={}){const t=this.editor.model,i=t.document.selection,r=e.value;t.change((e=>{if(i.isCollapsed){const t=i.getFirstPosition();if(i.hasAttribute("highlight")){const i=e=>e.item.hasAttribute("highlight")&&e.item.getAttribute("highlight")===this.value,n=t.getLastMatchingPosition(i,{direction:"backward"}),o=t.getLastMatchingPosition(i),l=e.createRange(n,o);r&&this.value!==r?(t.isEqual(o)||e.setAttribute("highlight",r,l),e.setSelectionAttribute("highlight",r)):(t.isEqual(o)||e.removeAttribute("highlight",l),e.removeSelectionAttribute("highlight"))}else r&&e.setSelectionAttribute("highlight",r)}else{const n=t.schema.getValidRanges(i.getRanges(),"highlight");for(const t of n)r?e.setAttribute("highlight",r,t):e.removeAttribute("highlight",t)}}))}}class n extends e.Plugin{static get pluginName(){return"HighlightEditing"}constructor(e){super(e),e.config.define("highlight",{options:[{model:"yellowMarker",class:"marker-yellow",title:"Yellow marker",color:"var(--ck-highlight-marker-yellow)",type:"marker"},{model:"greenMarker",class:"marker-green",title:"Green marker",color:"var(--ck-highlight-marker-green)",type:"marker"},{model:"pinkMarker",class:"marker-pink",title:"Pink marker",color:"var(--ck-highlight-marker-pink)",type:"marker"},{model:"blueMarker",class:"marker-blue",title:"Blue marker",color:"var(--ck-highlight-marker-blue)",type:"marker"},{model:"redPen",class:"pen-red",title:"Red pen",color:"var(--ck-highlight-pen-red)",type:"pen"},{model:"greenPen",class:"pen-green",title:"Green pen",color:"var(--ck-highlight-pen-green)",type:"pen"}]})}init(){const e=this.editor;e.model.schema.extend("$text",{allowAttributes:"highlight"});const i=e.config.get("highlight.options");e.conversion.attributeToElement(function(e){const t={model:{key:"highlight",values:[]},view:{}};for(const i of e)t.model.values.push(i.model),t.view[i.model]={name:"mark",classes:i.class};return t}(i)),e.commands.add("highlight",new t(e))}}var o=i(273);const l='<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path class="ck-icon__fill" d="M10.798 1.59 3.002 12.875l1.895 1.852 2.521 1.402 6.997-12.194z"/><path d="m2.556 16.727.234-.348c-.297-.151-.462-.293-.498-.426-.036-.137.002-.416.115-.837.094-.25.15-.449.169-.595a4.495 4.495 0 0 0 0-.725c-.209-.621-.303-1.041-.284-1.26.02-.218.178-.506.475-.862l6.77-9.414c.539-.91 1.605-.85 3.199.18 1.594 1.032 2.188 1.928 1.784 2.686l-5.877 10.36c-.158.412-.333.673-.526.782-.193.108-.604.179-1.232.21-.362.131-.608.237-.738.318-.13.081-.305.238-.526.47-.293.265-.504.397-.632.397-.096 0-.27-.075-.524-.226l-.31.41-1.6-1.12zm-.279.415 1.575 1.103-.392.515H1.19l1.087-1.618zm8.1-13.656-4.953 6.9L8.75 12.57l4.247-7.574c.175-.25-.188-.647-1.092-1.192-.903-.546-1.412-.652-1.528-.32zM8.244 18.5 9.59 17h9.406v1.5H8.245z"/></svg>',a='<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path class="ck-icon__fill" d="M10.126 2.268 2.002 13.874l1.895 1.852 2.521 1.402L14.47 5.481l-1.543-2.568-2.801-.645z"/><path d="m4.5 18.088-2.645-1.852-.04-2.95-.006-.005.006-.008v-.025l.011.008L8.73 2.97c.165-.233.356-.417.567-.557l-1.212.308L4.604 7.9l-.83-.558 3.694-5.495 2.708-.69 1.65 1.145.046.018.85-1.216 2.16 1.512-.856 1.222c.828.967 1.144 2.141.432 3.158L7.55 17.286l.006.005-3.055.797H4.5zm-.634.166-1.976.516-.026-1.918 2.002 1.402zM9.968 3.817l-.006-.004-6.123 9.184 3.277 2.294 6.108-9.162.005.003c.317-.452-.16-1.332-1.064-1.966-.891-.624-1.865-.776-2.197-.349zM8.245 18.5 9.59 17h9.406v1.5H8.245z"/></svg>';var c=i(62),s=i.n(c),h=i(458),g={injectType:"singletonStyleTag",attributes:{"data-cke":!0},insert:"head",singleton:!0};s()(h.Z,g);h.Z.locals;class d extends e.Plugin{get localizedOptionTitles(){const e=this.editor.t;return{"Yellow marker":e("Yellow marker"),"Green marker":e("Green marker"),"Pink marker":e("Pink marker"),"Blue marker":e("Blue marker"),"Red pen":e("Red pen"),"Green pen":e("Green pen")}}static get pluginName(){return"HighlightUI"}init(){const e=this.editor.config.get("highlight.options");for(const t of e)this._addHighlighterButton(t);this._addRemoveHighlightButton(),this._addDropdown(e)}_addRemoveHighlightButton(){const t=this.editor.t,i=this.editor.commands.get("highlight");this._addButton("removeHighlight",t("Remove highlight"),e.icons.eraser,null,(e=>{e.bind("isEnabled").to(i,"isEnabled")}))}_addHighlighterButton(e){const t=this.editor.commands.get("highlight");this._addButton("highlight:"+e.model,e.title,u(e.type),e.model,(function(i){i.bind("isEnabled").to(t,"isEnabled"),i.bind("isOn").to(t,"value",(t=>t===e.model)),i.iconView.fillColor=e.color,i.isToggleable=!0}))}_addButton(e,t,i,r,n){const l=this.editor;l.ui.componentFactory.add(e,(e=>{const a=new o.ButtonView(e),c=this.localizedOptionTitles[t]?this.localizedOptionTitles[t]:t;return a.set({label:c,icon:i,tooltip:!0}),a.on("execute",(()=>{l.execute("highlight",{value:r}),l.editing.view.focus()})),n(a),a}))}_addDropdown(e){const t=this.editor,i=t.t,r=t.ui.componentFactory,n=e[0],l=e.reduce(((e,t)=>(e[t.model]=t,e)),{});r.add("highlight",(a=>{const c=t.commands.get("highlight"),s=(0,o.createDropdown)(a,o.SplitButtonView),h=s.buttonView;h.set({label:i("Highlight"),tooltip:!0,lastExecuted:n.model,commandValue:n.model,isToggleable:!0}),h.bind("icon").to(c,"value",(e=>u(g(e,"type")))),h.bind("color").to(c,"value",(e=>g(e,"color"))),h.bind("commandValue").to(c,"value",(e=>g(e,"model"))),h.bind("isOn").to(c,"value",(e=>!!e)),h.delegate("execute").to(s);function g(e,t){const i=e&&e!==h.lastExecuted?e:h.lastExecuted;return l[i][t]}return s.bind("isEnabled").to(c,"isEnabled"),(0,o.addToolbarToDropdown)(s,(()=>{const t=e.map((e=>{const t=r.create("highlight:"+e.model);return this.listenTo(t,"execute",(()=>{s.buttonView.set({lastExecuted:e.model})})),t}));return t.push(new o.ToolbarSeparatorView),t.push(r.create("removeHighlight")),t}),{enableActiveItemFocusOnDropdownOpen:!0,ariaLabel:i("Text highlight toolbar")}),function(e){const t=e.buttonView.actionView;t.iconView.bind("fillColor").to(e.buttonView,"color")}(s),h.on("execute",(()=>{t.execute("highlight",{value:h.commandValue})})),this.listenTo(s,"execute",(()=>{t.editing.view.focus()})),s}))}}function u(e){return"marker"===e?l:a}class m extends e.Plugin{static get requires(){return[n,d]}static get pluginName(){return"Highlight"}}})(),(window.CKEditor5=window.CKEditor5||{}).highlight=r})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-highlight",
-  "version": "36.0.0",
+  "version": "37.0.0-alpha.0",
   "description": "Highlight feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,22 +12,22 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^36.0.0"
+    "ckeditor5": "^37.0.0-alpha.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-block-quote": "^36.0.0",
-    "@ckeditor/ckeditor5-core": "^36.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^32.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^36.0.0",
-    "@ckeditor/ckeditor5-engine": "^36.0.0",
-    "@ckeditor/ckeditor5-enter": "^36.0.0",
-    "@ckeditor/ckeditor5-heading": "^36.0.0",
-    "@ckeditor/ckeditor5-image": "^36.0.0",
-    "@ckeditor/ckeditor5-list": "^36.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^36.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^36.0.0",
-    "@ckeditor/ckeditor5-typing": "^36.0.0",
-    "@ckeditor/ckeditor5-utils": "^36.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-dev-utils": "^34.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-image": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-list": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-theme-lark": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
@@ -47,7 +47,6 @@
   },
   "files": [
     "lang",
-    "src",
     "src/**/*.js",
     "src/**/*.d.ts",
     "theme",
@@ -59,5 +58,6 @@
     "dll:build": "webpack",
     "build": "tsc -p ./tsconfig.release.json",
     "postversion": "npm run build"
-  }
+  },
+  "types": "src/index.d.ts"
 }

package/src/highlight.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module highlight/highlight
+ */
+import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+/**
+ * The highlight plugin.
+ *
+ * For a detailed overview, check the {@glink features/highlight Highlight feature} documentation.
+ *
+ * This is a "glue" plugin which loads the {@link module:highlight/highlightediting~HighlightEditing} and
+ * {@link module:highlight/highlightui~HighlightUI} plugins.
+ */
+export default class Highlight extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): PluginDependencies;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'Highlight';
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [Highlight.pluginName]: Highlight;
+    }
+}

package/src/highlightcommand.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module highlight/highlightcommand
+ */
+import { Command } from 'ckeditor5/src/core';
+/**
+ * The highlight command. It is used by the {@link module:highlight/highlightediting~HighlightEditing highlight feature}
+ * to apply the text highlighting.
+ *
+ * ```ts
+ * editor.execute( 'highlight', { value: 'greenMarker' } );
+ * ```
+ *
+ * **Note**: Executing the command without a value removes the attribute from the model. If the selection is collapsed
+ * inside a text with the highlight attribute, the command will remove the attribute from the entire range
+ * of that text.
+ */
+export default class HighlightCommand extends Command {
+    /**
+     * A value indicating whether the command is active. If the selection has some highlight attribute,
+     * it corresponds to the value of that attribute.
+     *
+     * @observable
+     * @readonly
+     */
+    value: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * @param options Options for the executed command.
+     * @param options.value The value to apply.
+     *
+     * @fires execute
+     */
+    execute(options?: {
+        value?: string | null;
+    }): void;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface CommandsMap {
+        highlight: HighlightCommand;
+    }
+}

package/src/highlightconfig.d.ts

@@ -0,0 +1,181 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module highlight/highlightconfig
+ */
+/**
+ * The highlight option descriptor. See {@link module:highlight/highlightconfig~HighlightConfig} to learn more.
+ *
+ * ```ts
+ * {
+ * 	model: 'pinkMarker',
+ * 	class: 'marker-pink',
+ * 	title: 'Pink Marker',
+ * 	color: 'var(--ck-highlight-marker-pink)',
+ * 	type: 'marker'
+ * }
+ * ```
+ */
+export interface HighlightOption {
+    /**
+     * The user-readable title of the option.
+     */
+    title: string;
+    /**
+     * The unique attribute value in the model.
+     */
+    model: string;
+    /**
+     * The CSS `var()` used for the highlighter. The color is used in the user interface to represent the highlighter.
+     * There is a possibility to use the default color format like rgb, hex or hsl, but you need to care about the color of `<mark>`
+     * by adding CSS classes definition.
+     */
+    color: string;
+    /**
+     * The CSS class used on the `<mark>` element in the view. It should match the `color` setting.
+     */
+    class: string;
+    /**
+     * The type of highlighter:
+     *
+     * * `'marker'` &ndash; Uses the `color` as the `background-color` style,
+     * * `'pen'` &ndash; Uses the `color` as the font `color` style.
+     */
+    type: 'marker' | 'pen';
+}
+/**
+ * The configuration of the {@link module:highlight/highlight~Highlight highlight feature}.
+ * ```ts
+ * ClassicEditor
+ * 	.create( editorElement, {
+ * 		highlight:  ... // Highlight feature configuration.
+ * 	} )
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ */
+export interface HighlightConfig {
+    /**
+     * The available highlight options. The default value is:
+     * ```ts
+     * options: [
+     * 	{
+     * 		model: 'yellowMarker',
+     * 		class: 'marker-yellow',
+     * 		title: 'Yellow marker',
+     * 		color: 'var(--ck-highlight-marker-yellow)',
+     * 		type: 'marker'
+     * 	},
+     * 	{
+     * 		model: 'greenMarker',
+     * 		class: 'marker-green',
+     * 		title: 'Green marker',
+     * 		color: 'var(--ck-highlight-marker-green)',
+     * 		type: 'marker'
+     * 	},
+     * 	{
+     * 		model: 'pinkMarker',
+     * 		class: 'marker-pink',
+     * 		title: 'Pink marker',
+     * 		color: 'var(--ck-highlight-marker-pink)',
+     * 		type: 'marker'
+     * 	},
+     * 	{
+     * 		model: 'blueMarker',
+     * 		class: 'marker-blue',
+     * 		title: 'Blue marker',
+     * 		color: 'var(--ck-highlight-marker-blue)',
+     * 		type: 'marker'
+     * 	},
+     * 	{
+     * 		model: 'redPen',
+     * 		class: 'pen-red',
+     * 		title: 'Red pen',
+     * 		color: 'var(--ck-highlight-pen-red)',
+     * 		type: 'pen'
+     * 	},
+     * 	{
+     * 		model: 'greenPen',
+     * 		class: 'pen-green',
+     * 		title: 'Green pen',
+     * 		color: 'var(--ck-highlight-pen-green)',
+     * 		type: 'pen'
+     * 	}
+     * ]
+     * ```
+     *
+     * There are two types of highlighters available:
+     *
+     * * `'marker'` &ndash; Rendered as a `<mark>` element, styled with the `background-color`.
+     * * `'pen'` &ndash; Rendered as a `<mark>` element, styled with the font `color`.
+     *
+     * **Note**: The highlight feature provides a stylesheet with the CSS classes and corresponding colors defined
+     * as CSS variables.
+     *
+     * ```css
+     * :root {
+     * 	--ck-highlight-marker-yellow: #fdfd77;
+     * 	--ck-highlight-marker-green: #63f963;
+     * 	--ck-highlight-marker-pink: #fc7999;
+     * 	--ck-highlight-marker-blue: #72cdfd;
+     * 	--ck-highlight-pen-red: #e91313;
+     * 	--ck-highlight-pen-green: #118800;
+     * }
+     *
+     * .marker-yellow { ... }
+     * .marker-green { ... }
+     * .marker-pink { ... }
+     * .marker-blue { ... }
+     * .pen-red { ... }
+     * .pen-green { ... }
+     * ```
+     *
+     * It is possible to define the `color` property directly as `rgba(R, G, B, A)`,
+     * `#RRGGBB[AA]` or `hsla(H, S, L, A)`. In such situation, the color will **only** apply to the UI of
+     * the editor and the `<mark>` elements in the content must be styled by custom classes provided by
+     * a dedicated stylesheet.
+     *
+     * **Note**: It is recommended for the `color` property to correspond to the class in the content
+     * stylesheet because it represents the highlighter in the user interface of the editor.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		highlight: {
+     * 			options: [
+     * 				{
+     * 					model: 'pinkMarker',
+     * 					class: 'marker-pink',
+     * 					title: 'Pink Marker',
+     * 					color: 'var(--ck-highlight-marker-pink)',
+     * 					type: 'marker'
+     * 				},
+     * 				{
+     * 					model: 'redPen',
+     * 					class: 'pen-red',
+     * 					title: 'Red Pen',
+     * 					color: 'var(--ck-highlight-pen-red)',
+     * 					type: 'pen'
+     * 				},
+     * 			]
+     * 		}
+     * } )
+     * .then( ... )
+     * .catch( ... );
+     * ```
+     */
+    options: Array<HighlightOption>;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * The configuration of the {@link module:highlight/highlight~Highlight} feature.
+         *
+         * Read more in {@link module:highlight/highlightconfig~HighlightConfig}.
+         */
+        highlight?: HighlightConfig;
+    }
+}

package/src/highlightconfig.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};

package/src/highlightediting.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module highlight/highlightediting
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core';
+/**
+ * The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
+ * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
+ * as a `<mark>` element with a `class` attribute (`<mark class="marker-green">...</mark>`) depending
+ * on the {@link module:highlight/highlightconfig~HighlightConfig configuration}.
+ */
+export default class HighlightEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'HighlightEditing';
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [HighlightEditing.pluginName]: HighlightEditing;
+    }
+}

package/src/highlightediting.js

@@ -11,7 +11,7 @@ import HighlightCommand from './highlightcommand';
  * The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
  * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
  * as a `<mark>` element with a `class` attribute (`<mark class="marker-green">...</mark>`) depending
- * on the {@link module:highlight/highlight~HighlightConfig configuration}.
+ * on the {@link module:highlight/highlightconfig~HighlightConfig configuration}.
  */
 export default class HighlightEditing extends Plugin {
     /**

package/src/highlightui.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module highlight/highlightui
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import './../theme/highlight.css';
+/**
+ * The default highlight UI plugin. It introduces:
+ *
+ * * The `'highlight'` dropdown,
+ * * The `'removeHighlight'` and `'highlight:*'` buttons.
+ *
+ * The default configuration includes the following buttons:
+ *
+ * * `'highlight:yellowMarker'`
+ * * `'highlight:greenMarker'`
+ * * `'highlight:pinkMarker'`
+ * * `'highlight:blueMarker'`
+ * * `'highlight:redPen'`
+ * * `'highlight:greenPen'`
+ *
+ * See the {@link module:highlight/highlightconfig~HighlightConfig#options configuration} to learn more
+ * about the defaults.
+ */
+export default class HighlightUI extends Plugin {
+    /**
+     * Returns the localized option titles provided by the plugin.
+     *
+     * The following localized titles corresponding with default
+     * {@link module:highlight/highlightconfig~HighlightConfig#options} are available:
+     *
+     * * `'Yellow marker'`,
+     * * `'Green marker'`,
+     * * `'Pink marker'`,
+     * * `'Blue marker'`,
+     * * `'Red pen'`,
+     * * `'Green pen'`.
+     */
+    get localizedOptionTitles(): Record<string, string>;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): 'HighlightUI';
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Creates the "Remove highlight" button.
+     */
+    private _addRemoveHighlightButton;
+    /**
+     * Creates a toolbar button from the provided highlight option.
+     */
+    private _addHighlighterButton;
+    /**
+     * Internal method for creating highlight buttons.
+     *
+     * @param name The name of the button.
+     * @param label The label for the button.
+     * @param icon The button icon.
+     * @param value The `value` property passed to the executed command.
+     * @param decorateButton A callback getting ButtonView instance so that it can be further customized.
+     */
+    private _addButton;
+    /**
+     * Creates the split button dropdown UI from the provided highlight options.
+     */
+    private _addDropdown;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface PluginsMap {
+        [HighlightUI.pluginName]: HighlightUI;
+    }
+}

package/src/highlightui.js

@@ -25,7 +25,7 @@ import './../theme/highlight.css';
  * * `'highlight:redPen'`
  * * `'highlight:greenPen'`
  *
- * See the {@link module:highlight/highlight~HighlightConfig#options configuration} to learn more
+ * See the {@link module:highlight/highlightconfig~HighlightConfig#options configuration} to learn more
  * about the defaults.
  */
 export default class HighlightUI extends Plugin {
@@ -33,7 +33,7 @@ export default class HighlightUI extends Plugin {
      * Returns the localized option titles provided by the plugin.
      *
      * The following localized titles corresponding with default
-     * {@link module:highlight/highlight~HighlightConfig#options} are available:
+     * {@link module:highlight/highlightconfig~HighlightConfig#options} are available:
      *
      * * `'Yellow marker'`,
      * * `'Green marker'`,

package/src/{index.ts → index.d.ts}

@@ -2,11 +2,9 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module highlight
  */
-
 export { default as Highlight } from './highlight';
 export { default as HighlightEditing } from './highlightediting';
 export { default as HighlightUI } from './highlightui';

package/src/highlight.ts

@@ -1,225 +0,0 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module highlight/highlight
- */
-
-import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
-
-import HighlightEditing from './highlightediting';
-import HighlightUI from './highlightui';
-
-/**
- * The highlight plugin.
- *
- * For a detailed overview, check the {@glink features/highlight Highlight feature} documentation.
- *
- * This is a "glue" plugin which loads the {@link module:highlight/highlightediting~HighlightEditing} and
- * {@link module:highlight/highlightui~HighlightUI} plugins.
- */
-export default class Highlight extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	public static get requires(): PluginDependencies {
-		return [ HighlightEditing, HighlightUI ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	public static get pluginName(): 'Highlight' {
-		return 'Highlight';
-	}
-}
-
-/**
- * The highlight option descriptor. See {@link module:highlight/highlight~HighlightConfig} to learn more.
- *
- * ```ts
- * {
- * 	model: 'pinkMarker',
- * 	class: 'marker-pink',
- * 	title: 'Pink Marker',
- * 	color: 'var(--ck-highlight-marker-pink)',
- * 	type: 'marker'
- * }
- * ```
- */
-export interface HighlightOption {
-
-	/**
-	 * The user-readable title of the option.
-	 */
-	title: string;
-
-	/**
-	 * The unique attribute value in the model.
-	 */
-	model: string;
-
-	/**
-	 * The CSS `var()` used for the highlighter. The color is used in the user interface to represent the highlighter.
-	 * There is a possibility to use the default color format like rgb, hex or hsl, but you need to care about the color of `<mark>`
-	 * by adding CSS classes definition.
-	 */
-	color: string;
-
-	/**
-	 * The CSS class used on the `<mark>` element in the view. It should match the `color` setting.
-	 */
-	class: string;
-
-	/**
-	 * The type of highlighter:
-	 *
-	 * * `'marker'` &ndash; Uses the `color` as the `background-color` style,
-	 * * `'pen'` &ndash; Uses the `color` as the font `color` style.
-	 */
-	type: 'marker' | 'pen';
-}
-
-/**
- * The configuration of the {@link module:highlight/highlight~Highlight highlight feature}.
- * ```ts
- * ClassicEditor
- * 	.create( editorElement, {
- * 		highlight:  ... // Highlight feature configuration.
- * 	} )
- * 	.then( ... )
- * 	.catch( ... );
- * ```
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- */
-export interface HighlightConfig {
-
-	/**
-	 * The available highlight options. The default value is:
-	 * ```ts
-	 * options: [
-	 * 	{
-	 * 		model: 'yellowMarker',
-	 * 		class: 'marker-yellow',
-	 * 		title: 'Yellow marker',
-	 * 		color: 'var(--ck-highlight-marker-yellow)',
-	 * 		type: 'marker'
-	 * 	},
-	 * 	{
-	 * 		model: 'greenMarker',
-	 * 		class: 'marker-green',
-	 * 		title: 'Green marker',
-	 * 		color: 'var(--ck-highlight-marker-green)',
-	 * 		type: 'marker'
-	 * 	},
-	 * 	{
-	 * 		model: 'pinkMarker',
-	 * 		class: 'marker-pink',
-	 * 		title: 'Pink marker',
-	 * 		color: 'var(--ck-highlight-marker-pink)',
-	 * 		type: 'marker'
-	 * 	},
-	 * 	{
-	 * 		model: 'blueMarker',
-	 * 		class: 'marker-blue',
-	 * 		title: 'Blue marker',
-	 * 		color: 'var(--ck-highlight-marker-blue)',
-	 * 		type: 'marker'
-	 * 	},
-	 * 	{
-	 * 		model: 'redPen',
-	 * 		class: 'pen-red',
-	 * 		title: 'Red pen',
-	 * 		color: 'var(--ck-highlight-pen-red)',
-	 * 		type: 'pen'
-	 * 	},
-	 * 	{
-	 * 		model: 'greenPen',
-	 * 		class: 'pen-green',
-	 * 		title: 'Green pen',
-	 * 		color: 'var(--ck-highlight-pen-green)',
-	 * 		type: 'pen'
-	 * 	}
-	 * ]
-	 * ```
-	 *
-	 * There are two types of highlighters available:
-	 *
-	 * * `'marker'` &ndash; Rendered as a `<mark>` element, styled with the `background-color`.
-	 * * `'pen'` &ndash; Rendered as a `<mark>` element, styled with the font `color`.
-	 *
-	 * **Note**: The highlight feature provides a stylesheet with the CSS classes and corresponding colors defined
-	 * as CSS variables.
-	 *
-	 * ```ts
-	 * :root {
-	 * 	--ck-highlight-marker-yellow: #fdfd77;
-	 * 	--ck-highlight-marker-green: #63f963;
-	 * 	--ck-highlight-marker-pink: #fc7999;
-	 * 	--ck-highlight-marker-blue: #72cdfd;
-	 * 	--ck-highlight-pen-red: #e91313;
-	 * 	--ck-highlight-pen-green: #118800;
-	 * }
-	 *
-	 * .marker-yellow { ... }
-	 * .marker-green { ... }
-	 * .marker-pink { ... }
-	 * .marker-blue { ... }
-	 * .pen-red { ... }
-	 * .pen-green { ... }
-	 * ```
-	 *
-	 * It is possible to define the `color` property directly as `rgba(R, G, B, A)`,
-	 * `#RRGGBB[AA]` or `hsla(H, S, L, A)`. In such situation, the color will **only** apply to the UI of
-	 * the editor and the `<mark>` elements in the content must be styled by custom classes provided by
-	 * a dedicated stylesheet.
-	 *
-	 * **Note**: It is recommended for the `color` property to correspond to the class in the content
-	 * stylesheet because it represents the highlighter in the user interface of the editor.
-	 *
-	 * ```ts
-	 * ClassicEditor
-	 * 	.create( editorElement, {
-	 * 		highlight: {
-	 * 			options: [
-	 * 				{
-	 * 					model: 'pinkMarker',
-	 * 					class: 'marker-pink',
-	 * 					title: 'Pink Marker',
-	 * 					color: 'var(--ck-highlight-marker-pink)',
-	 * 					type: 'marker'
-	 * 				},
-	 * 				{
-	 * 					model: 'redPen',
-	 * 					class: 'pen-red',
-	 * 					title: 'Red Pen',
-	 * 					color: 'var(--ck-highlight-pen-red)',
-	 * 					type: 'pen'
-	 * 				},
-	 * 			]
-	 * 		}
-	 * } )
-	 * .then( ... )
-	 * .catch( ... );
-	 * ```
-	 */
-	options: Array<HighlightOption>;
-}
-
-declare module '@ckeditor/ckeditor5-core' {
-	interface PluginsMap {
-		[ Highlight.pluginName ]: Highlight;
-	}
-
-	interface EditorConfig {
-
-		/**
-		 * The configuration of the {@link module:highlight/highlight~Highlight} feature.
-		 *
-		 * Read more in {@link module:highlight/highlight~HighlightConfig}.
-		 */
-		highlight?: HighlightConfig;
-	}
-}

package/src/highlightcommand.ts

@@ -1,113 +0,0 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module highlight/highlightcommand
- */
-
-import { Command } from 'ckeditor5/src/core';
-import type { TreeWalkerValue } from 'ckeditor5/src/engine';
-
-/**
- * The highlight command. It is used by the {@link module:highlight/highlightediting~HighlightEditing highlight feature}
- * to apply the text highlighting.
- *
- * ```ts
- * editor.execute( 'highlight', { value: 'greenMarker' } );
- * ```
- *
- * **Note**: Executing the command without a value removes the attribute from the model. If the selection is collapsed
- * inside a text with the highlight attribute, the command will remove the attribute from the entire range
- * of that text.
- */
-export default class HighlightCommand extends Command {
-	/**
-	 * A value indicating whether the command is active. If the selection has some highlight attribute,
-	 * it corresponds to the value of that attribute.
-	 *
-	 * @observable
-	 * @readonly
-	 */
-	declare public value: string | undefined;
-
-	/**
-	 * @inheritDoc
-	 */
-	public override refresh(): void {
-		const model = this.editor.model;
-		const doc = model.document;
-
-		this.value = doc.selection.getAttribute( 'highlight' ) as string | undefined;
-		this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'highlight' );
-	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @param options Options for the executed command.
-	 * @param options.value The value to apply.
-	 *
-	 * @fires execute
-	 */
-	public override execute( options: { value?: string | null } = {} ): void {
-		const model = this.editor.model;
-		const document = model.document;
-		const selection = document.selection;
-
-		const highlighter = options.value;
-
-		model.change( writer => {
-			if ( selection.isCollapsed ) {
-				const position = selection.getFirstPosition()!;
-
-				// When selection is inside text with `highlight` attribute.
-				if ( selection.hasAttribute( 'highlight' ) ) {
-					// Find the full highlighted range.
-					const isSameHighlight = ( value: TreeWalkerValue ) => {
-						return value.item.hasAttribute( 'highlight' ) && value.item.getAttribute( 'highlight' ) === this.value;
-					};
-
-					const highlightStart = position.getLastMatchingPosition( isSameHighlight, { direction: 'backward' } );
-					const highlightEnd = position.getLastMatchingPosition( isSameHighlight );
-
-					const highlightRange = writer.createRange( highlightStart, highlightEnd );
-
-					// Then depending on current value...
-					if ( !highlighter || this.value === highlighter ) {
-						// ...remove attribute when passing highlighter different then current or executing "eraser".
-
-						// If we're at the end of the highlighted range, we don't want to remove highlight of the range.
-						if ( !position.isEqual( highlightEnd ) ) {
-							writer.removeAttribute( 'highlight', highlightRange );
-						}
-
-						writer.removeSelectionAttribute( 'highlight' );
-					} else {
-						// ...update `highlight` value.
-
-						// If we're at the end of the highlighted range, we don't want to change the highlight of the range.
-						if ( !position.isEqual( highlightEnd ) ) {
-							writer.setAttribute( 'highlight', highlighter, highlightRange );
-						}
-
-						writer.setSelectionAttribute( 'highlight', highlighter );
-					}
-				} else if ( highlighter ) {
-					writer.setSelectionAttribute( 'highlight', highlighter );
-				}
-			} else {
-				const ranges = model.schema.getValidRanges( selection.getRanges(), 'highlight' );
-
-				for ( const range of ranges ) {
-					if ( highlighter ) {
-						writer.setAttribute( 'highlight', highlighter, range );
-					} else {
-						writer.removeAttribute( 'highlight', range );
-					}
-				}
-			}
-		} );
-	}
-}

package/src/highlightediting.ts

@@ -1,139 +0,0 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module highlight/highlightediting
- */
-
-import { Plugin, type Editor } from 'ckeditor5/src/core';
-
-import HighlightCommand from './highlightcommand';
-import type { HighlightOption } from './highlight';
-
-/**
- * The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
- * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
- * as a `<mark>` element with a `class` attribute (`<mark class="marker-green">...</mark>`) depending
- * on the {@link module:highlight/highlight~HighlightConfig configuration}.
- */
-export default class HighlightEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	public static get pluginName(): 'HighlightEditing' {
-		return 'HighlightEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor: Editor ) {
-		super( editor );
-
-		editor.config.define( 'highlight', {
-			options: [
-				{
-					model: 'yellowMarker',
-					class: 'marker-yellow',
-					title: 'Yellow marker',
-					color: 'var(--ck-highlight-marker-yellow)',
-					type: 'marker'
-				},
-				{
-					model: 'greenMarker',
-					class: 'marker-green',
-					title: 'Green marker',
-					color: 'var(--ck-highlight-marker-green)',
-					type: 'marker'
-				},
-				{
-					model: 'pinkMarker',
-					class: 'marker-pink',
-					title: 'Pink marker',
-					color: 'var(--ck-highlight-marker-pink)',
-					type: 'marker'
-				},
-				{
-					model: 'blueMarker',
-					class: 'marker-blue',
-					title: 'Blue marker',
-					color: 'var(--ck-highlight-marker-blue)',
-					type: 'marker'
-				},
-				{
-					model: 'redPen',
-					class: 'pen-red',
-					title: 'Red pen',
-					color: 'var(--ck-highlight-pen-red)',
-					type: 'pen'
-				},
-				{
-					model: 'greenPen',
-					class: 'pen-green',
-					title: 'Green pen',
-					color: 'var(--ck-highlight-pen-green)',
-					type: 'pen'
-				}
-			]
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	public init(): void {
-		const editor = this.editor;
-
-		// Allow highlight attribute on text nodes.
-		editor.model.schema.extend( '$text', { allowAttributes: 'highlight' } );
-
-		const options = editor.config.get( 'highlight.options' )!;
-
-		// Set-up the two-way conversion.
-		editor.conversion.attributeToElement( _buildDefinition( options ) );
-
-		editor.commands.add( 'highlight', new HighlightCommand( editor ) );
-	}
-}
-
-/**
- * Converts the options array to a converter definition.
- *
- * @param options An array with configured options.
- */
-function _buildDefinition( options: Array<HighlightOption> ): HighlightConverterDefinition {
-	const definition: HighlightConverterDefinition = {
-		model: {
-			key: 'highlight',
-			values: []
-		},
-		view: {}
-	};
-
-	for ( const option of options ) {
-		definition.model.values.push( option.model );
-		definition.view[ option.model ] = {
-			name: 'mark',
-			classes: option.class
-		};
-	}
-
-	return definition;
-}
-
-type HighlightConverterDefinition = {
-	model: { key: string; values: Array<string> };
-	view: Record<string, { name: string; classes: string }>;
-};
-
-declare module '@ckeditor/ckeditor5-core' {
-	interface CommandsMap {
-		highlight: HighlightCommand;
-	}
-
-	interface PluginsMap {
-		[ HighlightEditing.pluginName ]: HighlightEditing;
-	}
-}

package/src/highlightui.ts

@@ -1,282 +0,0 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module highlight/highlightui
- */
-
-import { Plugin, icons } from 'ckeditor5/src/core';
-import {
-	ButtonView,
-	SplitButtonView,
-	ToolbarSeparatorView,
-	createDropdown,
-	addToolbarToDropdown,
-	type DropdownView
-} from 'ckeditor5/src/ui';
-
-import markerIcon from './../theme/icons/marker.svg';
-import penIcon from './../theme/icons/pen.svg';
-import type { HighlightOption } from './highlight';
-
-import './../theme/highlight.css';
-
-/**
- * The default highlight UI plugin. It introduces:
- *
- * * The `'highlight'` dropdown,
- * * The `'removeHighlight'` and `'highlight:*'` buttons.
- *
- * The default configuration includes the following buttons:
- *
- * * `'highlight:yellowMarker'`
- * * `'highlight:greenMarker'`
- * * `'highlight:pinkMarker'`
- * * `'highlight:blueMarker'`
- * * `'highlight:redPen'`
- * * `'highlight:greenPen'`
- *
- * See the {@link module:highlight/highlight~HighlightConfig#options configuration} to learn more
- * about the defaults.
- */
-export default class HighlightUI extends Plugin {
-	/**
-	 * Returns the localized option titles provided by the plugin.
-	 *
-	 * The following localized titles corresponding with default
-	 * {@link module:highlight/highlight~HighlightConfig#options} are available:
-	 *
-	 * * `'Yellow marker'`,
-	 * * `'Green marker'`,
-	 * * `'Pink marker'`,
-	 * * `'Blue marker'`,
-	 * * `'Red pen'`,
-	 * * `'Green pen'`.
-	 */
-	public get localizedOptionTitles(): Record<string, string> {
-		const t = this.editor.t;
-
-		return {
-			'Yellow marker': t( 'Yellow marker' ),
-			'Green marker': t( 'Green marker' ),
-			'Pink marker': t( 'Pink marker' ),
-			'Blue marker': t( 'Blue marker' ),
-			'Red pen': t( 'Red pen' ),
-			'Green pen': t( 'Green pen' )
-		};
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	public static get pluginName(): 'HighlightUI' {
-		return 'HighlightUI';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	public init(): void {
-		const options = this.editor.config.get( 'highlight.options' )!;
-
-		for ( const option of options ) {
-			this._addHighlighterButton( option );
-		}
-
-		this._addRemoveHighlightButton();
-
-		this._addDropdown( options );
-	}
-
-	/**
-	 * Creates the "Remove highlight" button.
-	 */
-	private _addRemoveHighlightButton(): void {
-		const t = this.editor.t;
-		const command = this.editor.commands.get( 'highlight' )!;
-
-		this._addButton( 'removeHighlight', t( 'Remove highlight' ), icons.eraser, null, button => {
-			button.bind( 'isEnabled' ).to( command, 'isEnabled' );
-		} );
-	}
-
-	/**
-	 * Creates a toolbar button from the provided highlight option.
-	 */
-	private _addHighlighterButton( option: HighlightOption ) {
-		const command = this.editor.commands.get( 'highlight' )!;
-
-		// TODO: change naming
-		this._addButton( 'highlight:' + option.model, option.title, getIconForType( option.type ), option.model, decorateHighlightButton );
-
-		function decorateHighlightButton( button: ButtonView ) {
-			button.bind( 'isEnabled' ).to( command, 'isEnabled' );
-			button.bind( 'isOn' ).to( command, 'value', value => value === option.model );
-			button.iconView.fillColor = option.color;
-			button.isToggleable = true;
-		}
-	}
-
-	/**
-	 * Internal method for creating highlight buttons.
-	 *
-	 * @param name The name of the button.
-	 * @param label The label for the button.
-	 * @param icon The button icon.
-	 * @param value The `value` property passed to the executed command.
-	 * @param decorateButton A callback getting ButtonView instance so that it can be further customized.
-	 */
-	private _addButton( name: string, label: string, icon: string, value: string | null, decorateButton: ( button: ButtonView ) => void ) {
-		const editor = this.editor;
-
-		editor.ui.componentFactory.add( name, locale => {
-			const buttonView = new ButtonView( locale );
-
-			const localized = this.localizedOptionTitles[ label ] ? this.localizedOptionTitles[ label ] : label;
-
-			buttonView.set( {
-				label: localized,
-				icon,
-				tooltip: true
-			} );
-
-			buttonView.on( 'execute', () => {
-				editor.execute( 'highlight', { value } );
-				editor.editing.view.focus();
-			} );
-
-			// Add additional behavior for buttonView.
-			decorateButton( buttonView );
-
-			return buttonView;
-		} );
-	}
-
-	/**
-	 * Creates the split button dropdown UI from the provided highlight options.
-	 */
-	private _addDropdown( options: Array<HighlightOption> ) {
-		const editor = this.editor;
-		const t = editor.t;
-		const componentFactory = editor.ui.componentFactory;
-
-		const startingHighlighter = options[ 0 ];
-
-		const optionsMap = options.reduce( ( retVal, option ) => {
-			retVal[ option.model ] = option;
-
-			return retVal;
-		}, {} as Record<string, HighlightOption> );
-
-		componentFactory.add( 'highlight', locale => {
-			const command = editor.commands.get( 'highlight' )!;
-			const dropdownView = createDropdown( locale, SplitButtonView );
-			const splitButtonView = dropdownView.buttonView as HighlightSplitButtonView;
-
-			splitButtonView.set( {
-				label: t( 'Highlight' ),
-				tooltip: true,
-				// Holds last executed highlighter.
-				lastExecuted: startingHighlighter.model,
-				// Holds current highlighter to execute (might be different then last used).
-				commandValue: startingHighlighter.model,
-				isToggleable: true
-			} );
-
-			// Dropdown button changes to selection (command.value):
-			// - If selection is in highlight it get active highlight appearance (icon, color) and is activated.
-			// - Otherwise it gets appearance (icon, color) of last executed highlight.
-			splitButtonView.bind( 'icon' ).to( command, 'value', value => getIconForType( getActiveOption( value, 'type' ) ) );
-			splitButtonView.bind( 'color' ).to( command, 'value', value => getActiveOption( value, 'color' ) );
-			splitButtonView.bind( 'commandValue' ).to( command, 'value', value => getActiveOption( value, 'model' ) );
-			splitButtonView.bind( 'isOn' ).to( command, 'value', value => !!value );
-
-			splitButtonView.delegate( 'execute' ).to( dropdownView );
-
-			// Create buttons array.
-			const buttonsCreator = () => {
-				const buttons = options.map( option => {
-					// Get existing highlighter button.
-					const buttonView = componentFactory.create( 'highlight:' + option.model );
-
-					// Update lastExecutedHighlight on execute.
-					this.listenTo( buttonView, 'execute', () => {
-						( dropdownView.buttonView as HighlightSplitButtonView ).set( { lastExecuted: option.model } );
-					} );
-
-					return buttonView;
-				} );
-
-				// Add separator and eraser buttons to dropdown.
-				buttons.push( new ToolbarSeparatorView() );
-				buttons.push( componentFactory.create( 'removeHighlight' ) );
-
-				return buttons;
-			};
-
-			// Make toolbar button enabled when any button in dropdown is enabled before adding separator and eraser.
-			dropdownView.bind( 'isEnabled' ).to( command, 'isEnabled' );
-
-			addToolbarToDropdown( dropdownView, buttonsCreator, {
-				enableActiveItemFocusOnDropdownOpen: true,
-				ariaLabel: t( 'Text highlight toolbar' )
-			} );
-			bindToolbarIconStyleToActiveColor( dropdownView );
-
-			// Execute current action from dropdown's split button action button.
-			splitButtonView.on( 'execute', () => {
-				editor.execute( 'highlight', { value: splitButtonView.commandValue } );
-			} );
-
-			// Focus the editable after executing the command.
-			// It overrides a default behaviour where the focus is moved to the dropdown button (#12125).
-			this.listenTo( dropdownView, 'execute', () => {
-				editor.editing.view.focus();
-			} );
-
-			/**
-			 * Returns active highlighter option depending on current command value.
-			 * If current is not set or it is the same as last execute this method will return the option key (like icon or color)
-			 * of last executed highlighter. Otherwise it will return option key for current one.
-			 */
-			function getActiveOption<Key extends keyof HighlightOption>( current: string | undefined, key: Key ): HighlightOption[ Key ] {
-				const whichHighlighter = !current ||
-				current === splitButtonView.lastExecuted ? splitButtonView.lastExecuted : current;
-
-				return optionsMap[ whichHighlighter! ][ key ];
-			}
-
-			return dropdownView;
-		} );
-	}
-}
-
-/**
- * Extends split button icon style to reflect last used button style.
- */
-function bindToolbarIconStyleToActiveColor( dropdownView: DropdownView ): void {
-	const actionView = ( dropdownView.buttonView as HighlightSplitButtonView ).actionView;
-
-	actionView.iconView.bind( 'fillColor' ).to( ( dropdownView.buttonView! as HighlightSplitButtonView ), 'color' );
-}
-
-/**
- * Returns icon for given highlighter type.
- */
-function getIconForType( type: 'marker' | 'pen' ) {
-	return type === 'marker' ? markerIcon : penIcon;
-}
-
-type HighlightSplitButtonView = SplitButtonView & {
-	lastExecuted: string;
-	commandValue: string;
-	color: string;
-};
-
-declare module '@ckeditor/ckeditor5-core' {
-	interface PluginsMap {
-		[ HighlightUI.pluginName ]: HighlightUI;
-	}
-}