jodit 3.19.4 → 3.20.2

package/src/plugins/drag-and-drop-element/drag-and-drop-element.test.js

@@ -12,24 +12,25 @@ describe('Drag and drop element inside Editor', function () {
 			return item.split('|');
 		})
 		.forEach(function (events) {
+			const defaultValue =
+				'<p style="height: 24px;">1111</p>' +
+				'<p style="height: 24px;">2222</p>' +
+				'<p><img style="width: 100px;height: 100px;" src="tests/artio.jpg" alt=""/></p>' +
+				'<p style="height: 24px;">3333</p>' +
+				'<p style="height: 24px;">4444</p>';
 			describe(
 				events[0] + ' and move image inside the editor',
 				function () {
 					it('Should ' + events[1] + ' dom element', function () {
-						const editor = getJodit();
-						editor.value =
-							'<p>1111</p>' +
-							'<p>2222</p>' +
-							'<img style="width: 100px" src="https://xdsoft.net/jodit/files/artio.jpg" alt="">' +
-							'<p>3333</p>' +
-							'<p>4444</p>';
+						const editor = getJodit({ disablePlugins: ['sticky'] });
+						editor.value = defaultValue;
 
 						simulateEvent(
 							events[0],
 							editor.editor.getElementsByTagName('img')[0]
 						);
 
-						window.scrollTo(0, 1000000);
+						editor.editor.scrollIntoView();
 
 						const box = position(
 							editor.editor.querySelectorAll('p')[1],
@@ -47,35 +48,36 @@ describe('Drag and drop element inside Editor', function () {
 						});
 
 						const result =
-							'<p>1111</p>' +
-							'<p>22<img alt="" src="https://xdsoft.net/jodit/files/artio.jpg" style="width:100px">22</p>' +
-							'<p>3333</p>' +
-							'<p>4444</p>';
-
-						expect(
-							sortAttributes(editor.value).replace(/2+/g, '2')
-						).equals(result.replace(/2+/g, '2'));
+							'<p style="height:24px">1111</p>' +
+							'<p style="height:24px">22<img alt="" src="tests/artio.jpg" style="height:100px;width:100px">22</p>' +
+							'<p style="height:24px">3333</p>' +
+							'<p style="height:24px">4444</p>';
+
+						try {
+							expect(sortAttributes(editor.value)).equals(result);
+						} catch (e) {
+							drawElement(editor.editor);
+							throw e;
+						}
 					});
 				}
 			);
 
 			describe(events[1] + ' image inside anchor', function () {
 				it('Should ' + events[1] + ' anchor with image', function () {
-					const editor = getJodit();
+					const editor = getJodit({ disablePlugins: ['sticky'] });
 
-					editor.value =
-						'<p>1111</p>' +
-						'<p>2222</p>' +
-						'<a href="#test"><img style="width: 100px" src="https://xdsoft.net/jodit/files/artio.jpg" alt=""></a>' +
-						'<p>3333</p>' +
-						'<p>4444</p>';
+					editor.value = defaultValue.replace(
+						/(<img[^>]+>)/,
+						'<a href="#test">$1</a>'
+					);
 
 					simulateEvent(
 						events[0],
 						editor.editor.getElementsByTagName('img')[0]
 					);
 
-					window.scrollTo(0, 1000000);
+					editor.editor.scrollIntoView();
 
 					const box = position(
 						editor.editor.querySelectorAll('p')[1],
@@ -88,22 +90,22 @@ describe('Drag and drop element inside Editor', function () {
 					});
 
 					simulateEvent(events[2], editor.editor, function (options) {
-						options.clientX = box.left + 20;
+						options.clientX = box.left + 15;
 						options.clientY = box.top + 5;
 					});
 
-					expect(editor.value.replace(/2+/g, '2')).equals(
-						'<p>1111</p><p>22<a href="#test"><img style="width: 100px" src="https://xdsoft.net/jodit/files/artio.jpg" alt=""></a>22</p><p>3333</p><p>4444</p>'.replace(
-							/2+/g,
-							'2'
-						)
+					expect(sortAttributes(editor.value)).equals(
+						'<p style="height:24px">1111</p>' +
+							'<p style="height:24px">22<a href="#test"><img alt="" src="tests/artio.jpg" style="height:100px;width:100px"></a>22</p>' +
+							'<p style="height:24px">3333</p>' +
+							'<p style="height:24px">4444</p>'
 					);
 				});
 			});
 
 			describe(events[1] + ' image inside table cell', function () {
 				it('Should move only image', function () {
-					const editor = getJodit();
+					const editor = getJodit({ disablePlugins: ['sticky'] });
 
 					editor.value = `<table>
 								<tbody>
@@ -119,7 +121,7 @@ describe('Drag and drop element inside Editor', function () {
 						editor.editor.getElementsByTagName('img')[0]
 					);
 
-					window.scrollTo(0, 1000000);
+					editor.editor.scrollIntoView();
 
 					const box = position(
 						editor.editor.querySelectorAll('td')[1],
@@ -132,7 +134,7 @@ describe('Drag and drop element inside Editor', function () {
 					});
 
 					simulateEvent(events[2], editor.editor, function (options) {
-						options.clientX = box.left + 20;
+						options.clientX = box.left + 15;
 						options.clientY = box.top + 5;
 					});
 
@@ -147,6 +149,7 @@ describe('Drag and drop element inside Editor', function () {
 			describe('Disable dragging', function () {
 				it('Should not move image', function () {
 					const editor = getJodit({
+						disablePlugins: ['sticky'],
 						draggableTags: []
 					});
 
@@ -175,7 +178,7 @@ describe('Drag and drop element inside Editor', function () {
 					});
 
 					simulateEvent(events[2], editor.editor, function (options) {
-						options.clientX = box.left + 20;
+						options.clientX = box.left + 15;
 						options.clientY = box.top + 5;
 					});
 

package/src/plugins/dtd/README.md

@@ -0,0 +1,52 @@
+# Responsible for HTML compliance with Document Type Definition standards
+
+For example, a TABLE block element cannot be nested inside a P block element.
+
+```js
+Jodit.make('#editor', {
+	dtd: {
+    /**
+     * Remove extra br element inside block element after pasting
+     */
+    removeExtraBr: true,
+
+    /**
+     * Check when inserting a block element if it can be inside another block element (according `blockLimits`)
+     */
+    checkBlockNesting: true,
+
+    /**
+     * List of elements that contain other blocks
+     */
+    blockLimits: {
+      article: 1,
+      aside: 1,
+      audio: 1,
+      body: 1,
+      caption: 1,
+      details: 1,
+      dir: 1,
+      div: 1,
+      dl: 1,
+      fieldset: 1,
+      figcaption: 1,
+      figure: 1,
+      footer: 1,
+      form: 1,
+      header: 1,
+      hgroup: 1,
+      main: 1,
+      menu: 1,
+      nav: 1,
+      ol: 1,
+      section: 1,
+      table: 1,
+      td: 1,
+      th: 1,
+      tr: 1,
+      ul: 1,
+      video: 1
+    }
+  }
+});
+```

package/{types/plugins/tooltip/tooltip.d.ts → src/plugins/dtd/after-insert/index.ts}

@@ -3,9 +3,10 @@
  * 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
  */
+
 /**
- * [[include:plugins/tooltip/README.md]]
- * @packageDocumentation
- * @module plugins/tooltip
+ * @module plugins/dtd
+ * @internal
  */
-import './tooltip.less';
+
+export * from './remove-extra-br';

package/src/plugins/dtd/after-insert/remove-extra-br.ts

@@ -0,0 +1,39 @@
+/*!
+ * 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/dtd
+ * @internal
+ */
+
+import type { IJodit } from 'jodit/types';
+import { Dom } from 'jodit/core/dom/dom';
+
+/**
+ * Checks if there is a tag in the block element after the inserted br node,
+ * if so, removes it
+ * @internal
+ */
+export function removeExtraBr(jodit: IJodit, node: Node): void {
+	if (!jodit.o.dtd.removeExtraBr || Dom.isTag(node, 'br')) {
+		return;
+	}
+
+	const parent = Dom.furthest(node, Dom.isBlock, jodit.editor);
+
+	if (parent && !Dom.isTag(parent, ['table', 'pre', 'blockquote', 'code'])) {
+		const br = Dom.isTag(node, 'br')
+			? node
+			: Dom.findNotEmptySibling(node, false);
+
+		if (!Dom.isTag(br, 'br')) {
+			return;
+		}
+
+		jodit.s.setCursorBefore(br);
+		Dom.safeRemove(br);
+	}
+}

package/src/plugins/dtd/before-insert/check-block-nesting.ts

@@ -0,0 +1,40 @@
+/*!
+ * 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/dtd
+ * @internal
+ */
+
+import type { IJodit, Nullable } from 'jodit/types';
+import { Dom } from 'jodit/core/dom/dom';
+
+/**
+ * Checks whether the insertion of an element at the current location is allowed,
+ * if it is not allowed, it deletes an empty block element or moves the cursor after it
+ * @internal
+ */
+export function checkBlockNesting(jodit: IJodit, node: Nullable<Node>): void {
+	if (Dom.isFragment(node)) {
+		node = node.firstChild;
+	}
+
+	if (jodit.o.dtd.checkBlockNesting && Dom.isBlock(node)) {
+		const parent = Dom.furthest(
+			jodit.s.current(),
+			Dom.isBlock,
+			jodit.editor
+		);
+
+		if (parent && !jodit.o.dtd.blockLimits[parent.tagName.toLowerCase()]) {
+			jodit.s.setCursorAfter(parent);
+
+			if (Dom.isEmpty(parent)) {
+				Dom.safeRemove(parent);
+			}
+		}
+	}
+}

package/src/plugins/dtd/before-insert/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/dtd
+ * @internal
+ */
+
+export * from './check-block-nesting';

package/src/plugins/dtd/config.ts

@@ -0,0 +1,67 @@
+/*!
+ * 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/dtd
+ */
+
+import type { IDictionary } from 'jodit/types';
+import { Config } from 'jodit/config';
+
+declare module 'jodit/config' {
+	interface Config {
+		dtd: {
+			/**
+			 * Remove extra br element inside block element after pasting
+			 */
+			removeExtraBr: boolean;
+
+			/**
+			 * Check when inserting a block element if it can be inside another block element (according `blockLimits`)
+			 */
+			checkBlockNesting: boolean;
+
+			/**
+			 * List of elements that contain other blocks
+			 */
+			blockLimits: IDictionary<1>;
+		};
+	}
+}
+
+Config.prototype.dtd = {
+	removeExtraBr: true,
+	checkBlockNesting: true,
+	blockLimits: {
+		article: 1,
+		aside: 1,
+		audio: 1,
+		body: 1,
+		caption: 1,
+		details: 1,
+		dir: 1,
+		div: 1,
+		dl: 1,
+		fieldset: 1,
+		figcaption: 1,
+		figure: 1,
+		footer: 1,
+		form: 1,
+		header: 1,
+		hgroup: 1,
+		main: 1,
+		menu: 1,
+		nav: 1,
+		ol: 1,
+		section: 1,
+		table: 1,
+		td: 1,
+		th: 1,
+		tr: 1,
+		ul: 1,
+		video: 1
+	}
+};

package/src/plugins/dtd/dtd.test.js

@@ -0,0 +1,128 @@
+/*!
+ * 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
+ */
+
+describe('Test dtd plugin', () => {
+	describe('Before insertNode', () => {
+		describe('Enable dtd.checkBlockNesting', () => {
+			describe('Not empty parent block', () => {
+				it('should move new block after parent', () => {
+					const editor = getJodit();
+					editor.value = '<p>test|</p>';
+					setCursorToChar(editor);
+					editor.s.insertHTML(
+						'<table><tbody><tr><td>1</td></tr></tbody></table>'
+					);
+					expect(sortAttributes(editor.value)).eq(
+						'<p>test</p><table><tbody><tr><td>1</td></tr></tbody></table>'
+					);
+				});
+			});
+
+			describe('Empty parent block', () => {
+				it('should replace parent block', () => {
+					const editor = getJodit();
+					editor.value = '<p>|<br></p>';
+					setCursorToChar(editor);
+					editor.s.insertHTML(
+						'<table><tbody><tr><td>1</td></tr></tbody></table>'
+					);
+					expect(sortAttributes(editor.value)).eq(
+						'<table><tbody><tr><td>1</td></tr></tbody></table>'
+					);
+				});
+			});
+		});
+
+		describe('Disable dtd.checkBlockNesting', () => {
+			it('should not check nesting', () => {
+				const editor = getJodit({
+					dtd: {
+						checkBlockNesting: false
+					}
+				});
+				editor.value = '<p>test|</p>';
+				setCursorToChar(editor);
+				editor.s.insertHTML(
+					'<table><tbody><tr><td>1</td></tr></tbody></table>'
+				);
+				expect(sortAttributes(editor.value)).eq(
+					'<p>test<table><tbody><tr><td>1</td></tr></tbody></table></p>'
+				);
+			});
+		});
+
+		describe('Add to dtd.blockLimits', () => {
+			it('should not check nesting', () => {
+				const editor = getJodit({
+					dtd: {
+						blockLimits: {
+							p: 1
+						}
+					}
+				});
+				editor.value = '<p>test|</p>';
+				setCursorToChar(editor);
+				editor.s.insertHTML(
+					'<table><tbody><tr><td>1</td></tr></tbody></table>'
+				);
+				expect(sortAttributes(editor.value)).eq(
+					'<p>test<table><tbody><tr><td>1</td></tr></tbody></table></p>'
+				);
+			});
+		});
+	});
+
+	describe('After insertNode', () => {
+		describe('Enable dtd.removeExtraBr', () => {
+			[
+				[
+					'<p>test|<br></p>',
+					'<img src="tests/artio.jpg">',
+					'<p>test<img src="tests/artio.jpg">|</p>',
+					'<p>test<img src="tests/artio.jpg">|<br></p>'
+				],
+				[
+					'<p>|<br></p>',
+					'<img src="tests/artio.jpg">',
+					'<p><img src="tests/artio.jpg">|</p>',
+					'<p><img src="tests/artio.jpg">|<br></p>'
+				]
+			].forEach(([value, insert, result1, result2]) => {
+				describe(`for value ${value} and inserting ${insert}`, () => {
+					describe('Enable removeExtraBr', () => {
+						it('should move new block after parent', () => {
+							const editor = getJodit({
+								dtd: {
+									removeExtraBr: true
+								}
+							});
+							editor.value = value;
+							setCursorToChar(editor);
+							editor.s.insertHTML(insert);
+							replaceCursorToChar(editor);
+							expect(sortAttributes(editor.value)).eq(result1);
+						});
+					});
+
+					describe('Disable removeExtraBr', () => {
+						it('should move new block after parent', () => {
+							const editor = getJodit({
+								dtd: {
+									removeExtraBr: false
+								}
+							});
+							editor.value = value;
+							setCursorToChar(editor);
+							editor.s.insertHTML(insert);
+							replaceCursorToChar(editor);
+							expect(sortAttributes(editor.value)).eq(result2);
+						});
+					});
+				});
+			});
+		});
+	});
+});

package/src/plugins/dtd/dtd.ts

@@ -0,0 +1,48 @@
+/*!
+ * 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
+ */
+
+/**
+ * [[include:plugins/dtd/README.md]]
+ * @packageDocumentation
+ * @module plugins/dtd
+ */
+
+import type { IJodit } from 'jodit/types';
+import { Plugin } from 'jodit/core/plugin';
+import { pluginSystem } from 'jodit/core/global';
+import { watch } from 'jodit/core/decorators/watch/watch';
+
+import './config';
+import * as beforeInsertCases from './before-insert';
+import * as afterInsertCases from './after-insert';
+
+class dtd extends Plugin {
+	protected afterInit(jodit: IJodit): void {}
+
+	protected beforeDestruct(jodit: IJodit): void {}
+
+	@watch(':beforeInsertNode')
+	protected __onBeforeInsertNode(node: Node): void {
+		const casesKeys = Object.keys(beforeInsertCases) as Array<
+			keyof typeof beforeInsertCases
+		>;
+		casesKeys.forEach(key => {
+			beforeInsertCases[key](this.j, node);
+		});
+	}
+
+	@watch(':afterInsertNode')
+	protected __onAfterInsertNode(node: Node): void {
+		const casesKeys = Object.keys(afterInsertCases) as Array<
+			keyof typeof afterInsertCases
+		>;
+		casesKeys.forEach(key => {
+			afterInsertCases[key](this.j, node);
+		});
+	}
+}
+
+pluginSystem.add('dtd', dtd);