Improve MathLive and Raw LaTeX input views to propagate mousedown events

This commit is contained in:
meinzzzz 2025-11-23 13:29:26 +01:00
parent a0f16f9184
commit 56834cb88a
3 changed files with 28 additions and 15 deletions

View File

@ -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

View File

@ -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;

View File

@ -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<TextareaView> {
/**
* 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<TextareaView> {
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 );
} );
}
}