@byline/richtext-lexical 1.11.1 → 1.12.0

package/src/field/{plugins/inline-image-plugin/index.tsx → extensions/inline-image/inline-image-extension.tsx}

@@ -14,6 +14,8 @@ import type * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { ReactExtension } from '@lexical/react/ReactExtension'
+import { useExtensionDependency } from '@lexical/react/useExtensionComponent'
 import { $wrapNodeInElement, mergeRegister } from '@lexical/utils'
 import {
   $createParagraphNode,
@@ -22,19 +24,25 @@ import {
   $isRootOrShadowRoot,
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_NORMAL,
+  configExtension,
   createCommand,
+  declarePeerDependency,
+  defineExtension,
   type LexicalCommand,
   type LexicalEditor,
   type NodeKey,
+  safeCast,
 } from 'lexical'
 
+import { useToolbarActiveEditor } from '../../plugins/toolbar-plugin/toolbar-active-editor'
+import { DropDownItem } from '../../ui/dropdown'
 import {
-  $createInlineImageNode,
-  $isInlineImageNode,
-  InlineImageNode,
-} from '../../nodes/inline-image-node'
+  type BylineToolbarConfig,
+  BylineToolbarExtension,
+} from '../byline-toolbar/byline-toolbar-extension'
 import { InlineImageModal } from './inline-image-modal'
-import type { InlineImageAttributes } from '../../nodes/inline-image-node/types'
+import { $createInlineImageNode, $isInlineImageNode, InlineImageNode } from './inline-image-node'
+import type { InlineImageAttributes } from './node-types'
 import type { InlineImageData } from './types'
 
 export type InsertInlineImagePayload = Readonly<InlineImageAttributes>
@@ -102,8 +110,9 @@ function readNodeAsInitialData(
   return data
 }
 
-export function InlineImagePlugin({ collection }: { collection: string }): React.JSX.Element {
+export function InlineImagePlugin(): React.JSX.Element {
   const [editor] = useLexicalComposerContext()
+  const { collection } = useExtensionDependency(InlineImageExtension).config
   const [modalState, setModalState] = useState<ModalState>(CLOSED_STATE)
 
   useEffect(() => {
@@ -200,3 +209,42 @@ export function InlineImagePlugin({ collection }: { collection: string }): React
     />
   )
 }
+
+export interface InlineImageConfig {
+  /** Upload collection that the inline-image modal targets. Required. */
+  collection: string
+}
+
+function InlineImageInsertItem(): React.JSX.Element {
+  const editor = useToolbarActiveEditor()
+  return (
+    <DropDownItem
+      onClick={() => {
+        editor.dispatchCommand(OPEN_INLINE_IMAGE_MODAL_COMMAND, null)
+      }}
+      className="item"
+    >
+      <i className="icon image" />
+      <span className="text">Inline Image</span>
+    </DropDownItem>
+  )
+}
+
+export const InlineImageExtension = defineExtension({
+  name: '@byline/richtext-lexical/InlineImage',
+  nodes: () => [InlineImageNode],
+  config: safeCast<InlineImageConfig>({ collection: '' }),
+  dependencies: [configExtension(ReactExtension, { decorators: [<InlineImagePlugin key="d" />] })],
+  peerDependencies: [
+    declarePeerDependency<typeof BylineToolbarExtension>(BylineToolbarExtension.name, {
+      items: [
+        {
+          id: '@byline/richtext-lexical/InlineImage/insert',
+          placement: 'insert-menu',
+          order: 40,
+          node: <InlineImageInsertItem />,
+        },
+      ],
+    } satisfies Partial<BylineToolbarConfig>),
+  ],
+})

package/src/field/{plugins/inline-image-plugin → extensions/inline-image}/inline-image-modal.tsx

@@ -32,7 +32,7 @@ import { useModalFormState } from '../../shared/useModalFormState'
 import { isAltTextValid, positionOptions } from './fields'
 import { deriveImageSizes, getPreferredSize } from './utils'
 import type { DocumentRelation } from '../../nodes/document-relation'
-import type { Position } from '../../nodes/inline-image-node/types'
+import type { Position } from './node-types'
 import type { InlineImageData, InlineImageModalProps } from './types'
 
 interface FormState {

package/src/field/{nodes/inline-image-node → extensions/inline-image}/inline-image-node-component.tsx

@@ -39,14 +39,14 @@ import {
 import ContentEditableInline from '../../content-editable-inline'
 import { useSharedHistoryContext } from '../../context/shared-history-context'
 import { useSharedOnChange } from '../../context/shared-on-change-context'
-import { FloatingTextFormatToolbarPlugin } from '../../plugins/floating-text-format-toolbar-plugin/index'
-import { OPEN_INLINE_IMAGE_MODAL_COMMAND } from '../../plugins/inline-image-plugin'
-import { LinkPlugin } from '../../plugins/link-plugin/link'
-import { FloatingLinkEditorPlugin } from '../../plugins/link-plugin/link/floating-link-editor'
 import PlaceholderInline from '../../ui/placeholder-inline'
+import { FloatingTextFormatToolbarPlugin } from '../floating-text-format'
+import { FloatingLinkEditorPlugin } from '../link/floating-link-editor'
+import { LinkPlugin } from '../link/link-extension'
+import { OPEN_INLINE_IMAGE_MODAL_COMMAND } from './inline-image-extension'
 import { $isInlineImageNode } from './inline-image-node'
-import type { DocumentRelation } from '../document-relation'
-import type { Position } from './types'
+import type { DocumentRelation } from '../../nodes/document-relation'
+import type { Position } from './node-types'
 
 import './inline-image-node-component.css'
 

package/src/field/{nodes/inline-image-node → extensions/inline-image}/inline-image-node.tsx

@@ -22,8 +22,8 @@ import type {
 } from 'lexical'
 import { $applyNodeReplacement, createEditor, DecoratorNode } from 'lexical'
 
-import type { DocumentRelation } from '../document-relation'
-import type { InlineImageAttributes, Position, SerializedInlineImageNode } from './types'
+import type { DocumentRelation } from '../../nodes/document-relation'
+import type { InlineImageAttributes, Position, SerializedInlineImageNode } from './node-types'
 
 const InlineImageComponent = React.lazy(async () => await import('./inline-image-node-component'))
 

package/src/field/{nodes/inline-image-node/types.ts → extensions/inline-image/node-types.ts}

@@ -14,7 +14,7 @@ import type {
   Spread,
 } from 'lexical'
 
-import type { DocumentRelation } from '../document-relation'
+import type { DocumentRelation } from '../../nodes/document-relation'
 
 export type Position = 'left' | 'right' | 'full' | 'wide' | 'default' | undefined
 

package/src/field/{plugins/inline-image-plugin → extensions/inline-image}/types.ts

@@ -7,7 +7,7 @@
  */
 
 import type { DocumentRelation } from '../../nodes/document-relation'
-import type { Position } from '../../nodes/inline-image-node/types'
+import type { Position } from './node-types'
 
 /**
  * The form-shape carried into / out of the inline image modal. Mirrors

package/src/field/{plugins/inline-image-plugin → extensions/inline-image}/utils.ts

@@ -8,7 +8,7 @@
 
 import type { StoredFileValue } from '@byline/core'
 
-import type { Position } from '../../nodes/inline-image-node/types'
+import type { Position } from './node-types'
 
 /**
  * Maps an editor `position` choice to a media-collection variant name.

package/src/field/{plugins/layout-plugin/layout-plugin.tsx → extensions/layout/layout-extension.tsx}

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { useEffect } from 'react'
 
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -10,7 +11,7 @@ import { useEffect } from 'react'
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { ReactExtension } from '@lexical/react/ReactExtension'
 import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
 import type { ElementNode, LexicalCommand, LexicalNode, NodeKey } from 'lexical'
 import {
@@ -18,20 +19,25 @@ import {
   $getNodeByKey,
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_NORMAL,
+  configExtension,
   createCommand,
+  declarePeerDependency,
+  defineExtension,
 } from 'lexical'
 
+import { useToolbarActiveEditor } from '../../plugins/toolbar-plugin/toolbar-active-editor'
+import { DropDownItem } from '../../ui/dropdown'
+import {
+  type BylineToolbarConfig,
+  BylineToolbarExtension,
+} from '../byline-toolbar/byline-toolbar-extension'
+import { InsertLayoutModal } from './insert-layout-modal'
 import {
   $createLayoutContainerNode,
   $isLayoutContainerNode,
   LayoutContainerNode,
-} from '../../nodes/layout-container-node/layout-container-node'
-import {
-  $createLayoutItemNode,
-  $isLayoutItemNode,
-  LayoutItemNode,
-} from '../../nodes/layout-container-node/layout-item-node'
-import { InsertLayoutModal } from './insert-layout-modal'
+} from './layout-container-node'
+import { $createLayoutItemNode, $isLayoutItemNode, LayoutItemNode } from './layout-item-node'
 
 export const OPEN_INSERT_LAYOUT_MODAL_COMMAND = createCommand('OPEN_INSERT_LAYOUT_MODAL_COMMAND')
 
@@ -160,3 +166,36 @@ export function LayoutPlugin(): React.JSX.Element {
 function getItemsCountFromTemplate(template: string): number {
   return template.trim().split(/\s+/).length
 }
+
+function LayoutInsertItem(): React.JSX.Element {
+  const editor = useToolbarActiveEditor()
+  return (
+    <DropDownItem
+      onClick={() => {
+        editor.dispatchCommand(OPEN_INSERT_LAYOUT_MODAL_COMMAND, null)
+      }}
+      className="item"
+    >
+      <i className="icon columns" />
+      <span className="text">Columns Layout</span>
+    </DropDownItem>
+  )
+}
+
+export const LayoutExtension = defineExtension({
+  name: '@byline/richtext-lexical/Layout',
+  nodes: () => [LayoutContainerNode, LayoutItemNode],
+  dependencies: [configExtension(ReactExtension, { decorators: [<LayoutPlugin key="d" />] })],
+  peerDependencies: [
+    declarePeerDependency<typeof BylineToolbarExtension>(BylineToolbarExtension.name, {
+      items: [
+        {
+          id: '@byline/richtext-lexical/Layout/insert',
+          placement: 'insert-menu',
+          order: 20,
+          node: <LayoutInsertItem />,
+        },
+      ],
+    } satisfies Partial<BylineToolbarConfig>),
+  ],
+})

package/src/field/{plugins/link-plugin/auto-link/index.tsx → extensions/link/auto-link-extension.tsx}

@@ -1,15 +1,20 @@
 'use client'
 
 /**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
+ * Copyright (c) Infonomic Company Limited
  *
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
  */
 
 import type * as React from 'react'
 
+import { ReactExtension } from '@lexical/react/ReactExtension'
+import { configExtension, defineExtension } from 'lexical'
+
 import {
   createLinkMatcherWithRegExp,
   AutoLinkPlugin as LexicalAutoLinkPlugin,
@@ -33,3 +38,8 @@ const MATCHERS = [
 export function AutoLinkPlugin(): React.JSX.Element {
   return <LexicalAutoLinkPlugin matchers={MATCHERS} />
 }
+
+export const AutoLinkExtension = defineExtension({
+  name: '@byline/richtext-lexical/AutoLink',
+  dependencies: [configExtension(ReactExtension, { decorators: [<AutoLinkPlugin key="d" />] })],
+})

package/src/field/{plugins/link-plugin/auto-link → extensions/link}/auto-link-plugin.tsx

@@ -15,6 +15,7 @@ import { mergeRegister } from '@lexical/utils'
 import type { ElementNode, LexicalEditor, LexicalNode } from 'lexical'
 import { $createTextNode, $isElementNode, $isLineBreakNode, $isTextNode, TextNode } from 'lexical'
 
+import invariant from '../../shared/invariant'
 import {
   $createAutoLinkNode,
   $isAutoLinkNode,
@@ -22,8 +23,7 @@ import {
   AutoLinkNode,
   type CustomLinkAttributes,
   type LinkAttributes,
-} from '../../../nodes/link-nodes'
-import invariant from '../../../shared/invariant'
+} from '.'
 
 type ChangeHandler = (url: string | null, prevUrl: string | null) => void
 

package/src/field/{plugins/link-plugin → extensions}/link/floating-link-editor.css

@@ -67,7 +67,7 @@
 }
 
 .link-editor div.link-edit {
-  background-image: url(../../../images/icons/pencil-fill.svg);
+  background-image: url(../../images/icons/pencil-fill.svg);
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
@@ -81,7 +81,7 @@
 }
 
 .link-editor div.link-trash {
-  background-image: url(../../../images/icons/trash.svg);
+  background-image: url(../../images/icons/trash.svg);
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;

package/src/field/{plugins/link-plugin → extensions}/link/floating-link-editor.tsx

@@ -29,18 +29,18 @@ import {
 } from 'lexical'
 import { createPortal } from 'react-dom'
 
+import { getSelectedNode } from '../../utils/getSelectedNode'
+import { setFloatingElemPositionForLinkEditor } from '../../utils/setFloatingElemPositionForLinkEditor'
+import { sanitizeUrl } from '../../utils/url'
 import {
   $isAutoLinkNode,
   $isLinkNode,
   type LinkAttributes,
   OPEN_LINK_MODAL_COMMAND,
   TOGGLE_LINK_COMMAND,
-} from '../../../nodes/link-nodes'
-import { getSelectedNode } from '../../../utils/getSelectedNode'
-import { setFloatingElemPositionForLinkEditor } from '../../../utils/setFloatingElemPositionForLinkEditor'
-import { sanitizeUrl } from '../../../utils/url'
+} from '.'
 import { LinkModal } from './link-modal'
-import type { LinkData } from './types'
+import type { LinkData } from './link-modal-types'
 
 import './floating-link-editor.css'
 

package/src/field/extensions/link/index.ts

@@ -0,0 +1,5 @@
+export { AutoLinkExtension } from './auto-link-extension'
+export * from './auto-link-node'
+export { LinkExtension, registerLink } from './link-extension'
+export * from './link-node'
+export * from './types'

package/src/field/extensions/link/link-extension.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ *
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ */
+
+import { useEffect } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { mergeRegister } from '@lexical/utils'
+import {
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  declarePeerDependency,
+  defineExtension,
+  type LexicalEditor,
+  PASTE_COMMAND,
+} from 'lexical'
+
+import { validateUrl } from '../../utils/url'
+import {
+  type BylineFloatingUIConfig,
+  BylineFloatingUIExtension,
+} from '../byline-floating-ui/byline-floating-ui-extension'
+import { $toggleLink, AutoLinkNode, type LinkAttributes, LinkNode, TOGGLE_LINK_COMMAND } from '.'
+import { FloatingLinkEditorPlugin } from './floating-link-editor'
+
+/**
+ * Registers Byline's custom link command + paste handling on `editor`.
+ * Shared between the LinkPlugin React shell (used inside nested composers)
+ * and the LinkExtension's `register` phase (used by the top-level editor).
+ */
+export function registerLink(editor: LexicalEditor): () => void {
+  return mergeRegister(
+    editor.registerCommand(
+      TOGGLE_LINK_COMMAND,
+      (payload: LinkAttributes | null) => {
+        if (payload === null) {
+          $toggleLink(payload)
+          return true
+        }
+
+        // For custom links, accept either a fully-formed URL or a
+        // root-relative path (starts with `/`). Drop the command when the
+        // URL is unusable so the toolbar doesn't insert garbage.
+        if (payload.linkType === 'custom') {
+          const url = payload.url ?? ''
+          if (!url.startsWith('/') && !validateUrl(url)) {
+            return false
+          }
+        }
+
+        $toggleLink(payload)
+        return true
+      },
+      COMMAND_PRIORITY_LOW
+    ),
+
+    editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        const selection = $getSelection()
+        if (
+          !$isRangeSelection(selection) ||
+          selection.isCollapsed() ||
+          !(event instanceof ClipboardEvent) ||
+          event.clipboardData == null
+        ) {
+          return false
+        }
+        const clipboardText = event.clipboardData.getData('text')
+        if (!validateUrl(clipboardText)) {
+          return false
+        }
+        // Don't auto-link when the selection spans block-level nodes.
+        if (selection.getNodes().some((node) => $isElementNode(node))) {
+          return false
+        }
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
+          linkType: 'custom',
+          url: clipboardText,
+        })
+        event.preventDefault()
+        return true
+      },
+      COMMAND_PRIORITY_LOW
+    )
+  )
+}
+
+/**
+ * Legacy React shell — still used inside the inline-image nested composer
+ * (`inline-image-node-component.tsx`) where the nested editor needs link
+ * behaviour wired up. The top-level editor uses `LinkExtension` instead.
+ */
+export function LinkPlugin(): null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([LinkNode])) {
+      throw new Error('LinkPlugin: LinkNode not registered on editor')
+    }
+    return registerLink(editor)
+  }, [editor])
+
+  return null
+}
+
+export const LinkExtension = defineExtension({
+  name: '@byline/richtext-lexical/Link',
+  nodes: () => [LinkNode, AutoLinkNode],
+  register: registerLink,
+  peerDependencies: [
+    declarePeerDependency<typeof BylineFloatingUIExtension>(BylineFloatingUIExtension.name, {
+      items: [
+        {
+          id: '@byline/richtext-lexical/Link/floating-editor',
+          Component: FloatingLinkEditorPlugin,
+        },
+      ],
+    } satisfies Partial<BylineFloatingUIConfig>),
+  ],
+})

package/src/field/{plugins/link-plugin/link/types.ts → extensions/link/link-modal-types.ts}

@@ -1,4 +1,4 @@
-import type { LinkAttributes } from '../../../nodes/link-nodes'
+import type { LinkAttributes } from '.'
 
 /**
  * The payload of a link node

package/src/field/{plugins/link-plugin → extensions}/link/link-modal.tsx

@@ -28,12 +28,12 @@ import {
   type SelectValue,
 } from '@byline/ui/react'
 
-import { useEditorConfig } from '../../../config/editor-config-context'
-import { useModalFormState } from '../../../shared/useModalFormState'
-import { validateUrl } from '../../../utils/url'
-import type { DocumentRelation } from '../../../nodes/document-relation'
-import type { LinkAttributes } from '../../../nodes/link-nodes'
-import type { LinkData, LinkModalProps } from './types'
+import { useEditorConfig } from '../../config/editor-config-context'
+import { useModalFormState } from '../../shared/useModalFormState'
+import { validateUrl } from '../../utils/url'
+import type { DocumentRelation } from '../../nodes/document-relation'
+import type { LinkAttributes } from '.'
+import type { LinkData, LinkModalProps } from './link-modal-types'
 
 interface FormState {
   text: string

package/src/field/{nodes/link-nodes → extensions/link}/types.ts

@@ -1,6 +1,6 @@
 import type { SerializedElementNode, Spread } from 'lexical'
 
-import type { DocumentRelation } from '../document-relation'
+import type { DocumentRelation } from '../../nodes/document-relation'
 
 interface BaseLinkAttributes {
   newTab?: boolean

package/src/field/{plugins → extensions/table}/table-action-menu-plugin/index.tsx

@@ -14,6 +14,7 @@ import type * as React from 'react'
 import { type ReactPortal, useCallback, useEffect, useRef, useState } from 'react'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useExtensionDependency } from '@lexical/react/useExtensionComponent'
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable'
 import {
   $deleteTableColumnAtSelection,
@@ -31,6 +32,7 @@ import {
   $unmergeCell,
   getTableObserverFromTableElement,
   type HTMLTableElementWithWithTableSelectionState,
+  TableExtension as LexicalTableExtension,
   TableCellHeaderStates,
   TableCellNode,
   type TableRowNode,
@@ -48,9 +50,9 @@ import {
 } from 'lexical'
 import { createPortal } from 'react-dom'
 
-import useModal from '../../hooks/use-modal'
-import invariant from '../../shared/invariant'
-import ColorPicker from '../../ui/color-picker'
+import useModal from '../../../hooks/use-modal'
+import invariant from '../../../shared/invariant'
+import ColorPicker from '../../../ui/color-picker'
 
 function computeSelectionCount(selection: TableSelection): {
   columns: number
@@ -788,16 +790,18 @@ function TableCellActionMenuContainer({
 }
 
 export function TableActionMenuPlugin({
-  anchorElem = document.body,
-  cellMerge = false,
+  anchorElem,
 }: {
-  anchorElem?: HTMLElement
-  cellMerge?: boolean
+  anchorElem: HTMLElement
 }): null | ReactPortal {
   const isEditable = useLexicalEditable()
+  // Read the upstream `@lexical/table` config so the cell-merge UI lives
+  // in lockstep with `c.extensions.configure(LexicalTableExtension, {...})`
+  // instead of needing a separate prop wired from `Editor.tsx`.
+  const { hasCellMerge } = useExtensionDependency(LexicalTableExtension).config
   return createPortal(
     isEditable ? (
-      <TableCellActionMenuContainer anchorElem={anchorElem} cellMerge={cellMerge} />
+      <TableCellActionMenuContainer anchorElem={anchorElem} cellMerge={hasCellMerge ?? false} />
     ) : null,
     anchorElem
   )

package/src/field/extensions/table/table-extension.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { TableExtension as LexicalTableExtension } from '@lexical/table'
+import { configExtension, declarePeerDependency, defineExtension } from 'lexical'
+
+import { OPEN_TABLE_MODAL_COMMAND } from '../../plugins/table-plugin'
+import { useToolbarActiveEditor } from '../../plugins/toolbar-plugin/toolbar-active-editor'
+import { DropDownItem } from '../../ui/dropdown'
+import {
+  type BylineFloatingUIConfig,
+  BylineFloatingUIExtension,
+} from '../byline-floating-ui/byline-floating-ui-extension'
+import {
+  type BylineToolbarConfig,
+  BylineToolbarExtension,
+} from '../byline-toolbar/byline-toolbar-extension'
+import { TableActionMenuPlugin } from './table-action-menu-plugin'
+
+function TableInsertItem(): React.JSX.Element {
+  const editor = useToolbarActiveEditor()
+  return (
+    <DropDownItem
+      onClick={() => {
+        editor.dispatchCommand(OPEN_TABLE_MODAL_COMMAND, null)
+      }}
+      className="item"
+    >
+      <i className="icon table" />
+      <span className="text">Table</span>
+    </DropDownItem>
+  )
+}
+
+/**
+ * Byline wrapper around `@lexical/table`'s `TableExtension`. Forwards
+ * cell-merge / cell-background-color config to the upstream extension
+ * via `configExtension` and contributes the "Insert table" toolbar item.
+ *
+ * Override the upstream config with:
+ * ```ts
+ * lexicalEditor((c) => {
+ *   c.extensions.configure(LexicalTableExtension, {
+ *     hasCellMerge: false,
+ *     hasCellBackgroundColor: false,
+ *   })
+ *   return c
+ * })
+ * ```
+ */
+export const TableExtension = defineExtension({
+  name: '@byline/richtext-lexical/Table',
+  dependencies: [
+    configExtension(LexicalTableExtension, {
+      hasCellMerge: true,
+      hasCellBackgroundColor: true,
+    }),
+  ],
+  peerDependencies: [
+    declarePeerDependency<typeof BylineToolbarExtension>(BylineToolbarExtension.name, {
+      items: [
+        {
+          id: '@byline/richtext-lexical/Table/insert',
+          placement: 'insert-menu',
+          order: 50,
+          node: <TableInsertItem />,
+        },
+      ],
+    } satisfies Partial<BylineToolbarConfig>),
+    declarePeerDependency<typeof BylineFloatingUIExtension>(BylineFloatingUIExtension.name, {
+      items: [
+        {
+          id: '@byline/richtext-lexical/Table/action-menu',
+          Component: TableActionMenuPlugin,
+        },
+      ],
+    } satisfies Partial<BylineFloatingUIConfig>),
+  ],
+})