Merge branch 'master' of https://github.com/arnog/mathlive

src/core/context-utils.ts

@@ -17,6 +17,7 @@ export function getDefaultContext(): ContextInterface {
     placeholderSymbol: '▢',
     letterShapeStyle: l10n.locale.startsWith('fr') ? 'french' : 'tex',
     minFontScale: 0,
+    maxMatrixCols: 10,
     colorMap: defaultColorMap,
     backgroundColorMap: defaultBackgroundColorMap,
     getMacro: (token) => getMacroDefinition(token, getMacros()),

src/core/context.ts

@@ -79,6 +79,7 @@ export class Context implements ContextInterface {
   readonly color: string;
   readonly backgroundColor: string;
   readonly minFontScale: number;
+  readonly maxMatrixCols: number;
 
   // `size` is the "base" font size (need to add `mathstyle.sizeDelta`
   // to get effective size)
@@ -129,6 +130,7 @@ export class Context implements ContextInterface {
 
     this.letterShapeStyle = template.letterShapeStyle;
     this.minFontScale = template.minFontScale;
+    this.maxMatrixCols = template.maxMatrixCols;
 
     if (style?.color && style.color !== 'none') this.color = style.color;
     else this.color = this.parent?.color ?? '';

src/core/parser.ts

@@ -907,7 +907,13 @@ export class Parser {
 
     this.endContext();
 
-    return def.createAtom(envName, array, rowGaps, args);
+    return def.createAtom(
+      envName,
+      array,
+      rowGaps,
+      args,
+      this.context.maxMatrixCols
+    );
   }
 
   /**

src/core/types.ts

@@ -187,6 +187,7 @@ export interface ContextInterface {
   readonly smartFence: boolean;
   readonly letterShapeStyle: 'tex' | 'french' | 'iso' | 'upright';
   readonly minFontScale: number;
+  readonly maxMatrixCols: number;
   readonly placeholderSymbol: string;
   readonly colorMap: (name: string) => string | undefined;
   readonly backgroundColorMap: (name: string) => string | undefined;

src/editor-mathfield/mathfield-private.ts

@@ -628,6 +628,10 @@ If you are using Vue, this may be because you are using the runtime-only build o
     return this.options.minFontScale;
   }
 
+  get maxMatrixCols(): number {
+    return this.options.maxMatrixCols;
+  }
+
   /** Returns styles shared by all selected atoms */
   get selectionStyle(): Readonly<Style> {
     if (this.model.selectionIsCollapsed) return this.effectiveStyle;
@@ -767,6 +771,7 @@ If you are using Vue, this may be because you are using the runtime-only build o
       'backgroundColorMap' in config ||
       'letterShapeStyle' in config ||
       'minFontScale' in config ||
+      'maxMatrixCols' in config ||
       'readOnly' in config ||
       'placeholderSymbol' in config
     )
@@ -1854,6 +1859,7 @@ If you are using Vue, this may be because you are using the runtime-only build o
       smartFence: this.smartFence,
       letterShapeStyle: this.letterShapeStyle,
       minFontScale: this.minFontScale,
+      maxMatrixCols: this.maxMatrixCols,
       placeholderSymbol: this.options.placeholderSymbol ?? '▢',
       colorMap: (name) => this.colorMap(name),
       backgroundColorMap: (name) => this.backgroundColorMap(name),

src/editor-mathfield/options.ts

@@ -140,6 +140,7 @@ export function getDefault(): Required<_MathfieldOptions> {
     backgroundColorMap: defaultBackgroundColorMap,
     letterShapeStyle: l10n.locale.startsWith('fr') ? 'french' : 'tex',
     minFontScale: 0,
+    maxMatrixCols: 10,
 
     smartMode: false,
     smartFence: true,

src/latex-commands/environments.ts

@@ -229,7 +229,8 @@ export function makeEnvironment(
   name: Environment,
   content: (readonly Atom[])[][] = [[[]]],
   rowGaps: readonly Dimension[] = [],
-  args: readonly (null | Argument)[] = []
+  args: readonly (null | Argument)[] = [],
+  maxMatrixCols?: number
 ): ArrayAtom {
   content = defaultContent(
     content,
@@ -272,39 +273,39 @@ export function makeEnvironment(
         mathstyleName: 'textstyle',
         leftDelim: '(',
         rightDelim: ')',
-        columns: defaultColumns(args[0]),
+        columns: defaultColumns(args[0], maxMatrixCols),
       });
     case 'bmatrix':
     case 'bmatrix*':
       return new ArrayAtom(name, content, rowGaps, {
         mathstyleName: 'textstyle',
         leftDelim: '[',
         rightDelim: ']',
-        columns: defaultColumns(args[0]),
+        columns: defaultColumns(args[0], maxMatrixCols),
       });
     case 'Bmatrix':
     case 'Bmatrix*':
       return new ArrayAtom(name, content, rowGaps, {
         mathstyleName: 'textstyle',
         leftDelim: '\\lbrace',
         rightDelim: '\\rbrace',
-        columns: defaultColumns(args[0]),
+        columns: defaultColumns(args[0], maxMatrixCols),
       });
     case 'vmatrix':
     case 'vmatrix*':
       return new ArrayAtom(name, content, rowGaps, {
         mathstyleName: 'textstyle',
         leftDelim: '\\vert',
         rightDelim: '\\vert',
-        columns: defaultColumns(args[0]),
+        columns: defaultColumns(args[0], maxMatrixCols),
       });
     case 'Vmatrix':
     case 'Vmatrix*':
       return new ArrayAtom(name, content, rowGaps, {
         mathstyleName: 'textstyle',
         leftDelim: '\\Vert',
         rightDelim: '\\Vert',
-        columns: defaultColumns(args[0]),
+        columns: defaultColumns(args[0], maxMatrixCols),
       });
     case 'matrix':
     case 'matrix*':
@@ -314,13 +315,13 @@ export function makeEnvironment(
         mathstyleName: 'textstyle',
         leftDelim: '.',
         rightDelim: '.',
-        columns: defaultColumns(args?.[0]),
+        columns: defaultColumns(args?.[0], maxMatrixCols),
       });
     case 'smallmatrix':
     case 'smallmatrix*':
       return new ArrayAtom(name, content, rowGaps, {
         mathstyleName: 'scriptstyle',
-        columns: defaultColumns(args?.[0]),
+        columns: defaultColumns(args?.[0], maxMatrixCols),
         colSeparationType: 'small',
         arraystretch: 0.5,
       });
@@ -384,19 +385,9 @@ export function makeEnvironment(
   });
 }
 
-function defaultColumns(args: null | Argument): ColumnFormat[] {
-  return (
-    (args as ColumnFormat[]) ?? [
-      { align: 'c' },
-      { align: 'c' },
-      { align: 'c' },
-      { align: 'c' },
-      { align: 'c' },
-      { align: 'c' },
-      { align: 'c' },
-      { align: 'c' },
-      { align: 'c' },
-      { align: 'c' },
-    ]
-  );
+function defaultColumns(
+  args: null | Argument,
+  maxMatrixCols: number = 10
+): ColumnFormat[] {
+  return (args as ColumnFormat[]) ?? Array(maxMatrixCols).fill({ align: 'c' });
 }

src/latex-commands/types.ts

@@ -110,5 +110,6 @@ export type EnvironmentConstructor = (
   name: Environment,
   array: (readonly Atom[])[][],
   rowGaps: readonly Dimension[],
-  args: readonly (null | Argument)[]
+  args: readonly (null | Argument)[],
+  maxMatrixCols: number
 ) => Atom | null;

src/public/mathfield-element.ts

@@ -157,6 +157,7 @@ export interface MathfieldElementAttributes {
   'default-mode': string;
   'letter-shape-style': string;
   'min-font-scale': number;
+  'max-matrix-cols': number;
   'popover-policy': string;
   /**
    * The LaTeX string to insert when the spacebar is pressed (on the physical or
@@ -468,6 +469,7 @@ const DEPRECATED_OPTIONS = {
  * | `default-mode` | `mf.defaultMode` |
  * | `letter-shape-style` | `mf.letterShapeStyle` |
  * | `min-font-scale` | `mf.minFontScale` |
+ * | `max-matrix-cols` | `mf.maxMatrixCols` |
  * | `popover-policy` | `mf.popoverPolicy` |
  * | `math-mode-space` | `mf.mathModeSpace` |
  * | `read-only` | `mf.readOnly` |
@@ -544,6 +546,7 @@ export class MathfieldElement extends HTMLElement implements Mathfield {
       'default-mode': 'string',
       'letter-shape-style': 'string',
       'min-font-scale': 'number',
+      'max-matrix-cols': 'number',
       'popover-policy': 'string',
 
       'math-mode-space': 'string',
@@ -2228,6 +2231,16 @@ import 'https://unpkg.com/@cortex-js/compute-engine?module';
     this._setOptions({ minFontScale: value });
   }
 
+  /** @category Customization
+   * @inheritDoc LayoutOptions.maxMatrixCols
+   */
+  get maxMatrixCols(): number {
+    return this._getOption('maxMatrixCols');
+  }
+  set maxMatrixCols(value: number) {
+    this._setOptions({ maxMatrixCols: value });
+  }
+
   /** @category Customization
    * @inheritDoc EditingOptions.smartMode
    */

src/public/options.ts

@@ -572,6 +572,13 @@ mf.macros = {
    * **Default**: `0`
    */
   minFontScale: number;
+
+  /**
+   * Sets the maximum number of columns for the matrix environment. The default is
+   * 10 columns to match the behavior of the amsmath matrix environment.
+   * **Default**: `10`
+   */
+  maxMatrixCols: number;
 };
 
 /**

test/playwright-test-page/index.html

@@ -60,6 +60,11 @@ <h1>Playwright End-to-end Test</h1>
         #mf-5: latex mode disabled
       </div>
 
+      <div>
+        <math-field max-matrix-cols="11" id="mf-6""></math-field>
+        #mf-6: max-matrix-cols=11
+      </div>
+
       <textarea readonly disabled id="ta-1">hello world</textarea>
 
       <math-field id="mf-prompt" readonly virtual-keyboard-mode="onfocus"

test/playwright-tests/max-matrix-cols.spec.ts

@@ -0,0 +1,32 @@
+import type { MathfieldElement } from '../../src/public/mathfield-element';
+
+import { test, expect } from '@playwright/test';
+
+test('max-matrix-rows attribute', async ({ page }) => {
+  await page.goto('/dist/playwright-test-page/');
+
+  const testLatex = String.raw`\begin{bmatrix} a & b & c & d & e & f & g & h & i & j & k \\ l & m & n & o & p & q & r & s & t & u & v \end{bmatrix}`;
+
+  await page
+    .locator('#mf-1')
+    .evaluate(
+      (e: MathfieldElement, latex: string) => (e.value = latex),
+      testLatex
+    );
+
+  await page
+    .locator('#mf-6')
+    .evaluate(
+      (e: MathfieldElement, latex: string) => (e.value = latex),
+      testLatex
+    );
+
+  // check latex (default #mf-1 should wrap after 10 columns, #mf-6 with max-matrix-cols=11 should not wrap)
+  expect(
+    await page.locator('#mf-1').evaluate((e: MathfieldElement) => e.getValue('latex-expanded'))
+  ).toBe("\\begin{bmatrix}a & b & c & d & e & f & g & h & i & j\\\\ k & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{}\\\\ l & m & n & o & p & q & r & s & t & u\\\\ v & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{} & \\placeholder{}\\end{bmatrix}");
+
+  expect(
+    await page.locator('#mf-6').evaluate((e: MathfieldElement) => e.getValue('latex-expanded'))
+  ).toBe("\\begin{bmatrix}a & b & c & d & e & f & g & h & i & j & k\\\\ l & m & n & o & p & q & r & s & t & u & v\\end{bmatrix}");
+});