jodit 3.15.2 → 3.16.2

package/src/plugins/search/search.ts

@@ -5,74 +5,34 @@
  */
 
 /**
+ * [[include:plugins/search/README.md]]
+ * @packageDocumentation
  * @module plugins/search
  */
 
-import './search.less';
-
 import type {
 	ISelectionRange,
-	MarkerInfo,
 	IJodit,
 	Nullable,
-	IControlType,
-	IPlugin
+	IPlugin,
+	IDictionary,
+	CanUndef,
+	RejectablePromise
 } from 'jodit/types';
-import { Config } from 'jodit/config';
-import * as consts from 'jodit/core/constants';
-import { MODE_WYSIWYG } from 'jodit/core/constants';
-import { Dom } from 'jodit/core/dom';
+import { Dom, LazyWalker } from 'jodit/core/dom';
 import { Plugin } from 'jodit/core/plugin';
-import { Icon } from 'jodit/core/ui';
-import { css, position, refs, trim } from 'jodit/core/helpers';
-import { autobind } from 'jodit/core/decorators';
-
-declare module 'jodit/config' {
-	interface Config {
-		/**
-		 * Enable custom search plugin
-		 * ![search](https://user-images.githubusercontent.com/794318/34545433-cd0a9220-f10e-11e7-8d26-7e22f66e266d.gif)
-		 */
-		useSearch: boolean;
-		// searchByInput: boolean,
-	}
-}
-
-Config.prototype.useSearch = true;
-
-Config.prototype.controls.find = {
-	tooltip: 'Find',
-	icon: 'search',
-	exec(jodit: IJodit, _, { control }) {
-		const value = control.args && control.args[0];
-
-		switch (value) {
-			case 'findPrevious':
-				jodit.e.fire('searchPrevious');
-				break;
-
-			case 'findNext':
-				jodit.e.fire('searchNext');
-				break;
-
-			case 'replace':
-				jodit.execCommand('openReplaceDialog');
-				break;
-
-			default:
-				jodit.execCommand('openSearchDialog');
-		}
-	},
-
-	list: {
-		search: 'Find',
-		findNext: 'Find Next',
-		findPrevious: 'Find Previous',
-		replace: 'Replace'
-	},
-
-	childTemplate: (_, k, v) => v
-} as IControlType;
+import { autobind, cache, watch } from 'jodit/core/decorators';
+import {
+	clearSelectionWrappers,
+	clearSelectionWrappersFromHTML,
+	getSelectionWrappers,
+	SentenceFinder,
+	wrapRangesTextsInTmpSpan
+} from 'jodit/plugins/search/helpers';
+import { UISearch } from 'jodit/plugins/search/ui/search';
+
+import './config';
+import { scrollIntoViewIfNeeded } from 'jodit/core/helpers';
 
 /**
  * Search plugin. it is used for custom search in text
@@ -80,11 +40,11 @@ Config.prototype.controls.find = {
  *
  * @example
  * ```typescript
- * var jodit = new Jodit('#editor', {
+ * var jodit = Jodit.make('#editor', {
  *  useSearch: false
  * });
  * // or
- * var jodit = new Jodit('#editor', {
+ * var jodit = Jodit.make('#editor', {
  *  disablePlugins: 'search'
  * });
  * ```
@@ -97,159 +57,27 @@ export class search extends Plugin {
 		}
 	];
 
-	static getSomePartOfStringIndex(
-		needle: string,
-		haystack: string,
-		start: boolean = true
-	): number | false {
-		return this.findSomePartOfString(needle, haystack, start, true) as
-			| number
-			| false;
-	}
-
-	static findSomePartOfString(
-		needle: string,
-		haystack: string,
-		start: boolean = true,
-		getIndex: boolean = false
-	): boolean | string | number {
-		needle = trim(
-			needle.toLowerCase().replace(consts.SPACE_REG_EXP(), ' ')
-		);
-		haystack = haystack.toLowerCase();
-
-		let i: number = start ? 0 : haystack.length - 1,
-			needleStart: number = start ? 0 : needle.length - 1,
-			tmpEqualLength: number = 0,
-			startAtIndex: number | null = null;
-
-		const inc = start ? 1 : -1,
-			tmp: string[] = [];
-
-		for (; haystack[i] !== undefined; i += inc) {
-			const some: boolean = needle[needleStart] === haystack[i];
-			if (
-				some ||
-				(startAtIndex != null &&
-					consts.SPACE_REG_EXP().test(haystack[i]))
-			) {
-				if (startAtIndex == null || !start) {
-					startAtIndex = i;
-				}
-
-				tmp.push(haystack[i]);
-
-				if (some) {
-					tmpEqualLength += 1;
-					needleStart += inc;
-				}
-			} else {
-				startAtIndex = null;
-				tmp.length = 0;
-				tmpEqualLength = 0;
-				needleStart = start ? 0 : needle.length - 1;
-			}
-
-			if (tmpEqualLength === needle.length) {
-				return getIndex ? (startAtIndex as number) : true;
-			}
-		}
-
-		if (getIndex) {
-			return startAtIndex ?? false;
-		}
-
-		if (tmp.length) {
-			return start ? tmp.join('') : tmp.reverse().join('');
-		}
-
-		return false;
+	@cache
+	private get ui(): UISearch {
+		return new UISearch(this.j);
 	}
 
-	private template = `<div class="jodit-search">
-			<div class="jodit-search__box">
-				<div class="jodit-search__inputs">
-					<input data-ref="query" tabindex="0" placeholder="${this.j.i18n(
-						'Search for'
-					)}" type="text"/>
-					<input data-ref="replace" tabindex="0" placeholder="${this.j.i18n(
-						'Replace with'
-					)}" type="text"/>
-				</div>
-				<div class="jodit-search__counts">
-					<span data-ref="counter-box">0/0</span>
-				</div>
-				<div class="jodit-search__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">${this.j.i18n(
-						'Replace'
-					)}</button>
-				</div>
-			</div>
-		</div>`;
-
-	private isOpened: boolean = false;
-
-	private selInfo: Nullable<MarkerInfo[]> = null;
-	private current: Nullable<Node> = null;
-
-	private eachMap = (
-		node: Node,
-		callback: (elm: Node) => boolean,
-		next: boolean
-	) => {
-		Dom.findWithCurrent(
-			node,
-			(child: Node | null): boolean => {
-				return Boolean(child && callback(child));
-			},
-			this.j.editor,
-			next ? 'nextSibling' : 'previousSibling',
-			next ? 'firstChild' : 'lastChild'
-		);
-	};
-
-	private updateCounters = () => {
-		if (!this.isOpened) {
+	@watch('ui:needUpdateCounters')
+	private async updateCounters(): Promise<void> {
+		if (!this.ui.isOpened) {
 			return;
 		}
 
-		this.counterBox.style.display = this.queryInput.value.length
-			? 'inline-block'
-			: 'none';
+		this.ui.count = await this.calcCounts(this.ui.query);
+	}
 
-		const range = this.j.s.range,
-			counts: [number, number] = this.calcCounts(
-				this.queryInput.value,
-				range
-			);
-
-		this.counterBox.textContent = counts.join('/');
-	};
-
-	private boundAlreadyWas(
-		current: ISelectionRange,
-		bounds: ISelectionRange[]
-	): boolean {
-		return bounds.some((bound: ISelectionRange) => {
-			return (
-				bound.startContainer === current.startContainer &&
-				bound.endContainer === current.endContainer &&
-				bound.startOffset === current.startOffset &&
-				bound.endOffset === current.endOffset
-			);
-		}, false);
+	@watch('ui:pressReplaceButton')
+	protected onPressReplaceButton(): void {
+		this.findAndReplace(this.ui.query);
+		this.updateCounters();
 	}
 
-	private tryScrollToElement(startContainer: Node) {
+	private tryScrollToElement(startContainer: Node): void {
 		// find scrollable element
 		let parentBox: HTMLElement | false = Dom.closest(
 			startContainer,
@@ -265,449 +93,302 @@ export class search extends Plugin {
 			) as HTMLElement | false;
 		}
 
-		parentBox && parentBox !== this.j.editor && parentBox.scrollIntoView();
+		parentBox &&
+			parentBox !== this.j.editor &&
+			scrollIntoViewIfNeeded(parentBox, this.j.editor, this.j.ed);
 	}
 
-	searchBox!: HTMLDivElement;
-	queryInput!: HTMLInputElement;
-	replaceInput!: HTMLInputElement;
-	closeButton!: HTMLButtonElement;
-	nextButton!: HTMLButtonElement;
-	prevButton!: HTMLButtonElement;
-	replaceButton!: HTMLButtonElement;
-	counterBox!: HTMLSpanElement;
-
-	calcCounts = (
-		query: string,
-		current: ISelectionRange | false = false
-	): [number, number] => {
-		const bounds: ISelectionRange[] = [];
-
-		let currentIndex: number = 0,
-			count: number = 0,
-			bound: ISelectionRange | false = false,
-			start: Node | null = this.j.editor.firstChild;
-
-		while (start && query.length) {
-			bound = this.find(
-				start,
-				query,
-				true,
-				0,
-				(bound as Range) || this.j.ed.createRange()
-			);
-			if (bound) {
-				if (this.boundAlreadyWas(bound, bounds)) {
-					break;
-				}
-				bounds.push(bound);
-				start = bound.startContainer;
-				count += 1;
-				if (current && this.boundAlreadyWas(current, [bound])) {
-					currentIndex = count;
-				}
-			} else {
-				start = null;
-			}
+	protected async calcCounts(query: string): Promise<number> {
+		if (this.walkerCount) {
+			this.walkerCount.break();
 		}
 
-		return [currentIndex, count];
-	};
-
-	findAndReplace = (start: Node | null, query: string): boolean => {
-		const range = this.j.s.range,
-			bound: ISelectionRange | false = this.find(
-				start,
-				query,
-				true,
-				0,
-				range
-			);
-
-		if (bound && bound.startContainer && bound.endContainer) {
-			const rng = this.j.ed.createRange();
+		this.walkerCount = new LazyWalker(this.j.async, {
+			timeout: this.j.o.search.lazyIdleTimeout
+		});
 
-			try {
-				if (bound && bound.startContainer && bound.endContainer) {
-					rng.setStart(
-						bound.startContainer,
-						bound.startOffset as number
-					);
-
-					rng.setEnd(bound.endContainer, bound.endOffset as number);
-					rng.deleteContents();
-
-					const textNode: Node = this.j.createInside.text(
-						this.replaceInput.value
-					);
-
-					rng.insertNode(textNode);
-					this.j.s.select(textNode);
-					this.tryScrollToElement(textNode);
-				}
-			} catch {}
+		const result = await this.find(this.walkerCount, query);
+		return result.length;
+	}
 
-			return true;
+	@autobind
+	async findAndReplace(query: string): Promise<boolean> {
+		if (this.walker) {
+			this.walker.break();
 		}
 
-		return false;
-	};
+		this.walker = new LazyWalker(this.j.async, {
+			timeout: this.j.o.search.lazyIdleTimeout
+		});
 
-	findAndSelect = (
-		start: Node | null,
-		query: string,
-		next: boolean
-	): boolean => {
 		const range = this.j.s.range,
-			bound: ISelectionRange | false = this.find(
-				start,
-				query,
-				next,
-				0,
-				range
-			);
+			bounds = await this.find(this.walker, query);
 
-		if (bound && bound.startContainer && bound.endContainer) {
-			const rng: Range = this.j.ed.createRange();
+		let currentIndex = this.findCurrentIndexInRanges(bounds, range);
 
+		if (currentIndex === -1) {
+			currentIndex = 0;
+		}
+
+		const bound = bounds[currentIndex];
+
+		if (bound) {
 			try {
-				rng.setStart(bound.startContainer, bound.startOffset as number);
-				rng.setEnd(bound.endContainer, bound.endOffset as number);
-				this.j.s.selectRange(rng);
-			} catch (e) {}
+				const rng = this.j.ed.createRange();
 
-			this.tryScrollToElement(bound.startContainer);
+				rng.setStart(bound.startContainer, bound.startOffset);
+				rng.setEnd(bound.endContainer, bound.endOffset);
+				rng.deleteContents();
+
+				const textNode = this.j.createInside.text(this.ui.replace);
+
+				rng.insertNode(textNode);
+				this.j.s.select(textNode);
+				this.tryScrollToElement(textNode);
+				this.cache = {};
+				this.j.synchronizeValues();
+			} catch {}
 
-			this.current = bound.startContainer;
-			this.updateCounters();
+			this.j.e.fire('afterFindAndReplace');
 
 			return true;
 		}
 
 		return false;
-	};
+	}
 
-	find = (
-		start: Node | null,
-		query: string,
-		next: boolean,
-		deep: number,
-		range: Range
-	): false | ISelectionRange => {
-		if (start && query.length) {
-			let sentence: string = '',
-				bound: ISelectionRange = {
-					startContainer: null,
-					startOffset: null,
-					endContainer: null,
-					endOffset: null
-				};
-
-			this.eachMap(
-				start,
-				(elm: Node): boolean => {
-					if (
-						Dom.isText(elm) &&
-						elm.nodeValue != null &&
-						elm.nodeValue.length
-					) {
-						let value: string = elm.nodeValue;
-
-						if (!next && elm === range.startContainer) {
-							value = !deep
-								? value.substr(0, range.startOffset)
-								: value.substr(range.endOffset);
-						} else if (next && elm === range.endContainer) {
-							value = !deep
-								? value.substr(range.endOffset)
-								: value.substr(0, range.startOffset);
-						}
+	private previousQuery: string = '';
+	private drawPromise: RejectablePromise<void> | null = null;
 
-						const tmpSentence: string = next
-							? sentence + value
-							: value + sentence;
-
-						const part: boolean | string =
-							search.findSomePartOfString(
-								query,
-								tmpSentence,
-								next
-							) as boolean | string;
-
-						if (part !== false) {
-							let currentPart: string | boolean =
-								search.findSomePartOfString(
-									query,
-									value,
-									next
-								) as string | boolean;
-
-							if (currentPart === true) {
-								currentPart = trim(query);
-							} else if (currentPart === false) {
-								currentPart = search.findSomePartOfString(
-									value,
-									query,
-									next
-								) as string | true;
-								if (currentPart === true) {
-									currentPart = trim(value);
-								}
-							}
-
-							let currentPartIndex: number =
-								search.getSomePartOfStringIndex(
-									query,
-									value,
-									next
-								) || 0;
-
-							if (
-								((next && !deep) || (!next && deep)) &&
-								elm.nodeValue.length - value.length > 0
-							) {
-								currentPartIndex +=
-									elm.nodeValue.length - value.length;
-							}
-
-							if (bound.startContainer == null) {
-								bound.startContainer = elm;
-								bound.startOffset = currentPartIndex;
-							}
-							if (part !== true) {
-								sentence = tmpSentence;
-							} else {
-								bound.endContainer = elm;
-								bound.endOffset = currentPartIndex;
-								bound.endOffset += (
-									currentPart as string
-								).length;
-
-								return true;
-							}
-						} else {
-							sentence = '';
-							bound = {
-								startContainer: null,
-								startOffset: null,
-								endContainer: null,
-								endOffset: null
-							};
-						}
-					} else if (Dom.isBlock(elm) && sentence !== '') {
-						sentence = next ? sentence + ' ' : ' ' + sentence;
-					}
+	@autobind
+	async findAndSelect(query: string, next: boolean): Promise<boolean> {
+		if (this.walker) {
+			this.walker.break();
+		}
 
-					return false;
-				},
-				next
-			);
-
-			if (bound.startContainer && bound.endContainer) {
-				return bound;
-			}
-
-			if (!deep) {
-				this.current = next
-					? (this.j.editor.firstChild as Node)
-					: (this.j.editor.lastChild as Node);
-				return this.find(this.current, query, next, deep + 1, range);
-			}
+		this.walker = new LazyWalker(this.j.async, {
+			timeout: this.j.defaultTimeout
+		});
+
+		const bounds = await this.find(this.walker, query);
+
+		if (!bounds.length) {
+			return false;
 		}
 
-		return false;
-	};
+		if (
+			this.previousQuery !== query ||
+			!getSelectionWrappers(this.j.editor).length
+		) {
+			this.drawPromise?.rejectCallback();
+			this.j.async.cancelAnimationFrame(this.wrapFrameRequest);
+			clearSelectionWrappers(this.j.editor);
+			this.drawPromise = this.drawSelectionRanges(bounds);
+		}
 
-	open = (searchAndReplace: boolean = false): void => {
-		if (!this.isOpened) {
-			this.searchBox.classList.add('jodit-search_active');
-			this.isOpened = true;
+		this.previousQuery = query;
+
+		let currentIndex = this.ui.currentIndex - 1;
+
+		if (currentIndex === -1) {
+			currentIndex = 0;
+		} else if (next) {
+			currentIndex =
+				currentIndex === bounds.length - 1 ? 0 : currentIndex + 1;
+		} else {
+			currentIndex =
+				currentIndex === 0 ? bounds.length - 1 : currentIndex - 1;
 		}
 
-		this.calcSticky(this.j.e.fire('getStickyState.sticky') || false);
+		this.ui.currentIndex = currentIndex + 1;
 
-		this.j.e.fire('hidePopup');
+		const bound = bounds[currentIndex];
 
-		this.searchBox.classList.toggle(
-			'jodit-search_replace',
-			searchAndReplace
-		);
+		if (bound) {
+			const rng = this.j.ed.createRange();
 
-		this.current = this.j.s.current();
+			try {
+				rng.setStart(bound.startContainer, bound.startOffset);
+				rng.setEnd(bound.endContainer, bound.endOffset);
+				this.j.s.selectRange(rng);
+			} catch (e) {}
 
-		const selStr: string = (this.j.s.sel || '').toString();
+			this.tryScrollToElement(bound.startContainer);
 
-		if (selStr) {
-			this.queryInput.value = selStr;
+			await this.updateCounters();
+			await this.drawPromise;
+			this.j.e.fire('afterFindAndSelect');
+
+			return true;
 		}
 
-		this.updateCounters();
+		return false;
+	}
 
-		if (selStr) {
-			this.queryInput.select();
-		} else {
-			this.queryInput.focus();
-		}
-	};
+	private findCurrentIndexInRanges(
+		bounds: ISelectionRange[],
+		range: Range
+	): number {
+		return bounds.findIndex(
+			bound =>
+				bound.startContainer === range.startContainer &&
+				bound.startOffset === range.startOffset &&
+				bound.endContainer === range.startContainer &&
+				bound.endOffset === range.endOffset
+		);
+	}
 
-	close = (): void => {
-		if (!this.isOpened) {
-			return;
+	walker: Nullable<LazyWalker> = null;
+	walkerCount: Nullable<LazyWalker> = null;
+
+	private cache: IDictionary<CanUndef<Promise<ISelectionRange[]>>> = {};
+
+	private async isValidCache(
+		promise: Promise<ISelectionRange[]>
+	): Promise<boolean> {
+		const res = await promise;
+		return res.every(
+			r =>
+				r.startContainer.isConnected &&
+				r.startOffset <= (r.startContainer.nodeValue?.length ?? 0) &&
+				r.endContainer.isConnected &&
+				r.endOffset <= (r.endContainer.nodeValue?.length ?? 0)
+		);
+	}
+
+	@autobind
+	private async find(
+		walker: LazyWalker,
+		query: string
+	): Promise<ISelectionRange[]> {
+		if (!query.length) {
+			return [];
 		}
 
-		this.j.s.restore();
+		const cache = this.cache[query];
+		if (cache && (await this.isValidCache(cache))) {
+			return cache;
+		}
 
-		this.searchBox.classList.remove('jodit-search_active');
-		this.isOpened = false;
-	};
+		const sentence = new SentenceFinder(this.j.o.search.fuzzySearch);
 
-	/** @override */
-	afterInit(editor: IJodit): void {
-		if (editor.o.useSearch) {
-			const self: search = this;
+		this.cache[query] = this.j.async.promise(resolve => {
+			walker
+				.on('break', (): void => {
+					resolve([]);
+				})
+				.on('visit', (elm: Node): boolean => {
+					if (Dom.isText(elm)) {
+						sentence.add(elm);
+					}
 
-			self.searchBox = editor.c.fromHTML(self.template) as HTMLDivElement;
+					return false;
+				})
+				.on('end', (): void => {
+					resolve(sentence.ranges(query) ?? []);
+				})
+				.setWork(this.j.editor);
+		});
 
-			const {
-				query,
-				replace,
-				cancel,
-				next,
-				prev,
-				replaceBtn,
-				counterBox
-			} = refs(self.searchBox);
+		return this.cache[query] as Promise<ISelectionRange[]>;
+	}
 
-			self.queryInput = query as HTMLInputElement;
+	private wrapFrameRequest: number = 0;
 
-			self.replaceInput = replace as HTMLInputElement;
+	private drawSelectionRanges(
+		ranges: ISelectionRange[]
+	): RejectablePromise<void> {
+		const { async, createInside: ci, editor } = this.j;
 
-			self.closeButton = cancel as HTMLButtonElement;
+		async.cancelAnimationFrame(this.wrapFrameRequest);
 
-			self.nextButton = next as HTMLButtonElement;
+		const parts = [...ranges];
 
-			self.prevButton = prev as HTMLButtonElement;
+		let sRange: CanUndef<ISelectionRange>,
+			total = 0;
 
-			self.replaceButton = replaceBtn as HTMLButtonElement;
+		return async.promise(resolve => {
+			const drawParts = (): void => {
+				do {
+					sRange = parts.shift();
 
-			self.counterBox = counterBox as HTMLButtonElement;
+					if (sRange) {
+						wrapRangesTextsInTmpSpan(sRange, parts, ci, editor);
+					}
 
-			const onInit = () => {
-				editor.workplace.appendChild(this.searchBox);
+					total += 1;
+				} while (sRange && total <= 5);
 
-				editor.e
-					.off(this.j.container, 'keydown.search')
-					.on(
-						this.j.container,
-						'keydown.search',
-						(e: KeyboardEvent) => {
-							if (editor.getRealMode() !== MODE_WYSIWYG) {
-								return;
-							}
+				if (parts.length) {
+					this.wrapFrameRequest =
+						async.requestAnimationFrame(drawParts);
+				} else {
+					resolve();
+				}
+			};
 
-							switch (e.key) {
-								case consts.KEY_ESC:
-									this.close();
-									break;
+			drawParts();
+		});
+	}
 
-								case consts.KEY_F3:
-									if (self.queryInput.value) {
-										editor.e.fire(
-											!e.shiftKey
-												? 'searchNext'
-												: 'searchPrevious'
-										);
+	@watch(':afterGetValueFromEditor')
+	protected onAfterGetValueFromEditor(data: { value: string }): void {
+		data.value = clearSelectionWrappersFromHTML(data.value);
+	}
 
-										e.preventDefault();
-									}
-									break;
-							}
-						}
-					);
-			};
-			onInit();
+	/** @override */
+	afterInit(editor: IJodit): void {
+		if (editor.o.useSearch) {
+			const self: search = this;
 
 			editor.e
-				.on('changePlace', onInit)
-				.on(self.closeButton, 'click', this.close)
-				.on(self.queryInput, 'mousedown', () => {
-					if (editor.s.isFocused()) {
-						editor.s.removeMarkers();
-						self.selInfo = editor.s.save();
-					}
+				.on('beforeSetMode.search', () => {
+					this.ui.close();
 				})
-				.on(self.replaceButton, 'click', (e: MouseEvent) => {
-					self.findAndReplace(
-						editor.s.current() || editor.editor.firstChild,
-						self.queryInput.value
-					);
-
-					this.updateCounters();
-
-					e.preventDefault();
-					e.stopImmediatePropagation();
+				.on(this.ui, 'afterClose', () => {
+					clearSelectionWrappers(editor.editor);
+					this.ui.currentIndex = 0;
+					this.ui.count = 0;
+					this.cache = {};
+				})
+				.on('click', () => {
+					this.ui.currentIndex = 0;
+					clearSelectionWrappers(editor.editor);
+				})
+				.on('change.search', () => {
+					this.cache = {};
 				})
 				.on(
-					[self.nextButton, self.prevButton],
-					'click',
-					function (this: HTMLButtonElement, e: MouseEvent) {
-						editor.e.fire(
-							self.nextButton === this
-								? 'searchNext'
-								: 'searchPrevious'
-						);
-						e.preventDefault();
-						e.stopImmediatePropagation();
-					}
-				)
-				.on(
-					this.queryInput,
-					'keydown',
-					this.j.async.debounce((e: KeyboardEvent) => {
-						switch (e.key) {
-							case consts.KEY_ENTER:
-								e.preventDefault();
-								e.stopImmediatePropagation();
-								if (editor.e.fire('searchNext')) {
-									this.close();
-								}
-
-								break;
-
-							default:
-								this.updateCounters();
-								break;
+					'keydown.search mousedown.search',
+					editor.async.debounce(() => {
+						if (this.ui.selInfo) {
+							editor.s.removeMarkers();
+							this.ui.selInfo = null;
 						}
-					}, this.j.defaultTimeout)
+
+						if (this.ui.isOpened) {
+							this.updateCounters();
+						}
+					}, editor.defaultTimeout)
 				)
-				.on('beforeSetMode.search', () => {
-					this.close();
-				})
-				.on('keydown.search mousedown.search', () => {
-					if (this.selInfo) {
-						editor.s.removeMarkers();
-						this.selInfo = null;
-					}
-					if (this.isOpened) {
-						this.current = this.j.s.current();
-						this.updateCounters();
-					}
-				})
 				.on('searchNext.search searchPrevious.search', () => {
-					if (!self.isOpened) {
-						return self.open();
+					if (!this.ui.isOpened) {
+						this.ui.open();
 					}
 
-					return self.findAndSelect(
-						editor.s.current() || editor.editor.firstChild,
-						self.queryInput.value,
-						editor.e.current === 'searchNext'
-					);
+					return self
+						.findAndSelect(
+							self.ui.query,
+							editor.e.current === 'searchNext'
+						)
+						.catch(() => {});
 				})
 				.on('search.search', (value: string, next: boolean = true) => {
-					editor.execCommand('search', value, next);
-				})
-				.on('toggleSticky.search', this.calcSticky);
+					this.ui.currentIndex = 0;
+					return self
+						.findAndSelect(value || '', next)
+						.catch(() => {});
+				});
 
 			editor
 				.registerCommand('search', {
@@ -716,18 +397,15 @@ export class search extends Plugin {
 						value?: string,
 						next: boolean = true
 					) => {
-						self.findAndSelect(
-							editor.s.current() || editor.editor.firstChild,
-							value || '',
-							next
-						);
+						value &&
+							self.findAndSelect(value, next).catch(() => {});
 
 						return false;
 					}
 				})
 				.registerCommand('openSearchDialog', {
 					exec: () => {
-						self.open();
+						self.ui.open();
 						return false;
 					},
 					hotkeys: ['ctrl+f', 'cmd+f']
@@ -735,7 +413,7 @@ export class search extends Plugin {
 				.registerCommand('openReplaceDialog', {
 					exec: () => {
 						if (!editor.o.readonly) {
-							self.open(true);
+							self.ui.open(true);
 						}
 						return false;
 					},
@@ -746,31 +424,7 @@ export class search extends Plugin {
 
 	/** @override */
 	beforeDestruct(jodit: IJodit): void {
-		Dom.safeRemove(this.searchBox);
-		jodit.events?.off('.search');
-	}
-
-	/**
-	 * Calculate position if sticky is enabled
-	 */
-	@autobind
-	private calcSticky(enabled: boolean): void {
-		if (this.isOpened) {
-			this.searchBox.classList.toggle('jodit-search_sticky', enabled);
-
-			if (enabled) {
-				const pos = position(this.j.toolbarContainer);
-
-				css(this.searchBox, {
-					top: pos.top + pos.height,
-					left: pos.left + pos.width
-				});
-			} else {
-				css(this.searchBox, {
-					top: null,
-					left: null
-				});
-			}
-		}
+		this.ui.destruct();
+		jodit.e.off('.search');
 	}
 }