Merge pull request #499 from ckeditor/t/494

Test: Added a custom stack to the ContextualBalloon manual test. Closes #494.

tests/manual/contextualballoon/contextualballoon.html

@@ -20,4 +20,13 @@
 		margin: 5em auto;
 		max-width: 70%;
 	}
+
+	.highlight {
+		background: yellow;
+	}
+
+	.ck p.custom-view {
+		font-size: 14px;
+		padding: 10px 10px 9px;
+	}
 </style>

tests/manual/contextualballoon/contextualballoon.js

@@ -8,16 +8,95 @@
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import BalloonToolbar from '../../../src/toolbar/balloon/balloontoolbar';
+import ContextualBalloon from '../../../src/panel/balloon/contextualballoon';
+import View from '../../../src/view';
+
+class CustomStackHighlight {
+	static get requires() {
+		return [ ContextualBalloon ];
+	}
+
+	constructor( editor ) {
+		this.editor = editor;
+
+		this._markerToView = new Map();
+	}
+
+	init() {
+		this.editor.conversion.for( 'editingDowncast' ).markerToHighlight( {
+			model: 'highlight',
+			view: () => {
+				return { classes: 'highlight' };
+			}
+		} );
+
+		this.editor.model.document.selection.markers.on( 'add', ( evt, item ) => this._add( item ) );
+		this.editor.model.document.selection.markers.on( 'remove', ( evt, item ) => this._remove( item ) );
+	}
+
+	_add( marker ) {
+		const view = new View();
+
+		view.setTemplate( {
+			tag: 'p',
+			attributes: {
+				class: 'custom-view'
+			},
+			children: [
+				{ text: 'View in separate stack.' }
+			]
+		} );
+
+		this._markerToView.set( marker, view );
+
+		this.editor.plugins.get( ContextualBalloon ).add( {
+			view,
+			stackId: 'custom',
+			position: {
+				target: this._getMarkerDomElement( marker )
+			}
+		} );
+	}
+
+	_remove( marker ) {
+		this.editor.plugins.get( ContextualBalloon ).remove( this._markerToView.get( marker ) );
+		this._markerToView.delete( marker );
+	}
+
+	_getMarkerDomElement( marker ) {
+		const editing = this.editor.editing;
+		const viewElement = Array.from( editing.mapper.markerNameToElements( marker.name ).values() )[ 0 ];
+
+		return editing.view.domConverter.mapViewToDom( viewElement );
+	}
+}
 
-// Finally the editor.
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, BalloonToolbar ],
+		plugins: [ ArticlePluginSet, BalloonToolbar, CustomStackHighlight ],
 		toolbar: [ 'bold', 'link' ],
 		balloonToolbar: [ 'bold', 'link' ]
 	} )
 	.then( editor => {
 		window.editor = editor;
+
+		editor.model.change( writer => {
+			const root = editor.model.document.getRoot();
+
+			[
+				{ id: 1, start: [ 1, 5 ], end: [ 1, 26 ] },
+				{ id: 2, start: [ 5, 5 ], end: [ 5, 26 ] },
+				{ id: 3, start: [ 10, 5 ], end: [ 10, 26 ] }
+			].forEach( data => {
+				writer.addMarker( `highlight:${ data.id }`, {
+					range: writer.createRange(
+						writer.createPositionFromPath( root, data.start ),
+						writer.createPositionFromPath( root, data.end )
+					),
+					usingOperation: true
+				} );
+			} );
+		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );

tests/manual/contextualballoon/contextualballoon.md

@@ -1,4 +1,11 @@
+## Single stack
+
 1. Select some text in the middle of the content - contextual toolbar should show up.
 2. Click link icon in the contextual toolbar - link balloon should open at the position as contextual toolbar.
 3. Close link balloon (Esc press or Cancel button) - contextual toolbar should show up.
 4. Repeat this for backward selection.
+
+## Multiple stacks
+
+1. Select some highlighted text - "View in separate stack." should show up.
+2. Switch stacks by clicking navigation buttons - you should switch between toolbar and custom view.