diff --git a/src/automath.js b/src/automath.js index d4417222e..9db75022b 100644 --- a/src/automath.js +++ b/src/automath.js @@ -3,6 +3,7 @@ import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard'; import Undo from '@ckeditor/ckeditor5-undo/src/undo'; import LiveRange from '@ckeditor/ckeditor5-engine/src/model/liverange'; import LivePosition from '@ckeditor/ckeditor5-engine/src/model/liveposition'; +import global from '@ckeditor/ckeditor5-utils/src/dom/global'; import { defaultConfig, extractDelimiters, hasDelimiters } from './utils'; @@ -46,7 +47,7 @@ export default class AutoMath extends Plugin { editor.commands.get( 'undo' ).on( 'execute', () => { if ( this._timeoutId ) { - global.window.clearTimeout( this._timeoutId ); // eslint-disable-line + global.window.clearTimeout( this._timeoutId ); this._positionToInsert.detach(); this._timeoutId = null; @@ -89,7 +90,7 @@ export default class AutoMath extends Plugin { this._positionToInsert = LivePosition.fromPosition( leftPosition ); // With timeout user can undo conversation if want use plain text - this._timeoutId = global.window.setTimeout( () => { // eslint-disable-line + this._timeoutId = global.window.setTimeout( () => { editor.model.change( writer => { this._timeoutId = null; diff --git a/src/mathui.js b/src/mathui.js index 8984eba8a..e78c35ee4 100644 --- a/src/mathui.js +++ b/src/mathui.js @@ -3,6 +3,7 @@ import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobs import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon'; 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 ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; import MainFormView from './ui/mainformview'; @@ -11,7 +12,7 @@ import MainFormView from './ui/mainformview'; import MathEditing from './mathediting'; import { defaultConfig } from './utils'; -import pluginIcon from '../theme/icons/icon.svg'; +import mathIcon from '../theme/icons/math.svg'; const mathKeystroke = 'Ctrl+M'; @@ -30,7 +31,7 @@ export default class MathUI extends Plugin { this._previewUid = `math-preview-${ uid() }`; - this._form = this._createFormView(); + this.formView = this._createFormView(); this._balloon = editor.plugins.get( ContextualBalloon ); @@ -42,10 +43,10 @@ export default class MathUI extends Plugin { destroy() { super.destroy(); - this._form.destroy(); + this.formView.destroy(); // Destroy preview element - let prewviewEl = document.getElementById( this._previewUid ); // eslint-disable-line + const prewviewEl = global.document.getElementById( this._previewUid ); if ( prewviewEl ) { prewviewEl.parentNode.removeChild( prewviewEl ); } @@ -104,23 +105,23 @@ export default class MathUI extends Plugin { const mathCommand = editor.commands.get( 'math' ); this._balloon.add( { - view: this._form, + view: this.formView, position: this._getBalloonPositionData(), } ); - if ( this._balloon.visibleView === this._form ) { - this._form.mathInputView.select(); + if ( this._balloon.visibleView === this.formView ) { + this.formView.mathInputView.select(); } // Show preview element - let prewviewEl = document.getElementById( this._previewUid ); // eslint-disable-line - if ( prewviewEl && this._form.previewEnabled ) { + const prewviewEl = global.document.getElementById( this._previewUid ); + if ( prewviewEl && this.formView.previewEnabled ) { // Force refresh preview - this._form.mathView.updateMath(); + this.formView.mathView.updateMath(); } - this._form.equation = mathCommand.value || ''; - this._form.displayButtonView.isOn = mathCommand.display || false; + this.formView.equation = mathCommand.value || ''; + this.formView.displayButtonView.isOn = mathCommand.display || false; } _hideUI() { @@ -150,12 +151,12 @@ export default class MathUI extends Plugin { _removeFormView() { if ( this._isFormInPanel ) { - this._form.saveButtonView.focus(); + this.formView.saveButtonView.focus(); - this._balloon.remove( this._form ); + this._balloon.remove( this.formView ); // Hide preview element - let prewviewEl = document.getElementById( this._previewUid );// eslint-disable-line + const prewviewEl = global.document.getElementById( this._previewUid ); if ( prewviewEl ) { prewviewEl.style.visibility = 'hidden'; } @@ -191,7 +192,7 @@ export default class MathUI extends Plugin { button.isEnabled = true; button.label = t( 'Insert math' ); - button.icon = pluginIcon; + button.icon = mathIcon; button.keystroke = mathKeystroke; button.tooltip = true; button.isToggleable = true; @@ -215,7 +216,7 @@ export default class MathUI extends Plugin { // Close on click outside of balloon panel element. clickOutsideHandler( { - emitter: this._form, + emitter: this.formView, activator: () => this._isFormInPanel, contextElements: [ this._balloon.view.element ], callback: () => this._hideUI() @@ -225,10 +226,10 @@ export default class MathUI extends Plugin { get _isUIVisible() { const visibleView = this._balloon.visibleView; - return visibleView == this._form; + return visibleView == this.formView; } get _isFormInPanel() { - return this._balloon.hasView( this._form ); + return this._balloon.hasView( this.formView ); } } diff --git a/src/utils.js b/src/utils.js index 9491afc71..cd402e131 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,3 +1,7 @@ +/* globals MathJax, katex, console */ + +import global from '@ckeditor/ckeditor5-utils/src/dom/global'; + export const defaultConfig = { engine: 'mathjax', outputType: 'script', @@ -56,8 +60,7 @@ export function renderEquation( equation, element, engine = 'katex', display = f } else { selectRenderMode( element, preview, previewUid, el => { // Fixme: MathJax typesetting cause occasionally math processing error without asynchronous call - // eslint-disable-next-line - setTimeout( () => { + global.window.setTimeout( () => { renderMathJax2( equation, el, display ); // Move and scale after rendering @@ -86,8 +89,7 @@ export function renderEquation( equation, element, engine = 'katex', display = f engine( equation, element, display ); } else { element.innerHTML = equation; - // eslint-disable-next-line - console.warn( `math-tex-typesetting-missing: Missing the mathematical typesetting engine (${engine}) for tex.` ); + console.warn( `math-tex-typesetting-missing: Missing the mathematical typesetting engine (${ engine }) for tex.` ); } } @@ -126,7 +128,8 @@ function renderMathJax2( equation, element, display ) { } else { element.innerHTML = '\\(' + equation + '\\)'; } - MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, element ] ); // eslint-disable-line + // eslint-disable-next-line + MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, element ] ); } function createPreviewElement( element, previewUid, render ) { @@ -135,20 +138,19 @@ function createPreviewElement( element, previewUid, render ) { } function getPreviewElement( element, previewUid ) { - let prewviewEl = document.getElementById( previewUid ); // eslint-disable-line + let prewviewEl = global.document.getElementById( previewUid ); // Create if not found if ( !prewviewEl ) { - prewviewEl = document.createElement( 'div' ); // eslint-disable-line + prewviewEl = global.document.createElement( 'div' ); prewviewEl.setAttribute( 'id', previewUid ); prewviewEl.style.visibility = 'hidden'; - document.body.appendChild( prewviewEl ); // eslint-disable-line + global.document.body.appendChild( prewviewEl ); let ticking = false; const renderTransformation = () => { if ( !ticking ) { - // eslint-disable-next-line - window.requestAnimationFrame( () => { + global.window.requestAnimationFrame( () => { moveElement( element, prewviewEl ); ticking = false; } ); @@ -158,8 +160,8 @@ function getPreviewElement( element, previewUid ) { }; // Create scroll listener for following - window.addEventListener( 'resize', renderTransformation ); // eslint-disable-line - window.addEventListener( 'scroll', renderTransformation ); // eslint-disable-line + global.window.addEventListener( 'resize', renderTransformation ); + global.window.addEventListener( 'scroll', renderTransformation ); } return prewviewEl; } @@ -176,8 +178,8 @@ function moveAndScaleElement( parent, child ) { function moveElement( parent, child ) { const domRect = parent.getBoundingClientRect(); - const left = window.scrollX + domRect.left; // eslint-disable-line - const top = window.scrollY + domRect.top; // eslint-disable-line + const left = global.window.scrollX + domRect.left; + const top = global.window.scrollY + domRect.top; child.style.position = 'absolute'; child.style.left = left + 'px'; child.style.top = top + 'px'; diff --git a/theme/icons/icon.svg b/theme/icons/math.svg similarity index 100% rename from theme/icons/icon.svg rename to theme/icons/math.svg