Small improvements

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

View File

@ -1,9 +1,18 @@
import { View, type Locale } from 'ckeditor5';
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.
* Uses 'any' typing to avoid TypeScript module resolution errors.
*/
export default class MathLiveInputView extends View {
/**
@ -19,9 +28,10 @@ export default class MathLiveInputView extends View {
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 ) {
super( locale );
@ -40,18 +50,17 @@ export default class MathLiveInputView extends View {
public override render(): void {
super.render();
// 1. Create element using DOM API instead of Class constructor
// This avoids "Module has no exported member" errors.
const mathfield = document.createElement( 'math-field' ) as any;
// 1. Create element with the specific type
const mathfield = document.createElement( 'math-field' ) as MathFieldElement;
// 2. Configure Options
mathfield.mathVirtualKeyboardPolicy = 'manual';
// Disable sounds
const MathfieldElement = customElements.get( 'math-field' );
if ( MathfieldElement ) {
( MathfieldElement as any ).soundsDirectory = null;
( MathfieldElement as any ).plonkSound = null;
const MathfieldConstructor = customElements.get( 'math-field' );
if ( MathfieldConstructor ) {
( MathfieldConstructor as any ).soundsDirectory = null;
( MathfieldConstructor as any ).plonkSound = null;
}
// 3. Set Initial State

View File

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