@byline/richtext-lexical 1.11.1 → 1.12.0

package/src/field/extensions/README.md

@@ -0,0 +1,31 @@
+# `@byline/richtext-lexical` extensions
+
+Every built-in feature of the Lexical adapter — and every supported way for a third party to extend it — lives in this directory as a Lexical `defineExtension(...)` co-located with its node class(es), modal, decorator, and (where relevant) populate visitor.
+
+This README is a navigation aid only. The full reference and authoring contract lives in the project's [`docs/RICHTEXT.md`](../../../../../docs/RICHTEXT.md) — start with the **Extensibility** section.
+
+## What's where
+
+| Directory | What it owns |
+|---|---|
+| `byline-toolbar/` | `BylineToolbarExtension` — the registry that built-in and third-party extensions contribute toolbar items into via `peerDependencies`. |
+| `byline-floating-ui/` | `BylineFloatingUIExtension` — the registry every floating UI (link editor, table action menu, format pop-over, third-party) plugs into via `peerDependencies`. |
+| `floating-text-format/` | Standalone extension that contributes the selection-format pop-over to `BylineFloatingUIExtension`. |
+| `link/` | `LinkExtension`, `AutoLinkExtension`, link node + paste handling + `FloatingLinkEditorPlugin` (contributed back via peer dep), and the link populate visitor. |
+| `table/` | `TableExtension` (Byline wrapper over `@lexical/table`), the table modal, and the `TableActionMenuPlugin` (contributed to the floating-UI registry). |
+| `inline-image/` | `InlineImageExtension`, node + decorator + modal, picker-time embed, and the populate visitor for `{ title, altText, image, sizes }`. |
+| `layout/` | `LayoutExtension`, columns layout node + modal. |
+| `admonition/` | `AdmonitionExtension`, admonition node + modal. |
+| `auto-embed/` | `AutoEmbedExtension` — paste-to-embed UX shared by the YouTube/Vimeo embedders. |
+| `youtube/`, `vimeo/` | Embed extensions and their node decorators. |
+| `code-highlight/` | Syntax-highlight extension over `@lexical/code`. |
+| `horizontal-rule/` | Byline wrapper over the upstream `@lexical/react/LexicalHorizontalRuleNode`. |
+
+## Adding a new extension
+
+1. Create a directory next to these.
+2. Implement your `defineExtension(...)` (and any nodes / decorators).
+3. To contribute a toolbar item or a floating UI, declare a peer dependency against `BylineToolbarExtension` / `BylineFloatingUIExtension` — see the worked recipes in `docs/RICHTEXT.md`.
+4. Either register your extension at site level via `lexicalEditor((c) => c.extensions.add(MyExtension))`, or — if it's a built-in being shipped by this package — append it to `defaultExtensionsArray()` in `field/config/default-extensions.ts`.
+
+You should never need to touch `field/editor.tsx` to add a feature.

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

@@ -12,19 +12,29 @@ import * as React from 'react'
 import { useEffect } from 'react'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { ReactExtension } from '@lexical/react/ReactExtension'
 import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
 import {
   $getSelection,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_NORMAL,
+  configExtension,
   createCommand,
+  declarePeerDependency,
+  defineExtension,
   type LexicalCommand,
 } from 'lexical'
 
-import { $createAdmonitionNode, AdmonitionNode } from '../../nodes/admonition-node'
+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 { AdmonitionModal } from './admonition-modal'
-import type { AdmonitionAttributes } from '../../nodes/admonition-node/types'
+import { $createAdmonitionNode, AdmonitionNode } from './admonition-node'
+import type { AdmonitionAttributes } from './node-types'
 import type { AdmonitionData } from './types'
 
 export type InsertAdmonitionPayload = Readonly<AdmonitionAttributes>
@@ -103,3 +113,36 @@ export function AdmonitionPlugin(): React.JSX.Element {
     />
   )
 }
+
+function AdmonitionInsertItem(): React.JSX.Element {
+  const editor = useToolbarActiveEditor()
+  return (
+    <DropDownItem
+      onClick={() => {
+        editor.dispatchCommand(OPEN_ADMONITION_MODAL_COMMAND, null)
+      }}
+      className="item"
+    >
+      <i className="icon admonition" />
+      <span className="text">Admonition</span>
+    </DropDownItem>
+  )
+}
+
+export const AdmonitionExtension = defineExtension({
+  name: '@byline/richtext-lexical/Admonition',
+  nodes: () => [AdmonitionNode],
+  dependencies: [configExtension(ReactExtension, { decorators: [<AdmonitionPlugin key="d" />] })],
+  peerDependencies: [
+    declarePeerDependency<typeof BylineToolbarExtension>(BylineToolbarExtension.name, {
+      items: [
+        {
+          id: '@byline/richtext-lexical/Admonition/insert',
+          placement: 'insert-menu',
+          order: 30,
+          node: <AdmonitionInsertItem />,
+        },
+      ],
+    } satisfies Partial<BylineToolbarConfig>),
+  ],
+})

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

@@ -22,7 +22,7 @@ import {
 } from '@byline/ui/react'
 
 import { admonitionTypeOptions, getInitialState, validateFields } from './fields'
-import type { AdmonitionType } from '../../nodes/admonition-node/types'
+import type { AdmonitionType } from './node-types'
 import type { AdmonitionDrawerProps, AdmonitionFormState } from './types'
 
 import './admonition-modal.css'

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

@@ -35,18 +35,18 @@ import {
 } from 'lexical'
 
 import { useEditorConfig } from '../../config/editor-config-context'
-// import { LinkPlugin } from '../../plugins/link-plugin/link'
-// import { FloatingLinkEditorPlugin } from '../../plugins/link-plugin/link/floating-link-editor'
+// import { LinkPlugin } from '../link/link-extension'
+// import { FloatingLinkEditorPlugin } from '../link/floating-link-editor'
 import { ContentEditable } from '../../content-editable'
 import { useSharedHistoryContext } from '../../context/shared-history-context'
 import { useSharedOnChange } from '../../context/shared-on-change-context'
-import { AdmonitionModal } from '../../plugins/admonition-plugin/admonition-modal'
 import { Placeholder } from '../../ui/placeholder'
+import { AdmonitionModal } from './admonition-modal'
 import { $isAdmonitionNode } from './admonition-node'
 import { DangerIcon, NoteIcon, TipIcon, WarningIcon } from './icons'
-import type { AdmonitionData } from '../../plugins/admonition-plugin/types'
 import type { AdmonitionNode } from './admonition-node'
-import type { AdmonitionAttributes, AdmonitionType } from './types'
+import type { AdmonitionAttributes, AdmonitionType } from './node-types'
+import type { AdmonitionData } from './types'
 
 import './admonition-node-component.css'
 

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

@@ -21,7 +21,7 @@ import type {
 } from 'lexical'
 import { $applyNodeReplacement, createEditor, DecoratorNode } from 'lexical'
 
-import type { AdmonitionAttributes, AdmonitionType, SerializedAdmonitionNode } from './types'
+import type { AdmonitionAttributes, AdmonitionType, SerializedAdmonitionNode } from './node-types'
 
 const AdmonitionNodeComponent = React.lazy(async () => await import('./admonition-node-component'))
 

package/src/field/{plugins/admonition-plugin → extensions/admonition}/fields.ts

@@ -8,7 +8,7 @@
 
 import type { RadioGroupValue } from '@byline/ui/react'
 
-import type { AdmonitionType } from '../../nodes/admonition-node'
+import type { AdmonitionType } from './node-types'
 import type { AdmonitionFormState } from './types'
 
 export const admonitionTypeOptions: RadioGroupValue[] = [

package/src/field/{nodes/admonition-node → extensions/admonition}/index.ts

@@ -11,4 +11,8 @@ export * from './admonition-node'
 // lazily via `React.lazy` inside `admonition-node.tsx` so it can land in
 // its own chunk. Re-exporting it here would static-import it back into
 // any consumer of this barrel and defeat the split.
-export * from './types'
+//
+// Likewise NOT re-exported: `admonition-extension.tsx` and its dependencies
+// (`admonition-modal.tsx`, `fields.ts`, `types.ts`) — those pull React UI
+// and would bloat consumers that only want the node class.
+export * from './node-types'

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

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-import type { AdmonitionType } from '../../nodes/admonition-node/types'
+import type { AdmonitionType } from './node-types'
 
 export interface AdmonitionFormState {
   title: {

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

@@ -15,13 +15,26 @@ import {
   AutoEmbedOption,
   type EmbedConfig,
   type EmbedMatchResult,
+  INSERT_EMBED_COMMAND,
   LexicalAutoEmbedPlugin,
 } from '@lexical/react/LexicalAutoEmbedPlugin'
-import type { LexicalEditor } from 'lexical'
+import { ReactExtension } from '@lexical/react/ReactExtension'
+import {
+  configExtension,
+  declarePeerDependency,
+  defineExtension,
+  type LexicalEditor,
+} from 'lexical'
 import * as ReactDOM from 'react-dom'
 
-import { INSERT_VIMEO_COMMAND } from '../vimeo-plugin'
-import { INSERT_YOUTUBE_COMMAND } from '../youtube-plugin'
+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 { INSERT_VIMEO_COMMAND } from '../vimeo/vimeo-extension'
+import { INSERT_YOUTUBE_COMMAND } from '../youtube/youtube-extension'
 
 // import { INSERT_FIGMA_COMMAND } from '../FigmaPlugin'
 // import { INSERT_TWEET_COMMAND } from '../TwitterPlugin'
@@ -321,3 +334,33 @@ export function AutoEmbedPlugin(): React.JSX.Element {
     </>
   )
 }
+
+function EmbedInsertItem({ embedConfig }: { embedConfig: AutoEmbedConfig }): React.JSX.Element {
+  const editor = useToolbarActiveEditor()
+  return (
+    <DropDownItem
+      onClick={() => {
+        editor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type)
+      }}
+      className="item"
+    >
+      {embedConfig.icon}
+      <span className="text">{embedConfig.contentName}</span>
+    </DropDownItem>
+  )
+}
+
+export const AutoEmbedExtension = defineExtension({
+  name: '@byline/richtext-lexical/AutoEmbed',
+  dependencies: [configExtension(ReactExtension, { decorators: [<AutoEmbedPlugin key="d" />] })],
+  peerDependencies: [
+    declarePeerDependency<typeof BylineToolbarExtension>(BylineToolbarExtension.name, {
+      items: EmbedConfigs.map((embedConfig, idx) => ({
+        id: `@byline/richtext-lexical/AutoEmbed/${embedConfig.type}`,
+        placement: 'insert-menu' as const,
+        order: 60 + idx,
+        node: <EmbedInsertItem embedConfig={embedConfig} />,
+      })),
+    } satisfies Partial<BylineToolbarConfig>),
+  ],
+})

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

@@ -4,7 +4,7 @@ import { Button, CloseIcon, IconButton, Input, Modal } from '@byline/ui/react'
 import { type EmbedMatchResult, URL_MATCHER } from '@lexical/react/LexicalAutoEmbedPlugin'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 
-import type { AutoEmbedConfig } from './index'
+import type { AutoEmbedConfig } from './auto-embed-extension'
 
 const debounce = (callback: (text: string) => void, delay: number): ((text: string) => void) => {
   let timeoutId: number

package/src/field/extensions/byline-floating-ui/byline-floating-ui-extension.ts

@@ -0,0 +1,90 @@
+/**
+ * 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 type * as React from 'react'
+
+import { defineExtension, safeCast, shallowMergeConfig } from 'lexical'
+
+/**
+ * Props passed by `Editor.tsx` to every registered floating-UI component.
+ * The component renders itself (usually via `createPortal(..., anchorElem)`)
+ * inside the editor's floating slot.
+ */
+export interface BylineFloatingUIProps {
+  anchorElem: HTMLElement
+}
+
+export interface BylineFloatingUIItem {
+  /**
+   * Stable identifier — used as React key and for de-duplication.
+   * Convention: `<extension-name>/<purpose>`, e.g.
+   * `'@byline/richtext-lexical/Link/floating-editor'`.
+   */
+  id: string
+  /**
+   * The floating UI component. Receives `anchorElem` (the editor's
+   * inner content-editable wrapper) as a prop and is expected to portal
+   * itself into that element.
+   */
+  Component: React.ComponentType<BylineFloatingUIProps>
+  /** Sort key — lower numbers render first. Mostly cosmetic. */
+  order?: number
+}
+
+export interface BylineFloatingUIConfig {
+  items: BylineFloatingUIItem[]
+}
+
+/**
+ * The floating-UI contract. Other extensions contribute floating UIs by
+ * listing `BylineFloatingUIExtension` in their `peerDependencies` and
+ * supplying an `items` array. The editor's floating slot reads the merged
+ * list once and renders every contributor under the shared anchor.
+ *
+ * Mirror of `BylineToolbarExtension` for the floating-UI surface — same
+ * pattern, same authoring shape.
+ *
+ * @example
+ * ```ts
+ * import { declarePeerDependency, defineExtension } from 'lexical'
+ * import { BylineFloatingUIExtension } from '@byline/richtext-lexical'
+ *
+ * export const MyExtension = defineExtension({
+ *   name: '@example/MyExtension',
+ *   peerDependencies: [
+ *     declarePeerDependency<typeof BylineFloatingUIExtension>(
+ *       BylineFloatingUIExtension.name,
+ *       {
+ *         items: [{
+ *           id: '@example/MyExtension/floating',
+ *           Component: MyFloatingPopover,
+ *         }],
+ *       }
+ *     ),
+ *   ],
+ * })
+ * ```
+ */
+export const BylineFloatingUIExtension = defineExtension({
+  name: '@byline/richtext-lexical/FloatingUI',
+  config: safeCast<BylineFloatingUIConfig>({ items: [] }),
+  mergeConfig(a, b) {
+    const merged = shallowMergeConfig(a, b)
+    if (b.items && b.items.length > 0) {
+      merged.items = [...a.items, ...b.items]
+    }
+    return merged
+  },
+})
+
+/** Sort helper used by the editor's floating-UI slot. */
+export function selectFloatingUIItems(
+  items: ReadonlyArray<BylineFloatingUIItem>
+): BylineFloatingUIItem[] {
+  return items.slice().sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+}

package/src/field/extensions/byline-floating-ui/index.ts

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+export {
+  type BylineFloatingUIConfig,
+  BylineFloatingUIExtension,
+  type BylineFloatingUIItem,
+  type BylineFloatingUIProps,
+  selectFloatingUIItems,
+} from './byline-floating-ui-extension'

package/src/field/extensions/byline-toolbar/byline-toolbar-extension.ts

@@ -0,0 +1,95 @@
+/**
+ * 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 type * as React from 'react'
+
+import { defineExtension, safeCast, shallowMergeConfig } from 'lexical'
+
+/**
+ * Where in the Byline toolbar a contributed item is rendered. Built-in
+ * extensions and third-party extensions both contribute against these
+ * placements via `peerDependencies`; the toolbar plugin reads the merged
+ * list and dispatches by `placement`.
+ *
+ * - `'toolbar'` — appended to the end of the main toolbar row.
+ * - `'insert-menu'` — listed inside the "Insert" dropdown that the
+ *   toolbar shows when at least one insert-menu contribution exists.
+ */
+export type BylineToolbarPlacement = 'toolbar' | 'insert-menu'
+
+export interface BylineToolbarItem {
+  /**
+   * Stable identifier — used as React key and for de-duplication.
+   * Convention: `<extension-name>/<purpose>`, e.g.
+   * `'@byline/richtext-lexical/InlineImage/insert'`.
+   */
+  id: string
+  placement: BylineToolbarPlacement
+  /** Sort key within `placement`. Lower numbers render first. */
+  order?: number
+  node: React.ReactNode
+}
+
+export interface BylineToolbarConfig {
+  items: BylineToolbarItem[]
+}
+
+/**
+ * The toolbar contract. Other extensions add toolbar entries by listing
+ * `BylineToolbarExtension` in their `peerDependencies` and supplying an
+ * `items` array — the configs are merged across every contributor and
+ * read once by the toolbar plugin.
+ *
+ * @example
+ * ```ts
+ * import { declarePeerDependency, defineExtension } from 'lexical'
+ * import { BylineToolbarExtension } from '@byline/richtext-lexical'
+ *
+ * export const MyExtension = defineExtension({
+ *   name: '@example/MyExtension',
+ *   peerDependencies: [
+ *     declarePeerDependency<typeof BylineToolbarExtension>(
+ *       BylineToolbarExtension.name,
+ *       {
+ *         items: [{
+ *           id: '@example/MyExtension/insert',
+ *           placement: 'insert-menu',
+ *           order: 100,
+ *           node: <MyInsertMenuItem />,
+ *         }],
+ *       }
+ *     ),
+ *   ],
+ * })
+ * ```
+ */
+export const BylineToolbarExtension = defineExtension({
+  name: '@byline/richtext-lexical/Toolbar',
+  config: safeCast<BylineToolbarConfig>({ items: [] }),
+  mergeConfig(a, b) {
+    const merged = shallowMergeConfig(a, b)
+    if (b.items && b.items.length > 0) {
+      merged.items = [...a.items, ...b.items]
+    }
+    return merged
+  },
+})
+
+/**
+ * Sort and filter helper used by `toolbar-plugin` and any external
+ * surface that wants to render Byline toolbar contributions itself.
+ */
+export function selectToolbarItems(
+  items: ReadonlyArray<BylineToolbarItem>,
+  placement: BylineToolbarPlacement
+): BylineToolbarItem[] {
+  return items
+    .filter((item) => item.placement === placement)
+    .slice()
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+}

package/src/field/extensions/byline-toolbar/index.ts

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+export {
+  type BylineToolbarConfig,
+  BylineToolbarExtension,
+  type BylineToolbarItem,
+  type BylineToolbarPlacement,
+  selectToolbarItems,
+} from './byline-toolbar-extension'

package/src/field/extensions/code-highlight/code-highlight-extension.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { CodeHighlightNode, CodeNode, registerCodeHighlighting } from '@lexical/code'
+import { defineExtension } from 'lexical'
+
+export const CodeHighlightExtension = defineExtension({
+  name: '@byline/richtext-lexical/CodeHighlight',
+  nodes: () => [CodeNode, CodeHighlightNode],
+  register: (editor) => registerCodeHighlighting(editor),
+})

package/src/field/extensions/floating-text-format/floating-text-format-extension.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { declarePeerDependency, defineExtension } from 'lexical'
+
+import {
+  type BylineFloatingUIConfig,
+  BylineFloatingUIExtension,
+} from '../byline-floating-ui/byline-floating-ui-extension'
+import { FloatingTextFormatToolbarPlugin } from './index'
+
+/**
+ * Standalone Byline extension that contributes the floating text-format
+ * toolbar (the popover shown above a non-collapsed range selection) to
+ * the editor. Removing this extension from the registered list hides the
+ * UI — `c.extensions.remove(FloatingTextFormatExtension)`.
+ *
+ * Lives in its own extension because the popover isn't owned by any
+ * single feature: it handles bold / italic / underline / strikethrough /
+ * subscript / superscript / inline-code / link toggle in one place.
+ */
+export const FloatingTextFormatExtension = defineExtension({
+  name: '@byline/richtext-lexical/FloatingTextFormat',
+  peerDependencies: [
+    declarePeerDependency<typeof BylineFloatingUIExtension>(BylineFloatingUIExtension.name, {
+      items: [
+        {
+          id: '@byline/richtext-lexical/FloatingTextFormat/popover',
+          Component: FloatingTextFormatToolbarPlugin,
+        },
+      ],
+    } satisfies Partial<BylineFloatingUIConfig>),
+  ],
+})

package/src/field/{plugins/floating-text-format-toolbar-plugin → extensions/floating-text-format}/index.tsx

@@ -27,10 +27,10 @@ import {
 } from 'lexical'
 import { createPortal } from 'react-dom'
 
-import { $isLinkNode, type LinkAttributes, TOGGLE_LINK_COMMAND } from '../../nodes/link-nodes'
 import { getDOMRangeRect } from '../../utils/getDOMRangeRect'
 import { getSelectedNode } from '../../utils/getSelectedNode'
 import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition'
+import { $isLinkNode, type LinkAttributes, TOGGLE_LINK_COMMAND } from '../link'
 
 function TextFormatFloatingToolbar({
   editor,

package/src/field/extensions/horizontal-rule/horizontal-rule-extension.tsx

@@ -0,0 +1,57 @@
+'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 { HorizontalRuleExtension as LexicalHorizontalRuleExtension } from '@lexical/extension'
+import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode'
+import { 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'
+
+function HorizontalRuleInsertItem(): React.JSX.Element {
+  const editor = useToolbarActiveEditor()
+  return (
+    <DropDownItem
+      onClick={() => {
+        editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
+      }}
+      className="item"
+    >
+      <i className="icon horizontal-rule" />
+      <span className="text">Horizontal Rule</span>
+    </DropDownItem>
+  )
+}
+
+/**
+ * Byline wrapper around the upstream `HorizontalRuleExtension`. Adds a
+ * single insert-menu contribution; the underlying extension still owns
+ * the node registration and command behaviour.
+ */
+export const HorizontalRuleExtension = defineExtension({
+  name: '@byline/richtext-lexical/HorizontalRule',
+  dependencies: [LexicalHorizontalRuleExtension],
+  peerDependencies: [
+    declarePeerDependency<typeof BylineToolbarExtension>(BylineToolbarExtension.name, {
+      items: [
+        {
+          id: '@byline/richtext-lexical/HorizontalRule/insert',
+          placement: 'insert-menu',
+          order: 10,
+          node: <HorizontalRuleInsertItem />,
+        },
+      ],
+    } satisfies Partial<BylineToolbarConfig>),
+  ],
+})

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

@@ -7,4 +7,4 @@
  */
 
 export * from './inline-image-node'
-export * from './types'
+export * from './node-types'