Fixed #451

xdan · Aug 2, 2020 · 1598ce6 · 1598ce6
1 parent 2bfb7ad
commit 1598ce6
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 78 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,4 +1,7 @@
 # Changelog
+## 3.4.16
+* Fixed https://github.com/xdan/jodit/issues/451
+
 ## 3.4.15
 * Fixed https://github.com/xdan/jodit/issues/441
 * Fixed https://github.com/xdan/jodit/issues/437

diff --git a/src/core/selection/select.ts b/src/core/selection/select.ts
@@ -643,7 +643,7 @@ export class Select {
 			fragment.appendChild(node.firstChild);
 		}
 
-		this.insertNode(fragment, false);
+		this.insertNode(fragment, false, false);
 
 		if (lastChild) {
 			this.setCursorAfter(lastChild);
@@ -673,6 +673,10 @@ export class Select {
 
 			this.setCursorAfter(lastChild);
 		}
+
+		if (this.j.e) {
+			this.j.e.fire('synchro');
+		}
 	}
 
 	/**
@@ -1247,65 +1251,85 @@ export class Select {
 		const cursorOnTheRight = this.cursorOnTheRight(currentBox);
 		const cursorOnTheLeft = this.cursorOnTheLeft(currentBox);
 
-		let br: HTMLElement | null = null;
-
-		if (cursorOnTheRight || cursorOnTheLeft) {
-			br = this.j.createInside.element('br');
+		const br = this.j.createInside.element('br'),
+			prevFake = this.j.createInside.text(INVISIBLE_SPACE),
+			nextFake = prevFake.cloneNode();
 
-			range.insertNode(br);
-
-			const clearBR = (
-				start: Node,
-				getNext: (node: Node) => Node | null
-			) => {
-				let next = getNext(start);
-
-				while (next) {
-					const nextSib = getNext(next);
+		try {
+			if (cursorOnTheRight || cursorOnTheLeft) {
+				range.insertNode(br);
+
+				const clearBR = (
+					start: Node,
+					getNext: (node: Node) => Node | null
+				) => {
+					let next = getNext(start);
+
+					while (next) {
+						const nextSib = getNext(next);
+
+						if (
+							next &&
+							(Dom.isTag(next, 'br') || Dom.isEmptyTextNode(next))
+						) {
+							Dom.safeRemove(next);
+						} else {
+							break;
+						}
 
-					if (
-						next &&
-						(Dom.isTag(next, 'br') || Dom.isEmptyTextNode(next))
-					) {
-						Dom.safeRemove(next);
-					} else {
-						break;
+						next = nextSib;
 					}
+				};
 
-					next = nextSib;
-				}
-			};
+				clearBR(br, (n: Node) => n.nextSibling);
+				clearBR(br, (n: Node) => n.previousSibling);
 
-			clearBR(br, (n: Node) => n.nextSibling);
-			clearBR(br, (n: Node) => n.previousSibling);
+				Dom.after(br, nextFake);
+				Dom.before(br, prevFake);
 
-			if (cursorOnTheRight) {
-				leftRange.setEndBefore(br);
-				range.setEndBefore(br);
+				if (cursorOnTheRight) {
+					leftRange.setEndBefore(br);
+					range.setEndBefore(br);
+				} else {
+					leftRange.setEndAfter(br);
+					range.setEndAfter(br);
+				}
 			} else {
-				leftRange.setEndAfter(br);
-				range.setEndAfter(br);
+				leftRange.setEnd(range.startContainer, range.startOffset);
 			}
-		} else {
-			leftRange.setEnd(range.startContainer, range.startOffset);
-		}
 
-		const fragment = leftRange.extractContents();
+			const fragment = leftRange.extractContents();
 
-		if (currentBox.parentNode) {
-			try {
-				currentBox.parentNode.insertBefore(fragment, currentBox);
+			if (currentBox.parentNode) {
+				try {
+					currentBox.parentNode.insertBefore(fragment, currentBox);
 
-				if (cursorOnTheRight && br && br.parentNode) {
-					const range = this.createRange();
-					range.setStartBefore(br);
-					this.selectRange(range);
-				}
-			} catch (e) {
-				if (!isProd) {
-					throw e;
+					if (cursorOnTheRight && br?.parentNode) {
+						const range = this.createRange();
+						range.setStartBefore(br);
+						this.selectRange(range);
+					}
+				} catch (e) {
+					if (!isProd) {
+						throw e;
+					}
 				}
 			}
+
+			// After splitting some part can be empty
+			const fillFakeParent = (fake: Node) => {
+				if (
+					fake?.parentNode?.firstChild === fake?.parentNode?.lastChild
+				) {
+					fake?.parentNode?.appendChild(br.cloneNode());
+				}
+			};
+
+			fillFakeParent(prevFake);
+			fillFakeParent(nextFake);
+		} finally {
+			Dom.safeRemove(prevFake);
+			Dom.safeRemove(nextFake);
 		}
 
 		return currentBox.previousElementSibling;

diff --git a/src/plugins/keyboard/enter.ts b/src/plugins/keyboard/enter.ts
@@ -74,33 +74,33 @@ export class enter extends Plugin {
 				: (this.defaultTag as 'p' | 'div');
 		}
 
-		editor.e
-			.off('.enter')
-			.on('keydown.enter', (event: KeyboardEvent): false | void => {
-				if (event.key === consts.KEY_ENTER) {
-					/**
-					 * Fired on processing `Enter` key. If return some value, plugin `enter` will do nothing.
-					 * if return false - prevent default Enter behavior
-					 *
-					 * @event beforeEnter
-					 */
-					const beforeEnter = editor.e.fire('beforeEnter', event);
-
-					if (beforeEnter !== undefined) {
-						return beforeEnter;
-					}
-
-					if (!editor.s.isCollapsed()) {
-						editor.execCommand('Delete');
-					}
-
-					editor.s.focus();
-
-					this.onEnter(event);
-
-					return false;
+		editor.e.off('.enter').on('keydown.enter', (event: KeyboardEvent):
+			| false
+			| void => {
+			if (event.key === consts.KEY_ENTER) {
+				/**
+				 * Fired on processing `Enter` key. If return some value, plugin `enter` will do nothing.
+				 * if return false - prevent default Enter behavior
+				 *
+				 * @event beforeEnter
+				 */
+				const beforeEnter = editor.e.fire('beforeEnter', event);
+
+				if (beforeEnter !== undefined) {
+					return beforeEnter;
 				}
-			});
+
+				if (!editor.s.isCollapsed()) {
+					editor.execCommand('Delete');
+				}
+
+				editor.s.focus();
+
+				this.onEnter(event);
+
+				return false;
+			}
+		});
 	}
 
 	private onEnter(event: KeyboardEvent): false | void {
@@ -150,10 +150,7 @@ export class enter extends Plugin {
 		const cursorOnTheRight = sel.cursorOnTheRight(currentBox);
 		const cursorOnTheLeft = sel.cursorOnTheLeft(currentBox);
 
-		if (
-			(!canSplit || Dom.isEmpty(currentBox)) &&
-			(cursorOnTheRight || cursorOnTheLeft)
-		) {
+		if (!canSplit && (cursorOnTheRight || cursorOnTheLeft)) {
 			let fake: Nullable<Text> = null;
 
 			if (cursorOnTheRight) {

diff --git a/test/tests/acceptance/enterTest.js b/test/tests/acceptance/enterTest.js
@@ -986,12 +986,13 @@ describe('Enter behavior Jodit Editor Tests', function() {
 				it('Should add 2 P', function() {
 					const editor = getJodit();
 
-					editor.value = '<span style="color:red">test</span>';
+					editor.value = '<p><span style="color:red">test</span></p>';
 
 					editor.s.setCursorIn(
 						editor.editor.querySelector('span'),
 						false
 					);
+
 					simulateEvent('keydown', Jodit.KEY_ENTER, editor.editor);
 					simulateEvent('keydown', Jodit.KEY_ENTER, editor.editor);