jodit 3.23.3 → 3.24.2

package/types/plugins/wrap-nodes/config.d.ts

@@ -11,6 +11,16 @@ declare module '../../config' {
     interface Config {
         wrapNodes: {
             exclude: HTMLTagNames[];
+            /**
+             * If the editor is empty then insert an empty paragraph into it
+             * @example
+             * ```javascript
+             * Jodit.make('#editor', {
+             * 	wrapNodes: {
+             * 		emptyBlockAfterInit: true
+             * 	}
+             * });
+             */
             emptyBlockAfterInit: boolean;
         };
     }

package/types/types/events.d.ts

@@ -174,3 +174,7 @@ interface IEventEmitter extends IDestructible {
 export interface IObservable {
 	on(event: string | string[], callback: CallbackFunction): this;
 }
+
+interface IEventEmitter {
+	on(object: Document, event: 'selectionchange', callback: CallbackFunction): this;
+}

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

@@ -27,7 +27,7 @@ import type { IDlgs } from './traits';
  * The module creates a web browser dialog box. In a Web browser ,you can select an image, remove, drag it. Upload new
  */
 export interface ISourceFile {
-	type: 'folder' | 'image' | 'file';
+	type: 'image' | 'file' | 'folder';
 	file?: string;
 	fileIsAbsolute?: boolean;
 	name?: string;
@@ -210,6 +210,15 @@ export interface IFileBrowserDataProvider extends IDestructible {
 		mods?: IFileBrowserDataProviderItemsMods
 	): Promise<IFileBrowserItem[]>;
 
+	itemsEx(
+		path: string,
+		source: string,
+		mods?: IFileBrowserDataProviderItemsMods
+	): Promise<{
+		items: IFileBrowserItem[];
+		loadedTotal: number;
+	}>;
+
 	tree(path: string, source: string): Promise<ISourcesFiles>;
 
 	createFolder(name: string, path: string, source: string): Promise<boolean>;
@@ -286,11 +295,6 @@ export interface IFileBrowser<
 	status(message: string | Error, success?: boolean): void;
 }
 
-export interface IFileBrowserMessage {
-	message: string;
-	type: 'success' | 'error';
-}
-
 export interface IFileBrowserState {
 	currentPath: string;
 	currentSource: string;
@@ -304,8 +308,6 @@ export interface IFileBrowserState {
 	elements: IFileBrowserItem[];
 	activeElements: IFileBrowserItem[];
 	sources: ISourcesFiles;
-
-	messages: IFileBrowserMessage[];
 }
 
 export interface IFileBrowserFolder {
@@ -319,12 +321,17 @@ export interface IFileBrowserItemElement extends ISourceFile {
 	sourceName: string;
 }
 
-export interface IFileBrowserItemWrapper extends IFileBrowserItemElement {
+export interface IUniqueHash {
+	uniqueHashKey: string;
+}
+
+export interface IFileBrowserItemWrapper
+	extends IFileBrowserItemElement,
+		IUniqueHash {
 	path: string;
 	fileURL: string;
 	imageURL: string;
 	time: string;
-	uniqueHashKey: string;
 }
 
 export type IFileBrowserItem = IFileBrowserItemWrapper &

package/types/types/select.d.ts

@@ -9,7 +9,7 @@
  */
 
 import type { CanUndef, HTMLTagNames, IDictionary, Nullable } from './types';
-import type { IStyle } from './style';
+import type { IStyle, IStyleOptions } from './style';
 
 export interface MarkerInfo {
 	startId: string;
@@ -80,15 +80,20 @@ export interface ISelect {
 		tagOrCallback: HTMLTagNames | ((font: HTMLElement) => any)
 	): HTMLElement[];
 
+	/** @deprecated Instead use commitStyle */
 	applyStyle(
 		style: CanUndef<IStyle>,
 		options?: {
 			element?: HTMLTagNames;
+			/** @deprecated Instead use attributes.class*/
 			className?: string;
+			attributes?: IDictionary<string | number>;
 			defaultTag?: HTMLTagNames;
 		}
 	): void;
 
+	commitStyle(options: IStyleOptions): void;
+
 	eachSelection(callback: (current: Node) => void): void;
 	splitSelection(currentBox: HTMLElement): Nullable<Element>;
 }

package/types/types/storage.d.ts

@@ -6,7 +6,7 @@
 /**
  * @module types
  */
-export declare type StorageValueType = string | number | boolean | object | StorageValueType[];
+export type StorageValueType = string | number | boolean | object | StorageValueType[];
 export interface IStorage<T = StorageValueType> {
     set(key: string, value: T): IStorage<T>;
     delete(key: string): IStorage<T>;

package/types/types/style.d.ts

@@ -8,17 +8,84 @@
  * @module types
  */
 
-import type { CanUndef, HTMLTagNames, IDictionary } from './types';
+import type { HTMLTagNames, IDictionary } from './types';
+import { IJodit } from './jodit';
 
 export type StyleValue = number | string | null | undefined;
 
 export type IStyle = IDictionary<StyleValue>;
+export type IAttributes = {
+	[K in string]: IStyle | string | number | boolean | null;
+};
 
 export interface IStyleOptions {
-	style: CanUndef<IStyle>;
-	element: CanUndef<HTMLTagNames>;
-	className: CanUndef<string>;
-	defaultTag: CanUndef<HTMLTagNames>;
+	element?: HTMLTagNames;
+	attributes?: IAttributes;
+	defaultTag?: HTMLTagNames;
+	hooks?: {
+		beforeWrapList?(
+			mode: CommitMode,
+			li: HTMLElement,
+			style: ICommitStyle
+		): void;
+		afterWrapList?(
+			mode: CommitMode,
+			li: HTMLElement,
+			style: ICommitStyle
+		): void;
+		beforeToggleList?(
+			mode: CommitMode,
+			list: HTMLElement,
+			style: ICommitStyle
+		): void | CommitMode;
+		beforeUnwrapList?(
+			mode: 'unwrap',
+			list: HTMLElement,
+			style: ICommitStyle
+		): void | CommitMode;
+		afterToggleList?(
+			mode: CommitMode,
+			list: HTMLElement,
+			style: ICommitStyle
+		): void;
+		afterToggleAttribute?(
+			mode: CommitMode,
+			elm: HTMLElement,
+			key: string,
+			value?: string | number | null | boolean
+		): void;
+	};
+	/** @deprecated */
+	style?: IStyle;
+	/** @deprecated */
+	className?: string;
+}
+
+export interface ICommitStyle {
+	isApplied(elm: HTMLElement, key: string): boolean;
+
+	setApplied(elm: HTMLElement, key: string): void;
+
+	readonly elementIsList: boolean;
+
+	readonly element: HTMLTagNames;
+
+	/**
+	 * New element is block
+	 */
+	readonly elementIsBlock: boolean;
+
+	/**
+	 * The commit applies the tag change
+	 */
+	readonly isElementCommit: boolean;
+
+	readonly defaultTag: HTMLTagNames;
+
+	readonly elementIsDefault: Boolean;
+	readonly options: IStyleOptions;
+
+	apply(jodit: IJodit): void;
 }
 
 export type CommitMode =

package/types/types/uploader.d.ts

@@ -40,6 +40,20 @@ export interface IUploaderOptions<T> {
 		| string
 		| ((request: FormData | IDictionary<string> | string) => string);
 	insertImageAsBase64URI: boolean;
+
+	/**
+	 * List of extensions for images
+	 * @default ['jpg', 'png', 'jpeg', 'gif']
+	 * @example
+	 * ```javascript
+	 * Jodit.make('#editor', {
+	 * 	uploader: {
+	 * 		insertImageAsBase64URI: true,
+	 * 		imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'svg', 'webp']
+	 * 	}
+	 * });
+	 * ```
+	 */
 	imagesExtensions: string[];
 	headers?:
 		| IDictionary<string>

package/types/types/view.d.ts

@@ -70,7 +70,7 @@ interface IViewOptions extends ILanguageOptions, IToolbarOptions {
 
 	allowTabNavigation?: boolean;
 
-	zIndex?: number;
+	zIndex?: number | string;
 	fullsize?: boolean;
 	globalFullSize?: boolean;
 
@@ -135,7 +135,7 @@ interface IViewBased<T = IViewOptions>
 	readonly components: Set<IComponent>;
 	getInstance<T extends IComponent>(moduleName: string, options?: object): T;
 
-	readonly message: IMessages;
+	message: IMessages;
 }
 
 interface IViewWithToolbar<T = IViewOptions> extends IViewBased<T> {

package/vdom.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+		/>
+		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+		<title>Document</title>
+		<script src="build/vdom.js"></script>
+		<link rel="stylesheet" href="build/vdom.css" />
+	</head>
+	<body>
+		<textarea id="editor">test</textarea>
+		<script>
+			VDomJodit.make(editor);
+		</script>
+	</body>
+</html>

package/src/core/selection/style/api/toggle/toggle-css.ts

@@ -1,136 +0,0 @@
-/*!
- * 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 { CommitMode, IJodit } from 'jodit/types';
-import type { CommitStyle } from 'jodit/core/selection/style/commit-style';
-import { attr } from 'jodit/core/helpers/utils';
-import { css } from 'jodit/core/helpers/utils/css';
-import { dataBind } from 'jodit/core/helpers/utils/data-bind';
-import { kebabCase } from 'jodit/core/helpers/string/kebab-case';
-import { normalizeCssValue } from 'jodit/core/helpers/normalize/normalize-css-value';
-import { size } from 'jodit/core/helpers/size/object-size';
-import { Dom } from 'jodit/core/dom';
-import { CHANGE, UNSET, UNWRAP } from 'jodit/core/selection/style/commit-style';
-import { getContainer } from 'jodit/core/global';
-
-/**
- * Toggles css and classname
- * @private
- */
-export function toggleCSS(
-	commitStyle: CommitStyle,
-	elm: HTMLElement,
-	jodit: IJodit,
-	mode: CommitMode,
-	dry: boolean = false
-): CommitMode {
-	const { style, className } = commitStyle.options;
-
-	if (style && size(style) > 0) {
-		Object.keys(style).forEach((rule: string) => {
-			const inlineValue = elm.style.getPropertyValue(kebabCase(rule));
-
-			if (inlineValue === '' && style[rule] == null) {
-				return;
-			}
-
-			if (
-				getNativeCSSValue(jodit, elm, rule) ===
-				normalizeCssValue(rule, style[rule] as string)
-			) {
-				!dry && css(elm, rule, null);
-				mode = UNSET;
-				mode = removeExtraStyleAttribute(commitStyle, elm, mode);
-				return;
-			}
-
-			mode = CHANGE;
-			!dry && css(elm, rule, style[rule]);
-			if (!dry) {
-				mode = removeExtraStyleAttribute(commitStyle, elm, mode);
-			}
-		});
-	}
-
-	if (className) {
-		if (elm.classList.contains(className)) {
-			elm.classList.remove(className);
-			mode = UNSET;
-		} else {
-			elm.classList.add(className);
-			mode = CHANGE;
-		}
-	}
-
-	return mode;
-}
-
-/**
- * If the element has an empty style attribute, it removes the attribute,
- * and if it is default, it removes the element itself
- */
-function removeExtraStyleAttribute(
-	commitStyle: CommitStyle,
-	elm: HTMLElement,
-	mode: CommitMode
-): CommitMode {
-	if (!attr(elm, 'style')) {
-		attr(elm, 'style', null);
-
-		if (elm.tagName.toLowerCase() === commitStyle.defaultTag) {
-			Dom.unwrap(elm);
-			mode = UNWRAP;
-		}
-	}
-
-	return mode;
-}
-
-/**
- * Creates an iframe into which elements will be inserted to test their default styles in the browser
- */
-function getShadowRoot(jodit: IJodit): HTMLElement {
-	if (dataBind(jodit, 'shadowRoot') !== undefined) {
-		return dataBind(jodit, 'shadowRoot');
-	}
-
-	const container = getContainer(jodit);
-
-	const iframe = document.createElement('iframe');
-	css(iframe, {
-		width: 0,
-		height: 0,
-		position: 'absolute',
-		border: 0
-	});
-
-	iframe.src = 'about:blank';
-	container.appendChild(iframe);
-
-	const doc = iframe.contentWindow?.document;
-
-	const shadowRoot = !doc ? jodit.od.body : doc.body;
-	dataBind(jodit, 'shadowRoot', shadowRoot);
-
-	return shadowRoot;
-}
-
-/**
- * `strong -> fontWeight 700`
- */
-function getNativeCSSValue(
-	jodit: IJodit,
-	elm: HTMLElement,
-	key: string
-): ReturnType<typeof css> {
-	const newElm = jodit.create.element(elm.tagName.toLowerCase());
-	newElm.style.cssText = elm.style.cssText;
-	const root = getShadowRoot(jodit);
-	root.appendChild(newElm);
-	const result = css(newElm, key);
-	Dom.safeRemove(newElm);
-	return result;
-}

package/src/core/selection/style/api/toggle/toggle-ordered-list.ts

@@ -1,54 +0,0 @@
-/*!
- * 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 { IJodit, CommitMode } from 'jodit/types';
-import type { CommitStyle } from '../../commit-style';
-import { Dom } from 'jodit/core/dom';
-import { extractSelectedPart } from '../extract';
-import { CHANGE, INITIAL, REPLACE } from '../../commit-style';
-import { toggleCSS } from './toggle-css';
-
-/**
- * Replaces `ul->ol` or `ol->ul`, apply styles to the list, or remove a list item from it
- * @private
- */
-export function toggleOrderedList(
-	style: CommitStyle,
-	li: HTMLElement,
-	jodit: IJodit,
-	mode: CommitMode
-): CommitMode {
-	if (!li) {
-		return mode;
-	}
-
-	const list = li.parentElement;
-
-	if (!list) {
-		return mode;
-	}
-
-	// ul => ol, ol => ul
-	if (list.tagName.toLowerCase() !== style.element) {
-		const newList = Dom.replace<HTMLElement>(
-			list,
-			style.element,
-			jodit.createInside
-		);
-		toggleCSS(style, newList, jodit, mode);
-		return REPLACE;
-	}
-
-	if (toggleCSS(style, li.parentElement, jodit, INITIAL, true) === CHANGE) {
-		return toggleCSS(style, li.parentElement, jodit, mode);
-	}
-
-	extractSelectedPart(list, li, jodit);
-	Dom.unwrap(li.parentElement);
-	Dom.replace(li, jodit.o.enter, jodit.createInside);
-
-	return mode;
-}

package/src/core/selection/style/api/toggle-commit-styles.ts

@@ -1,35 +0,0 @@
-/*!
- * 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 { IJodit } from 'jodit/types';
-import type { CommitStyle } from '../commit-style';
-import { Dom } from 'jodit/core/dom';
-
-/**
- * Add or remove styles to element
- * @param elm - The element to switch styles
- * @private
- */
-export function toggleCommitStyles(
-	commitStyle: CommitStyle,
-	elm: HTMLElement,
-	jodit: IJodit
-): boolean {
-	if (
-		commitStyle.elementIsBlock ||
-		(Dom.isTag(elm, commitStyle.element) && !commitStyle.elementIsDefault)
-	) {
-		if (elm.getAttribute('style')) {
-			Dom.replace(elm, commitStyle.defaultTag, jodit.createInside, true);
-		} else {
-			Dom.unwrap(elm);
-		}
-
-		return true;
-	}
-
-	return false;
-}

package/src/core/selection/style/api/wrap-ordered-list.ts

@@ -1,42 +0,0 @@
-/*!
- * 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 { IJodit } from 'jodit/types';
-import { Dom } from 'jodit/core/dom';
-import type { CommitStyle } from '../commit-style';
-
-/**
- * Replaces non-leaf items with leaf items and either creates a new list or
- * adds a new item to the nearest old list
- * @private
- */
-export function wrapOrderedList(
-	commitStyle: CommitStyle,
-	wrapper: HTMLElement,
-	jodit: IJodit
-): HTMLElement {
-	const newWrapper = Dom.replace<HTMLElement>(
-		wrapper,
-		'li',
-		jodit.createInside
-	);
-
-	let list =
-		newWrapper.previousElementSibling || newWrapper.nextElementSibling;
-
-	if (!Dom.isTag(list, ['ul', 'ol'])) {
-		list = jodit.createInside.element(commitStyle.element);
-		Dom.before(newWrapper, list);
-	}
-
-	if (newWrapper.previousElementSibling === list) {
-		Dom.append(list, newWrapper);
-	} else {
-		Dom.prepend(list, newWrapper);
-	}
-
-	return <HTMLElement>list;
-}

package/types/core/selection/style/api/toggle/toggle-css.d.ts

@@ -1,12 +0,0 @@
-/*!
- * 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 { CommitMode, IJodit } from '../../../../../types';
-import type { CommitStyle } from '../../../../../core/selection/style/commit-style';
-/**
- * Toggles css and classname
- * @private
- */
-export declare function toggleCSS(commitStyle: CommitStyle, elm: HTMLElement, jodit: IJodit, mode: CommitMode, dry?: boolean): CommitMode;

package/types/core/selection/style/api/toggle-commit-styles.d.ts

@@ -1,13 +0,0 @@
-/*!
- * 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 { IJodit } from '../../../../types';
-import type { CommitStyle } from '../commit-style';
-/**
- * Add or remove styles to element
- * @param elm - The element to switch styles
- * @private
- */
-export declare function toggleCommitStyles(commitStyle: CommitStyle, elm: HTMLElement, jodit: IJodit): boolean;