diff --git a/tests/manual/contextualballoon/contextualballoon.html b/tests/manual/contextualballoon/contextualballoon.html index a2ce6d65..d49630fb 100644 --- a/tests/manual/contextualballoon/contextualballoon.html +++ b/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; + } diff --git a/tests/manual/contextualballoon/contextualballoon.js b/tests/manual/contextualballoon/contextualballoon.js index a04f3adf..b6e40c01 100644 --- a/tests/manual/contextualballoon/contextualballoon.js +++ b/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 ); diff --git a/tests/manual/contextualballoon/contextualballoon.md b/tests/manual/contextualballoon/contextualballoon.md index 57a75313..990224c6 100644 --- a/tests/manual/contextualballoon/contextualballoon.md +++ b/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.