[lexical][lexical-clipboard][lexical-playground][lexical-react][lexical-selection][lexical-table][lexical-utils] Simplify word, line and symbol deletion in Shadow DOM

Author: aleksandr-konovalov

packages/lexical/src/LexicalSelection.ts

@@ -1747,48 +1747,24 @@ export class RangeSelection implements BaseSelection {
         return;
       }
 
-      // Only handle if we're in a Shadow DOM context
+      // Special handling for Shadow DOM where browser selection might not work
       const editor = getActiveEditor();
       const rootElement = editor.getRootElement();
       if (rootElement && isShadowRoot(getShadowRootOrDocument(rootElement))) {
-        // Only handle collapsed selections for character deletion
-        if (this.isCollapsed()) {
-          // Only handle text nodes
-          if ($isTextNode(anchorNode)) {
-            const textContent = anchorNode.getTextContent();
-            const offset = anchor.offset;
-
-            // Simple deletion logic
-            if (isBackward) {
-              // Backspace: delete character before cursor
-              if (offset > 0) {
-                const newText =
-                  textContent.slice(0, offset - 1) + textContent.slice(offset);
-                anchorNode.setTextContent(newText);
-
-                // Update selection position
-                const newOffset = offset - 1;
-                anchor.set(anchor.key, newOffset, anchor.type);
-                this.focus.set(this.focus.key, newOffset, this.focus.type);
-                this.dirty = true;
-
-                return;
-              }
-            } else {
-              // Delete: delete character after cursor
-              if (offset < textContent.length) {
-                const newText =
-                  textContent.slice(0, offset) + textContent.slice(offset + 1);
-                anchorNode.setTextContent(newText);
-
-                // Keep cursor at same position
-                anchor.set(anchor.key, offset, anchor.type);
-                this.focus.set(this.focus.key, offset, this.focus.type);
-                this.dirty = true;
-
-                return;
-              }
-            }
+        if ($isTextNode(anchorNode) && anchor.type === 'text') {
+          const textContent = anchorNode.getTextContent();
+          const offset = anchor.offset;
+
+          if (isBackward && offset > 0) {
+            // Select the character before cursor and remove it
+            this.anchor.set(anchor.key, offset - 1, 'text');
+            this.removeText();
+            return;
+          } else if (!isBackward && offset < textContent.length) {
+            // Select the character after cursor and remove it
+            this.focus.set(this.focus.key, offset + 1, 'text');
+            this.removeText();
+            return;
           }
         }
       }
@@ -1972,39 +1948,26 @@ export class RangeSelection implements BaseSelection {
         }
 
         const anchor = this.anchor;
-        const focus = this.focus;
         const anchorNode = anchor.getNode();
 
-        if ($isTextNode(anchorNode)) {
+        if ($isTextNode(anchorNode) && anchor.type === 'text') {
           const textContent = anchorNode.getTextContent();
           const offset = anchor.offset;
 
           if (isBackward) {
             // Cmd+Backspace: delete from beginning of line to cursor
             if (offset > 0) {
-              const newText = textContent.slice(offset);
-              anchorNode.setTextContent(newText);
-
-              // Move cursor to beginning of line (position 0)
-              anchor.set(anchor.key, 0, anchor.type);
-              focus.set(focus.key, 0, focus.type);
-
-              // Mark selection as dirty to force reconciliation
-              this.dirty = true;
+              // Select from beginning to current position
+              this.anchor.set(anchor.key, 0, 'text');
+              this.removeText();
               return;
             }
           } else {
             // Cmd+Delete: delete from cursor to end of line
             if (offset < textContent.length) {
-              const newText = textContent.slice(0, offset);
-              anchorNode.setTextContent(newText);
-
-              // Keep cursor at same position
-              anchor.set(anchor.key, offset, anchor.type);
-              focus.set(focus.key, offset, focus.type);
-
-              // Mark selection as dirty to force reconciliation
-              this.dirty = true;
+              // Select from current position to end
+              this.focus.set(this.focus.key, textContent.length, 'text');
+              this.removeText();
               return;
             }
           }
@@ -2037,80 +2000,58 @@ export class RangeSelection implements BaseSelection {
         return;
       }
 
-      // Try Shadow DOM direct deletion first for better reliability
+      // Special handling for Shadow DOM where browser selection might not work
       const editor = getActiveEditor();
       const rootElement = editor.getRootElement();
       if (rootElement && isShadowRoot(getShadowRootOrDocument(rootElement))) {
-        // Use simple word boundary detection for Shadow DOM
-
-        if (!this.isCollapsed()) {
-          // If there's already a selection, just remove it
-          this.removeText();
-          return;
-        }
-
-        const focus = this.focus;
-
-        if ($isTextNode(anchorNode)) {
+        if ($isTextNode(anchorNode) && anchor.type === 'text') {
           const textContent = anchorNode.getTextContent();
           const offset = anchor.offset;
 
-          if (isBackward) {
-            // Option+Backspace: delete word before cursor
-            if (offset > 0) {
-              // Find word boundary
-              let wordStart = offset;
-
-              // Skip trailing spaces
-              while (wordStart > 0 && /\s/.test(textContent[wordStart - 1])) {
-                wordStart--;
-              }
+          if (isBackward && offset > 0) {
+            // Find word boundary before cursor
+            let wordStart = offset;
 
-              // Find start of word
-              while (wordStart > 0 && !/\s/.test(textContent[wordStart - 1])) {
-                wordStart--;
-              }
+            // Skip trailing spaces
+            while (wordStart > 0 && /\s/.test(textContent[wordStart - 1])) {
+              wordStart--;
+            }
 
-              const newText =
-                textContent.slice(0, wordStart) + textContent.slice(offset);
-              anchorNode.setTextContent(newText);
+            // Find start of word
+            while (wordStart > 0 && !/\s/.test(textContent[wordStart - 1])) {
+              wordStart--;
+            }
 
-              // Move cursor to word start
-              anchor.set(anchor.key, wordStart, anchor.type);
-              focus.set(focus.key, wordStart, focus.type);
-              this.dirty = true;
+            if (wordStart < offset) {
+              // Select from word start to current position
+              this.anchor.set(anchor.key, wordStart, 'text');
+              this.removeText();
               return;
             }
-          } else {
-            // Option+Delete: delete word after cursor
-            if (offset < textContent.length) {
-              // Find word boundary
-              let wordEnd = offset;
-
-              // Skip leading spaces
-              while (
-                wordEnd < textContent.length &&
-                /\s/.test(textContent[wordEnd])
-              ) {
-                wordEnd++;
-              }
-
-              // Find end of word
-              while (
-                wordEnd < textContent.length &&
-                !/\s/.test(textContent[wordEnd])
-              ) {
-                wordEnd++;
-              }
+          } else if (!isBackward && offset < textContent.length) {
+            // Find word boundary after cursor
+            let wordEnd = offset;
+
+            // Skip leading spaces
+            while (
+              wordEnd < textContent.length &&
+              /\s/.test(textContent[wordEnd])
+            ) {
+              wordEnd++;
+            }
 
-              const newText =
-                textContent.slice(0, offset) + textContent.slice(wordEnd);
-              anchorNode.setTextContent(newText);
+            // Find end of word
+            while (
+              wordEnd < textContent.length &&
+              !/\s/.test(textContent[wordEnd])
+            ) {
+              wordEnd++;
+            }
 
-              // Keep cursor at same position
-              anchor.set(anchor.key, offset, anchor.type);
-              focus.set(focus.key, offset, focus.type);
-              this.dirty = true;
+            if (wordEnd > offset) {
+              // Select from current position to word end
+              this.focus.set(this.focus.key, wordEnd, 'text');
+              this.removeText();
               return;
             }
           }