jodit 3.9.3 → 3.10.2

package/src/modules/file-browser/ui/files/files.less

@@ -0,0 +1,174 @@
+@import (reference) '../../../../styles/variables';
+@import (reference) '../../../../styles/mixins';
+
+.jodit-filebrowser-files {
+	position: relative;
+	display: none;
+	height: 100%;
+	vertical-align: top;
+
+	.jodit-button {
+		border-radius: 0;
+	}
+
+	&_active_true {
+		display: flex;
+	}
+
+	.scrollbarSlim();
+
+	&_active_true {
+		width: 100%;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		padding: calc(var(--padding-default) / 2);
+		overflow-y: auto;
+	}
+
+	&__item {
+		position: relative;
+
+		display: flex;
+		overflow: hidden;
+		width: var(--col_size);
+		height: var(--col_size);
+
+		align-items: center;
+		justify-content: center;
+
+		border: 1px solid var(--color-border);
+		margin: calc(var(--padding-default) / 2);
+		font-size: 0;
+
+		@media (max-width: @screen-xs) {
+			width: calc(50% - var(--padding-default));
+		}
+
+		text-align: center;
+		transition: border 0.1s linear, bottom 0.1s linear;
+
+		img {
+			max-width: 100%;
+		}
+
+		&:hover {
+			border-color: #433b5c;
+		}
+
+		&_active_true {
+			border-color: var(--color-border-selected);
+			background-color: var(--color-border-active);
+
+			.jodit-filebrowser-files__item-info {
+				background-color: var(--color-border-active);
+				color: white;
+				text-shadow: none;
+			}
+		}
+
+		&-info {
+			position: absolute;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			overflow: visible;
+			padding: 0.3em 0.6em;
+			background-color: var(--info-background);
+			color: rgb(51, 51, 51);
+			font-size: 14px;
+			line-height: 16px;
+			opacity: 0.85;
+			text-align: left;
+			text-shadow: rgb(238, 238, 238) 0 1px 0;
+			transition: opacity 400ms ease;
+			white-space: normal;
+
+			> span {
+				display: block;
+				overflow: hidden;
+				font-size: 0.75em;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+
+				&.jodit-filebrowser-files__item-info-filename {
+					font-size: 0.9em;
+					font-weight: bold;
+				}
+			}
+		}
+
+		&:hover:not(&_active_true) &-info {
+			bottom: -100px;
+		}
+	}
+
+	&_view_list {
+		scroll-behavior: smooth;
+
+		a {
+			display: block;
+			width: 100%;
+			height: 26px;
+			border-width: 0 0 1px 0;
+			margin: 0;
+			line-height: 26px;
+			text-align: left;
+			white-space: nowrap;
+
+			img {
+				display: inline-block;
+				min-width: 16px;
+				max-width: 16px;
+				margin-left: 4px;
+				vertical-align: middle;
+			}
+
+			.jodit-filebrowser-files__item-info {
+				position: static;
+				display: inline-block;
+				width: ~'calc(100% - 20px)';
+				height: 100%;
+				padding: 0;
+				margin-left: 4px;
+				background-color: transparent;
+				font-size: 0;
+				line-height: inherit;
+				vertical-align: middle;
+
+				> span {
+					display: inline-block;
+					height: 100%;
+					font-size: 12px;
+				}
+
+				&-filename {
+					width: 50%;
+				}
+
+				&-filesize {
+					width: 25%;
+				}
+
+				&-filechanged {
+					width: 25%;
+				}
+			}
+
+			&:hover {
+				background-color: #433b5c;
+
+				.jodit-filebrowser-files__item-info {
+					color: #fff;
+					text-shadow: none;
+				}
+			}
+
+			&::before {
+				display: inline-block;
+				height: 100%;
+				content: '';
+				vertical-align: middle;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,14 @@
+/*!
+ * 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 './files.less';
+import { UIGroup } from '../../../../core/ui';
+
+export class FileBrowserFiles extends UIGroup {
+	override className(): string {
+		return 'FilebrowserFiles';
+	}
+}

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

@@ -0,0 +1,8 @@
+/*!
+ * 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 * from './files/files';
+export * from './tree/tree';

package/src/modules/file-browser/ui/tree/tree.less

@@ -0,0 +1,118 @@
+@import (reference) '../../../../styles/variables';
+@import (reference) '../../../../styles/mixins';
+
+.jodit-filebrowser-tree {
+	position: relative;
+	display: none;
+	height: 100%;
+	vertical-align: top;
+
+	.jodit-button {
+		border-radius: 0;
+	}
+
+	&_active_true {
+		display: flex;
+	}
+
+	.scrollbarSlim();
+
+	&_active_true {
+		z-index: 2;
+		width: var(--first_column);
+		min-width: 200px;
+		max-width: 290px;
+		flex-direction: column;
+
+		@media (max-width: @screen-xs) {
+			width: auto;
+			max-width: 100%;
+			height: 100px;
+		}
+
+		background-color: var(--color-background-filebrowser-folders);
+		overflow-y: auto;
+
+		&::-webkit-scrollbar {
+			width: calc(var(--padding-default) / 2);
+		}
+
+		&::-webkit-scrollbar-track {
+			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: rgba(127, 127, 127, 0.5);
+			outline: 1px solid slategrey;
+		}
+
+		--text-color: #b1b1b1;
+	}
+
+	&__item {
+		position: relative;
+		display: flex;
+		min-height: 38px;
+		align-items: center;
+		justify-content: space-between;
+		padding: calc(var(--padding-default) / 2) var(--padding-default);
+		border-bottom: 1px solid #474747;
+		color: var(--text-color);
+		text-decoration: none;
+		transition: background-color 0.2s ease 0s;
+		word-break: break-all;
+
+		&-title {
+			flex: 1;
+		}
+
+		.jodit-icon_folder {
+			display: flex;
+			width: calc(var(--icon-size) + 4px);
+			height: calc(var(--icon-size) + 4px);
+
+			align-items: center;
+			justify-content: center;
+
+			margin-left: calc(var(--padding-default) / 2);
+
+			opacity: 0.3;
+
+			& svg {
+				width: var(--icon-size);
+				height: var(--icon-size);
+				fill: var(--text-color) !important;
+				stroke: var(--text-color) !important;
+			}
+
+			&:hover {
+				background: #696969;
+			}
+		}
+
+		&:hover {
+			background-color: var(--color-background-button-hover);
+			color: #222;
+
+			i.jodit-icon_folder {
+				opacity: 0.6;
+			}
+		}
+	}
+
+	&__source-title {
+		position: relative;
+		display: block;
+		padding: 2px 4px;
+		border-bottom: 1px solid #484848;
+		background: #5a5a5a;
+		color: #969696;
+		font-size: 12px;
+		user-select: none;
+		word-break: break-all;
+	}
+
+	a + &__source-title {
+		margin-top: var(--padding-default);
+	}
+}

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

@@ -0,0 +1,14 @@
+/*!
+ * 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 './tree.less';
+import { UIGroup } from '../../../../core/ui';
+
+export class FileBrowserTree extends UIGroup {
+	override className(): string {
+		return 'FilebrowserTree';
+	}
+}

package/src/modules/status-bar/status-bar.less

@@ -10,12 +10,24 @@
 .jodit-status-bar {
 	display: flex;
 	overflow: hidden;
+	height: 20px;
+
 	align-items: center;
 	justify-content: flex-start;
+
 	padding: 0 calc(var(--padding-default) / 2);
+
+	&_resize-handle_true {
+		padding-right: 14px;
+	}
+
 	background-color: var(--color-panel);
 	border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
+
+	color: var(--color-text-icons);
+
 	font-size: var(--font-size-small);
+	text-transform: uppercase;
 
 	&::before {
 		flex: auto;
@@ -48,11 +60,25 @@
 
 			&:hover {
 				background-color: var(--color-background-gray);
-				color: var(--color-text);
 				text-decoration: none;
 			}
 		}
 	}
+
+	a.jodit-status-bar-link {
+		cursor: pointer;
+
+		&,
+		&:hover,
+		&:visited {
+			background-color: transparent;
+			color: var(--color-text-icons);
+		}
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 }
 
 .jodit-workplace + .jodit-status-bar:not(:empty) {

package/src/modules/status-bar/status-bar.ts

@@ -6,9 +6,10 @@
 
 import './status-bar.less';
 
-import type { IJodit, IStatusBar } from '../../types';
+import type { IJodit, IStatusBar, IDictionary } from '../../types';
 import { ViewComponent, STATUSES } from '../../core/component';
 import { Dom } from '../../core/dom';
+import { Mods } from '../../core/traits';
 
 export class StatusBar extends ViewComponent<IJodit> implements IStatusBar {
 	className(): string {
@@ -38,6 +39,19 @@ export class StatusBar extends ViewComponent<IJodit> implements IStatusBar {
 		return !this.container.classList.contains('jodit_hidden');
 	}
 
+	readonly mods: IDictionary<string | boolean | null> = {};
+
+	/** @see [[Mods.setMod]] */
+	setMod(name: string, value: string | boolean | null): this {
+		Mods.setMod.call(this, name, value);
+		return this;
+	}
+
+	/** @see [[Mods.getMod]] */
+	getMod(name: string): string | boolean | null {
+		return Mods.getMod.call(this, name);
+	}
+
 	/**
 	 * Height of statusbar
 	 */

package/src/modules/toolbar/collection/collection.ts

@@ -14,17 +14,19 @@ import type {
 	IControlTypeStrong,
 	IViewBased,
 	ButtonsGroups,
-	CanUndef
+	CanUndef,
+	IViewWithToolbar,
+	IBound
 } from '../../../types/';
 
-import { isFunction, isJoditObject } from '../../../core/helpers/';
+import { error, isFunction } from '../../../core/helpers/';
 
 import { UIList } from '../../../core/ui';
 import { makeButton } from '../factory';
 import { component, autobind } from '../../../core/decorators';
 
 @component
-export class ToolbarCollection<T extends IViewBased = IViewBased>
+export class ToolbarCollection<T extends IViewWithToolbar = IViewWithToolbar>
 	extends UIList<T>
 	implements IToolbarCollection
 {
@@ -58,10 +60,6 @@ export class ToolbarCollection<T extends IViewBased = IViewBased>
 	 * Button should be active
 	 */
 	shouldBeActive(button: IToolbarButton): boolean | undefined {
-		if (isJoditObject(this.j) && !this.j.editorIsActive) {
-			return false;
-		}
-
 		if (isFunction(button.control.isActive)) {
 			return button.control.isActive(this.j, button.control, button);
 		}
@@ -136,11 +134,22 @@ export class ToolbarCollection<T extends IViewBased = IViewBased>
 
 	private initEvents() {
 		this.j.e
-			// .on(this.j.ow, 'mousedown touchend', this.closeAllPopups)
 			.on(this.listenEvents, this.update)
 			.on('afterSetMode focus', this.immediateUpdate);
 	}
 
+	hide(): void {
+		this.container.remove();
+	}
+
+	show(): void {
+		this.appendTo(this.j.toolbarContainer);
+	}
+
+	showInline(bound?: IBound): void {
+		throw error('The method is not implemented for this class.');
+	}
+
 	/** @override **/
 	override build(
 		items: ButtonsGroups,

package/src/modules/toolbar/collection/editor-collection.ts

@@ -11,9 +11,10 @@ import type {
 	IDictionary,
 	IToolbarButton,
 	IViewBased,
-	IJodit
+	IJodit,
+	IBound
 } from '../../../types';
-import { css, isFunction } from '../../../core/helpers';
+import { css, isFunction, isJoditObject } from '../../../core/helpers';
 import { component } from '../../../core/decorators';
 
 @component
@@ -41,6 +42,10 @@ export class ToolbarEditorCollection extends ToolbarCollection<IJodit> {
 
 	/** @override */
 	override shouldBeActive(button: IToolbarButton): boolean {
+		if (isJoditObject(this.j) && !this.j.editorIsActive) {
+			return false;
+		}
+
 		const active = super.shouldBeActive(button);
 
 		if (active !== undefined) {
@@ -160,4 +165,24 @@ export class ToolbarEditorCollection extends ToolbarCollection<IJodit> {
 
 		Dom.appendChildFirst(container, input);
 	}
+
+	/**
+	 * Show the inline toolbar inside WYSIWYG editor.
+	 * @param bound - you can set the place for displaying the toolbar,
+	 * or the place will be in the place of the cursor
+	 */
+	override showInline(bound?: IBound): void {
+		this.jodit.e.fire('showInlineToolbar', bound);
+	}
+
+	override hide(): void {
+		this.jodit.e.fire('hidePopup');
+		super.hide();
+		this.jodit.e.fire('toggleToolbar');
+	}
+
+	override show(): void {
+		super.show();
+		this.jodit.e.fire('toggleToolbar');
+	}
 }

package/src/modules/widget/file-selector/file-selector.ts

@@ -132,7 +132,7 @@ export const FileSelectorWidget = (
 	if (callbacks.url) {
 		const button = new UIButton(editor, {
 				type: 'submit',
-				status: 'primary',
+				variant: 'primary',
 				text: 'Insert'
 			}),
 			form = new UIForm(editor, [

package/src/modules/widget/tabs/tabs.less

@@ -19,6 +19,7 @@
 
 		> * {
 			margin-left: calc(var(--padding-default) / 2);
+			cursor: pointer;
 
 			&:only-of-type {
 				width: 100%;
@@ -43,7 +44,7 @@
 		min-width: 80px;
 
 		&_columns_3 {
-			width: 100% / 3;
+			width: calc(100% / 3);
 		}
 
 		&_columns_2 {

package/src/modules/widget/tabs/tabs.ts

@@ -8,12 +8,12 @@ import './tabs.less';
 
 import type { IDictionary, IJodit, IUIButton } from '../../../types';
 import { $$, isFunction } from '../../../core/helpers';
-import { Button } from '../../../core/ui';
+import { Button, UIElement } from '../../../core/ui';
 
 export interface TabOption {
 	icon?: string;
 	name: string;
-	content: HTMLElement | (() => void);
+	content: HTMLElement | (() => void) | UIElement;
 }
 
 /**
@@ -70,7 +70,9 @@ export const TabsWidget = (
 		);
 
 		if (!isFunction(content)) {
-			tab.appendChild(content);
+			tab.appendChild(
+				content instanceof UIElement ? content.container : content
+			);
 		} else {
 			tab.appendChild(editor.c.div('jodit-tab_empty'));
 		}

package/src/plugins/add-new-line/add-new-line.ts

@@ -48,6 +48,7 @@ Config.prototype.addNewLineTagsTriggers = [
 	'iframe',
 	'img',
 	'hr',
+	'pre',
 	'jodit'
 ];
 Config.prototype.addNewLineDeltaShow = 20;

package/src/plugins/bold.ts

@@ -40,7 +40,7 @@ Config.prototype.controls.underline = {
 	tagRegExp: /^(u)$/i,
 	tags: ['u'],
 	css: {
-		'text-decoration': 'underline'
+		'text-decoration-line': 'underline'
 	},
 	tooltip: 'Underline'
 } as IControlType;
@@ -49,7 +49,7 @@ Config.prototype.controls.strikethrough = {
 	tagRegExp: /^(s)$/i,
 	tags: ['s'],
 	css: {
-		'text-decoration': 'line-through'
+		'text-decoration-line': 'line-through'
 	},
 	tooltip: 'Strike through'
 } as IControlType;

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

@@ -15,6 +15,7 @@ import { attr, ctrlKey, dataBind } from '../../core/helpers';
 import { Plugin } from '../../core/plugin';
 import { getDataTransfer } from './paste/helpers';
 import { autobind, throttle } from '../../core/decorators';
+import { FileBrowserFiles } from '../../modules/file-browser/ui';
 
 /**
  * Process drag and drop image from FileBrowser and movev image inside the editor
@@ -68,7 +69,9 @@ export class DragAndDrop extends Plugin {
 
 		if (
 			Dom.isElement(target) &&
-			target.classList.contains('jodit-filebrowser__files-item')
+			target.classList.contains(
+				FileBrowserFiles.prototype.getFullElName('item')
+			)
 		) {
 			target = target.querySelector('img') as HTMLElement;
 		}

package/src/plugins/clipboard/paste/paste.ts

@@ -296,7 +296,7 @@ export class paste extends Plugin {
 		const keep = Button(this.j, {
 			text: 'Keep',
 			name: 'keep',
-			status: 'primary',
+			variant: 'primary',
 			tabIndex: 0
 		});
 

package/src/plugins/font.ts

@@ -114,7 +114,17 @@ Config.prototype.controls.font = {
 	},
 
 	childTemplate: (editor, key: string, value: string) => {
-		return `<span style="font-family: ${key}!important;">${value}</span>`;
+		let isAvailable = false;
+
+		try {
+			isAvailable =
+				key.indexOf('dings') === -1 &&
+				document.fonts.check(`16px ${key}`, value);
+		} catch {}
+
+		return `<span style="${
+			isAvailable ? `font-family: ${key}!important;` : ''
+		}">${value}</span>`;
 	},
 
 	data: {

package/src/plugins/image/image-properties/image-properties.ts

@@ -851,6 +851,13 @@ export class imageProperties extends Plugin {
 							}
 
 							if (editor.o.image.openOnDblClick) {
+								if (
+									this.j.e.fire('openOnDblClick', image) ===
+									false
+								) {
+									return;
+								}
+
 								self.state.image = image;
 
 								if (!editor.o.readonly) {

package/src/plugins/index.ts

@@ -34,6 +34,7 @@ export { link } from './link/link';
 export * from './media';
 export { mobile } from './mobile';
 export { orderedList } from './ordered-list';
+export { poweredByJodit } from './powered-by-jodit';
 export { placeholder } from './placeholder/placeholder';
 export { redoUndo } from './redo-undo';
 export { resizer } from './resizer/resizer';

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

@@ -34,6 +34,7 @@ Config.prototype.popup = {
 	a: require('./items/a').default,
 	img: require('./items/img').default,
 	cells: require('./items/cells').default,
+	toolbar: require('./items/toolbar').default,
 	jodit: require('./items/iframe').default,
 	'jodit-media': require('./items/iframe').default,
 	selection: [