|
|
@@ -4,10 +4,15 @@
|
|
|
*/
|
|
|
|
|
|
import Feature from '../core/feature.js';
|
|
|
+import Model from '../ui/model.js';
|
|
|
+
|
|
|
import LinkEngine from './linkengine.js';
|
|
|
+
|
|
|
import ButtonController from '../ui/button/button.js';
|
|
|
import ButtonView from '../ui/button/buttonview.js';
|
|
|
-import Model from '../ui/model.js';
|
|
|
+
|
|
|
+import LinkBalloonPanel from './ui/linkballoonpanel.js';
|
|
|
+import LinkBalloonPanelView from './ui/linkballoonpanelview.js';
|
|
|
|
|
|
/**
|
|
|
* The link feature.
|
|
|
@@ -29,6 +34,11 @@ export default class Link extends Feature {
|
|
|
* @inheritDoc
|
|
|
*/
|
|
|
init() {
|
|
|
+ this._createButtons();
|
|
|
+ this._createBalloonPanel();
|
|
|
+ }
|
|
|
+
|
|
|
+ _createButtons() {
|
|
|
const editor = this.editor;
|
|
|
const t = editor.t;
|
|
|
const command = editor.commands.get( 'link' );
|
|
|
@@ -51,4 +61,43 @@ export default class Link extends Feature {
|
|
|
// Add link button to feature components.
|
|
|
editor.ui.featureComponents.add( 'link', ButtonController, ButtonView, buttonModel );
|
|
|
}
|
|
|
+
|
|
|
+ _createBalloonPanel() {
|
|
|
+ const editor = this.editor;
|
|
|
+ const editingView = editor.editing.view;
|
|
|
+ const editableViewElement = editor.ui.editable.view.element;
|
|
|
+ const t = editor.t;
|
|
|
+
|
|
|
+ // Create panel model.
|
|
|
+ const balloonPanelModel = new Model( {
|
|
|
+ maxWidth: 300
|
|
|
+ } );
|
|
|
+
|
|
|
+ this.balloonPanel = new LinkBalloonPanel( balloonPanelModel, new LinkBalloonPanelView( t ) );
|
|
|
+
|
|
|
+ editor.ui.add( 'body', this.balloonPanel );
|
|
|
+
|
|
|
+ this.balloonPanel.view.element.innerHTML = 'LinkBalloonPanel';
|
|
|
+
|
|
|
+ editingView.on( 'render', () => {
|
|
|
+ const firstParent = editingView.selection.getFirstPosition().parent;
|
|
|
+ const firstParentAncestors = firstParent.getAncestors();
|
|
|
+ const anchor = firstParentAncestors.find( ( ancestor ) => ancestor.name === 'a' );
|
|
|
+
|
|
|
+ if ( anchor ) {
|
|
|
+ this.balloonPanel.view.attachTo(
|
|
|
+ editingView.domConverter.getCorrespondingDomElement( anchor ),
|
|
|
+ editableViewElement
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ const selection = document.getSelection();
|
|
|
+
|
|
|
+ if ( selection && selection.rangeCount ) {
|
|
|
+ this.balloonPanel.view.attachTo( selection.getRangeAt( 0 ), editableViewElement );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, this );
|
|
|
+
|
|
|
+ editingView.on( 'blur', () => this.balloonPanel.view.hide() );
|
|
|
+ }
|
|
|
}
|