diff --git a/packages/ckeditor5-math/src/ui/mainformview.ts b/packages/ckeditor5-math/src/ui/mainformview.ts index f5f630dff..3a1d913d8 100644 --- a/packages/ckeditor5-math/src/ui/mainformview.ts +++ b/packages/ckeditor5-math/src/ui/mainformview.ts @@ -168,8 +168,6 @@ export default class MainFormView extends View { super.destroy(); this._resizeObserver?.disconnect(); document.removeEventListener( 'mouseup', this._onMouseUp ); - this.mathLiveInputView.element?.removeEventListener( 'mousedown', this._onMouseDown ); - this.rawLatexInputView.element?.removeEventListener( 'mousedown', this._onMouseDown ); } public focus(): void { @@ -212,8 +210,7 @@ export default class MainFormView extends View { if ( this.rawLatexInputView.element ) this._resizeObserver?.observe( this.rawLatexInputView.element ); }; - private _onMouseDown = ( evt: Event ) => { - const target = evt.currentTarget as HTMLElement; + private _onMouseDown( target: HTMLElement ) { this._activeResizeTarget = target; // Stop observing the OTHER element to prevent loops and errors while resizing @@ -226,15 +223,21 @@ export default class MainFormView extends View { this._resizeObserver?.unobserve( this.mathLiveInputView.element ); } } - }; + } private _initResizeSync() { - if ( this.mathLiveInputView.element ) { - this.mathLiveInputView.element.addEventListener( 'mousedown', this._onMouseDown ); - } - if ( this.rawLatexInputView.element ) { - this.rawLatexInputView.element.addEventListener( 'mousedown', this._onMouseDown ); - } + this.listenTo( this.mathLiveInputView, 'mousedown', () => { + if ( this.mathLiveInputView.element ) { + this._onMouseDown( this.mathLiveInputView.element ); + } + } ); + + this.listenTo( this.rawLatexInputView, 'mousedown', () => { + if ( this.rawLatexInputView.element ) { + this._onMouseDown( this.rawLatexInputView.element ); + } + } ); + document.addEventListener( 'mouseup', this._onMouseUp ); // Synchronize width between MathLive and Raw LaTeX inputs diff --git a/packages/ckeditor5-math/src/ui/mathliveinputview.ts b/packages/ckeditor5-math/src/ui/mathliveinputview.ts index 689ec891a..9dbce2903 100644 --- a/packages/ckeditor5-math/src/ui/mathliveinputview.ts +++ b/packages/ckeditor5-math/src/ui/mathliveinputview.ts @@ -49,6 +49,11 @@ export default class MathLiveInputView extends View { public override render(): void { super.render(); + // Propagate mousedown event to the view + this.element!.addEventListener( 'mousedown', ( evt ) => { + this.fire( 'mousedown', evt ); + } ); + // Create the MathLive math-field custom element const mathfield = document.createElement( 'math-field' ) as any; this.mathfield = mathfield; diff --git a/packages/ckeditor5-math/src/ui/rawlatexinputview.ts b/packages/ckeditor5-math/src/ui/rawlatexinputview.ts index 871f23e72..4c994778d 100644 --- a/packages/ckeditor5-math/src/ui/rawlatexinputview.ts +++ b/packages/ckeditor5-math/src/ui/rawlatexinputview.ts @@ -2,21 +2,21 @@ import { LabeledFieldView, createLabeledTextarea, type Locale, type TextareaView /** * A labeled textarea view for direct LaTeX code editing. - * + * * This provides a plain text input for users who prefer to write LaTeX syntax directly * or need to paste/edit raw LaTeX code. */ export default class RawLatexInputView extends LabeledFieldView { /** * The current LaTeX value. - * + * * @observable */ public declare value: string; - + /** * Whether the input is in read-only mode. - * + * * @observable */ public declare isReadOnly: boolean; @@ -57,5 +57,10 @@ export default class RawLatexInputView extends LabeledFieldView { public override render(): void { super.render(); // All styling is handled via CSS in mathform.css + + // Propagate mousedown event to the view + this.element!.addEventListener( 'mousedown', ( evt ) => { + this.fire( 'mousedown', evt ); + } ); } }