jodit 3.15.2 → 3.16.2

package/src/plugins/search/ui/search.less

@@ -0,0 +1,159 @@
+/*!
+ * 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 (reference) '../../../styles/variables';
+
+:root {
+	--height-search: 30px;
+	--width-search: 320px;
+	--width-search-input-box: 60%;
+	--width-search-count-box: 15%;
+	--transform-button-active: 0.95;
+	--timeout-button-active: 0.1s;
+}
+
+.jodit-ui-search {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 0;
+	height: 0;
+
+	&_sticky_true {
+		position: fixed;
+	}
+
+	&__box {
+		position: absolute;
+		right: 0;
+
+		display: flex;
+
+		width: var(--width-search);
+		max-width: 100vw;
+		padding: calc(var(--padding-default) / 2);
+
+		border: solid var(--color-border);
+		border-width: 0 0 1px 1px;
+		background-color: var(--color-panel);
+
+		input {
+			width: 100%;
+			height: 100%;
+			padding: 0 var(--padding-default);
+			border: 0;
+			margin: 0;
+			background-color: transparent;
+			outline: none;
+
+			&[data-ref='replace'] {
+				display: none;
+			}
+		}
+
+		input:not(:focus) + input:not(:focus) {
+			border-top: 1px solid var(--color-border);
+		}
+	}
+
+	&__buttons,
+	&__counts,
+	&__inputs {
+		height: var(--height-search);
+	}
+
+	&__inputs {
+		width: var(--width-search-input-box);
+		padding-right: calc(var(--padding-default) / 2);
+	}
+
+	&__counts {
+		display: flex;
+		width: var(--width-search-count-box);
+		align-items: center;
+		justify-content: center;
+		border-left: 1px solid var(--color-border);
+		color: var(--color-border);
+	}
+
+	&__buttons {
+		display: flex;
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+		padding-left: 0;
+
+		button {
+			width: 32%;
+			height: 100%;
+			border: 1px solid transparent;
+			margin-right: 1%;
+			background-color: transparent;
+
+			&[data-ref='replace-btn'] {
+				display: none;
+				width: 100%;
+				border: 1px solid var(--color-border);
+				margin-top: 2px;
+			}
+
+			&:hover {
+				background-color: var(--color-background-button-hover);
+			}
+
+			&:focus {
+				border: 1px solid var(--color-background-selection_opacity50);
+			}
+
+			&:active {
+				border: 1px solid var(--color-background-selection);
+				transform: scale(
+					var(--transform-button-active),
+					var(--transform-button-active)
+				);
+			}
+		}
+	}
+
+	&_empty-query_true {
+		[data-ref='next'],
+		[data-ref='prev'] {
+			opacity: 0.5;
+		}
+	}
+
+	&_replace_true {
+		.jodit-ui-search__counts,
+		.jodit-ui-search__inputs {
+			height: calc(var(--height-search) * 2);
+
+			input {
+				height: 50%;
+				transition: background-color var(--timeout-button-active) linear;
+
+				&:focus {
+					box-shadow: inset 0 0 3px 0 var(--color-border);
+				}
+
+				&[data-ref='replace'] {
+					display: block;
+				}
+			}
+		}
+
+		.jodit-ui-search__buttons {
+			flex-wrap: wrap;
+
+			button[data-ref='replace-btn'] {
+				display: block;
+			}
+		}
+	}
+}
+
+[jd-tmp-selection] {
+	background-color: aquamarine;
+}

package/src/plugins/search/ui/search.ts

@@ -0,0 +1,256 @@
+/*!
+ * 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
+ */
+
+/**
+ * @module plugins/search
+ */
+
+import './search.less';
+
+import type { IJodit, MarkerInfo, Nullable } from 'jodit/types';
+import { Icon, UIElement } from 'jodit/core/ui';
+import { css, position, refs, trim } from 'jodit/core/helpers';
+import { MODE_WYSIWYG } from 'jodit/core/constants';
+import * as consts from 'jodit/core/constants';
+import { autobind, component, watch } from 'jodit/core/decorators';
+import { Dom } from 'jodit/core/dom';
+
+@component
+export class UISearch extends UIElement<IJodit> {
+	override className(): string {
+		return 'UISearch';
+	}
+
+	private queryInput: HTMLInputElement;
+	private replaceInput: HTMLInputElement;
+	selInfo: Nullable<MarkerInfo[]> = null;
+
+	private closeButton: HTMLButtonElement;
+	private replaceButton: HTMLButtonElement;
+	private currentBox: HTMLSpanElement;
+	private countBox: HTMLSpanElement;
+
+	override render(): string {
+		return `<div>
+			<div class="&__box">
+				<div class="&__inputs">
+					<input data-ref="query" tabindex="0" placeholder="~Search for~" type="text"/>
+					<input data-ref="replace" tabindex="0" placeholder="~Replace with~" type="text"/>
+				</div>
+				<div class="&__counts">
+					<span data-ref="counter-box">
+						<span data-ref="current">0</span><span>/</span><span data-ref="count">0</span>
+					</span>
+				</div>
+				<div class="&__buttons">
+					<button data-ref="next" tabindex="0" type="button">${Icon.get(
+						'angle-down'
+					)}</button>
+					<button data-ref="prev" tabindex="0" type="button">${Icon.get(
+						'angle-up'
+					)}</button>
+					<button data-ref="cancel" tabindex="0" type="button">${Icon.get(
+						'cancel'
+					)}</button>
+					<button data-ref="replace-btn" tabindex="0" type="button" class="jodit-ui-button">~Replace~</button>
+				</div>
+			</div>
+		</div>`;
+	}
+
+	private _currentIndex: number = 0;
+
+	get currentIndex(): number {
+		return this._currentIndex;
+	}
+
+	set currentIndex(value: number) {
+		this._currentIndex = value;
+		this.currentBox.innerText = value.toString();
+	}
+
+	set count(value: number) {
+		this.countBox.innerText = value.toString();
+	}
+
+	get query(): string {
+		return this.queryInput.value;
+	}
+
+	get replace(): string {
+		return this.replaceInput.value;
+	}
+
+	constructor(jodit: IJodit) {
+		super(jodit);
+
+		const {
+			query,
+			replace,
+			cancel,
+			next,
+			prev,
+			replaceBtn,
+			current,
+			count
+		} = refs(this.container);
+
+		this.queryInput = query as HTMLInputElement;
+		this.replaceInput = replace as HTMLInputElement;
+		this.closeButton = cancel as HTMLButtonElement;
+		this.replaceButton = replaceBtn as HTMLButtonElement;
+
+		this.currentBox = current as HTMLSpanElement;
+		this.countBox = count as HTMLSpanElement;
+
+		jodit.e
+			.on(this.closeButton, 'pointerdown', () => {
+				this.close();
+				return false;
+			})
+			.on(this.queryInput, 'input', () => {
+				this.currentIndex = 0;
+			})
+			.on(this.queryInput, 'pointerdown', () => {
+				if (jodit.s.isFocused()) {
+					jodit.s.removeMarkers();
+					this.selInfo = jodit.s.save();
+				}
+			})
+			.on(this.replaceButton, 'pointerdown', () => {
+				jodit.e.fire(this, 'pressReplaceButton');
+				return false;
+			})
+			.on(next, 'pointerdown', (): false => {
+				jodit.e.fire('searchNext');
+				return false;
+			})
+			.on(prev, 'pointerdown', (): false => {
+				jodit.e.fire('searchPrevious');
+				return false;
+			})
+			.on(this.queryInput, 'input', () => {
+				this.setMod('empty-query', !trim(this.queryInput.value).length);
+			})
+			.on(
+				this.queryInput,
+				'keydown',
+				this.j.async.debounce((e: KeyboardEvent) => {
+					switch (e.key) {
+						case consts.KEY_ENTER:
+							e.preventDefault();
+							e.stopImmediatePropagation();
+							if (jodit.e.fire('searchNext')) {
+								this.close();
+							}
+
+							break;
+
+						default:
+							jodit.e.fire(this, 'needUpdateCounters');
+							break;
+					}
+				}, this.j.defaultTimeout)
+			);
+	}
+
+	@watch([':keydown', 'queryInput:keydown'])
+	protected onEditorKeyDown(e: KeyboardEvent): void {
+		if (!this.isOpened) {
+			return;
+		}
+
+		const { j } = this;
+		if (j.getRealMode() !== MODE_WYSIWYG) {
+			return;
+		}
+
+		switch (e.key) {
+			case consts.KEY_ESC:
+				this.close();
+				break;
+
+			case consts.KEY_F3:
+				if (this.queryInput.value) {
+					j.e.fire(!e.shiftKey ? 'searchNext' : 'searchPrevious');
+					e.preventDefault();
+				}
+				break;
+		}
+	}
+
+	isOpened: boolean = false;
+
+	@autobind
+	open(searchAndReplace: boolean = false): void {
+		if (!this.isOpened) {
+			this.j.workplace.appendChild(this.container);
+			this.isOpened = true;
+		}
+
+		this.calcSticky(this.j.e.fire('getStickyState.sticky') || false);
+
+		this.j.e.fire('hidePopup');
+
+		this.setMod('replace', searchAndReplace);
+
+		// this.current = this.j.s.current();
+
+		const selStr: string = (this.j.s.sel || '').toString();
+
+		if (selStr) {
+			this.queryInput.value = selStr;
+		}
+
+		this.setMod('empty-query', !selStr.length);
+
+		this.j.e.fire(this, 'needUpdateCounters');
+
+		if (selStr) {
+			this.queryInput.select();
+		} else {
+			this.queryInput.focus();
+		}
+	}
+
+	@autobind
+	close(): void {
+		if (!this.isOpened) {
+			return;
+		}
+
+		this.j.s.restore();
+
+		Dom.safeRemove(this.container);
+		this.isOpened = false;
+
+		this.j.e.fire(this, 'afterClose');
+	}
+
+	/**
+	 * Calculate position if sticky is enabled
+	 */
+	@watch(':toggleSticky')
+	private calcSticky(enabled: boolean): void {
+		if (this.isOpened) {
+			this.setMod('sticky', enabled);
+
+			if (enabled) {
+				const pos = position(this.j.toolbarContainer);
+
+				css(this.container, {
+					top: pos.top + pos.height,
+					left: pos.left + pos.width
+				});
+			} else {
+				css(this.container, {
+					top: null,
+					left: null
+				});
+			}
+		}
+	}
+}

package/src/plugins/select/select.ts

@@ -56,7 +56,7 @@ export class select extends Plugin {
 	}
 
 	@autobind
-	private onStartSelection(e: MouseEvent) {
+	private onStartSelection(e: MouseEvent): void {
 		const { j } = this;
 
 		let result,

package/src/plugins/size/config.ts

@@ -31,19 +31,19 @@ declare module 'jodit/config' {
  *
  * @example
  * ```javascript
- * new Jodit('.editor', {
+ * Jodit.make('.editor', {
  *    width: '100%',
  * })
  * ```
  * @example
  * ```javascript
- * new Jodit('.editor', {
+ * Jodit.make('.editor', {
  *    width: 600, // equivalent for '600px'
  * })
  * ```
  * @example
  * ```javascript
- * new Jodit('.editor', {
+ * Jodit.make('.editor', {
  *    width: 'auto', // autosize
  * })
  * ```
@@ -61,19 +61,19 @@ Config.prototype.allowResizeY = true;
  *
  * @example
  * ```javascript
- * new Jodit('.editor', {
+ * Jodit.make('.editor', {
  *    height: '100%',
  * })
  * ```
  * @example
  * ```javascript
- * new Jodit('.editor', {
+ * Jodit.make('.editor', {
  *    height: 600, // equivalent for '600px'
  * })
  * ```
  * @example
  * ```javascript
- * new Jodit('.editor', {
+ * Jodit.make('.editor', {
  *    height: 'auto', // default - autosize
  * })
  * ```
@@ -85,13 +85,13 @@ Config.prototype.height = 'auto';
  *
  * @example
  * ```javascript
- * new Jodit('.editor', {
+ * Jodit.make('.editor', {
  *    minHeight: '30%' //min-height: 30%
  * })
  * ```
  * @example
  * ```javascript
- * new Jodit('.editor', {
+ * Jodit.make('.editor', {
  *    minHeight: 200 //min-height: 200px
  * })
  * ```

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

@@ -69,7 +69,7 @@ export class resizeHandler extends Plugin {
 	/**
 	 * Handler: Click on handle - start resizing
 	 */
-	private onHandleResizeStart(e: MouseEvent) {
+	private onHandleResizeStart(e: MouseEvent): void {
 		this.isResized = true;
 
 		this.start.x = e.clientX;
@@ -87,7 +87,7 @@ export class resizeHandler extends Plugin {
 	/**
 	 * Handler: Mouse move after start resizing
 	 */
-	private onHandleResize(e: MouseEvent) {
+	private onHandleResize(e: MouseEvent): void {
 		if (!this.isResized) {
 			return;
 		}
@@ -106,7 +106,7 @@ export class resizeHandler extends Plugin {
 	/**
 	 * End of resizing
 	 */
-	private onHandleResizeEnd() {
+	private onHandleResizeEnd(): void {
 		if (this.isResized) {
 			this.isResized = false;
 

package/src/plugins/size/size.ts

@@ -47,7 +47,7 @@ export class size extends Plugin {
 	/**
 	 * Set editor size by options
 	 */
-	private initialize() {
+	private initialize(): void {
 		const { j } = this;
 
 		if (j.o.inline) {
@@ -82,7 +82,7 @@ export class size extends Plugin {
 	/**
 	 * Manually change height
 	 */
-	private setHeight(height: number | string) {
+	private setHeight(height: number | string): void {
 		if (isNumber(height)) {
 			const { minHeight, maxHeight } = this.j.o;
 
@@ -107,7 +107,7 @@ export class size extends Plugin {
 	/**
 	 * Manually change width
 	 */
-	private setWidth(width: number | string) {
+	private setWidth(width: number | string): void {
 		if (isNumber(width)) {
 			const { minWidth, maxWidth } = this.j.o;
 
@@ -140,7 +140,7 @@ export class size extends Plugin {
 	 * Calculate workspace height
 	 */
 	@autobind
-	private resizeWorkspaceImd() {
+	private resizeWorkspaceImd(): void {
 		if (!this.j || this.j.isDestructed || !this.j.o || this.j.o.inline) {
 			return;
 		}

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

@@ -19,22 +19,22 @@ export class AceEditor
 {
 	override className = 'jodit_ace_editor';
 
-	private aceExists() {
+	private aceExists(): boolean {
 		return (this.j.ow as any).ace !== undefined;
 	}
 
 	/**
 	 * Proxy Method
 	 */
-	private proxyOnBlur = (e: MouseEvent) => {
+	private proxyOnBlur = (e: MouseEvent): void => {
 		this.j.e.fire('blur', e);
 	};
 
-	private proxyOnFocus = (e: MouseEvent) => {
+	private proxyOnFocus = (e: MouseEvent): void => {
 		this.j.e.fire('focus', e);
 	};
 
-	private proxyOnMouseDown = (e: MouseEvent) => {
+	private proxyOnMouseDown = (e: MouseEvent): void => {
 		this.j.e.fire('mousedown', e);
 	};
 
@@ -84,7 +84,7 @@ export class AceEditor
 		return { row, column };
 	}
 
-	private setSelectionRangeIndices(start: number, end: number) {
+	private setSelectionRangeIndices(start: number, end: number): void {
 		const startRowColumn = this.getRowColumnIndices(start);
 		const endRowColumn = this.getRowColumnIndices(end);
 
@@ -101,7 +101,7 @@ export class AceEditor
 	}
 
 	init(editor: IJodit): any {
-		const tryInitAceEditor = () => {
+		const tryInitAceEditor = (): void => {
 			if (this.instance !== undefined || !this.aceExists()) {
 				return;
 			}
@@ -270,13 +270,13 @@ export class AceEditor
 	}
 
 	replaceUndoManager(): void {
-		const { observer } = this.jodit;
+		const { history } = this.jodit;
 
 		this.instance.commands.addCommand({
 			name: 'Undo',
 			bindKey: { win: 'Ctrl-Z', mac: 'Command-Z' },
 			exec: () => {
-				observer.undo();
+				history.undo();
 			}
 		});
 
@@ -284,7 +284,7 @@ export class AceEditor
 			name: 'Redo',
 			bindKey: { win: 'Ctrl-Shift-Z', mac: 'Command-Shift-Z' },
 			exec: () => {
-				observer.redo();
+				history.redo();
 			}
 		});
 	}

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

@@ -115,7 +115,7 @@ export class TextAreaEditor
 	}
 
 	replaceUndoManager(): void {
-		const { observer } = this.jodit;
+		const { history } = this.jodit;
 
 		this.j.e.on(
 			this.instance,
@@ -123,9 +123,9 @@ export class TextAreaEditor
 			(e: KeyboardEvent): false | void => {
 				if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
 					if (e.shiftKey) {
-						observer.redo();
+						history.redo();
 					} else {
-						observer.undo();
+						history.undo();
 					}
 
 					this.setSelectionRange(this.getValue().length);

package/src/plugins/source/source.ts

@@ -86,7 +86,7 @@ export class source extends Plugin {
 		}
 
 		this.__lock = true;
-		this.j.setEditorValue(value);
+		this.j.value = value;
 		this.__lock = false;
 		this.__oldMirrorValue = value;
 	}
@@ -156,11 +156,11 @@ export class source extends Plugin {
 		return this.sourceEditor?.getValue() || '';
 	}
 
-	private setMirrorValue(value: string) {
+	private setMirrorValue(value: string): void {
 		this.sourceEditor?.setValue(value);
 	}
 
-	private setFocusToMirror() {
+	private setFocusToMirror(): void {
 		this.sourceEditor?.focus();
 	}
 
@@ -168,7 +168,7 @@ export class source extends Plugin {
 	protected saveSelection(): void {
 		if (this.j.getRealMode() === consts.MODE_WYSIWYG) {
 			this.j.s.save();
-			this.j.setEditorValue();
+			this.j.synchronizeValues();
 			this.fromWYSIWYG(true);
 		} else {
 			if (this.j.o.editHTMLDocumentMode) {
@@ -317,7 +317,7 @@ export class source extends Plugin {
 			.on('beautifyHTML', html => html);
 
 		if (editor.o.beautifyHTML) {
-			const addEventListener = () => {
+			const addEventListener = (): boolean => {
 				const html_beautify = (editor.ow as any).html_beautify;
 
 				if (html_beautify && !editor.isInDestruct) {
@@ -343,7 +343,7 @@ export class source extends Plugin {
 	}
 
 	@autobind
-	private syncValueFromWYSIWYG(force: boolean = false) {
+	private syncValueFromWYSIWYG(force: boolean = false): void {
 		const editor = this.j;
 
 		if (

package/src/plugins/spellcheck/README.md

@@ -0,0 +1 @@
+The plugin turns on/off spell checking. Also adds a button to the toolbar for this.