jodit 3.8.2 → 3.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit",
-	"version": "3.8.2",
+	"version": "3.8.3",
 	"description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
 	"main": "build/jodit.min.js",
 	"types": "index.d.ts",
@@ -50,9 +50,9 @@
 	},
 	"devDependencies": {
 		"@types/ace": "^0.0.47",
-		"@types/node": "^16.10.1",
-		"@typescript-eslint/eslint-plugin": "^4.31.2",
-		"@typescript-eslint/parser": "^4.31.2",
+		"@types/node": "^16.10.2",
+		"@typescript-eslint/eslint-plugin": "^4.32.0",
+		"@typescript-eslint/parser": "^4.32.0",
 		"autoprefixer": "^10.3.6",
 		"chai": "^4.3.4",
 		"classlist-polyfill": "^1.2.0",
@@ -76,9 +76,9 @@
 		"karma-mocha": "^2.0.1",
 		"karma-sourcemap-loader": "^0.3.8",
 		"karma-webpack": "^5.0.0",
-		"less": "^4.1.1",
+		"less": "^4.1.2",
 		"less-loader": "^10.0.1",
-		"lint-staged": "^11.1.2",
+		"lint-staged": "^11.2.0",
 		"merge-stream": "^2.0.0",
 		"mini-css-extract-plugin": "^2.3.0",
 		"mocha": "^9.1.2",
@@ -100,7 +100,7 @@
 		"tslib": "^2.3.1",
 		"typescript": "^4.4.3",
 		"url-loader": "^4.1.1",
-		"webpack": "^5.54.0",
+		"webpack": "^5.56.1",
 		"webpack-cli": "^4.8.0",
 		"webpack-dev-middleware": "^5.2.1",
 		"webpack-dev-server": "^4.3.0",

package/src/config.ts

@@ -627,10 +627,6 @@ export class Config implements IViewOptions {
 	 *  ```
 	 */
 	buttons: ButtonsOption = [
-		{
-			group: 'source',
-			buttons: []
-		},
 		{
 			group: 'font-style',
 			buttons: []
@@ -684,6 +680,10 @@ export class Config implements IViewOptions {
 			group: 'search',
 			buttons: []
 		},
+		{
+			group: 'source',
+			buttons: []
+		},
 		{
 			group: 'other',
 			buttons: []

package/src/core/create.ts

@@ -20,7 +20,8 @@ import {
 	css,
 	isFunction,
 	kebabCase,
-	refs
+	refs,
+	isString
 } from './helpers/';
 
 import { Dom } from './dom';
@@ -40,9 +41,6 @@ export class Create implements ICreate {
 
 	/**
 	 * Apply some object key-value to HTMLElement
-	 *
-	 * @param elm
-	 * @param attrs
 	 */
 	private applyAttributes = (elm: HTMLElement, attrs: Attributes) => {
 		each(attrs, (key: string, value) => {
@@ -86,9 +84,7 @@ export class Create implements ICreate {
 
 		if (children) {
 			asArray(children).forEach((child: string | Node) =>
-				elm.appendChild(
-					typeof child === 'string' ? this.fromHTML(child) : child
-				)
+				elm.appendChild(isString(child) ? this.fromHTML(child) : child)
 			);
 		}
 
@@ -161,7 +157,6 @@ export class Create implements ICreate {
 
 	/**
 	 * Create text node
-	 * @param value
 	 */
 	text(value: string): Text {
 		return this.doc.createTextNode(value);
@@ -169,7 +164,6 @@ export class Create implements ICreate {
 
 	/**
 	 * Create invisible text node
-	 * @param value
 	 */
 	fake(): Text {
 		return this.text(INVISIBLE_SPACE);
@@ -185,16 +179,23 @@ export class Create implements ICreate {
 	/**
 	 * Create DOM element from HTML text
 	 *
-	 * @param html
-	 * @param refsToggleElement
-	 *
-	 * @return HTMLElement
+	 * @param refsToggleElement - State dictionary in which you can set the visibility of some of the elements
+	 * ```js
+	 * const editor = Jodit.make('#editor');
+	 * editor.createInside.fromHTML(`<div>
+	 *   <input name="name" ref="name"/>
+	 *   <input name="email" ref="email"/>
+	 * </div>`, {
+	 *   name: true,
+	 *   email: false
+	 * });
+	 * ```
 	 */
 	fromHTML(
 		html: string | number,
 		refsToggleElement?: IDictionary<boolean | void>
 	): HTMLElement {
-		const div: HTMLDivElement = this.div();
+		const div = this.div();
 
 		div.innerHTML = html.toString();
 
@@ -222,7 +223,6 @@ export class Create implements ICreate {
 
 	/**
 	 * Apply to element `createAttributes` options
-	 * @param elm
 	 */
 	applyCreateAttributes(elm: HTMLElement): void {
 		if (this.createAttributes) {

package/src/core/helpers/css.ts

@@ -30,10 +30,9 @@ export function css(
  * Get the value of a computed style property for the first element in the set of matched elements or set one or
  * more CSS properties for every matched element
  *
- * @param element
- * @param key An object of property-value pairs to set. A CSS property name.
- * @param value A value to set for the property.
- * @param [onlyStyleMode] Get value from style attribute, without calculating
+ * @param key - An object of property-value pairs to set. A CSS property name.
+ * @param value - A value to set for the property.
+ * @param onlyStyleMode - Get value from style attribute, without calculating
  */
 export function css(
 	element: HTMLElement,
@@ -113,7 +112,6 @@ export function css(
 
 /**
  * Clear center align
- * @param image
  */
 export const clearCenterAlign = (image: HTMLElement): void => {
 	if (css(image, 'display') === 'block') {

package/src/core/helpers/html/strip-tags.ts

@@ -8,18 +8,16 @@ import { isString } from '../checker';
 import { $$ } from '../selector';
 import { trim } from '../string';
 import { Dom } from '../../dom';
+import { attr } from '../utils';
 
 /**
  * Extract plain text from HTML text
- *
- * @param html
- * @param doc
  */
 export function stripTags(
 	html: string | Node,
 	doc: Document = document
 ): string {
-	const tmp: HTMLDivElement = doc.createElement('div');
+	const tmp = doc.createElement('div');
 
 	if (isString(html)) {
 		tmp.innerHTML = html;
@@ -46,3 +44,37 @@ export function stripTags(
 
 	return trim(tmp.innerText) || '';
 }
+
+/**
+ * Removes dangerous constructs from HTML
+ */
+export function safeHTML(
+	box: HTMLElement,
+	options: {
+		removeOnError: boolean;
+		safeJavaScriptLink: boolean;
+	}
+): void {
+	if (!Dom.isElement(box)) {
+		return;
+	}
+
+	const removeOnError = (elm: HTMLElement) => attr(elm, 'onerror', null),
+		safeLink = (elm: HTMLElement) => {
+			const href = elm.getAttribute('href');
+
+			if (href && href.trim().indexOf('javascript') === 0) {
+				attr(elm, 'href', location.protocol + '//' + href);
+			}
+		};
+
+	if (options.removeOnError) {
+		removeOnError(box);
+		$$('[onerror]', box).forEach(removeOnError);
+	}
+
+	if (options.safeJavaScriptLink) {
+		safeLink(box);
+		$$<HTMLAnchorElement>('a[href^="javascript"]', box).forEach(safeLink);
+	}
+}

package/src/core/helpers/selector.ts

@@ -32,10 +32,8 @@ const $$temp = () => {
  *      });
  * })
  * ```
- * @param selector CSS like selector
- * @param root
+ * @param selector - CSS like selector
  *
- * @return {HTMLElement[]}
  */
 export function $$<K extends HTMLTagNames>(
 	selector: K,
@@ -47,7 +45,7 @@ export function $$<T extends HTMLElement>(
 	root: HTMLElement | HTMLDocument
 ): T[];
 
-export function $$<T extends HTMLElement>(
+export function $$<T extends Element>(
 	selector: string | HTMLTagNames,
 	root: HTMLElement | HTMLDocument
 ): T[] {
@@ -59,19 +57,19 @@ export function $$<T extends HTMLElement>(
 		IS_IE &&
 		!(root && root.nodeType === Node.DOCUMENT_NODE)
 	) {
-		const id: string = (root as HTMLElement).id,
+		const id: string = (root as Element).id,
 			temp_id: string =
 				id ||
 				'_selector_id_' + String(Math.random()).slice(2) + $$temp();
 
 		selector = selector.replace(/:scope/g, '#' + temp_id);
 
-		!id && (root as HTMLElement).setAttribute('id', temp_id);
+		!id && (root as Element).setAttribute('id', temp_id);
 
-		result = (root.parentNode as HTMLElement).querySelectorAll(selector);
+		result = (root.parentNode as Element).querySelectorAll(selector);
 
 		if (!id) {
-			(root as HTMLElement).removeAttribute('id');
+			(root as Element).removeAttribute('id');
 		}
 	} else {
 		result = root.querySelectorAll(selector);

package/src/core/helpers/size/get-scroll-parent.ts

@@ -0,0 +1,28 @@
+/*!
+ * 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 { Nullable } from '../../../types';
+import { css } from '../css';
+import { Dom } from '../../dom';
+
+export function getScrollParent(node: Nullable<Node>): Nullable<Element> {
+	const isElement = Dom.isHTMLElement(node);
+	const overflowY = isElement && css(node, 'overflowY');
+	const isScrollable =
+		isElement && overflowY !== 'visible' && overflowY !== 'hidden';
+
+	if (!node) {
+		return null;
+	} else if (isScrollable && node.scrollHeight >= node.clientHeight) {
+		return node;
+	}
+
+	return (
+		getScrollParent(node.parentNode) ||
+		document.scrollingElement ||
+		document.body
+	);
+}

package/src/core/helpers/size/index.ts

@@ -5,6 +5,7 @@
  */
 
 export * from './get-content-width';
+export * from './get-scroll-parent';
 export * from './inner-width';
 export * from './offset';
 export * from './position';

package/src/core/selection/select.ts

@@ -33,7 +33,8 @@ import {
 	$$,
 	css,
 	call,
-	toArray
+	toArray,
+	getScrollParent
 } from '../helpers';
 import { CommitStyle } from './style/commit-style';
 import { autobind } from '../decorators';
@@ -226,9 +227,6 @@ export class Select implements ISelect {
 
 	/**
 	 * Create marker element
-	 *
-	 * @param atStart
-	 * @param range
 	 */
 	marker(atStart = false, range?: Range): HTMLSpanElement {
 		let newRange: Range | null = null;
@@ -397,7 +395,6 @@ export class Select implements ISelect {
 
 	/**
 	 * Set focus in editor
-	 * @param options
 	 */
 	@autobind
 	focus(
@@ -406,6 +403,9 @@ export class Select implements ISelect {
 		}
 	): boolean {
 		if (!this.isFocused()) {
+			const scrollParent = getScrollParent(this.j.container),
+				scrollTop = scrollParent?.scrollTop;
+
 			if (this.j.iframe) {
 				if (this.doc.readyState === 'complete') {
 					this.j.iframe.focus();
@@ -415,6 +415,10 @@ export class Select implements ISelect {
 			this.win.focus();
 			this.area.focus(options);
 
+			if (scrollTop) {
+				scrollParent?.scrollTo(0, scrollTop);
+			}
+
 			const sel = this.sel,
 				range = sel?.rangeCount ? sel?.getRangeAt(0) : null;
 
@@ -437,7 +441,7 @@ export class Select implements ISelect {
 
 	/**
 	 * Checks whether the current selection is something or just set the cursor is
-	 * @return boolean true Selection does't have content
+	 * @returns true Selection does't have content
 	 */
 	isCollapsed(): boolean {
 		const sel = this.sel;
@@ -543,9 +547,8 @@ export class Select implements ISelect {
 	/**
 	 * Insert element in editor
 	 *
-	 * @param node
-	 * @param [insertCursorAfter] After insert, cursor will move after element
-	 * @param [fireChange] After insert, editor fire change event. You can prevent this behavior
+	 * @param insertCursorAfter - After insert, cursor will move after element
+	 * @param fireChange - After insert, editor fire change event. You can prevent this behavior
 	 */
 	insertNode(
 		node: Node,
@@ -554,6 +557,8 @@ export class Select implements ISelect {
 	): void {
 		this.errorNode(node);
 
+		this.j.e.fire('safeHTML', <HTMLElement>node);
+
 		if (!this.isFocused() && this.j.isEditorMode()) {
 			this.focus();
 			this.restore();
@@ -608,7 +613,7 @@ export class Select implements ISelect {
 	/**
 	 * Inserts in the current cursor position some HTML snippet
 	 *
-	 * @param  {string} html HTML The text toWYSIWYG be inserted into the document
+	 * @param html - HTML The text toWYSIWYG be inserted into the document
 	 * @example
 	 * ```javascript
 	 * parent.s.insertHTML('<img src="image.png"/>');
@@ -669,11 +674,11 @@ export class Select implements ISelect {
 	/**
 	 * Insert image in editor
 	 *
-	 * @param  url URL for image, or HTMLImageElement
-	 * @param  [styles] If specified, it will be applied <code>$(image).css(styles)</code>
-	 * @param defaultWidth
+	 * @param  url - URL for image, or HTMLImageElement
+	 * @param  styles - If specified, it will be applied <code>$(image).css(styles)</code>
 	 *
-	 * @fired afterInsertImage
+	 * eslint-disable-next-line tsdoc/syntax
+	 * @emits afterInsertImage - Triggered aafter insert image
 	 */
 	insertImage(
 		url: string | HTMLImageElement,
@@ -698,7 +703,13 @@ export class Select implements ISelect {
 				dw += 'px';
 			}
 
-			css(image, 'width', dw);
+			call(
+				// @ts-ignore
+				this.j.o.resizer.forImageChangeAttributes ? attr : css,
+				image,
+				'width',
+				dw
+			);
 		}
 
 		if (styles && typeof styles === 'object') {
@@ -820,10 +831,10 @@ export class Select implements ISelect {
 	/**
 	 * Checks if the cursor is at the end(start) block
 	 *
-	 * @param  {boolean} start=false true - check whether the cursor is at the start block
-	 * @param {HTMLElement} parentBlock - Find in this
+	 * @param  start - true - check whether the cursor is at the start block
+	 * @param parentBlock - Find in this
 	 *
-	 * @return {boolean | null} true - the cursor is at the end(start) block, null - cursor somewhere outside
+	 * @returns true - the cursor is at the end(start) block, null - cursor somewhere outside
 	 */
 	cursorInTheEdge(
 		start: boolean,
@@ -882,7 +893,6 @@ export class Select implements ISelect {
 
 	/**
 	 * Wrapper for cursorInTheEdge
-	 * @param parentBlock
 	 */
 	cursorOnTheLeft(parentBlock: HTMLElement): Nullable<boolean> {
 		return this.cursorInTheEdge(true, parentBlock);
@@ -890,7 +900,6 @@ export class Select implements ISelect {
 
 	/**
 	 * Wrapper for cursorInTheEdge
-	 * @param parentBlock
 	 */
 	cursorOnTheRight(parentBlock: HTMLElement): Nullable<boolean> {
 		return this.cursorInTheEdge(false, parentBlock);
@@ -898,9 +907,7 @@ export class Select implements ISelect {
 
 	/**
 	 * Set cursor after the node
-	 *
-	 * @param {Node} node
-	 * @return {Node} fake invisible textnode. After insert it can be removed
+	 * @returns fake invisible textnode. After insert it can be removed
 	 */
 	@autobind
 	setCursorAfter(node: Node): Nullable<Text> {
@@ -909,9 +916,7 @@ export class Select implements ISelect {
 
 	/**
 	 * Set cursor before the node
-	 *
-	 * @param node
-	 * @return fake invisible textnode. After insert it can be removed
+	 * @returns fake invisible textnode. After insert it can be removed
 	 */
 	@autobind
 	setCursorBefore(node: Node): Nullable<Text> {
@@ -920,9 +925,6 @@ export class Select implements ISelect {
 
 	/**
 	 * Add fake node for new cursor position
-	 *
-	 * @param node
-	 * @param inStart
 	 */
 	private setCursorNearWith(node: Node, inStart: boolean): Nullable<Text> {
 		this.errorNode(node);
@@ -966,9 +968,7 @@ export class Select implements ISelect {
 
 	/**
 	 * Set cursor in the node
-	 *
-	 * @param node
-	 * @param [inStart] set cursor in start of element
+	 * @param inStart - set cursor in start of element
 	 */
 	@autobind
 	setCursorIn(node: Node, inStart: boolean = false): Node {
@@ -1019,11 +1019,7 @@ export class Select implements ISelect {
 
 	/**
 	 * Set range selection
-	 *
-	 * @param range
-	 * @param [focus]
-	 *
-	 * @fires changeSelection
+	 * @emits changeSelection
 	 */
 	selectRange(range: Range, focus: boolean = true): void {
 		const sel = this.sel;
@@ -1039,7 +1035,6 @@ export class Select implements ISelect {
 
 		/**
 		 * Fired after change selection
-		 *
 		 * @event changeSelection
 		 */
 		this.j.e.fire('changeSelection');
@@ -1047,9 +1042,7 @@ export class Select implements ISelect {
 
 	/**
 	 * Select node
-	 *
-	 * @param {Node} node
-	 * @param {boolean} [inward=false] select all inside
+	 * @param inward - select all inside
 	 */
 	select(
 		node: Node | HTMLElement | HTMLTableElement | HTMLTableCellElement,
@@ -1109,6 +1102,7 @@ export class Select implements ISelect {
 				'font',
 				INVISIBLE_SPACE
 			);
+
 			this.insertNode(font, false, false);
 
 			const [marker] = this.markers;
@@ -1219,8 +1213,6 @@ export class Select implements ISelect {
 	/**
 	 * Apply some css rules for all selections. It method wraps selections in nodeName tag.
 	 *
-	 * @param cssRules
-	 * @param options
 	 * @param options.element - tag - equal CSSRule (e.g. strong === font-weight: 700)
 	 * @param options.defaultTag - tag for wrapping and apply styles
 	 * @example
@@ -1253,8 +1245,6 @@ export class Select implements ISelect {
 
 	/**
 	 * Split selection on two parts: left and right
-	 * @param currentBox
-	 * @return Left part
 	 */
 	splitSelection(currentBox: HTMLElement): Nullable<Element> {
 		if (!this.isCollapsed()) {

package/src/core/ui/button/button/button.less

@@ -137,8 +137,11 @@
 }
 
 .jodit-ui-button-statuses {
+	&_status_initial {
+	}
+
 	&_status_default {
-		.jodit_status(#d8d8d8, #212529, #c9cdd1, #212529, #dae0e5, #212529);
+		.jodit_status(#e3e3e3, #212529, #c9cdd1, #212529, #dae0e5, #212529);
 	}
 
 	&_status_primary {

package/src/core/ui/button/button/button.ts

@@ -10,7 +10,8 @@ import type {
 	IUIButton,
 	IUIButtonState,
 	IUIButtonStatePartial,
-	IViewBased
+	IViewBased,
+	ButtonStatus
 } from '../../../../types';
 import { UIElement } from '../../element';
 import { Dom } from '../../../dom';
@@ -26,7 +27,7 @@ export const UIButtonState = (): IUIButtonState => ({
 	name: '',
 	value: '',
 
-	status: '',
+	status: 'initial',
 	disabled: false,
 	activated: false,
 
@@ -57,7 +58,6 @@ export class UIButton extends UIElement implements IUIButton {
 
 	/**
 	 * Set state
-	 * @param state
 	 */
 	setState(state: IUIButtonStatePartial): this {
 		Object.assign(this.state, state);
@@ -228,7 +228,6 @@ export class UIButton extends UIElement implements IUIButton {
 
 	/**
 	 * Add action handler
-	 * @param originalEvent
 	 */
 	onAction(callback: (originalEvent: MouseEvent) => void): this {
 		this.actionHandlers.push(callback);
@@ -237,7 +236,6 @@ export class UIButton extends UIElement implements IUIButton {
 
 	/**
 	 * Fire all click handlers
-	 * @param e
 	 */
 	@autobind
 	private onActionFire(e: MouseEvent): void {
@@ -259,19 +257,19 @@ export function Button(
 	jodit: IViewBased,
 	icon: string,
 	text: string,
-	status?: string
+	status?: ButtonStatus
 ): IUIButton;
 export function Button(
 	jodit: IViewBased,
 	state: IUIButtonStatePartial,
-	status?: string
+	status?: ButtonStatus
 ): IUIButton;
 
 export function Button(
 	jodit: IViewBased,
 	stateOrText: string | IUIButtonStatePartial,
 	text?: string,
-	status?: string
+	status?: ButtonStatus
 ): IUIButton {
 	const button = new UIButton(jodit);
 

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

@@ -14,18 +14,18 @@
 	.jodit-box();
 
 	position: fixed;
-	display: inline-block;
 	z-index: var(--z-index-popup);
-	transform: translate3d(0, 0, 0);
+	display: inline-block;
 	box-shadow: var(--box-shadow);
+	transform: translate3d(0, 0, 0);
 
 	&__content {
 		.font();
+		overflow: auto;
+		max-height: 300px;
 		padding: var(--padding-default);
 		background: var(--color-background-default);
 		overflow-scrolling: touch;
-		overflow: auto;
-		max-height: 300px;
 	}
 
 	&_padding_false &__content {