From d2d1928574258fd16eac8ef0f351733675fcfc38 Mon Sep 17 00:00:00 2001 From: Bob Ippolito Date: Sat, 11 May 2024 08:14:53 -0700 Subject: [PATCH] [lexical-react] Breaking Change: Deprecate public default exports #6079 --- README.md | 2 +- examples/react-rich-collab/src/Editor.tsx | 2 +- examples/react-rich/src/App.tsx | 2 +- .../src/__tests__/unit/LexicalHistory.test.tsx | 2 +- packages/lexical-playground/src/Editor.tsx | 8 ++++---- .../src/nodes/ImageComponent.tsx | 2 +- .../src/nodes/InlineImageComponent.tsx | 2 +- .../src/nodes/StickyComponent.tsx | 2 +- .../src/plugins/CommentPlugin/index.tsx | 2 +- .../plugins/TableActionMenuPlugin/index.tsx | 2 +- .../src/plugins/TableCellResizer/index.tsx | 2 +- .../plugins/TableOfContentsPlugin/index.tsx | 2 +- .../flow/LexicalClickableLinkPlugin.js.flow | 4 +++- .../flow/LexicalErrorBoundary.js.flow | 5 ++++- .../flow/LexicalPlainTextPlugin.js.flow | 2 +- .../flow/LexicalRichTextPlugin.js.flow | 2 +- .../flow/LexicalTableOfContents.js.flow | 8 ++++++-- .../flow/useLexicalEditable.js.flow | 5 ++++- .../flow/useLexicalSubscription.js.flow | 5 ++++- .../src/LexicalClickableLinkPlugin.tsx | 5 ++++- .../lexical-react/src/LexicalErrorBoundary.tsx | 6 ++++-- .../src/LexicalPlainTextPlugin.tsx | 2 +- .../src/LexicalRichTextPlugin.tsx | 2 +- .../src/LexicalTableOfContents.tsx | 7 ++++--- .../unit/PlainRichTextPlugin.test.tsx | 2 +- .../lexical-react/src/__tests__/unit/utils.tsx | 2 +- .../lexical-react/src/useLexicalEditable.ts | 7 +++++-- .../src/useLexicalSubscription.tsx | 5 ++++- .../__tests__/unit/LexicalSelection.test.tsx | 2 +- .../unit/LexicalEventHelpers.test.tsx | 2 +- .../docs/collaboration/react.md | 2 +- .../docs/getting-started/react.md | 2 +- .../docs/getting-started/theming.md | 2 +- packages/lexical-website/docs/react/plugins.md | 18 ++++++++++-------- .../src/__tests__/unit/LexicalEditor.test.tsx | 2 +- .../__tests__/unit/LexicalListPlugin.test.tsx | 2 +- .../src/components/App.tsx | 2 +- .../lexical-esm-nextjs/app/EditorUseClient.tsx | 2 +- 38 files changed, 82 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index ef70854c178..5581440853a 100644 --- a/README.md +++ b/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 diff --git a/examples/react-rich-collab/src/Editor.tsx b/examples/react-rich-collab/src/Editor.tsx index 0e11606add5..a7a9024c6e4 100644 --- a/examples/react-rich-collab/src/Editor.tsx +++ b/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'; diff --git a/examples/react-rich/src/App.tsx b/examples/react-rich/src/App.tsx index 665d654054b..64f41923b85 100644 --- a/examples/react-rich/src/App.tsx +++ b/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'; diff --git a/packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx b/packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx index 804defbd8b2..a27095d3201 100644 --- a/packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx +++ b/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'; diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx index 60530512725..9981098e6a5 100644 --- a/packages/lexical-playground/src/Editor.tsx +++ b/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 { - + diff --git a/packages/lexical-playground/src/nodes/ImageComponent.tsx b/packages/lexical-playground/src/nodes/ImageComponent.tsx index 64aa336c589..42e8249ec66 100644 --- a/packages/lexical-playground/src/nodes/ImageComponent.tsx +++ b/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'; diff --git a/packages/lexical-playground/src/nodes/InlineImageComponent.tsx b/packages/lexical-playground/src/nodes/InlineImageComponent.tsx index 569b299e2ac..085e5ce330e 100644 --- a/packages/lexical-playground/src/nodes/InlineImageComponent.tsx +++ b/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'; diff --git a/packages/lexical-playground/src/nodes/StickyComponent.tsx b/packages/lexical-playground/src/nodes/StickyComponent.tsx index 84c5fe73131..ec3ebf6fa6b 100644 --- a/packages/lexical-playground/src/nodes/StickyComponent.tsx +++ b/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'; diff --git a/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx b/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx index fd8e1b77f55..1d446889f5d 100644 --- a/packages/lexical-playground/src/plugins/CommentPlugin/index.tsx +++ b/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'; diff --git a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx index b749e720102..79a1d150590 100644 --- a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx +++ b/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, diff --git a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx index 70d588a833e..6f6cd7084aa 100644 --- a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx +++ b/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, diff --git a/packages/lexical-playground/src/plugins/TableOfContentsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableOfContentsPlugin/index.tsx index 56fbbf7aed9..146a419b7ce 100644 --- a/packages/lexical-playground/src/plugins/TableOfContentsPlugin/index.tsx +++ b/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'; diff --git a/packages/lexical-react/flow/LexicalClickableLinkPlugin.js.flow b/packages/lexical-react/flow/LexicalClickableLinkPlugin.js.flow index 3eaa8180c80..0cc80584ed0 100644 --- a/packages/lexical-react/flow/LexicalClickableLinkPlugin.js.flow +++ b/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; diff --git a/packages/lexical-react/flow/LexicalErrorBoundary.js.flow b/packages/lexical-react/flow/LexicalErrorBoundary.js.flow index b662c492519..e94ef8f4a0b 100644 --- a/packages/lexical-react/flow/LexicalErrorBoundary.js.flow +++ b/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; diff --git a/packages/lexical-react/flow/LexicalPlainTextPlugin.js.flow b/packages/lexical-react/flow/LexicalPlainTextPlugin.js.flow index 4ad6aebc9f4..be50e13f492 100644 --- a/packages/lexical-react/flow/LexicalPlainTextPlugin.js.flow +++ b/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'; diff --git a/packages/lexical-react/flow/LexicalRichTextPlugin.js.flow b/packages/lexical-react/flow/LexicalRichTextPlugin.js.flow index b7f2c9fa2cb..a99380c5fe4 100644 --- a/packages/lexical-react/flow/LexicalRichTextPlugin.js.flow +++ b/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'; diff --git a/packages/lexical-react/flow/LexicalTableOfContents.js.flow b/packages/lexical-react/flow/LexicalTableOfContents.js.flow index 89cf65fdd59..4703aa5e376 100644 --- a/packages/lexical-react/flow/LexicalTableOfContents.js.flow +++ b/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; diff --git a/packages/lexical-react/flow/useLexicalEditable.js.flow b/packages/lexical-react/flow/useLexicalEditable.js.flow index d14d160475c..e4b9f66cf02 100644 --- a/packages/lexical-react/flow/useLexicalEditable.js.flow +++ b/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; diff --git a/packages/lexical-react/flow/useLexicalSubscription.js.flow b/packages/lexical-react/flow/useLexicalSubscription.js.flow index aa7a0f5a073..0c31f8e0f19 100644 --- a/packages/lexical-react/flow/useLexicalSubscription.js.flow +++ b/packages/lexical-react/flow/useLexicalSubscription.js.flow @@ -14,6 +14,9 @@ export type LexicalSubscription = { subscribe: (callback: (value: T) => void) => () => void, }; -declare export default function useLexicalSubscription( +declare export function useLexicalSubscription( subscription: (editor: LexicalEditor) => LexicalSubscription, ): T; + +/** @deprecated use the named export {@link useLexicalSubscription} */ +declare export default typeof useLexicalSubscription; diff --git a/packages/lexical-react/src/LexicalClickableLinkPlugin.tsx b/packages/lexical-react/src/LexicalClickableLinkPlugin.tsx index e2f8ddfb0b5..485c0b22bd0 100644 --- a/packages/lexical-react/src/LexicalClickableLinkPlugin.tsx +++ b/packages/lexical-react/src/LexicalClickableLinkPlugin.tsx @@ -32,7 +32,7 @@ function findMatchingDOM( 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; diff --git a/packages/lexical-react/src/LexicalErrorBoundary.tsx b/packages/lexical-react/src/LexicalErrorBoundary.tsx index e5866f6d9f9..d569e33d0b6 100644 --- a/packages/lexical-react/src/LexicalErrorBoundary.tsx +++ b/packages/lexical-react/src/LexicalErrorBoundary.tsx @@ -6,7 +6,6 @@ * */ -import * as React from 'react'; import {ErrorBoundary as ReactErrorBoundary} from 'react-error-boundary'; export type LexicalErrorBoundaryProps = { @@ -14,7 +13,7 @@ export type LexicalErrorBoundaryProps = { onError: (error: Error) => void; }; -export default function LexicalErrorBoundary({ +export function LexicalErrorBoundary({ children, onError, }: LexicalErrorBoundaryProps): JSX.Element { @@ -35,3 +34,6 @@ export default function LexicalErrorBoundary({ ); } + +/** @deprecated use the named export {@link LexicalErrorBoundary} */ +export default LexicalErrorBoundary; diff --git a/packages/lexical-react/src/LexicalPlainTextPlugin.tsx b/packages/lexical-react/src/LexicalPlainTextPlugin.tsx index 4a627a4bcce..3a13ca672eb 100644 --- a/packages/lexical-react/src/LexicalPlainTextPlugin.tsx +++ b/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'; diff --git a/packages/lexical-react/src/LexicalRichTextPlugin.tsx b/packages/lexical-react/src/LexicalRichTextPlugin.tsx index 7725243ba06..abc46555749 100644 --- a/packages/lexical-react/src/LexicalRichTextPlugin.tsx +++ b/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'; diff --git a/packages/lexical-react/src/LexicalTableOfContents.tsx b/packages/lexical-react/src/LexicalTableOfContents.tsx index 1d42b48f92f..2314a0a1825 100644 --- a/packages/lexical-react/src/LexicalTableOfContents.tsx +++ b/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 >([]); @@ -267,3 +265,6 @@ export default function LexicalTableOfContentsPlugin({ return children(tableOfContents, editor); } + +/** @deprecated use the named export {@link LexicalTableOfContents} */ +export default LexicalTableOfContents; diff --git a/packages/lexical-react/src/__tests__/unit/PlainRichTextPlugin.test.tsx b/packages/lexical-react/src/__tests__/unit/PlainRichTextPlugin.test.tsx index 42bfea40230..9a36cc4fdbe 100644 --- a/packages/lexical-react/src/__tests__/unit/PlainRichTextPlugin.test.tsx +++ b/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'; diff --git a/packages/lexical-react/src/__tests__/unit/utils.tsx b/packages/lexical-react/src/__tests__/unit/utils.tsx index c8c4beeba72..46824a9a6ad 100644 --- a/packages/lexical-react/src/__tests__/unit/utils.tsx +++ b/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({ diff --git a/packages/lexical-react/src/useLexicalEditable.ts b/packages/lexical-react/src/useLexicalEditable.ts index d3304616c47..ad0002dd11e 100644 --- a/packages/lexical-react/src/useLexicalEditable.ts +++ b/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 { return { @@ -20,6 +20,9 @@ function subscription(editor: LexicalEditor): LexicalSubscription { }; } -export default function useLexicalEditable(): boolean { +export function useLexicalEditable(): boolean { return useLexicalSubscription(subscription); } + +/** @deprecated use the named export {@link useLexicalEditable} */ +export default useLexicalEditable; diff --git a/packages/lexical-react/src/useLexicalSubscription.tsx b/packages/lexical-react/src/useLexicalSubscription.tsx index c2d88d7b016..26f06534290 100644 --- a/packages/lexical-react/src/useLexicalSubscription.tsx +++ b/packages/lexical-react/src/useLexicalSubscription.tsx @@ -20,7 +20,7 @@ export type LexicalSubscription = { /** * Shortcut to Lexical subscriptions when values are used for render. */ -export default function useLexicalSubscription( +export function useLexicalSubscription( subscription: (editor: LexicalEditor) => LexicalSubscription, ): T { const [editor] = useLexicalComposerContext(); @@ -46,3 +46,6 @@ export default function useLexicalSubscription( return value; } + +/** @deprecated use the named export {@link useLexicalSubscription} */ +export default useLexicalSubscription; diff --git a/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx b/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx index 07b63a7f519..9c6d435e587 100644 --- a/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx +++ b/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'; diff --git a/packages/lexical-utils/src/__tests__/unit/LexicalEventHelpers.test.tsx b/packages/lexical-utils/src/__tests__/unit/LexicalEventHelpers.test.tsx index 089dd086ad1..de2bfcb7950 100644 --- a/packages/lexical-utils/src/__tests__/unit/LexicalEventHelpers.test.tsx +++ b/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 { diff --git a/packages/lexical-website/docs/collaboration/react.md b/packages/lexical-website/docs/collaboration/react.md index d5daf803ef0..94d36a53fbb 100644 --- a/packages/lexical-website/docs/collaboration/react.md +++ b/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'; diff --git a/packages/lexical-website/docs/getting-started/react.md b/packages/lexical-website/docs/getting-started/react.md index b5ec59a2086..18ee264586e 100644 --- a/packages/lexical-website/docs/getting-started/react.md +++ b/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 diff --git a/packages/lexical-website/docs/getting-started/theming.md b/packages/lexical-website/docs/getting-started/theming.md index 352daf21619..497c0b0ba16 100644 --- a/packages/lexical-website/docs/getting-started/theming.md +++ b/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}; diff --git a/packages/lexical-website/docs/react/plugins.md b/packages/lexical-website/docs/react/plugins.md index 46090ef15a5..9e693ad96ba 100644 --- a/packages/lexical-website/docs/react/plugins.md +++ b/packages/lexical-website/docs/react/plugins.md @@ -169,18 +169,20 @@ Adds markdown shortcut support: headings, lists, code blocks, quotes, links and ``` -### `TableOfContentsPlugin` -This plugin allows you to navigate to certain sections of the page by clicking on headings that exist inside these sections. Once you load the plugin, it automatically collects and injects the headings of the page inside the table of contents, then it listens to any deletions or modifications to those headings and updates the table of contents. Additionally, it's able to track any newly added headings and inserts them in the table of contents once they are created. This plugin also supports lazy loading - so you can defer adding the plugin until when the user needs it. -```jsx - -``` -You can alternatively leverage the use of `LexicalTableOfContents` API, which provides you with all the functionality that `TableOfContentsPlugin` provides, but without any styling. +### `LexicalTableOfContents` + +This plugin allows you to render a table of contents for a page from the headings from the editor. It listens to any deletions or modifications to those headings and updates the table of contents. Additionally, it's able to track any newly added headings and inserts them in the table of contents once they are created. This plugin also supports lazy loading - so you can defer adding the plugin until when the user needs it. + In order to use `LexicalTableOfContents`, you need to pass a callback function in its children. This callback function gives you access to the up-to-date data of the table of contents. You can access this data through a single parameter for the callback which comes in the form of an array of arrays `[[headingKey, headingTextContent, headingTag], [], [], ...]` -`headingKey`: Unique key that identifies the heading.`headingTextContent`: A string of the exact text of the heading.`headingTag`: A string that reads either 'h1', 'h2', or 'h3'. + +`headingKey`: Unique key that identifies the heading. +`headingTextContent`: A string of the exact text of the heading. +`headingTag`: A string that reads either 'h1', 'h2', or 'h3'. + ```jsx {(tableOfContentsArray) => { - return ; + return ; }} ``` diff --git a/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx b/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx index bcc1d1add5b..00ef31b47a3 100644 --- a/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx +++ b/packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx @@ -8,7 +8,7 @@ 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 { $createTableCellNode, diff --git a/packages/lexical/src/__tests__/unit/LexicalListPlugin.test.tsx b/packages/lexical/src/__tests__/unit/LexicalListPlugin.test.tsx index f9e6544fe95..93431a27beb 100644 --- a/packages/lexical/src/__tests__/unit/LexicalListPlugin.test.tsx +++ b/packages/lexical/src/__tests__/unit/LexicalListPlugin.test.tsx @@ -8,7 +8,7 @@ import {ListItemNode, ListNode} 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 {ListPlugin} from '@lexical/react/LexicalListPlugin'; import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin'; import { diff --git a/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/components/App.tsx b/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/components/App.tsx index a6565cccf2c..46c35127143 100644 --- a/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/components/App.tsx +++ b/scripts/__tests__/integration/fixtures/lexical-esm-astro-react/src/components/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"; import { diff --git a/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/app/EditorUseClient.tsx b/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/app/EditorUseClient.tsx index b23d2947951..7d626911e23 100644 --- a/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/app/EditorUseClient.tsx +++ b/scripts/__tests__/integration/fixtures/lexical-esm-nextjs/app/EditorUseClient.tsx @@ -9,7 +9,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"; import {