mathlive - npm Package Compare versions

Comparing version 0.57.0 to 0.58.0

dist/public/commands.d.ts

@@ -1,2 +0,2 @@
-/* 0.57.0 */
import type { Keys } from './types-utils';
+/* 0.58.0 */
import type { Keys } from './types-utils';
 import type { ParseMode, Style } from './core';
@@ -18,6 +18,12 @@ import type { Mathfield, Model } from './mathfield';
  * Commands return true if they resulted in a dirty state
- * @command mathfield.perform
+ * @command executeCommand
  */
 export interface Commands {
+    /**
+     * @category Undo/Redo
+     */
     undo: (mathfield: Mathfield) => boolean;
+    /**
+     * @category Undo/Redo
+     */
     redo: (mathfield: Mathfield) => boolean;
@@ -30,2 +36,3 @@ /**
     performWithFeedback: (mathfield: Mathfield, command: string) => boolean;
+    commit: (mathfield: Mathfield) => boolean;
     /**
@@ -41,3 +48,2 @@ * @category Auto-complete
      * @category Auto-complete
-
      */
@@ -44,0 +50,0 @@ previousSuggestion: (mathfield: Mathfield) => boolean;

dist/public/core.d.ts

@@ -1,2 +0,2 @@
-/* 0.57.0 */
/**
+/* 0.58.0 */
/**
  * The mode that indicates how a portion of content is interpreted
@@ -9,3 +9,3 @@ *
  *
- * See {@See MathfieldOptions}, {@See convertLlatexToMarkup},  {@See convertLatexToMathMl}
+ * See [[`MathfieldOptions`]], [[`convertLatexToMarkup`]]
  *
@@ -45,3 +45,3 @@ *
  * Typically, those are controlled with explicit commands, such as `\mathbb{}` or
- * `\mathfrak{}`. This type is used with the {@See applyStyle} method to change
+ * `\mathfrak{}`. This type is used with the [[`applyStyle`]] method to change
  * the styling of a range of selected characters.
@@ -66,2 +66,5 @@ *
  * applied.
+ *
+ * **See Also**
+ * * [[`Style`]]
  */
@@ -103,2 +106,8 @@ export declare type Variant = 'ams' | 'double-struck' | 'calligraphic' | 'script' | 'fraktur' | 'sans-serif' | 'monospace' | 'normal' | 'main' | 'math';
 }
+/**
+ * **See Also**
+ * * [[`MacroDictionary`]]
+ * * [Macros Example](/mathlive/examples/macros/)
+ *
+ */
 export declare type MacroDefinition = {
@@ -123,5 +132,7 @@ def: string;
 ```
-*/
+ * **See Also**
+ * * [Macros Example](/mathlive/examples/macros/)
+ */
 export declare type MacroDictionary = {
     [name: string]: string | MacroDefinition;
 };

dist/public/mathfield-element.d.ts

@@ -1,2 +0,2 @@
-/* 0.57.0 */
import { MathfieldOptions } from './options';
+/* 0.58.0 */
import { MathfieldOptions } from './options';
 import { Selector } from './commands';
@@ -59,3 +59,49 @@ import { InsertOptions, Mathfield, OutputFormat, Range } from './mathfield';
  *
+ * It inherits many useful properties and methods from [[`HTMLElement`]] such
+ * as `style`, `tabIndex`, `addListener()`, etc...
  *
+ * To create a new `MathfieldElement`:
+ *
+ * ```javascript
+ * // Create a new MathfieldElement
+ * const mfe = new MathfieldElement();
+ * // Attach it to the document
+ * document.body.appendChild(mfe);
+ * ```
+ *
+ * The `MathfieldElement` constructor has an optional argument of
+ * [[`MathfieldOptions`]] to configure the element. The options can also
+ * be modified later:
+ * ```javascript
+ * mfe.setOptions({smartFence: true});
+ * ```
+ *
+ * ### CSS Variables
+ *
+ * The following CSS variables, if applied to the mathfield element or
+ * to one of its ancestors, can be used to customize the appearance of the
+ * mathfield.
+ *
+ * | CSS Variable | Usage |
+ * |:---|:---|
+ * | `--hue` | Hue of the highlight color and the caret |
+ * | `--highlight` | Color of the selection |
+ * | `--highlight-inactive` | Color of the selection, when the mathfield is not focused |
+ * | `--caret` | Color of the caret/insertion point |
+ * | `--primary` | Primary accent color, used for example in the virtual keyboard |
+ * | `--text-font-family` | The font stack used in text mode |
+ * | `--keyboard-zindex` | The z-index attribute of the virtual keyboard panel |
+ *
+ * ### CSS Parts
+ *
+ * The `virtual-keyboard-toggle` CSS part can be used to style the virtual
+ * keyboard toggle. To use it, define a CSS style with a `::part()` selector
+ * for example:
+ * ```css
+ * math-field::part(virtual-keyboard-toggle) {
+ *  color: red;
+ * }
+ * ```
+ *
+ *
  * ### Attributes
@@ -116,3 +162,3 @@ *
  *
- *  See {@see config} for more details about these options.
+ *  See [[`MathfieldOptions`]] for more details about these options.
  *
@@ -126,13 +172,16 @@ * ### Events
  * |:---|:---|:---|
- * | `blur` | `(): void ` | The mathfield is losing focus |
- * | `change` | `(): void ` | The value of the mathfield has changed |
+ * | `input |  | The value of the mathfield has been modified |
+ * | `change` |  | The user has commited the value of the mathfield |
+ * | `selection-change` |  | The selection of the mathfield has changed |
+ * | `mode-change` |  | The mode of the mathfield has changed |
+ * | `undo-state-change` |  | The state of the undo stack has changed |
+ * | `read-aloud-status-change` |  | The status of a read aloud operation has changed |
+ * | `virtual-keyboard-toggle` |  | The visibility of the virtual keyboard has changed |
+ * | `blur` |  | The mathfield is losing focus |
+ * | `focus` |  | The mathfield is gaining focus |
+ * | `focus-out` | `(direction: 'forward' | 'backward' | 'upward' | 'downward'): boolean` | The user is navigating out of the mathfield, typically using the keyboard |
  * | `math-error` | `ErrorListener<ParserErrorCode | MathfieldErrorCode>` | A parsing or configuration error happened |
- * | `focus` | `(): void` | The mathfield is gaining focus |
  * | `keystroke` | `(keystroke: string, event: KeyboardEvent): boolean` | The user typed a keystroke with a physical keyboard |
- * | `mode-change` | `(): void` | The mode of the mathfield has changed |
- * | `focus-out` | `(direction: 'forward' | 'backward' | 'upward' | 'downward'): boolean` | The user is navigating out of the mathfield, typically using the keyboard |
- * | `read-aloud-status-change` | `(): void` | The status of a read aloud operation has changed |
- * | `selection-change` | `(): void` | The selection of the mathfield has changed |
- * | `undo-state-change` | `(): void` | The state of the undo stack has changed |
- * | `virtual-keyboard-toggle` | `(): void` | The visibility of the virtual keyboard has changed |
+ * | `mount` | | Fired once when the element has been attached to the DOM |
+ * | `unmount` | | Fired once when the element is about to be removed from the DOM |
  *
@@ -173,18 +222,99 @@ */
     set mode(value: ParseMode);
+    /**
+     *  @category Options
+     */
     getOptions<K extends keyof MathfieldOptions>(keys: K[]): Pick<MathfieldOptions, K>;
     getOptions(): MathfieldOptions;
     getOption<K extends keyof MathfieldOptions>(key: K): MathfieldOptions[K];
+    /**
+     *  @category Options
+     */
     setOptions(options: Partial<MathfieldOptions>): void;
     /**
-     * {@inheritDoc Mathfield.executeCommand}
+     * Execute a [[`Commands`|command]] defined by a selector.
+     * ```javascript
+     * mfe.executeCommand('add-column-after');
+     * mfe.executeCommand(['switch-mode', 'math']);
+     * ```
+     *
+     * @param command - A selector, or an array whose first element
+     * is a selector, and whose subsequent elements are arguments to the selector.
+     *
+     * Selectors can be passed either in camelCase or kebab-case.
+     *
+     * ```javascript
+     * // Both calls do the same thing
+     * mfe.executeCommand('selectAll');
+     * mfe.executeCommand('select-all');
+     * ```
      */
     executeCommand(command: Selector | [Selector, ...any[]]): boolean;
+    /**
+     *  @category Accessing and Changing the content
+     */
     getValue(format?: OutputFormat): string;
+    /**
+     *  @category Accessing and Changing the content
+     */
     setValue(value?: string, options?: InsertOptions): void;
+    /**
+     * Return true if the mathfield is currently focused (responds to keyboard
+     * input).
+     *
+     * @category Focus
+     *
+     */
     hasFocus(): boolean;
+    /**
+     * Sets the focus to the mathfield (will respond to keyboard input).
+     *
+     * @category Focus
+     *
+     */
     focus(): void;
+    /**
+     * Remove the focus from the mathfield (will no longer respond to keyboard
+     * input).
+     *
+     * @category Focus
+     *
+     */
     blur(): void;
+    /**
+     * Select the content of the mathfield.
+     * @category Selection
+     */
     select(): void;
+    /**
+     * Inserts a block of text at the current insertion point.
+     *
+     * This method can be called explicitly or invoked as a selector with
+     * `executeCommand("insert")`.
+     *
+     * After the insertion, the selection will be set according to the
+     * `options.selectionMode`.
+     *
+     *  @category Accessing and Changing the content
+     */
     insert(s: string, options?: InsertOptions): boolean;
+    /**
+     * Updates the style (color, bold, italic, etc...) of the selection or sets
+     * the style to be applied to future input.
+     *
+     * If there is a selection, the style is applied to the selection
+     *
+     * If the selection already has this style, it is removed.
+     *
+     * If the selection has the style partially applied (i.e. only some
+     * sections), it is removed from those sections, and applied to the
+     * entire selection.
+     *
+     * If there is no selection, the style will apply to the next character typed.
+     *
+     * @category Accessing and Changing the content
+     */
     applyStyle(style: Style): void;
+    /**
+     * @category Selection
+     */
     getCaretPosition(): {
@@ -194,2 +324,5 @@ x: number;
     };
+    /**
+     * @category Selection
+     */
     setCaretPosition(x: number, y: number): boolean;
@@ -218,2 +351,5 @@ /**
     get disabled(): boolean;
+    /**
+     *  @category Accessing and Changing the content
+     */
     set value(value: string);
@@ -225,7 +361,13 @@ /**
      * ```
+     *  @category Accessing and Changing the content
      */
     get value(): string;
     /**
-     * A range representing the selection.
+     * An array of ranges representing the selection.
      *
+     * It is guaranteed there will be at least one element. If a discontinuous
+     * selection is present, the result will include more than one element.
+     *
+     * @category Selection
+     *
      */
@@ -236,14 +378,20 @@ get selection(): Range[];
      *
+     * @category Selection
      */
     set selection(value: Range[]);
     /**
-     * Read the position of the caret
+     * The position of the caret/insertion point, from 0 to `lastPosition`.
      *
+     * @category Selection
+     *
      */
     get position(): number;
     /**
-     * Change the position of the caret
-     *
+     * @category Selection
      */
     set position(value: number);
+    /**
+     * The last valid position.
+     * @category Selection
+     */
     get lastPosition(): number;
@@ -250,0 +398,0 @@ }

dist/public/mathfield.d.ts

@@ -1,2 +0,2 @@
-/* 0.57.0 */
import { Selector } from './commands';
+/* 0.58.0 */
import { Selector } from './commands';
 import { MathfieldOptions } from './options';
@@ -19,2 +19,4 @@ import { ParseMode, MacroDictionary, Style } from './core';
  *
+ * **See Also**
+ * * [[`selection`]]
  */
@@ -114,11 +116,11 @@ export interface Range {
     /**
-     * @deprecated use {@see getOptions}
+     * @deprecated Use [[`getOptions`]]
      */
     getConfig?<K extends keyof MathfieldOptions>(keys: K[]): Pick<MathfieldOptions, K>;
     /**
-     * @deprecated use {@see getOptions}
+     * @deprecated Use [[`getOptions`]]
      */
     getConfig?<K extends keyof MathfieldOptions>(key: K): MathfieldOptions[K];
     /**
-     * @deprecated use {@see getOptions}
+     * @deprecated Use [[`getOptions`]]
      */
@@ -130,3 +132,3 @@ getConfig?(): MathfieldOptions;
     /**
-     * @deprecated use {@see setOptions}
+     * @deprecated Use [[`setOptions`]]
      */
@@ -148,3 +150,7 @@ setConfig?(options: Partial<MathfieldOptions>): void;
     /**
-     * Execute a command defined by a selector.
+     * Execute a [[`Commands`|command]] defined by a selector.
+     * ```javascript
+     * mfe.executeCommand('add-column-after');
+     * mfe.executeCommand(['switch-mode', 'math']);
+     * ```
      *
@@ -158,10 +164,9 @@ * @param command - A selector, or an array whose first element
      * // Both calls do the same thing
-     * mathfield.executeCommand('selectAll');
-     * mathfield.executeCommand('select-all');
+     * mfe.executeCommand('selectAll');
+     * mfe.executeCommand('select-all');
      * ```
-     *
      */
     executeCommand(command: Selector | [Selector, ...any[]]): boolean;
     /**
-     * @deprecated Use {@see executeCommand }
+     * @deprecated Use [[`executeCommand`]]
      */
@@ -174,3 +179,2 @@ $perform?(command: Selector | [Selector, ...any[]]): boolean;
      * **Default** = `"latex"`
-     * @return {string}
      * @category Accessing the Content
@@ -180,3 +184,3 @@ */
     /**
-     * @deprecated Use {@see getValue }
+     * @deprecated Use [[`getValue`]]
      */
@@ -195,7 +199,7 @@ $text?(format?: OutputFormat): string;
     /**
-     * @deprecated Use {@see executeCommand }
+     * @deprecated Use [[`executeCommand`]]
      */
     $select?(): void;
     /**
-     * @deprecated Use {@see executeCommand }
+     * @deprecated Use [[`executeCommand`]]
      */
@@ -209,3 +213,3 @@ $clearSelection?(): void;
      *
-     * @deprecated
+     * @deprecated Use `selection[0].collapsed`
      */
@@ -222,3 +226,3 @@ $selectionIsCollapsed?(): boolean;
      *
-     * @deprecated
+     * @deprecated Use `mf.selection[0].depth`
      */
@@ -245,3 +249,3 @@ $selectionDepth?(): number;
      */
-    setValue(text?: string, options?: InsertOptions): void;
+    setValue(latex?: string, options?: InsertOptions): void;
     /**
@@ -258,3 +262,3 @@ * Sets or gets the content of the mathfield.
      *
-     * @deprecated use {@see setValue} and {@see getValue}
+     * @deprecated Use [[`setValue`]] and [[`getValue`]]
      */
@@ -284,3 +288,3 @@ $latex?(text?: string, options?: InsertOptions): string;
      *
-     * @deprecated Use {$see insert}
+     * @deprecated Use [[`insert`]]
      */
@@ -291,3 +295,3 @@ $insert?(s: string, options?: InsertOptions): boolean;
      *
-     * @deprecated Use {@See hasFocus}
+     * @deprecated Use [[`hasFocus`]]
      */
@@ -302,3 +306,3 @@ $hasFocus?(): boolean;
      * @category Focus
-     * @deprecated Use `focus()`
+     * @deprecated Use [[`focus`]]
      */
@@ -308,3 +312,3 @@ $focus?(): void;
      * @category Focus
-     * @deprecated Use `blur()`
+     * @deprecated Use [[`blur`]]
      */
@@ -335,3 +339,3 @@ $blur?(): void;
     /**
-     * @deprecated Use {@See applyStyle}
+     * @deprecated Use [[`applyStyle`]]
      */
@@ -353,3 +357,3 @@ $applyStyle?(style: Style): void;
      * @category Changing the Content
-     * @deprecated Use {@See executeCommand} or {@See setValue}
+     * @deprecated Use [[`executeCommand`]] or [[`setValue`]]
      */
@@ -362,3 +366,3 @@ $keystroke?(keys: string, evt?: KeyboardEvent): boolean;
      * @category Changing the Content
-     * @deprecated Use {@See executeCommand} or {@See setValue}
+     * @deprecated Use [[`executeCommand`]] or [[`setValue`]]
      */
@@ -365,0 +369,0 @@ $typedText?(text: string): void;

dist/public/mathlive.d.ts

@@ -1,2 +0,2 @@
-/* 0.57.0 */
/**
+/* 0.58.0 */
/**
  *
@@ -16,4 +16,4 @@ * Use MathLive to render and edit mathematical formulas.
  *
- * @packageDocumentation MathLive SDK Reference 0.57.0
- * @version 0.57.0
+ * @packageDocumentation MathLive SDK Reference 0.58.0
+ * @version 0.58.0
  *
@@ -29,3 +29,3 @@ */
 /**
- * Current version: `0.57.0`
+ * Current version: `0.58.0`
  *
@@ -44,2 +44,4 @@ * The version string of the SDK using the [semver](https://semver.org/) convention:
  *
+ * Consider using a `<math-field>` tag or `new MathfieldElement()` instead. {.notice--warning}
+ *
  * The `mathfield` property of the DOM element is a reference to the corresponding
@@ -62,4 +64,5 @@ * `Mathfield` object. This value is also returned by `makeMathField()`.
  * @keywords create, make, mathfield
+ * @deprecated Use `MathfieldElement`.
  */
-export declare function makeMathField(element: HTMLElement | string, config: MathfieldOptions): Mathfield;
+export declare function makeMathField(element: HTMLElement | string, options: MathfieldOptions): Mathfield;
 /**
@@ -94,3 +97,4 @@ * Convert a LaTeX string to a string of HTML markup.
 /**
- * * @deprecated Use {@See convertLatexToMarkup }
+ * @deprecated Use [[`convertLatexToMarkup`]]
+ * @category Converting
  */
@@ -113,2 +117,4 @@ export declare function latexToMarkup(text: string, options?: {
  * parsing the input string.
+ *
+ * @category Converting
  */
@@ -121,3 +127,4 @@ export declare function convertLatexToMathMl(latex: string, options?: {
 /**
- * @deprecated Use {@See convertLatexToMathMl }
+ * @deprecated Use [[`convertLatexToMathMl`]]
+ * @category Converting
  */
@@ -201,3 +208,4 @@ export declare function latexToMathML(latex: string, options?: {
 /**
- * @deprecated Use {@See convertLatexToSpeakableText }
+ * @deprecated Use [[`convertLatexToSpeakableText`]]
+ * @category Converting
  */
@@ -204,0 +212,0 @@ export declare function latexToSpeakableText(latex: string, options: TextToSpeechOptions & {

dist/public/options.d.ts

@@ -1,2 +0,2 @@
-/* 0.57.0 */
import { ErrorListener, MacroDictionary, ParseMode, ParserErrorCode, MathfieldErrorCode } from './core';
+/* 0.58.0 */
import { ErrorListener, MacroDictionary, ParseMode, ParserErrorCode, MathfieldErrorCode } from './core';
 import type { Mathfield } from './mathfield';
@@ -418,2 +418,10 @@ import type { Selector } from './commands';
  * occured.
+ *
+ * In general instead of using this interface you should be listening to the
+ * corresponding event on `MathfieldElement`, i.e.
+ * ```javascript
+mfe.addEventListener('input', (ev) => {
+    console.log(ev.target.value);
+});
+ * ```
  */
@@ -431,2 +439,3 @@ export interface MathfieldListeners {
     onUndoStateDidChange: UndoStateChangeListener;
+    onCommit: (sender: Mathfield) => void;
     onModeChange: (sender: Mathfield, mode: ParseMode) => void;
@@ -751,3 +760,3 @@ onVirtualKeyboardToggle: (sender: Mathfield, visible: boolean, keyboardElement: HTMLElement) => void;
 /**
- * @deprecated Use MathfieldOptions
+ * @deprecated Use [[`MathfieldOptions`]]
  */
@@ -754,0 +763,0 @@ export declare type MathfieldConfig = MathfieldOptions;

dist/public/types-utils.d.ts

@@ -1,2 +0,2 @@
-/* 0.57.0 */
/**
+/* 0.58.0 */
/**
  * @internal
@@ -3,0 +3,0 @@ */

package.json

 {
     "name": "mathlive",
-    "version": "0.57.0",
+    "version": "0.58.0",
     "description": "Render and edit beautifully typeset math",
@@ -57,3 +57,3 @@ "license": "MIT",
         "npm": ">=6.14.8",
-        "node": ">=13.0.0"
+        "node": ">=12.0.0"
     },
@@ -99,3 +99,3 @@ "browserslist": [
         "cssnano": "^4.1.10",
-        "eslint": "^7.10.0",
+        "eslint": "^7.11.0",
         "eslint-config-prettier": "^6.12.0",
@@ -102,0 +102,0 @@ "eslint-plugin-no-unsanitized": "^3.1.4",

README.md

@@ -63,3 +63,3 @@ <h1 align="center">
         <math-field>f(x)=</math-field>
-        <script src="https://unpkg.com/mathlive/dist/mathlive.mjs"></script>
+        <script src="https://unpkg.com/mathlive/dist/mathlive.min.js"></script>
     </body>
@@ -82,3 +82,3 @@ </html>
         <script type="module">
-            import { renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.mjs';
+            import { renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.min.mjs';
             renderMathInDocument();
@@ -85,0 +85,0 @@ </script>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4875121

increased by0.5%

Lines of code

75253

increased by0.85%

No dependency changes