@ckeditor/ckeditor5-highlight 35.4.0 → 36.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +1 -1
- package/build/highlight.js +2 -2
- package/package.json +21 -17
- package/src/highlight.js +13 -174
- package/src/highlightcommand.js +73 -93
- package/src/highlightediting.js +92 -107
- package/src/highlightui.js +183 -232
- package/src/index.js +1 -3
- package/theme/highlight.css +1 -1
package/LICENSE.md
CHANGED
|
@@ -2,7 +2,7 @@ Software License Agreement
|
|
|
2
2
|
==========================
|
|
3
3
|
|
|
4
4
|
**CKEditor 5 highlight feature** – https://github.com/ckeditor/ckeditor5-highlight <br>
|
|
5
|
-
Copyright (c) 2003-
|
|
5
|
+
Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
|
|
6
6
|
|
|
7
7
|
Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
|
|
8
8
|
|
package/build/highlight.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
!function(e){const t=e.en=e.en||{};t.dictionary=Object.assign(t.dictionary||{},{"Blue marker":"Blue marker","Green marker":"Green marker","Green pen":"Green pen",Highlight:"Highlight","Pink marker":"Pink marker","Red pen":"Red pen","Remove highlight":"Remove highlight","Text highlight toolbar":"Text highlight toolbar","Yellow marker":"Yellow marker"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={})),
|
|
2
2
|
/*!
|
|
3
|
-
* @license Copyright (c) 2003-
|
|
3
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
4
4
|
* For licensing, see LICENSE.md.
|
|
5
|
-
*/(()=>{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(u(e,"type")))),h.bind("color").to(c,"value",(e=>u(e,"color"))),h.bind("commandValue").to(c,"value",(e=>u(e,"model"))),h.bind("isOn").to(c,"value",(e=>!!e)),h.delegate("execute").to(s);const d=e.map((e=>{const t=r.create("highlight:"+e.model);return this.listenTo(t,"execute",(()=>{s.buttonView.set({lastExecuted:e.model})})),t}));function u(e,t){const i=e&&e!==h.lastExecuted?e:h.lastExecuted;return l[i][t]}return s.bind("isEnabled").toMany(d,"isEnabled",((...e)=>e.some((e=>e)))),d.push(new o.ToolbarSeparatorView),d.push(r.create("removeHighlight")),(0,o.addToolbarToDropdown)(s,d,{enableActiveItemFocusOnDropdownOpen:!0}),function(e){const t=e.buttonView.actionView;t.iconView.bind("fillColor").to(e.buttonView,"color")}(s),s.toolbarView.ariaLabel=i("Text highlight toolbar"),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})();
|
|
5
|
+
*/(()=>{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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ckeditor/ckeditor5-highlight",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "36.0.1",
|
|
4
4
|
"description": "Highlight feature for CKEditor 5.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ckeditor",
|
|
@@ -12,22 +12,23 @@
|
|
|
12
12
|
],
|
|
13
13
|
"main": "src/index.js",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"ckeditor5": "^
|
|
15
|
+
"ckeditor5": "^36.0.1"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@ckeditor/ckeditor5-block-quote": "^
|
|
19
|
-
"@ckeditor/ckeditor5-core": "^
|
|
20
|
-
"@ckeditor/ckeditor5-dev-utils": "^
|
|
21
|
-
"@ckeditor/ckeditor5-editor-classic": "^
|
|
22
|
-
"@ckeditor/ckeditor5-engine": "^
|
|
23
|
-
"@ckeditor/ckeditor5-enter": "^
|
|
24
|
-
"@ckeditor/ckeditor5-heading": "^
|
|
25
|
-
"@ckeditor/ckeditor5-image": "^
|
|
26
|
-
"@ckeditor/ckeditor5-list": "^
|
|
27
|
-
"@ckeditor/ckeditor5-paragraph": "^
|
|
28
|
-
"@ckeditor/ckeditor5-theme-lark": "^
|
|
29
|
-
"@ckeditor/ckeditor5-typing": "^
|
|
30
|
-
"@ckeditor/ckeditor5-utils": "^
|
|
18
|
+
"@ckeditor/ckeditor5-block-quote": "^36.0.1",
|
|
19
|
+
"@ckeditor/ckeditor5-core": "^36.0.1",
|
|
20
|
+
"@ckeditor/ckeditor5-dev-utils": "^32.0.0",
|
|
21
|
+
"@ckeditor/ckeditor5-editor-classic": "^36.0.1",
|
|
22
|
+
"@ckeditor/ckeditor5-engine": "^36.0.1",
|
|
23
|
+
"@ckeditor/ckeditor5-enter": "^36.0.1",
|
|
24
|
+
"@ckeditor/ckeditor5-heading": "^36.0.1",
|
|
25
|
+
"@ckeditor/ckeditor5-image": "^36.0.1",
|
|
26
|
+
"@ckeditor/ckeditor5-list": "^36.0.1",
|
|
27
|
+
"@ckeditor/ckeditor5-paragraph": "^36.0.1",
|
|
28
|
+
"@ckeditor/ckeditor5-theme-lark": "^36.0.1",
|
|
29
|
+
"@ckeditor/ckeditor5-typing": "^36.0.1",
|
|
30
|
+
"@ckeditor/ckeditor5-utils": "^36.0.1",
|
|
31
|
+
"typescript": "^4.8.4",
|
|
31
32
|
"webpack": "^5.58.1",
|
|
32
33
|
"webpack-cli": "^4.9.0"
|
|
33
34
|
},
|
|
@@ -46,13 +47,16 @@
|
|
|
46
47
|
},
|
|
47
48
|
"files": [
|
|
48
49
|
"lang",
|
|
49
|
-
"src",
|
|
50
|
+
"src/**/*.js",
|
|
51
|
+
"src/**/*.d.ts",
|
|
50
52
|
"theme",
|
|
51
53
|
"build",
|
|
52
54
|
"ckeditor5-metadata.json",
|
|
53
55
|
"CHANGELOG.md"
|
|
54
56
|
],
|
|
55
57
|
"scripts": {
|
|
56
|
-
"dll:build": "webpack"
|
|
58
|
+
"dll:build": "webpack",
|
|
59
|
+
"build": "tsc -p ./tsconfig.release.json",
|
|
60
|
+
"postversion": "npm run build"
|
|
57
61
|
}
|
|
58
62
|
}
|
package/src/highlight.js
CHANGED
|
@@ -1,17 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Copyright (c) 2003-
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* @module highlight/highlight
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
8
|
import { Plugin } from 'ckeditor5/src/core';
|
|
11
|
-
|
|
12
9
|
import HighlightEditing from './highlightediting';
|
|
13
10
|
import HighlightUI from './highlightui';
|
|
14
|
-
|
|
15
11
|
/**
|
|
16
12
|
* The highlight plugin.
|
|
17
13
|
*
|
|
@@ -19,175 +15,18 @@ import HighlightUI from './highlightui';
|
|
|
19
15
|
*
|
|
20
16
|
* This is a "glue" plugin which loads the {@link module:highlight/highlightediting~HighlightEditing} and
|
|
21
17
|
* {@link module:highlight/highlightui~HighlightUI} plugins.
|
|
22
|
-
*
|
|
23
|
-
* @extends module:core/plugin~Plugin
|
|
24
18
|
*/
|
|
25
19
|
export default class Highlight extends Plugin {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
20
|
+
/**
|
|
21
|
+
* @inheritDoc
|
|
22
|
+
*/
|
|
23
|
+
static get requires() {
|
|
24
|
+
return [HighlightEditing, HighlightUI];
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* @inheritDoc
|
|
28
|
+
*/
|
|
29
|
+
static get pluginName() {
|
|
30
|
+
return 'Highlight';
|
|
31
|
+
}
|
|
39
32
|
}
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* The highlight option descriptor. See {@link module:highlight/highlight~HighlightConfig} to learn more.
|
|
43
|
-
*
|
|
44
|
-
* {
|
|
45
|
-
* model: 'pinkMarker',
|
|
46
|
-
* class: 'marker-pink',
|
|
47
|
-
* title: 'Pink Marker',
|
|
48
|
-
* color: 'var(--ck-highlight-marker-pink)',
|
|
49
|
-
* type: 'marker'
|
|
50
|
-
* }
|
|
51
|
-
*
|
|
52
|
-
* @typedef {Object} module:highlight/highlight~HighlightOption
|
|
53
|
-
* @property {String} title The user-readable title of the option.
|
|
54
|
-
* @property {String} model The unique attribute value in the model.
|
|
55
|
-
* @property {String} color The CSS `var()` used for the highlighter. The color is used in the user interface to represent the highlighter.
|
|
56
|
-
* 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>`
|
|
57
|
-
* by adding CSS classes definition.
|
|
58
|
-
* @property {String} class The CSS class used on the `<mark>` element in the view. It should match the `color` setting.
|
|
59
|
-
* @property {'marker'|'pen'} type The type of highlighter:
|
|
60
|
-
*
|
|
61
|
-
* * `'marker'` – Uses the `color` as the `background-color` style,
|
|
62
|
-
* * `'pen'` – Uses the `color` as the font `color` style.
|
|
63
|
-
*/
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* The configuration of the {@link module:highlight/highlight~Highlight} feature.
|
|
67
|
-
*
|
|
68
|
-
* Read more in {@link module:highlight/highlight~HighlightConfig}.
|
|
69
|
-
*
|
|
70
|
-
* @member {module:highlight/highlight~HighlightConfig} module:core/editor/editorconfig~EditorConfig#highlight
|
|
71
|
-
*/
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* The configuration of the {@link module:highlight/highlight~Highlight highlight feature}.
|
|
75
|
-
*
|
|
76
|
-
* ClassicEditor
|
|
77
|
-
* .create( editorElement, {
|
|
78
|
-
* highlight: ... // Highlight feature configuration.
|
|
79
|
-
* } )
|
|
80
|
-
* .then( ... )
|
|
81
|
-
* .catch( ... );
|
|
82
|
-
*
|
|
83
|
-
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
|
|
84
|
-
*
|
|
85
|
-
* @interface HighlightConfig
|
|
86
|
-
*/
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* The available highlight options. The default value is:
|
|
90
|
-
*
|
|
91
|
-
* options: [
|
|
92
|
-
* {
|
|
93
|
-
* model: 'yellowMarker',
|
|
94
|
-
* class: 'marker-yellow',
|
|
95
|
-
* title: 'Yellow marker',
|
|
96
|
-
* color: 'var(--ck-highlight-marker-yellow)',
|
|
97
|
-
* type: 'marker'
|
|
98
|
-
* },
|
|
99
|
-
* {
|
|
100
|
-
* model: 'greenMarker',
|
|
101
|
-
* class: 'marker-green',
|
|
102
|
-
* title: 'Green marker',
|
|
103
|
-
* color: 'var(--ck-highlight-marker-green)',
|
|
104
|
-
* type: 'marker'
|
|
105
|
-
* },
|
|
106
|
-
* {
|
|
107
|
-
* model: 'pinkMarker',
|
|
108
|
-
* class: 'marker-pink',
|
|
109
|
-
* title: 'Pink marker',
|
|
110
|
-
* color: 'var(--ck-highlight-marker-pink)',
|
|
111
|
-
* type: 'marker'
|
|
112
|
-
* },
|
|
113
|
-
* {
|
|
114
|
-
* model: 'blueMarker',
|
|
115
|
-
* class: 'marker-blue',
|
|
116
|
-
* title: 'Blue marker',
|
|
117
|
-
* color: 'var(--ck-highlight-marker-blue)',
|
|
118
|
-
* type: 'marker'
|
|
119
|
-
* },
|
|
120
|
-
* {
|
|
121
|
-
* model: 'redPen',
|
|
122
|
-
* class: 'pen-red',
|
|
123
|
-
* title: 'Red pen',
|
|
124
|
-
* color: 'var(--ck-highlight-pen-red)',
|
|
125
|
-
* type: 'pen'
|
|
126
|
-
* },
|
|
127
|
-
* {
|
|
128
|
-
* model: 'greenPen',
|
|
129
|
-
* class: 'pen-green',
|
|
130
|
-
* title: 'Green pen',
|
|
131
|
-
* color: 'var(--ck-highlight-pen-green)',
|
|
132
|
-
* type: 'pen'
|
|
133
|
-
* }
|
|
134
|
-
* ]
|
|
135
|
-
*
|
|
136
|
-
* There are two types of highlighters available:
|
|
137
|
-
*
|
|
138
|
-
* * `'marker'` – Rendered as a `<mark>` element, styled with the `background-color`.
|
|
139
|
-
* * `'pen'` – Rendered as a `<mark>` element, styled with the font `color`.
|
|
140
|
-
*
|
|
141
|
-
* **Note**: The highlight feature provides a stylesheet with the CSS classes and corresponding colors defined
|
|
142
|
-
* as CSS variables.
|
|
143
|
-
*
|
|
144
|
-
* :root {
|
|
145
|
-
* --ck-highlight-marker-yellow: #fdfd77;
|
|
146
|
-
* --ck-highlight-marker-green: #63f963;
|
|
147
|
-
* --ck-highlight-marker-pink: #fc7999;
|
|
148
|
-
* --ck-highlight-marker-blue: #72cdfd;
|
|
149
|
-
* --ck-highlight-pen-red: #e91313;
|
|
150
|
-
* --ck-highlight-pen-green: #118800;
|
|
151
|
-
* }
|
|
152
|
-
*
|
|
153
|
-
* .marker-yellow { ... }
|
|
154
|
-
* .marker-green { ... }
|
|
155
|
-
* .marker-pink { ... }
|
|
156
|
-
* .marker-blue { ... }
|
|
157
|
-
* .pen-red { ... }
|
|
158
|
-
* .pen-green { ... }
|
|
159
|
-
*
|
|
160
|
-
* It is possible to define the `color` property directly as `rgba(R, G, B, A)`,
|
|
161
|
-
* `#RRGGBB[AA]` or `hsla(H, S, L, A)`. In such situation, the color will **only** apply to the UI of
|
|
162
|
-
* the editor and the `<mark>` elements in the content must be styled by custom classes provided by
|
|
163
|
-
* a dedicated stylesheet.
|
|
164
|
-
*
|
|
165
|
-
* **Note**: It is recommended for the `color` property to correspond to the class in the content
|
|
166
|
-
* stylesheet because it represents the highlighter in the user interface of the editor.
|
|
167
|
-
*
|
|
168
|
-
* ClassicEditor
|
|
169
|
-
* .create( editorElement, {
|
|
170
|
-
* highlight: {
|
|
171
|
-
* options: [
|
|
172
|
-
* {
|
|
173
|
-
* model: 'pinkMarker',
|
|
174
|
-
* class: 'marker-pink',
|
|
175
|
-
* title: 'Pink Marker',
|
|
176
|
-
* color: 'var(--ck-highlight-marker-pink)',
|
|
177
|
-
* type: 'marker'
|
|
178
|
-
* },
|
|
179
|
-
* {
|
|
180
|
-
* model: 'redPen',
|
|
181
|
-
* class: 'pen-red',
|
|
182
|
-
* title: 'Red Pen',
|
|
183
|
-
* color: 'var(--ck-highlight-pen-red)',
|
|
184
|
-
* type: 'pen'
|
|
185
|
-
* },
|
|
186
|
-
* ]
|
|
187
|
-
* }
|
|
188
|
-
* } )
|
|
189
|
-
* .then( ... )
|
|
190
|
-
* .catch( ... );
|
|
191
|
-
*
|
|
192
|
-
* @member {Array.<module:highlight/highlight~HighlightOption>} module:highlight/highlight~HighlightConfig#options
|
|
193
|
-
*/
|
package/src/highlightcommand.js
CHANGED
|
@@ -1,111 +1,91 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Copyright (c) 2003-
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* @module highlight/highlightcommand
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
8
|
import { Command } from 'ckeditor5/src/core';
|
|
11
|
-
|
|
12
9
|
/**
|
|
13
10
|
* The highlight command. It is used by the {@link module:highlight/highlightediting~HighlightEditing highlight feature}
|
|
14
11
|
* to apply the text highlighting.
|
|
15
12
|
*
|
|
16
|
-
*
|
|
13
|
+
* ```ts
|
|
14
|
+
* editor.execute( 'highlight', { value: 'greenMarker' } );
|
|
15
|
+
* ```
|
|
17
16
|
*
|
|
18
17
|
* **Note**: Executing the command without a value removes the attribute from the model. If the selection is collapsed
|
|
19
18
|
* inside a text with the highlight attribute, the command will remove the attribute from the entire range
|
|
20
19
|
* of that text.
|
|
21
|
-
*
|
|
22
|
-
* @extends module:core/command~Command
|
|
23
20
|
*/
|
|
24
21
|
export default class HighlightCommand extends Command {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
} else if ( highlighter ) {
|
|
96
|
-
writer.setSelectionAttribute( 'highlight', highlighter );
|
|
97
|
-
}
|
|
98
|
-
} else {
|
|
99
|
-
const ranges = model.schema.getValidRanges( selection.getRanges(), 'highlight' );
|
|
100
|
-
|
|
101
|
-
for ( const range of ranges ) {
|
|
102
|
-
if ( highlighter ) {
|
|
103
|
-
writer.setAttribute( 'highlight', highlighter, range );
|
|
104
|
-
} else {
|
|
105
|
-
writer.removeAttribute( 'highlight', range );
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
} );
|
|
110
|
-
}
|
|
22
|
+
/**
|
|
23
|
+
* @inheritDoc
|
|
24
|
+
*/
|
|
25
|
+
refresh() {
|
|
26
|
+
const model = this.editor.model;
|
|
27
|
+
const doc = model.document;
|
|
28
|
+
this.value = doc.selection.getAttribute('highlight');
|
|
29
|
+
this.isEnabled = model.schema.checkAttributeInSelection(doc.selection, 'highlight');
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Executes the command.
|
|
33
|
+
*
|
|
34
|
+
* @param options Options for the executed command.
|
|
35
|
+
* @param options.value The value to apply.
|
|
36
|
+
*
|
|
37
|
+
* @fires execute
|
|
38
|
+
*/
|
|
39
|
+
execute(options = {}) {
|
|
40
|
+
const model = this.editor.model;
|
|
41
|
+
const document = model.document;
|
|
42
|
+
const selection = document.selection;
|
|
43
|
+
const highlighter = options.value;
|
|
44
|
+
model.change(writer => {
|
|
45
|
+
if (selection.isCollapsed) {
|
|
46
|
+
const position = selection.getFirstPosition();
|
|
47
|
+
// When selection is inside text with `highlight` attribute.
|
|
48
|
+
if (selection.hasAttribute('highlight')) {
|
|
49
|
+
// Find the full highlighted range.
|
|
50
|
+
const isSameHighlight = (value) => {
|
|
51
|
+
return value.item.hasAttribute('highlight') && value.item.getAttribute('highlight') === this.value;
|
|
52
|
+
};
|
|
53
|
+
const highlightStart = position.getLastMatchingPosition(isSameHighlight, { direction: 'backward' });
|
|
54
|
+
const highlightEnd = position.getLastMatchingPosition(isSameHighlight);
|
|
55
|
+
const highlightRange = writer.createRange(highlightStart, highlightEnd);
|
|
56
|
+
// Then depending on current value...
|
|
57
|
+
if (!highlighter || this.value === highlighter) {
|
|
58
|
+
// ...remove attribute when passing highlighter different then current or executing "eraser".
|
|
59
|
+
// If we're at the end of the highlighted range, we don't want to remove highlight of the range.
|
|
60
|
+
if (!position.isEqual(highlightEnd)) {
|
|
61
|
+
writer.removeAttribute('highlight', highlightRange);
|
|
62
|
+
}
|
|
63
|
+
writer.removeSelectionAttribute('highlight');
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
// ...update `highlight` value.
|
|
67
|
+
// If we're at the end of the highlighted range, we don't want to change the highlight of the range.
|
|
68
|
+
if (!position.isEqual(highlightEnd)) {
|
|
69
|
+
writer.setAttribute('highlight', highlighter, highlightRange);
|
|
70
|
+
}
|
|
71
|
+
writer.setSelectionAttribute('highlight', highlighter);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
else if (highlighter) {
|
|
75
|
+
writer.setSelectionAttribute('highlight', highlighter);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
const ranges = model.schema.getValidRanges(selection.getRanges(), 'highlight');
|
|
80
|
+
for (const range of ranges) {
|
|
81
|
+
if (highlighter) {
|
|
82
|
+
writer.setAttribute('highlight', highlighter, range);
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
writer.removeAttribute('highlight', range);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
}
|
|
111
91
|
}
|
package/src/highlightediting.js
CHANGED
|
@@ -1,124 +1,109 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Copyright (c) 2003-
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* @module highlight/highlightediting
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
8
|
import { Plugin } from 'ckeditor5/src/core';
|
|
11
|
-
|
|
12
9
|
import HighlightCommand from './highlightcommand';
|
|
13
|
-
|
|
14
10
|
/**
|
|
15
11
|
* The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
|
|
16
12
|
* attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
|
|
17
13
|
* as a `<mark>` element with a `class` attribute (`<mark class="marker-green">...</mark>`) depending
|
|
18
14
|
* on the {@link module:highlight/highlight~HighlightConfig configuration}.
|
|
19
|
-
*
|
|
20
|
-
* @extends module:core/plugin~Plugin
|
|
21
15
|
*/
|
|
22
16
|
export default class HighlightEditing extends Plugin {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
const options = editor.config.get( 'highlight.options' );
|
|
94
|
-
|
|
95
|
-
// Set-up the two-way conversion.
|
|
96
|
-
editor.conversion.attributeToElement( _buildDefinition( options ) );
|
|
97
|
-
|
|
98
|
-
editor.commands.add( 'highlight', new HighlightCommand( editor ) );
|
|
99
|
-
}
|
|
17
|
+
/**
|
|
18
|
+
* @inheritDoc
|
|
19
|
+
*/
|
|
20
|
+
static get pluginName() {
|
|
21
|
+
return 'HighlightEditing';
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* @inheritDoc
|
|
25
|
+
*/
|
|
26
|
+
constructor(editor) {
|
|
27
|
+
super(editor);
|
|
28
|
+
editor.config.define('highlight', {
|
|
29
|
+
options: [
|
|
30
|
+
{
|
|
31
|
+
model: 'yellowMarker',
|
|
32
|
+
class: 'marker-yellow',
|
|
33
|
+
title: 'Yellow marker',
|
|
34
|
+
color: 'var(--ck-highlight-marker-yellow)',
|
|
35
|
+
type: 'marker'
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
model: 'greenMarker',
|
|
39
|
+
class: 'marker-green',
|
|
40
|
+
title: 'Green marker',
|
|
41
|
+
color: 'var(--ck-highlight-marker-green)',
|
|
42
|
+
type: 'marker'
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
model: 'pinkMarker',
|
|
46
|
+
class: 'marker-pink',
|
|
47
|
+
title: 'Pink marker',
|
|
48
|
+
color: 'var(--ck-highlight-marker-pink)',
|
|
49
|
+
type: 'marker'
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
model: 'blueMarker',
|
|
53
|
+
class: 'marker-blue',
|
|
54
|
+
title: 'Blue marker',
|
|
55
|
+
color: 'var(--ck-highlight-marker-blue)',
|
|
56
|
+
type: 'marker'
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
model: 'redPen',
|
|
60
|
+
class: 'pen-red',
|
|
61
|
+
title: 'Red pen',
|
|
62
|
+
color: 'var(--ck-highlight-pen-red)',
|
|
63
|
+
type: 'pen'
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
model: 'greenPen',
|
|
67
|
+
class: 'pen-green',
|
|
68
|
+
title: 'Green pen',
|
|
69
|
+
color: 'var(--ck-highlight-pen-green)',
|
|
70
|
+
type: 'pen'
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* @inheritDoc
|
|
77
|
+
*/
|
|
78
|
+
init() {
|
|
79
|
+
const editor = this.editor;
|
|
80
|
+
// Allow highlight attribute on text nodes.
|
|
81
|
+
editor.model.schema.extend('$text', { allowAttributes: 'highlight' });
|
|
82
|
+
const options = editor.config.get('highlight.options');
|
|
83
|
+
// Set-up the two-way conversion.
|
|
84
|
+
editor.conversion.attributeToElement(_buildDefinition(options));
|
|
85
|
+
editor.commands.add('highlight', new HighlightCommand(editor));
|
|
86
|
+
}
|
|
100
87
|
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
function _buildDefinition(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
return definition;
|
|
88
|
+
/**
|
|
89
|
+
* Converts the options array to a converter definition.
|
|
90
|
+
*
|
|
91
|
+
* @param options An array with configured options.
|
|
92
|
+
*/
|
|
93
|
+
function _buildDefinition(options) {
|
|
94
|
+
const definition = {
|
|
95
|
+
model: {
|
|
96
|
+
key: 'highlight',
|
|
97
|
+
values: []
|
|
98
|
+
},
|
|
99
|
+
view: {}
|
|
100
|
+
};
|
|
101
|
+
for (const option of options) {
|
|
102
|
+
definition.model.values.push(option.model);
|
|
103
|
+
definition.view[option.model] = {
|
|
104
|
+
name: 'mark',
|
|
105
|
+
classes: option.class
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
return definition;
|
|
124
109
|
}
|
package/src/highlightui.js
CHANGED
|
@@ -1,20 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Copyright (c) 2003-
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* @module highlight/highlightui
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
8
|
import { Plugin, icons } from 'ckeditor5/src/core';
|
|
11
9
|
import { ButtonView, SplitButtonView, ToolbarSeparatorView, createDropdown, addToolbarToDropdown } from 'ckeditor5/src/ui';
|
|
12
|
-
|
|
13
10
|
import markerIcon from './../theme/icons/marker.svg';
|
|
14
11
|
import penIcon from './../theme/icons/pen.svg';
|
|
15
|
-
|
|
16
12
|
import './../theme/highlight.css';
|
|
17
|
-
|
|
18
13
|
/**
|
|
19
14
|
* The default highlight UI plugin. It introduces:
|
|
20
15
|
*
|
|
@@ -32,234 +27,190 @@ import './../theme/highlight.css';
|
|
|
32
27
|
*
|
|
33
28
|
* See the {@link module:highlight/highlight~HighlightConfig#options configuration} to learn more
|
|
34
29
|
* about the defaults.
|
|
35
|
-
*
|
|
36
|
-
* @extends module:core/plugin~Plugin
|
|
37
30
|
*/
|
|
38
31
|
export default class HighlightUI extends Plugin {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
this.listenTo( buttonView, 'execute', () => {
|
|
211
|
-
dropdownView.buttonView.set( { lastExecuted: option.model } );
|
|
212
|
-
} );
|
|
213
|
-
|
|
214
|
-
return buttonView;
|
|
215
|
-
} );
|
|
216
|
-
|
|
217
|
-
// Make toolbar button enabled when any button in dropdown is enabled before adding separator and eraser.
|
|
218
|
-
dropdownView.bind( 'isEnabled' ).toMany( buttons, 'isEnabled', ( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled ) );
|
|
219
|
-
|
|
220
|
-
// Add separator and eraser buttons to dropdown.
|
|
221
|
-
buttons.push( new ToolbarSeparatorView() );
|
|
222
|
-
buttons.push( componentFactory.create( 'removeHighlight' ) );
|
|
223
|
-
|
|
224
|
-
addToolbarToDropdown( dropdownView, buttons, { enableActiveItemFocusOnDropdownOpen: true } );
|
|
225
|
-
bindToolbarIconStyleToActiveColor( dropdownView );
|
|
226
|
-
|
|
227
|
-
dropdownView.toolbarView.ariaLabel = t( 'Text highlight toolbar' );
|
|
228
|
-
|
|
229
|
-
// Execute current action from dropdown's split button action button.
|
|
230
|
-
splitButtonView.on( 'execute', () => {
|
|
231
|
-
editor.execute( 'highlight', { value: splitButtonView.commandValue } );
|
|
232
|
-
} );
|
|
233
|
-
|
|
234
|
-
// Focus the editable after executing the command.
|
|
235
|
-
// It overrides a default behaviour where the focus is moved to the dropdown button (#12125).
|
|
236
|
-
this.listenTo( dropdownView, 'execute', () => {
|
|
237
|
-
editor.editing.view.focus();
|
|
238
|
-
} );
|
|
239
|
-
|
|
240
|
-
// Returns active highlighter option depending on current command value.
|
|
241
|
-
// If current is not set or it is the same as last execute this method will return the option key (like icon or color)
|
|
242
|
-
// of last executed highlighter. Otherwise it will return option key for current one.
|
|
243
|
-
function getActiveOption( current, key ) {
|
|
244
|
-
const whichHighlighter = !current ||
|
|
245
|
-
current === splitButtonView.lastExecuted ? splitButtonView.lastExecuted : current;
|
|
246
|
-
|
|
247
|
-
return optionsMap[ whichHighlighter ][ key ];
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
return dropdownView;
|
|
251
|
-
} );
|
|
252
|
-
}
|
|
32
|
+
/**
|
|
33
|
+
* Returns the localized option titles provided by the plugin.
|
|
34
|
+
*
|
|
35
|
+
* The following localized titles corresponding with default
|
|
36
|
+
* {@link module:highlight/highlight~HighlightConfig#options} are available:
|
|
37
|
+
*
|
|
38
|
+
* * `'Yellow marker'`,
|
|
39
|
+
* * `'Green marker'`,
|
|
40
|
+
* * `'Pink marker'`,
|
|
41
|
+
* * `'Blue marker'`,
|
|
42
|
+
* * `'Red pen'`,
|
|
43
|
+
* * `'Green pen'`.
|
|
44
|
+
*/
|
|
45
|
+
get localizedOptionTitles() {
|
|
46
|
+
const t = this.editor.t;
|
|
47
|
+
return {
|
|
48
|
+
'Yellow marker': t('Yellow marker'),
|
|
49
|
+
'Green marker': t('Green marker'),
|
|
50
|
+
'Pink marker': t('Pink marker'),
|
|
51
|
+
'Blue marker': t('Blue marker'),
|
|
52
|
+
'Red pen': t('Red pen'),
|
|
53
|
+
'Green pen': t('Green pen')
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* @inheritDoc
|
|
58
|
+
*/
|
|
59
|
+
static get pluginName() {
|
|
60
|
+
return 'HighlightUI';
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* @inheritDoc
|
|
64
|
+
*/
|
|
65
|
+
init() {
|
|
66
|
+
const options = this.editor.config.get('highlight.options');
|
|
67
|
+
for (const option of options) {
|
|
68
|
+
this._addHighlighterButton(option);
|
|
69
|
+
}
|
|
70
|
+
this._addRemoveHighlightButton();
|
|
71
|
+
this._addDropdown(options);
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Creates the "Remove highlight" button.
|
|
75
|
+
*/
|
|
76
|
+
_addRemoveHighlightButton() {
|
|
77
|
+
const t = this.editor.t;
|
|
78
|
+
const command = this.editor.commands.get('highlight');
|
|
79
|
+
this._addButton('removeHighlight', t('Remove highlight'), icons.eraser, null, button => {
|
|
80
|
+
button.bind('isEnabled').to(command, 'isEnabled');
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Creates a toolbar button from the provided highlight option.
|
|
85
|
+
*/
|
|
86
|
+
_addHighlighterButton(option) {
|
|
87
|
+
const command = this.editor.commands.get('highlight');
|
|
88
|
+
// TODO: change naming
|
|
89
|
+
this._addButton('highlight:' + option.model, option.title, getIconForType(option.type), option.model, decorateHighlightButton);
|
|
90
|
+
function decorateHighlightButton(button) {
|
|
91
|
+
button.bind('isEnabled').to(command, 'isEnabled');
|
|
92
|
+
button.bind('isOn').to(command, 'value', value => value === option.model);
|
|
93
|
+
button.iconView.fillColor = option.color;
|
|
94
|
+
button.isToggleable = true;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Internal method for creating highlight buttons.
|
|
99
|
+
*
|
|
100
|
+
* @param name The name of the button.
|
|
101
|
+
* @param label The label for the button.
|
|
102
|
+
* @param icon The button icon.
|
|
103
|
+
* @param value The `value` property passed to the executed command.
|
|
104
|
+
* @param decorateButton A callback getting ButtonView instance so that it can be further customized.
|
|
105
|
+
*/
|
|
106
|
+
_addButton(name, label, icon, value, decorateButton) {
|
|
107
|
+
const editor = this.editor;
|
|
108
|
+
editor.ui.componentFactory.add(name, locale => {
|
|
109
|
+
const buttonView = new ButtonView(locale);
|
|
110
|
+
const localized = this.localizedOptionTitles[label] ? this.localizedOptionTitles[label] : label;
|
|
111
|
+
buttonView.set({
|
|
112
|
+
label: localized,
|
|
113
|
+
icon,
|
|
114
|
+
tooltip: true
|
|
115
|
+
});
|
|
116
|
+
buttonView.on('execute', () => {
|
|
117
|
+
editor.execute('highlight', { value });
|
|
118
|
+
editor.editing.view.focus();
|
|
119
|
+
});
|
|
120
|
+
// Add additional behavior for buttonView.
|
|
121
|
+
decorateButton(buttonView);
|
|
122
|
+
return buttonView;
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Creates the split button dropdown UI from the provided highlight options.
|
|
127
|
+
*/
|
|
128
|
+
_addDropdown(options) {
|
|
129
|
+
const editor = this.editor;
|
|
130
|
+
const t = editor.t;
|
|
131
|
+
const componentFactory = editor.ui.componentFactory;
|
|
132
|
+
const startingHighlighter = options[0];
|
|
133
|
+
const optionsMap = options.reduce((retVal, option) => {
|
|
134
|
+
retVal[option.model] = option;
|
|
135
|
+
return retVal;
|
|
136
|
+
}, {});
|
|
137
|
+
componentFactory.add('highlight', locale => {
|
|
138
|
+
const command = editor.commands.get('highlight');
|
|
139
|
+
const dropdownView = createDropdown(locale, SplitButtonView);
|
|
140
|
+
const splitButtonView = dropdownView.buttonView;
|
|
141
|
+
splitButtonView.set({
|
|
142
|
+
label: t('Highlight'),
|
|
143
|
+
tooltip: true,
|
|
144
|
+
// Holds last executed highlighter.
|
|
145
|
+
lastExecuted: startingHighlighter.model,
|
|
146
|
+
// Holds current highlighter to execute (might be different then last used).
|
|
147
|
+
commandValue: startingHighlighter.model,
|
|
148
|
+
isToggleable: true
|
|
149
|
+
});
|
|
150
|
+
// Dropdown button changes to selection (command.value):
|
|
151
|
+
// - If selection is in highlight it get active highlight appearance (icon, color) and is activated.
|
|
152
|
+
// - Otherwise it gets appearance (icon, color) of last executed highlight.
|
|
153
|
+
splitButtonView.bind('icon').to(command, 'value', value => getIconForType(getActiveOption(value, 'type')));
|
|
154
|
+
splitButtonView.bind('color').to(command, 'value', value => getActiveOption(value, 'color'));
|
|
155
|
+
splitButtonView.bind('commandValue').to(command, 'value', value => getActiveOption(value, 'model'));
|
|
156
|
+
splitButtonView.bind('isOn').to(command, 'value', value => !!value);
|
|
157
|
+
splitButtonView.delegate('execute').to(dropdownView);
|
|
158
|
+
// Create buttons array.
|
|
159
|
+
const buttonsCreator = () => {
|
|
160
|
+
const buttons = options.map(option => {
|
|
161
|
+
// Get existing highlighter button.
|
|
162
|
+
const buttonView = componentFactory.create('highlight:' + option.model);
|
|
163
|
+
// Update lastExecutedHighlight on execute.
|
|
164
|
+
this.listenTo(buttonView, 'execute', () => {
|
|
165
|
+
dropdownView.buttonView.set({ lastExecuted: option.model });
|
|
166
|
+
});
|
|
167
|
+
return buttonView;
|
|
168
|
+
});
|
|
169
|
+
// Add separator and eraser buttons to dropdown.
|
|
170
|
+
buttons.push(new ToolbarSeparatorView());
|
|
171
|
+
buttons.push(componentFactory.create('removeHighlight'));
|
|
172
|
+
return buttons;
|
|
173
|
+
};
|
|
174
|
+
// Make toolbar button enabled when any button in dropdown is enabled before adding separator and eraser.
|
|
175
|
+
dropdownView.bind('isEnabled').to(command, 'isEnabled');
|
|
176
|
+
addToolbarToDropdown(dropdownView, buttonsCreator, {
|
|
177
|
+
enableActiveItemFocusOnDropdownOpen: true,
|
|
178
|
+
ariaLabel: t('Text highlight toolbar')
|
|
179
|
+
});
|
|
180
|
+
bindToolbarIconStyleToActiveColor(dropdownView);
|
|
181
|
+
// Execute current action from dropdown's split button action button.
|
|
182
|
+
splitButtonView.on('execute', () => {
|
|
183
|
+
editor.execute('highlight', { value: splitButtonView.commandValue });
|
|
184
|
+
});
|
|
185
|
+
// Focus the editable after executing the command.
|
|
186
|
+
// It overrides a default behaviour where the focus is moved to the dropdown button (#12125).
|
|
187
|
+
this.listenTo(dropdownView, 'execute', () => {
|
|
188
|
+
editor.editing.view.focus();
|
|
189
|
+
});
|
|
190
|
+
/**
|
|
191
|
+
* Returns active highlighter option depending on current command value.
|
|
192
|
+
* If current is not set or it is the same as last execute this method will return the option key (like icon or color)
|
|
193
|
+
* of last executed highlighter. Otherwise it will return option key for current one.
|
|
194
|
+
*/
|
|
195
|
+
function getActiveOption(current, key) {
|
|
196
|
+
const whichHighlighter = !current ||
|
|
197
|
+
current === splitButtonView.lastExecuted ? splitButtonView.lastExecuted : current;
|
|
198
|
+
return optionsMap[whichHighlighter][key];
|
|
199
|
+
}
|
|
200
|
+
return dropdownView;
|
|
201
|
+
});
|
|
202
|
+
}
|
|
253
203
|
}
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
204
|
+
/**
|
|
205
|
+
* Extends split button icon style to reflect last used button style.
|
|
206
|
+
*/
|
|
207
|
+
function bindToolbarIconStyleToActiveColor(dropdownView) {
|
|
208
|
+
const actionView = dropdownView.buttonView.actionView;
|
|
209
|
+
actionView.iconView.bind('fillColor').to(dropdownView.buttonView, 'color');
|
|
260
210
|
}
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
211
|
+
/**
|
|
212
|
+
* Returns icon for given highlighter type.
|
|
213
|
+
*/
|
|
214
|
+
function getIconForType(type) {
|
|
215
|
+
return type === 'marker' ? markerIcon : penIcon;
|
|
265
216
|
}
|
package/src/index.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @license Copyright (c) 2003-
|
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
3
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* @module highlight
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
8
|
export { default as Highlight } from './highlight';
|
|
11
9
|
export { default as HighlightEditing } from './highlightediting';
|
|
12
10
|
export { default as HighlightUI } from './highlightui';
|
package/theme/highlight.css
CHANGED