@byline/richtext-lexical 1.11.2 → 1.12.0

package/dist/field/{nodes/admonition-node → extensions/admonition}/admonition-node-component.js

@@ -15,8 +15,8 @@ import { useEditorConfig } from "../../config/editor-config-context.js";
 import { ContentEditable } from "../../content-editable.js";
 import { useSharedHistoryContext } from "../../context/shared-history-context.js";
 import { useSharedOnChange } from "../../context/shared-on-change-context.js";
-import { AdmonitionModal } from "../../plugins/admonition-plugin/admonition-modal.js";
 import { Placeholder } from "../../ui/placeholder.js";
+import { AdmonitionModal } from "./admonition-modal.js";
 import { $isAdmonitionNode } from "./admonition-node.js";
 import { DangerIcon, NoteIcon, TipIcon, WarningIcon } from "./icons/index.js";
 import "./admonition-node-component.css";

package/dist/field/{nodes/admonition-node → extensions/admonition}/admonition-node.d.ts

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
 import { DecoratorNode } from 'lexical';
-import type { AdmonitionAttributes, AdmonitionType, SerializedAdmonitionNode } from './types';
+import type { AdmonitionAttributes, AdmonitionType, SerializedAdmonitionNode } from './node-types';
 export declare class AdmonitionNode extends DecoratorNode<React.JSX.Element> {
     __admonitionType: AdmonitionType;
     __title: string;

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

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 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 declare const admonitionTypeOptions: RadioGroupValue[];
 export declare function getInitialState(data: {

package/dist/field/{nodes/admonition-node → extensions/admonition}/index.js

@@ -1,2 +1,2 @@
 export * from "./admonition-node.js";
-export * from "./types.js";
+export * from "./node-types.js";

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

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

package/dist/field/{plugins/auto-embed-plugin/index.d.ts → extensions/auto-embed/auto-embed-extension.d.ts}

@@ -18,3 +18,4 @@ export declare const YoutubeEmbedConfig: AutoEmbedConfig;
 export declare const VimeoEmbedConfig: AutoEmbedConfig;
 export declare const EmbedConfigs: AutoEmbedConfig[];
 export declare function AutoEmbedPlugin(): React.JSX.Element;
+export declare const AutoEmbedExtension: import("lexical").LexicalExtension<import("lexical").ExtensionConfigBase, "@byline/richtext-lexical/AutoEmbed", unknown, unknown>;

package/dist/field/{plugins/auto-embed-plugin/index.js → extensions/auto-embed/auto-embed-extension.js}

@@ -1,9 +1,14 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { AutoEmbedOption, LexicalAutoEmbedPlugin } from "@lexical/react/LexicalAutoEmbedPlugin";
-import { INSERT_VIMEO_COMMAND } from "../vimeo-plugin/index.js";
-import { INSERT_YOUTUBE_COMMAND } from "../youtube-plugin/index.js";
+import { AutoEmbedOption, INSERT_EMBED_COMMAND, LexicalAutoEmbedPlugin } from "@lexical/react/LexicalAutoEmbedPlugin";
+import { ReactExtension } from "@lexical/react/ReactExtension";
+import { configExtension, declarePeerDependency, defineExtension } from "lexical";
+import { useToolbarActiveEditor } from "../../plugins/toolbar-plugin/toolbar-active-editor.js";
+import { DropDownItem } from "../../ui/dropdown.js";
+import { BylineToolbarExtension } from "../byline-toolbar/byline-toolbar-extension.js";
+import { INSERT_VIMEO_COMMAND } from "../vimeo/vimeo-extension.js";
+import { INSERT_YOUTUBE_COMMAND } from "../youtube/youtube-extension.js";
 import { AutoEmbedModal } from "./auto-embed-modal.js";
 import * as __rspack_external_react_dom_7136dc57 from "react-dom";
 const YoutubeEmbedConfig = {
@@ -149,4 +154,42 @@ function AutoEmbedPlugin() {
         ]
     });
 }
-export { AutoEmbedPlugin, EmbedConfigs, VimeoEmbedConfig, YoutubeEmbedConfig };
+function EmbedInsertItem({ embedConfig }) {
+    const editor = useToolbarActiveEditor();
+    return /*#__PURE__*/ jsxs(DropDownItem, {
+        onClick: ()=>{
+            editor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type);
+        },
+        className: "item",
+        children: [
+            embedConfig.icon,
+            /*#__PURE__*/ jsx("span", {
+                className: "text",
+                children: embedConfig.contentName
+            })
+        ]
+    });
+}
+const AutoEmbedExtension = defineExtension({
+    name: '@byline/richtext-lexical/AutoEmbed',
+    dependencies: [
+        configExtension(ReactExtension, {
+            decorators: [
+                /*#__PURE__*/ jsx(AutoEmbedPlugin, {}, "d")
+            ]
+        })
+    ],
+    peerDependencies: [
+        declarePeerDependency(BylineToolbarExtension.name, {
+            items: EmbedConfigs.map((embedConfig, idx)=>({
+                    id: `@byline/richtext-lexical/AutoEmbed/${embedConfig.type}`,
+                    placement: 'insert-menu',
+                    order: 60 + idx,
+                    node: /*#__PURE__*/ jsx(EmbedInsertItem, {
+                        embedConfig: embedConfig
+                    })
+                }))
+        })
+    ]
+});
+export { AutoEmbedExtension, AutoEmbedPlugin, EmbedConfigs, VimeoEmbedConfig, YoutubeEmbedConfig };

package/dist/field/{plugins/auto-embed-plugin → extensions/auto-embed}/auto-embed-modal.d.ts

@@ -1,4 +1,4 @@
-import type { AutoEmbedConfig } from './index';
+import type { AutoEmbedConfig } from './auto-embed-extension';
 import './auto-embed-modal.css';
 export declare function AutoEmbedModal({ open, embedConfig, onClose, }: {
     open: boolean;

package/dist/field/extensions/byline-floating-ui/byline-floating-ui-extension.d.ts

@@ -0,0 +1,68 @@
+/**
+ * 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';
+/**
+ * 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 declare const BylineFloatingUIExtension: import("lexical").LexicalExtension<BylineFloatingUIConfig, "@byline/richtext-lexical/FloatingUI", unknown, unknown>;
+/** Sort helper used by the editor's floating-UI slot. */
+export declare function selectFloatingUIItems(items: ReadonlyArray<BylineFloatingUIItem>): BylineFloatingUIItem[];

package/dist/field/extensions/byline-floating-ui/byline-floating-ui-extension.js

@@ -0,0 +1,19 @@
+import { defineExtension, safeCast, shallowMergeConfig } from "lexical";
+const BylineFloatingUIExtension = defineExtension({
+    name: '@byline/richtext-lexical/FloatingUI',
+    config: safeCast({
+        items: []
+    }),
+    mergeConfig (a, b) {
+        const merged = shallowMergeConfig(a, b);
+        if (b.items && b.items.length > 0) merged.items = [
+            ...a.items,
+            ...b.items
+        ];
+        return merged;
+    }
+});
+function selectFloatingUIItems(items) {
+    return items.slice().sort((a, b)=>(a.order ?? 0) - (b.order ?? 0));
+}
+export { BylineFloatingUIExtension, selectFloatingUIItems };

package/dist/field/{nodes/admonition-node → extensions/byline-floating-ui}/index.d.ts

@@ -5,5 +5,4 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-export * from './admonition-node';
-export * from './types';
+export { type BylineFloatingUIConfig, BylineFloatingUIExtension, type BylineFloatingUIItem, type BylineFloatingUIProps, selectFloatingUIItems, } from './byline-floating-ui-extension';

package/dist/field/extensions/byline-floating-ui/index.js

@@ -0,0 +1 @@
+export { BylineFloatingUIExtension, selectFloatingUIItems } from "./byline-floating-ui-extension.js";

package/dist/field/extensions/byline-toolbar/byline-toolbar-extension.d.ts

@@ -0,0 +1,69 @@
+/**
+ * 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';
+/**
+ * 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 declare const BylineToolbarExtension: import("lexical").LexicalExtension<BylineToolbarConfig, "@byline/richtext-lexical/Toolbar", unknown, unknown>;
+/**
+ * Sort and filter helper used by `toolbar-plugin` and any external
+ * surface that wants to render Byline toolbar contributions itself.
+ */
+export declare function selectToolbarItems(items: ReadonlyArray<BylineToolbarItem>, placement: BylineToolbarPlacement): BylineToolbarItem[];

package/dist/field/extensions/byline-toolbar/byline-toolbar-extension.js

@@ -0,0 +1,19 @@
+import { defineExtension, safeCast, shallowMergeConfig } from "lexical";
+const BylineToolbarExtension = defineExtension({
+    name: '@byline/richtext-lexical/Toolbar',
+    config: safeCast({
+        items: []
+    }),
+    mergeConfig (a, b) {
+        const merged = shallowMergeConfig(a, b);
+        if (b.items && b.items.length > 0) merged.items = [
+            ...a.items,
+            ...b.items
+        ];
+        return merged;
+    }
+});
+function selectToolbarItems(items, placement) {
+    return items.filter((item)=>item.placement === placement).slice().sort((a, b)=>(a.order ?? 0) - (b.order ?? 0));
+}
+export { BylineToolbarExtension, selectToolbarItems };

package/dist/field/{nodes/inline-image-node → extensions/byline-toolbar}/index.d.ts

@@ -5,5 +5,4 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-export * from './inline-image-node';
-export * from './types';
+export { type BylineToolbarConfig, BylineToolbarExtension, type BylineToolbarItem, type BylineToolbarPlacement, selectToolbarItems, } from './byline-toolbar-extension';

package/dist/field/extensions/byline-toolbar/index.js

@@ -0,0 +1 @@
+export { BylineToolbarExtension, selectToolbarItems } from "./byline-toolbar-extension.js";

package/dist/field/extensions/code-highlight/code-highlight-extension.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+export declare const CodeHighlightExtension: import("lexical").LexicalExtension<import("lexical").ExtensionConfigBase, "@byline/richtext-lexical/CodeHighlight", unknown, unknown>;

package/dist/field/extensions/code-highlight/code-highlight-extension.js

@@ -0,0 +1,11 @@
+import { CodeHighlightNode, CodeNode, registerCodeHighlighting } from "@lexical/code";
+import { defineExtension } from "lexical";
+const CodeHighlightExtension = defineExtension({
+    name: '@byline/richtext-lexical/CodeHighlight',
+    nodes: ()=>[
+            CodeNode,
+            CodeHighlightNode
+        ],
+    register: (editor)=>registerCodeHighlighting(editor)
+});
+export { CodeHighlightExtension };

package/dist/field/extensions/floating-text-format/floating-text-format-extension.d.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
+ */
+/**
+ * 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 declare const FloatingTextFormatExtension: import("lexical").LexicalExtension<import("lexical").ExtensionConfigBase, "@byline/richtext-lexical/FloatingTextFormat", unknown, unknown>;

package/dist/field/extensions/floating-text-format/floating-text-format-extension.js

@@ -0,0 +1,17 @@
+import { declarePeerDependency, defineExtension } from "lexical";
+import { BylineFloatingUIExtension } from "../byline-floating-ui/byline-floating-ui-extension.js";
+import { FloatingTextFormatToolbarPlugin } from "./index.js";
+const FloatingTextFormatExtension = defineExtension({
+    name: '@byline/richtext-lexical/FloatingTextFormat',
+    peerDependencies: [
+        declarePeerDependency(BylineFloatingUIExtension.name, {
+            items: [
+                {
+                    id: '@byline/richtext-lexical/FloatingTextFormat/popover',
+                    Component: FloatingTextFormatToolbarPlugin
+                }
+            ]
+        })
+    ]
+});
+export { FloatingTextFormatExtension };

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

@@ -7,10 +7,10 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { mergeRegister } from "@lexical/utils";
 import { $getSelection, $isParagraphNode, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
 import { createPortal } from "react-dom";
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from "../../nodes/link-nodes/index.js";
 import { getDOMRangeRect } from "../../utils/getDOMRangeRect.js";
 import { getSelectedNode } from "../../utils/getSelectedNode.js";
 import { setFloatingElemPosition } from "../../utils/setFloatingElemPosition.js";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "../link/index.js";
 function TextFormatFloatingToolbar({ editor, anchorElem, isLink, isBold, isItalic, isUnderline, isCode, isStrikethrough, isSubscript, isSuperscript }) {
     const popupCharStylesEditorRef = useRef(null);
     const handleOnInsertLink = useCallback(()=>{

package/dist/field/extensions/horizontal-rule/horizontal-rule-extension.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Byline wrapper around the upstream `HorizontalRuleExtension`. Adds a
+ * single insert-menu contribution; the underlying extension still owns
+ * the node registration and command behaviour.
+ */
+export declare const HorizontalRuleExtension: import("lexical").LexicalExtension<import("lexical").ExtensionConfigBase, "@byline/richtext-lexical/HorizontalRule", unknown, unknown>;

package/dist/field/extensions/horizontal-rule/horizontal-rule-extension.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HorizontalRuleExtension } 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.js";
+import { DropDownItem } from "../../ui/dropdown.js";
+import { BylineToolbarExtension } from "../byline-toolbar/byline-toolbar-extension.js";
+function HorizontalRuleInsertItem() {
+    const editor = useToolbarActiveEditor();
+    return /*#__PURE__*/ jsxs(DropDownItem, {
+        onClick: ()=>{
+            editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
+        },
+        className: "item",
+        children: [
+            /*#__PURE__*/ jsx("i", {
+                className: "icon horizontal-rule"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "text",
+                children: "Horizontal Rule"
+            })
+        ]
+    });
+}
+const horizontal_rule_extension_HorizontalRuleExtension = defineExtension({
+    name: '@byline/richtext-lexical/HorizontalRule',
+    dependencies: [
+        HorizontalRuleExtension
+    ],
+    peerDependencies: [
+        declarePeerDependency(BylineToolbarExtension.name, {
+            items: [
+                {
+                    id: '@byline/richtext-lexical/HorizontalRule/insert',
+                    placement: 'insert-menu',
+                    order: 10,
+                    node: /*#__PURE__*/ jsx(HorizontalRuleInsertItem, {})
+                }
+            ]
+        })
+    ]
+});
+export { horizontal_rule_extension_HorizontalRuleExtension as HorizontalRuleExtension };

package/dist/field/{nodes/inline-image-node → extensions/inline-image}/index.js

@@ -1,2 +1,2 @@
 export * from "./inline-image-node.js";
-export * from "./types.js";
+export * from "./node-types.js";

package/dist/field/{plugins/inline-image-plugin/index.d.ts → extensions/inline-image/inline-image-extension.d.ts}

@@ -9,7 +9,7 @@
  */
 import type * as React from 'react';
 import { type LexicalCommand, type NodeKey } from 'lexical';
-import type { InlineImageAttributes } from '../../nodes/inline-image-node/types';
+import type { InlineImageAttributes } from './node-types';
 export type InsertInlineImagePayload = Readonly<InlineImageAttributes>;
 export type UpdateInlineImagePayload = Readonly<{
     nodeKey: NodeKey;
@@ -28,6 +28,9 @@ export declare const OPEN_INLINE_IMAGE_MODAL_COMMAND: LexicalCommand<OpenInlineI
 export declare const INSERT_INLINE_IMAGE_COMMAND: LexicalCommand<InsertInlineImagePayload>;
 /** Updates the InlineImageNode identified by `nodeKey` in place. */
 export declare const UPDATE_INLINE_IMAGE_COMMAND: LexicalCommand<UpdateInlineImagePayload>;
-export declare function InlineImagePlugin({ collection }: {
+export declare function InlineImagePlugin(): React.JSX.Element;
+export interface InlineImageConfig {
+    /** Upload collection that the inline-image modal targets. Required. */
     collection: string;
-}): React.JSX.Element;
+}
+export declare const InlineImageExtension: import("lexical").LexicalExtension<InlineImageConfig, "@byline/richtext-lexical/InlineImage", unknown, unknown>;

package/dist/field/{plugins/inline-image-plugin/index.js → extensions/inline-image/inline-image-extension.js}

@@ -1,11 +1,16 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 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, $getNodeByKey, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, createCommand } from "lexical";
-import { $createInlineImageNode, $isInlineImageNode, InlineImageNode } from "../../nodes/inline-image-node/index.js";
+import { $createParagraphNode, $getNodeByKey, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, configExtension, createCommand, declarePeerDependency, defineExtension, safeCast } from "lexical";
+import { useToolbarActiveEditor } from "../../plugins/toolbar-plugin/toolbar-active-editor.js";
+import { DropDownItem } from "../../ui/dropdown.js";
+import { BylineToolbarExtension } from "../byline-toolbar/byline-toolbar-extension.js";
 import { InlineImageModal } from "./inline-image-modal.js";
+import { $createInlineImageNode, $isInlineImageNode, InlineImageNode } from "./inline-image-node.js";
 const OPEN_INLINE_IMAGE_MODAL_COMMAND = createCommand('OPEN_INLINE_IMAGE_MODAL_COMMAND');
 const INSERT_INLINE_IMAGE_COMMAND = createCommand('INSERT_INLINE_IMAGE_COMMAND');
 const UPDATE_INLINE_IMAGE_COMMAND = createCommand('UPDATE_INLINE_IMAGE_COMMAND');
@@ -30,8 +35,9 @@ function readNodeAsInitialData(editor, nodeKey) {
     });
     return data;
 }
-function InlineImagePlugin({ collection }) {
+function InlineImagePlugin() {
     const [editor] = useLexicalComposerContext();
+    const { collection } = useExtensionDependency(InlineImageExtension).config;
     const [modalState, setModalState] = useState(CLOSED_STATE);
     useEffect(()=>{
         if (!editor.hasNodes([
@@ -104,4 +110,50 @@ function InlineImagePlugin({ collection }) {
         onClose: handleClose
     });
 }
-export { INSERT_INLINE_IMAGE_COMMAND, InlineImagePlugin, OPEN_INLINE_IMAGE_MODAL_COMMAND, UPDATE_INLINE_IMAGE_COMMAND };
+function InlineImageInsertItem() {
+    const editor = useToolbarActiveEditor();
+    return /*#__PURE__*/ jsxs(DropDownItem, {
+        onClick: ()=>{
+            editor.dispatchCommand(OPEN_INLINE_IMAGE_MODAL_COMMAND, null);
+        },
+        className: "item",
+        children: [
+            /*#__PURE__*/ jsx("i", {
+                className: "icon image"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "text",
+                children: "Inline Image"
+            })
+        ]
+    });
+}
+const InlineImageExtension = defineExtension({
+    name: '@byline/richtext-lexical/InlineImage',
+    nodes: ()=>[
+            InlineImageNode
+        ],
+    config: safeCast({
+        collection: ''
+    }),
+    dependencies: [
+        configExtension(ReactExtension, {
+            decorators: [
+                /*#__PURE__*/ jsx(InlineImagePlugin, {}, "d")
+            ]
+        })
+    ],
+    peerDependencies: [
+        declarePeerDependency(BylineToolbarExtension.name, {
+            items: [
+                {
+                    id: '@byline/richtext-lexical/InlineImage/insert',
+                    placement: 'insert-menu',
+                    order: 40,
+                    node: /*#__PURE__*/ jsx(InlineImageInsertItem, {})
+                }
+            ]
+        })
+    ]
+});
+export { INSERT_INLINE_IMAGE_COMMAND, InlineImageExtension, InlineImagePlugin, OPEN_INLINE_IMAGE_MODAL_COMMAND, UPDATE_INLINE_IMAGE_COMMAND };

package/dist/field/{nodes/inline-image-node → extensions/inline-image}/inline-image-node-component.d.ts

@@ -7,8 +7,8 @@
  */
 import type * as React from 'react';
 import type { LexicalEditor, NodeKey } from 'lexical';
-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';
 export default function InlineImageComponent({ relation, src, position, altText, width, height, showCaption, caption, nodeKey, }: {
     relation: DocumentRelation;

package/dist/field/{nodes/inline-image-node → extensions/inline-image}/inline-image-node-component.js

@@ -13,11 +13,11 @@ import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_CO
 import content_editable_inline from "../../content-editable-inline.js";
 import { useSharedHistoryContext } from "../../context/shared-history-context.js";
 import { useSharedOnChange } from "../../context/shared-on-change-context.js";
-import { FloatingTextFormatToolbarPlugin } from "../../plugins/floating-text-format-toolbar-plugin/index.js";
-import { OPEN_INLINE_IMAGE_MODAL_COMMAND } from "../../plugins/inline-image-plugin/index.js";
-import { LinkPlugin } from "../../plugins/link-plugin/link/index.js";
-import { FloatingLinkEditorPlugin } from "../../plugins/link-plugin/link/floating-link-editor.js";
 import placeholder_inline from "../../ui/placeholder-inline.js";
+import { FloatingTextFormatToolbarPlugin } from "../floating-text-format/index.js";
+import { FloatingLinkEditorPlugin } from "../link/floating-link-editor.js";
+import { LinkPlugin } from "../link/link-extension.js";
+import { OPEN_INLINE_IMAGE_MODAL_COMMAND } from "./inline-image-extension.js";
 import { $isInlineImageNode } from "./inline-image-node.js";
 import "./inline-image-node-component.css";
 const imageCache = new Set();

package/dist/field/{nodes/inline-image-node → extensions/inline-image}/inline-image-node.d.ts

@@ -8,8 +8,8 @@
 import * as React from 'react';
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
 import { 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';
 export declare class InlineImageNode extends DecoratorNode<React.JSX.Element> {
     __relation: DocumentRelation;
     __src: string;

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

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 import type { LexicalEditor, NodeKey, SerializedEditor, SerializedLexicalNode, 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;
 export interface InlineImageAttributes extends DocumentRelation {
     src: string;

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

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 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
  * `InlineImageAttributes` minus the Lexical-managed bits (`key`, `caption:

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

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 import type { StoredFileValue } from '@byline/core';
-import type { Position } from '../../nodes/inline-image-node/types';
+import type { Position } from './node-types';
 export interface PreferredSize {
     url: string;
     width?: number;