frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/molecules/editor/extensions/toc-node/toc-render.ts

@@ -17,11 +17,12 @@ import {
   type TocRenderNode,
 } from '#molecules/editor/extensions/shared/heading-tree-utils'
 
-const OL_STYLE = 'list-style-type: decimal; margin: 0.5em 0; padding-left: 1.5em'
+const OL_STYLE =
+  'list-style-type: decimal; margin: 0.5em 0; padding-left: 1.5em'
 const NESTED_OL_STYLE = 'list-style-type: decimal; padding-left: 1.5em'
 
 /** Element-spec tuple: `[tag, attrs, ...children]`. Assignable to DOMOutputSpec. */
-type ElementSpec = readonly [string, Record<string, string>, ...DOMOutputSpec[]]
+type ElementSpec = readonly [string, Record<string, string>, ...any[]]
 
 function renderNode(node: TocRenderNode): ElementSpec {
   const paragraph: ElementSpec = ['p', { style: 'margin: 0' }, node.text]
@@ -59,7 +60,10 @@ export function renderTocHTML(
     return ['div', attrs, 'No headings found in this document.']
   }
 
-  const tree = foldHeadings(headings, (item) => item as (typeof headings)[number])
+  const tree = foldHeadings(
+    headings,
+    (item) => item as (typeof headings)[number],
+  )
   const spec = headingsToRenderSpec(tree)
   const list: ElementSpec = ['ol', { style: OL_STYLE }, ...spec.map(renderNode)]
 

package/src/molecules/editor/extensions/video/video-extension.ts

@@ -17,13 +17,14 @@ import {
   Node as NodeExtension,
   nodeInputRule,
   mergeAttributes,
+  type Editor,
 } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import MediaNodeView from '#molecules/editor/components/MediaNodeView.vue'
-import type { UploadedFile } from '#utils/useFileUpload'
 import {
   resolveUploadOptions,
   type MediaUploadOptions,
+  type UploadFunction,
 } from '#molecules/editor/extensions/shared/media-upload-engine'
 import { createMediaPlugin } from '#molecules/editor/extensions/shared/media-plugin'
 import { findNodeByUploadId } from '#molecules/editor/extensions/shared/node-view'
@@ -32,10 +33,11 @@ import { videoConfig, videoEngine } from './video-config'
 
 export interface VideoExtensionOptions {
   /**
-   * Function to handle video uploads
+   * Function to handle video uploads. Receives optional request options
+   * (abort signal + progress callback) as the second argument.
    * @default null
    */
-  uploadFunction: ((file: File) => Promise<UploadedFile>) | null
+  uploadFunction: UploadFunction | null
 
   /**
    * HTML attributes to add to the video element
@@ -104,6 +106,25 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
         default: false,
         parseHTML: () => false,
       },
+      align: {
+        default: 'center',
+        parseHTML: (element) => {
+          const align = (
+            element.getAttribute('data-align') ||
+            element.getAttribute('align') ||
+            'center'
+          ).toLowerCase()
+          if (['left', 'center', 'right'].includes(align)) {
+            return align as 'left' | 'center' | 'right'
+          }
+          return 'center'
+        },
+        renderHTML: (attributes) => {
+          return {
+            'data-align': attributes.align || 'center',
+          }
+        },
+      },
       float: {
         default: null,
         parseHTML: (element) => {
@@ -177,7 +198,10 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
         (attributes: SetVideoOptions) =>
         ({ commands }) => {
           // F4: reject an empty/blank src instead of inserting a broken node.
-          if (typeof attributes.src !== 'string' || attributes.src.trim() === '') {
+          if (
+            typeof attributes.src !== 'string' ||
+            attributes.src.trim() === ''
+          ) {
             return false
           }
           return commands.insertContent({
@@ -193,11 +217,20 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
           return true
         },
 
+      uploadVideoFiles:
+        (files: File[], pos: number | null = null) =>
+        ({ editor }) => {
+          if (files.length === 0) return false
+          void videoEngine.processMultiple(files, editor, pos, resolve())
+          return true
+        },
+
       selectAndUploadVideo:
         () =>
         ({ editor }) => {
           void pickFiles({ accept: 'video/*' }).then((files) => {
-            if (!editor.isDestroyed && files[0]) editor.commands.uploadVideo(files[0])
+            if (!editor.isDestroyed && files[0])
+              editor.commands.uploadVideo(files[0])
           })
           return true
         },
@@ -213,6 +246,40 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
           void videoEngine.reupload(editor, pos, resolve())
           return true
         },
+
+      replaceVideo:
+        (pos: number, file: File) =>
+        ({ editor }: { editor: Editor }) => {
+          const node = editor.view.state.doc.nodeAt(pos)
+          if (!node || node.type.name !== this.name) return false
+          void videoEngine.uploadReplace(
+            file,
+            editor,
+            pos,
+            resolve(),
+            node.attrs,
+          )
+          return true
+        },
+
+      setVideoOptions:
+        (
+          options: Partial<
+            Pick<SetVideoOptions, 'autoplay' | 'loop' | 'muted'>
+          >,
+        ) =>
+        ({
+          commands,
+        }: {
+          commands: {
+            updateAttributes: (
+              name: string,
+              attrs: Record<string, unknown>,
+            ) => boolean
+          }
+        }) => {
+          return commands.updateAttributes(this.name, options)
+        },
     }
   },
 

package/src/molecules/editor/extensions.ts

@@ -1,7 +1,43 @@
-import { type Editor } from '@tiptap/core'
-import StarterKitExtension from '@tiptap/starter-kit'
+import { Extension, type Editor, type Extensions } from '@tiptap/core'
+import {
+  Blockquote,
+  type BlockquoteOptions,
+} from '@tiptap/extension-blockquote'
+import { Bold, type BoldOptions } from '@tiptap/extension-bold'
+import { Document } from '@tiptap/extension-document'
+import { HardBreak, type HardBreakOptions } from '@tiptap/extension-hard-break'
+import {
+  HorizontalRule,
+  type HorizontalRuleOptions,
+} from '@tiptap/extension-horizontal-rule'
+import { Italic, type ItalicOptions } from '@tiptap/extension-italic'
+import {
+  BulletList,
+  type BulletListOptions,
+  ListItem,
+  type ListItemOptions,
+  ListKeymap,
+  type ListKeymapOptions,
+  OrderedList,
+  type OrderedListOptions,
+} from '@tiptap/extension-list'
+import { Paragraph, type ParagraphOptions } from '@tiptap/extension-paragraph'
+import { Strike, type StrikeOptions } from '@tiptap/extension-strike'
+import { Text } from '@tiptap/extension-text'
+import { Underline, type UnderlineOptions } from '@tiptap/extension-underline'
+import {
+  Dropcursor,
+  type DropcursorOptions,
+  Gapcursor,
+  TrailingNode,
+  type TrailingNodeOptions,
+  UndoRedo,
+  type UndoRedoOptions,
+} from '@tiptap/extensions'
 import PlaceholderExtension from '@tiptap/extension-placeholder'
-import HeadingExtension from '@tiptap/extension-heading'
+import HeadingExtension, {
+  type HeadingOptions,
+} from '@tiptap/extension-heading'
 import HeadingIdsExtension from './extensions/heading/heading-ids'
 import { LinkExtension } from './extensions/link'
 // Custom code mark + lowlight code block (input rule, indent keymaps, language
@@ -10,9 +46,15 @@ import { ExtendedCode, ExtendedCodeBlock } from './extensions/code-block'
 import {
   Table as TiptapTable,
   TableRow,
-  TableCell,
-  TableHeader,
+  TableCell as TiptapTableCell,
+  TableHeader as TiptapTableHeader,
 } from '@tiptap/extension-table'
+import { columnResizing, tableEditing, TableView } from '@tiptap/pm/tables'
+import {
+  cellBackgroundAttributes,
+  TableCellColor as TableCellColorExtension,
+} from './extensions/table/table-cell-color'
+import { TableSelectionOverlay as TableSelectionOverlayExtension } from './extensions/table/table-selection-overlay'
 import TaskListExtension from '@tiptap/extension-task-list'
 import TaskItemExtension from '@tiptap/extension-task-item'
 import TypographyExtension from '@tiptap/extension-typography'
@@ -26,6 +68,8 @@ import { ImageExtension } from './extensions/image'
 import { ImageGroup as ImageGroupExtension } from './extensions/image-group'
 import ImageViewerExtension from './extensions/image-viewer'
 import { VideoExtension } from './extensions/video'
+import { AttachmentExtension } from './extensions/attachment'
+import { MediaDrop as MediaDropExtension } from './extensions/media-drop/media-drop-extension'
 import { IframeExtension } from './extensions/iframe'
 import {
   MentionExtension,
@@ -44,7 +88,82 @@ export {
 } from './SuggestionExtension'
 export type { MentionSuggestionItem, TagSuggestionItem }
 
-export const StarterKit = StarterKitExtension
+type StarterKitMember<O> = Partial<O> | false
+
+export interface StarterKitOptions {
+  blockquote?: StarterKitMember<BlockquoteOptions>
+  bold?: StarterKitMember<BoldOptions>
+  bulletList?: StarterKitMember<BulletListOptions>
+  code?: false
+  codeBlock?: false
+  document?: false
+  dropcursor?: StarterKitMember<DropcursorOptions>
+  gapcursor?: false
+  hardBreak?: StarterKitMember<HardBreakOptions>
+  heading?: StarterKitMember<HeadingOptions>
+  horizontalRule?: StarterKitMember<HorizontalRuleOptions>
+  italic?: StarterKitMember<ItalicOptions>
+  link?: false
+  listItem?: StarterKitMember<ListItemOptions>
+  listKeymap?: StarterKitMember<ListKeymapOptions>
+  orderedList?: StarterKitMember<OrderedListOptions>
+  paragraph?: StarterKitMember<ParagraphOptions>
+  strike?: StarterKitMember<StrikeOptions>
+  text?: false
+  trailingNode?: StarterKitMember<TrailingNodeOptions>
+  underline?: StarterKitMember<UnderlineOptions>
+  undoRedo?: StarterKitMember<UndoRedoOptions>
+}
+
+function pushConfigured<O>(
+  list: Extensions,
+  extension: { configure: (options?: Partial<O>) => any },
+  option: StarterKitMember<O> | undefined,
+) {
+  if (option !== false) list.push(extension.configure(option ?? {}))
+}
+
+/**
+ * Dropcursor with the design-system drop indicator: a 3px rounded gray bar
+ * (rounded corners via `.editor-drop-cursor` in style.css) instead of the
+ * default 1px black line.
+ */
+export const EditorDropcursor = Dropcursor.configure({
+  width: 3,
+  color: 'var(--surface-gray-10, #383838)',
+  class: 'editor-drop-cursor',
+})
+
+export const StarterKit = Extension.create<StarterKitOptions>({
+  name: 'frappeStarterKit',
+  addOptions() {
+    return {}
+  },
+  addExtensions() {
+    const list: Extensions = []
+    pushConfigured(list, Bold, this.options.bold)
+    pushConfigured(list, Blockquote, this.options.blockquote)
+    pushConfigured(list, BulletList, this.options.bulletList)
+    if (this.options.document !== false) list.push(Document)
+    pushConfigured(list, EditorDropcursor, this.options.dropcursor)
+    if (this.options.gapcursor !== false) list.push(Gapcursor)
+    pushConfigured(list, HardBreak, this.options.hardBreak)
+    pushConfigured(list, HeadingExtension, this.options.heading)
+    pushConfigured(list, UndoRedo, this.options.undoRedo)
+    pushConfigured(list, HorizontalRule, this.options.horizontalRule)
+    pushConfigured(list, Italic, this.options.italic)
+    pushConfigured(list, ListItem, this.options.listItem)
+    pushConfigured(list, ListKeymap, this.options.listKeymap)
+    pushConfigured(list, OrderedList, this.options.orderedList)
+    pushConfigured(list, Paragraph, this.options.paragraph)
+    pushConfigured(list, Strike, this.options.strike)
+    if (this.options.text !== false) list.push(Text)
+    pushConfigured(list, Underline, this.options.underline)
+    pushConfigured(list, TrailingNode, this.options.trailingNode)
+    if (this.options.heading !== false) list.push(HeadingIds)
+    return list
+  },
+})
 
 type PlaceholderStorage = { text: string | null }
 
@@ -103,8 +222,52 @@ export const HeadingIds = HeadingIdsExtension
 export const Link = LinkExtension
 export const Code = ExtendedCode
 export const CodeBlock = ExtendedCodeBlock
-export const Table = TiptapTable.configure({ resizable: true })
-export { TableRow, TableCell, TableHeader }
+// Stock @tiptap gates `columnResizing` behind `resizable && editor.isEditable`,
+// evaluated once at editor creation. That has three consequences we don't want:
+// the plugin also owns the `.tableWrapper` scroll container (so read-only and
+// born-read-only editors get a bare table that overflows its bounds), and
+// `setEditable()` never reconfigures plugins (so toggling an existing comment
+// into edit mode never installs resizing). `columnResizing` already no-ops its
+// own pointer handlers when `!view.editable`, so installing it whenever
+// `resizable` is set is safe in read-only and keeps the wrapper in every mode.
+export const Table = TiptapTable.configure({ resizable: true }).extend({
+  addProseMirrorPlugins() {
+    return [
+      ...(this.options.resizable
+        ? [
+            columnResizing({
+              handleWidth: this.options.handleWidth,
+              cellMinWidth: this.options.cellMinWidth,
+              defaultCellMinWidth: this.options.cellMinWidth,
+              View: this.options.View ?? TableView,
+              lastColumnResizable: this.options.lastColumnResizable,
+            }),
+          ]
+        : []),
+      tableEditing({ allowTableNodeSelection: this.options.allowTableNodeSelection }),
+    ]
+  },
+})
+// Cell nodes carry a named `backgroundColor` attribute (rendered via
+// `--prose-highlight-*`); see `extensions/table/table-cell-color`.
+export const TableCell = TiptapTableCell.extend({
+  addAttributes() {
+    return { ...this.parent?.(), ...cellBackgroundAttributes }
+  },
+})
+export const TableHeader = TiptapTableHeader.extend({
+  addAttributes() {
+    return { ...this.parent?.(), ...cellBackgroundAttributes }
+  },
+})
+export { TableRow }
+// Spreadsheet-style cell navigation (active-cell highlight, Enter to edit, Esc
+// to exit, arrow keys to move). Loaded alongside Table in the kits.
+export { TableNavigation } from './extensions/table/table-navigation'
+// First-class named cell background + text color commands, and the single-box
+// multi-cell selection overlay. Both loaded alongside Table.
+export const TableCellColor = TableCellColorExtension
+export const TableSelectionOverlay = TableSelectionOverlayExtension
 export const TaskList = TaskListExtension
 export const TaskItem = TaskItemExtension.configure({ nested: true })
 export const Typography = TypographyExtension
@@ -126,6 +289,10 @@ export const Image = ImageExtension
 export const ImageGroup = ImageGroupExtension
 export const ImageViewer = ImageViewerExtension
 export const Video = VideoExtension
+// Inline file attachments (pdf, docx, zip, csv, …). Same shared upload function
+// as image/video; renders a gray chip/link via AttachmentNodeView.
+export const Attachment = AttachmentExtension
+export const MediaDrop = MediaDropExtension
 export const Iframe = IframeExtension
 export const Mention = MentionExtension
 
@@ -143,3 +310,4 @@ export { SlashCommands }
 export const Toc = TocNodeExtension
 export const ContentPaste = ContentPasteExtension
 export const StyleClipboard = StyleClipboardExtension
+export type { MediaUploadRequestOptions } from './extensions/shared/media-upload-engine'

package/src/molecules/editor/index.ts

@@ -1,20 +1,25 @@
+// Editor styles ship with the package: importing from `frappe-ui/editor` pulls
+// in the ProseMirror/prose-v3 rules so the editor is self-contained and does not
+// rely on any other component's stylesheet being loaded.
+import './style.css'
+
 // Engine
 export {
   useEditor,
-  type Editor,
+  type Editor as TiptapEditor,
   type JSONContent,
   type UploadedFile,
 } from './useEditor'
 
-// The component. NOTE: this is the `Editor` *value*; the `Editor` *type* above
-// (the tiptap instance) lives in a separate namespace, so `import { Editor }`
-// gets the component and `import type { Editor }` gets the type.
+// The component. Use `TiptapEditor` for the underlying editor instance type.
 export { default as Editor } from './Editor.vue'
 
 // Building blocks (compose without <Editor>)
 export { default as EditorContent } from './EditorContent.vue'
+export { default as EditorDropZone } from './components/EditorDropZone.vue'
 export { default as EditorFixedMenu } from './EditorFixedMenu.vue'
 export { default as EditorBubbleMenu } from './EditorBubbleMenu.vue'
+export { default as EditorTableMenu } from './EditorTableMenu.vue'
 export { default as EditorFloatingMenu } from './EditorFloatingMenu.vue'
 
 // Kits — configurable extension bundles (StarterKit is re-exported from extensions)

package/src/molecules/editor/kits.test.ts

@@ -6,7 +6,7 @@ import { describe, it, expect } from 'vitest'
 import { getSchema, resolveExtensions, Mark } from '@tiptap/core'
 import type { AnyExtension } from '@tiptap/core'
 import { CommentKit, RichTextKit, InlineKit } from './kits'
-import { StarterKit, Mention, Tag } from './extensions'
+import { StarterKit, Mention, Tag, Link, Code, CodeBlock } from './extensions'
 
 function schemaOf(...extensions: AnyExtension[]) {
   const schema = getSchema(extensions)
@@ -28,6 +28,17 @@ describe('editor kits', () => {
     expect(nodes.has('heading')).toBe(true)
     expect(marks.has('bold')).toBe(true)
     expect(marks.has('italic')).toBe(true)
+    expect(marks.has('link')).toBe(false)
+    expect(marks.has('code')).toBe(false)
+    expect(nodes.has('codeBlock')).toBe(false)
+  })
+
+  it('StarterKit composes with frappe-ui replacements without duplicate stock extensions', () => {
+    expect(() => schemaOf(StarterKit, Link, Code, CodeBlock)).not.toThrow()
+    const { marks, nodes } = schemaOf(StarterKit, Link, Code, CodeBlock)
+    expect(marks.has('link')).toBe(true)
+    expect(marks.has('code')).toBe(true)
+    expect(nodes.has('codeBlock')).toBe(true)
   })
 
   it('CommentKit bundles comment-grade members and excludes table/toc/slash', () => {
@@ -35,6 +46,7 @@ describe('editor kits', () => {
     expect(nodes.has('paragraph')).toBe(true)
     expect(nodes.has('heading')).toBe(true)
     expect(nodes.has('image')).toBe(true)
+    expect(nodes.has('attachment')).toBe(true)
     expect(nodes.has('mention')).toBe(true)
     expect(nodes.has('tagItem')).toBe(true)
     expect(marks.has('link')).toBe(true)
@@ -43,11 +55,19 @@ describe('editor kits', () => {
 
     const names = extensionNames(CommentKit)
     expect(names.has('imageViewer')).toBe(true)
+    expect(names.has('mediaDrop')).toBe(true)
     expect(names.has('table')).toBe(false)
     expect(names.has('tableOfContents')).toBe(false)
     expect(names.has('slashCommands')).toBe(false)
   })
 
+  it('drops the attachment node when removed with `false`', () => {
+    expect(schemaOf(CommentKit).nodes.has('attachment')).toBe(true)
+    const { nodes } = schemaOf(CommentKit.configure({ attachment: false }))
+    expect(nodes.has('attachment')).toBe(false)
+    expect(nodes.has('image')).toBe(true) // others remain
+  })
+
   it('RichTextKit adds tables, task lists, color, and slash commands', () => {
     const { marks, nodes } = schemaOf(RichTextKit)
     expect(nodes.has('table')).toBe(true)

package/src/molecules/editor/kits.ts

@@ -1,18 +1,26 @@
 import { Extension, Node, type Extensions } from '@tiptap/core'
 import type { Component, MaybeRefOrGetter } from 'vue'
-import StarterKit, { type StarterKitOptions } from '@tiptap/starter-kit'
+import { Bold } from '@tiptap/extension-bold'
+import { Italic } from '@tiptap/extension-italic'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Strike } from '@tiptap/extension-strike'
+import { Text } from '@tiptap/extension-text'
+import { Underline } from '@tiptap/extension-underline'
+import { Gapcursor, UndoRedo } from '@tiptap/extensions'
 import type { HeadingOptions } from '@tiptap/extension-heading'
 import type { LinkOptions } from '@tiptap/extension-link'
 import {
   Placeholder,
   Link,
+  StarterKit,
   Code,
   CodeBlock,
-  HeadingIds,
   Image,
   ImageGroup,
   ImageViewer,
   Video,
+  Attachment,
+  MediaDrop,
   ContentPaste,
   Emoji,
   Mention,
@@ -21,6 +29,9 @@ import {
   TableRow,
   TableCell,
   TableHeader,
+  TableNavigation,
+  TableCellColor,
+  TableSelectionOverlay,
   TaskList,
   TaskItem,
   Iframe,
@@ -32,6 +43,8 @@ import {
   Typography,
   TextAlign,
   StyleClipboard,
+  EditorDropcursor,
+  type StarterKitOptions,
   type MentionSuggestionItem,
   type TagSuggestionItem,
 } from './extensions'
@@ -66,16 +79,11 @@ function starterKitBase(
   if (starter === false) return []
   return [
     StarterKit.configure({
-      link: false,
-      code: false,
-      codeBlock: false,
       ...starter,
       heading: heading as StarterKitOptions['heading'],
     }),
     Code,
     CodeBlock,
-    // Stable heading ids only matter when headings exist.
-    ...(heading === false ? [] : [HeadingIds]),
   ]
 }
 
@@ -101,6 +109,10 @@ export interface CommentKitOptions {
   imageGroup: CustomMember
   imageViewer: CustomMember
   video: CustomMember
+  attachment: CustomMember
+  // Tables. Off by default for CommentKit (the lighter stack); RichTextKit turns
+  // it on. Opt in with `CommentKit.configure({ table: {} })`.
+  table: CustomMember
   contentPaste: CustomMember
   emoji: CustomMember
   mention: MentionMember
@@ -116,6 +128,8 @@ const commentKitDefaults = (): CommentKitOptions => ({
   imageGroup: {},
   imageViewer: {},
   video: {},
+  attachment: {},
+  table: false,
   contentPaste: {},
   emoji: {},
   mention: {},
@@ -135,6 +149,29 @@ function commentMembers(options: CommentKitOptions): Extensions {
   if (options.image !== false)
     pushMember(list, ImageViewer, options.imageViewer)
   pushMember(list, Video, options.video)
+  pushMember(list, Attachment, options.attachment)
+  // The single drop pipeline; only useful when there's a media or attachment
+  // node to route to.
+  if (
+    options.image !== false ||
+    options.video !== false ||
+    options.attachment !== false
+  )
+    list.push(MediaDrop)
+  // Table needs its row/cell/header companions; TableNavigation adds the
+  // spreadsheet-style cell navigation. Shared so both kits get it (off by
+  // default for CommentKit, on for RichTextKit).
+  if (options.table !== false) {
+    list.push(
+      Table.configure(options.table),
+      TableRow,
+      TableCell,
+      TableHeader,
+      TableNavigation,
+      TableCellColor,
+      TableSelectionOverlay,
+    )
+  }
   pushMember(list, ContentPaste, options.contentPaste)
   pushMember(list, Emoji, options.emoji)
   pushMember(list, Mention, options.mention)
@@ -188,17 +225,10 @@ export const RichTextKit = Extension.create<RichTextKitOptions>({
   },
   addExtensions() {
     const options = this.options
+    // Table is handled by commentMembers (shared, on for RichTextKit via the
+    // `table: {}` default below).
     const list: Extensions = commentMembers(options)
 
-    // Table needs its row/cell/header companions.
-    if (options.table !== false) {
-      list.push(
-        Table.configure(options.table),
-        TableRow,
-        TableCell,
-        TableHeader,
-      )
-    }
     // Task list needs its item companion.
     if (options.taskList !== false) {
       list.push(TaskList.configure(options.taskList), TaskItem)
@@ -255,24 +285,17 @@ export const InlineKit = Extension.create<InlineKitOptions>({
     if (options.starterKit !== false) {
       list.push(
         OneLineDocument,
-        // Keep the inline marks; drop every block-level affordance plus the
-        // built-in document/link (replaced above / by the Link member).
-        StarterKit.configure({
-          document: false,
-          link: false,
-          heading: false,
-          bulletList: false,
-          orderedList: false,
-          listItem: false,
-          listKeymap: false,
-          blockquote: false,
-          codeBlock: false,
-          horizontalRule: false,
-          hardBreak: false,
-          trailingNode: false,
-          ...options.starterKit,
-        }),
+        Text,
+        Paragraph,
       )
+      if (options.starterKit.bold !== false) list.push(Bold)
+      if (options.starterKit.italic !== false) list.push(Italic)
+      if (options.starterKit.strike !== false) list.push(Strike)
+      if (options.starterKit.underline !== false) list.push(Underline)
+      if (options.starterKit.code !== false) list.push(Code)
+      if (options.starterKit.dropcursor !== false) list.push(EditorDropcursor)
+      if (options.starterKit.gapcursor !== false) list.push(Gapcursor)
+      if (options.starterKit.undoRedo !== false) list.push(UndoRedo)
     }
     pushMember(list, Placeholder, options.placeholder)
     pushMember(list, Link, options.link)

package/src/molecules/editor/menu.test.ts

@@ -254,7 +254,9 @@ describe('editor menu primitives and presets', () => {
       items: [InsertImage, InsertVideo, InsertLink],
     })
 
-    ;(root.querySelector('[aria-label="Image"]') as HTMLButtonElement).click()
+    ;(
+      root.querySelector('[aria-label="Image / Gallery"]') as HTMLButtonElement
+    ).click()
     ;(root.querySelector('[aria-label="Video"]') as HTMLButtonElement).click()
     ;(root.querySelector('[aria-label="Link"]') as HTMLButtonElement).click()