Content minimap MVP1

packages/ckeditor5-engine/src/index.js

@@ -30,6 +30,7 @@ export { default as TreeWalker } from './model/treewalker';
 export { default as Element } from './model/element';
 
 export { default as DomConverter } from './view/domconverter';
+export { default as Renderer } from './view/renderer';
 export { default as ViewDocument } from './view/document';
 
 export { getFillerOffset } from './view/containerelement';

packages/ckeditor5-minimap/CONTRIBUTING.md

@@ -0,0 +1,4 @@
+Contributing
+============
+
+See the [official contributors' guide to CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html) to learn more.

packages/ckeditor5-minimap/LICENSE.md

@@ -0,0 +1,17 @@
+Software License Agreement
+==========================
+
+**CKEditor 5 Minimap Feature** – https://github.com/ckeditor/ckeditor5-minimap <br>
+Copyright (c) 2003-2021, [CKSource](http://cksource.com) Frederico Knabben. 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](http://cksource.com) Frederico Knabben. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.

packages/ckeditor5-minimap/README.md

@@ -0,0 +1,20 @@
+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://travis-ci.com/ckeditor/ckeditor5)
+
+This package implements the content minimap feature for CKEditor 5.
+
+## Demo
+
+Check out the demo in the [Content minimap feature](https://ckeditor.com/docs/ckeditor5/latest/features/minimap.html) guide.
+
+## Documentation
+
+See the [`@ckeditor/ckeditor5-minimap` package](https://ckeditor.com/docs/ckeditor5/latest/api/minimap.html) page as well as the [Content minimap feature guide](https://ckeditor.com/docs/ckeditor5/latest/features/minimap.html) 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).

packages/ckeditor5-minimap/ckeditor5-metadata.json

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

packages/ckeditor5-minimap/docs/_snippets/features/minimap.js

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window, document */
+
+import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';
+import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
+import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
+import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
+import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
+import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
+import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
+import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
+import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
+import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
+import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
+import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
+import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
+import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
+
+import Minimap from '@ckeditor/ckeditor5-minimap/src/minimap';
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+const config = {
+	plugins: [
+		Alignment,
+		ArticlePluginSet,
+		CloudServices,
+		FontSize,
+		FontFamily,
+		FontColor,
+		FontBackgroundColor,
+		IndentBlock,
+		ImageUpload,
+		ImageResize,
+		TableProperties,
+		TableCellProperties,
+		Subscript,
+		Superscript,
+		PageBreak,
+		CodeBlock,
+		Minimap,
+		EasyImage
+	],
+	toolbar: [
+		'heading', '|',
+		'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', '|',
+		'bold', 'italic', 'blockQuote', '|',
+		'codeBlock',
+		'alignment', '|',
+		'indent', 'outdent', '|',
+		'subscript', 'superscript', '|',
+		'insertTable', 'imageUpload', 'pageBreak', '|',
+		'undo', 'redo'
+	],
+	image: {
+		toolbar: [
+			'imageStyle:inline',
+			'imageStyle:block',
+			'imageStyle:side',
+			'|',
+			'imageTextAlternative',
+			'toggleImageCaption'
+		],
+		styles: [
+			'inline',
+			'block',
+			'side',
+			'alignLeft',
+			'alignRight',
+			{ name: 'margin', title: 'Reset margins', icon: '', className: 'reset-margin' }
+		],
+		resizeUnit: 'px'
+	},
+	table: {
+		contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ],
+		tableToolbar: [ 'bold', 'italic' ]
+	},
+	heading: {
+		options: [
+			{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+			{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
+			{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
+			{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' },
+			{ model: 'heading4', view: 'h5', title: 'Heading 4', class: 'ck-heading_heading4' }
+		]
+	},
+	minimap: {
+		container: document.querySelector( '.minimap-container' ),
+		extraClasses: 'live-snippet formatted'
+	},
+	cloudServices: CS_CONFIG
+};
+
+DecoupledEditor
+	.create( document.querySelector( '#editor' ), config )
+	.then( editor => {
+		window.editor = editor;
+
+		const toolbarContainer = document.querySelector( '#toolbar-container' );
+
+		toolbarContainer.appendChild( editor.ui.view.toolbar.element );
+
+		window.attachTourBalloon( {
+			target: editor.plugins.get( 'Minimap' )._minimapView.element,
+			text: 'Use the minimap for quick navigation',
+			editor,
+			tippyOptions: {
+				placement: 'bottom'
+			}
+		} );
+	} );

packages/ckeditor5-minimap/docs/api/minimap.md

@@ -0,0 +1,34 @@
+---
+category: api-reference
+---
+
+# CKEditor 5 Content Minimap feature
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-minimap.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-minimap)
+
+This package implements the minimap feature for CKEditor 5.
+
+## Demo
+
+Check out the {@link features/minimap#demo demo in the Content Minimap feature} guide.
+
+## Documentation
+
+See the {@link features/minimap Content Minimap feature} guide and the {@link module:minimap/minimap~Minimap} plugin documentation.
+
+## Installation
+
+```
+npm install --save @ckeditor/ckeditor5-minimap
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-minimap.
+
+## External links
+
+* [`@ckeditor/ckeditor5-minimap` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-minimap)
+* [`ckeditor/ckeditor5-minimap` on GitHub](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-minimap)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md)