@byline/richtext-lexical 1.11.1 → 1.12.0

package/src/field/config/default-extensions.ts

@@ -0,0 +1,104 @@
+/**
+ * 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
+ */
+
+/**
+ * Client-only — pulls in every built-in extension along with their React
+ * decorators and modal components. The `/server` entry never imports
+ * this file.
+ */
+
+import {
+  AutoFocusExtension,
+  ClearEditorExtension,
+  TabIndentationExtension,
+} from '@lexical/extension'
+import { CheckListExtension, ListExtension } from '@lexical/list'
+import type { AnyLexicalExtensionArgument } from 'lexical'
+
+import { AdmonitionExtension } from '../extensions/admonition/admonition-extension'
+import { AutoEmbedExtension } from '../extensions/auto-embed/auto-embed-extension'
+import { BylineFloatingUIExtension } from '../extensions/byline-floating-ui/byline-floating-ui-extension'
+import { BylineToolbarExtension } from '../extensions/byline-toolbar/byline-toolbar-extension'
+import { CodeHighlightExtension } from '../extensions/code-highlight/code-highlight-extension'
+import { FloatingTextFormatExtension } from '../extensions/floating-text-format/floating-text-format-extension'
+import { HorizontalRuleExtension } from '../extensions/horizontal-rule/horizontal-rule-extension'
+import { InlineImageExtension } from '../extensions/inline-image/inline-image-extension'
+import { LayoutExtension } from '../extensions/layout/layout-extension'
+import { AutoLinkExtension } from '../extensions/link/auto-link-extension'
+import { LinkExtension } from '../extensions/link/link-extension'
+import { TableExtension } from '../extensions/table/table-extension'
+import { VimeoExtension } from '../extensions/vimeo/vimeo-extension'
+import { YouTubeExtension } from '../extensions/youtube/youtube-extension'
+import { defaultEditorConfig } from './default'
+import { ExtensionsList } from './extensions-list'
+import type { EditorConfig } from './types'
+
+/**
+ * Returns a fresh array of every Byline-built-in Lexical extension in
+ * their canonical order. Includes the `BylineToolbarExtension` registry
+ * itself so contributing extensions can attach their toolbar items via
+ * `peerDependencies`.
+ *
+ * Order matters: stock framework extensions (clear-editor, tab-indent,
+ * auto-focus) come first; toolbar contract sits ahead of any
+ * contributing extension; relation-bearing extensions (link, image)
+ * land near the end.
+ */
+export function defaultExtensionsArray(): AnyLexicalExtensionArgument[] {
+  return [
+    // Always-on stock extensions.
+    ClearEditorExtension,
+    TabIndentationExtension,
+    AutoFocusExtension,
+
+    // Toolbar + floating-UI contracts — must be present before any
+    // extension that contributes items to them via `peerDependencies`.
+    BylineToolbarExtension,
+    BylineFloatingUIExtension,
+
+    // Block- / list-level features.
+    ListExtension,
+    CheckListExtension,
+    HorizontalRuleExtension,
+    LayoutExtension,
+    AdmonitionExtension,
+    CodeHighlightExtension,
+    TableExtension,
+
+    // Link & link-related.
+    LinkExtension,
+    AutoLinkExtension,
+
+    // Embeds & inline images.
+    InlineImageExtension,
+    YouTubeExtension,
+    VimeoExtension,
+    AutoEmbedExtension,
+
+    // Floating UIs (the text-format popover lives at the floating-UI layer
+    // rather than the toolbar contract, so it gets its own extension).
+    FloatingTextFormatExtension,
+  ]
+}
+
+/** Fresh `ExtensionsList` populated with the built-in extensions. */
+export function defaultExtensionsList(): ExtensionsList {
+  return new ExtensionsList(defaultExtensionsArray())
+}
+
+/**
+ * Client-side default editor config — settings + lexical config + the
+ * full default extensions list. Used by `lexicalEditor((c) => ...)` as
+ * the seed before invoking the configure callback. Server-only modules
+ * (e.g. seeds) must import `defaultEditorConfig` from
+ * `@byline/richtext-lexical/server` instead.
+ */
+export const defaultClientEditorConfig: EditorConfig = {
+  ...defaultEditorConfig,
+  extensions: defaultExtensionsList(),
+}

package/src/field/config/default.ts

@@ -10,41 +10,13 @@ export const defaultEditorLexicalConfig: LexicalEditorConfig = {
 
 export const DEFAULT_EDITOR_SETTINGS: EditorSettings = {
   options: {
-    disableBeforeInput: false,
-    autocomplete: false,
-    charLimit: false,
-    charLimitUtf8: false,
-    collab: false,
-    maxLength: false,
     richText: true,
-    measureTypingPerf: false,
-    showNestedEditorTreeView: false,
-    showTableOfContents: false,
     showTreeView: false,
     textAlignment: true,
-    tablePlugin: true,
-    tableCellBackgroundColor: true,
-    tableCellMerge: true,
-    tableActionMenuPlugin: true,
-    layoutPlugin: true,
-    outputHTML: false,
-    outputMarkdown: false,
-    autoFocusPlugin: false,
-    autoLinkPlugin: false,
-    inlineImagePlugin: true,
-    admonitionPlugin: true,
-    checkListPlugin: true,
-    listPlugin: true,
-    codeHighlightPlugin: true,
-    horizontalRulePlugin: true,
     markdownShortcutPlugin: false,
     undoRedo: true,
     textStyle: true,
     inlineCode: true,
-    links: true,
-    floatingLinkEditorPlugin: true,
-    floatingTextFormatToolbarPlugin: false,
-    autoEmbedPlugin: true,
     debug: false,
   },
   inlineImageUploadCollection: 'media',
@@ -52,6 +24,14 @@ export const DEFAULT_EDITOR_SETTINGS: EditorSettings = {
   embedRelationsOnSave: true,
 }
 
+/**
+ * Server-safe editor config — settings + Lexical core config only. The
+ * `extensions` field is intentionally omitted because extension entries
+ * carry React-bearing decorators that would break tsx-loaded seeds and
+ * other server-side schema consumers. The client-side
+ * `defaultClientEditorConfig` (in `default-extensions.tsx`) layers the
+ * extensions list on top.
+ */
 export const defaultEditorConfig: EditorConfig = {
   settings: DEFAULT_EDITOR_SETTINGS,
   lexical: defaultEditorLexicalConfig,

package/src/field/config/editor-config-context.tsx

@@ -3,8 +3,6 @@
 import type * as React from 'react'
 import { createContext, useCallback, useContext, useMemo, useState } from 'react'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-
 import { DEFAULT_EDITOR_SETTINGS } from './default'
 import type { EditorSettings, OptionName } from './types'
 
@@ -34,7 +32,6 @@ export const EditorConfigContext = ({
   const [config, setConfig] = useState(configFromProps ?? DEFAULT_EDITOR_SETTINGS)
   // State to store the UUID
   const [uuid] = useState(() => generateQuickGuid())
-  const [editor] = useLexicalComposerContext()
 
   const setOption = useCallback((option: OptionName, value: boolean) => {
     setConfig((config) => {
@@ -43,10 +40,7 @@ export const EditorConfigContext = ({
     })
   }, [])
 
-  const editorContext = useMemo(
-    () => ({ setOption, config, uuid, editor }),
-    [setOption, config, uuid, editor]
-  )
+  const editorContext = useMemo(() => ({ setOption, config, uuid }), [setOption, config, uuid])
 
   return <Context.Provider value={editorContext}>{children}</Context.Provider>
 }

package/src/field/config/extensions-list.ts

@@ -0,0 +1,107 @@
+/**
+ * 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 AnyLexicalExtension,
+  type AnyLexicalExtensionArgument,
+  configExtension,
+  type LexicalExtensionConfig,
+} from 'lexical'
+
+/**
+ * Chainable wrapper around an ordered list of Lexical extensions. Used
+ * inside the `lexicalEditor((c) => ...)` configure callback so site
+ * authors can add, remove, configure, or reorder extensions before the
+ * editor is built.
+ *
+ * Comparison is by extension `name` so a bare `LinkExtension` and a
+ * `configExtension(LinkExtension, {...})` tuple are treated as the same
+ * entry.
+ */
+export class ExtensionsList {
+  private items: AnyLexicalExtensionArgument[]
+
+  constructor(items: ReadonlyArray<AnyLexicalExtensionArgument> = []) {
+    this.items = [...items]
+  }
+
+  /** Append `extension` to the end of the list. */
+  add(extension: AnyLexicalExtensionArgument): this {
+    this.items.push(extension)
+    return this
+  }
+
+  /**
+   * Remove every entry whose name matches `extension.name`. No-op when
+   * the extension isn't present.
+   */
+  remove(extension: AnyLexicalExtension): this {
+    const targetName = extension.name
+    this.items = this.items.filter((item) => extensionName(item) !== targetName)
+    return this
+  }
+
+  /** Replace `oldExtension` with `newExtension`, preserving position. */
+  replace(oldExtension: AnyLexicalExtension, newExtension: AnyLexicalExtensionArgument): this {
+    const targetName = oldExtension.name
+    let replaced = false
+    this.items = this.items.map((item) => {
+      if (!replaced && extensionName(item) === targetName) {
+        replaced = true
+        return newExtension
+      }
+      return item
+    })
+    if (!replaced) this.items.push(newExtension)
+    return this
+  }
+
+  /**
+   * Re-wrap an existing extension entry with a fresh `configExtension`
+   * binding the supplied config. If the extension isn't present, it is
+   * added. If it was already wrapped with `configExtension`, the wrapper
+   * is replaced rather than nested.
+   */
+  configure<Extension extends AnyLexicalExtension>(
+    extension: Extension,
+    config: Partial<LexicalExtensionConfig<Extension>>
+  ): this {
+    const wrapped = configExtension(extension, config)
+    return this.replace(extension, wrapped)
+  }
+
+  /** True when an entry with the same `name` is present. */
+  has(extension: AnyLexicalExtension): boolean {
+    const targetName = extension.name
+    return this.items.some((item) => extensionName(item) === targetName)
+  }
+
+  /** Independent copy — safe to hand to a configure callback. */
+  clone(): ExtensionsList {
+    return new ExtensionsList(this.items)
+  }
+
+  /** The list as a plain array, ready for `defineExtension({ dependencies })`. */
+  toArray(): AnyLexicalExtensionArgument[] {
+    return [...this.items]
+  }
+}
+
+function extensionName(item: AnyLexicalExtensionArgument): string | undefined {
+  if (Array.isArray(item)) {
+    const head = item[0]
+    if (head != null && typeof head === 'object' && 'name' in head) {
+      return (head as AnyLexicalExtension).name
+    }
+    return undefined
+  }
+  if (item != null && typeof item === 'object' && 'name' in item) {
+    return (item as AnyLexicalExtension).name
+  }
+  return undefined
+}

package/src/field/config/types.ts

@@ -1,45 +1,32 @@
 import type { EditorConfig as LexicalEditorConfig } from 'lexical'
 
+import type { ExtensionsList } from './extensions-list'
+
+/**
+ * Settings that aren't expressible as "is extension X present in the
+ * extensions list?" — toolbar / UI mode toggles, debug switches, the
+ * inline-image upload target, etc. Everything else now lives on
+ * {@link EditorConfig.extensions} and is manipulated via the chainable
+ * `lexicalEditor((c) => c.extensions.add(...).remove(...))` API.
+ */
 export type OptionName =
-  | 'disableBeforeInput'
-  | 'autocomplete'
-  | 'charLimit'
-  | 'charLimitUtf8'
-  | 'collab'
-  | 'maxLength'
   | 'richText'
-  | 'measureTypingPerf'
-  | 'showNestedEditorTreeView'
-  | 'showTableOfContents'
   | 'showTreeView'
   | 'textAlignment'
-  | 'tablePlugin'
-  | 'tableCellBackgroundColor'
-  | 'tableCellMerge'
-  | 'tableActionMenuPlugin'
-  | 'layoutPlugin'
-  | 'outputHTML'
-  | 'outputMarkdown'
-  | 'autoFocusPlugin'
-  | 'autoLinkPlugin'
-  | 'inlineImagePlugin'
-  | 'admonitionPlugin'
-  | 'checkListPlugin'
-  | 'listPlugin'
-  | 'codeHighlightPlugin'
-  | 'horizontalRulePlugin'
   | 'markdownShortcutPlugin'
   | 'undoRedo'
   | 'textStyle'
   | 'inlineCode'
-  | 'links'
-  | 'floatingLinkEditorPlugin'
-  | 'floatingTextFormatToolbarPlugin'
-  | 'autoEmbedPlugin'
   | 'debug'
 
 export interface EditorSettings {
   options: Record<OptionName, boolean>
+  /**
+   * Upload collection passed to the inline-image picker. Forwarded to
+   * `InlineImageExtension`'s config when the extensions list is built;
+   * setting it here is equivalent to
+   * `c.extensions.configure(InlineImageExtension, { collection })`.
+   */
   inlineImageUploadCollection: string
   placeholderText: string
   /**
@@ -64,4 +51,17 @@ export interface EditorSettingsOverride {
 export interface EditorConfig {
   settings: EditorSettings
   lexical: LexicalEditorConfig
+  /**
+   * Manipulable list of Lexical extensions wired into the editor. When
+   * omitted (server-safe `defaultEditorConfig` from `/server` does not
+   * carry one), the editor falls back to the package's built-in list at
+   * render time.
+   *
+   * Field-level `RichTextField.editorConfig` should not set this
+   * directly — extension references are not JSON-safe and would break
+   * tsx-loaded seeds. Per-field extension overrides go through a
+   * client-side wrapper component registered via
+   * `FieldAdminConfig.editor` (see `aiRichTextAdmin()` for the pattern).
+   */
+  extensions?: ExtensionsList
 }

package/src/field/editor-context.tsx

@@ -11,16 +11,22 @@
 import type * as React from 'react'
 import { useMemo } from 'react'
 
-import type { InitialConfigType } from '@lexical/react/LexicalComposer'
-import { LexicalComposer } from '@lexical/react/LexicalComposer'
-import type { EditorState, LexicalEditor, SerializedEditorState } from 'lexical'
+import { LexicalExtensionComposer } from '@lexical/react/LexicalExtensionComposer'
+import {
+  type AnyLexicalExtensionArgument,
+  defineExtension,
+  type EditorState,
+  type LexicalEditor,
+  type SerializedEditorState,
+} from 'lexical'
 
+import { defaultExtensionsList } from './config/default-extensions'
 import { EditorConfigContext } from './config/editor-config-context'
 import { SharedHistoryContext } from './context/shared-history-context'
 import { SharedOnChangeContext } from './context/shared-on-change-context'
 import { Editor } from './editor'
+import { InlineImageExtension } from './extensions/inline-image/inline-image-extension'
 import { Nodes } from './nodes'
-import { ToolbarExtensionsProvider } from './toolbar-extensions'
 import type { EditorConfig } from './config/types'
 
 // Catch any errors that occur during Lexical updates and log them
@@ -54,49 +60,79 @@ export function EditorContext(props: {
     children,
   } = props
 
-  // useMemo for the initialConfig that depends on readOnly and value
-  // biome-ignore lint/correctness/useExhaustiveDependencies: TODO: revisit
-  const initialConfig = useMemo<InitialConfigType>(() => {
-    return {
-      editable: readOnly !== true,
-      editorState: value != null ? JSON.stringify(value) : undefined,
+  const editable = readOnly !== true
+
+  // The root extension must be a referentially stable value across renders.
+  // Unlike the legacy LexicalComposer (which memoised the editor with [] deps
+  // and ignored subsequent initialConfig changes), LexicalExtensionComposer
+  // rebuilds the editor whenever the `extension` prop changes by reference —
+  // destroying editor state and history. So we deliberately compute this
+  // only on mount and capture readOnly / value / editorConfig from the first
+  // render. The `key={composerKey + editable}` below already forces a remount
+  // when readOnly toggles, so a fresh extension is built then.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: capture-once on mount; remount via `key` handles editable transitions
+  const rootExtension = useMemo<AnyLexicalExtensionArgument>(() => {
+    // Source of truth for the extension graph: editorConfig.extensions,
+    // optionally manipulated by site code via lexicalEditor((c) => ...).
+    // Server-loaded EditorConfigs (e.g. via /server) carry no extensions
+    // field; in that case we materialise the package default here.
+    const extensionsList = editorConfig.extensions ?? defaultExtensionsList()
+
+    // Forward the inline-image upload collection from the settings facade
+    // onto the InlineImageExtension's typed config, but only when the
+    // user hasn't already configured the extension explicitly.
+    const dependencies = extensionsList
+      .clone()
+      .configure(InlineImageExtension, {
+        collection: editorConfig.settings.inlineImageUploadCollection,
+      })
+      .toArray()
+
+    return defineExtension({
+      name: '[root]',
       namespace: editorConfig.lexical.namespace,
       nodes: [...Nodes],
+      theme: editorConfig.lexical.theme,
+      editable,
+      $initialEditorState: value != null ? JSON.stringify(value) : undefined,
       onError: (error: Error) => {
         throw error
       },
-      theme: editorConfig.lexical.theme,
-    }
-    // Important: do not add readOnly and value to the dependencies array.
-    // This will cause the entire lexical editor to re-render if the document
-    // is saved, which will cause the editor to lose focus.
-
-    // NOTE: 2025-04-26: This is NOT the case for our version of the editor.
-    // Without readOnly as a dependency, the editor will never transition
-    // from readOnly to editable during form loading, when disabledFromField
-    // in field-component will be briefly false.
-  }, [editorConfig, readOnly])
-
-  if (initialConfig == null) {
-    return <p>Loading...</p>
-  }
+      dependencies,
+    })
+  }, [])
 
+  // These three context providers MUST sit OUTSIDE LexicalExtensionComposer.
+  //
+  // LexicalExtensionComposer renders the editor's React decorator portals
+  // (the components mounted for AdmonitionNode, InlineImageNode, etc.) as
+  // a sibling of its `children` inside an internal EditorChildrenComponent,
+  // not as descendants of `children`. Any context provider we place inside
+  // the composer is invisible to those decorators — so nested editors
+  // wired through SharedOnChangeContext silently fail to propagate change
+  // events up to the parent, and SharedHistoryContext falls back to a
+  // local history state instead of being shared with the root editor.
+  //
+  // Hoisting these providers above the composer puts the node decorators
+  // back inside their React tree.
   return (
-    <LexicalComposer initialConfig={initialConfig} key={composerKey + initialConfig.editable}>
-      <EditorConfigContext config={editorConfig.settings}>
-        <SharedOnChangeContext onChange={onChange}>
-          <SharedHistoryContext>
-            <ToolbarExtensionsProvider>
-              <div className="editor-shell">
-                {beforeEditor}
-                <Editor minHeight={props.minHeight} maxHeight={props.maxHeight} />
-                {afterEditor}
-                {children}
-              </div>
-            </ToolbarExtensionsProvider>
-          </SharedHistoryContext>
-        </SharedOnChangeContext>
-      </EditorConfigContext>
-    </LexicalComposer>
+    <EditorConfigContext config={editorConfig.settings}>
+      <SharedOnChangeContext onChange={onChange}>
+        <SharedHistoryContext>
+          <LexicalExtensionComposer
+            extension={rootExtension}
+            contentEditable={null}
+            key={composerKey + editable}
+          >
+            <div className="editor-shell">
+              {beforeEditor}
+              <Editor minHeight={props.minHeight} maxHeight={props.maxHeight} />
+              {afterEditor}
+              {children}
+            </div>
+          </LexicalExtensionComposer>
+        </SharedHistoryContext>
+      </SharedOnChangeContext>
+    </EditorConfigContext>
   )
 }

package/src/field/editor.tsx

@@ -12,19 +12,16 @@ import type * as React from 'react'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 
 import { TRANSFORMERS } from '@lexical/markdown'
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin'
-import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin'
-import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin'
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
-import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin'
-import { ListPlugin } from '@lexical/react/LexicalListPlugin'
 import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
 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 {
+  useExtensionDependency,
+  useOptionalExtensionDependency,
+} from '@lexical/react/useExtensionComponent'
 import type { EditorState, LexicalEditor } from 'lexical'
 
 import { useEditorConfig } from './config/editor-config-context'
@@ -32,23 +29,16 @@ import { ContentEditable } from './content-editable'
 import { useSharedHistoryContext } from './context/shared-history-context'
 import { useSharedOnChange } from './context/shared-on-change-context'
 import { Debug } from './debug'
-import { AdmonitionPlugin } from './plugins/admonition-plugin'
+import {
+  BylineFloatingUIExtension,
+  selectFloatingUIItems,
+} from './extensions/byline-floating-ui/byline-floating-ui-extension'
+import { TableExtension as BylineTableExtension } from './extensions/table/table-extension'
 // import { AiPlugin } from './plugins/ai-plugin'
-import { AutoEmbedPlugin } from './plugins/auto-embed-plugin'
-import { CodeHighlightPlugin } from './plugins/code-highlight-plugin'
 // import { DragDropPaste } from './plugins/drag-drop-paste-plugin'
-import { FloatingTextFormatToolbarPlugin } from './plugins/floating-text-format-toolbar-plugin'
-import { InlineImagePlugin } from './plugins/inline-image-plugin'
-import { LayoutPlugin } from './plugins/layout-plugin/layout-plugin'
-import { AutoLinkPlugin } from './plugins/link-plugin/auto-link'
-import { LinkPlugin } from './plugins/link-plugin/link'
-import { FloatingLinkEditorPlugin } from './plugins/link-plugin/link/floating-link-editor'
-import { TableActionMenuPlugin } from './plugins/table-action-menu-plugin'
-import { TablePlugin as PayloadTablePlugin } from './plugins/table-plugin'
+import { TablePlugin } from './plugins/table-plugin'
 import { ToolbarPlugin } from './plugins/toolbar-plugin'
 import { TreeViewPlugin } from './plugins/treeview-plugin'
-import { VimeoPlugin } from './plugins/vimeo-plugin'
-import { YouTubePlugin } from './plugins/youtube-plugin'
 import { CAN_USE_DOM } from './shared/canUseDOM'
 import { Placeholder } from './ui/placeholder'
 
@@ -75,31 +65,17 @@ export const Editor = memo(function Editor({
   const { historyState } = useSharedHistoryContext()
   const {
     config: {
-      options: {
-        debug,
-        richText,
-        showTreeView,
-        autoFocusPlugin,
-        tablePlugin,
-        tableActionMenuPlugin,
-        layoutPlugin,
-        inlineImagePlugin,
-        admonitionPlugin,
-        links,
-        autoLinkPlugin,
-        checkListPlugin,
-        listPlugin,
-        codeHighlightPlugin,
-        horizontalRulePlugin,
-        markdownShortcutPlugin,
-        floatingLinkEditorPlugin,
-        floatingTextFormatToolbarPlugin,
-        autoEmbedPlugin,
-      },
+      options: { debug, richText, showTreeView, markdownShortcutPlugin },
       placeholderText,
-      inlineImageUploadCollection,
     },
   } = useEditorConfig()
+  const hasTableExtension = useOptionalExtensionDependency(BylineTableExtension) !== undefined
+  // Merged floating-UI contributions from every extension in the graph.
+  // Removing a contributing extension (e.g. `c.extensions.remove(LinkExtension)`)
+  // automatically suppresses its floating UI — no separate boolean toggle.
+  const floatingUIItems = selectFloatingUIItems(
+    useExtensionDependency(BylineFloatingUIExtension).config.items
+  )
 
   const onRef = useCallback((_floatingAnchorElem: HTMLDivElement): void => {
     if (_floatingAnchorElem != null) {
@@ -154,7 +130,7 @@ export const Editor = memo(function Editor({
 
   const content = (
     <>
-      {tablePlugin && <PayloadTablePlugin />}
+      {hasTableExtension && <TablePlugin />}
       {richText && <ToolbarPlugin />}
       <div
         className={`editor-container ${showTreeView ? 'tree-view' : ''} ${
@@ -162,11 +138,6 @@ export const Editor = memo(function Editor({
         }`}
       >
         {/* <DragDropPaste /> */}
-        {autoFocusPlugin && <AutoFocusPlugin />}
-        {links && <LinkPlugin />}
-        {autoEmbedPlugin && <AutoEmbedPlugin />}
-        <TabIndentationPlugin />
-        {autoLinkPlugin && <AutoLinkPlugin />}
         <OnChangePlugin
           // Ignore any onChange event triggered by focus or selection only
           ignoreSelectionChange={true}
@@ -190,30 +161,12 @@ export const Editor = memo(function Editor({
               ErrorBoundary={LexicalErrorBoundary}
             />
             <HistoryPlugin externalHistoryState={historyState} />
-            {inlineImagePlugin && <InlineImagePlugin collection={inlineImageUploadCollection} />}
-            {admonitionPlugin && <AdmonitionPlugin />}
-            {checkListPlugin && <CheckListPlugin />}
-            {listPlugin && <ListPlugin />}
-            {codeHighlightPlugin && <CodeHighlightPlugin />}
-            {horizontalRulePlugin && <HorizontalRulePlugin />}
-            {layoutPlugin && <LayoutPlugin />}
-            {autoEmbedPlugin && <YouTubePlugin />}
-            {autoEmbedPlugin && <VimeoPlugin />}
             {markdownShortcutPlugin && <MarkdownShortcutPlugin transformers={TRANSFORMERS} />}
-            {tablePlugin && <TablePlugin hasCellMerge={true} hasCellBackgroundColor={true} />}
-            {floatingAnchorElem != null && !isSmallWidthViewport && (
-              <>
-                {floatingLinkEditorPlugin && (
-                  <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} />
-                )}
-                {tableActionMenuPlugin && (
-                  <TableActionMenuPlugin anchorElem={floatingAnchorElem} cellMerge={false} />
-                )}
-                {floatingTextFormatToolbarPlugin && (
-                  <FloatingTextFormatToolbarPlugin anchorElem={floatingAnchorElem} />
-                )}
-              </>
-            )}
+            {floatingAnchorElem != null &&
+              !isSmallWidthViewport &&
+              floatingUIItems.map(({ id, Component }) => (
+                <Component key={id} anchorElem={floatingAnchorElem} />
+              ))}
           </>
         ) : (
           <>
@@ -225,7 +178,6 @@ export const Editor = memo(function Editor({
             <HistoryPlugin externalHistoryState={historyState} />
           </>
         )}
-        <ClearEditorPlugin />
         {debug && (
           <>
             <Debug />