jodit 3.6.2 → 3.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit",
-	"version": "3.6.2",
+	"version": "3.6.6",
 	"description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
 	"main": "build/jodit.min.js",
 	"types": "index.d.ts",
@@ -20,7 +20,7 @@
 		"test": "npm run build-no-uglify-es5 && karma start --browsers FirefoxHeadless karma.conf.js",
 		"test-debug": "karma start --browsers Chrome karma.conf.js  --single-run false",
 		"test-chrome": "karma start --browsers Chrome karma.conf.js",
-		"jodit": "cd ../jodit-pro && yarn newversion && cd ../jodit-react/ && npm update && npm run newversion && cd ../jodit-joomla && npm run newversion && cd ../jodit-master && npm run newversion",
+		"jodit": "cd ../jodit-pro && npm run newversion && cd ../jodit-react/ && npm update && npm run newversion && cd ../jodit-joomla && npm run newversion && cd ../jodit-master && npm run newversion",
 		"types": "rm -rf types/* && tsc --project . --declaration --outDir types --emitDeclarationOnly",
 		"pretty": "npx prettier --write ./src/*.{ts,less} ./src/**/*.{ts,less} ./src/**/**/*.{ts,less} ./src/**/**/**/*.{ts,less} ./src/**/**/**/**/*.{ts,less}",
 		"fix": "npx eslint ./src/* ./test/ --fix && npm run pretty",

package/src/config.ts

@@ -22,6 +22,8 @@ import * as consts from './core/constants';
  * Default Editor's Configuration
  */
 export class Config implements IViewOptions {
+	namespace: string = '';
+
 	/**
 	 * When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.
 	 *

package/src/core/decorators/persistent.ts

@@ -19,7 +19,7 @@ export function persistent<T extends IComponent>(target: T, propertyKey: string)
 		const jodit = isViewObject(component)
 			? component
 			: ((component as unknown) as IViewComponent).jodit,
-			storageKey = `${component.componentName}_prop_${propertyKey}`,
+			storageKey = `${jodit.options.namespace}${component.componentName}_prop_${propertyKey}`,
 			initialValue = (component as IDictionary)[propertyKey];
 
 		Object.defineProperty(component, propertyKey, {

package/src/core/decorators/watch.ts

@@ -63,6 +63,12 @@ export function watch(observeFields: string[] | string, context?: object | ((c:
 						.on(context || component, eventName, callback)
 						.on(eventName, callback);
 
+					view.hookStatus('beforeDestruct', () => {
+						view.events
+							.off(context || component, eventName, callback)
+							.off(eventName, callback);
+					});
+
 					return;
 				}
 

package/src/core/helpers/checker/is-url.ts

@@ -16,9 +16,9 @@ export function isURL(str: string): boolean {
 		'^(https?:\\/\\/)' + // protocol
 			'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
 			'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-			'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-			'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-			'(\\#[-a-z\\d_]*)?$',
+			'(\\:\\d+)?(\\/[-a-zа-яё\\d%_.~+]*)*' + // port and path
+			'(\\?[;&a-zа-яё\\d%_.~+=-]*)?' + // query string
+			'(\\#[-a-zа-яё\\d_]*)?$',
 		'i'
 	); // fragment locator
 

package/src/core/plugin-system.ts

@@ -280,6 +280,7 @@ export class PluginSystem implements IPluginSystem {
 
 		return appendStyleAsync(jodit, url);
 	}
+
 	private static styles: Set<string> = new Set();
 
 	/**

package/src/core/ui/helpers/get-control-type.ts

@@ -25,7 +25,8 @@ export function getControlType(
 ): IControlTypeStrong {
 	let buttonControl: IControlTypeStrong;
 
-	controls ||= Config.defaultOptions.controls;
+	if (!controls)
+		controls = Config.defaultOptions.controls;
 
 	if (!isString(button)) {
 		buttonControl = { name: 'empty', ...ConfigFlatten(button) };

package/src/core/ui/list/group.ts

@@ -39,17 +39,18 @@ export class UIGroup<T extends IViewBased = IViewBased>
 	 */
 	get allChildren(): IUIElement[] {
 		const result: IUIElement[] = [];
+
 		const stack: Array<IUIElement | IUIElement[] | IUIGroup> = [
 			...this.elements
 		];
 
 		while (stack.length) {
-			const elm = stack.pop();
+			const elm = stack.shift();
 
 			if (isArray(elm)) {
 				stack.push(...elm);
 			} else if (elm instanceof UIGroup) {
-				stack.push(...elm.elements.reverse());
+				stack.push(...elm.elements);
 			} else {
 				elm && result.push(elm);
 			}

package/src/core/ui/popup/popup.ts

@@ -303,7 +303,7 @@ export class Popup extends UIElement implements IPopup {
 		this.childrenPopups.forEach(popup => popup.close());
 
 		this.j.e.fire(this, 'beforeClose');
-		this.j.e.fire( 'beforePopupClose', this);
+		this.j.e.fire('beforePopupClose', this);
 
 		this.removeGlobalListeners();
 
@@ -342,13 +342,17 @@ export class Popup extends UIElement implements IPopup {
 
 		eventEmitter.on('closeAllPopups', this.close);
 
+		if (this.smart) {
+			this.j.e
+				.on('escape', this.close)
+				.on('mousedown touchstart', this.closeOnOutsideClick)
+				.on(ow, 'mousedown touchstart', this.closeOnOutsideClick);
+		}
+
 		this.j.e
 			.on('closeAllPopups', this.close)
-			.on('escape', this.close)
 			.on('resize', up)
 			.on(this.container, 'scroll mousewheel', up)
-			.on('mousedown touchstart', this.closeOnOutsideClick)
-			.on(ow, 'mousedown touchstart', this.closeOnOutsideClick)
 			.on(ow, 'scroll', up)
 			.on(ow, 'resize', up);
 	}
@@ -359,13 +363,18 @@ export class Popup extends UIElement implements IPopup {
 
 		eventEmitter.off('closeAllPopups', this.close);
 
+		if (this.smart) {
+			this.j.e
+				.off('escape', this.close)
+				.off('mousedown touchstart', this.closeOnOutsideClick)
+				.off(ow, 'mousedown touchstart', this.closeOnOutsideClick);
+		}
+
 		this.j.e
 			.off('closeAllPopups', this.close)
-			.off('escape', this.close)
+
 			.off('resize', up)
 			.off(this.container, 'scroll mousewheel', up)
-			.off('mousedown touchstart', this.closeOnOutsideClick)
-			.off(ow, 'mousedown touchstart', this.closeOnOutsideClick)
 			.off(ow, 'scroll', up)
 			.off(ow, 'resize', up);
 	}
@@ -378,7 +387,7 @@ export class Popup extends UIElement implements IPopup {
 		this.container.style.zIndex = index.toString();
 	}
 
-	constructor(jodit: IViewBased) {
+	constructor(jodit: IViewBased, readonly smart: boolean = true) {
 		super(jodit);
 		attr(this.container, 'role', 'popup');
 	}

package/src/core/view/view-with-toolbar.ts

@@ -154,7 +154,7 @@ export abstract class ViewWithToolbar extends View implements IViewWithToolbar {
 
 	/** @override **/
 	protected constructor(
-		options?: IViewOptions,
+		options?: Partial<IViewOptions>,
 		readonly isJodit: boolean = false
 	) {
 		super(options, isJodit);

package/src/core/view/view.ts

@@ -235,15 +235,19 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 	 * Return current version
 	 */
 	getVersion(): string {
-		return this.version;
+		return appVersion;
+	}
+
+	static getVersion(): string {
+		return appVersion;
 	}
 
 	/** @override */
-	protected initOptions(options?: IViewOptions): void {
+	protected initOptions(options?: Partial<IViewOptions>): void {
 		this.options = ConfigProto(
 			options || {},
 			ConfigProto(this.options || {}, View.defaultOptions)
-		);
+		) as IViewOptions;
 	}
 
 	/**
@@ -252,7 +256,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 	protected initOwners(): void {}
 
 	protected constructor(
-		options?: IViewOptions,
+		options?: Partial<IViewOptions>,
 		readonly isJodit: boolean = false
 	) {
 		super();
@@ -360,6 +364,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 View.defaultOptions = {
 	extraButtons: [],
 	textIcons: false,
+	namespace: '',
 	removeButtons: [],
 	zIndex: 100002,
 	defaultTimeout: 100,

package/src/jodit.ts

@@ -136,6 +136,8 @@ export class Jodit extends ViewWithToolbar implements IJodit {
 		return Config.defaultOptions;
 	}
 
+	static fatMode: boolean = false;
+
 	static plugins: IPluginSystem = pluginSystem;
 
 	static modules: IDictionary<Function> = modules;
@@ -1221,14 +1223,17 @@ export class Jodit extends ViewWithToolbar implements IJodit {
 
 		workplace.appendChild(editor);
 
-		const currentPlace = {
+		const currentPlace: IWorkPlace = {
 			editor,
 			element,
 			container,
 			workplace,
 			statusbar,
 			options: this.isReady
-				? ConfigProto(options || {}, Config.defaultOptions)
+				? (ConfigProto(
+						options || {},
+						Config.defaultOptions
+				  ) as IWorkPlace['options'])
 				: this.options,
 			observer: new Observer(this),
 			editorWindow: this.ow

package/src/modules/dialog/dialog.ts

@@ -56,6 +56,7 @@ declare module '../../config' {
 }
 
 Config.prototype.dialog = {
+	namespace: '',
 	extraButtons: [],
 	resizable: true,
 	draggable: true,
@@ -728,7 +729,7 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 		return this;
 	}
 
-	constructor(options?: IDialogOptions) {
+	constructor(options?: Partial<IDialogOptions>) {
 		super(options);
 
 		const self: Dialog = this;

package/src/modules/file-browser/config.ts

@@ -30,6 +30,8 @@ declare module '../../config' {
 }
 
 Config.prototype.filebrowser = {
+	namespace: '',
+
 	extraButtons: [],
 
 	filter(item: string | ISourceFile, search: string) {

package/src/plugins/clipboard/drag-and-drop-element.ts

@@ -115,6 +115,7 @@ export class DragAndDropElement extends Plugin {
 				pointerEvents: 'none',
 				pointer: 'drag',
 				position: 'fixed',
+				opacity: 0.7,
 				display: 'inline-block',
 				left: event.clientX,
 				top: event.clientY,

package/src/plugins/index.ts

@@ -37,6 +37,7 @@ export { placeholder } from './placeholder/placeholder';
 export { redoUndo } from './redo-undo';
 export { resizer } from './resizer/resizer';
 export { search } from './search/search';
+export { select } from './select';
 export { size, resizeHandler } from './size';
 export { source } from './source';
 export { stat } from './stat';

package/src/plugins/inline-popup/config/items/cells.ts

@@ -14,6 +14,7 @@ const cmd = (control: IControlType): string =>
 	control.args && isString(control.args[0])
 		? control.args[0].toLowerCase()
 		: '';
+
 export default [
 	{
 		name: 'brush',

package/src/plugins/inline-popup/inline-popup.ts

@@ -27,18 +27,21 @@ import {
 	isArray,
 	isFunction,
 	toArray,
-	keys
+	keys,
+	camelCase
 } from '../../core/helpers';
 import { Dom, Table, ToolbarCollection, UIElement } from '../../modules';
-import { debounce, wait, autobind } from '../../core/decorators';
+import { debounce, wait, autobind, watch } from '../../core/decorators';
 
 /**
  * Plugin for show inline popup dialog
  */
 export class inlinePopup extends Plugin {
+	requires = ['select'];
+
 	private type: Nullable<string> = null;
 
-	private popup: IPopup = new Popup(this.jodit);
+	private popup: IPopup = new Popup(this.jodit, false);
 
 	private toolbar: IToolbarCollection = makeCollection(
 		this.jodit,
@@ -46,9 +49,8 @@ export class inlinePopup extends Plugin {
 	);
 
 	@autobind
-	private onClick(e: MouseEvent): void {
-		const node = e.target as Node,
-			elements = keys(this.j.o.popup, false) as HTMLTagNames[],
+	private onClick(node: Node): void | false {
+		const elements = this.elmsList as HTMLTagNames[],
 			target = Dom.isTag(node, 'img')
 				? node
 				: Dom.closest(node, elements, this.j.editor);
@@ -59,6 +61,8 @@ export class inlinePopup extends Plugin {
 				target.nodeName.toLowerCase(),
 				target
 			);
+
+			return false;
 		}
 	}
 
@@ -114,13 +118,19 @@ export class inlinePopup extends Plugin {
 	/**
 	 * Hide opened popup
 	 */
+	@watch(':clickEditor')
 	@autobind
 	private hidePopup(type?: string): void {
-		if (!type || type === this.type) {
+		if (!isString(type) || type === this.type) {
 			this.popup.close();
 		}
 	}
 
+	@watch(':outsideClick')
+	protected onOutsideClick(e: MouseEvent): void {
+		this.popup.close();
+	}
+
 	/**
 	 * Can show popup for this type
 	 * @param type
@@ -189,9 +199,10 @@ export class inlinePopup extends Plugin {
 					);
 				}
 			)
-			.on('click', this.onClick)
 			.on('mousedown keydown', this.onSelectionStart)
 			.on([this.j.ew, this.j.ow], 'mouseup keyup', this.onSelectionEnd);
+
+		this.addListenersForElements();
 	}
 
 	private snapRange: Nullable<Range> = null;
@@ -289,7 +300,26 @@ export class inlinePopup extends Plugin {
 	protected beforeDestruct(jodit: IJodit): void {
 		jodit.e
 			.off('showPopup')
-			.off('click', this.onClick)
 			.off([this.j.ew, this.j.ow], 'mouseup keyup', this.onSelectionEnd);
+
+		this.removeListenersForElements();
+	}
+
+	private elmsList: string[] = keys(this.j.o.popup, false).filter(
+		s => !this.isExcludedTarget(s)
+	);
+
+	private addListenersForElements() {
+		this.j.e.on(
+			this.elmsList.map(e => camelCase(`click_${e}`)).join(' '),
+			this.onClick
+		);
+	}
+
+	private removeListenersForElements() {
+		this.j.e.off(
+			this.elmsList.map(e => camelCase(`click_${e}`)).join(' '),
+			this.onClick
+		);
 	}
 }

package/src/plugins/justify.ts

@@ -152,12 +152,15 @@ export const alignElement = (
 			case 'justifyfull':
 				box.style.textAlign = 'justify';
 				break;
+
 			case 'justifyright':
 				box.style.textAlign = 'right';
 				break;
+
 			case 'justifyleft':
 				box.style.textAlign = 'left';
 				break;
+
 			case 'justifycenter':
 				box.style.textAlign = 'center';
 				break;

package/src/plugins/link/link.ts

@@ -202,7 +202,6 @@ export class link extends Plugin {
 		html: string
 	): HTMLAnchorElement | void {
 		const { jodit } = this;
-
 		if (isURL(html)) {
 			if (jodit.o.link.processVideoLink) {
 				const embed = convertMediaUrlToVideoEmbed(html);
@@ -307,6 +306,7 @@ export class link extends Plugin {
 							className_input.value = attr(link, 'class') || '';
 						}
 						break;
+
 					case 'select':
 						if (className_select) {
 							for (
@@ -394,7 +394,13 @@ export class link extends Plugin {
 
 			if (!link) {
 				if (!jodit.s.isCollapsed()) {
-					links = jodit.s.wrapInTag('a') as HTMLAnchorElement[];
+					const node = jodit.s.current();
+
+					if (Dom.isTag(node, ['img'])) {
+						links = [Dom.wrap(node, 'a', jodit) as HTMLAnchorElement];
+					} else {
+						links = jodit.s.wrapInTag('a') as HTMLAnchorElement[];
+					}
 				} else {
 					const a = jodit.createInside.element('a');
 					jodit.s.insertNode(a);

package/src/plugins/resizer/resizer.ts

@@ -6,7 +6,7 @@
 
 import './resizer.less';
 
-import type { IBound } from '../../types';
+import type { HTMLTagNames, IBound, Nullable } from '../../types';
 import type { IJodit } from '../../types';
 import { Config } from '../../config';
 import * as consts from '../../core/constants';
@@ -22,7 +22,7 @@ import {
 } from '../../core/helpers';
 import { Plugin } from '../../core/plugin';
 import { eventEmitter } from '../../core/global';
-import { autobind } from '../../core/decorators';
+import { autobind, debounce, watch } from '../../core/decorators';
 
 /**
  * The module creates a supporting frame for resizing of the elements img and table
@@ -34,9 +34,7 @@ import { autobind } from '../../core/decorators';
  */
 declare module '../../config' {
 	interface Config {
-		useIframeResizer: boolean;
-		useTableResizer: boolean;
-		useImageResizer: boolean;
+		allowResizeTags: HTMLTagNames[];
 
 		resizer: {
 			showSize: boolean;
@@ -46,17 +44,8 @@ declare module '../../config' {
 		};
 	}
 }
-Config.prototype.useIframeResizer = true;
 
-/**
- * @property{boolean} useTableResizer=true Use true frame for editing table size
- */
-Config.prototype.useTableResizer = true;
-
-/**
- * @property{boolean} useImageResizer=true Use true image editing frame size
- */
-Config.prototype.useImageResizer = true;
+Config.prototype.allowResizeTags = ['img', 'iframe', 'table', 'jodit'];
 
 /**
  * @property {object} resizer
@@ -105,6 +94,7 @@ export class resizer extends Plugin {
 		'span'
 	)[0];
 
+	/** @override */
 	protected afterInit(editor: IJodit): void {
 		$$('i', this.rect).forEach((resizeHandle: HTMLElement) => {
 			editor.e.on(
@@ -134,18 +124,37 @@ export class resizer extends Plugin {
 				}
 			)
 			.on('hideResizer', this.hide)
-			.on(
-				'change afterInit afterSetMode',
-				editor.async.debounce(
-					this.onChangeEditor.bind(this),
-					editor.defaultTimeout
-				)
-			);
+			.on('change afterInit afterSetMode', this.onChangeEditor);
 
 		this.addEventListeners();
 		this.onChangeEditor();
 	}
 
+	/**
+	 * Click in the editor area
+	 * @param e
+	 * @protected
+	 */
+	@watch(':click')
+	protected onEditorClick(e: MouseEvent): void {
+		let node = e.target as Nullable<Node>;
+
+		const {
+			editor,
+			options: { allowResizeTags }
+		} = this.j;
+
+		while (node && node !== editor) {
+			if (Dom.isTag(node, allowResizeTags)) {
+				this.bind(node);
+				this.onClickElement(node, e);
+				return;
+			}
+
+			node = node.parentNode;
+		}
+	}
+
 	private addEventListeners() {
 		const editor = this.j;
 
@@ -303,9 +312,8 @@ export class resizer extends Plugin {
 		}
 	}
 
+	@debounce()
 	private onChangeEditor() {
-		const editor = this.j;
-
 		if (this.isShown) {
 			if (!this.element || !this.element.parentNode) {
 				this.hide();
@@ -314,35 +322,20 @@ export class resizer extends Plugin {
 			}
 		}
 
-		if (!editor.isDestructed) {
-			$$('img, table, iframe', editor.editor).forEach(
-				(elm: HTMLElement) => {
-					if (editor.getMode() === consts.MODE_SOURCE) {
-						return;
-					}
-
-					if (
-						!(elm as any)[keyBInd] &&
-						((Dom.isTag(elm, 'iframe') &&
-							editor.o.useIframeResizer) ||
-							(Dom.isTag(elm, 'img') &&
-								editor.o.useImageResizer) ||
-							(Dom.isTag(elm, 'table') &&
-								editor.o.useTableResizer))
-					) {
-						(elm as any)[keyBInd] = true;
-						this.bind(elm);
-					}
-				}
-			);
-		}
+		$$('iframe', this.j.editor).forEach(this.bind)
 	}
 
 	/**
 	 * Bind an edit element toWYSIWYG element
 	 * @param {HTMLElement} element The element that you want toWYSIWYG add a function toWYSIWYG resize
 	 */
-	private bind(element: HTMLElement) {
+	@autobind
+	private bind(element: HTMLElement): void {
+		if ((element as any)[keyBInd]) {
+			return;
+		}
+
+		(element as any)[keyBInd] = true;
 		let wrapper: HTMLElement;
 
 		if (Dom.isTag(element, 'iframe')) {
@@ -399,11 +392,14 @@ export class resizer extends Plugin {
 				if (IS_IE && Dom.isTag(element, 'img')) {
 					event.preventDefault();
 				}
-			})
-			.on(element, 'click', () => this.onClickElement(element));
+			});
 	}
 
-	private onClickElement = (element: HTMLElement) => {
+	private onClickElement = (element: HTMLElement, e: MouseEvent) => {
+		if (this.isResized) {
+			return;
+		}
+
 		if (this.element !== element || !this.isShown) {
 			this.element = element;
 
@@ -514,11 +510,12 @@ export class resizer extends Plugin {
 	 */
 	@autobind
 	private hide(): void {
-		this.isResized = false;
-		this.isShown = false;
-		this.element = null;
-
-		Dom.safeRemove(this.rect);
+		if (!this.isResized) {
+			this.isResized = false;
+			this.isShown = false;
+			this.element = null;
+			Dom.safeRemove(this.rect);
+		}
 	}
 
 	private hideSizeViewer = () => {