jodit 3.15.2 → 3.16.2

package/types/config.d.ts

@@ -11,6 +11,10 @@ import type { IExtraPlugin, IDictionary, IViewOptions, NodeFunction, Attributes,
  * Default Editor's Configuration
  */
 export declare class Config implements IViewOptions {
+    /**
+     * Timeout of all asynchronous methods
+     */
+    defaultTimeout: number;
     namespace: string;
     /**
      * Editor loads completely without plugins. Useful when debugging your own plugin.
@@ -100,11 +104,6 @@ export declare class Config implements IViewOptions {
      * if set true then the current mode is saved in a cookie , and is restored after a reload of the page
      */
     saveModeInStorage: boolean;
-    /**
-     * Options specifies whether the editor is to have its spelling and grammar checked or not
-     * @see {@link http://www.w3schools.com/tags/att_global_spellcheck.asp}
-     */
-    spellcheck: boolean;
     /**
      * Class name that can be appended to the editor
      *
@@ -113,7 +112,7 @@ export declare class Config implements IViewOptions {
      *
      * @example
      * ```javascript
-     * new Jodit('#editor', {
+     * Jodit.make('#editor', {
      *    editorCssClass: 'some_my_class'
      * });
      * ```
@@ -131,7 +130,7 @@ export declare class Config implements IViewOptions {
      *
      * @example
      * ```javascript
-     * new Jodit('#editor', {
+     * Jodit.make('#editor', {
      * 		style: {
      * 		 font: '12px Arial'
      * 		}
@@ -144,7 +143,7 @@ export declare class Config implements IViewOptions {
      *
      * @example
      * ```javascript
-     * var editor = new Jodit('#editor');
+     * var editor = Jodit.make('#editor');
      * document.getElementById('editor').addEventListener('change', function () {
      *      console.log(this.value);
      * })
@@ -158,7 +157,7 @@ export declare class Config implements IViewOptions {
      * 'rtl' – Indicates a Right-To-Left text direction (like in Arabic).
      * @example
      * ```javascript
-     * new Jodit('.editor', {
+     * Jodit.make('.editor', {
      *    direction: 'rtl'
      * })
      * ```
@@ -174,7 +173,7 @@ export declare class Config implements IViewOptions {
      * <!-- include in you page lang file -->
      * <script src="jodit/lang/de.js"></script>
      * <script>
-     * var editor = new Jodit('.editor', {
+     * var editor = Jodit.make('.editor', {
      *    language: 'de'
      * });
      * </script>
@@ -187,7 +186,7 @@ export declare class Config implements IViewOptions {
      * @example
      * ```html
      * <script>
-     * var editor = new Jodit('.editor', {
+     * var editor = Jodit.make('.editor', {
      *    debugLanguage: true
      * });
      *
@@ -201,7 +200,7 @@ export declare class Config implements IViewOptions {
      *
      * @example
      * ```javascript
-     * var editor = new Jodit('#editor', {
+     * var editor = Jodit.make('#editor', {
      *     language: 'ru',
      *     i18n: {
      *         ru: {
@@ -254,7 +253,7 @@ export declare class Config implements IViewOptions {
      * Jodit.MODE_SOURCE syntax highlighting source editor
      * @example
      * ```javascript
-     * var editor = new Jodit('#editor', {
+     * var editor = Jodit.make('#editor', {
      *     defaultMode: Jodit.MODE_SPLIT
      * });
      * console.log(editor.getRealMode())
@@ -269,7 +268,7 @@ export declare class Config implements IViewOptions {
      * The colors in HEX representation to select a color for the background and for the text in colorpicker
      * @example
      * ```javascript
-     *  new Jodit('#editor', {
+     *  Jodit.make('#editor', {
      *     colors: ['#ff0000', '#00ff00', '#0000ff']
      * })
      * ```
@@ -279,7 +278,7 @@ export declare class Config implements IViewOptions {
      * The default tab color picker
      * @example
      * ```javascript
-     *  new Jodit('#editor2', {
+     * Jodit.make('#editor2', {
      *     colorPickerDefaultTab: 'color'
      * })
      * ```
@@ -303,11 +302,11 @@ export declare class Config implements IViewOptions {
      * Do not init these plugins
      * @example
      * ```typescript
-     * var editor = new Jodit('.editor', {
+     * var editor = Jodit.make('.editor', {
      *    disablePlugins: 'table,iframe'
      * });
      * //or
-     * var editor = new Jodit('.editor', {
+     * var editor = Jodit.make('.editor', {
      *    disablePlugins: ['table', 'iframe']
      * });
      * ```
@@ -317,7 +316,7 @@ export declare class Config implements IViewOptions {
      * Init and download extra plugins
      * @example
      * ```typescript
-     * var editor = new Jodit('.editor', {
+     * var editor = Jodit.make('.editor', {
      *    extraPlugins: ['emoji']
      * });
      * ```
@@ -329,7 +328,7 @@ export declare class Config implements IViewOptions {
      */
     basePath?: string;
     /**
-     * This buttons list will be added to option.buttons
+     * These buttons list will be added to option.buttons
      */
     extraButtons: Array<string | IControlType>;
     /**
@@ -371,6 +370,41 @@ export declare class Config implements IViewOptions {
     extraIcons: IDictionary<string>;
     /**
      * Default attributes for created inside editor elements
+     * @example
+     * ```js
+     * const editor2 = Jodit.make('#editor', {
+     * 	createAttributes: {
+     * 		div: {
+     * 			class: 'test'
+     * 		},
+     * 		ul: function (ul) {
+     * 			ul.classList.add('ui-test');
+     * 		}
+     * 	}
+     * });
+     *
+     * const div2 = editor2.createInside.div();
+     * expect(div2.className).equals('test');
+     *
+     * const ul = editor2.createInside.element('ul');
+     * expect(ul.className).equals('ui-test');
+     * ```
+     * Or JSX in React
+     * @example
+     * ```jsx
+     * import React, {useState, useRef} from 'react';
+     * import JoditEditor from "jodit-react";
+     *
+     * const config = {
+     * 	createAttributes: {
+     * 		div: {
+     * 			class: 'align-center'
+     * 		}
+     * 	}
+     * };
+     *
+     * <JoditEditor config={config}/>
+     * ```
      */
     createAttributes: IDictionary<Attributes | NodeFunction>;
     /**
@@ -390,7 +424,7 @@ export declare class Config implements IViewOptions {
      * Note - this is not the width of the device, the width of the editor
      * @example
      * ```javascript
-     * new Jodit('#editor', {
+     * Jodit.make('#editor', {
      *     buttons: ['bold', 'italic', 'source'],
      *     buttonsMD: ['bold', 'italic'],
      *     buttonsXS: ['bold', 'fullsize'],
@@ -398,32 +432,31 @@ export declare class Config implements IViewOptions {
      * ```
      * @example
      * ```javascript
-     * new Jodit('#editor2', {
+     * Jodit.make('#editor2', {
      *     buttons: [{
-     *         name: 'enty',
+     *         name: 'empty',
      *         icon: 'source',
-     *         exec: function () {
-     *             var dialog = new Jodit.modules.Dialog(this),
-     *                 div = document.createElement('div'),
-     *                 text = document.createElement('textarea');
-     *             div.textContent = this.val();
+     *         exec: function (editor) {
+     *             const dialog = new Jodit.modules.Dialog({}),
+     *                 text = editor.c.element('textarea');
+     *
      *             dialog.setHeader('Source code');
      *             dialog.setContent(text);
      *             dialog.setSize(400, 300);
-     *             dom(text)
-     *                 .css({
-     *                     width: '100%',
-     *                     height: '100%'
-     *                 })
-     *                 .val(div.innerHTML.replace(/<br>/g, '\n'));
-     *             dialog.{@link module:Dialog~open|open}();
+     *
+     *             Jodit.modules.Helpers.css(elm, {
+     *                 width: '100%',
+     *                 height: '100%'
+     *             })
+
+     *             dialog.open();
      *         }
      *     }]
      * });
      * ```
      * @example
      * ```javascript
-     * new Jodit('#editor2', {
+     * Jodit.make('#editor2', {
      *     buttons: Jodit.defaultOptions.buttons.concat([{
      *        name: 'listsss',
      *        iconURL: 'stuf/dummy.png',

package/types/core/async/async.d.ts

@@ -22,7 +22,7 @@ export declare class Async implements IAsync {
      *
      * @example
      * ```javascript
-     * var jodit = new Jodit('.editor');
+     * var jodit = Jodit.make('.editor');
      * jodit.e.on('mousemove', jodit.async.debounce(() => {
      * 	// Do expensive things
      * }, 100));
@@ -35,7 +35,7 @@ export declare class Async implements IAsync {
      *
      * @example
      * ```javascript
-     * var jodit = new Jodit('.editor');
+     * var jodit = Jodit.make('.editor');
      * jodit.e.on(document.body, 'scroll', jodit.async.throttle(function() {
      * 	// Do expensive things
      * }, 100));
@@ -49,11 +49,18 @@ export declare class Async implements IAsync {
      */
     promiseState(p: Promise<any>): Promise<'pending' | 'fulfilled' | 'rejected'>;
     private requestsIdle;
+    private requestsRaf;
     private requestIdleCallbackNative;
     private cancelIdleCallbackNative;
-    requestIdleCallback(callback: IdleRequestCallback): number;
-    requestIdlePromise(): RejectablePromise<number>;
+    requestIdleCallback(callback: IdleRequestCallback, options?: {
+        timeout: number;
+    }): number;
+    requestIdlePromise(options?: {
+        timeout: number;
+    }): RejectablePromise<number>;
     cancelIdleCallback(request: number): void;
+    requestAnimationFrame(callback: FrameRequestCallback): number;
+    cancelAnimationFrame(request: number): void;
     clear(): void;
     isDestructed: boolean;
     destruct(): any;

package/types/core/constants.d.ts

@@ -57,6 +57,7 @@ export declare const IS_IE: boolean;
  */
 export declare const TEXT_PLAIN: string;
 export declare const TEXT_HTML: string;
+export declare const TEXT_RTF: string;
 export declare const MARKER_CLASS = "jodit-selection_marker";
 export declare const EMULATE_DBLCLICK_TIMEOUT = 300;
 /**

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

@@ -21,10 +21,8 @@ export declare class Dom {
      * Wrap all inline siblings
      */
     static wrapInline(current: Node, tag: Node | HTMLTagNames, editor: IJodit): HTMLElement;
-    /**
-     * Wrap node inside another node
-     */
-    static wrap<K extends HTMLTagNames>(current: Node, tag: K, create: ICreate): HTMLElementTagNameMap[K];
+    static wrap<K extends HTMLTagNames>(current: Node | Range, tag: HTMLElement, create: ICreate): HTMLElementTagNameMap[K];
+    static wrap<K extends HTMLTagNames>(current: Node | Range, tag: K, create: ICreate): HTMLElementTagNameMap[K];
     /**
      * Remove parent of node and insert this node instead that parent
      */
@@ -148,7 +146,7 @@ export declare class Dom {
      * Get not empty sibling
      */
     static findSibling(node: Node, left?: boolean, cond?: (n: Node) => boolean): Nullable<Node>;
-    static sibling(node: Node, left: boolean): Nullable<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
      */

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

@@ -7,3 +7,4 @@
  * @module dom
  */
 export * from './dom';
+export * from './lazy-walker';

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

@@ -0,0 +1,37 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module dom
+ */
+import type { IAsync, IDestructible } from 'jodit/types';
+import { Eventify } from 'jodit/core/event-emitter/eventify';
+export declare class LazyWalker extends Eventify<{
+    visit: (node: Node) => boolean;
+    break: (reason?: string) => void;
+    end: (affect: boolean) => void;
+}> implements IDestructible {
+    private readonly async;
+    private readonly options;
+    private workNodes;
+    setWork(root: Node): this;
+    private hadAffect;
+    private isWorked;
+    private isFinished;
+    constructor(async: IAsync, options?: {
+        readonly timeout?: number;
+        readonly whatToShow?: number;
+        readonly reverse?: boolean;
+        readonly timeoutChunkSize?: number;
+    });
+    private idleId;
+    private startIdleRequest;
+    break(reason?: string): void;
+    end(): void;
+    private stop;
+    destruct(): void;
+    private workPerform;
+    private visitNode;
+}

package/types/core/event-emitter/eventify.d.ts

@@ -0,0 +1,39 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module event-emitter
+ */
+import type { CanUndef } from 'jodit/types';
+/**
+ * Class for adding event handling capability
+ *
+ * ```ts
+ * class SomeClass extends Eventify<{ start: (node: Node) => boolean; }> {
+ * 	constructor() {
+ * 		super();
+ * 		setTimeout(() => {
+ * 			if (this.emit('start', document.body)) {
+ * 				console.log('yes');
+ * 			};
+ * 		}, 100);
+ * 	}
+ * }
+ *
+ * const sm = new SomeClass();
+ * sm.on('start', (node) => {
+ * 	console.log(node);
+ * 	return true;
+ * })
+ * ```
+ */
+export declare abstract class Eventify<MAP extends {
+    [key: string]: (...args: any[]) => any;
+}, EVENT extends keyof MAP = keyof MAP> {
+    private map;
+    on(name: EVENT, func: MAP[EVENT]): this;
+    off(name: keyof MAP, func: MAP[EVENT]): this;
+    protected emit(name: EVENT, ...args: Parameters<MAP[EVENT]>): CanUndef<ReturnType<MAP[EVENT]>>;
+}

package/types/core/event-emitter/index.d.ts

@@ -7,5 +7,6 @@
  * @module event-emitter
  */
 export * from './event-emitter';
+export * from './eventify';
 export * from './observable';
 export * from './store';

package/types/core/helpers/string/fuzzy-search-index.d.ts

@@ -0,0 +1,10 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * Finds the position of the substring in the string, if any, and returns the length of the found subsequence.
+ * Unlike `indexOf` ignores INVISIBLE_SPACE and may fail at `maxDistance` characters
+ */
+export declare function fuzzySearchIndex(needle: string, haystack: string, offset?: number, maxDistance?: number): [number, number];

package/types/core/helpers/string/i18n.d.ts

@@ -15,7 +15,7 @@ export declare const sprintf: (str: string, args?: (string | number)[] | undefin
  * Internationalization method. Uses Jodit.lang object
  * @example
  * ```javascript
- * var editor = new Jodit("#redactor", {
+ * var editor = Jodit.make("#redactor", {
  *      language: 'ru'
  * });
  * console.log(editor.i18n('Cancel')) //Отмена;

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

@@ -7,8 +7,9 @@
  * @module helpers/string
  */
 export * from './camel-case';
-export * from './stringify';
+export * from './fuzzy-search-index';
+export * from './i18n';
 export * from './kebab-case';
+export * from './stringify';
 export * from './trim';
 export * from './ucfirst';
-export * from './i18n';

package/types/core/helpers/utils/utils.d.ts

@@ -24,7 +24,7 @@ export declare function attr(elm: Element, key: string): null | string;
 /**
  * Remove attribute
  */
-export declare function attr(elm: Element, key: string, value: null): null | string;
+export declare function attr(elm: Element, key: string, value: null): void;
 /**
  * Set attribute
  */

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

@@ -188,7 +188,7 @@ export declare class Select implements ISelect {
      * Return current selected HTML
      * @example
      * ```javascript
-     * const editor = new jodit();
+     * const editor = Jodit.make();
      * console.log(editor.s.html); // html
      * console.log(Jodit.modules.Helpers.stripTags(editor.s.html)); // plain text
      * ```

package/types/core/ui/button/button/button.d.ts

@@ -16,8 +16,8 @@ export declare class UIButton extends UIElement implements IUIButton {
     /**
      * Marker for buttons
      */
-    isButton: true;
-    state: IUIButtonState;
+    readonly isButton: true;
+    readonly state: IUIButtonState;
     /**
      * Set state
      */
@@ -43,7 +43,7 @@ export declare class UIButton extends UIElement implements IUIButton {
     protected onChangeActivated(): void;
     protected onChangeName(): void;
     protected onChangeTooltip(): void;
-    onChangeTabIndex(): void;
+    protected onChangeTabIndex(): void;
     protected onChangeIcon(): void;
     /**
      * Set focus on element
@@ -57,7 +57,7 @@ export declare class UIButton extends UIElement implements IUIButton {
     protected createContainer(): HTMLElement;
     constructor(jodit: IViewBased, state?: IUIButtonStatePartial);
     destruct(): any;
-    private actionHandlers;
+    private readonly actionHandlers;
     /**
      * Add action handler
      */

package/types/core/view/view.d.ts

@@ -38,7 +38,7 @@ export declare abstract class View extends Component implements IViewBased, Mods
     readonly version: string;
     /**
      * Return default timeout period in milliseconds for some debounce or throttle functions.
-     * By default return `{observer.timeout}` options
+     * By default, `{history.timeout}` options
      */
     get defaultTimeout(): number;
     readonly async: IAsync;

package/types/jodit.d.ts

@@ -8,8 +8,9 @@
  * @packageDocumentation
  * @module jodit
  */
-import type { CustomCommand, IDictionary, IPluginSystem, IStatusBar, IWorkPlace, Modes, IFileBrowser, IJodit, IUploader, ICreate, IStorage, CanPromise, IObserver } from './types';
+import type { CustomCommand, IDictionary, IPluginSystem, IStatusBar, IWorkPlace, Modes, IFileBrowser, IJodit, IUploader, ICreate, IStorage, CanPromise, IHistory } from './types';
 import { Config } from './config';
+import * as constants from './core/constants';
 import { Plugin, Select } from './modules/';
 import { ViewWithToolbar } from './core/view/view-with-toolbar';
 /**
@@ -40,7 +41,7 @@ export declare class Jodit extends ViewWithToolbar implements IJodit {
     get text(): string;
     /**
      * Return default timeout period in milliseconds for some debounce or throttle functions.
-     * By default return `{observer.timeout}` options
+     * By default, `{history.timeout}` options
      */
     get defaultTimeout(): number;
     /**
@@ -66,6 +67,7 @@ export declare class Jodit extends ViewWithToolbar implements IJodit {
     static readonly modules: IDictionary<Function>;
     static readonly ns: IDictionary<Function>;
     static readonly decorators: IDictionary<Function>;
+    static readonly constants: typeof constants;
     static readonly instances: IDictionary<IJodit>;
     static readonly lang: any;
     static readonly core: {
@@ -111,7 +113,11 @@ export declare class Jodit extends ViewWithToolbar implements IJodit {
      */
     get iframe(): HTMLIFrameElement | void;
     set iframe(iframe: HTMLIFrameElement | void);
-    get observer(): IObserver;
+    get history(): IHistory;
+    /**
+     * @deprecated Instead use `Jodit.history`
+     */
+    get observer(): IHistory;
     /**
      * In iframe mode editor's window can be different by owner
      */
@@ -165,11 +171,16 @@ export declare class Jodit extends ViewWithToolbar implements IJodit {
      */
     getEditorValue(removeSelectionMarkers?: boolean, consumer?: string): string;
     private __callChangeCount;
+    synchronizeValues(): void;
     /**
      * Set editor html value and if set sync fill source element value
      * When method was called without arguments - it is simple way to synchronize editor to element
      */
     setEditorValue(value?: string): void;
+    /**
+     * If some plugin changes the DOM directly, then you need to update the content of the original element
+     */
+    protected updateElementValue(): void;
     /**
      * Return source element value
      */
@@ -184,7 +195,7 @@ export declare class Jodit extends ViewWithToolbar implements IJodit {
      *
      * @example
      * ```javascript
-     * var jodit = new Jodit('#editor);
+     * var jodit = Jodit.make('#editor);
      *
      * jodit.setEditorValue('test test test');
      *
@@ -260,7 +271,7 @@ export declare class Jodit extends ViewWithToolbar implements IJodit {
      *
      * @example
      * ```javascript
-     * var editor = new Jodit('#editor');
+     * var editor = Jodit.make('#editor');
      * console.log(editor.getRealMode());
      * ```
      */
@@ -274,7 +285,7 @@ export declare class Jodit extends ViewWithToolbar implements IJodit {
      *
      * @example
      * ```javascript
-     * var editor = new Jodit('#editor');
+     * var editor = Jodit.make('#editor');
      * editor.toggleMode();
      * ```
      */
@@ -317,6 +328,8 @@ export declare class Jodit extends ViewWithToolbar implements IJodit {
      *
      * @param element - Selector or HTMLElement
      * @param options - Editor's options
+     *
+     * @deprecated - Instead use `Jodit.make`
      */
     constructor(element: HTMLElement | string, options?: object);
     currentPlace: IWorkPlace;

package/types/modules/{observer → history}/command.d.ts

@@ -4,16 +4,16 @@
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 /**
- * @module modules/observer
+ * @module modules/history
  */
 import type { SnapshotType } from 'jodit/types';
-import type { Observer } from './observer';
+import type { History } from './history';
 export declare class Command {
     readonly oldValue: SnapshotType;
     readonly newValue: SnapshotType;
-    readonly observer: Observer;
+    private readonly history;
     readonly tick: number;
     undo(): void;
     redo(): void;
-    constructor(oldValue: SnapshotType, newValue: SnapshotType, observer: Observer, tick: number);
+    constructor(oldValue: SnapshotType, newValue: SnapshotType, history: History, tick: number);
 }