jodit 3.13.4 → 3.14.2

package/src/plugins/source/README.md

@@ -1,5 +1,5 @@
 The plugin allows you to add the ability to directly edit HTML to the editor.
-The plugin connects the editor to the [Ace](https://ace.c9.io/)  page (default behavior).
+The plugin connects the editor to the [Ace](https://ace.c9.io/) page (default behavior).
 This is implemented through the connection of the CDN JS file. They are set in the settings in [[Config.sourceEditorCDNUrlsJS]]
 The appearance of the Ace editor can be set through its settings, option [[Config.sourceEditorNativeOptions]]
 
@@ -7,10 +7,10 @@ For example, let's change the editor theme to light `Chrome`
 
 ```js
 Jodit.make('#editor', {
-  sourceEditorNativeOptions: {
-    theme: 'chrome'
-  }
-})
+	sourceEditorNativeOptions: {
+		theme: 'chrome'
+	}
+});
 ```
 
 The list of themes supported by `Ace` can be found on this page https://ace.c9.io/build/kitchen-sink.html
@@ -19,8 +19,8 @@ Also, you can not use `Ace` but just use `Textarea`
 
 ```js
 Jodit.make('#editor', {
-  sourceEditor: 'area'
-})
+	sourceEditor: 'area'
+});
 ```
 
 ## Custom editor
@@ -30,31 +30,29 @@ To do this, you need to add a class that will implement the interface [[ISourceE
 
 ```js
 class MirrorEditor {
-	constructor(jodit){}
+	constructor(jodit) {}
 
-  getValue() {}
-  setValue(raw) {};
-  insertRaw(raw) {};
+	getValue() {}
+	setValue(raw) {}
+	insertRaw(raw) {}
 
-  getSelectionEnd() {};
-  getSelectionStart() {};
-  setSelectionRange(start, end) {};
+	getSelectionEnd() {}
+	getSelectionStart() {}
+	setSelectionRange(start, end) {}
 
-  setPlaceHolder(title){}
+	setPlaceHolder(title) {}
 
-  focus() {
-  }
+	focus() {}
 
-  setReadOnly(isReadOnly) {}
+	setReadOnly(isReadOnly) {}
 
-  selectAll() {}
+	selectAll() {}
 
-  get isReady() {};
-  onReadyAlways(callback) {};
+	get isReady() {}
+	onReadyAlways(callback) {}
 }
 
 Jodit.make('#editor', {
-  sourceEditor: (j) => new MirrorEditor(j)
+	sourceEditor: j => new MirrorEditor(j)
 });
 ```
-

package/src/plugins/table/select-cells.ts

@@ -152,7 +152,7 @@ export class selectCells extends Plugin {
 	 * Mouse move inside the table
 	 */
 	private onMove(table: HTMLTableElement, e: MouseEvent): void {
-		if (this.j.o.readonly) {
+		if (this.j.o.readonly && !this.j.isLocked) {
 			return;
 		}
 

package/src/styles/icons/README.md

@@ -6,19 +6,23 @@ console.log(Jodit.modules.Icon.get('cancel')); // <svg ...
 ```
 
 You can add your own icons:
+
 ```js
-Jodit.modules.Icon.set('someIcon', '<svg ....')
+Jodit.modules.Icon.set('someIcon', '<svg ....');
 ```
 
 And then use this icon for example in a button in the toolbar
+
 ```js
 Jodit.make('#editor', {
-	buttons: [{
-		icon: 'someIcon',
-    name: 'someButton',
-    exec: (e) => alert(e.selection.html)
-  }]
-})
+	buttons: [
+		{
+			icon: 'someIcon',
+			name: 'someButton',
+			exec: e => alert(e.selection.html)
+		}
+	]
+});
 ```
 
 The list of icons from the build can be viewed [here](https://github.com/xdan/jodit/tree/master/src/styles/icons)
@@ -27,12 +31,14 @@ In addition to the added icons in the toolbar, you can also use a simple link to
 
 ```js
 Jodit.make('#editor', {
-	buttons: [{
-    iconURL: 'https://xdsoft.net/jodit/build/images/logo.png',
-    name: 'someButton',
-    exec: (e) => alert(e.selection.html)
-  }]
-})
+	buttons: [
+		{
+			iconURL: 'https://xdsoft.net/jodit/build/images/logo.png',
+			name: 'someButton',
+			exec: e => alert(e.selection.html)
+		}
+	]
+});
 ```
 
 ## Custom icons / Use Font awesome

package/src/styles/jodit.less

@@ -50,6 +50,10 @@
 	}
 }
 
+.jodit_lock {
+	user-select: none !important;
+}
+
 .jodit_disabled {
 	user-select: none !important;
 }

package/src/types/events.d.ts

@@ -130,10 +130,7 @@ interface IEventEmitter extends IDestructible {
 	 * parent.e.off('someGlobalEvents');
 	 * ```
 	 */
-	off(
-		events: string,
-		eventsOrCallback?: CallbackFunction
-	): IEventEmitter;
+	off(events: string, eventsOrCallback?: CallbackFunction): IEventEmitter;
 	off(
 		subject: object,
 		events?: string,

package/src/types/jodit.d.ts

@@ -36,10 +36,7 @@ interface IJodit extends IViewWithToolbar {
 	element: HTMLElement;
 
 	getNativeEditorValue(): string;
-	getEditorValue(
-		removeSelectionMarkers?: boolean,
-		consumer?: string
-	): string;
+	getEditorValue(removeSelectionMarkers?: boolean, consumer?: string): string;
 	setEditorValue(value?: string): void;
 
 	getReadOnly(): boolean;

package/src/types/observer.d.ts

@@ -8,7 +8,12 @@
  * @module types
  */
 
-import type { CallbackFunction, CanUndef, IComponent, SnapshotType } from './types';
+import type {
+	CallbackFunction,
+	CanUndef,
+	IComponent,
+	SnapshotType
+} from './types';
 
 export interface IObservable {
 	on(event: string | string[], callback: CallbackFunction): this;

package/src/types/ui.d.ts

@@ -21,7 +21,12 @@ import type { IViewBased } from 'jodit/types/view';
 import type { ButtonsOption } from 'jodit/types/toolbar';
 import type { IElms, IMods } from 'jodit/types/traits';
 
-export interface IUIElement extends IViewComponent, IContainer, IDestructible, IMods, IElms {
+export interface IUIElement
+	extends IViewComponent,
+		IContainer,
+		IDestructible,
+		IMods,
+		IElms {
 	parentElement: Nullable<IUIElement>;
 	container: HTMLElement;
 	name: string;
@@ -132,7 +137,7 @@ export interface IUIInput extends IUIElement {
 		icon: string;
 		label: string;
 		ref: string;
-		type: 'text' | 'number' |'checkbox' | 'url' | 'file' | 'hidden';
+		type: 'text' | 'number' | 'checkbox' | 'url' | 'file' | 'hidden';
 		placeholder: string;
 		required: boolean;
 		validators: string[];
@@ -183,7 +188,6 @@ export interface IUIRange extends IUIInput {
 	};
 }
 
-
 export interface IUICheckBox extends IUIInput {
 	readonly state: IUIInput['state'] & {
 		checked: boolean;

package/src/types/uploader.d.ts

@@ -71,7 +71,7 @@ export interface IUploaderOptions<T> {
 
 export interface IUploader extends IViewComponent {
 	readonly options: IUploaderOptions<IUploader>;
-	get o(): this['options'];
+	readonly o: this['options'];
 
 	bind(
 		form: HTMLElement,

package/src/types/view.d.ts

@@ -33,22 +33,22 @@ interface ILanguageOptions {
 }
 
 interface IToolbarOptions {
-	theme?: string;
 	toolbar?: boolean | string | HTMLElement;
-	toolbarButtonSize?: IUIButtonState['size'];
-	textIcons?: boolean | ((key: string) => boolean);
+	readonly theme?: string;
+	readonly toolbarButtonSize?: IUIButtonState['size'];
+	readonly textIcons?: boolean | ((key: string) => boolean);
 
-	extraButtons?: Buttons;
-	removeButtons?: string[];
-	extraIcons?: IDictionary<string>;
+	readonly extraButtons?: Buttons;
+	readonly removeButtons?: string[];
+	readonly extraIcons?: IDictionary<string>;
 
-	buttons?: ButtonsOption;
+	readonly buttons?: ButtonsOption;
 
-	showTooltip?: boolean;
-	showTooltipDelay?: number;
-	useNativeTooltip?: boolean;
+	readonly showTooltip?: boolean;
+	readonly showTooltipDelay?: number;
+	readonly useNativeTooltip?: boolean;
 
-	direction?: string;
+	readonly direction?: string;
 }
 
 type NodeFunction = (elm: HTMLElement) => void;
@@ -112,8 +112,8 @@ interface IViewBased<T = IViewOptions>
 
 	progressbar: IProgressBar;
 
-	events: IEventEmitter;
-	e: this['events'];
+	readonly events: IEventEmitter;
+	readonly e: this['events'];
 
 	readonly async: IAsync;
 

package/tsdoc.json

@@ -6,6 +6,11 @@
 			"syntaxKind": "block",
 			"allowMultiple": false
 		},
+    {
+      "tagName": "@event",
+      "syntaxKind": "block",
+      "allowMultiple": true
+    },
     {
       "tagName": "@private",
       "syntaxKind": "block",

package/types/config.d.ts

@@ -28,19 +28,6 @@ export declare class Config implements IViewOptions {
      * ```
      */
     safePluginsList: string[];
-    /**
-     * When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.
-     *
-     * @example
-     * ```javascript
-     * new Jodit('#editor', {
-     *    iframe = true;
-     *    iframeStyle = 'html{margin: 0px;}body{padding:10px;background:transparent;color:#000;position:relative;z-index:2;\
-     *    user-select:auto;margin:0px;overflow:hidden;}body:after{content:"";clear:both;display:block}';
-     * });
-     * ```
-     */
-    iframe: boolean;
     commandToHotkeys: IDictionary<string | string[]>;
     license: string;
     preset: string;

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

@@ -30,7 +30,7 @@ export declare class Dom {
      */
     static unwrap(node: Node): void;
     /**
-     * Call function for all nodes between `start` and `end`
+     * Call functions for all nodes between `start` and `end`
      */
     static between(start: Node, end: Node, callback: (node: Node) => void | boolean): void;
     /**

package/types/modules/image-editor/config.d.ts

@@ -0,0 +1,11 @@
+/*!
+ * 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
+ */
+import type { ImageEditorOptions } from 'jodit/types';
+declare module 'jodit/config' {
+    interface Config {
+        imageeditor: ImageEditorOptions;
+    }
+}

package/types/modules/image-editor/image-editor.d.ts

@@ -12,10 +12,21 @@ import './image-editor.less';
 import type { ImageEditorActionBox, ImageEditorOptions, IViewBased, IFileBrowserDataProvider } from 'jodit/types';
 import { ViewComponent } from 'jodit/core/component';
 import { Dialog } from 'jodit/modules/dialog';
-declare module 'jodit/config' {
-    interface Config {
-        imageeditor: ImageEditorOptions;
-    }
+import './config';
+interface onSave {
+    (
+    /**
+     * new filename
+     */
+    newname: string | void, box: ImageEditorActionBox, 
+    /**
+     * called after success operation
+     */
+    success: () => void, 
+    /**
+     * called after failed operation
+     */
+    failed: (error: Error) => void): void;
 }
 /**
  * The module allows you to edit the image: resize or cut any part of it
@@ -45,15 +56,15 @@ export declare class ImageEditor extends ViewComponent {
     private new_w;
     private diff_x;
     private diff_y;
-    private buttons;
-    private editor;
-    private resize_box;
-    private crop_box;
+    private readonly buttons;
+    private readonly editor;
+    private readonly resize_box;
+    private readonly crop_box;
     private sizes;
-    private resizeHandler;
-    private cropHandler;
-    private cropBox;
-    private resizeBox;
+    private readonly resizeHandler;
+    private readonly cropHandler;
+    private readonly cropBox;
+    private readonly resizeBox;
     private static calcValueByPercent;
     private calcCropBox;
     private showCrop;
@@ -74,13 +85,6 @@ export declare class ImageEditor extends ViewComponent {
     hide(): void;
     /**
      * Open image editor
-     *
-     * @param [save.name] - new filename
-     * @param save.data - Bound box for resize and crop operation
-     * @param save.data.action - resize or crop
-     * @param save.data.box - Bound box
-     * @param save.success - called after success operation
-     * @param save.failed - called after failed operation
      * @example
      * ```javascript
      * var jodit = new Jodit('.editor', {
@@ -103,7 +107,7 @@ export declare class ImageEditor extends ViewComponent {
      * });
      * ```
      */
-    open(url: string, save: (newname: string | void, box: ImageEditorActionBox, success: () => void, failed: (error: Error) => void) => void): Promise<Dialog>;
+    open(url: string, save: onSave): Promise<Dialog>;
     constructor(editor: IViewBased);
     /** @override */
     destruct(): any;
@@ -114,3 +118,4 @@ export declare class ImageEditor extends ViewComponent {
 export declare function openImageEditor(this: IViewBased & {
     dataProvider: IFileBrowserDataProvider;
 }, href: string, name: string, path: string, source: string, onSuccess?: () => void, onFailed?: (error: Error) => void): Promise<Dialog>;
+export {};

package/types/plugins/clipboard/drag-and-drop-element.d.ts

@@ -10,7 +10,6 @@ import { Plugin } from 'jodit/core/plugin';
 export declare class DragAndDropElement extends Plugin {
     private dragList;
     private draggable;
-    private wasMoved;
     private isCopyMode;
     /**
      * Shift in pixels after which we consider that the transfer of the element has begun
@@ -18,6 +17,7 @@ export declare class DragAndDropElement extends Plugin {
     private diffStep;
     private startX;
     private startY;
+    private state;
     /** @override */
     protected afterInit(): void;
     /**

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

@@ -0,0 +1,82 @@
+/*!
+ * 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
+ */
+declare module 'jodit/config' {
+    interface Config {
+        /**
+         * When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.
+         *
+         * @example
+         * ```javascript
+         * Jodit.make('#editor', {
+         *    iframe: true,
+         *    iframeStyle: 'html{margin: 0px;}body{padding:10px;background:transparent;color:#000;position:relative;z-index:2;\
+         *    user-select:auto;margin:0px;overflow:hidden;}body:after{content:"";clear:both;display:block}';
+         * });
+         * ```
+         */
+        iframe: boolean;
+        /**
+         * Allow editing the entire HTML document(html, head)
+         */
+        editHTMLDocumentMode: boolean;
+        /**
+         * You can redefine default page
+         *
+         * @example
+         * ```javascript
+         * new Jodit('#editor', {
+         *    iframe: true,
+         *    iframeDefaultSrc: 'http://xdsoft.net/jodit/docs/',
+         * });
+         * ```
+         */
+        iframeDefaultSrc: string;
+        /**
+         * Base URL where the root directory for {@link Jodit.defaultOptions.iframe|iframe} mode
+         *
+         * @example
+         * ```javascript
+         * new Jodit('#editor', {
+         *    iframe: true,
+         *    iframeBaseUrl: 'http://xdsoft.net/jodit/docs/',
+         * });
+         * ```
+         */
+        iframeBaseUrl: string;
+        /**
+         * Iframe title's content
+         */
+        iframeTitle: string;
+        /**
+         * Iframe's DOCTYPE
+         */
+        iframeDoctype: string;
+        /**
+         * Custom style to be used inside the iframe to display content.
+         * @example
+         * ```javascript
+         * new Jodit('#editor', {
+         *    iframe: true,
+         *    iframeStyle: 'html{margin: 0px;}',
+         * })
+         * ```
+         */
+        iframeStyle: string;
+        /**
+         * Custom stylesheet files to be used inside the iframe to display content.
+         *
+         * @example
+         * ```javascript
+         * new Jodit('#editor', {
+         *    iframe: true,
+         *    iframeCSSLinks: ['styles/default.css'],
+         * })
+         * ```
+         */
+        iframeCSSLinks: string[];
+    }
+}
+export {};

package/types/plugins/iframe/iframe.d.ts

@@ -7,17 +7,7 @@
  * @module plugins/iframe
  */
 import type { IJodit } from 'jodit/types';
-declare module 'jodit/config' {
-    interface Config {
-        editHTMLDocumentMode: boolean;
-        iframeDefaultSrc: string;
-        iframeBaseUrl: string;
-        iframeTitle: string;
-        iframeDoctype: string;
-        iframeStyle: string;
-        iframeCSSLinks: string[];
-    }
-}
+import './config';
 /**
  * Iframe plugin - use `iframe` instead of DIV in editor. It can be need when you want attach custom styles in editor
  * in backend of you system

package/types/plugins/image/image-properties/config.d.ts

@@ -0,0 +1,70 @@
+/*!
+ * 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
+ */
+declare module 'jodit/config' {
+    interface Config {
+        image: {
+            dialogWidth: number;
+            /**
+             * Open editing dialog after double click on image
+             */
+            openOnDblClick: boolean;
+            /**
+             * Show edit 'src' input
+             */
+            editSrc: boolean;
+            /**
+             * Show crop/resize btn
+             */
+            useImageEditor: boolean;
+            /**
+             * Show edit 'title' input
+             */
+            editTitle: boolean;
+            /**
+             * Show edit 'alt' input
+             */
+            editAlt: boolean;
+            /**
+             * Show edit image link's options
+             */
+            editLink: boolean;
+            /**
+             * Show edit image size's inputs
+             */
+            editSize: boolean;
+            /**
+             * Show edit margin inputs
+             */
+            editMargins: boolean;
+            editBorderRadius: boolean;
+            /**
+             * Show edit classNames input
+             */
+            editClass: boolean;
+            /**
+             * Show style edit input
+             */
+            editStyle: boolean;
+            /**
+             * Show edit ID input
+             */
+            editId: boolean;
+            /**
+             * Show Alignment selector
+             */
+            editAlign: boolean;
+            /**
+             * Show preview image
+             */
+            showPreview: boolean;
+            /**
+             * Select image after close dialog
+             */
+            selectImageAfterClose: boolean;
+        };
+    }
+}
+export {};