jodit 3.19.4 → 3.20.2

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

@@ -16,3 +16,4 @@ export * from './has-previous-block';
 export * from './insert-paragraph';
 export * from './split-fragment';
 export * from './wrap-text';
+export * from './move-cursor-out-from-specal-tags';

package/src/plugins/enter/helpers/move-cursor-out-from-specal-tags.ts

@@ -0,0 +1,32 @@
+/*!
+ * 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/enter
+ */
+
+import type { IJodit, Nullable, HTMLTagNames } from 'jodit/types';
+import { Dom } from 'jodit/core/dom/dom';
+
+/**
+ * Checks if the cursor is on the edge of a special tag and exits if so
+ */
+export function moveCursorOutFromSpecialTags(
+	jodit: IJodit,
+	current: Nullable<Node>,
+	tags: HTMLTagNames[]
+): void {
+	const { s } = jodit;
+
+	const link = Dom.closest(current, tags, jodit.editor);
+	if (link) {
+		if (s.cursorOnTheRight(link)) {
+			s.setCursorAfter(link);
+		} else if (s.cursorOnTheLeft(link)) {
+			s.setCursorBefore(link);
+		}
+	}
+}

package/src/plugins/enter/helpers/split-fragment.ts

@@ -49,5 +49,6 @@ export function splitFragment(jodit: IJodit, currentBox: HTMLElement): void {
 	}
 
 	const newP = sel.splitSelection(currentBox);
+
 	scrollIntoViewIfNeeded(newP, jodit.editor, jodit.ed);
 }

package/src/plugins/fullsize/config.ts

@@ -67,7 +67,7 @@ Config.prototype.controls.fullsize = {
 		}
 	},
 
-	tooltip: 'Open editor in fullsize',
+	tooltip: 'Open in fullsize',
 
 	mode: consts.MODE_SOURCE + consts.MODE_WYSIWYG
 } as IControlType;

package/src/plugins/fullsize/fullsize.test.js

@@ -6,29 +6,94 @@
 
 describe('Fullsize plugin', function () {
 	describe('Toggle fullsize', function () {
-		it('Should resize all boxes to first state', function () {
+		it('Should resize all boxes to first state', () => {
 			const editor = getJodit({
 				history: {
 					timeout: 0
 				}
 			});
-			const chacksizes = ['container', 'workplace', 'editor'];
-			const sizes = chacksizes.map(function (key) {
-					return editor[key].offsetHeight;
-				}),
-				equal = function (a, b) {
-					return Math.abs(a - b) <= 2;
-				};
+
+			const checkSizes = ['container', 'workplace', 'editor'];
+
+			const initialSizes = checkSizes.map(
+					key => editor[key].offsetHeight
+				),
+				equal = (a, b) => Math.abs(a - b) <= 2;
 
 			editor.toggleFullSize(true);
-			chacksizes.map(function (key, index) {
-				expect(equal(editor[key].offsetHeight, sizes[index])).is.false;
+			checkSizes.map((key, index) => {
+				expect(equal(editor[key].offsetHeight, initialSizes[index])).is
+					.false;
 			});
 
 			editor.toggleFullSize(false);
 
-			chacksizes.map(function (key, index) {
-				expect(equal(editor[key].offsetHeight, sizes[index])).is.true;
+			checkSizes.map(function (key, index) {
+				expect(
+					equal(editor[key].offsetHeight, initialSizes[index])
+				).is.true;
+			});
+		});
+
+		function checkAllParents(editor, enabled) {
+			let parent = editor.container.parentNode;
+
+			while (parent && parent.nodeType === Node.ELEMENT_NODE) {
+				expect(
+					parent.classList.contains('jodit_fullsize-box_true')
+				).equals(enabled);
+				parent = parent.parentNode;
+			}
+		}
+
+		describe('globalFullSize', () => {
+			describe('set fullsize', () => {
+				it('Should set special class for all parents', () => {
+					const editor = getJodit();
+					editor.toggleFullSize(true);
+					checkAllParents(editor, true);
+				});
+			});
+
+			describe('remove fullsize', () => {
+				it('Should remove special class for all parents', () => {
+					const editor = getJodit();
+					editor.toggleFullSize(true);
+					editor.toggleFullSize(false);
+					checkAllParents(editor, false);
+				});
+
+				describe('Several fullsize blocks', () => {
+					it('Should remove special class for all parents only for latest block', () => {
+						const editor = getJodit();
+						editor.toggleFullSize(true);
+						const dialog = editor.dlg();
+						dialog.open('test');
+						dialog.toggleFullSize(true);
+
+						checkAllParents(editor, true);
+
+						dialog.toggleFullSize(false);
+						checkAllParents(editor, true);
+
+						editor.toggleFullSize(false);
+						checkAllParents(editor, false);
+					});
+				});
+
+				describe('Close dialog', () => {
+					it('Should work same way', () => {
+						const editor = getJodit();
+						const dialog = editor.dlg();
+						dialog.open('test');
+						dialog.toggleFullSize(true);
+
+						checkAllParents(dialog, true);
+
+						dialog.close();
+						checkAllParents(dialog, false);
+					});
+				});
 			});
 		});
 	});

package/src/plugins/fullsize/fullsize.ts

@@ -19,6 +19,8 @@ import { pluginSystem } from 'jodit/core/global';
 
 import './config';
 
+const fullsizeStack = new Set();
+
 /**
  * Process `toggleFullSize` event, and behavior - set/unset fullsize mode
  */
@@ -84,7 +86,16 @@ export function fullsize(editor: IViewWithToolbar): void {
 				css(editor.toolbar.container, 'width', 'auto');
 			}
 
-			if (editor.o.globalFullSize) {
+			enable
+				? fullsizeStack.add(container)
+				: fullsizeStack.delete(container);
+
+			const shouldToggleGlobalFullsize =
+				editor.o.globalFullSize &&
+				((fullsizeStack.size === 1 && enable) ||
+					(fullsizeStack.size === 0 && !enable));
+
+			if (shouldToggleGlobalFullsize) {
 				let node = container.parentNode as HTMLElement;
 
 				while (

package/src/plugins/iframe/config.ts

@@ -26,7 +26,7 @@ declare module 'jodit/config' {
 		iframeDefaultSrc: string;
 
 		/**
-		 * Base URL where the root directory for {@link Jodit.defaultOptions.iframe|iframe} mode
+		 * Base URL where the root directory for [[Config.iframe]] mode
 		 *
 		 * @example
 		 * ```javascript

package/src/plugins/image-properties/README.md

@@ -1,3 +1,10 @@
 # Image properties dialog
 
 After double-clicking on a photo in the editor, it opens the photo editing dialog.
+
+## Known Issues
+
+-   When opening an editor in a [mui](https://mui.com/material-ui/api/modal) dialog box and opening the image dialog box in it,
+    the mui dialog does not allow focus to be passed out. As a result, no field inside image properties can be focused.
+    Just enable the [disableEnforceFocus](https://mui.com/material-ui/api/modal/#props) option.
+    [Image properties - Input fields are not clickable ( react + material ui ) #879](https://github.com/xdan/jodit/issues/879)

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

@@ -185,7 +185,7 @@ export class imageProperties extends Plugin {
 			return;
 		}
 
-		this.dialog = this.j.dialog({
+		this.dialog = this.j.dlg({
 			minWidth: Math.min(400, screen.width),
 			minHeight: 590,
 			buttons: ['fullsize', 'dialog.close']

package/src/plugins/index.ts

@@ -67,7 +67,7 @@ import 'jodit/plugins/symbols/symbols';
 import 'jodit/plugins/tab/tab';
 import 'jodit/plugins/table/table';
 import 'jodit/plugins/table-keyboard-navigation/table-keyboard-navigation';
-import 'jodit/plugins/tooltip/tooltip';
 import 'jodit/plugins/video/video';
 import 'jodit/plugins/wrap-nodes/wrap-nodes';
+import 'jodit/plugins/dtd/dtd';
 import 'jodit/plugins/xpath/xpath';

package/src/plugins/limit/limit.test.js

@@ -23,6 +23,33 @@ describe('Limit plugin', function () {
 				}, 200);
 			});
 
+			describe('For special keys (ctrl + c etc.)', function () {
+				it('should allow press them', done => {
+					const editor = getJodit({
+						limitChars: 5
+					});
+
+					editor.value = '<p>11111</p>';
+					setCursorToChar(editor);
+
+					editor.e.on('keyup.limit', e => {
+						setTimeout(() => {
+							try {
+								expect(e.ctrlKey).is.true;
+								expect(e.defaultPrevented).is.false;
+								done();
+							} catch (e) {
+								done(e);
+							}
+						});
+					});
+
+					simulateEvent('keyup', 'c', editor, opts => {
+						opts.ctrlKey = true;
+					});
+				});
+			});
+
 			describe('Stat plugin', function () {
 				it('should show chars count', function (done) {
 					const editor = getJodit({

package/src/plugins/limit/limit.ts

@@ -33,7 +33,6 @@ export class limit extends Plugin {
 
 		if (jodit && (limitWords || limitChars)) {
 			let snapshot: SnapshotType | null = null;
-
 			jodit.e
 				.off('.limit')
 				.on('beforePaste.limit', () => {
@@ -60,7 +59,10 @@ export class limit extends Plugin {
 		event: KeyboardEvent | null = null,
 		inputText: string = ''
 	): boolean {
-		if (event && COMMAND_KEYS.includes(event.key)) {
+		if (
+			event &&
+			(COMMAND_KEYS.includes(event.key) || event.ctrlKey || event.metaKey)
+		) {
 			return false;
 		}
 

package/src/plugins/line-height/line-height.svg

@@ -1,4 +1,4 @@
-<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 	<path
 		d="M5.09668 6.99707H7.17358L4.17358 3.99707L1.17358 6.99707H3.09668V17.0031H1.15881L4.15881 20.0031L7.15881 17.0031H5.09668V6.99707Z"/>
 	<path d="M22.8412 7H8.84119V5H22.8412V7Z"/>

package/src/plugins/link/README.md

@@ -61,4 +61,9 @@ Jodit.make('#editor', {
 });
 ```
 
+## Known Issues
 
+-   When opening an editor in a [mui](https://mui.com/material-ui/api/modal) dialog box and opening the link popup in it,
+    the mui dialog does not allow focus to be passed out. As a result, no field inside form can be focused.
+    Just enable the [disableEnforceFocus](https://mui.com/material-ui/api/modal/#props) option.
+    [Image properties - Input fields are not clickable ( react + material ui ) #879](https://github.com/xdan/jodit/issues/879)

package/src/plugins/link/link.test.js

@@ -540,7 +540,8 @@ describe('Link plugin', function () {
 						}
 					});
 
-					editor.value = '';
+					editor.value = '<p>|<br></p>';
+					setCursorToChar(editor);
 
 					clickButton('link', editor);
 
@@ -570,13 +571,13 @@ describe('Link plugin', function () {
 
 					url.focus();
 					url.value = 'tests/artio.jpg';
-					simulateEvent('submit', 0, list.querySelector('form'));
+					simulateEvent('submit', list.querySelector('form'));
 
 					expect(sortAttributes(editor.value)).equals(
 						'<p><a href="tests/artio.jpg">123</a></p>'
 					);
 
-					simulateEvent('mousedown', 0, editor.editor);
+					simulateEvent('mousedown', editor.editor);
 
 					expect(list.parentNode).is.null;
 				});
@@ -584,22 +585,20 @@ describe('Link plugin', function () {
 				it('Should fire change event', function () {
 					let change = 0;
 
-					const editor = getJodit({
-						events: {
-							change: function () {
-								change += 1;
-							}
-						}
-					});
+					const editor = getJodit();
 
-					editor.value = '';
+					editor.value = '<p>|<br></p>';
+					setCursorToChar(editor);
+					editor.events.on('change', function () {
+						change += 1;
+					});
 
 					clickButton('link', editor);
 
 					const list = getOpenedPopup(editor);
 					const url = list.querySelector('input[ref=url_input]');
 					url.value = 'tests/artio.jpg';
-					simulateEvent('submit', 0, list.querySelector('form'));
+					simulateEvent('submit', list.querySelector('form'));
 
 					expect(sortAttributes(editor.value)).equals(
 						'<p><a href="tests/artio.jpg">tests/artio.jpg</a></p>'

package/src/plugins/link/link.ts

@@ -53,7 +53,7 @@ export class link extends Plugin {
 
 		jodit.registerCommand('openLinkDialog', {
 			exec: () => {
-				const dialog = jodit.dialog({
+				const dialog = jodit.dlg({
 					resizable: false
 				});
 

package/src/plugins/mobile/mobile.ts

@@ -77,7 +77,7 @@ export function mobile(editor: IJodit): void {
 					).offsetWidth;
 
 					const newStore = ((): ReturnType<typeof splitArray> => {
-						if (width >= editor.o.sizeLG) {
+						if (editor.isFullSize || width >= editor.o.sizeLG) {
 							return splitArray(editor.o.buttons);
 						}
 

package/src/plugins/ordered-list/ordered-list.test.js

@@ -22,26 +22,15 @@ describe('Test orderedList plugin', function () {
 
 				it('If press Enter inside <li> in the end it should create new <li> and cursor must be in it', function () {
 					const editor = getJodit();
-					editor.value = '<ul><li>test</li></ul>';
-
-					const sel = editor.s.sel,
-						range = editor.s.createRange();
-
-					range.setStart(
-						editor.editor.firstChild.firstChild.firstChild,
-						4
-					);
-					range.collapse(true);
-
-					sel.removeAllRanges();
-					sel.addRange(range);
+					editor.value = '<ul><li>test|</li></ul>';
+					setCursorToChar(editor);
 
 					simulateEvent('keydown', Jodit.KEY_ENTER, editor.editor);
 
 					editor.s.insertNode(editor.createInside.text(' a '));
 
 					expect(editor.value).equals(
-						'<ul><li>test</li><li> a <br></li></ul>'
+						'<ul><li>test</li><li> a </li></ul>'
 					);
 				});
 

package/src/plugins/paste/config.ts

@@ -43,11 +43,6 @@ declare module 'jodit/config' {
 		 */
 		nl2brInPlainText: boolean;
 
-		/**
-		 * Draggable elements
-		 */
-		draggableTags: string | string[];
-
 		/**
 		 * Options when inserting HTML string
 		 */
@@ -68,8 +63,6 @@ Config.prototype.memorizeChoiceWhenPasteFragment = false;
 
 Config.prototype.nl2brInPlainText = true;
 
-Config.prototype.draggableTags = ['img', 'jodit-media', 'jodit'];
-
 const psKey = 'pasteStorage';
 
 Config.prototype.controls.paste = {

package/src/plugins/paste/paste.test.js

@@ -1050,7 +1050,7 @@ describe('Test paste plugin', () => {
 				};
 			};
 
-			simulateEvent('paste', 0, editor.editor, emulatePasteEvent);
+			simulateEvent('paste', editor.editor, emulatePasteEvent);
 
 			expect(editor.value).equals('<p>test</p>');
 
@@ -1077,7 +1077,7 @@ describe('Test paste plugin', () => {
 					});
 
 					expect(editor.value).equals(
-						'<p>test</p><br><p>test</p><br><p>test</p>'
+						'<p>test<br>test<br>test<br></p>'
 					);
 				});
 			});
@@ -1255,7 +1255,7 @@ describe('Test paste plugin', () => {
 				simulateEvent('paste', editor.editor, emulatePasteEvent);
 
 				expect(editor.value).equals(
-					'<p>test</p><br><p>test</p><br><p>test</p><br><p>test</p><br><p>test</p><br>'
+					'<p>test<br>test<br>test<br>test<br>test<br><br></p>'
 				);
 			});
 		});

package/src/plugins/paste-storage/paste-storage.ts

@@ -144,7 +144,7 @@ export class pasteStorage extends Plugin {
 	};
 
 	private createDialog(): void {
-		this.dialog = this.j.dialog();
+		this.dialog = this.j.dlg();
 
 		const pasteButton = Button(this.j, 'paste', 'Paste', 'primary');
 

package/src/plugins/preview/preview.ts

@@ -33,7 +33,7 @@ export function preview(editor: IJodit): void {
 	editor.registerCommand(
 		'preview',
 		(_: any, _1: any, defaultValue: string) => {
-			const dialog = editor.dialog();
+			const dialog = editor.dlg();
 
 			dialog
 				.setSize(1024, 600)

package/src/plugins/search/search.ts

@@ -144,7 +144,7 @@ export class search extends Plugin {
 
 				const textNode = this.j.createInside.text(this.ui.replace);
 
-				rng.insertNode(textNode);
+				Dom.safeInsertNode(rng, textNode);
 				this.j.s.select(textNode);
 				this.tryScrollToElement(textNode);
 				this.cache = {};

package/src/plugins/select/config.ts

@@ -27,5 +27,5 @@ declare module 'jodit/config' {
 }
 
 Config.prototype.select = {
-	normalizeSelectionBeforeCutAndCopy: true
+	normalizeSelectionBeforeCutAndCopy: false
 };

package/src/plugins/spellcheck/config.ts

@@ -16,7 +16,7 @@ declare module 'jodit/config' {
 	interface Config {
 		/**
 		 * Options specifies whether the editor is to have its spelling and grammar checked or not
-		 * @see {@link http://www.w3schools.com/tags/att_global_spellcheck.asp}
+		 * @see http://www.w3schools.com/tags/att_global_spellcheck.asp
 		 */
 		spellcheck: boolean;
 	}

package/src/plugins/symbols/symbols.test.js

@@ -214,7 +214,8 @@ describe('Symbols plugin', function () {
 					buttons: 'symbols'
 				});
 
-				editor.value = '';
+				editor.value = '<p>test|</p>';
+				setCursorToChar(editor);
 
 				const btn = getButton('symbols', editor);
 
@@ -227,7 +228,7 @@ describe('Symbols plugin', function () {
 
 				simulateEvent('keydown', Jodit.KEY_ENTER, currentActive);
 
-				expect(editor.value).equals('<p>&amp;</p>');
+				expect(editor.value).equals('<p>test&amp;</p>');
 
 				simulateEvent('click', btn); //  close previous
 				simulateEvent('click', btn);
@@ -237,9 +238,9 @@ describe('Symbols plugin', function () {
 
 				const currentActive2 = dialog.getElementsByTagName('a')[125];
 
-				simulateEvent('mousedown', 0, currentActive2);
+				simulateEvent('mousedown', currentActive2);
 
-				expect(editor.value).equals('<p>&amp;½</p>');
+				expect(editor.value).equals('<p>test&amp;½</p>');
 			});
 		});
 	});

package/src/plugins/table/config.ts

@@ -180,22 +180,6 @@ Config.prototype.controls.table = {
 					tbody.appendChild(tr);
 				}
 
-				const crnt = editor.s.current();
-
-				if (crnt && editor.s.isCollapsed()) {
-					const block = Dom.closest(crnt, Dom.isBlock, editor.editor);
-
-					if (
-						block &&
-						block !== editor.editor &&
-						!block.nodeName.match(
-							/^TD|TH|TBODY|TABLE|THEADER|TFOOTER$/
-						)
-					) {
-						editor.s.setCursorAfter(block);
-					}
-				}
-
 				$$('input[type=checkbox]:checked', options).forEach(
 					(input: HTMLElement) => {
 						(input as HTMLInputElement).value
@@ -206,7 +190,10 @@ Config.prototype.controls.table = {
 					}
 				);
 
-				editor.s.insertNode(crt.text('\n'));
+				if (editor.editor.firstChild) {
+					editor.s.insertNode(crt.text('\n'), false, false);
+				}
+
 				editor.s.insertNode(table, false);
 
 				if (first_td) {

package/src/plugins/table/table.test.js

@@ -15,7 +15,7 @@ describe('Test table plugin', () => {
 				popup.querySelector('span[data-index="6"]')
 			);
 			expect(sortAttributes(editor.value)).eq(
-				'\n<table style="border-collapse:collapse;width:100%"><tbody>\n<tr>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td></tr></tbody></table>'
+				'<table style="border-collapse:collapse;width:100%"><tbody>\n<tr>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td>\n\t<td style="width:14.28%"><br></td></tr></tbody></table>'
 			);
 		});
 	});
@@ -36,7 +36,7 @@ describe('Test table plugin', () => {
 				popup.querySelector('span[data-index="2"]')
 			);
 			expect(sortAttributes(editor.value)).eq(
-				'\n<table style="border-collapse:collapse;width:100%"><tbody>\n<tr>\n\t<td style="color:red;width:33.33%"><br></td>\n\t<td style="color:red;width:33.33%"><br></td>\n\t<td style="color:red;width:33.33%"><br></td></tr></tbody></table>'
+				'<table style="border-collapse:collapse;width:100%"><tbody>\n<tr>\n\t<td style="color:red;width:33.33%"><br></td>\n\t<td style="color:red;width:33.33%"><br></td>\n\t<td style="color:red;width:33.33%"><br></td></tr></tbody></table>'
 			);
 		});
 	});

package/src/plugins/wrap-nodes/wrap-nodes.test.js

@@ -12,10 +12,39 @@ describe('WrapNodes plugin test', function () {
 			expect(editor.value).equals('<p>test</p>');
 		});
 
-		it('Should wrap alone LI element', function () {
-			const editor = getJodit();
-			editor.value = '<li>test</li>';
-			expect(editor.value).equals('<ul><li>test</li></ul>');
+		describe('Use Japanese keyboard', function () {
+			it('Should right wrap text', async function () {
+				const editor = getJodit({
+					language: 'ja'
+				});
+				editor.value = '';
+
+				editor.s.insertNode(editor.createInside.text('た'));
+				await editor.async.requestIdlePromise();
+				editor.s.insertNode(editor.createInside.text('て'));
+				await editor.async.requestIdlePromise();
+				editor.s.insertNode(editor.createInside.text('い'));
+				await editor.async.requestIdlePromise();
+
+				expect(editor.value).equals('<p>たてい</p>');
+			});
+		});
+
+		describe('Wrap leafs', function () {
+			it('Should wrap alone LI element', function () {
+				const editor = getJodit();
+				editor.value = '<li>test</li>';
+				expect(editor.value).equals('<ul><li>test</li></ul>');
+			});
+
+			it('Should wrap several LI elements', function () {
+				const editor = getJodit();
+				editor.value =
+					'<li>test</li><li>test</li><p>test</p>test<li>test</li> <li>test</li>s<li>test</li>';
+				expect(editor.value).equals(
+					'<ul><li>test</li><li>test</li></ul><p>test</p><p>test</p><ul><li>test</li><li>test</li></ul> <p>s</p><ul><li>test</li></ul>'
+				);
+			});
 		});
 
 		describe('For STYLE/SCRIPT elements', function () {
@@ -114,7 +143,7 @@ describe('WrapNodes plugin test', function () {
 			expect(editor.value).equals('<p>test</p>');
 			expect(editor.history.length).equals(1);
 			editor.history.undo();
-			expect(editor.value).equals('');
+			expect(editor.value).equals('<p><br></p>');
 		});
 	});