@byline/richtext-lexical 1.11.1 → 1.12.0

package/src/field/extensions/vimeo/vimeo-extension.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 { $insertNodeToNearestRoot } from '@lexical/utils'
+import {
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  defineExtension,
+  type LexicalCommand,
+} from 'lexical'
+
+import { $createVimeoNode, VimeoNode } from './vimeo-node'
+
+export const INSERT_VIMEO_COMMAND: LexicalCommand<string> = createCommand('INSERT_VIMEO_COMMAND')
+
+export const VimeoExtension = defineExtension({
+  name: '@byline/richtext-lexical/Vimeo',
+  nodes: () => [VimeoNode],
+  register: (editor) =>
+    editor.registerCommand<string>(
+      INSERT_VIMEO_COMMAND,
+      (payload) => {
+        const vimeoNode = $createVimeoNode(payload)
+        $insertNodeToNearestRoot(vimeoNode)
+        return true
+      },
+      COMMAND_PRIORITY_EDITOR
+    ),
+})

package/src/field/extensions/youtube/youtube-extension.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { $insertNodeToNearestRoot } from '@lexical/utils'
+import {
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  defineExtension,
+  type LexicalCommand,
+} from 'lexical'
+
+import { $createYouTubeNode, YouTubeNode } from './youtube-node'
+
+export const INSERT_YOUTUBE_COMMAND: LexicalCommand<string> =
+  createCommand('INSERT_YOUTUBE_COMMAND')
+
+export const YouTubeExtension = defineExtension({
+  name: '@byline/richtext-lexical/YouTube',
+  nodes: () => [YouTubeNode],
+  register: (editor) =>
+    editor.registerCommand<string>(
+      INSERT_YOUTUBE_COMMAND,
+      (payload) => {
+        const youTubeNode = $createYouTubeNode(payload)
+        $insertNodeToNearestRoot(youTubeNode)
+        return true
+      },
+      COMMAND_PRIORITY_EDITOR
+    ),
+})

package/src/field/nodes/index.ts

@@ -15,13 +15,13 @@ import { HeadingNode, QuoteNode } from '@lexical/rich-text'
 import { TableCellNode, TableNode, TableRowNode } from '@lexical/table'
 import type { Klass, LexicalNode } from 'lexical'
 
-import { AdmonitionNode } from './admonition-node/admonition-node'
-import { InlineImageNode } from './inline-image-node/inline-image-node'
-import { LayoutContainerNode } from './layout-container-node/layout-container-node'
-import { LayoutItemNode } from './layout-container-node/layout-item-node'
-import { AutoLinkNode, LinkNode } from './link-nodes'
-import { VimeoNode } from './vimeo-node'
-import { YouTubeNode } from './youtube-node'
+import { AdmonitionNode } from '../extensions/admonition/admonition-node'
+import { InlineImageNode } from '../extensions/inline-image/inline-image-node'
+import { LayoutContainerNode } from '../extensions/layout/layout-container-node'
+import { LayoutItemNode } from '../extensions/layout/layout-item-node'
+import { AutoLinkNode, LinkNode } from '../extensions/link'
+import { VimeoNode } from '../extensions/vimeo/vimeo-node'
+import { YouTubeNode } from '../extensions/youtube/youtube-node'
 
 export const Nodes: Array<Klass<LexicalNode>> = [
   HeadingNode,

package/src/field/plugins/table-plugin/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as React from 'react'
+import { useEffect } from 'react'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { COMMAND_PRIORITY_NORMAL, createCommand } from 'lexical'
@@ -13,17 +14,16 @@ export function TablePlugin(): React.JSX.Element {
   const [editor] = useLexicalComposerContext()
   const [open, setOpen] = React.useState(false)
 
-  editor.registerCommand<null>(
-    OPEN_TABLE_MODAL_COMMAND,
-    () => {
-      if (open === false) {
-        setOpen(true)
+  useEffect(() => {
+    return editor.registerCommand<null>(
+      OPEN_TABLE_MODAL_COMMAND,
+      () => {
+        setOpen((prev) => (prev ? prev : true))
         return true
-      }
-      return false
-    },
-    COMMAND_PRIORITY_NORMAL
-  )
+      },
+      COMMAND_PRIORITY_NORMAL
+    )
+  }, [editor])
 
   const handleOnClose = (): void => {
     setOpen(false)

package/src/field/plugins/toolbar-plugin/index.tsx

@@ -16,27 +16,32 @@
  *
  */
 import type * as React from 'react'
-import { Fragment, useCallback, useEffect, useState } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
 
 import {
   $createCodeNode,
   $isCodeNode,
   CODE_LANGUAGE_FRIENDLY_NAME_MAP,
   CODE_LANGUAGE_MAP,
+  CodeNode,
   getLanguageFriendlyName,
 } from '@lexical/code'
 import {
   $isListNode,
+  CheckListExtension,
   INSERT_CHECK_LIST_COMMAND,
   INSERT_ORDERED_LIST_COMMAND,
   INSERT_UNORDERED_LIST_COMMAND,
+  ListExtension,
   ListNode,
   REMOVE_LIST_COMMAND,
 } from '@lexical/list'
-import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode'
-import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode'
+import {
+  useExtensionDependency,
+  useOptionalExtensionDependency,
+} from '@lexical/react/useExtensionComponent'
 import {
   $createHeadingNode,
   $createQuoteNode,
@@ -76,22 +81,22 @@ import {
 } from 'lexical'
 
 import { useEditorConfig } from '../../config/editor-config-context'
+import {
+  BylineToolbarExtension,
+  selectToolbarItems,
+} from '../../extensions/byline-toolbar/byline-toolbar-extension'
 import {
   $isLinkNode,
   type LinkAttributes,
+  LinkExtension,
   OPEN_LINK_MODAL_COMMAND,
   TOGGLE_LINK_COMMAND,
-} from '../../nodes/link-nodes'
+} from '../../extensions/link'
 import { IS_APPLE } from '../../shared/environment'
-import { useToolbarExtensions } from '../../toolbar-extensions'
 import { DropDown, DropDownItem } from '../../ui/dropdown'
 import { getSelectedNode } from '../../utils/getSelectedNode'
 import { sanitizeUrl } from '../../utils/url'
-import { OPEN_ADMONITION_MODAL_COMMAND } from '../admonition-plugin'
-import { EmbedConfigs } from '../auto-embed-plugin'
-import { OPEN_INLINE_IMAGE_MODAL_COMMAND } from '../inline-image-plugin'
-import { OPEN_INSERT_LAYOUT_MODAL_COMMAND } from '../layout-plugin/layout-plugin'
-import { OPEN_TABLE_MODAL_COMMAND } from '../table-plugin'
+import { ToolbarActiveEditorProvider } from './toolbar-active-editor'
 
 const blockTypeToBlockName = {
   bullet: 'Bulleted List',
@@ -141,11 +146,14 @@ function BlockFormatDropDown({
   editor: LexicalEditor
   disabled?: boolean
 }): React.JSX.Element {
-  const {
-    config: {
-      options: { checkListPlugin, listPlugin, codeHighlightPlugin },
-    },
-  } = useEditorConfig()
+  // Block-format dropdown entries are gated on whether the underlying
+  // extensions are present in the editor's extension graph. Removing
+  // ListExtension via lexicalEditor((c) => c.extensions.remove(ListExtension))
+  // hides the list options here without any flag in EditorSettings.
+  const hasList = useOptionalExtensionDependency(ListExtension) !== undefined
+  const hasCheckList = useOptionalExtensionDependency(CheckListExtension) !== undefined
+  const [composerEditor] = useLexicalComposerContext()
+  const hasCodeHighlight = composerEditor.hasNodes([CodeNode])
 
   const formatParagraph = (): void => {
     editor.update(() => {
@@ -275,7 +283,7 @@ function BlockFormatDropDown({
         <i className="icon h4" />
         <span className="text">Heading 4</span>
       </DropDownItem>
-      {listPlugin && (
+      {hasList && (
         <>
           <DropDownItem
             className={`item ${dropDownActiveClass(blockType === 'bullet')}`}
@@ -294,7 +302,7 @@ function BlockFormatDropDown({
         </>
       )}
 
-      {checkListPlugin && (
+      {hasCheckList && (
         <DropDownItem
           className={`item ${dropDownActiveClass(blockType === 'check')}`}
           onClick={formatCheckList}
@@ -311,7 +319,7 @@ function BlockFormatDropDown({
         <i className="icon quote" />
         <span className="text">Quote</span>
       </DropDownItem>
-      {codeHighlightPlugin && (
+      {hasCodeHighlight && (
         <DropDownItem
           className={`item ${dropDownActiveClass(blockType === 'code')}`}
           onClick={formatCode}
@@ -351,23 +359,20 @@ export function ToolbarPlugin(): React.JSX.Element {
   const [isRTL, _setIsRTL] = useState(false)
   const [codeLanguage, setCodeLanguage] = useState<string>('')
   const [isEditable, setIsEditable] = useState(() => editor.isEditable())
-  const { items: toolbarExtensionItems } = useToolbarExtensions()
+  const { config: toolbarConfig } = useExtensionDependency(BylineToolbarExtension)
+  const insertMenuItems = useMemo(
+    () => selectToolbarItems(toolbarConfig.items, 'insert-menu'),
+    [toolbarConfig.items]
+  )
+  const trailingToolbarItems = useMemo(
+    () => selectToolbarItems(toolbarConfig.items, 'toolbar'),
+    [toolbarConfig.items]
+  )
+  const hasLinkExtension = useOptionalExtensionDependency(LinkExtension) !== undefined
   const {
     uuid,
     config: {
-      options: {
-        textAlignment,
-        tablePlugin,
-        inlineImagePlugin,
-        admonitionPlugin,
-        horizontalRulePlugin,
-        layoutPlugin,
-        autoEmbedPlugin,
-        undoRedo,
-        textStyle,
-        inlineCode,
-        links,
-      },
+      options: { textAlignment, undoRedo, textStyle, inlineCode },
     },
   } = useEditorConfig()
   // const { openModal } = usePayloadModal()
@@ -773,7 +778,7 @@ export function ToolbarPlugin(): React.JSX.Element {
               <i className="format code" />
             </button>
           )}
-          {links && (
+          {hasLinkExtension && (
             <button
               key="link"
               type="button"
@@ -838,100 +843,32 @@ export function ToolbarPlugin(): React.JSX.Element {
             </DropDownItem>
           </DropDown>
 
-          {activeEditor === editor &&
-            (horizontalRulePlugin || inlineImagePlugin || tablePlugin || admonitionPlugin) && (
-              <>
-                <Divider />
-                <DropDown
-                  disabled={!isEditable}
-                  buttonClassName="toolbar-item spaced"
-                  buttonLabel="Insert"
-                  buttonAriaLabel="Insert specialized editor node"
-                  buttonIconClassName="icon plus"
-                >
-                  {horizontalRulePlugin && (
-                    <DropDownItem
-                      onClick={() => {
-                        activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
-                      }}
-                      className="item"
-                    >
-                      <i className="icon horizontal-rule" />
-                      <span className="text">Horizontal Rule</span>
-                    </DropDownItem>
-                  )}
-
-                  {layoutPlugin && (
-                    <DropDownItem
-                      onClick={() => {
-                        activeEditor.dispatchCommand(OPEN_INSERT_LAYOUT_MODAL_COMMAND, null)
-                      }}
-                      className="item"
-                    >
-                      <i className="icon columns" />
-                      <span className="text">Columns Layout</span>
-                    </DropDownItem>
-                  )}
-
-                  {admonitionPlugin && (
-                    <DropDownItem
-                      onClick={() => {
-                        activeEditor.dispatchCommand(OPEN_ADMONITION_MODAL_COMMAND, null)
-                      }}
-                      className="item"
-                    >
-                      <i className="icon admonition" />
-                      <span className="text">Admonition</span>
-                    </DropDownItem>
-                  )}
-
-                  {inlineImagePlugin && (
-                    <DropDownItem
-                      onClick={() => {
-                        activeEditor.dispatchCommand(OPEN_INLINE_IMAGE_MODAL_COMMAND, null)
-                      }}
-                      className="item"
-                    >
-                      <i className="icon image" />
-                      <span className="text">Inline Image</span>
-                    </DropDownItem>
-                  )}
-                  {tablePlugin && (
-                    <DropDownItem
-                      onClick={() => {
-                        activeEditor.dispatchCommand(OPEN_TABLE_MODAL_COMMAND, null)
-                      }}
-                      className="item"
-                    >
-                      <i className="icon table" />
-                      <span className="text">Table</span>
-                    </DropDownItem>
-                  )}
-                  {autoEmbedPlugin &&
-                    EmbedConfigs.map((embedConfig) => (
-                      <DropDownItem
-                        key={embedConfig.type}
-                        onClick={() => {
-                          activeEditor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type)
-                        }}
-                        className="item"
-                      >
-                        {embedConfig.icon}
-                        <span className="text">{embedConfig.contentName}</span>
-                      </DropDownItem>
-                    ))}
-                </DropDown>
-              </>
-            )}
+          {activeEditor === editor && insertMenuItems.length > 0 && (
+            <>
+              <Divider />
+              <DropDown
+                disabled={!isEditable}
+                buttonClassName="toolbar-item spaced"
+                buttonLabel="Insert"
+                buttonAriaLabel="Insert specialized editor node"
+                buttonIconClassName="icon plus"
+              >
+                <ToolbarActiveEditorProvider editor={activeEditor}>
+                  {insertMenuItems.map((item) => (
+                    <Fragment key={item.id}>{item.node}</Fragment>
+                  ))}
+                </ToolbarActiveEditorProvider>
+              </DropDown>
+            </>
+          )}
         </>
       )}
 
-      {toolbarExtensionItems
-        .slice()
-        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
-        .map((item) => (
+      <ToolbarActiveEditorProvider editor={activeEditor}>
+        {trailingToolbarItems.map((item) => (
           <Fragment key={item.id}>{item.node}</Fragment>
         ))}
+      </ToolbarActiveEditorProvider>
     </div>
   )
 }

package/src/field/plugins/toolbar-plugin/toolbar-active-editor.tsx

@@ -0,0 +1,48 @@
+'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 type * as React from 'react'
+import { createContext, useContext } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import type { LexicalEditor } from 'lexical'
+
+const ToolbarActiveEditorContext = createContext<LexicalEditor | null>(null)
+
+/**
+ * Provider used by the toolbar plugin to expose the *active* Lexical
+ * editor (the editor for the current selection — may be a nested
+ * composer's editor) to contributed toolbar items.
+ */
+export function ToolbarActiveEditorProvider({
+  editor,
+  children,
+}: {
+  editor: LexicalEditor
+  children: React.ReactNode
+}): React.JSX.Element {
+  return (
+    <ToolbarActiveEditorContext.Provider value={editor}>
+      {children}
+    </ToolbarActiveEditorContext.Provider>
+  )
+}
+
+/**
+ * Returns the editor a toolbar contribution should dispatch commands on.
+ * Falls back to the root composer editor when called outside the
+ * toolbar's provider, so contributions remain usable in standalone
+ * test/preview contexts.
+ */
+export function useToolbarActiveEditor(): LexicalEditor {
+  const fromToolbar = useContext(ToolbarActiveEditorContext)
+  const [composerEditor] = useLexicalComposerContext()
+  return fromToolbar ?? composerEditor
+}

package/src/field/themes/lexical-editor-theme.css

@@ -112,7 +112,8 @@
   font-family: Menlo, Consolas, Monaco, monospace;
 }
 
-html[data-theme="dark"] .LexicalEditorTheme__textCode {
+html[data-theme="dark"] .LexicalEditorTheme__textCode,
+.dark .LexicalEditorTheme__textCode {
   color: #f1f5f9;
   background-color: #1e293b;
   border-color: #495362;
@@ -165,11 +166,13 @@ html[data-theme="dark"] .LexicalEditorTheme__textCode {
   min-width: 25px;
 }
 
-html[data-theme="dark"] .LexicalEditorTheme__code {
+html[data-theme="dark"] .LexicalEditorTheme__code,
+.dark .LexicalEditorTheme__code {
   background-color: #1a1a1a;
 }
 
-html[data-theme="dark"] .LexicalEditorTheme__code:before {
+html[data-theme="dark"] .LexicalEditorTheme__code:before,
+.dark .LexicalEditorTheme__code:before {
   background-color: #161616;
   border-right: 1px solid #ccc;
   color: #777;
@@ -185,6 +188,18 @@ html[data-theme="dark"] .LexicalEditorTheme__code:before {
   margin: 30px 0;
 }
 
+.LexicalEditorTheme__tableScrollableWrapper {
+  overflow-x: auto;
+  margin: 30px 0;
+}
+
+/* When wrapped for horizontal scroll, the wrapper owns the vertical margin
+   so the table's own margin doesn't compound it. */
+.LexicalEditorTheme__tableScrollableWrapper > .LexicalEditorTheme__table {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .LexicalEditorTheme__tableSelected {
   outline: 2px solid rgb(60, 132, 244);
 }

package/src/field/themes/lexical-editor-theme.tsx

@@ -101,6 +101,7 @@ export const theme: EditorThemeClasses = {
   tableCellSelected: 'LexicalEditorTheme__tableCellSelected',
   tableCellSortedIndicator: 'LexicalEditorTheme__tableCellSortedIndicator',
   tableResizeRuler: 'LexicalEditorTheme__tableCellResizeRuler',
+  tableScrollableWrapper: 'LexicalEditorTheme__tableScrollableWrapper',
   tableSelected: 'LexicalEditorTheme__tableSelected',
   text: {
     bold: 'LexicalEditorTheme__textBold',

package/src/index.ts

@@ -11,16 +11,59 @@ export type {
 } from 'lexical'
 
 export { defaultEditorConfig } from './field/config/default'
+export {
+  defaultClientEditorConfig,
+  defaultExtensionsArray,
+  defaultExtensionsList,
+} from './field/config/default-extensions'
+export { ExtensionsList } from './field/config/extensions-list'
 export { EditorField } from './field/editor-field'
+// Built-in extensions exposed for `lexicalEditor((c) => c.extensions...)`
+// manipulation and for third-party extensions to declare against via
+// peer dependencies.
+export { AdmonitionExtension } from './field/extensions/admonition/admonition-extension'
+export { AutoEmbedExtension } from './field/extensions/auto-embed/auto-embed-extension'
+export {
+  type BylineFloatingUIConfig,
+  BylineFloatingUIExtension,
+  type BylineFloatingUIItem,
+  type BylineFloatingUIProps,
+  selectFloatingUIItems,
+} from './field/extensions/byline-floating-ui'
+export {
+  type BylineToolbarConfig,
+  BylineToolbarExtension,
+  type BylineToolbarItem,
+  type BylineToolbarPlacement,
+  selectToolbarItems,
+} from './field/extensions/byline-toolbar'
+export { CodeHighlightExtension } from './field/extensions/code-highlight/code-highlight-extension'
+export { FloatingTextFormatExtension } from './field/extensions/floating-text-format/floating-text-format-extension'
+export { HorizontalRuleExtension } from './field/extensions/horizontal-rule/horizontal-rule-extension'
+export {
+  type InlineImageConfig,
+  InlineImageExtension,
+} from './field/extensions/inline-image/inline-image-extension'
+export { LayoutExtension } from './field/extensions/layout/layout-extension'
+export { AutoLinkExtension, LinkExtension } from './field/extensions/link'
+export { TableExtension } from './field/extensions/table/table-extension'
+export { VimeoExtension } from './field/extensions/vimeo/vimeo-extension'
+export { YouTubeExtension } from './field/extensions/youtube/youtube-extension'
 export { Nodes } from './field/nodes'
+// Hook for extensions that contribute toolbar items via
+// BylineToolbarExtension and need the active editor for command dispatch.
+export {
+  ToolbarActiveEditorProvider,
+  useToolbarActiveEditor,
+} from './field/plugins/toolbar-plugin/toolbar-active-editor'
 export { lexicalEditor } from './lexical-editor'
 export { RichTextField } from './richtext-field'
 export { createEmptyEditorState } from './validate/createEmptyEditorState'
 export { hasText } from './validate/hasText'
 export type { EditorConfig, EditorSettings, EditorSettingsOverride } from './field/config/types'
-export type { DocumentRelation } from './field/nodes/document-relation'
 export type {
   InlineImageAttributes,
   Position as InlineImagePosition,
   SerializedInlineImageNode,
-} from './field/nodes/inline-image-node/types'
+} from './field/extensions/inline-image/node-types'
+export type { DocumentRelation } from './field/nodes/document-relation'

package/src/lexical-editor.tsx

@@ -10,32 +10,46 @@ import type { RichTextEditorComponent } from '@byline/core'
 import { cloneDeep } from 'lodash-es'
 
 import { defaultEditorConfig } from './field/config/default'
+import { defaultExtensionsList } from './field/config/default-extensions'
 import { RichTextField } from './richtext-field'
+import type { ExtensionsList } from './field/config/extensions-list'
 import type { EditorConfig } from './field/config/types'
 
 /**
- * Returns a `RichTextEditorComponent` with editor settings baked in. Use this
- * at the registration site in your admin config when you want to
- * customise the editor across the whole installation; per-field overrides
- * via `RichTextField.editorConfig` continue to take precedence at render time.
+ * Inside `lexicalEditor((c) => ...)` the seed always carries an
+ * `ExtensionsList`, so narrow the callback parameter so callers can write
+ * `c.extensions.add(...)` without a non-null assertion.
+ */
+export type LexicalEditorConfigureInput = Omit<EditorConfig, 'extensions'> & {
+  extensions: ExtensionsList
+}
+
+/**
+ * Returns a `RichTextEditorComponent` with editor settings baked in. Use
+ * this at the registration site in your admin config when you want to
+ * customise the editor across the whole installation; per-field
+ * overrides via `RichTextField.editorConfig` continue to take precedence
+ * at render time.
  *
- * The `configure` callback receives a deep clone of `defaultEditorConfig` —
- * mutate and return, or return a new object. Mutating the input is safe
- * because the clone is local to this call.
+ * The `configure` callback receives a deep clone of `defaultEditorConfig`
+ * with `extensions` populated from `defaultExtensionsList()`. Mutate the
+ * clone freely — it's local to this call. Use the chainable
+ * `c.extensions.add(...)`, `.remove(...)`, `.replace(...)`, and
+ * `.configure(...)` methods to manipulate the extension graph.
  *
- * Calling `lexicalEditor()` with no argument is equivalent to registering
- * `RichTextField` directly.
+ * Calling `lexicalEditor()` with no argument is equivalent to
+ * registering `RichTextField` directly with the package defaults.
  *
  * @example
  * ```ts
- * import { lexicalEditor } from '@byline/richtext-lexical'
+ * import { lexicalEditor, TableExtension } from '@byline/richtext-lexical'
  *
  * defineClientConfig({
  *   fields: {
  *     richText: {
  *       editor: lexicalEditor((c) => {
- *         c.settings.options.tablePlugin = false
- *         c.settings.options.codeHighlightPlugin = false
+ *         c.extensions.remove(TableExtension)        // drop a built-in
+ *         c.settings.placeholderText = 'Start writing...'
  *         return c
  *       }),
  *     },
@@ -44,9 +58,16 @@ import type { EditorConfig } from './field/config/types'
  * ```
  */
 export function lexicalEditor(
-  configure?: (config: EditorConfig) => EditorConfig
+  configure?: (config: LexicalEditorConfigureInput) => LexicalEditorConfigureInput
 ): RichTextEditorComponent {
-  const baked = configure ? configure(cloneDeep(defaultEditorConfig)) : undefined
+  let baked: EditorConfig | undefined
+  if (configure) {
+    const seed: LexicalEditorConfigureInput = {
+      ...cloneDeep(defaultEditorConfig),
+      extensions: defaultExtensionsList(),
+    }
+    baked = configure(seed)
+  }
 
   const ConfiguredEditor: RichTextEditorComponent = (props) => (
     <RichTextField {...props} editorConfig={baked} />