fix: caret jumped to line start when clicking right of a nested list item

Fixes #1296

Author: xdan

CHANGELOG.md

@@ -9,6 +9,12 @@
 > - :house: [Internal]
 > - :nail_care: [Polish]
 
+## 4.12.17
+
+#### :bug: Bug Fix
+
+- **Lists / Selection**: in a multi-level bulleted/numbered list, clicking to the right of an item that has a nested list put the caret at the **start** of the line instead of the end (a Blink/WebKit contenteditable quirk; Firefox was already correct). A `:click` handler now moves the caret to the end of the item's own text in that case. Fixes [#1296](https://github.com/xdan/jodit/issues/1296).
+
 ## 4.12.16
 
 #### :bug: Bug Fix

src/plugins/select/select.test.js

@@ -42,4 +42,38 @@ describe('Test select plugin', () => {
 			});
 		});
 	});
+
+	describe('Click to the right of a nested list item (#1296)', () => {
+		it('Should put the cursor at the end of the line, not the start', () => {
+			const editor = getJodit();
+			editor.value =
+				'<ul><li>Level one text<ul><li>Level two text</li></ul></li></ul>';
+
+			const li = editor.editor.querySelector('li');
+			const text = li.firstChild;
+
+			// Emulate Blink placing the caret at the start of the line on click
+			const range = editor.s.createRange();
+			range.setStart(text, 0);
+			range.collapse(true);
+			editor.s.selectRange(range);
+
+			const measure = editor.s.createRange();
+			measure.selectNodeContents(text);
+			const rect = measure.getBoundingClientRect();
+
+			simulateEvent('click', li, e => {
+				Object.assign(e, {
+					clientX: rect.right + 50,
+					clientY: (rect.top + rect.bottom) / 2
+				});
+			});
+
+			editor.s.insertHTML('X');
+
+			expect(sortAttributes(editor.value)).equals(
+				'<ul><li>Level one textX<ul><li>Level two text</li></ul></li></ul>'
+			);
+		});
+	});
 });

src/plugins/select/select.ts

@@ -114,6 +114,46 @@ export class select extends Plugin {
 		return false;
 	}
 
+	/**
+	 * Fix caret position when clicking to the right of a list item that has a
+	 * nested list. Blink/WebKit place the caret at the start of the line instead
+	 * of the end (#1296); move it to the end of the item's own text.
+	 */
+	@watch([':click'])
+	protected onClickRightOfNestedListItem(e: MouseEvent): void {
+		const { s } = this.j;
+		const range = s.range;
+
+		if (
+			!range.collapsed ||
+			range.startOffset !== 0 ||
+			!Dom.isText(range.startContainer)
+		) {
+			return;
+		}
+
+		const text = range.startContainer;
+		const li = text.parentNode;
+
+		// The text must be the direct content of a list item that has a nested
+		// list (the last level has no nested list and behaves correctly).
+		if (
+			!Dom.isTag(li, 'li') ||
+			!(li.querySelector('ul') || li.querySelector('ol'))
+		) {
+			return;
+		}
+
+		const measure = this.j.ed.createRange();
+		measure.selectNodeContents(text);
+		const rect = measure.getBoundingClientRect();
+
+		// Only when the click happened to the right of the text.
+		if (e.clientX > rect.right) {
+			s.setCursorAfter(text);
+		}
+	}
+
 	/**
 	 * Normalize selection after triple click
 	 */