Add math editing button for balloon editor

package.json

@@ -48,8 +48,8 @@
     "theme"
   ],
   "scripts": {
-    "lint": "eslint --quiet **/*.js",
+    "lint": "eslint --quiet src/**/*.js",
-    "lint:fix": "eslint --quiet **/*.js --fix",
+    "lint:fix": "eslint --quiet src/**/*.js --fix",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'",
     "test": "node node_modules/@ckeditor/ckeditor5-dev-tests/bin/test.js"
   },

src/mathui.js

@@ -4,6 +4,7 @@ import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextu
 import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { getBalloonPositionData } from './utils';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import MainFormView from './ui/mainformview';
@@ -68,7 +69,7 @@ export default class MathUI extends Plugin {
 		const editor = this.editor;
 		const mathCommand = editor.commands.get( 'math' );
 
-		const mathConfig = this.editor.config.get( 'math' );
+		const mathConfig = editor.config.get( 'math' );
 
 		const formView = new MainFormView(
 			editor.locale,
@@ -116,7 +117,7 @@ export default class MathUI extends Plugin {
 
 		this._balloon.add( {
 			view: this.formView,
-			position: this._getBalloonPositionData()
+			position: getBalloonPositionData( editor )
 		} );
 
 		if ( this._balloon.visibleView === this.formView ) {
@@ -175,13 +176,6 @@ export default class MathUI extends Plugin {
 		}
 	}
 
-	_getBalloonPositionData() {
-		const view = this.editor.editing.view;
-		const viewDocument = view.document;
-		const target = view.domConverter.viewRangeToDom( viewDocument.selection.getFirstRange() );
-		return { target };
-	}
-
 	_createToolbarMathButton() {
 		const editor = this.editor;
 		const mathCommand = editor.commands.get( 'math' );
@@ -216,8 +210,21 @@ export default class MathUI extends Plugin {
 	}
 
 	_enableUserBalloonInteractions() {
+		const editor = this.editor;
+		if ( editor.constructor.name === 'BalloonEditor' ) {
+			const viewDocument = this.editor.editing.view.document;
+			this.listenTo( viewDocument, 'click', () => {
+				const mathCommand = editor.commands.get( 'math' );
+				if ( mathCommand.value ) {
+					if ( mathCommand.isEnabled ) {
+						this._showUI();
+					}
+				}
+			} );
+		}
+
 		// Close the panel on the Esc key press when the editable has focus and the balloon is visible.
-		this.editor.keystrokes.set( 'Esc', ( data, cancel ) => {
+		editor.keystrokes.set( 'Esc', ( data, cancel ) => {
 			if ( this._isUIVisible ) {
 				this._hideUI();
 				cancel();

src/ui/mainformview.js

@@ -74,7 +74,7 @@ export default class MainFormView extends View {
 			attributes: {
 				class: [
 					'ck',
-					'ck-math-form',
+					'ck-math-form'
 				],
 				tabindex: '-1',
 				spellcheck: 'false'
@@ -90,8 +90,8 @@ export default class MainFormView extends View {
 					children
 				},
 				this.saveButtonView,
-				this.cancelButtonView,
+				this.cancelButtonView
-			],
+			]
 		} );
 	}
 
@@ -100,7 +100,7 @@ export default class MainFormView extends View {
 
 		// Prevent default form submit event & trigger custom 'submit'
 		submitHandler( {
-			view: this,
+			view: this
 		} );
 
 		// Register form elements to focusable elements
@@ -108,7 +108,7 @@ export default class MainFormView extends View {
 			this.mathInputView,
 			this.displayButtonView,
 			this.saveButtonView,
-			this.cancelButtonView,
+			this.cancelButtonView
 		];
 
 		childViews.forEach( v => {

src/ui/mathview.js

@@ -25,7 +25,7 @@ export default class MathView extends View {
 				class: [
 					'ck',
 					'ck-math-preview'
-				],
+				]
 			}
 		} );
 	}

src/utils.js

@@ -1,4 +1,5 @@
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
 
 export function getSelectedMathModelWidget( selection ) {
 	const selectedElement = selection.getSelectedElement();
@@ -104,6 +105,30 @@ export async function renderEquation( equation, element, engine = 'katex', lazyL
 	}
 }
 
+export function getBalloonPositionData( editor ) {
+	const view = editor.editing.view;
+	const defaultPositions = BalloonPanelView.defaultPositions;
+
+	const selectedElement = view.document.selection.getSelectedElement();
+	if ( selectedElement ) {
+		return {
+			target: view.domConverter.viewToDom( selectedElement ),
+			positions: [
+				defaultPositions.southArrowNorth
+			]
+		};
+	}
+	else {
+		const viewDocument = view.document;
+		return {
+			target: view.domConverter.viewRangeToDom( viewDocument.selection.getFirstRange() ),
+			positions: [
+				defaultPositions.southArrowNorth
+			]
+		};
+	}
+}
+
 function selectRenderMode( element, preview, previewUid, cb ) {
 	if ( preview ) {
 		createPreviewElement( element, previewUid, prewviewEl => {