feat(selection): implement wrapInTag method to wrap selected fragments in a <font> element

Author: eric-mallac

CHANGELOG.md

@@ -9,7 +9,7 @@
 > - :house: [Internal]
 > - :nail_care: [Polish]
 
-## Unreleased
+## 4.13.1
 
 #### :rocket: New Feature
 
@@ -19,6 +19,10 @@
 
 - **Storage**: `LocalStorageProvider.delete(key)` removed the entire storage scope (every key sharing the same `rootKey`/suffix) instead of just the requested key — `delete` behaved identically to `clear`. It now reads the JSON blob, drops only that key and writes the rest back. Affects `Jodit.modules.Storage`/`buffer`/`storage` and the `@persistent` decorator when a single key is deleted.
 
+#### :house: Internal
+
+- **Selection**: `Select.wrapInTagGen` no longer relies on the browser's `document.execCommand('fontSize', false, '7')` to split a non-collapsed selection into wrappable inline fragments. It now uses a pure-DOM implementation that splits the boundary text nodes and wraps every contiguous run of selected inline content (grouped per block) into a `<font>` element. This removes one more dependency on the deprecated `execCommand` API and makes selection wrapping (`commitStyle`, bold/italic/font/color, `wrapInTag`) behave identically across Chrome and Firefox. No public API or output change; covered by new `wrapInTag` tests.
+
 ## 4.12.42
 
 #### :bug: Bug Fix

src/core/selection/selection.test.js

@@ -1032,4 +1032,97 @@ describe('Selection Module Tests', function () {
 			});
 		});
 	});
+
+	describe('wrapInTag', () => {
+		// Directly exercises the pure-DOM selection fragmentation that
+		// replaced the native `execCommand('fontsize', false, '7')` trick.
+		// `<span>` is used as a neutral, easy-to-read wrapper tag.
+		[
+			{
+				name: 'Whole text of a block',
+				from: '<p>|test|</p>',
+				to: '<p><span>test</span></p>'
+			},
+			{
+				name: 'Middle of a single text node (split at both ends)',
+				from: '<p>a|bc|d</p>',
+				to: '<p>a<span>bc</span>d</p>'
+			},
+			{
+				name: 'From the start of a text node',
+				from: '<p>|ab|cd</p>',
+				to: '<p><span>ab</span>cd</p>'
+			},
+			{
+				name: 'To the end of a text node',
+				from: '<p>ab|cd|</p>',
+				to: '<p>ab<span>cd</span></p>'
+			},
+			{
+				name: 'Partially inside a nested inline element',
+				from: '<p>a<strong>b|c|d</strong>e</p>',
+				to: '<p>a<strong>b<span>c</span>d</strong>e</p>'
+			},
+			{
+				name: 'Around a whole inline element with text on both sides',
+				from: '<p>a|b<strong>cd</strong>e|f</p>',
+				to: '<p>a<span>b<strong>cd</strong>e</span>f</p>'
+			},
+			{
+				name: 'Across two sibling inline elements (one run per parent)',
+				from: '<p><em>a|b</em><strong>c|d</strong></p>',
+				to: '<p><em>a<span>b</span></em><strong><span>c</span>d</strong></p>'
+			},
+			{
+				name: 'Two fully selected blocks (one wrapper per block)',
+				from: '<p>|one</p><p>two|</p>',
+				to: '<p><span>one</span></p><p><span>two</span></p>'
+			},
+			{
+				name: 'Selection crossing a block boundary',
+				from: '<p>on|e</p><p>t|wo</p>',
+				to: '<p>on<span>e</span></p><p><span>t</span>wo</p>'
+			}
+		].forEach(({ name, from, to }) => {
+			describe(name, () => {
+				it('Should wrap every selected fragment in the tag', () => {
+					const editor = getJodit();
+					editor.value = from;
+					setCursorToChar(editor);
+
+					editor.s.wrapInTag('span');
+
+					expect(sortAttributes(editor.value)).equals(to);
+				});
+			});
+		});
+
+		describe('Callback form', () => {
+			it('Should call the callback for every selected fragment', () => {
+				const editor = getJodit();
+				editor.value = '<p>on|e</p><p>t|wo</p>';
+				setCursorToChar(editor);
+
+				const chunks = [];
+				editor.s.wrapInTag(font => {
+					chunks.push(font.textContent);
+				});
+
+				expect(chunks).deep.equals(['e', 't']);
+			});
+		});
+
+		describe('Return value', () => {
+			it('Should return the created wrapper elements', () => {
+				const editor = getJodit();
+				editor.value = '<p>|one</p><p>two|</p>';
+				setCursorToChar(editor);
+
+				const result = editor.s.wrapInTag('span');
+
+				expect(result.length).equals(2);
+				expect(result.every(el => el.tagName === 'SPAN')).is.true;
+			});
+		});
+	});
 });

src/core/selection/selection.ts

@@ -1233,6 +1233,190 @@ export class Selection implements ISelect {
 		return '';
 	}
 
+	/**
+	 * Splits the boundaries of the current selection and wraps every
+	 * contiguous run of selected inline content (grouped by block) into a
+	 * `<font>` element, returning those wrappers in document order.
+	 *
+	 * This is a pure-DOM replacement for the old
+	 * `nativeExecCommand('fontsize', false, '7')` trick which relied on the
+	 * browser to split the selection into `<font size="7">` fragments.
+	 */
+	private __wrapSelectionFragments(): HTMLElement[] {
+		const range = this.range;
+
+		this.__splitSelectionBoundaries(range);
+
+		let root: Nullable<Node> = range.commonAncestorContainer;
+
+		if (Dom.isText(root)) {
+			root = root.parentNode;
+		}
+
+		if (!root) {
+			return [];
+		}
+
+		return this.__wrapSelectionRuns(
+			this.__collectContainedNodes(root, range)
+		);
+	}
+
+	/**
+	 * Splits the text nodes at both ends of the range so that its boundaries
+	 * always fall between nodes. Afterwards every node inside the range is
+	 * fully (not partially) selected.
+	 */
+	private __splitSelectionBoundaries(range: Range): void {
+		let { startContainer, endContainer } = range;
+		let { startOffset, endOffset } = range;
+
+		if (
+			Dom.isText(endContainer) &&
+			endOffset > 0 &&
+			endOffset < (endContainer.nodeValue?.length ?? 0)
+		) {
+			endContainer.splitText(endOffset);
+			endOffset = endContainer.nodeValue?.length ?? endOffset;
+		}
+
+		if (
+			Dom.isText(startContainer) &&
+			startOffset > 0 &&
+			startOffset < (startContainer.nodeValue?.length ?? 0)
+		) {
+			const middle = startContainer.splitText(startOffset);
+
+			// Selection located inside a single text node - the tail we just
+			// cut off is the actual selected fragment.
+			if (startContainer === endContainer) {
+				endContainer = middle;
+				endOffset = middle.nodeValue?.length ?? 0;
+			}
+
+			startContainer = middle;
+			startOffset = 0;
+		}
+
+		range.setStart(startContainer, startOffset);
+		range.setEnd(endContainer, endOffset);
+
+		// Normalize text-edge boundaries (e.g. `(text, 0)` or `(text, length)`)
+		// to the element level so that containment checks based on
+		// `selectNode()` treat a fully selected text node as contained.
+		this.__normalizeRangeBoundary(range, true);
+		this.__normalizeRangeBoundary(range, false);
+	}
+
+	private __normalizeRangeBoundary(range: Range, atStart: boolean): void {
+		const container = atStart ? range.startContainer : range.endContainer;
+
+		if (!Dom.isText(container)) {
+			return;
+		}
+
+		const offset = atStart ? range.startOffset : range.endOffset;
+		const length = container.nodeValue?.length ?? 0;
+
+		if (offset === 0) {
+			atStart
+				? range.setStartBefore(container)
+				: range.setEndBefore(container);
+		} else if (offset >= length) {
+			atStart
+				? range.setStartAfter(container)
+				: range.setEndAfter(container);
+		}
+	}
+
+	/**
+	 * Collects the highest-level nodes that are completely inside the range,
+	 * descending into nodes that are only partially selected.
+	 */
+	private __collectContainedNodes(root: Node, range: Range): Node[] {
+		const result: Node[] = [];
+
+		toArray(root.childNodes).forEach(child => {
+			if (this.__isFullyContained(range, child)) {
+				result.push(child);
+			} else if (child.childNodes.length && range.intersectsNode(child)) {
+				result.push(...this.__collectContainedNodes(child, range));
+			}
+		});
+
+		return result;
+	}
+
+	private __isFullyContained(range: Range, node: Node): boolean {
+		const nodeRange = this.createRange();
+		nodeRange.selectNode(node);
+
+		return (
+			range.compareBoundaryPoints(Range.START_TO_START, nodeRange) <= 0 &&
+			range.compareBoundaryPoints(Range.END_TO_END, nodeRange) >= 0
+		);
+	}
+
+	/**
+	 * Wraps every contiguous run of selected inline siblings into a `<font>`
+	 * element. Block-level nodes are never wrapped themselves - their inline
+	 * content is wrapped instead, keeping every `<font>` inside a single block.
+	 */
+	private __wrapSelectionRuns(nodes: Node[]): HTMLElement[] {
+		const fonts: HTMLElement[] = [];
+		let run: Node[] = [];
+
+		const flush = (): void => {
+			if (run.length) {
+				fonts.push(this.__wrapRunInFont(run));
+				run = [];
+			}
+		};
+
+		nodes.forEach(node => {
+			if (Dom.isElement(node) && this.__isOrContainsBlock(node)) {
+				flush();
+				fonts.push(
+					...this.__wrapSelectionRuns(toArray(node.childNodes))
+				);
+			} else {
+				if (
+					run.length &&
+					run[run.length - 1].parentNode !== node.parentNode
+				) {
+					flush();
+				}
+
+				run.push(node);
+			}
+		});
+
+		flush();
+
+		return fonts;
+	}
+
+	private __isOrContainsBlock(node: Node): boolean {
+		if (Dom.isBlock(node)) {
+			return true;
+		}
+
+		return toArray(node.childNodes).some(child =>
+			this.__isOrContainsBlock(child)
+		);
+	}
+
+	private __wrapRunInFont(run: Node[]): HTMLElement {
+		const font = this.j.createInside.element('font');
+		const [first] = run;
+
+		first.parentNode?.insertBefore(font, first);
+
+		run.forEach(node => font.appendChild(node));
+
+		return font;
+	}
+
 	/**
 	 * Wrap all selected fragments inside Tag or apply some callback
 	 */
@@ -1255,24 +1439,7 @@ export class Selection implements ISelect {
 			return;
 		}
 
-		// fix issue https://github.com/xdan/jodit/issues/65
-		$$('*[style*=font-size]', this.area).forEach(elm => {
-			attr(elm, 'data-font-size', elm.style.fontSize.toString());
-			elm.style.removeProperty('font-size');
-		});
-
-		this.j.nativeExecCommand('fontsize', false, '7');
-
-		$$('*[data-font-size]', this.area).forEach(elm => {
-			const fontSize = attr(elm, 'data-font-size');
-
-			if (fontSize) {
-				elm.style.fontSize = fontSize;
-				attr(elm, 'data-font-size', null);
-			}
-		});
-
-		const elms = $$('font[size="7"]', this.area);
+		const elms = this.__wrapSelectionFragments();
 
 		for (const font of elms) {
 			const { firstChild, lastChild } = font;