[lexical-playground] Chore: Remove shared imports from playground (#7368)

packages/lexical-playground/src/Editor.tsx

@@ -26,9 +26,9 @@ import {SelectionAlwaysOnDisplay} from '@lexical/react/LexicalSelectionAlwaysOnD
 import {TabIndentationPlugin} from '@lexical/react/LexicalTabIndentationPlugin';
 import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
 import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
+import {CAN_USE_DOM} from '@lexical/utils';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
-import {CAN_USE_DOM} from 'shared/canUseDOM';
 
 import {createWebsocketProvider} from './collaboration';
 import {useSettings} from './context/SettingsContext';

packages/lexical-playground/src/nodes/StickyComponent.tsx

@@ -21,8 +21,7 @@ import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
 import {calculateZoomLevel} from '@lexical/utils';
 import {$getNodeByKey} from 'lexical';
 import * as React from 'react';
-import {useEffect, useRef} from 'react';
+import {useEffect, useLayoutEffect, useRef} from 'react';
-import useLayoutEffect from 'shared/useLayoutEffect';
 
 import {createWebsocketProvider} from '../collaboration';
 import {useSharedHistoryContext} from '../context/SharedHistoryContext';

packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts

@@ -6,6 +6,7 @@
  *
  */
 
+import {IS_CHROME} from '@lexical/utils';
 import {
   $getSiblingCaret,
   $isElementNode,
@@ -23,8 +24,6 @@ import {
   SerializedElementNode,
   Spread,
 } from 'lexical';
-import {IS_CHROME} from 'shared/environment';
-import invariant from 'shared/invariant';
 
 import {setDomHiddenUntilFound} from './CollapsibleUtils';
 
@@ -113,10 +112,9 @@ export class CollapsibleContainerNode extends ElementNode {
       // details is not well supported in Chrome #5582
       if (IS_CHROME) {
         const contentDom = dom.children[1];
-        invariant(
+        if (!isHTMLElement(contentDom)) {
-          isHTMLElement(contentDom),
+          throw new Error('Expected contentDom to be an HTMLElement');
-          'Expected contentDom to be an HTMLElement',
+        }
-        );
         if (currentOpen) {
           dom.setAttribute('open', '');
           contentDom.hidden = false;

packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContentNode.ts

@@ -6,6 +6,7 @@
  *
  */
 
+import {IS_CHROME} from '@lexical/utils';
 import {
   DOMConversionMap,
   DOMConversionOutput,
@@ -16,8 +17,6 @@ import {
   LexicalNode,
   SerializedElementNode,
 } from 'lexical';
-import {IS_CHROME} from 'shared/environment';
-import invariant from 'shared/invariant';
 
 import {$isCollapsibleContainerNode} from './CollapsibleContainerNode';
 import {domOnBeforeMatch, setDomHiddenUntilFound} from './CollapsibleUtils';
@@ -48,10 +47,11 @@ export class CollapsibleContentNode extends ElementNode {
     if (IS_CHROME) {
       editor.getEditorState().read(() => {
         const containerNode = this.getParentOrThrow();
-        invariant(
+        if (!$isCollapsibleContainerNode(containerNode)) {
-          $isCollapsibleContainerNode(containerNode),
+          throw new Error(
-          'Expected parent node to be a CollapsibleContainerNode',
+            'Expected parent node to be a CollapsibleContainerNode',
-        );
+          );
+        }
         if (!containerNode.__open) {
           setDomHiddenUntilFound(dom);
         }
@@ -59,10 +59,11 @@ export class CollapsibleContentNode extends ElementNode {
       domOnBeforeMatch(dom, () => {
         editor.update(() => {
           const containerNode = this.getParentOrThrow().getLatest();
-          invariant(
+          if (!$isCollapsibleContainerNode(containerNode)) {
-            $isCollapsibleContainerNode(containerNode),
+            throw new Error(
-            'Expected parent node to be a CollapsibleContainerNode',
+              'Expected parent node to be a CollapsibleContainerNode',
-          );
+            );
+          }
           if (!containerNode.__open) {
             containerNode.toggleOpen();
           }

packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts

@@ -6,6 +6,7 @@
  *
  */
 
+import {IS_CHROME} from '@lexical/utils';
 import {
   $createParagraphNode,
   $isElementNode,
@@ -18,8 +19,6 @@ import {
   RangeSelection,
   SerializedElementNode,
 } from 'lexical';
-import {IS_CHROME} from 'shared/environment';
-import invariant from 'shared/invariant';
 
 import {$isCollapsibleContainerNode} from './CollapsibleContainerNode';
 import {$isCollapsibleContentNode} from './CollapsibleContentNode';
@@ -51,10 +50,11 @@ export class CollapsibleTitleNode extends ElementNode {
       dom.addEventListener('click', () => {
         editor.update(() => {
           const collapsibleContainer = this.getLatest().getParentOrThrow();
-          invariant(
+          if (!$isCollapsibleContainerNode(collapsibleContainer)) {
-            $isCollapsibleContainerNode(collapsibleContainer),
+            throw new Error(
-            'Expected parent node to be a CollapsibleContainerNode',
+              'Expected parent node to be a CollapsibleContainerNode',
-          );
+            );
+          }
           collapsibleContainer.toggleOpen();
         });
       });
@@ -85,10 +85,9 @@ export class CollapsibleTitleNode extends ElementNode {
 
   static transform(): (node: LexicalNode) => void {
     return (node: LexicalNode) => {
-      invariant(
+      if (!$isCollapsibleTitleNode(node)) {
-        $isCollapsibleTitleNode(node),
+        throw new Error('node is not a CollapsibleTitleNode');
-        'node is not a CollapsibleTitleNode',
+      }
-      );
       if (node.isEmpty()) {
         node.remove();
       }

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

@@ -51,10 +51,16 @@ import {
   getDOMSelection,
   KEY_ESCAPE_COMMAND,
 } from 'lexical';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import * as React from 'react';
 import {createPortal} from 'react-dom';
-import useLayoutEffect from 'shared/useLayoutEffect';
 
 import {
   Comment,

packages/lexical-playground/src/plugins/ShortcutsPlugin/shortcuts.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import {IS_APPLE} from 'shared/environment';
+import {IS_APPLE} from '@lexical/utils';
 
 //disable eslint sorting rule for quick reference to shortcuts
 /* eslint-disable sort-keys-fix/sort-keys-fix */

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

@@ -49,7 +49,6 @@ import {
 import * as React from 'react';
 import {ReactPortal, useCallback, useEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
-import invariant from 'shared/invariant';
 
 import useModal from '../../hooks/useModal';
 import ColorPicker from '../../ui/ColorPicker';
@@ -243,10 +242,11 @@ function TableActionMenu({
           editor.getElementByKey(tableNode.getKey()),
         );
 
-        invariant(
+        if (tableElement === null) {
-          tableElement !== null,
+          throw new Error(
-          'TableActionMenu: Expected to find tableElement in DOM',
+            'TableActionMenu: Expected to find tableElement in DOM',
-        );
+          );
+        }
 
         const tableObserver = getTableObserverFromTableElement(tableElement);
         if (tableObserver !== null) {
@@ -886,10 +886,11 @@ function TableCellActionMenuContainer({
         editor.getElementByKey(tableNode.getKey()),
       );
 
-      invariant(
+      if (tableElement === null) {
-        tableElement !== null,
+        throw new Error(
-        'TableActionMenu: Expected to find tableElement in DOM',
+          'TableActionMenu: Expected to find tableElement in DOM',
-      );
+        );
+      }
 
       tableObserver = getTableObserverFromTableElement(tableElement);
       setTableMenuCellNode(tableCellNodeFromSelection);
@@ -897,19 +898,19 @@ function TableCellActionMenuContainer({
       const anchorNode = $getTableCellNodeFromLexicalNode(
         selection.anchor.getNode(),
       );
-      invariant(
+      if (!$isTableCellNode(anchorNode)) {
-        $isTableCellNode(anchorNode),
+        throw new Error('TableSelection anchorNode must be a TableCellNode');
-        'TableSelection anchorNode must be a TableCellNode',
+      }
-      );
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(anchorNode);
       const tableElement = getTableElement(
         tableNode,
         editor.getElementByKey(tableNode.getKey()),
       );
-      invariant(
+      if (tableElement === null) {
-        tableElement !== null,
+        throw new Error(
-        'TableActionMenu: Expected to find tableElement in DOM',
+          'TableActionMenu: Expected to find tableElement in DOM',
-      );
+        );
+      }
       tableObserver = getTableObserverFromTableElement(tableElement);
       tableCellParentNodeDOM = editor.getElementByKey(anchorNode.getKey());
 

packages/lexical-playground/src/plugins/TablePlugin.tsx

@@ -17,7 +17,6 @@ import {
 } from '@lexical/table';
 import {EditorThemeClasses, Klass, LexicalEditor, LexicalNode} from 'lexical';
 import {createContext, useContext, useEffect, useMemo, useState} from 'react';
-import invariant from 'shared/invariant';
 
 import Button from '../ui/Button';
 import {DialogActions} from '../ui/Dialog';
@@ -147,8 +146,7 @@ export function TablePlugin({
   const cellContext = useContext(CellContext);
   useEffect(() => {
     if (!editor.hasNodes([TableNode, TableRowNode, TableCellNode])) {
-      invariant(
+      throw new Error(
-        false,
         'TablePlugin: TableNode, TableRowNode, or TableCellNode is not registered on editor',
       );
     }

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

@@ -10,6 +10,7 @@ import type {BaseSelection, LexicalEditor} from 'lexical';
 import type {JSX} from 'react';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {IS_APPLE} from '@lexical/utils';
 import {
   $createParagraphNode,
   $createTextNode,
@@ -17,9 +18,7 @@ import {
   getDOMSelection,
 } from 'lexical';
 import * as React from 'react';
-import {useCallback, useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
-import {IS_APPLE} from 'shared/environment';
-import useLayoutEffect from 'shared/useLayoutEffect';
 
 const copy = (text: string | null) => {
   const textArea = document.createElement('textarea');

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

@@ -29,6 +29,7 @@ import {
   $findMatchingParent,
   $getNearestNodeOfType,
   $isEditorIsNestedEditor,
+  IS_APPLE,
   mergeRegister,
 } from '@lexical/utils';
 import {
@@ -54,7 +55,6 @@ import {
 } from 'lexical';
 import {Dispatch, useCallback, useEffect, useState} from 'react';
 import * as React from 'react';
-import {IS_APPLE} from 'shared/environment';
 
 import {
   blockTypeToBlockName,

packages/lexical-playground/src/utils/getThemeSelector.ts

@@ -7,18 +7,17 @@
  */
 
 import {EditorThemeClasses} from 'lexical';
-import invariant from 'shared/invariant';
 
 export function getThemeSelector(
   getTheme: () => EditorThemeClasses | null | undefined,
   name: keyof EditorThemeClasses,
 ): string {
   const className = getTheme()?.[name];
-  invariant(
+  if (typeof className !== 'string') {
-    typeof className === 'string',
+    throw new Error(
-    'getThemeClass: required theme property %s not defined',
+      `getThemeClass: required theme property ${name} not defined`,
-    String(name),
+    );
-  );
+  }
   return className
     .split(/\s+/g)
     .map((cls) => `.${cls}`)