jodit 4.12.35 → 4.12.37

package/esm/core/selection/style/api/is-same-attributes.d.ts

@@ -5,8 +5,10 @@
  */
 import type { IDictionary } from "../../../../types/index";
 /**
- * Compares whether the given attributes match the element's own attributes
+ * Checks that every attribute from `attrs` is present on the element with
+ * the same value (one-directional match: extra own attributes of the element
+ * are ignored, empty `attrs` matches any element)
  * @private
  */
-export declare function isSameAttributes(elm: HTMLElement, attrs?: IDictionary): elm is HTMLElement;
+export declare function isSameAttributes(elm: HTMLElement, attrs?: IDictionary): boolean;
 export declare function elementsEqualAttributes(elm1: HTMLElement, elm2: HTMLElement): boolean;

package/esm/core/selection/style/api/is-same-attributes.js

@@ -8,13 +8,12 @@ import { attr } from "../../../helpers/utils/index.js";
 import { assert } from "../../../helpers/utils/assert.js";
 import { hasSameStyle } from "./has-same-style.js";
 /**
- * Compares whether the given attributes match the element's own attributes
+ * Checks that every attribute from `attrs` is present on the element with
+ * the same value (one-directional match: extra own attributes of the element
+ * are ignored, empty `attrs` matches any element)
  * @private
  */
 export function isSameAttributes(elm, attrs) {
-    if (!elm.attributes.length && !size(attrs)) {
-        return true;
-    }
     if (!size(attrs)) {
         return true;
     }

package/esm/core/selection/style/api/is-suit-element.d.ts

@@ -12,7 +12,8 @@ import type { ICommitStyle, Nullable } from "../../../../types/index";
  * @param commitStyle - style commit
  * @param elm - checked item
  * @param strict - strict mode - false - the default tag is suitable for us if it is also in the commit
- * @param strictStyle - strict style mode - true - the element has the same style keys as in the commit, but not their values
+ * @param strictStyle - strict style mode - true - the element must have the same style keys AND values
+ * as in the commit, false - matching style keys are enough
  * @private
  */
 export declare function isSuitElement(commitStyle: ICommitStyle, elm: Nullable<Node>, strict: boolean, strictStyle?: boolean): elm is HTMLElement;

package/esm/core/selection/style/api/is-suit-element.js

@@ -9,7 +9,8 @@ import { isNormalNode } from "./is-normal-node.js";
  * @param commitStyle - style commit
  * @param elm - checked item
  * @param strict - strict mode - false - the default tag is suitable for us if it is also in the commit
- * @param strictStyle - strict style mode - true - the element has the same style keys as in the commit, but not their values
+ * @param strictStyle - strict style mode - true - the element must have the same style keys AND values
+ * as in the commit, false - matching style keys are enough
  * @private
  */
 export function isSuitElement(commitStyle, elm, strict, strictStyle = true) {

package/esm/core/selection/style/api/list/toggle-ordered-list.js

@@ -51,6 +51,13 @@ function unwrapList(mode, list, li, jodit, cs) {
     extractSelectedPart(list, li, jodit);
     assert(Dom.isHTMLElement(li.parentElement), 'Element should be inside the list');
     Dom.unwrap(li.parentElement);
+    // In the REPLACE mode the content will be immediately wrapped in a `li`
+    // of the new list inside `wrapList`, so it should stay in the document.
+    // Replacing it with a fragment here would dissolve the content
+    // (with `enter: 'br'`) and the new list would never be inserted.
+    if (mode === REPLACE) {
+        return li;
+    }
     return Dom.replace(li, jodit.o.enter.toLowerCase() !== 'br'
         ? jodit.o.enter
         : jodit.createInside.fragment(), jodit.createInside);

package/esm/core/selection/style/api/toggle-attributes.js

@@ -95,7 +95,9 @@ function toggleClass(jodit, value, elm, mode, dry) {
 function toggleAttribute(jodit, value, elm, key, dry, mode) {
     assert(isString(value) || isNumber(value) || isBoolean(value) || value == null, 'Attribute value must be a string or number or boolean or null');
     const hook = jodit.e.fire.bind(jodit.e, `${_PREFIX}AfterToggleAttribute`);
-    if (attr(elm, key) === value) {
+    // `attr()` getter always returns a string, so a number/boolean value
+    // must be normalized, otherwise the toggle-off branch is unreachable
+    if (attr(elm, key) === (value == null ? value : String(value))) {
         !dry && attr(elm, key, null);
         mode = UNSET;
         !dry && hook(mode, elm, key, value);

package/esm/core/selection/style/commit-style.d.ts

@@ -15,7 +15,7 @@ export declare class CommitStyle implements ICommitStyle {
     get elementIsList(): boolean;
     get element(): HTMLTagNames;
     /**
-     * New element is blocked
+     * New element is a block element
      */
     get elementIsBlock(): boolean;
     /**

package/esm/core/selection/style/commit-style.js

@@ -13,7 +13,7 @@ export class CommitStyle {
         if (!data) {
             return false;
         }
-        return data[key];
+        return Boolean(data[key]);
     }
     setApplied(elm, key) {
         var _a;
@@ -28,7 +28,7 @@ export class CommitStyle {
         return this.options.element || this.defaultTag;
     }
     /**
-     * New element is blocked
+     * New element is a block element
      */
     get elementIsBlock() {
         return Boolean(this.options.element && IS_BLOCK.test(this.options.element));

package/esm/plugins/source/config.d.ts

@@ -15,15 +15,22 @@ declare module 'jodit/config' {
          */
         sourceEditor: 'area' | 'ace' | ((jodit: IJodit) => ISourceEditor);
         /**
-         * Options for [ace](https://ace.c9.io/#config) editor
+         * Options for [ace](https://ace.c9.io/#config) editor.
+         *
+         * Besides the named keys below, any other native ACE option is
+         * forwarded to `editor.setOptions()` as is, so e.g. `fontSize`,
+         * `tabSize` or `useSoftTabs` work too.
          *
          * ```js
          * Jodit.make('#editor', {
-         * 	showGutter: true,
-         * 	theme: 'ace/theme/idle_fingers',
-         * 	mode: 'ace/mode/html',
-         * 	wrap: true,
-         * 	highlightActiveLine: true
+         * 	sourceEditorNativeOptions: {
+         * 		showGutter: true,
+         * 		theme: 'ace/theme/idle_fingers',
+         * 		mode: 'ace/mode/html',
+         * 		wrap: true,
+         * 		highlightActiveLine: true,
+         * 		fontSize: '16px'
+         * 	}
          * })
          * ```
          */
@@ -33,6 +40,7 @@ declare module 'jodit/config' {
             mode: string;
             wrap: string | boolean | number;
             highlightActiveLine: boolean;
+            [option: string]: string | boolean | number | undefined;
         };
         /**
          * Beautify HTML then it possible

package/esm/plugins/source/editor/engines/ace.js

@@ -81,6 +81,11 @@ export class AceEditor extends SourceEditor {
                 this.instance.setOption('rtlText', true);
                 this.instance.setOption('rtl', true);
             }
+            // Forward every native ACE option the user provided (theme,
+            // mode, fontSize, tabSize, …). Without this only the handful of
+            // keys explicitly wired below were applied and extras such as
+            // `fontSize` were silently ignored. See #1285
+            this.instance.setOptions(editor.o.sourceEditorNativeOptions);
             this.instance.setTheme(editor.o.sourceEditorNativeOptions.theme);
             this.instance.renderer.setShowGutter(editor.o.sourceEditorNativeOptions.showGutter);
             this.instance

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit",
-	"version": "4.12.35",
+	"version": "4.12.37",
 	"description": "Jodit is an awesome and useful wysiwyg editor with filebrowser",
 	"main": "esm/index.js",
 	"types": "types/index.d.ts",

package/types/config.d.ts

@@ -1678,15 +1678,22 @@ interface Config {
      */
     sourceEditor: 'area' | 'ace' | ((jodit: IJodit) => ISourceEditor);
     /**
-     * Options for [ace](https://ace.c9.io/#config) editor
+     * Options for [ace](https://ace.c9.io/#config) editor.
+     *
+     * Besides the named keys below, any other native ACE option is
+     * forwarded to `editor.setOptions()` as is, so e.g. `fontSize`,
+     * `tabSize` or `useSoftTabs` work too.
      *
      * ```js
      * Jodit.make('#editor', {
-     * 	showGutter: true,
-     * 	theme: 'ace/theme/idle_fingers',
-     * 	mode: 'ace/mode/html',
-     * 	wrap: true,
-     * 	highlightActiveLine: true
+     * 	sourceEditorNativeOptions: {
+     * 		showGutter: true,
+     * 		theme: 'ace/theme/idle_fingers',
+     * 		mode: 'ace/mode/html',
+     * 		wrap: true,
+     * 		highlightActiveLine: true,
+     * 		fontSize: '16px'
+     * 	}
      * })
      * ```
      */
@@ -1696,6 +1703,7 @@ interface Config {
         mode: string;
         wrap: string | boolean | number;
         highlightActiveLine: boolean;
+        [option: string]: string | boolean | number | undefined;
     };
     /**
      * Beautify HTML then it possible

package/types/core/dom/dom.d.ts

@@ -34,7 +34,11 @@ export declare class Dom {
      */
     static unwrap(node: Node): void;
     /**
-     * Call functions for all nodes between `start` and `end`
+     * Call callback for all nodes between `start` and `end` in document order
+     * (`start` and `end` are not included). Iteration stops when the callback returns `true`.
+     *
+     * `end` must be positioned after `start` in the document (e.g. selection markers),
+     * otherwise iteration will stop only at the end of the tree.
      */
     static between(start: Node, end: Node, callback: (node: Node) => void | boolean): void;
     /**
@@ -46,14 +50,18 @@ export declare class Dom {
      * @param notMoveContent - false - Move content from elm to newTagName
      * @example
      * ```javascript
-     * Jodit.modules.Dom.replace(parent.editor.getElementsByTagName('span')[0], 'p');
-     * // Replace the first <span> element to the < p >
+     * Jodit.modules.Dom.replace(
+     *   parent.editor.getElementsByTagName('span')[0],
+     *   'p',
+     *   parent.createInside
+     * );
+     * // Replace the first <span> element to the <p>
      * ```
      */
-    static replace<T extends HTMLElement>(elm: Node, newTagName: HTMLTagNames): T;
     static replace<T extends HTMLElement>(elm: Node, newTagName: HTMLTagNames, create: ICreate, withAttributes?: boolean, notMoveContent?: boolean): T;
-    static replace<T extends Node>(elm: Node, newTagName: T): T;
-    static replace<T extends Node>(elm: Node, newTagName: T | string, create?: ICreate, withAttributes?: boolean, notMoveContent?: boolean): T;
+    static replace<T extends Node>(elm: Node, newElement: T, create?: ICreate, withAttributes?: boolean, notMoveContent?: boolean): T;
+    static replace<T extends Node>(elm: Node, html: string, create: ICreate, withAttributes?: boolean, notMoveContent?: boolean): T;
+    static replace<T extends Node>(elm: Node, newTagNameOrElement: HTMLTagNames | T, create: ICreate, withAttributes?: boolean, notMoveContent?: boolean): T;
     /**
      * Checks whether the Node text and blank (in this case it may contain invisible auxiliary characters ,
      * it is also empty )
@@ -80,9 +88,9 @@ export declare class Dom {
      */
     static isCell(elm: unknown): elm is HTMLTableCellElement;
     /**
-     * Check if element is a list	element UL or OL
+     * Check if element is a list element UL or OL
      */
-    static isList(elm: Nullable<Node>): elm is HTMLOListElement;
+    static isList(elm: Nullable<Node>): elm is HTMLUListElement | HTMLOListElement;
     /**
      * Check if element is a part of list	element LI
      */
@@ -103,7 +111,7 @@ export declare class Dom {
     /**
      * Check if element is comment node
      */
-    static isComment(node: Node): node is Comment;
+    static isComment(node: Nullable<Node> | false): node is Comment;
     /**
      * Check if element is element node
      */
@@ -147,7 +155,9 @@ export declare class Dom {
      */
     static find<T extends Node = Node>(node: Node, condition: NodeCondition, root: HTMLElement, leftToRight?: boolean, withChild?: boolean): Nullable<T>;
     /**
-     * Find next/prev node what `condition(next) === true`
+     * Lazily iterate over all nodes what follow after `start` (in document order
+     * for `leftToRight = true`, in reverse order otherwise) inside `root`.
+     * Ancestors of `start` are not yielded.
      */
     static nextGen(start: Node, root: HTMLElement, leftToRight?: boolean, withChild?: boolean): Generator<Node>;
     /**
@@ -159,7 +169,7 @@ export declare class Dom {
      * ```javascript
      * Jodit.modules.Dom.each(editor.s.current(), function (node) {
      *  if (node.nodeType === Node.TEXT_NODE) {
-     *      node.nodeValue = node.nodeValue.replace(Jodit.INVISIBLE_SPACE_REG_EX, '') // remove all of the text element codes invisible character
+     *      node.nodeValue = node.nodeValue.replace(Jodit.INVISIBLE_SPACE_REG_EXP(), '') // remove all of the text element codes invisible character
      *  }
      * });
      * ```
@@ -183,9 +193,16 @@ export declare class Dom {
      * Returns the nearest non-empty neighbor
      */
     static findNotEmptyNeighbor(node: Node, left: boolean, root: HTMLElement): Nullable<Node>;
+    /**
+     * Returns the previous (`left = true`) or next sibling of the node
+     */
     static sibling(node: Node, left?: boolean): Nullable<Node>;
     /**
      * It goes through all the elements in ascending order, and checks to see if they meet the predetermined condition
+     *
+     * The condition is checked for the `node` itself too. The `root` reached
+     * while ascending is checked only when `checkRoot = true`
+     * (but if `node === root` it is checked in any case).
      */
     static up<T extends HTMLElement>(node: Nullable<Node>, condition: NodeCondition, root?: Node, checkRoot?: boolean): Nullable<T>;
     /**
@@ -232,6 +249,12 @@ export declare class Dom {
      * Safe remove element from DOM
      */
     static safeRemove(...nodes: unknown[]): void;
+    /**
+     * Insert a node into the range and collapse the range to the start of
+     * the inserted content. Unlike the native `Range.insertNode` it does not
+     * split inseparable elements (BR, HR, IMG etc.) and removes empty text
+     * nodes produced by the split of a text container.
+     */
     static safeInsertNode(range: Range, node: Node): void;
     /**
      * Hide element
@@ -259,7 +282,7 @@ export declare class Dom {
      */
     static isMarker(elm: Nullable<Node>): elm is HTMLElement;
     /**
-     * Replace temporary elements from string
+     * Unwrap temporary elements inside a HTML string (keeps their content)
      */
     static replaceTemporaryFromString(value: string): string;
     /**

package/types/core/dom/lazy-walker.d.ts

@@ -8,6 +8,16 @@
  */
 import type { IAsync, IDestructible } from "../../types/index";
 import { Eventify } from "../event-emitter/eventify";
+/**
+ * Walks the DOM tree in small chunks between browser tasks so that even huge
+ * documents do not block the main thread.
+ *
+ * Events:
+ * - `visit` - is called for every node; return `true` to mark the pass as
+ *   "had effect" (it will be passed into the `end` event)
+ * - `break` - the pass was interrupted via [[LazyWalker.break]]
+ * - `end` - the pass is finished, receives `true` if some `visit` handler returned `true`
+ */
 export declare class LazyWalker extends Eventify<{
     visit: (node: Node) => boolean;
     break: (reason?: string) => void;
@@ -16,17 +26,24 @@ export declare class LazyWalker extends Eventify<{
     private readonly async;
     private readonly options;
     private workNodes;
+    /**
+     * Starts a new pass over the `root` tree.
+     * If a previous pass is still running it will be stopped first.
+     */
     setWork(root: Node): this;
     private hadAffect;
     private isWorked;
     private isFinished;
     constructor(async: IAsync, options?: {
+        /** Visit only nodes with this `nodeType` (e.g. `Node.ELEMENT_NODE`) */
         readonly whatToShow?: number;
+        /** Walk the tree from the last node to the first */
         readonly reverse?: boolean;
+        /** How many nodes are processed per one chunk. Default: 50 */
         readonly timeoutChunkSize?: number;
+        /** Delay between chunks in ms */
         readonly timeout?: number;
     });
-    private idleId;
     private __schedulerController;
     private _requestStarting;
     break(reason?: string): void;

package/types/core/selection/helpers/index.d.ts

@@ -6,7 +6,9 @@
 export * from "./move-node-inside-start";
 export * from "./move-the-node-along-the-edge-outward";
 /**
- * Check if the cursor is at the edge of the string
+ * Despite the name, returns `true` when the cursor is NOT at the checked edge
+ * of the text node: there is significant (non invisible-space) text between
+ * the offset and the start (`start = true`) or the end (`end = true`) of the string.
  * @private
  */
 export declare function cursorInTheEdgeOfString(container: Node, offset: number, start: boolean, end: boolean): boolean;

package/types/core/selection/selection.d.ts

@@ -90,6 +90,11 @@ export declare class Selection implements ISelect {
      * Restores user selections using marker invisible elements in the DOM.
      */
     restore(): void;
+    /**
+     * Inserts invisible fake nodes on the boundaries of the current selection
+     * and returns them. Unlike [[Select.save]] the selection stays valid while
+     * the DOM around it is being modified. Restore it later with [[Select.restoreFakes]].
+     */
     fakes(): [
     ] | [
         Node
@@ -97,6 +102,10 @@ export declare class Selection implements ISelect {
         Node,
         Node
     ];
+    /**
+     * Restores the selection previously saved with [[Select.fakes]]
+     * and removes the fake nodes (disconnected fakes are ignored).
+     */
     restoreFakes(fakes: [
     ] | [
         Node
@@ -244,5 +253,10 @@ export declare class Selection implements ISelect {
      * Split selection on two parts: left and right
      */
     splitSelection(currentBox: HTMLElement, edge?: Node): Nullable<Element>;
+    /**
+     * Expands the non-collapsed selection outward: boundaries positioned on the
+     * edge of their parents are moved out of them (e.g. `<p><b>|test|</b></p>`
+     * becomes `<p>|<b>test</b>|</p>`)
+     */
     expandSelection(): this;
 }

package/types/core/selection/style/api/is-same-attributes.d.ts

@@ -5,8 +5,10 @@
  */
 import type { IDictionary } from "../../../../types/index";
 /**
- * Compares whether the given attributes match the element's own attributes
+ * Checks that every attribute from `attrs` is present on the element with
+ * the same value (one-directional match: extra own attributes of the element
+ * are ignored, empty `attrs` matches any element)
  * @private
  */
-export declare function isSameAttributes(elm: HTMLElement, attrs?: IDictionary): elm is HTMLElement;
+export declare function isSameAttributes(elm: HTMLElement, attrs?: IDictionary): boolean;
 export declare function elementsEqualAttributes(elm1: HTMLElement, elm2: HTMLElement): boolean;

package/types/core/selection/style/api/is-suit-element.d.ts

@@ -12,7 +12,8 @@ import type { ICommitStyle, Nullable } from "../../../../types/index";
  * @param commitStyle - style commit
  * @param elm - checked item
  * @param strict - strict mode - false - the default tag is suitable for us if it is also in the commit
- * @param strictStyle - strict style mode - true - the element has the same style keys as in the commit, but not their values
+ * @param strictStyle - strict style mode - true - the element must have the same style keys AND values
+ * as in the commit, false - matching style keys are enough
  * @private
  */
 export declare function isSuitElement(commitStyle: ICommitStyle, elm: Nullable<Node>, strict: boolean, strictStyle?: boolean): elm is HTMLElement;

package/types/core/selection/style/commit-style.d.ts

@@ -15,7 +15,7 @@ export declare class CommitStyle implements ICommitStyle {
     get elementIsList(): boolean;
     get element(): HTMLTagNames;
     /**
-     * New element is blocked
+     * New element is a block element
      */
     get elementIsBlock(): boolean;
     /**

package/types/plugins/source/config.d.ts

@@ -15,15 +15,22 @@ declare module 'jodit/config' {
          */
         sourceEditor: 'area' | 'ace' | ((jodit: IJodit) => ISourceEditor);
         /**
-         * Options for [ace](https://ace.c9.io/#config) editor
+         * Options for [ace](https://ace.c9.io/#config) editor.
+         *
+         * Besides the named keys below, any other native ACE option is
+         * forwarded to `editor.setOptions()` as is, so e.g. `fontSize`,
+         * `tabSize` or `useSoftTabs` work too.
          *
          * ```js
          * Jodit.make('#editor', {
-         * 	showGutter: true,
-         * 	theme: 'ace/theme/idle_fingers',
-         * 	mode: 'ace/mode/html',
-         * 	wrap: true,
-         * 	highlightActiveLine: true
+         * 	sourceEditorNativeOptions: {
+         * 		showGutter: true,
+         * 		theme: 'ace/theme/idle_fingers',
+         * 		mode: 'ace/mode/html',
+         * 		wrap: true,
+         * 		highlightActiveLine: true,
+         * 		fontSize: '16px'
+         * 	}
          * })
          * ```
          */
@@ -33,6 +40,7 @@ declare module 'jodit/config' {
             mode: string;
             wrap: string | boolean | number;
             highlightActiveLine: boolean;
+            [option: string]: string | boolean | number | undefined;
         };
         /**
          * Beautify HTML then it possible