feat: Simplify syntax for modifying registers

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [Unreleased]
+
+### Improvements
+
+- Simplified the syntax to modify registers. Use `mf.registers.arraystretch = 1.5`
+  instead of mf.registers = {...mf.registers, arraystretch: 1.5}`
+
+
 ## 0.96.0 (2023-11-14)
 
 ### Breaking Changes

src/common/stylesheet.ts

@@ -82,6 +82,7 @@ export function getStylesheet(id: StylesheetId): CSSStyleSheet {
 
   gStylesheets[id] = new CSSStyleSheet();
 
+  // @ts-ignore
   gStylesheets[id]!.replaceSync(getStylesheetContent(id));
 
   return gStylesheets[id]!;
@@ -103,6 +104,7 @@ export function injectStylesheet(id: StylesheetId): void {
   if ((gInjectedStylesheets[id] ?? 0) !== 0) gInjectedStylesheets[id]! += 1;
   else {
     const stylesheet = getStylesheet(id);
+    // @ts-ignore
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
     gInjectedStylesheets[id] = 1;
   }
@@ -116,6 +118,7 @@ export function releaseStylesheet(id: StylesheetId): void {
   gInjectedStylesheets[id]! -= 1;
   if (gInjectedStylesheets[id]! <= 0) {
     const stylesheet = gStylesheets[id]!;
+    // @ts-ignore
     document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
       (x) => x !== stylesheet
     );

src/editor-mathfield/render.ts

@@ -30,9 +30,10 @@ function hash(latex: string): number {
 }
 
 export function requestUpdate(
-  mathfield: MathfieldPrivate,
+  mathfield: MathfieldPrivate | undefined | null,
   options?: { interactive: boolean }
 ): void {
+  if (!mathfield) return;
   if (mathfield.dirty) return;
   mathfield.dirty = true;
   requestAnimationFrame(() => {

src/public/core-types.ts

@@ -300,19 +300,30 @@ export type LatexValue = { relax?: boolean } & (
 //   }
 
 /**
- * TeX registers represent 'variables' and 'constants'.
+ * TeX registers represent "variables" and "constants".
  *
  * Changing the values of some registers can modify the layout
  * of math expressions.
  *
  * The following registers might be of interest:
  *
- * - `thinmuskip`
- * - `medmuskip`
- * - `thickmuskip`
- * - `nulldelimiterspace`
- * - `delimitershortfall`
- * - `jot`
+ * - `thinmuskip`: space between items of math lists
+ * - `medmuskip`: space between binary operations
+ * - `thickmuskip`: space between relational operators
+ * - `nulldelimiterspace`: minimum space to leave blank in delimiter constructions, for example around a fraction
+ * - `delimitershortfall`: maximum space to overlap adjacent elements when a delimiter is too short
+ * - `jot`: space between lines in an array, or between rows in a multiline construct
+ * - `arraycolsep`: space between columns in an array
+ * - `arraystretch`: factor by which to stretch the height of each row in an array
+ *
+ * To modify a register, use:
+ *
+ * ```javascript
+ * mf.registers.arraystretch = 1.5;
+ * mf.registers.thinmuskip = { dimension: 2, unit: "mu" };
+ * mf.registers.medmuskip = "3mu";
+ *```
+ *
  */
 export type Registers = Record<string, number | string | LatexValue>;
 

src/public/mathfield-element.ts

@@ -1,6 +1,7 @@
 import type { Selector } from './commands';
 import type {
   LatexSyntaxError,
+  LatexValue,
   MacroDictionary,
   ParseMode,
   Registers,
@@ -1129,11 +1130,13 @@ export class MathfieldElement extends HTMLElement implements Mathfield {
 
     this.attachShadow({ mode: 'open', delegatesFocus: true });
     if (this.shadowRoot && 'adoptedStyleSheets' in this.shadowRoot) {
+      // @ts-ignore
       this.shadowRoot!.adoptedStyleSheets = [
         getStylesheet('core'),
         getStylesheet('mathfield'),
         getStylesheet('mathfield-element'),
       ];
+      // @ts-ignore
       this.shadowRoot!.innerHTML = `<span style="pointer-events:auto"></span><slot style="display:none"></slot>`;
     } else {
       this.shadowRoot!.innerHTML = `<style>${getStylesheetContent(
@@ -1858,7 +1861,7 @@ import 'https://unpkg.com/@cortex-js/compute-engine?module';
     const hasValue: boolean = newValue !== null;
     switch (name) {
       case 'contenteditable':
-        if (this._mathfield) requestUpdate(this._mathfield);
+        requestUpdate(this._mathfield);
         break;
       case 'disabled':
         this.disabled = hasValue;
@@ -1961,11 +1964,28 @@ import 'https://unpkg.com/@cortex-js/compute-engine?module';
   }
 
   /** @category Customization
-   * @inheritDoc LayoutOptions.registers
+   * @inheritDoc Registers
    */
   get registers(): Registers {
-    return this._getOption('registers');
+    const that = this;
+    return new Proxy(
+      {},
+      {
+        get: (_, prop): number | string | LatexValue | undefined => {
+          if (typeof prop !== 'string') return undefined;
+          return that._getOption('registers')[prop];
+        },
+        set(_, prop, value): boolean {
+          if (typeof prop !== 'string') return false;
+          that._setOptions({
+            registers: { ...that._getOption('registers'), [prop]: value },
+          });
+          return true;
+        },
+      }
+    );
   }
+
   set registers(value: Registers) {
     this._setOptions({ registers: value });
   }