[lexical-react] Breaking Change: Deprecate public default exports #6079

README.md

@@ -62,7 +62,7 @@ import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 
 const theme = {
   // Theme styling goes here

examples/react-rich-collab/src/Editor.tsx

@@ -7,7 +7,7 @@
  */
 import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 
 import ToolbarPlugin from './plugins/ToolbarPlugin';

examples/react-rich/src/App.tsx

@@ -8,7 +8,7 @@
 import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {LexicalComposer} from '@lexical/react/LexicalComposer';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 

packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx

@@ -9,7 +9,7 @@
 import {createEmptyHistoryState, registerHistory} from '@lexical/history';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {$createQuoteNode} from '@lexical/rich-text';

packages/lexical-playground/src/Editor.tsx

@@ -10,9 +10,9 @@ import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {CharacterLimitPlugin} from '@lexical/react/LexicalCharacterLimitPlugin';
 import {CheckListPlugin} from '@lexical/react/LexicalCheckListPlugin';
 import {ClearEditorPlugin} from '@lexical/react/LexicalClearEditorPlugin';
-import LexicalClickableLinkPlugin from '@lexical/react/LexicalClickableLinkPlugin';
+import {ClickableLinkPlugin} from '@lexical/react/LexicalClickableLinkPlugin';
 import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {HashtagPlugin} from '@lexical/react/LexicalHashtagPlugin';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {HorizontalRulePlugin} from '@lexical/react/LexicalHorizontalRulePlugin';
@@ -21,7 +21,7 @@ import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {TabIndentationPlugin} from '@lexical/react/LexicalTabIndentationPlugin';
 import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
-import useLexicalEditable from '@lexical/react/useLexicalEditable';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
 import {CAN_USE_DOM} from 'shared/canUseDOM';
@@ -191,7 +191,7 @@ export default function Editor(): JSX.Element {
             <TwitterPlugin />
             <YouTubePlugin />
             <FigmaPlugin />
-            <LexicalClickableLinkPlugin disabled={isEditable} />
+            <ClickableLinkPlugin disabled={isEditable} />
             <HorizontalRulePlugin />
             <EquationsPlugin />
             <ExcalidrawPlugin />

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

@@ -19,7 +19,7 @@ import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {useCollaborationContext} from '@lexical/react/LexicalCollaborationContext';
 import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {HashtagPlugin} from '@lexical/react/LexicalHashtagPlugin';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {LexicalNestedComposer} from '@lexical/react/LexicalNestedComposer';

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

@@ -12,7 +12,7 @@ import './InlineImageNode.css';
 
 import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {LexicalNestedComposer} from '@lexical/react/LexicalNestedComposer';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';

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

@@ -13,7 +13,7 @@ import './StickyNode.css';
 import {useCollaborationContext} from '@lexical/react/LexicalCollaborationContext';
 import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {LexicalNestedComposer} from '@lexical/react/LexicalNestedComposer';
 import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';

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

@@ -32,7 +32,7 @@ import {useCollaborationContext} from '@lexical/react/LexicalCollaborationContex
 import {LexicalComposer} from '@lexical/react/LexicalComposer';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {EditorRefPlugin} from '@lexical/react/LexicalEditorRefPlugin';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
 import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';

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

@@ -9,7 +9,7 @@
 import type {ElementNode, LexicalEditor} from 'lexical';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import useLexicalEditable from '@lexical/react/useLexicalEditable';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import {
   $deleteTableColumn__EXPERIMENTAL,
   $deleteTableRow__EXPERIMENTAL,

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

@@ -11,7 +11,7 @@ import type {LexicalEditor} from 'lexical';
 import './index.css';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import useLexicalEditable from '@lexical/react/useLexicalEditable';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import {
   $getTableColumnIndexFromTableCellNode,
   $getTableNodeFromLexicalNodeOrThrow,

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

@@ -12,7 +12,7 @@ import type {NodeKey} from 'lexical';
 import './index.css';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import LexicalTableOfContents from '@lexical/react/LexicalTableOfContents';
+import {LexicalTableOfContents} from '@lexical/react/LexicalTableOfContents';
 import {useEffect, useRef, useState} from 'react';
 import * as React from 'react';
 

packages/lexical-react/flow/LexicalClickableLinkPlugin.js.flow

@@ -7,6 +7,8 @@
  * @flow strict
  */
 
-declare export function MLCClickableLinkPlugin({
+declare export function ClickableLinkPlugin({
   newTab?: boolean,
 }): null;
+
+declare export default typeof ClickableLinkPlugin;

packages/lexical-react/flow/LexicalErrorBoundary.js.flow

@@ -12,6 +12,9 @@ export type LexicalErrorBoundaryProps = $ReadOnly<{
   onError: (error: Error) => void,
 }>;
 
-declare export default function LexicalErrorBoundary(
+declare export function LexicalErrorBoundary(
   props: LexicalErrorBoundaryProps,
 ): React$Node;
+
+/** @deprecated use the named export {@link LexicalErrorBoundary} */
+export default typeof LexicalErrorBoundary;

packages/lexical-react/flow/LexicalPlainTextPlugin.js.flow

@@ -9,7 +9,7 @@
 
 import type {EditorState, LexicalEditor} from 'lexical';
 
-import typeof LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {typeof LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 
 import * as React from 'react';
 

packages/lexical-react/flow/LexicalRichTextPlugin.js.flow

@@ -9,7 +9,7 @@
 
 import type {EditorState, LexicalEditor} from 'lexical';
 
-import typeof LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {typeof LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 
 import * as React from 'react';
 

packages/lexical-react/flow/LexicalTableOfContents.js.flow

@@ -8,10 +8,14 @@
  */
 
 import type {HeadingTagType} from '@lexical/rich-text';
-import type {NodeKey} from 'lexical';
+import type {LexicalEditor, NodeKey} from 'lexical';
 
-declare export default function LexicalTableOfContentsPlugin({
+declare export function LexicalTableOfContents({
   children: (
     tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
+    editor: LexicalEditor,
   ) => React$Node,
 }): React$Node;
+
+/** @deprecated use the named export {@link LexicalTableOfContents} */
+declare export default typeof LexicalTableOfContents;

packages/lexical-react/flow/useLexicalEditable.js.flow

@@ -9,4 +9,7 @@
 
 import type {LexicalEditor} from 'lexical';
 
-declare export default function useLexicalEditable(): boolean;
+declare export function useLexicalEditable(): boolean;
+
+/** @deprecated use the named export {@link useLexicalEditable} */
+declare export default typeof useLexicalEditable;

packages/lexical-react/flow/useLexicalSubscription.js.flow

@@ -14,6 +14,9 @@ export type LexicalSubscription<T> = {
   subscribe: (callback: (value: T) => void) => () => void,
 };
 
-declare export default function useLexicalSubscription<T>(
+declare export function useLexicalSubscription<T>(
   subscription: (editor: LexicalEditor) => LexicalSubscription<T>,
 ): T;
+
+/** @deprecated use the named export {@link useLexicalSubscription} */
+declare export default typeof useLexicalSubscription;

packages/lexical-react/src/LexicalClickableLinkPlugin.tsx

@@ -32,7 +32,7 @@ function findMatchingDOM<T extends Node>(
   return null;
 }
 
-export default function LexicalClickableLinkPlugin({
+export function ClickableLinkPlugin({
   newTab = true,
   disabled = false,
 }: {
@@ -122,3 +122,6 @@ export default function LexicalClickableLinkPlugin({
 
   return null;
 }
+
+/** @deprecated use the named export {@link ClickableLinkPlugin} */
+export default ClickableLinkPlugin;

packages/lexical-react/src/LexicalErrorBoundary.tsx

@@ -6,15 +6,14 @@
  *
  */
 
-import * as React from 'react';
 import {ErrorBoundary as ReactErrorBoundary} from 'react-error-boundary';
 
 export type LexicalErrorBoundaryProps = {
   children: JSX.Element;
   onError: (error: Error) => void;
 };
 
-export default function LexicalErrorBoundary({
+export function LexicalErrorBoundary({
   children,
   onError,
 }: LexicalErrorBoundaryProps): JSX.Element {
@@ -35,3 +34,6 @@ export default function LexicalErrorBoundary({
     </ReactErrorBoundary>
   );
 }
+
+/** @deprecated use the named export {@link LexicalErrorBoundary} */
+export default LexicalErrorBoundary;

packages/lexical-react/src/LexicalPlainTextPlugin.tsx

@@ -7,7 +7,7 @@
  */
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import useLexicalEditable from '@lexical/react/useLexicalEditable';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import * as React from 'react';
 
 import {useCanShowPlaceholder} from './shared/useCanShowPlaceholder';

packages/lexical-react/src/LexicalRichTextPlugin.tsx

@@ -7,7 +7,7 @@
  */
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import useLexicalEditable from '@lexical/react/useLexicalEditable';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import * as React from 'react';
 
 import {useCanShowPlaceholder} from './shared/useCanShowPlaceholder';

packages/lexical-react/src/LexicalTableOfContents.tsx

@@ -140,9 +140,7 @@ type Props = {
   ) => JSX.Element;
 };
 
-export default function LexicalTableOfContentsPlugin({
-  children,
-}: Props): JSX.Element {
+export function LexicalTableOfContents({children}: Props): JSX.Element {
   const [tableOfContents, setTableOfContents] = useState<
     Array<TableOfContentsEntry>
   >([]);
@@ -267,3 +265,6 @@ export default function LexicalTableOfContentsPlugin({
 
   return children(tableOfContents, editor);
 }
+
+/** @deprecated use the named export {@link LexicalTableOfContents} */
+export default LexicalTableOfContents;

packages/lexical-react/src/__tests__/unit/PlainRichTextPlugin.test.tsx

@@ -12,7 +12,7 @@ import {AutoLinkNode, LinkNode} from '@lexical/link';
 import {ListItemNode, ListNode} from '@lexical/list';
 import {OverflowNode} from '@lexical/overflow';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {HeadingNode, QuoteNode} from '@lexical/rich-text';
 import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
 import {$rootTextContent} from '@lexical/text';

packages/lexical-react/src/__tests__/unit/utils.tsx

@@ -19,7 +19,7 @@ import {CollaborationPlugin} from '../../LexicalCollaborationPlugin';
 import {LexicalComposer} from '../../LexicalComposer';
 import {useLexicalComposerContext} from '../../LexicalComposerContext';
 import {ContentEditable} from '../../LexicalContentEditable';
-import LexicalErrorBoundary from '../../LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '../../LexicalErrorBoundary';
 import {RichTextPlugin} from '../../LexicalRichTextPlugin';
 
 function Editor({

packages/lexical-react/src/useLexicalEditable.ts

@@ -9,7 +9,7 @@
 import type {LexicalSubscription} from './useLexicalSubscription';
 import type {LexicalEditor} from 'lexical';
 
-import useLexicalSubscription from './useLexicalSubscription';
+import {useLexicalSubscription} from './useLexicalSubscription';
 
 function subscription(editor: LexicalEditor): LexicalSubscription<boolean> {
   return {
@@ -20,6 +20,9 @@ function subscription(editor: LexicalEditor): LexicalSubscription<boolean> {
   };
 }
 
-export default function useLexicalEditable(): boolean {
+export function useLexicalEditable(): boolean {
   return useLexicalSubscription(subscription);
 }
+
+/** @deprecated use the named export {@link useLexicalEditable} */
+export default useLexicalEditable;

packages/lexical-react/src/useLexicalSubscription.tsx

@@ -20,7 +20,7 @@ export type LexicalSubscription<T> = {
 /**
  * Shortcut to Lexical subscriptions when values are used for render.
  */
-export default function useLexicalSubscription<T>(
+export function useLexicalSubscription<T>(
   subscription: (editor: LexicalEditor) => LexicalSubscription<T>,
 ): T {
   const [editor] = useLexicalComposerContext();
@@ -46,3 +46,6 @@ export default function useLexicalSubscription<T>(
 
   return value;
 }
+
+/** @deprecated use the named export {@link useLexicalSubscription} */
+export default useLexicalSubscription;

packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx

@@ -10,7 +10,7 @@ import {$createLinkNode} from '@lexical/link';
 import {$createListItemNode, $createListNode} from '@lexical/list';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {$createHeadingNode} from '@lexical/rich-text';

packages/lexical-utils/src/__tests__/unit/LexicalEventHelpers.test.tsx

@@ -14,7 +14,7 @@ import {OverflowNode} from '@lexical/overflow';
 import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {HeadingNode, QuoteNode} from '@lexical/rich-text';
 import {

packages/lexical-website/docs/collaboration/react.md

@@ -43,7 +43,7 @@ $ HOST=localhost PORT=1234 YPERSISTENCE=./yjs-wss-db npx y-websocket
 import {$getRoot, $createParagraphNode, $createTextNode} from 'lexical';
 import {LexicalComposer} from '@lexical/react/LexicalComposer';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin';
 import * as Y from 'yjs';

packages/lexical-website/docs/getting-started/react.md

@@ -37,7 +37,7 @@ import {LexicalComposer} from '@lexical/react/LexicalComposer';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 
 const theme = {
   // Theme styling goes here

packages/lexical-website/docs/getting-started/theming.md

@@ -49,7 +49,7 @@ import {LexicalComposer} from '@lexical/react/LexicalComposer';
 import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
 import {exampleTheme} from './exampleTheme';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 
 const initialConfig = {namespace: 'MyEditor', theme: exampleTheme};