Fix seelection on void element (#2551)

microsoft · Apr 2, 2024 · ef49253 · ef49253
1 parent 9460c0c
commit ef49253
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 6 deletions.
diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts b/packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts
@@ -1,6 +1,31 @@
 import { isNodeOfType } from 'roosterjs-content-model-dom';
 import type { DOMInsertPoint } from 'roosterjs-content-model-types';
 
+/**
+ * HTML void elements
+ * Per https://www.w3.org/TR/html/syntax.html#syntax-elements, cannot have child nodes
+ * This regex is used when we move focus to very begin of editor. We should avoid putting focus inside
+ * void elements so users don't accidentally create child nodes in them
+ */
+const HTML_VOID_ELEMENTS = [
+    'AREA',
+    'BASE',
+    'BR',
+    'COL',
+    'COMMAND',
+    'EMBED',
+    'HR',
+    'IMG',
+    'INPUT',
+    'KEYGEN',
+    'LINK',
+    'META',
+    'PARAM',
+    'SOURCE',
+    'TRACK',
+    'WBR',
+];
+
 /**
  * @internal
  */
@@ -17,8 +42,17 @@ export function normalizePos(node: Node, offset: number): DOMInsertPoint {
                 ? node.nodeValue?.length ?? 0
                 : node.childNodes.length;
         } else {
-            node = node.childNodes[offset];
-            offset = 0;
+            const nextNode = node.childNodes[offset];
+
+            if (
+                isNodeOfType(nextNode, 'ELEMENT_NODE') &&
+                HTML_VOID_ELEMENTS.indexOf(nextNode.tagName) >= 0
+            ) {
+                break;
+            } else {
+                node = node.childNodes[offset];
+                offset = 0;
+            }
         }
     }
 

diff --git a/packages/roosterjs-content-model-core/test/corePlugin/selection/normalizePosTest.ts b/packages/roosterjs-content-model-core/test/corePlugin/selection/normalizePosTest.ts
@@ -99,4 +99,17 @@ describe('normalizePos()', () => {
     it('VOID - With offset out of range', () => {
         runTest('test1<img id=id1>test3', () => document.getElementById('id1'), 2, '', 0);
     });
+    it('VOID - from parent', () => {
+        const div = document.createElement('div');
+        const span = document.createElement('span');
+        const br = document.createElement('br');
+
+        span.appendChild(br);
+        div.appendChild(span);
+
+        const { node, offset } = normalizePos(div, 0);
+
+        expect(node).toBe(span);
+        expect(offset).toBe(0);
+    });
 });
diff --git a/packages/roosterjs-content-model-plugins/test/edit/keyboardTabTest.ts b/packages/roosterjs-content-model-plugins/test/edit/keyboardTabTest.ts
@@ -680,6 +680,8 @@ describe('keyboardTab', () => {
                             format: {},
                             cells: [
                                 {
+                                    spanLeft: false,
+                                    spanAbove: false,
                                     blockGroupType: 'TableCell',
                                     blocks: [
                                         {

diff --git a/packages/roosterjs-content-model-plugins/test/edit/tabUtils/handleTabOnTableCellTest.ts b/packages/roosterjs-content-model-plugins/test/edit/tabUtils/handleTabOnTableCellTest.ts
@@ -4,6 +4,7 @@ import {
     ContentModelDocument,
     ContentModelTableCell,
     ContentModelTable,
+    ContentModelParagraph,
 } from 'roosterjs-content-model-types';
 
 describe('handleTabOnTableCell', () => {
@@ -252,9 +253,9 @@ describe('handleTabOnTableCell', () => {
             lastRow: 3,
             lastColumn: 0,
         });
-        expect(table.rows[3]?.cells[0]?.blocks[0]?.segments[0]?.segmentType).toEqual(
-            'SelectionMarker'
-        );
+        expect(
+            (table.rows[3]?.cells[0]?.blocks[0] as ContentModelParagraph)?.segments[0]?.segmentType
+        ).toEqual('SelectionMarker');
     });
 
     it('Not create new row - Shift+Tab', () => {