@ckeditor/ckeditor5-minimap 29.1.0 → 31.1.0

package/build/minimap.js

@@ -2,4 +2,4 @@
  * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  */
-window.CKEditor5=window.CKEditor5||{},window.CKEditor5.minimap=function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=8)}([function(t,e,i){t.exports=i(2)("./src/utils.js")},function(t,e,i){t.exports=i(2)("./src/ui.js")},function(t,e){t.exports=CKEditor5.dll},function(t,e,i){t.exports=i(2)("./src/engine.js")},function(t,e,i){t.exports=i(2)("./src/core.js")},function(t,e,i){var n=i(6),o=i(7);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[t.i,o,""]]);var r={injectType:"singletonStyleTag",attributes:{"data-cke":!0},insert:"head",singleton:!0};n(o,r);t.exports=o.locals||{}},function(t,e,i){"use strict";var n,o=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},r=function(){var t={};return function(e){if(void 0===t[e]){var i=document.querySelector(e);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(t){i=null}t[e]=i}return t[e]}}(),s=[];function a(t){for(var e=-1,i=0;i<s.length;i++)if(s[i].identifier===t){e=i;break}return e}function c(t,e){for(var i={},n=[],o=0;o<t.length;o++){var r=t[o],c=e.base?r[0]+e.base:r[0],l=i[c]||0,d="".concat(c," ").concat(l);i[c]=l+1;var m=a(d),p={css:r[1],media:r[2],sourceMap:r[3]};-1!==m?(s[m].references++,s[m].updater(p)):s.push({identifier:d,updater:f(p,e),references:1}),n.push(d)}return n}function l(t){var e=document.createElement("style"),n=t.attributes||{};if(void 0===n.nonce){var o=i.nc;o&&(n.nonce=o)}if(Object.keys(n).forEach((function(t){e.setAttribute(t,n[t])})),"function"==typeof t.insert)t.insert(e);else{var s=r(t.insert||"head");if(!s)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");s.appendChild(e)}return e}var d,m=(d=[],function(t,e){return d[t]=e,d.filter(Boolean).join("\n")});function p(t,e,i,n){var o=i?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(t.styleSheet)t.styleSheet.cssText=m(e,o);else{var r=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}function h(t,e,i){var n=i.css,o=i.media,r=i.sourceMap;if(o?t.setAttribute("media",o):t.removeAttribute("media"),r&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var u=null,g=0;function f(t,e){var i,n,o;if(e.singleton){var r=g++;i=u||(u=l(e)),n=p.bind(null,i,r,!1),o=p.bind(null,i,r,!0)}else i=l(e),n=h.bind(null,i,e),o=function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(i)};return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else o()}}t.exports=function(t,e){(e=e||{}).singleton||"boolean"==typeof e.singleton||(e.singleton=o());var i=c(t=t||[],e);return function(t){if(t=t||[],"[object Array]"===Object.prototype.toString.call(t)){for(var n=0;n<i.length;n++){var o=a(i[n]);s[o].references--}for(var r=c(t,e),l=0;l<i.length;l++){var d=a(i[l]);0===s[d].references&&(s[d].updater(),s.splice(d,1))}i=r}}}},function(t,e){t.exports=':root{--ck-color-minimap-tracker-background:208,0%,51%;--ck-color-minimap-iframe-outline:#bfbfbf;--ck-color-minimap-iframe-shadow:hsl(0deg 0% 0%/11%);--ck-color-minimap-progress-background:#666}.ck.ck-minimap{position:absolute;user-select:none;background:var(--ck-color-base-background)}.ck.ck-minimap,.ck.ck-minimap iframe{width:100%;height:100%}.ck.ck-minimap iframe{border:0;pointer-events:none;position:relative;outline:1px solid var(--ck-color-minimap-iframe-outline);box-shadow:0 2px 5px var(--ck-color-minimap-iframe-shadow);margin:0}.ck.ck-minimap .ck.ck-minimap__position-tracker{position:absolute;width:100%;top:0;background:hsla(var(--ck-color-minimap-tracker-background),.2);z-index:1;transition:background .1s ease-in-out}.ck.ck-minimap .ck.ck-minimap__position-tracker:hover{background:hsla(var(--ck-color-minimap-tracker-background),.3)}.ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging,.ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:hover{background:hsla(var(--ck-color-minimap-tracker-background),.4)}.ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:after,.ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:hover:after{opacity:1}.ck.ck-minimap .ck.ck-minimap__position-tracker:after{content:attr(data-progress) "%";position:absolute;top:5px;right:5px;background:var(--ck-color-minimap-progress-background);color:var(--ck-color-base-background);border:1px solid var(--ck-color-base-background);padding:2px 4px;font-size:10px;border-radius:3px;opacity:0;transition:opacity .1s ease-in-out}'},function(t,e,i){"use strict";i.r(e),i.d(e,"Minimap",(function(){return f}));var n=i(4),o=i(0),r=i(1);const s=Object(o.toUnit)("px");class a extends r.IframeView{constructor(t,e){super(t);const i=this.bindTemplate;this.set("top",0),this.set("height",0),this._options=e,this.extendTemplate({attributes:{class:["ck-minimap__iframe"],style:{top:i.to("top",t=>s(t)),height:i.to("height",t=>s(t))}}})}render(){return super.render().then(()=>{this._prepareDocument()})}setHeight(t){this.height=t}setTopOffset(t){this.top=t}_prepareDocument(){const t=this.element.contentWindow.document,e=t.adoptNode(this._options.domRootClone),i=this._options.useSimplePreview?"\n\t\t\t.ck.ck-editor__editable_inline img {\n\t\t\t\tfilter: contrast( 0 );\n\t\t\t}\n\n\t\t\tp, li, a, figcaption, span {\n\t\t\t\tbackground: hsl(0, 0%, 80%) !important;\n\t\t\t\tcolor: hsl(0, 0%, 80%) !important;\n\t\t\t}\n\n\t\t\th1, h2, h3, h4 {\n\t\t\t\tbackground: hsl(0, 0%, 60%) !important;\n\t\t\t\tcolor: hsl(0, 0%, 60%) !important;\n\t\t\t}\n\t\t":"",n=`<!DOCTYPE html><html lang="en">\n\t\t\t<head>\n\t\t\t\t<meta charset="utf-8">\n\t\t\t\t<meta name="viewport" content="width=device-width, initial-scale=1">\n\t\t\t\t${this._options.pageStyles.map(t=>"string"==typeof t?`<style>${t}</style>`:`<link rel="stylesheet" type="text/css" href="${t.href}">`).join("\n")}\n\t\t\t\t<style>\n\t\t\t\t\thtml, body {\n\t\t\t\t\t\tmargin: 0 !important;\n\t\t\t\t\t\tpadding: 0 !important;\n\t\t\t\t\t}\n\n\t\t\t\t\thtml {\n\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t}\n\n\t\t\t\t\tbody {\n\t\t\t\t\t\ttransform: scale( ${this._options.scaleRatio} );\n\t\t\t\t\t\ttransform-origin: 0 0;\n\t\t\t\t\t\toverflow: visible;\n\t\t\t\t\t}\n\n\t\t\t\t\t.ck.ck-editor__editable_inline {\n\t\t\t\t\t\tmargin: 0 !important;\n\t\t\t\t\t\tborder-color: transparent !important;\n\t\t\t\t\t\toutline-color: transparent !important;\n\t\t\t\t\t\tbox-shadow: none !important;\n\t\t\t\t\t}\n\n\t\t\t\t\t.ck.ck-content {\n\t\t\t\t\t\tbackground: white;\n\t\t\t\t\t}\n\n\t\t\t\t\t${i}\n\t\t\t\t</style>\n\t\t\t</head>\n\t\t\t<body class="${this._options.extraClasses||""}"></body>\n\t\t</html>`;t.open(),t.write(n),t.close(),t.body.appendChild(e)}}const c=Object(o.toUnit)("px");class l extends r.View{constructor(t){super(t);const e=this.bindTemplate;this.set("height",0),this.set("top",0),this.set("scrollProgress",0),this.set("_isDragging",!1),this.setTemplate({tag:"div",attributes:{class:["ck","ck-minimap__position-tracker",e.if("_isDragging","ck-minimap__position-tracker_dragging")],style:{top:e.to("top",t=>c(t)),height:e.to("height",t=>c(t))},"data-progress":e.to("scrollProgress")},on:{mousedown:e.to(()=>{this._isDragging=!0})}})}render(){super.render(),this.listenTo(o.global.document,"mousemove",(t,e)=>{this._isDragging&&this.fire("drag",e.movementY)},{useCapture:!0}),this.listenTo(o.global.document,"mouseup",()=>{this._isDragging=!1},{useCapture:!0})}setHeight(t){this.height=t}setTopOffset(t){this.top=t}setScrollProgress(t){this.scrollProgress=t}}class d extends r.View{constructor({locale:t,scaleRatio:e,pageStyles:i,extraClasses:n,useSimplePreview:o,domRootClone:r}){super(t);const s=this.bindTemplate;this._positionTrackerView=new l(t),this._positionTrackerView.delegate("drag").to(this),this._scaleRatio=e,this._minimapIframeView=new a(t,{useSimplePreview:o,pageStyles:i,extraClasses:n,scaleRatio:e,domRootClone:r}),this.setTemplate({tag:"div",attributes:{class:["ck","ck-minimap"]},children:[this._positionTrackerView],on:{click:s.to(this._handleMinimapClick.bind(this)),wheel:s.to(this._handleMinimapMouseWheel.bind(this))}})}destroy(){this._minimapIframeView.destroy(),super.destroy()}get height(){return new o.Rect(this.element).height}get scrollHeight(){return Math.max(0,Math.min(this.height,this._minimapIframeView.height)-this._positionTrackerView.height)}render(){super.render(),this._minimapIframeView.render(),this.element.appendChild(this._minimapIframeView.element)}setContentHeight(t){this._minimapIframeView.setHeight(t*this._scaleRatio)}setScrollProgress(t){const e=this._minimapIframeView,i=this._positionTrackerView;if(e.height<this.height)e.setTopOffset(0),i.setTopOffset((e.height-i.height)*t);else{const n=e.height-this.height;e.setTopOffset(-n*t),i.setTopOffset((this.height-i.height)*t)}i.setScrollProgress(Math.round(100*t))}setPositionTrackerHeight(t){this._positionTrackerView.setHeight(t*this._scaleRatio)}_handleMinimapClick(t){const e=this._positionTrackerView;if(t.target===e.element)return;const i=new o.Rect(e.element),n=(t.clientY-i.top-i.height/2)/this._minimapIframeView.height;this.fire("click",n)}_handleMinimapMouseWheel(t){this.fire("drag",t.deltaY*this._scaleRatio)}}var m=i(3);function p(t,e){const i=t.editing.view.document,n=i.getRoot(e),o=new m.DomConverter(i),r=new m.Renderer(o,i.selection),s=t.editing.view.getDomRoot().cloneNode();return o.bindElements(s,n),r.markToSync("children",n),r.markToSync("attributes",n),n.on("change:children",(t,e)=>r.markToSync("children",e)),n.on("change:attributes",(t,e)=>r.markToSync("attributes",e)),n.on("change:text",(t,e)=>r.markToSync("text",e)),r.render(),t.editing.view.on("render",()=>r.render()),t.on("destroy",()=>{o.unbindDomElement(s)}),s}function h(t){return new o.Rect(t===o.global.document.body?o.global.window:t)}function u(t){return t===o.global.document.body?o.global.window:t}class g{static draw(t,e={},i){g._stylesElement||g._injectStyles();const n=o.global.document.createElement("div"),r={top:t.top+"px",left:t.left+"px",width:t.width+"px",height:t.height+"px"};Object.assign(n.style,g._defaultStyles,r,e),n.classList.add("ck-rect-preview"),i&&(n.dataset.name=i),o.global.document.body.appendChild(n),this._domElements.push(n)}static clear(){for(const t of this._domElements)t.remove();this._domElements.length=0}static _injectStyles(){g._stylesElement=o.global.document.createElement("style"),g._stylesElement.innerHTML="\n\t\t\tdiv.ck-rect-preview::after {\n\t\t\t\tcontent: attr(data-name);\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 3px;\n\t\t\t\ttop: 3px;\n\t\t\t\tfont-family: monospace;\n\t\t\t\tbackground: #000;\n\t\t\t\tcolor: #fff;\n\t\t\t\tfont-size: 10px;\n\t\t\t\tpadding: 1px 3px;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t",o.global.document.head.appendChild(g._stylesElement)}}g._defaultStyles={position:"fixed",outlineWidth:"1px",outlineStyle:"solid",outlineColor:"blue",outlineOffset:"-1px",zIndex:999,opacity:.5,pointerEvents:"none"},g._domElements=[],g._stylesElement=null;i(5);class f extends n.Plugin{static get pluginName(){return"Minimap"}init(){const t=this.editor;this._minimapView=null,this._scrollableRootAncestor=null,this.listenTo(t.ui,"ready",this._onUiReady.bind(this))}destroy(){this._minimapView.destroy(),this._minimapView.element.remove()}_onUiReady(){const t=this.editor,e=this._editingRootElement=t.ui.getEditableElement();this._scrollableRootAncestor=function(t){do{if(!(t=t.parentElement))return null;const e=o.global.window.getComputedStyle(t).overflowY;if("auto"===e||"scroll"===e)break}while("BODY"!=t.tagName);return t}(e),e.ownerDocument.body.contains(e)?(this._initializeMinimapView(),this.listenTo(t.editing.view,"render",()=>{this._syncMinimapToEditingRootScrollPosition()}),this._syncMinimapToEditingRootScrollPosition()):t.ui.once("update",this._onUiReady.bind(this))}_initializeMinimapView(){const t=this.editor,e=t.locale,i=t.config.get("minimap.useSimplePreview"),n=t.config.get("minimap.container"),r=this._scrollableRootAncestor,s=h(this._editingRootElement).width,a=h(n).width/s,c=this._minimapView=new d({locale:e,scaleRatio:a,pageStyles:Array.from(o.global.document.styleSheets).map(t=>t.href&&!t.href.startsWith(o.global.window.location.origin)?{href:t.href}:Array.from(t.cssRules).filter(t=>!(t instanceof CSSMediaRule)).map(t=>t.cssText).join(" \n")),extraClasses:t.config.get("minimap.extraClasses"),useSimplePreview:i,domRootClone:p(t)});c.render(),c.listenTo(o.global.document,"scroll",(t,e)=>{if(r===o.global.document.body){if(e.target!==o.global.document)return}else if(e.target!==r)return;this._syncMinimapToEditingRootScrollPosition()},{useCapture:!0,usePassive:!0}),c.listenTo(o.global.window,"resize",()=>{this._syncMinimapToEditingRootScrollPosition()}),c.on("drag",(t,e)=>{let i;i=0===c.scrollHeight?0:e/c.scrollHeight;const n=i*(r.scrollHeight-((s=r)===o.global.document.body?o.global.window.innerHeight:s.clientHeight));var s;u(r).scrollBy(0,Math.round(n))}),c.on("click",(t,e)=>{const i=e*r.scrollHeight;u(r).scrollBy(0,Math.round(i))}),n.appendChild(c.element)}_syncMinimapToEditingRootScrollPosition(){const t=this._editingRootElement,e=this._minimapView;e.setContentHeight(t.offsetHeight);const i=h(t),n=h(this._scrollableRootAncestor);let o;n.contains(i)||i.top>n.top?o=0:(o=(i.top-n.top)/(n.height-i.height),o=Math.max(0,Math.min(o,1))),e.setPositionTrackerHeight(n.getIntersection(i).height),e.setScrollProgress(o)}}}]);
+window.CKEditor5=window.CKEditor5||{},window.CKEditor5.minimap=function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=8)}([function(t,e,i){t.exports=i(2)("./src/utils.js")},function(t,e,i){t.exports=i(2)("./src/ui.js")},function(t,e){t.exports=CKEditor5.dll},function(t,e,i){t.exports=i(2)("./src/engine.js")},function(t,e,i){t.exports=i(2)("./src/core.js")},function(t,e,i){var n=i(6),o=i(7);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[t.i,o,""]]);var r={injectType:"singletonStyleTag",attributes:{"data-cke":!0},insert:"head",singleton:!0};n(o,r);t.exports=o.locals||{}},function(t,e,i){"use strict";var n,o=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},r=function(){var t={};return function(e){if(void 0===t[e]){var i=document.querySelector(e);if(window.HTMLIFrameElement&&i instanceof window.HTMLIFrameElement)try{i=i.contentDocument.head}catch(t){i=null}t[e]=i}return t[e]}}(),s=[];function a(t){for(var e=-1,i=0;i<s.length;i++)if(s[i].identifier===t){e=i;break}return e}function c(t,e){for(var i={},n=[],o=0;o<t.length;o++){var r=t[o],c=e.base?r[0]+e.base:r[0],l=i[c]||0,m="".concat(c," ").concat(l);i[c]=l+1;var h=a(m),d={css:r[1],media:r[2],sourceMap:r[3]};-1!==h?(s[h].references++,s[h].updater(d)):s.push({identifier:m,updater:f(d,e),references:1}),n.push(m)}return n}function l(t){var e=document.createElement("style"),n=t.attributes||{};if(void 0===n.nonce){var o=i.nc;o&&(n.nonce=o)}if(Object.keys(n).forEach((function(t){e.setAttribute(t,n[t])})),"function"==typeof t.insert)t.insert(e);else{var s=r(t.insert||"head");if(!s)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");s.appendChild(e)}return e}var m,h=(m=[],function(t,e){return m[t]=e,m.filter(Boolean).join("\n")});function d(t,e,i,n){var o=i?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(t.styleSheet)t.styleSheet.cssText=h(e,o);else{var r=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}function p(t,e,i){var n=i.css,o=i.media,r=i.sourceMap;if(o?t.setAttribute("media",o):t.removeAttribute("media"),r&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var u=null,g=0;function f(t,e){var i,n,o;if(e.singleton){var r=g++;i=u||(u=l(e)),n=d.bind(null,i,r,!1),o=d.bind(null,i,r,!0)}else i=l(e),n=p.bind(null,i,e),o=function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(i)};return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else o()}}t.exports=function(t,e){(e=e||{}).singleton||"boolean"==typeof e.singleton||(e.singleton=o());var i=c(t=t||[],e);return function(t){if(t=t||[],"[object Array]"===Object.prototype.toString.call(t)){for(var n=0;n<i.length;n++){var o=a(i[n]);s[o].references--}for(var r=c(t,e),l=0;l<i.length;l++){var m=a(i[l]);0===s[m].references&&(s[m].updater(),s.splice(m,1))}i=r}}}},function(t,e){t.exports=':root{--ck-color-minimap-tracker-background:208,0%,51%;--ck-color-minimap-iframe-outline:#bfbfbf;--ck-color-minimap-iframe-shadow:hsl(0deg 0% 0%/11%);--ck-color-minimap-progress-background:#666}.ck.ck-minimap{position:absolute;user-select:none;background:var(--ck-color-base-background)}.ck.ck-minimap,.ck.ck-minimap iframe{width:100%;height:100%}.ck.ck-minimap iframe{border:0;pointer-events:none;position:relative;outline:1px solid var(--ck-color-minimap-iframe-outline);box-shadow:0 2px 5px var(--ck-color-minimap-iframe-shadow);margin:0}.ck.ck-minimap .ck.ck-minimap__position-tracker{position:absolute;width:100%;top:0;background:hsla(var(--ck-color-minimap-tracker-background),.2);z-index:1;transition:background .1s ease-in-out}.ck.ck-minimap .ck.ck-minimap__position-tracker:hover{background:hsla(var(--ck-color-minimap-tracker-background),.3)}.ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging,.ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:hover{background:hsla(var(--ck-color-minimap-tracker-background),.4)}.ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:after,.ck.ck-minimap .ck.ck-minimap__position-tracker.ck-minimap__position-tracker_dragging:hover:after{opacity:1}.ck.ck-minimap .ck.ck-minimap__position-tracker:after{content:attr(data-progress) "%";position:absolute;top:5px;right:5px;background:var(--ck-color-minimap-progress-background);color:var(--ck-color-base-background);border:1px solid var(--ck-color-base-background);padding:2px 4px;font-size:10px;border-radius:3px;opacity:0;transition:opacity .1s ease-in-out}'},function(t,e,i){"use strict";i.r(e),i.d(e,"Minimap",(function(){return g}));var n=i(4),o=i(0),r=i(1);const s=Object(o.toUnit)("px");class a extends r.IframeView{constructor(t,e){super(t);const i=this.bindTemplate;this.set("top",0),this.set("height",0),this._options=e,this.extendTemplate({attributes:{class:["ck-minimap__iframe"],style:{top:i.to("top",t=>s(t)),height:i.to("height",t=>s(t))}}})}render(){return super.render().then(()=>{this._prepareDocument()})}setHeight(t){this.height=t}setTopOffset(t){this.top=t}_prepareDocument(){const t=this.element.contentWindow.document,e=t.adoptNode(this._options.domRootClone),i=this._options.useSimplePreview?"\n\t\t\t.ck.ck-editor__editable_inline img {\n\t\t\t\tfilter: contrast( 0 );\n\t\t\t}\n\n\t\t\tp, li, a, figcaption, span {\n\t\t\t\tbackground: hsl(0, 0%, 80%) !important;\n\t\t\t\tcolor: hsl(0, 0%, 80%) !important;\n\t\t\t}\n\n\t\t\th1, h2, h3, h4 {\n\t\t\t\tbackground: hsl(0, 0%, 60%) !important;\n\t\t\t\tcolor: hsl(0, 0%, 60%) !important;\n\t\t\t}\n\t\t":"",n=`<!DOCTYPE html><html lang="en">\n\t\t\t<head>\n\t\t\t\t<meta charset="utf-8">\n\t\t\t\t<meta name="viewport" content="width=device-width, initial-scale=1">\n\t\t\t\t${this._options.pageStyles.map(t=>"string"==typeof t?`<style>${t}</style>`:`<link rel="stylesheet" type="text/css" href="${t.href}">`).join("\n")}\n\t\t\t\t<style>\n\t\t\t\t\thtml, body {\n\t\t\t\t\t\tmargin: 0 !important;\n\t\t\t\t\t\tpadding: 0 !important;\n\t\t\t\t\t}\n\n\t\t\t\t\thtml {\n\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t}\n\n\t\t\t\t\tbody {\n\t\t\t\t\t\ttransform: scale( ${this._options.scaleRatio} );\n\t\t\t\t\t\ttransform-origin: 0 0;\n\t\t\t\t\t\toverflow: visible;\n\t\t\t\t\t}\n\n\t\t\t\t\t.ck.ck-editor__editable_inline {\n\t\t\t\t\t\tmargin: 0 !important;\n\t\t\t\t\t\tborder-color: transparent !important;\n\t\t\t\t\t\toutline-color: transparent !important;\n\t\t\t\t\t\tbox-shadow: none !important;\n\t\t\t\t\t}\n\n\t\t\t\t\t.ck.ck-content {\n\t\t\t\t\t\tbackground: white;\n\t\t\t\t\t}\n\n\t\t\t\t\t${i}\n\t\t\t\t</style>\n\t\t\t</head>\n\t\t\t<body class="${this._options.extraClasses||""}"></body>\n\t\t</html>`;t.open(),t.write(n),t.close(),t.body.appendChild(e)}}const c=Object(o.toUnit)("px");class l extends r.View{constructor(t){super(t);const e=this.bindTemplate;this.set("height",0),this.set("top",0),this.set("scrollProgress",0),this.set("_isDragging",!1),this.setTemplate({tag:"div",attributes:{class:["ck","ck-minimap__position-tracker",e.if("_isDragging","ck-minimap__position-tracker_dragging")],style:{top:e.to("top",t=>c(t)),height:e.to("height",t=>c(t))},"data-progress":e.to("scrollProgress")},on:{mousedown:e.to(()=>{this._isDragging=!0})}})}render(){super.render(),this.listenTo(o.global.document,"mousemove",(t,e)=>{this._isDragging&&this.fire("drag",e.movementY)},{useCapture:!0}),this.listenTo(o.global.document,"mouseup",()=>{this._isDragging=!1},{useCapture:!0})}setHeight(t){this.height=t}setTopOffset(t){this.top=t}setScrollProgress(t){this.scrollProgress=t}}class m extends r.View{constructor({locale:t,scaleRatio:e,pageStyles:i,extraClasses:n,useSimplePreview:o,domRootClone:r}){super(t);const s=this.bindTemplate;this._positionTrackerView=new l(t),this._positionTrackerView.delegate("drag").to(this),this._scaleRatio=e,this._minimapIframeView=new a(t,{useSimplePreview:o,pageStyles:i,extraClasses:n,scaleRatio:e,domRootClone:r}),this.setTemplate({tag:"div",attributes:{class:["ck","ck-minimap"]},children:[this._positionTrackerView],on:{click:s.to(this._handleMinimapClick.bind(this)),wheel:s.to(this._handleMinimapMouseWheel.bind(this))}})}destroy(){this._minimapIframeView.destroy(),super.destroy()}get height(){return new o.Rect(this.element).height}get scrollHeight(){return Math.max(0,Math.min(this.height,this._minimapIframeView.height)-this._positionTrackerView.height)}render(){super.render(),this._minimapIframeView.render(),this.element.appendChild(this._minimapIframeView.element)}setContentHeight(t){this._minimapIframeView.setHeight(t*this._scaleRatio)}setScrollProgress(t){const e=this._minimapIframeView,i=this._positionTrackerView;if(e.height<this.height)e.setTopOffset(0),i.setTopOffset((e.height-i.height)*t);else{const n=e.height-this.height;e.setTopOffset(-n*t),i.setTopOffset((this.height-i.height)*t)}i.setScrollProgress(Math.round(100*t))}setPositionTrackerHeight(t){this._positionTrackerView.setHeight(t*this._scaleRatio)}_handleMinimapClick(t){const e=this._positionTrackerView;if(t.target===e.element)return;const i=new o.Rect(e.element),n=(t.clientY-i.top-i.height/2)/this._minimapIframeView.height;this.fire("click",n)}_handleMinimapMouseWheel(t){this.fire("drag",t.deltaY*this._scaleRatio)}}var h=i(3);function d(t,e){const i=t.editing.view.document,n=i.getRoot(e),o=new h.DomConverter(i),r=new h.Renderer(o,i.selection),s=t.editing.view.getDomRoot().cloneNode();return o.bindElements(s,n),r.markToSync("children",n),r.markToSync("attributes",n),n.on("change:children",(t,e)=>r.markToSync("children",e)),n.on("change:attributes",(t,e)=>r.markToSync("attributes",e)),n.on("change:text",(t,e)=>r.markToSync("text",e)),r.render(),t.editing.view.on("render",()=>r.render()),t.on("destroy",()=>{o.unbindDomElement(s)}),s}function p(t){return new o.Rect(t===o.global.document.body?o.global.window:t)}function u(t){return t===o.global.document.body?o.global.window:t}i(5);class g extends n.Plugin{static get pluginName(){return"Minimap"}init(){const t=this.editor;this._minimapView=null,this._scrollableRootAncestor=null,this.listenTo(t.ui,"ready",this._onUiReady.bind(this))}destroy(){this._minimapView.destroy(),this._minimapView.element.remove()}_onUiReady(){const t=this.editor,e=this._editingRootElement=t.ui.getEditableElement();this._scrollableRootAncestor=function(t){do{if(!(t=t.parentElement))return null;const e=o.global.window.getComputedStyle(t).overflowY;if("auto"===e||"scroll"===e)break}while("BODY"!=t.tagName);return t}(e),e.ownerDocument.body.contains(e)?(this._initializeMinimapView(),this.listenTo(t.editing.view,"render",()=>{this._syncMinimapToEditingRootScrollPosition()}),this._syncMinimapToEditingRootScrollPosition()):t.ui.once("update",this._onUiReady.bind(this))}_initializeMinimapView(){const t=this.editor,e=t.locale,i=t.config.get("minimap.useSimplePreview"),n=t.config.get("minimap.container"),r=this._scrollableRootAncestor,s=p(this._editingRootElement).width,a=p(n).width/s,c=this._minimapView=new m({locale:e,scaleRatio:a,pageStyles:Array.from(o.global.document.styleSheets).map(t=>t.href&&!t.href.startsWith(o.global.window.location.origin)?{href:t.href}:Array.from(t.cssRules).filter(t=>!(t instanceof CSSMediaRule)).map(t=>t.cssText).join(" \n")),extraClasses:t.config.get("minimap.extraClasses"),useSimplePreview:i,domRootClone:d(t)});c.render(),c.listenTo(o.global.document,"scroll",(t,e)=>{if(r===o.global.document.body){if(e.target!==o.global.document)return}else if(e.target!==r)return;this._syncMinimapToEditingRootScrollPosition()},{useCapture:!0,usePassive:!0}),c.listenTo(o.global.window,"resize",()=>{this._syncMinimapToEditingRootScrollPosition()}),c.on("drag",(t,e)=>{let i;i=0===c.scrollHeight?0:e/c.scrollHeight;const n=i*(r.scrollHeight-((s=r)===o.global.document.body?o.global.window.innerHeight:s.clientHeight));var s;u(r).scrollBy(0,Math.round(n))}),c.on("click",(t,e)=>{const i=e*r.scrollHeight;u(r).scrollBy(0,Math.round(i))}),n.appendChild(c.element)}_syncMinimapToEditingRootScrollPosition(){const t=this._editingRootElement,e=this._minimapView;e.setContentHeight(t.offsetHeight);const i=p(t),n=p(this._scrollableRootAncestor);let o;n.contains(i)||i.top>n.top?o=0:(o=(i.top-n.top)/(n.height-i.height),o=Math.max(0,Math.min(o,1))),e.setPositionTrackerHeight(n.getIntersection(i).height),e.setScrollProgress(o)}}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-minimap",
-  "version": "29.1.0",
+  "version": "31.1.0",
   "description": "Content minimap feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,23 +12,23 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^29.1.0"
+    "ckeditor5": "^31.1.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^29.1.0",
-    "@ckeditor/ckeditor5-basic-styles": "^29.1.0",
-    "@ckeditor/ckeditor5-cloud-services": "^29.1.0",
-    "@ckeditor/ckeditor5-code-block": "^29.1.0",
-    "@ckeditor/ckeditor5-core": "^29.1.0",
-    "@ckeditor/ckeditor5-dev-utils": "^25.3.0",
-    "@ckeditor/ckeditor5-easy-image": "^29.1.0",
-    "@ckeditor/ckeditor5-editor-decoupled": "^29.1.0",
-    "@ckeditor/ckeditor5-font": "^29.1.0",
-    "@ckeditor/ckeditor5-image": "^29.1.0",
-    "@ckeditor/ckeditor5-indent": "^29.1.0",
-    "@ckeditor/ckeditor5-page-break": "^29.1.0",
-    "@ckeditor/ckeditor5-table": "^29.1.0",
-    "@ckeditor/ckeditor5-theme-lark": "^29.1.0",
+    "@ckeditor/ckeditor5-alignment": "^31.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^31.1.0",
+    "@ckeditor/ckeditor5-cloud-services": "^31.1.0",
+    "@ckeditor/ckeditor5-code-block": "^31.1.0",
+    "@ckeditor/ckeditor5-core": "^31.1.0",
+    "@ckeditor/ckeditor5-dev-utils": "^26.0.0",
+    "@ckeditor/ckeditor5-easy-image": "^31.1.0",
+    "@ckeditor/ckeditor5-editor-decoupled": "^31.1.0",
+    "@ckeditor/ckeditor5-font": "^31.1.0",
+    "@ckeditor/ckeditor5-image": "^31.1.0",
+    "@ckeditor/ckeditor5-indent": "^31.1.0",
+    "@ckeditor/ckeditor5-page-break": "^31.1.0",
+    "@ckeditor/ckeditor5-table": "^31.1.0",
+    "@ckeditor/ckeditor5-theme-lark": "^31.1.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },

package/src/minimap.js

@@ -11,8 +11,6 @@ import { Plugin } from 'ckeditor5/src/core';
 import { global } from 'ckeditor5/src/utils';
 import MinimapView from './minimapview';
 import {
-	// @if CK_DEBUG_MINIMAP // RectDrawer,
-
 	cloneEditingViewDomRoot,
 	getClientHeight,
 	getDomElementRect,
@@ -21,6 +19,8 @@ import {
 	findClosestScrollableAncestor
 } from './utils';
 
+// @if CK_DEBUG_MINIMAP // import RectDrawer from '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer';
+
 import '../theme/minimap.css';
 
 /**
@@ -247,7 +247,7 @@ export default class Minimap extends Plugin {
 /**
  * When set to `true`, the minimap will render content as simple boxes instead of replicating the look of the content (default).
  *
- * @member {HTMLElement} module:minimap/minimap~MinimapConfig#useSimplePreview
+ * @member {Boolean} module:minimap/minimap~MinimapConfig#useSimplePreview
  */
 
 /**

package/src/utils.js

@@ -140,124 +140,3 @@ export function findClosestScrollableAncestor( domElement ) {
 
 	return domElement;
 }
-
-/**
- * A helper class that makes it possible to visualize {@link module:utils/dom/rect~Rect rect objects}.
- *
- * TODO: Move this class to shared utils.
- *
- * @protected
- */
-export class RectDrawer {
-	/**
-	 * Draws a rect object on the screen.
-	 *
-	 *		const rect = new Rect( domElement );
-	 *
-	 *		// Simple usage.
-	 *		RectDrawer.draw( rect );
-	 *
-	 *		// With custom styles.
-	 *		RectDrawer.draw( rect, { outlineWidth: '3px', opacity: '.8' } );
-	 *
-	 *		// With custom styles and a name.
-	 *		RectDrawer.draw( rect, { outlineWidth: '3px', opacity: '.8' }, 'Main element' );
-	 *
-	 * **Note**: In most cases, drawing a rect should be preceded by {@link module:minimap/utils~RectDrawer.clear}.
-	 *
-	 * @static
-	 * @param {module:utils/dom/rect~Rect} rect The rect to be drawn.
-	 * @param {Object} [userStyles] An optional object with custom styles for the rect.
-	 * @param {String} [name] The optional name of the rect.
-	 */
-	static draw( rect, userStyles = {}, name ) {
-		if ( !RectDrawer._stylesElement ) {
-			RectDrawer._injectStyles();
-		}
-
-		const element = global.document.createElement( 'div' );
-
-		const rectGeometryStyles = {
-			top: `${ rect.top }px`,
-			left: `${ rect.left }px`,
-			width: `${ rect.width }px`,
-			height: `${ rect.height }px`
-		};
-
-		Object.assign( element.style, RectDrawer._defaultStyles, rectGeometryStyles, userStyles );
-
-		element.classList.add( 'ck-rect-preview' );
-
-		if ( name ) {
-			element.dataset.name = name;
-		}
-
-		global.document.body.appendChild( element );
-
-		this._domElements.push( element );
-	}
-
-	/**
-	 * Clears all previously {@link module:minimap/utils~RectDrawer.draw drawn} rects.
-	 *
-	 * @static
-	 */
-	static clear() {
-		for ( const element of this._domElements ) {
-			element.remove();
-		}
-
-		this._domElements.length = 0;
-	}
-
-	/**
-	 * @private
-	 * @static
-	 */
-	static _injectStyles() {
-		RectDrawer._stylesElement = global.document.createElement( 'style' );
-		RectDrawer._stylesElement.innerHTML = `
-			div.ck-rect-preview::after {
-				content: attr(data-name);
-				position: absolute;
-				left: 3px;
-				top: 3px;
-				font-family: monospace;
-				background: #000;
-				color: #fff;
-				font-size: 10px;
-				padding: 1px 3px;
-				pointer-events: none;
-			}
-		`;
-
-		global.document.head.appendChild( RectDrawer._stylesElement );
-	}
-}
-
-/**
- * @private
- * @member {Object} module:minimap/utils~RectDrawer._defaultStyles
- */
-RectDrawer._defaultStyles = {
-	position: 'fixed',
-	outlineWidth: '1px',
-	outlineStyle: 'solid',
-	outlineColor: 'blue',
-	outlineOffset: '-1px',
-	zIndex: 999,
-	opacity: .5,
-	pointerEvents: 'none'
-};
-
-/**
- * @private
- * @member {Array.<HTMLElement>} module:minimap/utils~RectDrawer._domElements
- */
-RectDrawer._domElements = [];
-
-/**
- * @private
- * @member {HTMLElement|null} module:minimap/utils~RectDrawer._stylesElement
- */
-RectDrawer._stylesElement = null;