|
@@ -17,7 +17,6 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
|
|
|
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
|
|
|
|
|
|
import ContextualBalloon from '../../../src/contextualballoon';
|
|
import ContextualBalloon from '../../../src/contextualballoon';
|
|
|
-import BalloonPanelView from '../../../src/panel/balloon/balloonpanelview';
|
|
|
|
|
import ToolbarView from '../../../src/toolbar/toolbarview';
|
|
import ToolbarView from '../../../src/toolbar/toolbarview';
|
|
|
import ButtonView from '../../../src/button/buttonview';
|
|
import ButtonView from '../../../src/button/buttonview';
|
|
|
import Template from '../../../src/template';
|
|
import Template from '../../../src/template';
|
|
@@ -25,10 +24,6 @@ import View from '../../../src/view';
|
|
|
import clickOutsideHandler from '../../../src/bindings/clickoutsidehandler';
|
|
import clickOutsideHandler from '../../../src/bindings/clickoutsidehandler';
|
|
|
import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
|
|
import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
|
|
|
|
|
|
|
|
-// Create common contextual toolbar.
|
|
|
|
|
-const contextualBalloon = new ContextualBalloon();
|
|
|
|
|
-contextualBalloon.view = new BalloonPanelView();
|
|
|
|
|
-
|
|
|
|
|
// Plugin view which displays toolbar with component to open next
|
|
// Plugin view which displays toolbar with component to open next
|
|
|
// plugin inside and cancel button to close currently visible plugin.
|
|
// plugin inside and cancel button to close currently visible plugin.
|
|
|
class ViewA extends View {
|
|
class ViewA extends View {
|
|
@@ -103,7 +98,13 @@ class ViewA extends View {
|
|
|
|
|
|
|
|
// Generic plugin class.
|
|
// Generic plugin class.
|
|
|
class PluginGeneric extends Plugin {
|
|
class PluginGeneric extends Plugin {
|
|
|
|
|
+ static get requires() {
|
|
|
|
|
+ return [ ContextualBalloon ];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
init() {
|
|
init() {
|
|
|
|
|
+ this.balloon = this.editor.plugins.get( ContextualBalloon );
|
|
|
|
|
+
|
|
|
this._isOpen = false;
|
|
this._isOpen = false;
|
|
|
|
|
|
|
|
this.editor.editing.view.on( 'selectionChange', () => this._hidePanel() );
|
|
this.editor.editing.view.on( 'selectionChange', () => this._hidePanel() );
|
|
@@ -111,13 +112,13 @@ class PluginGeneric extends Plugin {
|
|
|
this.view.bind( 'label' ).to( this );
|
|
this.view.bind( 'label' ).to( this );
|
|
|
|
|
|
|
|
this.view.on( 'cancel', () => {
|
|
this.view.on( 'cancel', () => {
|
|
|
- if ( contextualBalloon.visible.view === this.view ) {
|
|
|
|
|
|
|
+ if ( this.balloon.visible.view === this.view ) {
|
|
|
this._hidePanel();
|
|
this._hidePanel();
|
|
|
}
|
|
}
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
this.editor.keystrokes.set( 'Esc', ( data, cancel ) => {
|
|
this.editor.keystrokes.set( 'Esc', ( data, cancel ) => {
|
|
|
- if ( contextualBalloon.visible.view === this.view ) {
|
|
|
|
|
|
|
+ if ( this.balloon.visible.view === this.view ) {
|
|
|
this._hidePanel();
|
|
this._hidePanel();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -136,7 +137,7 @@ class PluginGeneric extends Plugin {
|
|
|
|
|
|
|
|
clickOutsideHandler( {
|
|
clickOutsideHandler( {
|
|
|
emitter: this.view,
|
|
emitter: this.view,
|
|
|
- activator: () => this._isOpen && contextualBalloon.visible.view === this.view,
|
|
|
|
|
|
|
+ activator: () => this._isOpen && this.balloon.visible.view === this.view,
|
|
|
contextElement: this.view.element,
|
|
contextElement: this.view.element,
|
|
|
callback: () => this._hidePanel()
|
|
callback: () => this._hidePanel()
|
|
|
} );
|
|
} );
|
|
@@ -160,7 +161,7 @@ class PluginGeneric extends Plugin {
|
|
|
|
|
|
|
|
const viewDocument = this.editor.editing.view;
|
|
const viewDocument = this.editor.editing.view;
|
|
|
|
|
|
|
|
- contextualBalloon.add( {
|
|
|
|
|
|
|
+ this.balloon.add( {
|
|
|
view: this.view,
|
|
view: this.view,
|
|
|
position: {
|
|
position: {
|
|
|
target: viewDocument.domConverter.viewRangeToDom( viewDocument.selection.getFirstRange() )
|
|
target: viewDocument.domConverter.viewRangeToDom( viewDocument.selection.getFirstRange() )
|
|
@@ -175,7 +176,7 @@ class PluginGeneric extends Plugin {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- contextualBalloon.remove( this.view );
|
|
|
|
|
|
|
+ this.balloon.remove( this.view );
|
|
|
this._isOpen = false;
|
|
this._isOpen = false;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -221,9 +222,11 @@ class PluginD extends PluginGeneric {
|
|
|
|
|
|
|
|
// Create contextual toolbar.
|
|
// Create contextual toolbar.
|
|
|
function createContextualToolbar( editor ) {
|
|
function createContextualToolbar( editor ) {
|
|
|
|
|
+ const balloon = editor.plugins.get( ContextualBalloon );
|
|
|
const toolbar = new ToolbarView();
|
|
const toolbar = new ToolbarView();
|
|
|
const editingView = editor.editing.view;
|
|
const editingView = editor.editing.view;
|
|
|
const arrowVOffset = 20;
|
|
const arrowVOffset = 20;
|
|
|
|
|
+
|
|
|
const positions = {
|
|
const positions = {
|
|
|
forwardSelection: ( targetRect, balloonRect ) => ( {
|
|
forwardSelection: ( targetRect, balloonRect ) => ( {
|
|
|
top: targetRect.bottom + arrowVOffset,
|
|
top: targetRect.bottom + arrowVOffset,
|
|
@@ -255,7 +258,7 @@ function createContextualToolbar( editor ) {
|
|
|
|
|
|
|
|
isOpen = true;
|
|
isOpen = true;
|
|
|
|
|
|
|
|
- contextualBalloon.add( {
|
|
|
|
|
|
|
+ balloon.add( {
|
|
|
view: toolbar,
|
|
view: toolbar,
|
|
|
position: {
|
|
position: {
|
|
|
target: isBackward ? rangeRects.item( 0 ) : rangeRects.item( rangeRects.length - 1 ),
|
|
target: isBackward ? rangeRects.item( 0 ) : rangeRects.item( rangeRects.length - 1 ),
|
|
@@ -268,7 +271,7 @@ function createContextualToolbar( editor ) {
|
|
|
// Remove toolbar from balloon and mark as not opened.
|
|
// Remove toolbar from balloon and mark as not opened.
|
|
|
function close() {
|
|
function close() {
|
|
|
if ( isOpen ) {
|
|
if ( isOpen ) {
|
|
|
- contextualBalloon.remove( toolbar );
|
|
|
|
|
|
|
+ balloon.remove( toolbar );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
isOpen = false;
|
|
isOpen = false;
|
|
@@ -282,10 +285,7 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
|
|
|
} )
|
|
} )
|
|
|
.then( editor => {
|
|
.then( editor => {
|
|
|
window.editor = editor;
|
|
window.editor = editor;
|
|
|
-
|
|
|
|
|
- editor.ui.view.body.add( contextualBalloon.view );
|
|
|
|
|
-
|
|
|
|
|
- createContextualToolbar( editor, contextualBalloon );
|
|
|
|
|
|
|
+ createContextualToolbar( editor );
|
|
|
} )
|
|
} )
|
|
|
.catch( err => {
|
|
.catch( err => {
|
|
|
console.error( err.stack );
|
|
console.error( err.stack );
|