jodit 3.18.8 → 3.19.2

package/src/plugins/xpath/xpath.test.js

@@ -0,0 +1,182 @@
+/*!
+ * 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
+ */
+
+describe('Path plugin', function () {
+	describe('After init', function () {
+		describe('With showXPathInStatusbar=true', function () {
+			it('Should show status bar', function () {
+				const editor = getJodit({
+					language: 'en',
+					showXPathInStatusbar: true,
+					showCharsCounter: false,
+					showWordsCounter: false,
+					history: {
+						timeout: 0
+					}
+				});
+
+				editor.value = '<p>Simple text</p>';
+
+				const statusbar =
+					editor.container.querySelector('.jodit-status-bar');
+
+				expect(
+					editor.ownerWindow.getComputedStyle(statusbar).display
+				).equals('flex');
+			});
+
+			it('Should show path to selection element', function () {
+				const editor = getJodit({
+					language: 'en',
+					showXPathInStatusbar: true,
+					history: {
+						timeout: 0
+					}
+				});
+
+				editor.value = '<p>Simple text <a href="#">sss</a></p>';
+				editor.s.setCursorIn(editor.editor.querySelector('a'));
+
+				const statusbar = editor.container.querySelector(
+					'.jodit-status-bar .jodit-xpath'
+				);
+
+				expect(statusbar).is.not.null;
+				expect(statusbar.firstChild.textContent.trim()).equals('');
+				expect(statusbar.childNodes[1].textContent).equals('p');
+				expect(statusbar.childNodes[2].textContent).equals('a');
+			});
+
+			describe('After change selection', function () {
+				it('Should change path to selection element', function () {
+					const editor = getJodit({
+						language: 'en',
+						showXPathInStatusbar: true,
+						history: {
+							timeout: 0
+						}
+					});
+
+					editor.value =
+						'<p>Simple text <a href="#">sss</a><span>s</span></p>';
+					editor.s.setCursorIn(editor.editor.querySelector('a'));
+
+					const statusbar = editor.container.querySelector(
+						'.jodit-status-bar .jodit-xpath'
+					);
+
+					expect(statusbar).is.not.null;
+					expect(statusbar.firstChild.innerText).equals('');
+					expect(statusbar.childNodes[1].textContent).equals('p');
+					expect(statusbar.childNodes[2].textContent).equals('a');
+
+					editor.s.setCursorIn(editor.editor.querySelector('span'));
+
+					expect(statusbar.firstChild.innerText).equals('');
+					expect(statusbar.childNodes[1].textContent).equals('p');
+					expect(statusbar.childNodes[2].textContent).equals('span');
+				});
+			});
+
+			describe('After click on element of path', function () {
+				it('Should select this element', function () {
+					const editor = getJodit({
+						language: 'en',
+						showXPathInStatusbar: true,
+						history: {
+							timeout: 0
+						}
+					});
+
+					editor.value =
+						'<p>Simple text <a href="#">sss</a><span>s</span></p>';
+					editor.s.setCursorIn(editor.editor.querySelector('a'));
+
+					const statusbar = editor.container.querySelector(
+						'.jodit-status-bar .jodit-xpath'
+					);
+
+					expect(statusbar).is.not.null;
+					expect(statusbar.firstChild.innerText).equals('');
+					expect(statusbar.childNodes[1].textContent).equals('p');
+					expect(statusbar.childNodes[2].textContent).equals('a');
+
+					simulateEvent(
+						'click',
+						0,
+						statusbar.childNodes[2].firstChild
+					); // click on A
+
+					expect(
+						Jodit.modules.Helpers.trim(editor.s.sel.toString())
+					).equals('sss');
+					expect(statusbar.childNodes[2].textContent).equals('a');
+
+					simulateEvent(
+						'click',
+						0,
+						statusbar.childNodes[1].firstChild
+					); // click on P
+
+					expect(
+						Jodit.modules.Helpers.trim(editor.s.sel.toString())
+					).equals('Simple text ssss');
+					expect(statusbar.childNodes.length).equals(3);
+				});
+			});
+
+			describe('Context menu on element of path', function () {
+				it('Should open context menu', function () {
+					const editor = getJodit({
+						language: 'en',
+						showXPathInStatusbar: true,
+						history: {
+							timeout: 0
+						}
+					});
+
+					editor.value =
+						'<p>Simple text <a href="#">sss</a><span>s</span></p>';
+
+					editor.s.setCursorIn(editor.editor.querySelector('a'));
+
+					const statusbar = editor.container.querySelector(
+						'.jodit-status-bar .jodit-xpath'
+					);
+
+					expect(statusbar).is.not.null;
+					expect(statusbar.firstChild.innerText).equals('');
+					expect(statusbar.childNodes[1].textContent).equals('p');
+					expect(statusbar.childNodes[2].textContent).equals('a');
+
+					const elm = statusbar.childNodes[2].querySelector('a'),
+						pos = Jodit.modules.Helpers.position(elm);
+
+					simulateEvent('contextmenu', 0, elm, function (o) {
+						Object.assign(o, {
+							clientX: pos.left + 10,
+							clientY: pos.top + 10
+						});
+					});
+
+					const context = getOpenedPopup(editor);
+
+					expect(context).is.not.null;
+					expect(
+						editor.ownerWindow.getComputedStyle(context).display
+					).equals('block');
+
+					simulateEvent('click', 0, context.querySelector('button'));
+					expect(editor.value).equals(
+						'<p>Simple text <span>s</span></p>'
+					);
+
+					expect(context.parentNode).is.null;
+				});
+			});
+		});
+	});
+});

package/src/plugins/xpath/xpath.ts

@@ -11,26 +11,20 @@
 import './xpath.less';
 
 import type { IControlTypeStrong, IToolbarButton } from 'jodit/types';
-import { Config } from 'jodit/config';
 import { INVISIBLE_SPACE, MODE_WYSIWYG } from 'jodit/core/constants';
 import { ContextMenu } from 'jodit/modules/context-menu/context-menu';
 import { Dom } from 'jodit/core/dom';
 import { getXPathByElement, trim, attr } from 'jodit/core/helpers';
 import { Plugin } from 'jodit/core/plugin';
 import { makeButton } from 'jodit/modules/toolbar/factory';
+import { pluginSystem } from 'jodit/core/global';
 
-declare module 'jodit/config' {
-	interface Config {
-		showXPathInStatusbar: boolean;
-	}
-}
-
-Config.prototype.showXPathInStatusbar = true;
+import './config';
 
 /**
  * Show path to current element in status bar
  */
-export class xpath extends Plugin {
+class xpath extends Plugin {
 	private onContext = (bindElement: Node, event: MouseEvent): boolean => {
 		if (!this.menu) {
 			this.menu = new ContextMenu(this.j);
@@ -183,10 +177,10 @@ export class xpath extends Plugin {
 		this.j.defaultTimeout * 2
 	);
 
-	container?: HTMLElement;
-	menu?: ContextMenu;
+	protected container?: HTMLElement;
+	protected menu?: ContextMenu;
 
-	afterInit(): void {
+	protected afterInit(): void {
 		if (this.j.o.showXPathInStatusbar) {
 			this.container = this.j.c.div('jodit-xpath');
 
@@ -220,7 +214,7 @@ export class xpath extends Plugin {
 		}
 	}
 
-	beforeDestruct(): void {
+	protected beforeDestruct(): void {
 		if (this.j && this.j.events) {
 			this.j.e.off('.xpath');
 		}
@@ -234,3 +228,5 @@ export class xpath extends Plugin {
 		delete this.container;
 	}
 }
+
+pluginSystem.add('xpath', xpath);

package/src/styles/icons/index.ts

@@ -10,172 +10,60 @@
  * @module icons
  */
 
-import * as about from './about.svg';
-import * as addcolumn from './addcolumn.svg';
-import * as addrow from './addrow.svg';
 import * as angle_down from './angle-down.svg';
 import * as angle_left from './angle-left.svg';
 import * as angle_right from './angle-right.svg';
 import * as angle_up from './angle-up.svg';
-import * as arrows_alt from './arrows-alt.svg';
-import * as arrows_h from './arrows-h.svg';
-import * as attachment from './attachment.svg';
 import * as bin from './bin.svg';
-import * as bold from './bold.svg';
-import * as brush from './brush.svg';
 import * as cancel from './cancel.svg';
 import * as center from './center.svg';
-import * as chain_broken from './chain-broken.svg';
 import * as check from './check.svg';
-import * as check_square from './check-square.svg';
 import * as chevron from './chevron.svg';
-import * as copyformat from './copyformat.svg';
-import * as crop from './crop.svg';
-import * as copy from './copy.svg';
-import * as cut from './cut.svg';
-import * as dedent from './dedent.svg';
 import * as dots from './dots.svg';
-import * as enter from './enter.svg';
-import * as eraser from './eraser.svg';
 import * as eye from './eye.svg';
 import * as file from './file.svg';
 import * as folder from './folder.svg';
-import * as font from './font.svg';
-import * as fontsize from './fontsize.svg';
-import * as fullsize from './fullsize.svg';
-import * as hr from './hr.svg';
-import * as image from './image.svg';
-import * as indent from './indent.svg';
 import * as info_circle from './info-circle.svg';
-import * as italic from './italic.svg';
-import * as justify from './justify.svg';
 import * as left from './left.svg';
-import * as line_height from './line-height.svg';
-import * as link from './link.svg';
 import * as lock from './lock.svg';
-import * as menu from './menu.svg';
-import * as merge from './merge.svg';
 import * as ok from './ok.svg';
-import * as ol from './ol.svg';
-import * as omega from './omega.svg';
-import * as outdent from './outdent.svg';
-import * as palette from './palette.svg';
-import * as paragraph from './paragraph.svg';
-import * as paste from './paste.svg';
 import * as pencil from './pencil.svg';
 import * as plus from './plus.svg';
-import * as print from './print.svg';
-import * as redo from './redo.svg';
-import * as resize from './resize.svg';
 import * as resize_handler from './resize-handler.svg';
-import * as resizer from './resizer.svg';
 import * as right from './right.svg';
 import * as save from './save.svg';
-import * as search from './search.svg';
 import * as settings from './settings.svg';
-import * as select_all from './select-all.svg';
-import * as shrink from './shrink.svg';
-import * as source from './source.svg';
-import * as splitg from './splitg.svg';
-import * as splitv from './splitv.svg';
-import * as strikethrough from './strikethrough.svg';
-import * as subscript from './subscript.svg';
-import * as superscript from './superscript.svg';
-import * as table from './table.svg';
-import * as th from './th.svg';
-import * as th_list from './th-list.svg';
-import * as ul from './ul.svg';
-import * as underline from './underline.svg';
-import * as undo from './undo.svg';
-import * as unlink from './unlink.svg';
 import * as unlock from './unlock.svg';
 import * as update from './update.svg';
 import * as upload from './upload.svg';
 import * as valign from './valign.svg';
-import * as video from './video.svg';
 
 export {
-	about,
-	addcolumn,
-	addrow,
 	angle_down,
 	angle_left,
 	angle_right,
 	angle_up,
-	arrows_alt,
-	arrows_h,
-	attachment,
 	bin,
-	bold,
-	brush,
 	cancel,
 	center,
-	chain_broken,
 	check,
-	check_square,
-	copyformat,
-	copy,
-	crop,
-	cut,
-	dedent,
-	dots,
 	chevron,
-	enter,
-	eraser,
+	dots,
 	eye,
 	file,
 	folder,
-	font,
-	fontsize,
-	fullsize,
-	hr,
-	image,
-	indent,
 	info_circle,
-	italic,
-	justify,
 	left,
-	line_height,
-	link,
 	lock,
-	menu,
-	merge,
 	ok,
-	ol,
-	omega,
-	outdent,
-	palette,
-	paragraph,
-	paste,
 	pencil,
 	plus,
-	print,
-	redo,
-	resize,
 	resize_handler,
-	resizer,
 	right,
 	save,
-	search,
-	select_all,
 	settings,
-	shrink,
-	source,
-	splitg,
-	splitv,
-	strikethrough,
-	subscript,
-	superscript,
-	table,
-	th,
-	th_list,
-	ul,
-	underline,
-	undo,
-	unlink,
 	unlock,
 	update,
 	upload,
-	valign,
-	video
+	valign
 };

package/src/types/ajax.d.ts

@@ -8,8 +8,8 @@
  * @module types
  */
 
-import { IDestructible, IDictionary } from './types';
-import { IViewBased } from './view';
+import type { CanPromise, IDestructible, IDictionary } from './types';
+import type { IViewBased } from './view';
 
 export type DataVariant =
 	| IDictionary<string>
@@ -81,11 +81,14 @@ export interface AjaxOptions {
 	contentType?: string | false;
 
 	/**
-	 * An object of additional header key/value pairs to send along
+	 * An object (or a function which returns an object) of additional header key/value pairs to send along
 	 * with requests using the XMLHttpRequest transport. Uses in {@link FileBrowser|FileBrowser}
 	 * and {@link Uploader|Uploader}
 	 */
-	headers?: IDictionary<string> | null;
+	headers?:
+		| IDictionary<string>
+		| null
+		| ((this: IAjax<any>) => CanPromise<IDictionary<string> | null>);
 
 	responseType?: XMLHttpRequestResponseType;
 

package/src/types/file-browser.d.ts

@@ -9,6 +9,7 @@
  */
 
 import type {
+	CanPromise,
 	IDestructible,
 	IDictionary,
 	ImageBox,
@@ -19,6 +20,7 @@ import type { IUploader, IUploaderOptions } from './uploader';
 import type { IViewBased, IViewOptions } from './view';
 import type { IUIGroup } from './ui';
 import type { IObservable } from './events';
+import type { IAjax } from './ajax';
 
 /**
  * The module creates a web browser dialog box. In a Web browser ,you can select an image, remove, drag it. Upload new
@@ -77,7 +79,9 @@ export interface IFileBrowserAjaxOptions {
 	processData?: boolean;
 	dataType?: string;
 
-	headers?: IDictionary<string>;
+	headers?:
+		| IDictionary<string>
+		| ((this: IAjax<any>) => CanPromise<IDictionary<string>>);
 
 	prepareData?: (data: IDictionary<string>) => IDictionary<string>;
 	process?: IFileBrowserProcessor;

package/src/types/index.d.ts

@@ -1,4 +1,4 @@
-/*!
+	/*!
  * 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

package/src/types/plugin.d.ts

@@ -44,7 +44,7 @@ interface PluginFunction {
 	constructor(jodit: IViewBased): void;
 }
 
-export type PluginType = typeof IPlugin | IPlugin | PluginFunction;
+export type PluginType = typeof IPlugin | IPlugin | PluginFunction | Function;
 export type PluginInstance = IPlugin | object;
 
 export interface IExtraPlugin {

package/src/types/types.d.ts

@@ -241,7 +241,14 @@ export interface ImageEditorOptions {
 	cropDefaultHeight: string | number;
 }
 
+export type InsertMode =
+	| 'insert_as_html'
+	| 'insert_as_text'
+	| 'insert_clear_html'
+	| 'insert_only_text';
+
 export type ImageAction = 'resize' | 'crop';
+export type ImageHAlign = 'normal' | 'left' | 'right' | 'center' | '';
 
 export interface ImageBox {
 	w: number;

package/src/types/uploader.d.ts

@@ -8,8 +8,9 @@
  * @module types
  */
 
-import type { IDictionary, IViewComponent } from './types';
+import type { CanPromise, IDictionary, IViewComponent } from './types';
 import type { IViewBased } from 'jodit/types/view';
+import type { IAjax } from './ajax';
 
 interface IUploaderData {
 	messages?: string[];
@@ -40,7 +41,10 @@ export interface IUploaderOptions<T> {
 		| ((request: FormData | IDictionary<string> | string) => string);
 	insertImageAsBase64URI: boolean;
 	imagesExtensions: string[];
-	headers?: IDictionary<string> | null;
+	headers?:
+		| IDictionary<string>
+		| null
+		| ((this: IAjax<any>) => CanPromise<IDictionary<string> | null>);
 	data: null | object;
 	format: string;
 	method: string;

package/tsconfig.json

@@ -33,21 +33,17 @@
 
 		"lib": ["es5", "esnext", "dom", "scripthost", "es2015.iterable"],
 
-    "baseUrl": ".",
-    "paths": {
-      "jodit/src/*": ["./src/*"],
-      "jodit/*": ["./src/*"]
-    }
-  },
-	"include": [
-    "./src/types/"
-  ],
+		"baseUrl": ".",
+		"paths": {
+			"jodit/src/*": ["./src/*"],
+			"jodit/*": ["./src/*"]
+		}
+	},
+	"include": ["./src/types/"],
 	"files": [
 		"./index.d.ts",
 		"./src/index.ts",
 		"./src/typings.d.ts",
-		"./src/types/index.d.ts",
-		"./src/types/async.d.ts",
-		"./src/plugins/speech/speech-recognize/speech-recognize.ts",
+		"./src/types/index.d.ts"
 	]
 }

package/types/config.d.ts

@@ -6,7 +6,7 @@
 /**
  * @module config
  */
-import type { IExtraPlugin, IDictionary, IViewOptions, NodeFunction, Attributes, ButtonsOption, Controls, IControlType, IUIButtonState, Nullable } from './types';
+import type { IExtraPlugin, IDictionary, IViewOptions, NodeFunction, Attributes, ButtonsOption, Controls, IControlType, IUIButtonState, InsertMode, Nullable } from './types';
 /**
  * Default Editor's Configuration
  */
@@ -20,6 +20,52 @@ export declare class Config implements IViewOptions {
      * Editor loads completely without plugins. Useful when debugging your own plugin.
      */
     safeMode: boolean;
+    /**
+     * Editor's width
+     *
+     * @example
+     * ```javascript
+     * Jodit.make('.editor', {
+     *    width: '100%',
+     * })
+     * ```
+     * @example
+     * ```javascript
+     * Jodit.make('.editor', {
+     *    width: 600, // equivalent for '600px'
+     * })
+     * ```
+     * @example
+     * ```javascript
+     * Jodit.make('.editor', {
+     *    width: 'auto', // autosize
+     * })
+     * ```
+     */
+    width: number | string;
+    /**
+     * Editor's height
+     *
+     * @example
+     * ```javascript
+     * Jodit.make('.editor', {
+     *    height: '100%',
+     * })
+     * ```
+     * @example
+     * ```javascript
+     * Jodit.make('.editor', {
+     *    height: 600, // equivalent for '600px'
+     * })
+     * ```
+     * @example
+     * ```javascript
+     * Jodit.make('.editor', {
+     *    height: 'auto', // default - autosize
+     * })
+     * ```
+     */
+    height: number | string;
     /**
      * List of plugins that will be initialized in safe mode.
      *
@@ -239,10 +285,32 @@ export declare class Config implements IViewOptions {
      * Instead of create custop tooltip - use native title tooltips
      */
     useNativeTooltip: boolean;
+    /**
+     * Default insert method
+     * @default insert_as_html
+     */
+    defaultActionOnPaste: InsertMode;
     /**
      * Element that will be created when you press Enter
      */
     enter: 'p' | 'div' | 'br';
+    /**
+     * 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;
     /**
      * Use when you need insert new block element
      * use enter option if not set

package/types/core/constants.d.ts

@@ -112,3 +112,5 @@ export declare const KEY_ALIASES: IDictionary<string>;
 export declare const BASE_PATH: string;
 export declare const TEMP_ATTR = "data-jodit-temp";
 export declare const lang: IDictionary<IDictionary<string>>;
+export declare const CLIPBOARD_ID = "clipboard";
+export declare const SOURCE_CONSUMER = "source-consumer";

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

@@ -149,6 +149,14 @@ export declare class Dom {
      * Get not empty sibling
      */
     static findSibling(node: Node, left?: boolean, cond?: (n: Node) => boolean): Nullable<Node>;
+    /**
+     * Returns the nearest non-empty sibling
+     */
+    static findNotEmptySibling(node: Node, backspace: boolean): Nullable<Node>;
+    /**
+     * Returns the nearest non-empty neighbor
+     */
+    static findNotEmptyNeighbor(node: Node, left: boolean, root: HTMLElement): 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/helpers/utils/align.d.ts

@@ -0,0 +1,18 @@
+/*!
+ * 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 { ImageHAlign } from 'jodit/types';
+/**
+ * Align image
+ */
+export declare function hAlignElement(image: HTMLElement, align: ImageHAlign): void;
+/**
+ * Remove text-align style for all selected children
+ */
+export declare function clearAlign(node: Node): void;
+/**
+ * Apply align for element
+ */
+export declare function alignElement(command: string, box: HTMLElement): void;