@ckeditor/ckeditor5-minimap 0.0.0-nightly-20230629.0

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+Changelog
+=========
+
+All changes in the package are documented in the main repository. See: https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.

package/LICENSE.md

@@ -0,0 +1,17 @@
+Software License Agreement
+==========================
+
+**CKEditor 5 Minimap Feature** – https://github.com/ckeditor/ckeditor5-minimap <br>
+Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
+
+Sources of Intellectual Property Included in CKEditor
+-----------------------------------------------------
+
+Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+
+Trademarks
+----------
+
+**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.

package/README.md

@@ -0,0 +1,21 @@
+CKEditor 5 Minimap Feature
+===========================
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-minimap.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-minimap)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
+[![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://app.travis-ci.com/github/ckeditor/ckeditor5)
+![Dependency Status](https://img.shields.io/librariesio/release/npm/@ckeditor/ckeditor5-minimap)
+
+This package implements the content minimap feature for CKEditor 5.
+
+## Demo
+
+Check out the demo in the [content minimap feature guide](https://ckeditor.com/docs/ckeditor5/latest/features/minimap.html#demo).
+
+## Documentation
+
+See the [`@ckeditor/ckeditor5-minimap` package](https://ckeditor.com/docs/ckeditor5/latest/api/minimap.html) page as well as the [Content minimap feature](https://ckeditor.com/docs/ckeditor5/latest/features/minimap.html) guide in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
+
+## License
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).

package/build/minimap.js

@@ -0,0 +1,4 @@
+/*!
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */(()=>{var t={544:(t,e,i)=>{"use strict";i.d(e,{Z:()=>r});var n=i(609),o=i.n(n)()((function(t){return t[1]}));o.push([t.id,':root{--ck-color-minimap-tracker-background:208,0%,51%;--ck-color-minimap-iframe-outline:#bfbfbf;--ck-color-minimap-iframe-shadow:rgba(0,0,0,.11);--ck-color-minimap-progress-background:#666}.ck.ck-minimap{background:var(--ck-color-base-background);position:absolute;user-select:none}.ck.ck-minimap,.ck.ck-minimap iframe{height:100%;width:100%}.ck.ck-minimap iframe{border:0;box-shadow:0 2px 5px var(--ck-color-minimap-iframe-shadow);margin:0;outline:1px solid var(--ck-color-minimap-iframe-outline);pointer-events:none;position:relative}.ck.ck-minimap .ck.ck-minimap__position-tracker{background:hsla(var(--ck-color-minimap-tracker-background),.2);position:absolute;top:0;transition:background .1s ease-in-out;width:100%;z-index:1}.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{background:var(--ck-color-minimap-progress-background);border:1px solid var(--ck-color-base-background);border-radius:3px;color:var(--ck-color-base-background);content:attr(data-progress) "%";font-size:10px;opacity:0;padding:2px 4px;position:absolute;right:5px;top:5px;transition:opacity .1s ease-in-out}',""]);const r=o},609:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i=t(e);return e[2]?"@media ".concat(e[2]," {").concat(i,"}"):i})).join("")},e.i=function(t,i,n){"string"==typeof t&&(t=[[null,t,""]]);var o={};if(n)for(var r=0;r<this.length;r++){var s=this[r][0];null!=s&&(o[s]=!0)}for(var a=0;a<t.length;a++){var c=[].concat(t[a]);n&&o[c[0]]||(i&&(c[2]?c[2]="".concat(i," and ").concat(c[2]):c[2]=i),e.push(c))}},e}},62:(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,h="".concat(c," ").concat(l);i[c]=l+1;var m=a(h),d={css:r[1],media:r[2],sourceMap:r[3]};-1!==m?(s[m].references++,s[m].updater(d)):s.push({identifier:h,updater:f(d,e),references:1}),n.push(h)}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 h,m=(h=[],function(t,e){return h[t]=e,h.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=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 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 g=null,u=0;function f(t,e){var i,n,o;if(e.singleton){var r=u++;i=g||(g=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 h=a(i[l]);0===s[h].references&&(s[h].updater(),s.splice(h,1))}i=r}}}},704:(t,e,i)=>{t.exports=i(79)("./src/core.js")},492:(t,e,i)=>{t.exports=i(79)("./src/engine.js")},273:(t,e,i)=>{t.exports=i(79)("./src/ui.js")},209:(t,e,i)=>{t.exports=i(79)("./src/utils.js")},79:t=>{"use strict";t.exports=CKEditor5.dll}},e={};function i(n){var o=e[n];if(void 0!==o)return o.exports;var r=e[n]={id:n,exports:{}};return t[n](r,r.exports,i),r.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.nc=void 0;var n={};(()=>{"use strict";i.r(n),i.d(n,{Minimap:()=>b});var t=i(704),e=i(209),o=i(273);const r=(0,e.toUnit)("px");class s extends o.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=>r(t))),height:i.to("height",(t=>r(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 a=(0,e.toUnit)("px");class c extends o.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=>a(t))),height:e.to("height",(t=>a(t)))},"data-progress":e.to("scrollProgress")},on:{mousedown:e.to((()=>{this._isDragging=!0}))}})}render(){super.render(),this.listenTo(e.global.document,"mousemove",((t,e)=>{this._isDragging&&this.fire("drag",e.movementY)}),{useCapture:!0}),this.listenTo(e.global.document,"mouseup",(()=>{this._isDragging=!1}),{useCapture:!0})}setHeight(t){this.height=t}setTopOffset(t){this.top=t}setScrollProgress(t){this.scrollProgress=t}}class l extends o.View{constructor({locale:t,scaleRatio:e,pageStyles:i,extraClasses:n,useSimplePreview:o,domRootClone:r}){super(t);const a=this.bindTemplate;this._positionTrackerView=new c(t),this._positionTrackerView.delegate("drag").to(this),this._scaleRatio=e,this._minimapIframeView=new s(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:a.to(this._handleMinimapClick.bind(this)),wheel:a.to(this._handleMinimapMouseWheel.bind(this))}})}destroy(){this._minimapIframeView.destroy(),super.destroy()}get height(){return new e.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 i=this._positionTrackerView;if(t.target===i.element)return;const n=new e.Rect(i.element),o=(t.clientY-n.top-n.height/2)/this._minimapIframeView.height;this.fire("click",o)}_handleMinimapMouseWheel(t){this.fire("drag",t.deltaY*this._scaleRatio)}}var h=i(492);function m(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 d(t){return new e.Rect(t===e.global.document.body?e.global.window:t)}function p(t){return t===e.global.document.body?e.global.window:t}var g=i(62),u=i.n(g),f=i(544),k={injectType:"singletonStyleTag",attributes:{"data-cke":!0},insert:"head",singleton:!0};u()(f.Z,k);f.Z.locals;class b extends t.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,i=this._editingRootElement=t.ui.getEditableElement();this._scrollableRootAncestor=(0,e.findClosestScrollableAncestor)(i),i.ownerDocument.body.contains(i)?(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,i=t.locale,n=t.config.get("minimap.useSimplePreview"),o=t.config.get("minimap.container"),r=this._scrollableRootAncestor,s=d(this._editingRootElement).width,a=d(o).width/s,c=this._minimapView=new l({locale:i,scaleRatio:a,pageStyles:Array.from(e.global.document.styleSheets).map((t=>t.href&&!t.href.startsWith(e.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:n,domRootClone:m(t)});c.render(),c.listenTo(e.global.document,"scroll",((t,i)=>{if(r===e.global.document.body){if(i.target!==e.global.document)return}else if(i.target!==r)return;this._syncMinimapToEditingRootScrollPosition()}),{useCapture:!0,usePassive:!0}),c.listenTo(e.global.window,"resize",(()=>{this._syncMinimapToEditingRootScrollPosition()})),c.on("drag",((t,i)=>{let n;n=0===c.scrollHeight?0:i/c.scrollHeight;const o=n*(r.scrollHeight-((s=r)===e.global.document.body?e.global.window.innerHeight:s.clientHeight));var s;p(r).scrollBy(0,Math.round(o))})),c.on("click",((t,e)=>{const i=e*r.scrollHeight;p(r).scrollBy(0,Math.round(i))})),o.appendChild(c.element)}_syncMinimapToEditingRootScrollPosition(){const t=this._editingRootElement,e=this._minimapView;e.setContentHeight(t.offsetHeight);const i=d(t),n=d(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||{}).minimap=n})();

package/ckeditor5-metadata.json

@@ -0,0 +1,11 @@
+{
+	"plugins": [
+		{
+			"name": "Content minimap",
+			"className": "Minimap",
+			"description": "Renders a minimap that helps users navigate the editor content.",
+			"docs": "features/minimap.html",
+			"path": "src/minimap.js"
+		}
+	]
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@ckeditor/ckeditor5-minimap",
+  "version": "0.0.0-nightly-20230629.0",
+  "description": "Content minimap feature for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin",
+    "ckeditor5-dll"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "ckeditor5": "0.0.0-nightly-20230629.0"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=5.7.1"
+  },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "GPL-2.0-or-later",
+  "homepage": "https://ckeditor.com/ckeditor-5",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5.git",
+    "directory": "packages/ckeditor5-minimap"
+  },
+  "files": [
+    "lang",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "theme",
+    "build",
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
+  ],
+  "types": "src/index.d.ts"
+}

package/src/augmentation.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { MinimapConfig, Minimap } from './index';
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * The configuration of the minimap feature. Introduced by the {@link module:minimap/minimap~Minimap} feature.
+         *
+         * Read more in {@link module:minimap/minimapconfig~MinimapConfig}.
+         */
+        minimap?: MinimapConfig;
+    }
+    interface PluginsMap {
+        [Minimap.pluginName]: Minimap;
+    }
+}

package/src/augmentation.js

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

package/src/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap
+ */
+export { default as Minimap } from './minimap';
+export type { MinimapConfig } from './minimapconfig';
+import './augmentation';

package/src/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap
+ */
+export { default as Minimap } from './minimap';
+import './augmentation';

package/src/minimap.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/minimap
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import '../theme/minimap.css';
+/**
+ * The content minimap feature.
+ */
+export default class Minimap extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "Minimap";
+    /**
+     * The reference to the view of the minimap.
+     */
+    private _minimapView;
+    /**
+     * The DOM element closest to the editable element of the editor as returned
+     * by {@link module:ui/editorui/editorui~EditorUI#getEditableElement}.
+     */
+    private _scrollableRootAncestor;
+    /**
+     * The DOM element closest to the editable element of the editor as returned
+     * by {@link module:ui/editorui/editorui~EditorUI#getEditableElement}.
+     */
+    private _editingRootElement?;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Initializes the minimap view element and starts the layout synchronization
+     * on the editing view `render` event.
+     */
+    private _onUiReady;
+    /**
+     * Initializes the minimap view and attaches listeners that make it responsive to the environment (document)
+     * but also allow the minimap to control the document (scroll position).
+     */
+    private _initializeMinimapView;
+    /**
+     * @private
+     */
+    private _syncMinimapToEditingRootScrollPosition;
+}

package/src/minimap.js

@@ -0,0 +1,154 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/minimap
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import { findClosestScrollableAncestor, global } from 'ckeditor5/src/utils';
+import MinimapView from './minimapview';
+import { cloneEditingViewDomRoot, getClientHeight, getDomElementRect, getPageStyles, getScrollable } from './utils';
+// @if CK_DEBUG_MINIMAP // const RectDrawer = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' ).default;
+import '../theme/minimap.css';
+/**
+ * The content minimap feature.
+ */
+export default class Minimap extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'Minimap';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        this._minimapView = null;
+        this._scrollableRootAncestor = null;
+        this.listenTo(editor.ui, 'ready', this._onUiReady.bind(this));
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        this._minimapView.destroy();
+        this._minimapView.element.remove();
+    }
+    /**
+     * Initializes the minimap view element and starts the layout synchronization
+     * on the editing view `render` event.
+     */
+    _onUiReady() {
+        const editor = this.editor;
+        // TODO: This will not work with the multi-root editor.
+        const editingRootElement = this._editingRootElement = editor.ui.getEditableElement();
+        this._scrollableRootAncestor = findClosestScrollableAncestor(editingRootElement);
+        // DOM root element is not yet attached to the document.
+        if (!editingRootElement.ownerDocument.body.contains(editingRootElement)) {
+            editor.ui.once('update', this._onUiReady.bind(this));
+            return;
+        }
+        this._initializeMinimapView();
+        this.listenTo(editor.editing.view, 'render', () => {
+            this._syncMinimapToEditingRootScrollPosition();
+        });
+        this._syncMinimapToEditingRootScrollPosition();
+    }
+    /**
+     * Initializes the minimap view and attaches listeners that make it responsive to the environment (document)
+     * but also allow the minimap to control the document (scroll position).
+     */
+    _initializeMinimapView() {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const useSimplePreview = editor.config.get('minimap.useSimplePreview');
+        // TODO: Throw an error if there is no `minimap` in config.
+        const minimapContainerElement = editor.config.get('minimap.container');
+        const scrollableRootAncestor = this._scrollableRootAncestor;
+        // TODO: This should be dynamic, the root width could change as the viewport scales if not fixed unit.
+        const editingRootElementWidth = getDomElementRect(this._editingRootElement).width;
+        const minimapContainerWidth = getDomElementRect(minimapContainerElement).width;
+        const minimapScaleRatio = minimapContainerWidth / editingRootElementWidth;
+        const minimapView = this._minimapView = new MinimapView({
+            locale,
+            scaleRatio: minimapScaleRatio,
+            pageStyles: getPageStyles(),
+            extraClasses: editor.config.get('minimap.extraClasses'),
+            useSimplePreview,
+            domRootClone: cloneEditingViewDomRoot(editor)
+        });
+        minimapView.render();
+        // Scrollable ancestor scroll -> minimap position update.
+        minimapView.listenTo(global.document, 'scroll', (evt, data) => {
+            if (scrollableRootAncestor === global.document.body) {
+                if (data.target !== global.document) {
+                    return;
+                }
+            }
+            else if (data.target !== scrollableRootAncestor) {
+                return;
+            }
+            this._syncMinimapToEditingRootScrollPosition();
+        }, { useCapture: true, usePassive: true });
+        // Viewport resize -> minimap position update.
+        minimapView.listenTo(global.window, 'resize', () => {
+            this._syncMinimapToEditingRootScrollPosition();
+        });
+        // Dragging the visible content area -> document (scrollable) position update.
+        minimapView.on('drag', (evt, movementY) => {
+            let movementYPercentage;
+            if (minimapView.scrollHeight === 0) {
+                movementYPercentage = 0;
+            }
+            else {
+                movementYPercentage = movementY / minimapView.scrollHeight;
+            }
+            const absoluteScrollProgress = movementYPercentage *
+                (scrollableRootAncestor.scrollHeight - getClientHeight(scrollableRootAncestor));
+            const scrollable = getScrollable(scrollableRootAncestor);
+            scrollable.scrollBy(0, Math.round(absoluteScrollProgress));
+        });
+        // Clicking the minimap -> center the document (scrollable) to the corresponding position.
+        minimapView.on('click', (evt, percentage) => {
+            const absoluteScrollProgress = percentage * scrollableRootAncestor.scrollHeight;
+            const scrollable = getScrollable(scrollableRootAncestor);
+            scrollable.scrollBy(0, Math.round(absoluteScrollProgress));
+        });
+        minimapContainerElement.appendChild(minimapView.element);
+    }
+    /**
+     * @private
+     */
+    _syncMinimapToEditingRootScrollPosition() {
+        const editingRootElement = this._editingRootElement;
+        const minimapView = this._minimapView;
+        minimapView.setContentHeight(editingRootElement.offsetHeight);
+        const editingRootRect = getDomElementRect(editingRootElement);
+        const scrollableRootAncestorRect = getDomElementRect(this._scrollableRootAncestor);
+        let scrollProgress;
+        // @if CK_DEBUG_MINIMAP // RectDrawer.clear();
+        // @if CK_DEBUG_MINIMAP // RectDrawer.draw( scrollableRootAncestorRect, { outlineColor: 'red' }, 'scrollableRootAncestor' );
+        // @if CK_DEBUG_MINIMAP // RectDrawer.draw( editingRootRect, { outlineColor: 'green' }, 'editingRoot' );
+        // The root is completely visible in the scrollable ancestor.
+        if (scrollableRootAncestorRect.contains(editingRootRect)) {
+            scrollProgress = 0;
+        }
+        else {
+            if (editingRootRect.top > scrollableRootAncestorRect.top) {
+                scrollProgress = 0;
+            }
+            else {
+                scrollProgress = (editingRootRect.top - scrollableRootAncestorRect.top) /
+                    (scrollableRootAncestorRect.height - editingRootRect.height);
+                scrollProgress = Math.max(0, Math.min(scrollProgress, 1));
+            }
+        }
+        // The intersection helps to change the tracker height when there is a lot of padding around the root.
+        // Note: It is **essential** that the height is set first because the progress depends on the correct tracker height.
+        minimapView.setPositionTrackerHeight(scrollableRootAncestorRect.getIntersection(editingRootRect).height);
+        minimapView.setScrollProgress(scrollProgress);
+    }
+}

package/src/minimapconfig.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/minimapconfig
+ */
+/**
+ * The configuration of the {@link module:minimap/minimap~Minimap} feature.
+ *
+ * ```ts
+ * ClassicEditor
+ * 	.create( {
+ * 		minimap: ... // Minimap feature config.
+ * 	} )
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ */
+export interface MinimapConfig {
+    /**
+     * The DOM element container for the minimap.
+     *
+     * **Note**: The container must have a fixed `width` and `overflow: hidden` for the minimap to work correctly.
+     */
+    container: HTMLElement;
+    /**
+     * When set to `true`, the minimap will render content as simple boxes instead of replicating the look of the content (default).
+     */
+    useSimplePreview?: boolean;
+    /**
+     * Extra CSS class (or classes) that will be set internally on the `<body>` element of the `<iframe>` enclosing the minimap.
+     *
+     * By default, the minimap feature will attempt to clone all website styles and re-apply them in the `<iframe>` for the best accuracy.
+     * However, this may not work if the content of your editor inherits the styles from parent containers, resulting in inconsistent
+     * look and imprecise scrolling of the minimap.
+     *
+     * This optional configuration can address these issues by ensuring the same CSS rules apply to the content of the minimap
+     * and the original content of the editor.
+     *
+     * For instance, consider the following DOM structure:
+     *
+     * ```html
+     * <div class="website">
+     * 	<!-- ... -->
+     * 	<div class="styled-container">
+     * 		 <!-- ... -->
+     * 		<div id="editor">
+     * 			<!-- content of the editor -->
+     * 		</div>
+     * 	</div>
+     * 	<!-- ... -->
+     * </div>
+     * ```
+     *
+     * and the following CSS styles:
+     *
+     * ```css
+     * .website p {
+     * 	font-size: 13px;
+     * }
+     *
+     * .styled-container p {
+     * 	color: #ccc;
+     * }
+     * ```
+     *
+     * To maintain the consistency of styling (`font-size` and `color` of paragraphs), you will need to pass the CSS class names
+     * of these containers:
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( document.getElementById( 'editor' ), {
+     * 		minimap: {
+     * 			extraClasses: 'website styled-container'
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     */
+    extraClasses?: string;
+}

package/src/minimapconfig.js

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

package/src/minimapiframeview.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/minimapiframeview
+ */
+import { IframeView } from 'ckeditor5/src/ui';
+import { type Locale } from 'ckeditor5/src/utils';
+import type { MinimapViewOptions } from './minimapview';
+/**
+ * The internal `<iframe>` view that hosts the minimap content.
+ *
+ * @internal
+ */
+export default class MinimapIframeView extends IframeView {
+    /**
+     * The CSS `top` used to scroll the minimap.
+     *
+     * @readonly
+     */
+    top: number;
+    /**
+     * The CSS `height` of the iframe.
+     *
+     * @readonly
+     */
+    height: number;
+    /**
+     * Cached view constructor options for re-use in other methods.
+     */
+    private readonly _options;
+    /**
+     * Creates an instance of the internal minimap iframe.
+     */
+    constructor(locale: Locale, options: MinimapViewOptions);
+    /**
+     * @inheritDoc
+     */
+    render(): Promise<unknown>;
+    /**
+     * Sets the new height of the iframe.
+     */
+    setHeight(newHeight: number): void;
+    /**
+     * Sets the top offset of the iframe to move it around vertically.
+     */
+    setTopOffset(newOffset: number): void;
+    /**
+     * Sets the internal structure of the `<iframe>` readying it to display the
+     * minimap element.
+     */
+    private _prepareDocument;
+}

package/src/minimapiframeview.js

@@ -0,0 +1,130 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/minimapiframeview
+ */
+import { IframeView } from 'ckeditor5/src/ui';
+import { toUnit } from 'ckeditor5/src/utils';
+const toPx = toUnit('px');
+/**
+ * The internal `<iframe>` view that hosts the minimap content.
+ *
+ * @internal
+ */
+export default class MinimapIframeView extends IframeView {
+    /**
+     * Creates an instance of the internal minimap iframe.
+     */
+    constructor(locale, options) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('top', 0);
+        this.set('height', 0);
+        this._options = options;
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-minimap__iframe'
+                ],
+                style: {
+                    top: bind.to('top', top => toPx(top)),
+                    height: bind.to('height', height => toPx(height))
+                }
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        return super.render().then(() => {
+            this._prepareDocument();
+        });
+    }
+    /**
+     * Sets the new height of the iframe.
+     */
+    setHeight(newHeight) {
+        this.height = newHeight;
+    }
+    /**
+     * Sets the top offset of the iframe to move it around vertically.
+     */
+    setTopOffset(newOffset) {
+        this.top = newOffset;
+    }
+    /**
+     * Sets the internal structure of the `<iframe>` readying it to display the
+     * minimap element.
+     */
+    _prepareDocument() {
+        const iframeDocument = this.element.contentWindow.document;
+        const domRootClone = iframeDocument.adoptNode(this._options.domRootClone);
+        const boxStyles = this._options.useSimplePreview ? `
+			.ck.ck-editor__editable_inline img {
+				filter: contrast( 0 );
+			}
+
+			p, li, a, figcaption, span {
+				background: hsl(0, 0%, 80%) !important;
+				color: hsl(0, 0%, 80%) !important;
+			}
+
+			h1, h2, h3, h4 {
+				background: hsl(0, 0%, 60%) !important;
+				color: hsl(0, 0%, 60%) !important;
+			}
+		` : '';
+        const pageStyles = this._options.pageStyles.map(definition => {
+            if (typeof definition === 'string') {
+                return `<style>${definition}</style>`;
+            }
+            else {
+                return `<link rel="stylesheet" type="text/css" href="${definition.href}">`;
+            }
+        }).join('\n');
+        const html = `<!DOCTYPE html><html lang="en">
+			<head>
+				<meta charset="utf-8">
+				<meta name="viewport" content="width=device-width, initial-scale=1">
+				${pageStyles}
+				<style>
+					html, body {
+						margin: 0 !important;
+						padding: 0 !important;
+					}
+
+					html {
+						overflow: hidden;
+					}
+
+					body {
+						transform: scale( ${this._options.scaleRatio} );
+						transform-origin: 0 0;
+						overflow: visible;
+					}
+
+					.ck.ck-editor__editable_inline {
+						margin: 0 !important;
+						border-color: transparent !important;
+						outline-color: transparent !important;
+						box-shadow: none !important;
+					}
+
+					.ck.ck-content {
+						background: white;
+					}
+
+					${boxStyles}
+				</style>
+			</head>
+			<body class="${this._options.extraClasses || ''}"></body>
+		</html>`;
+        iframeDocument.open();
+        iframeDocument.write(html);
+        iframeDocument.close();
+        iframeDocument.body.appendChild(domRootClone);
+    }
+}

package/src/minimappositiontrackerview.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/minimappositiontrackerview
+ */
+import { View } from 'ckeditor5/src/ui';
+import { type Locale } from 'ckeditor5/src/utils';
+/**
+ * The position tracker visualizing the visible subset of the content. Displayed over the minimap.
+ *
+ * @internal
+ */
+export default class MinimapPositionTrackerView extends View {
+    /**
+     * The CSS `height` of the tracker visualizing the subset of the content visible to the user.
+     *
+     * @readonly
+     */
+    height: number;
+    /**
+     * The CSS `top` of the tracker, used to move it vertically over the minimap.
+     *
+     * @readonly
+     */
+    top: number;
+    /**
+     * The scroll progress (in %) displayed over the tracker when being dragged by the user.
+     *
+     * @readonly
+     */
+    scrollProgress: number;
+    /**
+     * Indicates whether the tracker is being dragged by the user (e.g. using the mouse).
+     *
+     * @internal
+     * @readonly
+     */
+    _isDragging: boolean;
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Sets the new height of the tracker to visualize the subset of the content visible to the user.
+     */
+    setHeight(newHeight: number): void;
+    /**
+     * Sets the top offset of the tracker to move it around vertically.
+     */
+    setTopOffset(newOffset: number): void;
+    /**
+     * Sets the scroll progress (in %) to inform the user using a label when the tracker is being dragged.
+     */
+    setScrollProgress(newProgress: number): void;
+}

package/src/minimappositiontrackerview.js

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/minimappositiontrackerview
+ */
+import { View } from 'ckeditor5/src/ui';
+import { toUnit, global } from 'ckeditor5/src/utils';
+const toPx = toUnit('px');
+/**
+ * The position tracker visualizing the visible subset of the content. Displayed over the minimap.
+ *
+ * @internal
+ */
+export default class MinimapPositionTrackerView extends View {
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('height', 0);
+        this.set('top', 0);
+        this.set('scrollProgress', 0);
+        this.set('_isDragging', false);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-minimap__position-tracker',
+                    bind.if('_isDragging', 'ck-minimap__position-tracker_dragging')
+                ],
+                style: {
+                    top: bind.to('top', top => toPx(top)),
+                    height: bind.to('height', height => toPx(height))
+                },
+                'data-progress': bind.to('scrollProgress')
+            },
+            on: {
+                mousedown: bind.to(() => {
+                    this._isDragging = true;
+                })
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.listenTo(global.document, 'mousemove', (evt, data) => {
+            if (!this._isDragging) {
+                return;
+            }
+            this.fire('drag', data.movementY);
+        }, { useCapture: true });
+        this.listenTo(global.document, 'mouseup', () => {
+            this._isDragging = false;
+        }, { useCapture: true });
+    }
+    /**
+     * Sets the new height of the tracker to visualize the subset of the content visible to the user.
+     */
+    setHeight(newHeight) {
+        this.height = newHeight;
+    }
+    /**
+     * Sets the top offset of the tracker to move it around vertically.
+     */
+    setTopOffset(newOffset) {
+        this.top = newOffset;
+    }
+    /**
+     * Sets the scroll progress (in %) to inform the user using a label when the tracker is being dragged.
+     */
+    setScrollProgress(newProgress) {
+        this.scrollProgress = newProgress;
+    }
+}

package/src/minimapview.d.ts

@@ -0,0 +1,109 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/minimapview
+ */
+import { View } from 'ckeditor5/src/ui';
+import { type Locale } from 'ckeditor5/src/utils';
+export type MinimapViewOptions = {
+    domRootClone: HTMLElement;
+    pageStyles: Array<string | {
+        href: string;
+    }>;
+    scaleRatio: number;
+    useSimplePreview?: boolean;
+    extraClasses?: string;
+};
+/**
+ * The main view of the minimap. It renders the original content but scaled down with a tracker element
+ * visualizing the subset of the content visible to the user and allowing interactions (scrolling, dragging).
+ *
+ * @internal
+ */
+export default class MinimapView extends View {
+    /**
+     * An instance of the tracker view displayed over the minimap.
+     */
+    private readonly _positionTrackerView;
+    /**
+     * The scale ratio of the minimap relative to the original editing DOM root with the content.
+     */
+    private readonly _scaleRatio;
+    /**
+     * An instance of the iframe view that hosts the minimap.
+     */
+    private readonly _minimapIframeView;
+    /**
+     * Creates an instance of the minimap view.
+     */
+    constructor({ locale, scaleRatio, pageStyles, extraClasses, useSimplePreview, domRootClone }: {
+        locale: Locale;
+    } & MinimapViewOptions);
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Returns the DOM {@link module:utils/dom/rect~Rect} height of the minimap.
+     */
+    get height(): number;
+    /**
+     * Returns the number of available space (pixels) the position tracker (visible subset of the content) can use to scroll vertically.
+     */
+    get scrollHeight(): number;
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Sets the new height of the minimap (in px) to respond to the changes in the original editing DOM root.
+     *
+     * **Note**:The provided value should be the `offsetHeight` of the original editing DOM root.
+     */
+    setContentHeight(newHeight: number): void;
+    /**
+     * Sets the minimap scroll progress.
+     *
+     * The minimap scroll progress is linked to the original editing DOM root and its scrollable container (ancestor).
+     * Changing the progress will alter the vertical position of the minimap (and its position tracker) and give the user an accurate
+     * overview of the visible document.
+     *
+     * **Note**: The value should be between 0 and 1. 0 when the DOM root has not been scrolled, 1 when the
+     * scrolling has reached the end.
+     */
+    setScrollProgress(newScrollProgress: number): void;
+    /**
+     * Sets the new height of the tracker (in px) to visualize the subset of the content visible to the user.
+     */
+    setPositionTrackerHeight(trackerHeight: number): void;
+    /**
+     * @param data DOM event data
+     */
+    private _handleMinimapClick;
+    /**
+     * @param data DOM event data
+     */
+    private _handleMinimapMouseWheel;
+}
+/**
+ * Fired when the minimap view is clicked.
+ *
+ * @eventName ~MinimapView#click
+ * @param percentage The number between 0 and 1 representing a place in the minimap (its height) that was clicked.
+ */
+export type MinimapClickEvent = {
+    name: 'click';
+    args: [percentage: number];
+};
+/**
+ * Fired when the position tracker is dragged or the minimap is scrolled via mouse wheel.
+ *
+ * @eventName ~MinimapView#drag
+ * @param movementY The vertical movement of the minimap as a result of dragging or scrolling.
+ */
+export type MinimapDragEvent = {
+    name: 'drag';
+    args: [movementY: number];
+};

package/src/minimapview.js

@@ -0,0 +1,137 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/minimapview
+ */
+import { View } from 'ckeditor5/src/ui';
+import { Rect } from 'ckeditor5/src/utils';
+import MinimapIframeView from './minimapiframeview';
+import MinimapPositionTrackerView from './minimappositiontrackerview';
+/**
+ * The main view of the minimap. It renders the original content but scaled down with a tracker element
+ * visualizing the subset of the content visible to the user and allowing interactions (scrolling, dragging).
+ *
+ * @internal
+ */
+export default class MinimapView extends View {
+    /**
+     * Creates an instance of the minimap view.
+     */
+    constructor({ locale, scaleRatio, pageStyles, extraClasses, useSimplePreview, domRootClone }) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this._positionTrackerView = new MinimapPositionTrackerView(locale);
+        this._positionTrackerView.delegate('drag').to(this);
+        this._scaleRatio = scaleRatio;
+        this._minimapIframeView = new MinimapIframeView(locale, {
+            useSimplePreview,
+            pageStyles,
+            extraClasses,
+            scaleRatio,
+            domRootClone
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-minimap'
+                ]
+            },
+            children: [
+                this._positionTrackerView
+            ],
+            on: {
+                click: bind.to(this._handleMinimapClick.bind(this)),
+                wheel: bind.to(this._handleMinimapMouseWheel.bind(this))
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        this._minimapIframeView.destroy();
+        super.destroy();
+    }
+    /**
+     * Returns the DOM {@link module:utils/dom/rect~Rect} height of the minimap.
+     */
+    get height() {
+        return new Rect(this.element).height;
+    }
+    /**
+     * Returns the number of available space (pixels) the position tracker (visible subset of the content) can use to scroll vertically.
+     */
+    get scrollHeight() {
+        return Math.max(0, Math.min(this.height, this._minimapIframeView.height) - this._positionTrackerView.height);
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this._minimapIframeView.render();
+        this.element.appendChild(this._minimapIframeView.element);
+    }
+    /**
+     * Sets the new height of the minimap (in px) to respond to the changes in the original editing DOM root.
+     *
+     * **Note**:The provided value should be the `offsetHeight` of the original editing DOM root.
+     */
+    setContentHeight(newHeight) {
+        this._minimapIframeView.setHeight(newHeight * this._scaleRatio);
+    }
+    /**
+     * Sets the minimap scroll progress.
+     *
+     * The minimap scroll progress is linked to the original editing DOM root and its scrollable container (ancestor).
+     * Changing the progress will alter the vertical position of the minimap (and its position tracker) and give the user an accurate
+     * overview of the visible document.
+     *
+     * **Note**: The value should be between 0 and 1. 0 when the DOM root has not been scrolled, 1 when the
+     * scrolling has reached the end.
+     */
+    setScrollProgress(newScrollProgress) {
+        const iframeView = this._minimapIframeView;
+        const positionTrackerView = this._positionTrackerView;
+        // The scrolling should end when the bottom edge of the iframe touches the bottom edge of the minimap.
+        if (iframeView.height < this.height) {
+            iframeView.setTopOffset(0);
+            positionTrackerView.setTopOffset((iframeView.height - positionTrackerView.height) * newScrollProgress);
+        }
+        else {
+            const totalOffset = iframeView.height - this.height;
+            iframeView.setTopOffset(-totalOffset * newScrollProgress);
+            positionTrackerView.setTopOffset((this.height - positionTrackerView.height) * newScrollProgress);
+        }
+        positionTrackerView.setScrollProgress(Math.round(newScrollProgress * 100));
+    }
+    /**
+     * Sets the new height of the tracker (in px) to visualize the subset of the content visible to the user.
+     */
+    setPositionTrackerHeight(trackerHeight) {
+        this._positionTrackerView.setHeight(trackerHeight * this._scaleRatio);
+    }
+    /**
+     * @param data DOM event data
+     */
+    _handleMinimapClick(data) {
+        const positionTrackerView = this._positionTrackerView;
+        if (data.target === positionTrackerView.element) {
+            return;
+        }
+        const trackerViewRect = new Rect(positionTrackerView.element);
+        const diff = data.clientY - trackerViewRect.top - trackerViewRect.height / 2;
+        const percentage = diff / this._minimapIframeView.height;
+        this.fire('click', percentage);
+    }
+    /**
+     * @param data DOM event data
+     */
+    _handleMinimapMouseWheel(data) {
+        this.fire('drag', data.deltaY * this._scaleRatio);
+    }
+}

package/src/utils.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module minimap/utils
+ */
+import { Rect } from 'ckeditor5/src/utils';
+import type { Editor } from 'ckeditor5/src/core';
+/**
+ * Clones the editing view DOM root by using a dedicated pair of {@link module:engine/view/renderer~Renderer} and
+ * {@link module:engine/view/domconverter~DomConverter}. The DOM root clone updates incrementally to stay in sync with the
+ * source root.
+ *
+ * @internal
+ * @param editor The editor instance the original editing root belongs to.
+ * @param rootName The name of the root to clone.
+ * @returns The editing root DOM clone element.
+ */
+export declare function cloneEditingViewDomRoot(editor: Editor, rootName?: string): HTMLElement;
+/**
+ * Harvests all web page styles, for instance, to allow re-using them in an `<iframe>` preserving the look of the content.
+ *
+ * The returned data format is as follows:
+ *
+ * ```ts
+ * [
+ * 	'p { color: red; ... } h2 { font-size: 2em; ... } ...',
+ * 	'.spacing { padding: 1em; ... }; ...',
+ * 	'...',
+ * 	{ href: 'http://link.to.external.stylesheet' },
+ * 	{ href: '...' }
+ * ]
+ * ```
+ *
+ * **Note**: For stylesheets with `href` different than window origin, an object is returned because
+ * accessing rules of these styles may cause CORS errors (depending on the configuration of the web page).
+ *
+ * @internal
+ */
+export declare function getPageStyles(): Array<string | {
+    href: string;
+}>;
+/**
+ * Gets dimensions rectangle according to passed DOM element. Returns whole window's size for `body` element.
+ *
+ * @internal
+ */
+export declare function getDomElementRect(domElement: HTMLElement): Rect;
+/**
+ * Gets client height according to passed DOM element. Returns window's height for `body` element.
+ *
+ * @internal
+ */
+export declare function getClientHeight(domElement: HTMLElement): number;
+/**
+ * Returns the DOM element itself if it's not a `body` element, whole window otherwise.
+ *
+ * @internal
+ */
+export declare function getScrollable(domElement: HTMLElement): Window | HTMLElement;

package/src/utils.js

@@ -0,0 +1,97 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/* global CSSMediaRule */
+/**
+ * @module minimap/utils
+ */
+import { Rect, global } from 'ckeditor5/src/utils';
+import { DomConverter, Renderer } from 'ckeditor5/src/engine';
+/**
+ * Clones the editing view DOM root by using a dedicated pair of {@link module:engine/view/renderer~Renderer} and
+ * {@link module:engine/view/domconverter~DomConverter}. The DOM root clone updates incrementally to stay in sync with the
+ * source root.
+ *
+ * @internal
+ * @param editor The editor instance the original editing root belongs to.
+ * @param rootName The name of the root to clone.
+ * @returns The editing root DOM clone element.
+ */
+export function cloneEditingViewDomRoot(editor, rootName) {
+    const viewDocument = editor.editing.view.document;
+    const viewRoot = viewDocument.getRoot(rootName);
+    const domConverter = new DomConverter(viewDocument);
+    const renderer = new Renderer(domConverter, viewDocument.selection);
+    const domRootClone = editor.editing.view.getDomRoot().cloneNode();
+    domConverter.bindElements(domRootClone, viewRoot);
+    renderer.markToSync('children', viewRoot);
+    renderer.markToSync('attributes', viewRoot);
+    viewRoot.on('change:children', (evt, node) => renderer.markToSync('children', node));
+    viewRoot.on('change:attributes', (evt, node) => renderer.markToSync('attributes', node));
+    viewRoot.on('change:text', (evt, node) => renderer.markToSync('text', node));
+    renderer.render();
+    editor.editing.view.on('render', () => renderer.render());
+    // TODO: Cleanup after destruction.
+    editor.on('destroy', () => {
+        domConverter.unbindDomElement(domRootClone);
+    });
+    return domRootClone;
+}
+/**
+ * Harvests all web page styles, for instance, to allow re-using them in an `<iframe>` preserving the look of the content.
+ *
+ * The returned data format is as follows:
+ *
+ * ```ts
+ * [
+ * 	'p { color: red; ... } h2 { font-size: 2em; ... } ...',
+ * 	'.spacing { padding: 1em; ... }; ...',
+ * 	'...',
+ * 	{ href: 'http://link.to.external.stylesheet' },
+ * 	{ href: '...' }
+ * ]
+ * ```
+ *
+ * **Note**: For stylesheets with `href` different than window origin, an object is returned because
+ * accessing rules of these styles may cause CORS errors (depending on the configuration of the web page).
+ *
+ * @internal
+ */
+export function getPageStyles() {
+    return Array.from(global.document.styleSheets)
+        .map(styleSheet => {
+        // CORS
+        if (styleSheet.href && !styleSheet.href.startsWith(global.window.location.origin)) {
+            return { href: styleSheet.href };
+        }
+        return Array.from(styleSheet.cssRules)
+            .filter(rule => !(rule instanceof CSSMediaRule))
+            .map(rule => rule.cssText)
+            .join(' \n');
+    });
+}
+/**
+ * Gets dimensions rectangle according to passed DOM element. Returns whole window's size for `body` element.
+ *
+ * @internal
+ */
+export function getDomElementRect(domElement) {
+    return new Rect(domElement === global.document.body ? global.window : domElement);
+}
+/**
+ * Gets client height according to passed DOM element. Returns window's height for `body` element.
+ *
+ * @internal
+ */
+export function getClientHeight(domElement) {
+    return domElement === global.document.body ? global.window.innerHeight : domElement.clientHeight;
+}
+/**
+ * Returns the DOM element itself if it's not a `body` element, whole window otherwise.
+ *
+ * @internal
+ */
+export function getScrollable(domElement) {
+    return domElement === global.document.body ? global.window : domElement;
+}

package/theme/minimap.css

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-color-minimap-tracker-background: 208, 0%, 51%;
+	--ck-color-minimap-iframe-outline: hsl(0deg 0% 75%);
+	--ck-color-minimap-iframe-shadow: hsl(0deg 0% 0% / 11%);
+	--ck-color-minimap-progress-background: hsl(0,0%,40%);
+}
+
+.ck.ck-minimap {
+	position: absolute;
+	user-select: none;
+	background: var(--ck-color-base-background);
+
+	&,
+	& iframe {
+		width: 100%;
+		height: 100%;
+	}
+
+	& 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__position-tracker {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		background: hsla( var(--ck-color-minimap-tracker-background), .2 );
+		z-index: 1;
+		transition: background 100ms ease-in-out;
+
+		&:hover {
+			background:hsla( var(--ck-color-minimap-tracker-background), .3 );
+		}
+
+		&.ck-minimap__position-tracker_dragging,
+		&.ck-minimap__position-tracker_dragging:hover {
+			background:hsla( var(--ck-color-minimap-tracker-background), .4 );
+
+			&::after {
+				opacity: 1;
+			}
+		}
+
+		&::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 100ms ease-in-out;
+		}
+	}
+}
+