[lexical][lexical-clipboard][lexical-playground][lexical-react][lexical-selection][lexical-table][lexical-utils] Add Shadow DOM support

Author: aleksandr-konovalov

package-lock.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",

package.json

@@ -25,7 +25,8 @@ import {
   BaseSelection,
   COMMAND_PRIORITY_CRITICAL,
   COPY_COMMAND,
-  getDOMSelection,
+  getDOMSelectionForEditor,
+  getWindow,
   isSelectionWithinEditor,
   LexicalEditor,
   LexicalNode,
@@ -448,9 +449,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;
   }
@@ -499,13 +500,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-clipboard/src/clipboard.ts

@@ -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';
 
@@ -104,6 +105,7 @@ export default function Editor(): JSX.Element {
       hasLinkAttributes,
       isCharLimitUtf8,
       isRichText,
+      isShadowDOM,
       showTreeView,
       showTableOfContents,
       shouldUseLexicalContextMenu,
@@ -169,7 +171,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' : ''
         }`}>
@@ -302,7 +306,7 @@ export default function Editor(): JSX.Element {
           shouldPreserveNewLinesInMarkdown={shouldPreserveNewLinesInMarkdown}
           useCollabV2={useCollabV2}
         />
-      </div>
+      </ShadowDOMWrapper>
       {showTreeView && <TreeViewPlugin />}
     </>
   );

packages/lexical-playground/src/Editor.tsx

@@ -28,6 +28,7 @@ export default function Settings(): JSX.Element {
       isCharLimit,
       isCharLimitUtf8,
       isAutocomplete,
+      isShadowDOM,
       showTreeView,
       showNestedEditorTreeView,
       // disableBeforeInput,
@@ -139,6 +140,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/Settings.tsx

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

packages/lexical-playground/src/appSettings.ts

@@ -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/CommentPlugin/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/FloatingLinkEditorPlugin/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/FloatingTextFormatToolbarPlugin/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) {