Add Lexical Shadow DOM Support

package.json

@@ -135,7 +135,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@types/child-process-promise": "^2.2.6",
     "@types/jest": "^29.5.12",
-    "@types/jsdom": "^21.1.6",
+    "@types/jsdom": "^27.0.0",
     "@types/katex": "^0.16.7",
     "@types/node": "^17.0.31",
     "@types/prettier": "^2.7.3",

packages/lexical-clipboard/src/clipboard.ts

@@ -25,7 +25,8 @@ import {
   BaseSelection,
   COMMAND_PRIORITY_CRITICAL,
   COPY_COMMAND,
-  getDOMSelection,
+  getDOMSelectionForEditor,
+  getWindow,
   isSelectionWithinEditor,
   LexicalEditor,
   LexicalNode,
@@ -450,9 +451,9 @@ export async function copyToClipboard(
   }
 
   const rootElement = editor.getRootElement();
-  const editorWindow = editor._window || window;
+  const editorWindow = getWindow(editor);
   const windowDocument = editorWindow.document;
-  const domSelection = getDOMSelection(editorWindow);
+  const domSelection = getDOMSelectionForEditor(editor);
   if (rootElement === null || domSelection === null) {
     return false;
   }
@@ -501,13 +502,12 @@ function $copyToClipboardEvent(
   data?: LexicalClipboardData,
 ): boolean {
   if (data === undefined) {
-    const domSelection = getDOMSelection(editor._window);
+    const domSelection = getDOMSelectionForEditor(editor);
     const selection = $getSelection();
 
     if (!selection || selection.isCollapsed()) {
       return false;
     }
-
     if (!domSelection) {
       return false;
     }

packages/lexical-playground/src/Editor.tsx

@@ -83,6 +83,7 @@ import TwitterPlugin from './plugins/TwitterPlugin';
 import {VersionsPlugin} from './plugins/VersionsPlugin';
 import YouTubePlugin from './plugins/YouTubePlugin';
 import ContentEditable from './ui/ContentEditable';
+import ShadowDOMWrapper from './ui/ShadowDOMWrapper';
 
 const COLLAB_DOC_ID = 'main';
 
@@ -105,6 +106,7 @@ export default function Editor(): JSX.Element {
       hasNestedTables,
       isCharLimitUtf8,
       isRichText,
+      isShadowDOM,
       showTreeView,
       showTableOfContents,
       shouldUseLexicalContextMenu,
@@ -170,7 +172,9 @@ export default function Editor(): JSX.Element {
           setIsLinkEditMode={setIsLinkEditMode}
         />
       )}
-      <div
+      <ShadowDOMWrapper
+        key={`shadow-${isShadowDOM}`}
+        enabled={isShadowDOM}
         className={`editor-container ${showTreeView ? 'tree-view' : ''} ${
           !isRichText ? 'plain-text' : ''
         }`}>
@@ -304,7 +308,7 @@ export default function Editor(): JSX.Element {
           shouldPreserveNewLinesInMarkdown={shouldPreserveNewLinesInMarkdown}
           useCollabV2={useCollabV2}
         />
-      </div>
+      </ShadowDOMWrapper>
       {showTreeView && <TreeViewPlugin />}
     </>
   );

packages/lexical-playground/src/Settings.tsx

@@ -29,6 +29,7 @@ export default function Settings(): JSX.Element {
       isCharLimit,
       isCharLimitUtf8,
       isAutocomplete,
+      isShadowDOM,
       showTreeView,
       showNestedEditorTreeView,
       // disableBeforeInput,
@@ -148,6 +149,11 @@ export default function Settings(): JSX.Element {
             checked={isAutocomplete}
             text="Autocomplete"
           />
+          <Switch
+            onClick={() => setOption('isShadowDOM', !isShadowDOM)}
+            checked={isShadowDOM}
+            text="Shadow DOM"
+          />
           {/* <Switch
             onClick={() => {
               setOption('disableBeforeInput', !disableBeforeInput);

packages/lexical-playground/src/appSettings.ts

@@ -24,6 +24,7 @@ export const DEFAULT_SETTINGS = {
   isCollab: false,
   isMaxLength: false,
   isRichText: true,
+  isShadowDOM: false,
   listStrictIndent: false,
   measureTypingPerf: false,
   selectionAlwaysOnDisplay: false,

packages/lexical-playground/src/plugins/CommentPlugin/index.tsx

@@ -50,7 +50,7 @@ import {
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_NORMAL,
   createCommand,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   KEY_ESCAPE_COMMAND,
 } from 'lexical';
 import {
@@ -933,7 +933,7 @@ export default function CommentPlugin({
       editor.registerCommand(
         INSERT_INLINE_COMMAND,
         () => {
-          const domSelection = getDOMSelection(editor._window);
+          const domSelection = getDOMSelectionForEditor(editor);
           if (domSelection !== null) {
             domSelection.removeAllRanges();
           }

packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx

@@ -27,7 +27,7 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   KEY_ESCAPE_COMMAND,
   LexicalEditor,
   SELECTION_CHANGE_COMMAND,
@@ -104,7 +104,7 @@ function FloatingLinkEditor({
     }
 
     const editorElem = editorRef.current;
-    const nativeSelection = getDOMSelection(editor._window);
+    const nativeSelection = getDOMSelectionForEditor(editor);
     const activeElement = document.activeElement;
 
     if (editorElem === null) {

packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -21,7 +21,7 @@ import {
   $isTextNode,
   COMMAND_PRIORITY_LOW,
   FORMAT_TEXT_COMMAND,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   LexicalEditor,
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
@@ -122,7 +122,7 @@ function TextFormatFloatingToolbar({
     const selection = $getSelection();
 
     const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
-    const nativeSelection = getDOMSelection(editor._window);
+    const nativeSelection = getDOMSelectionForEditor(editor);
 
     if (popupCharStylesEditorElem === null) {
       return;
@@ -342,7 +342,7 @@ function useFloatingTextFormatToolbar(
         return;
       }
       const selection = $getSelection();
-      const nativeSelection = getDOMSelection(editor._window);
+      const nativeSelection = getDOMSelectionForEditor(editor);
       const rootElement = editor.getRootElement();
 
       if (

packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx

@@ -41,7 +41,7 @@ import {
   $isTextNode,
   $setSelection,
   COMMAND_PRIORITY_CRITICAL,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   isDOMNode,
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
@@ -729,7 +729,7 @@ function TableCellActionMenuContainer({
   const $moveMenu = useCallback(() => {
     const menu = menuButtonRef.current;
     const selection = $getSelection();
-    const nativeSelection = getDOMSelection(editor._window);
+    const nativeSelection = getDOMSelectionForEditor(editor);
     const activeElement = document.activeElement;
     function disable() {
       if (menu) {

packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx

@@ -15,7 +15,7 @@ import {
   $createParagraphNode,
   $createTextNode,
   $getRoot,
-  getDOMSelection,
+  getDOMSelectionForEditor,
 } from 'lexical';
 import * as React from 'react';
 import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
@@ -172,7 +172,7 @@ function useTestRecorder(
 
   const generateTestContent = useCallback(() => {
     const rootElement = editor.getRootElement();
-    const browserSelection = getDOMSelection(editor._window);
+    const browserSelection = getDOMSelectionForEditor(editor);
 
     if (
       rootElement == null ||
@@ -327,7 +327,7 @@ ${steps.map(formatStep).join(`\n`)}
             dirtyElements.size === 0 &&
             !skipNextSelectionChange
           ) {
-            const browserSelection = getDOMSelection(editor._window);
+            const browserSelection = getDOMSelectionForEditor(editor);
             if (
               browserSelection &&
               (browserSelection.anchorNode == null ||
@@ -384,7 +384,7 @@ ${steps.map(formatStep).join(`\n`)}
     if (!isRecording) {
       return;
     }
-    const browserSelection = getDOMSelection(getCurrentEditor()._window);
+    const browserSelection = getDOMSelectionForEditor(getCurrentEditor());
     if (
       browserSelection === null ||
       browserSelection.anchorNode == null ||

packages/lexical-playground/src/ui/ShadowDOMWrapper.tsx

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX, ReactNode} from 'react';
+
+import {useEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+
+type ShadowDOMWrapperProps = {
+  children: ReactNode;
+  enabled: boolean;
+  className?: string;
+};
+
+export default function ShadowDOMWrapper({
+  children,
+  enabled,
+  className,
+}: ShadowDOMWrapperProps): JSX.Element {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+  const [stylesAdded, setStylesAdded] = useState(false);
+
+  useEffect(() => {
+    if (!enabled || !hostRef.current) {
+      setShadowRoot(null);
+      setStylesAdded(false);
+      return;
+    }
+
+    const host = hostRef.current;
+
+    // Create shadow DOM (should be safe with fresh element due to key prop)
+    try {
+      const shadow = host.attachShadow({mode: 'open'});
+      setShadowRoot(shadow);
+    } catch (error) {
+      // If shadow already exists, use existing one
+      if (error instanceof DOMException && error.name === 'NotSupportedError') {
+        const existingShadow = host.shadowRoot;
+        if (existingShadow) {
+          setShadowRoot(existingShadow);
+          // Clear existing content
+          existingShadow.innerHTML = '';
+        }
+      } else {
+        console.error('Error creating shadow DOM:', error);
+        return;
+      }
+    }
+
+    const shadow = host.shadowRoot;
+    if (!shadow) {
+      return;
+    }
+
+    // Copy all document styles to shadow DOM
+    const documentStyles = Array.from(
+      document.head.querySelectorAll('style, link[rel="stylesheet"]'),
+    );
+
+    documentStyles.forEach((styleElement) => {
+      const clonedStyle = styleElement.cloneNode(true) as HTMLElement;
+      shadow.appendChild(clonedStyle);
+    });
+
+    setStylesAdded(true);
+
+    return () => {
+      // Cleanup is automatic when host element is removed
+    };
+  }, [enabled]);
+
+  // If shadow DOM is not enabled, render children normally
+  if (!enabled) {
+    return <div className={className}>{children}</div>;
+  }
+
+  // Return the host element and portal to shadow DOM
+  return (
+    <div style={{position: 'relative'}}>
+      <div
+        ref={hostRef}
+        className={className}
+        style={{
+          position: 'relative',
+        }}
+      />
+      {shadowRoot &&
+        stylesAdded &&
+        createPortal(
+          <div
+            style={{
+              display: 'contents', // This ensures the children render properly
+            }}>
+            {children}
+          </div>,
+          shadowRoot,
+        )}
+    </div>
+  );
+}