jodit 3.15.2 → 3.16.2

package/src/plugins/print/helpers.ts

@@ -8,7 +8,7 @@
  * @module plugins/print
  */
 
-import type { IJodit } from 'jodit/types';
+import type { IJodit, Nullable } from 'jodit/types';
 import { $$, attr, css, isString } from 'jodit/core/helpers';
 import { Dom } from 'jodit/core/dom';
 
@@ -67,7 +67,8 @@ function fixedAssetsSizeAndAbsoluteLinks(
 export function previewBox(
 	editor: IJodit,
 	defaultValue?: string,
-	points: 'pt' | 'px' | '' = 'px'
+	points: 'pt' | 'px' | '' = 'px',
+	container: Nullable<HTMLElement> = null
 ): HTMLElement {
 	const restoreAttributes = fixedAssetsSizeAndAbsoluteLinks(editor, points);
 
@@ -77,7 +78,11 @@ export function previewBox(
 			return res;
 		}
 
-		const div = editor.c.div('jodit__preview-box');
+		let div: HTMLElement = editor.c.div('jodit__preview-box');
+		if (container) {
+			container.appendChild(div);
+		}
+
 		css(div, {
 			position: 'relative',
 			padding: 16
@@ -100,14 +105,16 @@ export function previewBox(
 
 			div.appendChild(iframe);
 
-			const mywindow = iframe.contentWindow;
+			const myWindow = iframe.contentWindow;
 
-			if (mywindow) {
+			if (myWindow) {
 				editor.e.fire(
 					'generateDocumentStructure.iframe',
-					mywindow.document,
+					myWindow.document,
 					editor
 				);
+
+				div = myWindow.document.body;
 			}
 		} else {
 			css(div, {
@@ -127,7 +134,7 @@ export function previewBox(
 			for (let i = 0; i < dv.children.length; i += 1) {
 				const c = dv.children[i];
 
-				const newNode = document.createElement(c.nodeName);
+				const newNode = box.ownerDocument.createElement(c.nodeName);
 
 				for (let j = 0; j < c.attributes.length; j += 1) {
 					attr(

package/src/plugins/print/index.ts

@@ -8,5 +8,5 @@
  * @module plugins/print
  */
 
-export * from './preview';
+export * from './preview/preview';
 export * from './print';

package/src/plugins/print/{preview.less → preview/preview.less}

@@ -1,4 +1,4 @@
-@import (reference) '../../styles/mixins';
+@import (reference) '../../../styles/mixins';
 
 .jodit__preview-box {
 	table {

package/src/plugins/print/{preview.ts → preview/preview.ts}

@@ -5,20 +5,21 @@
  */
 
 /**
- * @module plugins/print
+ * @module plugins/print/preview
  */
 
 import './preview.less';
 
-import type { IControlType, IDialog, IJodit } from 'jodit/types';
+import type { IControlType, IJodit } from 'jodit/types';
 import { Config } from 'jodit/config';
-import * as consts from 'jodit/core/constants';
+import { MODE_SOURCE, MODE_WYSIWYG } from 'jodit/core/constants';
 import { previewBox } from 'jodit/plugins/print/helpers';
+import { Dialog } from 'jodit/modules/dialog/dialog';
 
 Config.prototype.controls.preview = {
 	icon: 'eye',
 	command: 'preview',
-	mode: consts.MODE_SOURCE + consts.MODE_WYSIWYG,
+	mode: MODE_SOURCE + MODE_WYSIWYG,
 	tooltip: 'Preview'
 } as IControlType;
 
@@ -30,17 +31,17 @@ export function preview(editor: IJodit): void {
 	editor.registerCommand(
 		'preview',
 		(_: any, _1: any, defaultValue: string) => {
-			const dialog = <IDialog>editor.getInstance('Dialog', {
+			const dialog = new Dialog({
 				language: editor.o.language,
 				theme: editor.o.theme
 			});
 
-			const div = previewBox(editor, defaultValue);
-
 			dialog
 				.setSize(1024, 600)
-				.open(div, editor.i18n('Preview'))
+				.open('', editor.i18n('Preview'))
 				.setModal(true);
+
+			previewBox(editor, defaultValue, 'px', dialog.getElm('content'));
 		}
 	);
 }

package/src/plugins/print/print.ts

@@ -30,27 +30,27 @@ Config.prototype.controls.print = {
 
 		getContainer(editor, Config).appendChild(iframe);
 
-		const afterFinishPrint = () => {
+		const afterFinishPrint = (): void => {
 			editor.e.off(editor.ow, 'mousemove', afterFinishPrint);
 			Dom.safeRemove(iframe);
 		};
 
-		const mywindow = iframe.contentWindow;
-		if (mywindow) {
+		const myWindow = iframe.contentWindow;
+		if (myWindow) {
 			editor.e
-				.on(mywindow, 'onbeforeunload onafterprint', afterFinishPrint)
+				.on(myWindow, 'onbeforeunload onafterprint', afterFinishPrint)
 				.on(editor.ow, 'mousemove', afterFinishPrint);
 
 			if (editor.o.iframe) {
 				editor.e.fire(
 					'generateDocumentStructure.iframe',
-					mywindow.document,
+					myWindow.document,
 					editor
 				);
 
-				mywindow.document.body.innerHTML = editor.value;
+				myWindow.document.body.innerHTML = editor.value;
 			} else {
-				mywindow.document.write(
+				myWindow.document.write(
 					'<!doctype html><html lang="' +
 						defaultLanguage(editor.o.language) +
 						'"><head><title></title></head>' +
@@ -58,11 +58,20 @@ Config.prototype.controls.print = {
 						editor.value +
 						'</body></html>'
 				);
-				mywindow.document.close();
+				myWindow.document.close();
 			}
 
-			mywindow.focus();
-			mywindow.print();
+			const style = myWindow.document.createElement('style');
+			style.innerHTML = `@media print {
+					body {
+							-webkit-print-color-adjust: exact;
+					}
+			}`;
+
+			myWindow.document.head.appendChild(style);
+
+			myWindow.focus();
+			myWindow.print();
 		}
 	},
 	mode: consts.MODE_SOURCE + consts.MODE_WYSIWYG,

package/src/plugins/redo-undo/redo-undo.ts

@@ -15,13 +15,13 @@ import { Plugin } from 'jodit/core/plugin';
 
 Config.prototype.controls.redo = {
 	mode: consts.MODE_SPLIT,
-	isDisabled: (editor: IJodit): boolean => !editor.observer.stack.canRedo(),
+	isDisabled: (editor: IJodit): boolean => !editor.history.canRedo(),
 	tooltip: 'Redo'
 } as IControlType;
 
 Config.prototype.controls.undo = {
 	mode: consts.MODE_SPLIT,
-	isDisabled: (editor: IJodit): boolean => !editor.observer.stack.canUndo(),
+	isDisabled: (editor: IJodit): boolean => !editor.history.canUndo(),
 	tooltip: 'Undo'
 } as IControlType;
 
@@ -47,7 +47,7 @@ export class redoUndo extends Plugin {
 
 	protected override afterInit(editor: IJodit): void {
 		const callback = (command: string): void | false => {
-			editor.observer[command as 'redo' | 'undo']();
+			editor.history[command as 'redo' | 'undo']();
 
 			return false;
 		};

package/src/plugins/resizer/resizer.ts

@@ -121,7 +121,7 @@ export class resizer extends Plugin {
 		}
 	}
 
-	private addEventListeners() {
+	private addEventListeners(): void {
 		const editor = this.j;
 
 		editor.e
@@ -197,7 +197,7 @@ export class resizer extends Plugin {
 		);
 	}
 
-	private onResize = (e: MouseEvent) => {
+	private onResize = (e: MouseEvent): void => {
 		if (this.isResized) {
 			if (!this.element) {
 				return;
@@ -283,12 +283,12 @@ export class resizer extends Plugin {
 		}
 	}
 
-	private onClickOutside = (e: MouseEvent) => {
+	private onClickOutside = (e: MouseEvent): void => {
 		if (this.isShown) {
 			if (this.isResized) {
 				this.j.unlock();
 				this.isResized = false;
-				this.j.setEditorValue();
+				this.j.synchronizeValues();
 				e.stopImmediatePropagation();
 
 				this.j.e.off(
@@ -302,7 +302,7 @@ export class resizer extends Plugin {
 		}
 	};
 
-	private onDelete(e: KeyboardEvent) {
+	private onDelete(e: KeyboardEvent): void {
 		if (!this.element) {
 			return;
 		}
@@ -317,7 +317,7 @@ export class resizer extends Plugin {
 	}
 
 	@debounce()
-	private onChangeEditor() {
+	private onChangeEditor(): void {
 		if (this.isShown) {
 			if (!this.element || !this.element.parentNode) {
 				this.hide();
@@ -404,7 +404,7 @@ export class resizer extends Plugin {
 		}
 	}
 
-	private onClickElement = (element: HTMLElement) => {
+	private onClickElement = (element: HTMLElement): void => {
 		if (this.isResized) {
 			return;
 		}
@@ -420,7 +420,7 @@ export class resizer extends Plugin {
 		}
 	};
 
-	private updateSize = () => {
+	private updateSize = (): void => {
 		if (this.isInDestruct || !this.isShown) {
 			return;
 		}
@@ -462,7 +462,7 @@ export class resizer extends Plugin {
 		}
 	};
 
-	private showSizeViewer(w: number, h: number) {
+	private showSizeViewer(w: number, h: number): void {
 		if (!this.j.o.resizer.showSize) {
 			return;
 		}
@@ -487,7 +487,7 @@ export class resizer extends Plugin {
 	/**
 	 * Show resizer
 	 */
-	private show() {
+	private show(): void {
 		if (this.j.o.readonly || this.isShown) {
 			return;
 		}
@@ -519,7 +519,7 @@ export class resizer extends Plugin {
 		}
 	}
 
-	private hideSizeViewer = () => {
+	private hideSizeViewer = (): void => {
 		this.sizeViewer.style.opacity = '0';
 	};
 

package/src/plugins/search/README.md

@@ -0,0 +1,38 @@
+Search plugin. it is used for custom search in text
+![search](https://user-images.githubusercontent.com/794318/34545433-cd0a9220-f10e-11e7-8d26-7e22f66e266d.gif)
+
+Disable plugin:
+```js
+Jodit.make('#editor', {
+	useSearch: false
+});
+```
+or
+```js
+Jodit.make('#editor', {
+	disablePlugins: 'search'
+});
+```
+
+## JS API
+
+### Find and select some text
+
+```js
+const editor = Jodit.make('#editor');
+editor.value = '<p>this text contains some text</p>';
+editor.e.fire('search', 'some text').then(() => {
+	console.log('Selected!');
+})
+```
+
+### Find next fragment
+
+```js
+const editor = Jodit.make('#editor');
+editor.value = '<p>this text thow times contains some text and some text</p>';
+editor.e.fire('searchNext', 'some text').then(() => {
+	console.log('Selected!');
+  editor.e.fire('searchNext', 'some text');
+})
+```

package/src/plugins/search/config.ts

@@ -0,0 +1,82 @@
+/*!
+ * 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 type { FuzzySearch, IControlType, IJodit } from 'jodit/types';
+import { Config } from 'jodit/config';
+
+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;
+
+		search: {
+			lazyIdleTimeout: number;
+
+			/**
+			 * Function to search for a string within a substring. The default implementation is [[fuzzySearchIndex]]
+			 * But you can write your own. It must implement the [[FuzzySearch]] interface.
+			 *
+			 * ```ts
+			 * Jodit.make('#editor', {
+			 *   search: {
+			 *     fuzzySearch: (needle, haystack, offset) => {
+			 *       return [haystack.indexOf(needle, offset), needle.length];
+			 *     }
+			 *   }
+			 * })
+			 * ```
+			 */
+			fuzzySearch?: FuzzySearch;
+		};
+	}
+}
+
+Config.prototype.useSearch = true;
+Config.prototype.search = {
+	lazyIdleTimeout: 0
+};
+
+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;

package/src/plugins/search/helpers/index.ts

@@ -0,0 +1,12 @@
+/*!
+ * 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
+ */
+
+export * from './sentence-finder';
+export * from './wrap-ranges-texts-in-tmp-span';

package/src/plugins/search/helpers/sentence-finder.ts

@@ -0,0 +1,103 @@
+/*!
+ * 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 type {
+	CanUndef,
+	FuzzySearch,
+	ISelectionRange,
+	Nullable
+} from 'jodit/types';
+import { fuzzySearchIndex } from 'jodit/src/core/helpers/string/fuzzy-search-index';
+
+export interface State {
+	query: string;
+	sentence: SentenceFinder;
+}
+
+interface QueueItem {
+	startIndex: number;
+	endIndex: number;
+	node: Text;
+}
+
+export class SentenceFinder {
+	private queue: QueueItem[] = [];
+	private value: string = '';
+
+	constructor(private readonly searchIndex: FuzzySearch = fuzzySearchIndex) {}
+
+	add(node: Text): void {
+		const value = (node.nodeValue ?? '').toLowerCase();
+
+		if (!value.length) {
+			return;
+		}
+
+		const index = this.value.length;
+
+		this.queue.push({
+			startIndex: index,
+			endIndex: index + value.length,
+			node
+		});
+
+		this.value += value;
+	}
+
+	ranges(needle: string, position: number = 0): Nullable<ISelectionRange[]> {
+		const results: ISelectionRange[] = [];
+
+		let index = position,
+			len = 0,
+			startQueueIndex = 0;
+
+		// Find all ranges in substring
+		do {
+			[index, len] = this.searchIndex(needle, this.value, index);
+
+			if (index !== -1) {
+				let startContainer: CanUndef<Text>,
+					startOffset: number = 0,
+					endContainer: CanUndef<Text>,
+					endOffset: number = 0;
+
+				for (let i = startQueueIndex; i < this.queue.length; i += 1) {
+					if (!startContainer && this.queue[i].endIndex > index) {
+						startContainer = this.queue[i].node;
+						startOffset = index - this.queue[i].startIndex;
+					}
+
+					if (
+						startContainer &&
+						this.queue[i].endIndex >= index + len
+					) {
+						endContainer = this.queue[i].node;
+						endOffset = index + len - this.queue[i].startIndex;
+						startQueueIndex = i;
+						break;
+					}
+				}
+
+				if (startContainer && endContainer) {
+					results.push({
+						startContainer,
+						startOffset,
+						endContainer,
+						endOffset
+					});
+				}
+
+				index += len;
+			}
+		} while (index !== -1);
+
+		return results.length === 0 ? null : results;
+	}
+}

package/src/plugins/search/helpers/wrap-ranges-texts-in-tmp-span.ts

@@ -0,0 +1,120 @@
+/*!
+ * 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 type { CanUndef, ICreate, ISelectionRange, Nullable } from 'jodit/types';
+import { Dom } from 'jodit/core/dom';
+import { $$ } from 'jodit/src/core/helpers/utils/selector';
+
+const TMP_ATTR = 'jd-tmp-selection';
+
+export function wrapRangesTextsInTmpSpan(
+	rng: ISelectionRange,
+	restRanges: ISelectionRange[],
+	ci: ICreate,
+	root: HTMLElement
+): void {
+	if (
+		rng.startContainer.nodeValue == null ||
+		rng.endContainer.nodeValue == null
+	) {
+		return;
+	}
+
+	const span = ci.element('span', {
+		[TMP_ATTR]: true
+	});
+
+	const startText = rng.startContainer.nodeValue;
+
+	let diff = 0;
+	if (rng.startOffset !== 0) {
+		const text = ci.text(startText.substring(0, rng.startOffset));
+		rng.startContainer.nodeValue = startText.substring(rng.startOffset);
+		Dom.before(rng.startContainer, text);
+
+		if (rng.startContainer === rng.endContainer) {
+			diff = rng.startOffset;
+			rng.endOffset -= diff;
+		}
+
+		rng.startOffset = 0;
+	}
+
+	const endText = rng.endContainer.nodeValue;
+
+	if (rng.endOffset !== endText.length) {
+		const text = ci.text(endText.substring(rng.endOffset));
+		rng.endContainer.nodeValue = endText.substring(0, rng.endOffset);
+		Dom.after(rng.endContainer, text);
+
+		for (const range of restRanges) {
+			if (range.startContainer === rng.endContainer) {
+				range.startContainer = text;
+				range.startOffset = range.startOffset - rng.endOffset - diff;
+
+				if (range.endContainer === rng.endContainer) {
+					range.endContainer = text;
+					range.endOffset = range.endOffset - rng.endOffset - diff;
+				}
+			} else {
+				break;
+			}
+		}
+
+		rng.endOffset = rng.endContainer.nodeValue.length;
+	}
+
+	let next: CanUndef<Nullable<Node>> = rng.startContainer;
+
+	do {
+		if (!next) {
+			break;
+		}
+
+		if (Dom.isText(next) && !isSelectionWrapper(next.parentNode)) {
+			Dom.wrap(next, span.cloneNode() as HTMLElement, ci);
+		}
+
+		if (next === rng.endContainer) {
+			break;
+		}
+
+		let step: Nullable<Node> = next.firstChild || next.nextSibling;
+
+		if (!step) {
+			while (next && !next.nextSibling && next !== root) {
+				next = next.parentNode;
+			}
+
+			step = next?.nextSibling as Nullable<Node>;
+		}
+
+		next = step;
+	} while (next && next !== root);
+}
+
+export function getSelectionWrappers(root: HTMLElement): HTMLElement[] {
+	return $$(`[${TMP_ATTR}]`, root);
+}
+
+export function clearSelectionWrappers(root: HTMLElement): void {
+	getSelectionWrappers(root).forEach(span => Dom.unwrap(span));
+}
+
+export function clearSelectionWrappersFromHTML(root: string): string {
+	return root.replace(
+		RegExp(`<span[^>]+${TMP_ATTR}[^>]+>(.*?)</span>`, 'g'),
+		'$1'
+	);
+}
+
+export function isSelectionWrapper(node: unknown): boolean {
+	return Dom.isElement(node) && node.hasAttribute(TMP_ATTR);
+}