jodit 3.9.3 → 3.10.2

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

@@ -0,0 +1,33 @@
+/*!
+ * 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
+ */
+
+export default [
+	'bold',
+	'italic',
+	'|',
+	'ul',
+	'ol',
+	'eraser',
+	'|',
+	'fontsize',
+	'brush',
+	'paragraph',
+	'---',
+	'image',
+	'table',
+	'\n',
+	'link',
+	'|',
+	'align',
+	'|',
+	'undo',
+	'redo',
+	'|',
+	'copyformat',
+	'fullsize',
+	'---',
+	'dots'
+];

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

@@ -181,6 +181,7 @@ export class inlinePopup extends Plugin {
 				}
 			)
 			.on('hidePopup', this.hidePopup)
+			.on('showInlineToolbar', this.showInlineToolbar)
 			.on(
 				'showPopup',
 				(
@@ -327,4 +328,20 @@ export class inlinePopup extends Plugin {
 			this.onClick
 		);
 	}
+
+	/**
+	 * Show the inline WYSIWYG toolbar editor.
+	 */
+	@autobind
+	private showInlineToolbar(bound?: IBound) {
+		this.showPopup(() => {
+			if (bound) {
+				return bound;
+			}
+
+			const { range } = this.j.s;
+
+			return range.getBoundingClientRect();
+		}, 'toolbar');
+	}
 }

package/src/plugins/keyboard/delete.ts

@@ -28,8 +28,10 @@ declare module '../../config' {
 			hotkeys: {
 				delete: string[];
 				deleteWord: string[];
+				deleteSentence: string[];
 				backspace: string[];
 				backspaceWord: string[];
+				backspaceSentence: string[];
 			};
 		};
 	}
@@ -39,11 +41,15 @@ Config.prototype.delete = {
 	hotkeys: {
 		delete: ['delete', 'cmd+backspace'],
 		deleteWord: ['ctrl+delete', 'cmd+alt+backspace', 'ctrl+alt+backspace'],
+		deleteSentence: ['ctrl+shift+delete', 'cmd+shift+delete'],
 		backspace: ['backspace'],
-		backspaceWord: ['ctrl+backspace']
+		backspaceWord: ['ctrl+backspace'],
+		backspaceSentence: ['ctrl+shift+backspace', 'cmd+shift+backspace']
 	}
 };
 
+type DeleteMode = 'char' | 'word' | 'sentence';
+
 export class Delete extends Plugin {
 	/** @override */
 	override requires = ['hotkeys'];
@@ -85,12 +91,20 @@ export class Delete extends Plugin {
 				}
 			)
 			.registerCommand('deleteWordButton', {
-				exec: () => this.onDelete(false, true),
+				exec: () => this.onDelete(false, 'word'),
 				hotkeys: jodit.o.delete.hotkeys.deleteWord
 			})
 			.registerCommand('backspaceWordButton', {
-				exec: () => this.onDelete(true, true),
+				exec: () => this.onDelete(true, 'word'),
 				hotkeys: jodit.o.delete.hotkeys.backspaceWord
+			})
+			.registerCommand('deleteSentenceButton', {
+				exec: () => this.onDelete(false, 'sentence'),
+				hotkeys: jodit.o.delete.hotkeys.deleteSentence
+			})
+			.registerCommand('backspaceSentenceButton', {
+				exec: () => this.onDelete(true, 'sentence'),
+				hotkeys: jodit.o.delete.hotkeys.backspaceSentence
 			});
 	}
 
@@ -127,7 +141,10 @@ export class Delete extends Plugin {
 	/**
 	 * Listener BackSpace or Delete button
 	 */
-	private onDelete(backspace: boolean, block: boolean = false): false | void {
+	private onDelete(
+		backspace: boolean,
+		mode: DeleteMode = 'char'
+	): false | void {
 		const sel = this.j.selection;
 
 		if (!sel.isFocused()) {
@@ -154,7 +171,7 @@ export class Delete extends Plugin {
 
 			if (
 				this.checkRemoveInseparableElement(fakeNode, backspace) ||
-				this.checkRemoveChar(fakeNode, backspace, block) ||
+				this.checkRemoveChar(fakeNode, backspace, mode) ||
 				this.checkTableCell(fakeNode) ||
 				this.checkRemoveEmptyParent(fakeNode, backspace) ||
 				this.checkRemoveEmptyNeighbor(fakeNode, backspace) ||
@@ -213,7 +230,7 @@ export class Delete extends Plugin {
 	private checkRemoveChar(
 		fakeNode: Node,
 		backspace: boolean,
-		block: boolean
+		mode: DeleteMode
 	): void | true {
 		const step = backspace ? -1 : 1;
 		const anotherSibling: Nullable<Node> = getSibling(fakeNode, !backspace);
@@ -303,8 +320,13 @@ export class Delete extends Plugin {
 
 				call(backspace ? Dom.after : Dom.before, sibling, fakeNode);
 
-				if (block) {
-					while (this.checkRemoveChar(fakeNode, backspace, false)) {}
+				if (
+					mode === 'sentence' ||
+					(mode === 'word' &&
+						removed !== ' ' &&
+						removed !== NBSP_SPACE)
+				) {
+					this.checkRemoveChar(fakeNode, backspace, mode);
 				}
 
 				break;

package/src/plugins/link/template.ts

@@ -93,13 +93,13 @@ export const formTemplate = (editor: IJodit): IUIForm => {
 			[
 				new UIButton(editor, {
 					name: 'unlink',
-					status: 'default',
+					variant: 'default',
 					text: 'Unlink'
 				}),
 				new UIButton(editor, {
 					name: 'insert',
 					type: 'submit',
-					status: 'primary',
+					variant: 'primary',
 					text: 'Insert'
 				})
 			],

package/src/plugins/mobile.ts

@@ -13,10 +13,10 @@ import type {
 } from '../types/';
 import { Config } from '../config';
 import * as consts from '../core/constants';
-import { splitArray } from '../core/helpers/';
+import { splitArray, toArray } from '../core/helpers/';
 import { makeCollection } from '../modules/toolbar/factory';
 import { UIList } from '../core/ui';
-import { flatButtonsSet, isButtonGroup } from '../core/ui/helpers/buttons';
+import { flatButtonsSet } from '../core/ui/helpers/buttons';
 
 declare module '../config' {
 	interface Config {
@@ -117,18 +117,14 @@ export function mobile(editor: IJodit): void {
 		'getDiffButtons.mobile',
 		(toolbar: IToolbarCollection): void | ButtonsGroups => {
 			if (toolbar === editor.toolbar) {
-				const buttons: ButtonsGroups = splitArray(editor.o.buttons),
-					flatStore = flatButtonsSet(store);
-
-				return buttons.reduce((acc, item) => {
-					if (isButtonGroup(item)) {
-						acc.push({
-							...item,
-							buttons: item.buttons.filter(
-								btn => !flatStore.has(btn)
-							)
-						});
-					} else if (!flatStore.has(item)) {
+				const buttons = flatButtonsSet(
+						splitArray(editor.o.buttons),
+						editor
+					),
+					flatStore = flatButtonsSet(store, editor);
+
+				return toArray(buttons).reduce((acc, item) => {
+					if (!flatStore.has(item)) {
 						acc.push(item);
 					}
 

package/src/plugins/ordered-list.ts

@@ -8,6 +8,8 @@ import type { IControlType, IJodit, Nullable } from '../types';
 import { Config } from '../config';
 import { Dom } from '../core/dom';
 import { dataBind, toArray } from '../core/helpers';
+import { Plugin } from '../core/plugin';
+import { autobind } from '../core/decorators';
 
 const exec: IControlType<IJodit>['exec'] = (jodit, _, { control }): void => {
 	const key = `button${control.command}`;
@@ -52,7 +54,44 @@ Config.prototype.controls.ol = {
 /**
  * Process commands insertOrderedList and insertUnOrderedList
  */
-export function orderedList(editor: IJodit): void {
+export class orderedList extends Plugin {
+	override buttons: Plugin['buttons'] = [
+		{
+			name: 'ul',
+			group: 'list'
+		},
+		{
+			name: 'ol',
+			group: 'list'
+		}
+	];
+
+	protected afterInit(jodit: IJodit): void {
+		jodit
+			.registerCommand('insertUnorderedList', this.onCommand)
+			.registerCommand('insertOrderedList', this.onCommand);
+	}
+
+	@autobind
+	private onCommand(command: string, _: unknown, type: string): false {
+		this.jodit.s.applyStyle(
+			{
+				listStyleType: type ?? null
+			},
+			{
+				element: command === 'insertunorderedlist' ? 'ul' : 'ol'
+			}
+		);
+
+		this.jodit.setEditorValue();
+
+		return false;
+	}
+
+	protected beforeDestruct(jodit: IJodit): void {}
+}
+
+export function orderedList1(editor: IJodit): void {
 	const isOurCommand = (command: string) =>
 			/insert(un)?orderedlist/i.test(command),
 		getListWrapper = () =>

package/src/plugins/powered-by-jodit.ts

@@ -0,0 +1,39 @@
+/*!
+ * 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 type { IJodit } from '../types';
+
+declare module '../config' {
+	interface Config {
+		hidePoweredByJodit: boolean;
+	}
+}
+
+export function poweredByJodit(jodit: IJodit): void {
+	if (
+		!jodit.o.hidePoweredByJodit &&
+		!jodit.o.inline &&
+		(jodit.o.showCharsCounter ||
+			jodit.o.showWordsCounter ||
+			jodit.o.showXPathInStatusbar)
+	) {
+		jodit.hookStatus('ready', () => {
+			jodit.statusbar.append(
+				jodit.create.fromHTML(
+					`<a
+						tabindex="-1"
+						style="text-transform: uppercase"
+						class="jodit-status-bar-link"
+						target="_blank"
+						href="https://xdsoft.net/jodit/">
+							Powered by Jodit
+						</a>`
+				),
+				true
+			);
+		});
+	}
+}

package/src/plugins/print/preview.ts

@@ -6,58 +6,12 @@
 
 import type { IControlType, IDialog, IJodit } from '../../types';
 import { Config } from '../../config';
-import { css } from '../../core/helpers';
+import { attr, css } from '../../core/helpers';
 import * as consts from '../../core/constants';
 
 Config.prototype.controls.preview = {
 	icon: 'eye',
-	exec: (editor: IJodit) => {
-		const dialog = <IDialog>editor.getInstance('Dialog', {
-			language: editor.o.language,
-			theme: editor.o.theme
-		});
-
-		const div = editor.c.div();
-		css(div, {
-			padding: 16
-		});
-
-		if (editor.iframe) {
-			const iframe = editor.create.element('iframe');
-
-			css(iframe, {
-				minWidth: 800,
-				minHeight: 600,
-				border: 0
-			});
-
-			div.appendChild(iframe);
-			dialog.open(div, editor.i18n('Preview'));
-
-			const mywindow = iframe.contentWindow;
-
-			if (mywindow) {
-				editor.e.fire(
-					'generateDocumentStructure.iframe',
-					mywindow.document,
-					editor
-				);
-
-				mywindow.document.body.innerHTML = editor.value;
-			}
-		} else {
-			css(div, {
-				minWidth: 1024,
-				minHeight: 600,
-				border: 0
-			});
-
-			div.innerHTML = editor.value;
-			dialog.open(div, editor.i18n('Preview'));
-		}
-
-		dialog.setModal(true);
-	},
+	command: 'preview',
 	mode: consts.MODE_SOURCE + consts.MODE_WYSIWYG,
 	tooltip: 'Preview'
 } as IControlType;
@@ -66,4 +20,105 @@ export function preview(editor: IJodit): void {
 	editor.registerButton({
 		name: 'preview'
 	});
+
+	editor.registerCommand(
+		'preview',
+		(_: any, _1: any, defaultValue: string) => {
+			const dialog = <IDialog>editor.getInstance('Dialog', {
+				language: editor.o.language,
+				theme: editor.o.theme
+			});
+
+			const div = editor.c.div();
+			css(div, {
+				position: 'relative',
+				padding: 16
+			});
+
+			const value =
+				defaultValue ||
+				editor.value ||
+				`<div style='position: absolute;left:50%;top:50%;transform: translateX(-50%) translateY(-50%);color:#ccc;'>${editor.i18n(
+					'Empty'
+				)}</div>`;
+
+			if (editor.iframe) {
+				const iframe = editor.create.element('iframe');
+
+				css(iframe, {
+					minWidth: 800,
+					minHeight: 600,
+					border: 0
+				});
+
+				div.appendChild(iframe);
+				dialog.open(div, editor.i18n('Preview'));
+
+				const mywindow = iframe.contentWindow;
+
+				if (mywindow) {
+					editor.e.fire(
+						'generateDocumentStructure.iframe',
+						mywindow.document,
+						editor
+					);
+
+					mywindow.document.body.innerHTML = value;
+				}
+			} else {
+				css(div, {
+					minWidth: 1024,
+					minHeight: 600,
+					border: 0
+				});
+
+				dialog.setSize(1024, 600).open(div, editor.i18n('Preview'));
+
+				const setHTML = (box: HTMLElement, value: string): void => {
+					const dv = editor.c.div();
+					dv.innerHTML = value;
+
+					for (let i = 0; i < dv.children.length; i += 1) {
+						const c = dv.children[i];
+
+						const newNode = document.createElement(c.nodeName);
+
+						for (let j = 0; j < c.attributes.length; j += 1) {
+							attr(
+								newNode,
+								c.attributes[j].nodeName,
+								c.attributes[j].nodeValue
+							);
+						}
+
+						if (c.children.length === 0) {
+							switch (c.nodeName) {
+								case 'SCRIPT':
+									if (c.textContent) {
+										newNode.textContent = c.textContent;
+									}
+									break;
+
+								default:
+									if (c.innerHTML) {
+										newNode.innerHTML = c.innerHTML;
+									}
+									break;
+							}
+						} else {
+							setHTML(newNode, c.innerHTML);
+						}
+
+						try {
+							box.appendChild(newNode);
+						} catch {}
+					}
+				};
+
+				setHTML(div, value);
+			}
+
+			dialog.setModal(true);
+		}
+	);
 }

package/src/plugins/resizer/resizer.less

@@ -9,7 +9,10 @@
 :root {
 	--viewer_width: 70px;
 	--viewer_height: 24px;
-	--resizer-handle-size: var(--padding-default);
+	--resizer-handle-size: 10px;
+	--resizer-border-color: #98c1f1;
+	--resizer-handle-color: #5ba4f3;
+	--resizer-handle-hover-color: #537ebb;
 }
 
 [data-jodit_iframe_wrapper] {
@@ -37,8 +40,9 @@
 	left: 0;
 	width: 100px;
 	height: 100px;
-	border: 1px solid var(--color-border-dark);
+	box-sizing: border-box;
 	font-size: 0;
+	outline: 3px solid var(--resizer-border-color);
 	pointer-events: none;
 
 	* {
@@ -68,7 +72,7 @@
 		transition: opacity 0.2s linear;
 	}
 
-	> i {
+	> div {
 		position: absolute;
 		z-index: 4;
 		display: inline-block;
@@ -76,12 +80,11 @@
 		width: var(--resizer-handle-size);
 		height: var(--resizer-handle-size);
 
-		border: 1px solid var(--color-border-dark);
-		background-color: var(--color-background-gray);
+		background-color: var(--resizer-handle-color);
 		pointer-events: all;
 
 		&:hover {
-			background-color: var(--color-background-gray-hover);
+			background-color: var(--resizer-handle-hover-color);
 		}
 
 		&:nth-child(1) {
@@ -110,7 +113,7 @@
 
 		@media (max-width: @screen-sm) {
 			:root {
-				--resizer-handle-size: calc(var(--padding-default) * 2);
+				--resizer-handle-size: calc(var(--resizer-handle-size) * 2);
 			}
 		}
 	}

package/src/plugins/resizer/resizer.ts

@@ -91,10 +91,10 @@ export class resizer extends Plugin {
 
 	private rect = this.j.c.fromHTML(
 		`<div class="jodit-resizer">
-				<i class="jodit-resizer-topleft"></i>
-				<i class="jodit-resizer-topright"></i>
-				<i class="jodit-resizer-bottomright"></i>
-				<i class="jodit-resizer-bottomleft"></i>
+				<div class="jodit-resizer__top-left"></div>
+				<div class="jodit-resizer__top-right"></div>
+				<div class="jodit-resizer__bottom-right"></div>
+				<div class="jodit-resizer__bottom-left"></div>
 				<span>100x100</span>
 			</div>`
 	);
@@ -104,7 +104,7 @@ export class resizer extends Plugin {
 
 	/** @override */
 	protected afterInit(editor: IJodit): void {
-		$$('i', this.rect).forEach((resizeHandle: HTMLElement) => {
+		$$('div', this.rect).forEach((resizeHandle: HTMLElement) => {
 			editor.e.on(
 				resizeHandle,
 				'mousedown.resizer touchstart.resizer',
@@ -458,17 +458,15 @@ export class resizer extends Plugin {
 
 		if (this.element && this.rect) {
 			const workplacePosition = this.getWorkplacePosition();
-			const pos: IBound = offset(this.element, this.j, this.j.ed),
-				left: number = parseInt(this.rect.style.left || '0', 10),
-				top: number = parseInt(this.rect.style.top || '0', 10),
-				w: number = this.rect.offsetWidth,
-				h: number = this.rect.offsetHeight;
 
-			// 1 - because need move border higher and toWYSIWYG the left than the picture
-			// 2 - in box-sizing: border-box mode width is real width indifferent by border-width.
+			const pos = offset(this.element, this.j, this.j.ed),
+				left = parseInt(this.rect.style.left || '0', 10),
+				top = parseInt(this.rect.style.top || '0', 10),
+				w = this.rect.offsetWidth,
+				h = this.rect.offsetHeight;
 
-			const newTop: number = pos.top - 1 - workplacePosition.top,
-				newLeft: number = pos.left - 1 - workplacePosition.left;
+			const newTop = pos.top - workplacePosition.top,
+				newLeft = pos.left - workplacePosition.left;
 
 			if (
 				top !== newTop ||

package/src/plugins/size/resize-handler.ts

@@ -8,6 +8,7 @@ import type { IJodit, IPointBound } from '../../types';
 import { Plugin } from '../../core/plugin';
 import { Dom } from '../../core/dom';
 import { autobind } from '../../core/decorators';
+import { Icon } from '../../core/ui';
 
 @autobind
 export class resizeHandler extends Plugin {
@@ -27,6 +28,8 @@ export class resizeHandler extends Plugin {
 			(height !== 'auto' || width !== 'auto') &&
 			(allowResizeX || allowResizeY)
 		) {
+			editor.statusbar.setMod('resize-handle', true);
+
 			editor.e
 				.on('toggleFullSize.resizeHandler', () => {
 					this.handle.style.display = editor.isFullSize
@@ -114,7 +117,7 @@ export class resizeHandler extends Plugin {
 	 */
 	private handle = this.j.c.div(
 		'jodit-editor__resize',
-		'<span tabindex="-1"></span>'
+		Icon.get('resize_handler')
 	);
 
 	/** @override **/

package/src/plugins/size/size.less

@@ -4,6 +4,7 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 @import (reference) '../../styles/variables';
+@import (reference) '../../styles/mixins';
 
 @resizer-size: 7px;
 
@@ -19,24 +20,6 @@
 	}
 
 	.jodit-editor__resize {
-		position: relative;
-
-		span {
-			position: absolute;
-			right: 0;
-			bottom: 0;
-			overflow: hidden;
-
-			width: 0;
-			height: 0;
-
-			border-width: @resizer-size @resizer-size 0 0;
-			border-style: dashed solid dashed dashed;
-			border-color: rgba(0, 0, 0, 0) var(--color-border) rgba(0, 0, 0, 0)
-				rgba(0, 0, 0, 0);
-
-			cursor: se-resize;
-			user-select: none;
-		}
+		.resize-handle();
 	}
 }

package/src/plugins/size/size.ts

@@ -29,8 +29,12 @@ export class size extends Plugin {
 			.on(editor.ow, 'load.size', this.resizeWorkspaces)
 			.on(
 				'afterInit.size resize.size afterUpdateToolbar.size ' +
-					'scroll.size afterResize.size toggleFullSize.size',
+					'scroll.size afterResize.size',
 				this.resizeWorkspaces
+			)
+			.on(
+				'toggleFullSize.size toggleToolbar.size',
+				this.resizeWorkspaceImd
 			);
 
 		this.initialize();
@@ -131,6 +135,7 @@ export class size extends Plugin {
 	/**
 	 * Calculate workspace height
 	 */
+	@autobind
 	private resizeWorkspaceImd() {
 		if (!this.j || this.j.isDestructed || !this.j.o || this.j.o.inline) {
 			return;

package/src/plugins/source/const.ts

@@ -0,0 +1,7 @@
+/*!
+ * 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
+ */
+
+export const SOURCE_CONSUMER = 'source-consumer';

package/src/plugins/source/editor/engines/ace.ts

@@ -22,6 +22,10 @@ export class AceEditor
 	/**
 	 * Proxy Method
 	 */
+	private proxyOnBlur = (e: MouseEvent) => {
+		this.j.e.fire('blur', e);
+	};
+
 	private proxyOnFocus = (e: MouseEvent) => {
 		this.j.e.fire('focus', e);
 	};
@@ -133,6 +137,7 @@ export class AceEditor
 			this.instance.on('change', this.toWYSIWYG as any);
 			this.instance.on('focus', this.proxyOnFocus);
 			this.instance.on('mousedown', this.proxyOnMouseDown);
+			this.instance.on('blur', this.proxyOnBlur);
 
 			if (editor.getRealMode() !== constants.MODE_WYSIWYG) {
 				this.setValue(this.getValue());