gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-04 22:44:25 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Small improvements

Browse Source
This commit is contained in:
meinzzzz 2025-11-26 22:48:57 +01:00
parent 64ab1c4116
commit c46cf41842
2 changed files with 118 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,18 @@
import { View, type Locale } from 'ckeditor5'; import { View, type Locale } from 'ckeditor5';
import 'mathlive'; // Import side-effects only (registers the <math-field> tag) import 'mathlive'; // Import side-effects only (registers the <math-field> tag)
/**
* Interface describing the custom <math-field> element.
*/
interface MathFieldElement extends HTMLElement {
value: string;
readOnly: boolean;
mathVirtualKeyboardPolicy: string;
}
/** /**
* A wrapper for the MathLive <math-field> component. * A wrapper for the MathLive <math-field> component.
* Uses 'any' typing to avoid TypeScript module resolution errors.
*/ */
export default class MathLiveInputView extends View { export default class MathLiveInputView extends View {
/** /**
@ -19,9 +28,10 @@ export default class MathLiveInputView extends View {
public declare isReadOnly: boolean; public declare isReadOnly: boolean;
/** /**
* Reference to the DOM element (typed as any to prevent TS errors). * Reference to the DOM element.
* Typed as MathFieldElement | null for proper TS support.
*/ */
public mathfield: any = null; public mathfield: MathFieldElement | null = null;
constructor( locale: Locale ) { constructor( locale: Locale ) {
super( locale ); super( locale );
@ -40,18 +50,17 @@ export default class MathLiveInputView extends View {
public override render(): void { public override render(): void {
super.render(); super.render();
// 1. Create element using DOM API instead of Class constructor // 1. Create element with the specific type
// This avoids "Module has no exported member" errors. const mathfield = document.createElement( 'math-field' ) as MathFieldElement;
const mathfield = document.createElement( 'math-field' ) as any;
// 2. Configure Options // 2. Configure Options
mathfield.mathVirtualKeyboardPolicy = 'manual'; mathfield.mathVirtualKeyboardPolicy = 'manual';
// Disable sounds // Disable sounds
const MathfieldElement = customElements.get( 'math-field' ); const MathfieldConstructor = customElements.get( 'math-field' );
if ( MathfieldElement ) { if ( MathfieldConstructor ) {
( MathfieldElement as any ).soundsDirectory = null; ( MathfieldConstructor as any ).soundsDirectory = null;
( MathfieldElement as any ).plonkSound = null; ( MathfieldConstructor as any ).plonkSound = null;
} }
// 3. Set Initial State // 3. Set Initial State

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

@ -25,26 +25,26 @@ export default class RawLatexInputView extends LabeledFieldView<TextareaView> {
const fieldView = this.fieldView; const fieldView = this.fieldView;
// 1. Sync: DOM (Textarea) -> Observable // 1. Sync: DOM (Textarea) -> Observable
// We listen to the native 'input' event on the child view
fieldView.on( 'input', () => { fieldView.on( 'input', () => {
if ( fieldView.element ) { // We cast strictly to HTMLTextAreaElement to access '.value' safely
this.value = fieldView.element.value; const textarea = fieldView.element as HTMLTextAreaElement;
if ( textarea ) {
this.value = textarea.value;
} }
} ); } );
// 2. Sync: Observable -> DOM (Textarea) // 2. Sync: Observable -> DOM (Textarea)
this.on( 'change:value', () => { this.on( 'change:value', () => {
// Check for difference to avoid cursor jumping or unnecessary updates const textarea = fieldView.element as HTMLTextAreaElement;
if ( fieldView.element && fieldView.element.value !== this.value ) { // Check for difference to avoid cursor jumping
fieldView.element.value = this.value; if ( textarea && textarea.value !== this.value ) {
textarea.value = this.value;
} }
} ); } );
// 3. Sync: ReadOnly State // 3. Sync: ReadOnly State
this.on( 'change:isReadOnly', () => { this.on( 'change:isReadOnly', ( _evt, _name, nextValue ) => {
if ( fieldView.element ) { fieldView.isReadOnly = nextValue;
fieldView.element.readOnly = this.isReadOnly;
}
} ); } );
} }