/** * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ /* globals window, document, console:false */ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset'; import Mention from '@ckeditor/ckeditor5-mention/src/mention'; 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: data => { const color = data.markerName.split( ':' )[ 2 ]; return { classes: 'highlight ' + color }; } } ); 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-' + marker.name.split( ':' )[ 1 ], 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 viewRange = editing.mapper.toViewRange( marker.getRange() ); return editing.view.domConverter.viewRangeToDom( viewRange ); } } ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ ArticlePluginSet, BalloonToolbar, CustomStackHighlight, Mention ], toolbar: [ 'bold', 'link' ], balloonToolbar: [ 'bold', 'link' ], mention: { feeds: [ { marker: '@', feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ] } ] } } ) .then( editor => { window.editor = editor; editor.model.change( writer => { const root = editor.model.document.getRoot(); [ { id: 1, start: [ 1, 5 ], end: [ 1, 26 ], color: 'yellow' }, { id: 2, start: [ 1, 2 ], end: [ 1, 33 ], color: 'green' }, { id: 3, start: [ 5, 20 ], end: [ 5, 35 ], color: 'blue' }, { id: 4, start: [ 5, 15 ], end: [ 5, 40 ], color: 'pink' }, { id: 5, start: [ 5, 10 ], end: [ 5, 45 ], color: 'yellow' } ].forEach( data => { writer.addMarker( `highlight:${ data.id }:${ data.color }`, { range: writer.createRange( writer.createPositionFromPath( root, data.start ), writer.createPositionFromPath( root, data.end ) ), usingOperation: true } ); } ); } ); } ) .catch( err => { console.error( err.stack ); } );