gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-05 23:14:24 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Improve MathLive and Raw LaTeX input views to propagate mousedown events

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/ckeditor5-math/src/ui/mainformview.ts
View File

@ -168,8 +168,6 @@ export default class MainFormView extends View {
super.destroy(); super.destroy();
this._resizeObserver?.disconnect(); this._resizeObserver?.disconnect();
document.removeEventListener( 'mouseup', this._onMouseUp ); document.removeEventListener( 'mouseup', this._onMouseUp );
this.mathLiveInputView.element?.removeEventListener( 'mousedown', this._onMouseDown );
this.rawLatexInputView.element?.removeEventListener( 'mousedown', this._onMouseDown );
} }
public focus(): void { public focus(): void {
@ -212,8 +210,7 @@ export default class MainFormView extends View {
if ( this.rawLatexInputView.element ) this._resizeObserver?.observe( this.rawLatexInputView.element ); if ( this.rawLatexInputView.element ) this._resizeObserver?.observe( this.rawLatexInputView.element );
}; };
private _onMouseDown = ( evt: Event ) => { private _onMouseDown( target: HTMLElement ) {
const target = evt.currentTarget as HTMLElement;
this._activeResizeTarget = target; this._activeResizeTarget = target;
// Stop observing the OTHER element to prevent loops and errors while resizing // 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 ); this._resizeObserver?.unobserve( this.mathLiveInputView.element );
} }
} }
}; }
private _initResizeSync() { private _initResizeSync() {
if ( this.mathLiveInputView.element ) { this.listenTo( this.mathLiveInputView, 'mousedown', () => {
this.mathLiveInputView.element.addEventListener( 'mousedown', this._onMouseDown ); if ( this.mathLiveInputView.element ) {
} this._onMouseDown( this.mathLiveInputView.element );
if ( this.rawLatexInputView.element ) { }
this.rawLatexInputView.element.addEventListener( 'mousedown', this._onMouseDown ); } );
}
this.listenTo( this.rawLatexInputView, 'mousedown', () => {
if ( this.rawLatexInputView.element ) {
this._onMouseDown( this.rawLatexInputView.element );
}
} );
document.addEventListener( 'mouseup', this._onMouseUp ); document.addEventListener( 'mouseup', this._onMouseUp );
// Synchronize width between MathLive and Raw LaTeX inputs // Synchronize width between MathLive and Raw LaTeX inputs

5
packages/ckeditor5-math/src/ui/mathliveinputview.ts
View File

@ -49,6 +49,11 @@ export default class MathLiveInputView extends View {
public override render(): void { public override render(): void {
super.render(); super.render();
// Propagate mousedown event to the view
this.element!.addEventListener( 'mousedown', ( evt ) => {
this.fire( 'mousedown', evt );
} );
// Create the MathLive math-field custom element // Create the MathLive math-field custom element
const mathfield = document.createElement( 'math-field' ) as any; const mathfield = document.createElement( 'math-field' ) as any;
this.mathfield = mathfield; this.mathfield = mathfield;

13
packages/ckeditor5-math/src/ui/rawlatexinputview.ts
View File

@ -2,21 +2,21 @@ import { LabeledFieldView, createLabeledTextarea, type Locale, type TextareaView
/** /**
* A labeled textarea view for direct LaTeX code editing. * A labeled textarea view for direct LaTeX code editing.
* *
* This provides a plain text input for users who prefer to write LaTeX syntax directly * This provides a plain text input for users who prefer to write LaTeX syntax directly
* or need to paste/edit raw LaTeX code. * or need to paste/edit raw LaTeX code.
*/ */
export default class RawLatexInputView extends LabeledFieldView<TextareaView> { export default class RawLatexInputView extends LabeledFieldView<TextareaView> {
/** /**
* The current LaTeX value. * The current LaTeX value.
* *
* @observable * @observable
*/ */
public declare value: string; public declare value: string;
/** /**
* Whether the input is in read-only mode. * Whether the input is in read-only mode.
* *
* @observable * @observable
*/ */
public declare isReadOnly: boolean; public declare isReadOnly: boolean;
@ -57,5 +57,10 @@ export default class RawLatexInputView extends LabeledFieldView<TextareaView> {
public override render(): void { public override render(): void {
super.render(); super.render();
// All styling is handled via CSS in mathform.css // All styling is handled via CSS in mathform.css
// Propagate mousedown event to the view
this.element!.addEventListener( 'mousedown', ( evt ) => {
this.fire( 'mousedown', evt );
} );
} }
} }