jodit 3.9.3 → 3.10.2

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

@@ -21,7 +21,8 @@ import { UIButton } from '../button';
 import { getStrongControlTypes } from '../helpers/get-strong-control-types';
 import { component, watch } from '../../decorators';
 import { UIGroup } from './group';
-import { UISeparator } from '../separator';
+import { UISpacer } from './spacer';
+import { UISeparator } from './separator';
 import { isButtonGroup } from '../helpers/buttons';
 import { getControlType } from '../helpers/get-control-type';
 import { splitArray } from '../../helpers';
@@ -89,8 +90,9 @@ export class UIList<T extends IViewBased = IViewBased>
 
 		let lastBtnSeparator: boolean = false;
 
-		let line: IUIGroup = this.makeGroup();
+		let line = this.makeGroup();
 		this.append(line);
+		line.setMod('line', true);
 
 		let group: IUIGroup;
 
@@ -100,6 +102,7 @@ export class UIList<T extends IViewBased = IViewBased>
 			switch (control.name) {
 				case '\n':
 					line = this.makeGroup();
+					line.setMod('line', true);
 					group = this.makeGroup();
 					line.append(group);
 					this.append(line);
@@ -112,6 +115,19 @@ export class UIList<T extends IViewBased = IViewBased>
 					}
 					break;
 
+				case '---': {
+					group.setMod('before-spacer', true);
+
+					const space = new UISpacer(this.j);
+					line.append(space);
+
+					group = this.makeGroup();
+					line.append(group);
+					lastBtnSeparator = false;
+
+					break;
+				}
+
 				default:
 					lastBtnSeparator = false;
 					elm = this.makeButton(control, target);
@@ -136,9 +152,10 @@ export class UIList<T extends IViewBased = IViewBased>
 
 				if (buttons.length) {
 					group = this.makeGroup();
-					line.append(group);
 					group.setMod('separated', true).setMod('group', item.group);
 
+					line.append(group);
+
 					getStrongControlTypes(buttons, this.j.o.controls)
 						.filter(isNotRemoved)
 						.forEach(addButton);

package/src/core/ui/{separator.ts → list/separator.ts}

@@ -4,8 +4,8 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import { UIElement } from './element';
-import { component } from '../decorators';
+import { UIElement } from '../element';
+import { component } from '../../decorators';
 
 @component
 export class UISeparator extends UIElement {

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

@@ -0,0 +1,15 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+import { UIElement } from '../element';
+import { component } from '../../decorators';
+
+@component
+export class UISpacer extends UIElement {
+	className(): string {
+		return 'UISpacer';
+	}
+}

package/src/core/ui/popup/popup.less

@@ -7,16 +7,18 @@
 @import (reference) '../../../styles/variables';
 @import (reference) '../../../styles/mixins';
 
-.jodit-popup {
-	--box-shadow: 0 4px 1px -2px rgba(76, 76, 76, 0.2),
+:root {
+	--popup-box-shadow: 0 4px 1px -2px rgba(76, 76, 76, 0.2),
 		0 3px 3px 0 rgba(76, 76, 76, 0.15), 0 1px 4px 0 rgba(76, 76, 76, 0.13);
+}
 
+.jodit-popup {
 	.jodit-box();
 
 	position: fixed;
 	z-index: var(--z-index-popup);
 	display: inline-block;
-	box-shadow: var(--box-shadow);
+	box-shadow: var(--popup-box-shadow);
 	transform: translate3d(0, 0, 0);
 
 	&__content {

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

@@ -109,6 +109,8 @@ export class Popup extends UIElement implements IPopup {
 	open(getBound: getBoundFunc, keepPosition: boolean = false): this {
 		markOwner(this.jodit, this.container);
 
+		this.calculateZIndex();
+
 		this.isOpened = true;
 		this.addGlobalListeners();
 
@@ -129,6 +131,56 @@ export class Popup extends UIElement implements IPopup {
 		return this;
 	}
 
+	private calculateZIndex(): void {
+		if (this.container.style.zIndex) {
+			return;
+		}
+
+		const checkView = (view: IViewBased): boolean => {
+			const zIndex = view.container.style.zIndex || view.o.zIndex;
+
+			if (zIndex) {
+				this.setZIndex(1 + parseInt(zIndex.toString(), 10));
+				return true;
+			}
+
+			return false;
+		};
+
+		if (checkView(this.j)) {
+			return;
+		}
+
+		let pe = this.parentElement;
+
+		while (pe) {
+			if (checkView(pe.j)) {
+				return;
+			}
+
+			if (pe.container.style.zIndex) {
+				this.setZIndex(
+					1 + parseInt(pe.container.style.zIndex.toString(), 10)
+				);
+				return;
+			}
+
+			if (!pe.parentElement && pe.container.parentElement) {
+				const elm = UIElement.closestElement(
+					pe.container.parentElement,
+					UIElement
+				);
+
+				if (elm) {
+					pe = elm;
+					continue;
+				}
+			}
+
+			pe = pe.parentElement;
+		}
+	}
+
 	/**
 	 * Calculate static bound for point
 	 */
@@ -378,7 +430,7 @@ export class Popup extends UIElement implements IPopup {
 	/**
 	 * Set ZIndex
 	 */
-	setZIndex(index: number): void {
+	setZIndex(index: number | string): void {
 		this.container.style.zIndex = index.toString();
 	}
 

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

@@ -24,7 +24,8 @@ import { isButtonGroup } from '../ui/helpers/buttons';
 import { autobind } from '../decorators';
 
 export abstract class ViewWithToolbar extends View implements IViewWithToolbar {
-	toolbar: IToolbarCollection = makeCollection(this);
+	TOOLBAR!: IToolbarCollection;
+	toolbar: this['TOOLBAR'] = makeCollection(this);
 
 	private defaultToolbarContainer: HTMLElement =
 		this.c.div('jodit-toolbar__box');
@@ -75,6 +76,10 @@ export abstract class ViewWithToolbar extends View implements IViewWithToolbar {
 	registeredButtons: Set<IPluginButton> = new Set();
 	private groupToButtons: IDictionary<string[]> = {};
 
+	getRegisteredButtonGroups(): IDictionary<string[]> {
+		return this.groupToButtons;
+	}
+
 	/**
 	 * Register button for group
 	 */

package/src/jodit.ts

@@ -111,17 +111,6 @@ export class Jodit extends ViewWithToolbar implements IJodit {
 		return div.innerText || '';
 	}
 
-	/**
-	 * HTML value
-	 */
-	get value(): string {
-		return this.getEditorValue();
-	}
-
-	set value(html: string) {
-		this.setEditorValue(html);
-	}
-
 	/**
 	 * Return default timeout period in milliseconds for some debounce or throttle functions.
 	 * By default return `{observer.timeout}` options
@@ -406,10 +395,24 @@ export class Jodit extends ViewWithToolbar implements IJodit {
 		}
 	}
 
+	/**
+	 * HTML value
+	 */
+	get value(): string {
+		return this.getEditorValue();
+	}
+
+	set value(html: string) {
+		this.setEditorValue(html);
+	}
+
 	/**
 	 * Return editor value
 	 */
-	getEditorValue(removeSelectionMarkers: boolean = true): string {
+	getEditorValue(
+		removeSelectionMarkers: boolean = true,
+		consumer?: string
+	): string {
 		/**
 		 * Triggered before getEditorValue executed.
 		 * If returned not undefined getEditorValue will return this value
@@ -423,7 +426,7 @@ export class Jodit extends ViewWithToolbar implements IJodit {
 		 */
 		let value: string;
 
-		value = this.e.fire('beforeGetValueFromEditor');
+		value = this.e.fire('beforeGetValueFromEditor', consumer);
 
 		if (value !== undefined) {
 			return value;
@@ -459,7 +462,7 @@ export class Jodit extends ViewWithToolbar implements IJodit {
 		 */
 		const new_value: { value: string } = { value };
 
-		this.e.fire('afterGetValueFromEditor', new_value);
+		this.e.fire('afterGetValueFromEditor', new_value, consumer);
 
 		return new_value.value;
 	}

package/src/modules/dialog/dialog.less

@@ -115,7 +115,6 @@
 
 	&__header {
 		display: flex;
-		overflow: hidden;
 		min-height: 50px;
 		justify-content: space-between;
 		border-bottom: 1px solid var(--color-border);
@@ -268,21 +267,7 @@
 	}
 
 	&__resizer {
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		display: inline-block;
-		width: 0;
-		height: 0;
-		border-right: 0 solid transparent;
-		border-bottom: 10px solid var(--color-border);
-		border-left: 10px solid transparent;
-		cursor: se-resize;
-		opacity: 1;
-
-		&:hover {
-			border-bottom-color: rgba(0, 0, 0, 0.6);
-		}
+		.resize-handle();
 	}
 
 	@media (max-width: @screen-xs) {

package/src/modules/dialog/dialog.ts

@@ -39,6 +39,7 @@ import { STATUSES } from '../../core/component';
 import { eventEmitter, pluginSystem } from '../../core/global';
 import { component, autobind, hook } from '../../core/decorators';
 import { View } from '../../core/view/view';
+import { Icon } from '../../core/ui';
 
 declare module '../../config' {
 	interface Config {
@@ -661,8 +662,8 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 		/**
 		 * Called up to close the window
 		 */
-		if (this.e) {
-			this.e.fire('beforeClose', this);
+		if (this.e && this.e.fire('beforeClose', this) === false) {
+			return this;
 		}
 
 		this.setMod('active', false);
@@ -723,7 +724,13 @@ export class Dialog extends ViewWithToolbar implements IDialog {
 					</div>
 					<div class="${n('content')}"></div>
 					<div class="${n('footer')}"></div>
-					${self.o.resizable ? `<div class="${n('resizer')}"></div>` : ''}
+					${
+						self.o.resizable
+							? `<div class="${n('resizer')}">${Icon.get(
+									'resize_handler'
+							  )}</div>`
+							: ''
+					}
 				</div>
 			</div>`
 		) as HTMLDivElement;

package/src/modules/file-browser/builders/context-menu.ts

@@ -8,16 +8,15 @@ import type { FileBrowser } from '../file-browser';
 import { Dialog } from '../../dialog';
 
 import { Dom } from '../../../core/dom';
-import { F_CLASS, ICON_LOADER, ITEM_CLASS } from '../consts';
 import { attr, error } from '../../../core/helpers';
 import { makeContextMenu } from '../factories';
 import { Icon } from '../../../core/ui';
-import { getItem } from '../listeners/native-listeners';
+import { elementToItem, getItem } from '../listeners/native-listeners';
 import { openImageEditor } from '../../image-editor/image-editor';
 
-const CLASS_PREVIEW = F_CLASS + '_preview_',
+const CLASS_PREVIEW = 'jodit-filebrowser-preview',
 	preview_tpl_next = (next = 'next', right = 'right') =>
-		`<div class="${CLASS_PREVIEW}navigation ${CLASS_PREVIEW}navigation-${next}">` +
+		`<div class="${CLASS_PREVIEW}__navigation ${CLASS_PREVIEW}__navigation_arrow_${next}">` +
 		'' +
 		Icon.get('angle-' + right) +
 		'</a>';
@@ -42,6 +41,14 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 			ga = (key: string) => attr(item, key) || '';
 
 		self.async.setTimeout(() => {
+			const selectedItem = elementToItem(a, self.elementsMap);
+
+			if (!selectedItem) {
+				return;
+			}
+
+			self.state.activeElements = [selectedItem];
+
 			contextmenu.show(e.clientX, e.clientY, [
 				ga('data-is-file') !== '1' &&
 				opt.editImage &&
@@ -105,11 +112,11 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 										buttons: ['fullsize', 'dialog.close']
 									}),
 									temp_content = self.c.div(
-										F_CLASS + '_preview',
-										ICON_LOADER
+										CLASS_PREVIEW,
+										'<div class="jodit-icon_loader"></div>'
 									),
 									preview_box = self.c.div(
-										F_CLASS + '_preview_box'
+										CLASS_PREVIEW + '__box'
 									),
 									next = self.c.fromHTML(preview_tpl_next()),
 									prev = self.c.fromHTML(
@@ -133,7 +140,9 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 												if (
 													Dom.prevWithClass(
 														item,
-														ITEM_CLASS
+														self.files.getFullElName(
+															'item'
+														)
 													)
 												) {
 													temp_content.appendChild(
@@ -144,7 +153,9 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 												if (
 													Dom.nextWithClass(
 														item,
-														ITEM_CLASS
+														self.files.getFullElName(
+															'item'
+														)
 													)
 												) {
 													temp_content.appendChild(
@@ -177,20 +188,15 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 									[next, prev],
 									'click',
 									function (this: HTMLElement) {
-										if (
-											this.classList.contains(
-												CLASS_PREVIEW +
-													'navigation-next'
-											)
-										) {
+										if (this === next) {
 											item = Dom.nextWithClass(
 												item,
-												ITEM_CLASS
+												self.files.getFullElName('item')
 											) as HTMLElement;
 										} else {
 											item = Dom.prevWithClass(
 												item,
-												ITEM_CLASS
+												self.files.getFullElName('item')
 											) as HTMLElement;
 										}
 
@@ -201,7 +207,8 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 										Dom.detach(temp_content);
 										Dom.detach(preview_box);
 
-										temp_content.innerHTML = ICON_LOADER;
+										temp_content.innerHTML =
+											'<div class="jodit-icon_loader"></div>';
 
 										addLoadHandler(ga('href'));
 									}
@@ -212,7 +219,7 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 								});
 
 								preview.container.classList.add(
-									F_CLASS + '_preview_dialog'
+									CLASS_PREVIEW + '__dialog'
 								);
 								preview.setContent(temp_content);
 								preview.setPosition();
@@ -242,9 +249,9 @@ export default (self: FileBrowser): ((e: DragEvent) => boolean | void) => {
 			]);
 		}, self.defaultTimeout);
 
-		self?.e.on('beforeDestruct', () => {
-			contextmenu.destruct();
-		});
+		self?.dialog.e
+			.on('beforeClose', () => contextmenu.close())
+			.on('beforeDestruct', () => contextmenu.destruct());
 
 		e.stopPropagation();
 		e.preventDefault();

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

@@ -20,7 +20,6 @@ import type {
 } from '../../types/';
 
 import { humanSizeToBytes, isArray, isString } from '../../core/helpers';
-import { ITEM_CLASS as IC } from './consts';
 import { UIFileInput } from '../../core/ui';
 
 declare module '../../config' {
@@ -117,7 +116,9 @@ Config.prototype.filebrowser = {
 	renameFolder: true,
 	moveFolder: true,
 	moveFile: true,
+
 	showFoldersPanel: true,
+	storeLastOpenedFolder: true,
 
 	width: 859,
 	height: 400,
@@ -156,7 +157,13 @@ Config.prototype.filebrowser = {
 	showFileName: true,
 	showFileSize: true,
 	showFileChangeTime: true,
-	saveStateInStorage: true,
+
+	saveStateInStorage: {
+		storeLastOpenedFolder: true,
+		storeView: true,
+		storeSortBy: true
+	},
+
 	pixelOffsetLoadNewChunk: 200,
 
 	getThumbTemplate(
@@ -166,6 +173,7 @@ Config.prototype.filebrowser = {
 		source_name: string
 	): string {
 		const opt = this.options,
+			IC = this.files.getFullElName('item'),
 			showName = opt.showFileName,
 			showSize = opt.showFileSize && item.size,
 			showTime = opt.showFileChangeTime && item.time;

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

@@ -36,26 +36,30 @@ import './config';
 
 import { Dom } from '../../core/dom';
 import { ObserveObject } from '../../core/events/';
-import { F_CLASS, ICON_LOADER } from './consts';
 import { makeDataProvider } from './factories';
 import { stateListeners } from './listeners/state-listeners';
 import { nativeListeners } from './listeners/native-listeners';
 import { selfListeners } from './listeners/self-listeners';
 import { DEFAULT_SOURCE_NAME } from './data-provider';
 import { autobind } from '../../core/decorators';
+import { FileBrowserFiles, FileBrowserTree } from './ui';
 
 export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 	/** @override */
 	className(): string {
-		return 'FileBrowser';
+		return 'Filebrowser';
 	}
 
-	private loader = this.c.div(F_CLASS + '__loader', ICON_LOADER);
-	private browser = this.c.div(F_CLASS + ' non-selected');
-	private status_line = this.c.div(F_CLASS + '__status');
+	private loader = this.c.div(
+		this.getFullElName('loader'),
+		'<div class="jodit-icon_loader"></div>'
+	);
 
-	tree = this.c.div(F_CLASS + '__tree');
-	files = this.c.div(F_CLASS + '__files');
+	private browser = this.c.div(this.componentName);
+	private status_line = this.c.div(this.getFullElName('status'));
+
+	tree = new FileBrowserTree(this);
+	files = new FileBrowserFiles(this);
 
 	state = ObserveObject.create<IFileBrowserState>({
 		currentPath: '',
@@ -75,8 +79,8 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 	dataProvider!: IFileBrowserDataProvider;
 
 	async loadItems(): Promise<any> {
-		this.files.classList.add('jodit-filebrowser_active');
-		this.files.appendChild(this.loader.cloneNode(true));
+		this.files.setMod('active', true);
+		this.files.container.appendChild(this.loader.cloneNode(true));
 
 		return this.dataProvider
 			.items(this.state.currentPath, this.state.currentSource, {
@@ -101,11 +105,11 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			this.uploader.setSource(this.state.currentSource);
 		}
 
-		this.tree.classList.add('jodit-filebrowser_active');
+		this.tree.setMod('active', true);
 
-		Dom.detach(this.tree);
+		Dom.detach(this.tree.container);
 
-		this.tree.appendChild(this.loader.cloneNode(true));
+		this.tree.container.appendChild(this.loader.cloneNode(true));
 
 		const items = this.loadItems();
 
@@ -125,7 +129,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 
 			return Promise.all([tree, items]).catch(error);
 		} else {
-			this.tree.classList.remove('jodit-filebrowser_active');
+			this.tree.setMod('active', false);
 		}
 
 		return items.catch(error);
@@ -217,21 +221,23 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			message = message.message;
 		}
 
-		this.status_line.classList.remove('jodit-filebrowser_success');
+		const successClass = this.getFullElName('status', 'success', true),
+			activeClass = this.getFullElName('status', 'active', true);
 
-		this.status_line.classList.add('jodit-filebrowser_active');
+		this.status_line.classList.remove(successClass);
+		this.status_line.classList.add(activeClass);
 
 		const messageBox = this.c.div();
 		messageBox.textContent = message;
 		this.status_line.appendChild(messageBox);
 
 		if (success) {
-			this.status_line.classList.add('jodit-filebrowser_success');
+			this.status_line.classList.add(successClass);
 		}
 
 		this.async.setTimeout(
 			() => {
-				this.status_line.classList.remove('jodit-filebrowser_active');
+				this.status_line.classList.remove(activeClass);
 				Dom.detach(this.status_line);
 			},
 			{
@@ -280,9 +286,9 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			let localTimeout: number = 0;
 
 			this.e
-				.off(this.files, 'dblclick')
-				.on(this.files, 'dblclick', this.onSelect(callback))
-				.on(this.files, 'touchstart', () => {
+				.off(this.files.container, 'dblclick')
+				.on(this.files.container, 'dblclick', this.onSelect(callback))
+				.on(this.files.container, 'touchstart', () => {
 					const now = new Date().getTime();
 
 					if (now - localTimeout < consts.EMULATE_DBLCLICK_TIMEOUT) {
@@ -345,7 +351,10 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			Config.defaultOptions.filebrowser
 		) as IFileBrowserOptions;
 
-		self.storage = Storage.makeStorage(this.o.saveStateInStorage);
+		self.storage = Storage.makeStorage(
+			Boolean(this.o.saveStateInStorage),
+			this.componentName
+		);
 
 		self.dataProvider = makeDataProvider(self, self.options);
 
@@ -366,11 +375,13 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			});
 		});
 
+		self.browser.component = this;
+
 		if (self.o.showFoldersPanel) {
-			self.browser.appendChild(self.tree);
+			self.browser.appendChild(self.tree.container);
 		}
 
-		self.browser.appendChild(self.files);
+		self.browser.appendChild(self.files.container);
 		self.browser.appendChild(self.status_line);
 
 		selfListeners.call(self);
@@ -404,7 +415,14 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			}
 		});
 
-		const view = this.storage.get(F_CLASS + '_view');
+		const { storeView, storeSortBy, storeLastOpenedFolder } = this.o
+			.saveStateInStorage || {
+			storeLastOpenedFolder: false,
+			storeView: false,
+			storeSortBy: false
+		};
+
+		const view = storeView && this.storage.get('view');
 
 		if (view && this.o.view == null) {
 			self.state.view = view === 'list' ? 'list' : 'tiles';
@@ -414,7 +432,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 
 		this.state.fire('change.view');
 
-		const sortBy = self.storage.get<string>(F_CLASS + '_sortby');
+		const sortBy = storeSortBy && self.storage.get<string>('sortBy');
 
 		if (sortBy) {
 			const parts = sortBy.split('-');
@@ -426,10 +444,13 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			self.state.sortBy = self.o.sortBy || 'changed-desc';
 		}
 
-		// TODO
-		// self.dataProvider.currentBaseUrl = $$('base', editorDoc).length
-		// 	? attr($$('base', editorDoc)[0], 'href') || ''
-		// 	: location.protocol + '//' + location.host;
+		if (storeLastOpenedFolder) {
+			const currentPath = self.storage.get<string>('currentPath'),
+				currentSource = self.storage.get<string>('currentSource');
+
+			self.state.currentPath = currentPath ?? '';
+			self.state.currentSource = currentSource ?? '';
+		}
 
 		self.initUploader(self);
 	}