diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx index 2b97ddd63..a51842454 100644 --- a/packages/lexical-playground/src/Editor.tsx +++ b/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'; diff --git a/packages/lexical-playground/src/nodes/StickyComponent.tsx b/packages/lexical-playground/src/nodes/StickyComponent.tsx index 9b83e5c2e..0f735cee4 100644 --- a/packages/lexical-playground/src/nodes/StickyComponent.tsx +++ b/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 useLayoutEffect from 'shared/useLayoutEffect'; +import {useEffect, useLayoutEffect, useRef} from 'react'; import {createWebsocketProvider} from '../collaboration'; import {useSharedHistoryContext} from '../context/SharedHistoryContext'; diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts index 91d8a66bb..4d803e64e 100644 --- a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts +++ b/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( - isHTMLElement(contentDom), - 'Expected contentDom to be an HTMLElement', - ); + if (!isHTMLElement(contentDom)) { + throw new Error('Expected contentDom to be an HTMLElement'); + } if (currentOpen) { dom.setAttribute('open', ''); contentDom.hidden = false; diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContentNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContentNode.ts index a0c7632b8..6202f6007 100644 --- a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContentNode.ts +++ b/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( - $isCollapsibleContainerNode(containerNode), - 'Expected parent node to be a CollapsibleContainerNode', - ); + if (!$isCollapsibleContainerNode(containerNode)) { + throw new Error( + '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( - $isCollapsibleContainerNode(containerNode), - 'Expected parent node to be a CollapsibleContainerNode', - ); + if (!$isCollapsibleContainerNode(containerNode)) { + throw new Error( + 'Expected parent node to be a CollapsibleContainerNode', + ); + } if (!containerNode.__open) { containerNode.toggleOpen(); } diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts index 15e13a81e..0a4a54e97 100644 --- a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts +++ b/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( - $isCollapsibleContainerNode(collapsibleContainer), - 'Expected parent node to be a CollapsibleContainerNode', - ); + if (!$isCollapsibleContainerNode(collapsibleContainer)) { + throw new Error( + '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( - $isCollapsibleTitleNode(node), - 'node is not a CollapsibleTitleNode', - ); + if (!$isCollapsibleTitleNode(node)) { + throw new Error('node is not a CollapsibleTitleNode'); + } if (node.isEmpty()) { node.remove(); } diff --git a/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx b/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx index 0d4d7d03d..50fd89d58 100644 --- a/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx +++ b/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, diff --git a/packages/lexical-playground/src/plugins/ShortcutsPlugin/shortcuts.ts b/packages/lexical-playground/src/plugins/ShortcutsPlugin/shortcuts.ts index 5ea8514e9..381d3de54 100644 --- a/packages/lexical-playground/src/plugins/ShortcutsPlugin/shortcuts.ts +++ b/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 */ diff --git a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx index 1828582f8..7806bde61 100644 --- a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx +++ b/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( - tableElement !== null, - 'TableActionMenu: Expected to find tableElement in DOM', - ); + if (tableElement === null) { + throw new Error( + '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( - tableElement !== null, - 'TableActionMenu: Expected to find tableElement in DOM', - ); + if (tableElement === null) { + throw new Error( + '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( - $isTableCellNode(anchorNode), - 'TableSelection anchorNode must be a TableCellNode', - ); + if (!$isTableCellNode(anchorNode)) { + throw new Error('TableSelection anchorNode must be a TableCellNode'); + } const tableNode = $getTableNodeFromLexicalNodeOrThrow(anchorNode); const tableElement = getTableElement( tableNode, editor.getElementByKey(tableNode.getKey()), ); - invariant( - tableElement !== null, - 'TableActionMenu: Expected to find tableElement in DOM', - ); + if (tableElement === null) { + throw new Error( + 'TableActionMenu: Expected to find tableElement in DOM', + ); + } tableObserver = getTableObserverFromTableElement(tableElement); tableCellParentNodeDOM = editor.getElementByKey(anchorNode.getKey()); diff --git a/packages/lexical-playground/src/plugins/TablePlugin.tsx b/packages/lexical-playground/src/plugins/TablePlugin.tsx index 69f8fac4f..b4e7e9ad9 100644 --- a/packages/lexical-playground/src/plugins/TablePlugin.tsx +++ b/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( - false, + throw new Error( 'TablePlugin: TableNode, TableRowNode, or TableCellNode is not registered on editor', ); } diff --git a/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx b/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx index d1ffc174e..8957f7905 100644 --- a/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx +++ b/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 {IS_APPLE} from 'shared/environment'; -import useLayoutEffect from 'shared/useLayoutEffect'; +import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'; const copy = (text: string | null) => { const textArea = document.createElement('textarea'); diff --git a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx index 44f353bcb..2f1585a7f 100644 --- a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx +++ b/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, diff --git a/packages/lexical-playground/src/utils/getThemeSelector.ts b/packages/lexical-playground/src/utils/getThemeSelector.ts index dce807aee..4890821d4 100644 --- a/packages/lexical-playground/src/utils/getThemeSelector.ts +++ b/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( - typeof className === 'string', - 'getThemeClass: required theme property %s not defined', - String(name), - ); + if (typeof className !== 'string') { + throw new Error( + `getThemeClass: required theme property ${name} not defined`, + ); + } return className .split(/\s+/g) .map((cls) => `.${cls}`)