|
|
@@ -25,8 +25,10 @@ class CustomStackHighlight {
|
|
|
init() {
|
|
|
this.editor.conversion.for( 'editingDowncast' ).markerToHighlight( {
|
|
|
model: 'highlight',
|
|
|
- view: () => {
|
|
|
- return { classes: 'highlight' };
|
|
|
+ view: data => {
|
|
|
+ const color = data.markerName.split( ':' )[ 2 ];
|
|
|
+
|
|
|
+ return { classes: 'highlight ' + color };
|
|
|
}
|
|
|
} );
|
|
|
|
|
|
@@ -51,7 +53,7 @@ class CustomStackHighlight {
|
|
|
|
|
|
this.editor.plugins.get( ContextualBalloon ).add( {
|
|
|
view,
|
|
|
- stackId: 'custom',
|
|
|
+ stackId: 'custom-' + marker.name.split( ':' )[ 1 ],
|
|
|
position: {
|
|
|
target: this._getMarkerDomElement( marker )
|
|
|
}
|
|
|
@@ -65,9 +67,9 @@ class CustomStackHighlight {
|
|
|
|
|
|
_getMarkerDomElement( marker ) {
|
|
|
const editing = this.editor.editing;
|
|
|
- const viewElement = Array.from( editing.mapper.markerNameToElements( marker.name ).values() )[ 0 ];
|
|
|
+ const viewRange = editing.mapper.toViewRange( marker.getRange() );
|
|
|
|
|
|
- return editing.view.domConverter.mapViewToDom( viewElement );
|
|
|
+ return editing.view.domConverter.viewRangeToDom( viewRange );
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -84,11 +86,14 @@ ClassicEditor
|
|
|
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 ] }
|
|
|
+ { 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' },
|
|
|
+ { id: 6, start: [ 5, 5 ], end: [ 5, 50 ], color: 'green' },
|
|
|
].forEach( data => {
|
|
|
- writer.addMarker( `highlight:${ data.id }`, {
|
|
|
+ writer.addMarker( `highlight:${ data.id }:${ data.color }`, {
|
|
|
range: writer.createRange(
|
|
|
writer.createPositionFromPath( root, data.start ),
|
|
|
writer.createPositionFromPath( root, data.end )
|