frappe-ui 1.0.0-beta.66 → 1.0.0-beta.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.66",
+  "version": "1.0.0-beta.67",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"
@@ -21,6 +21,7 @@
   "bin": {
     "tokens-v2": "./tailwind/migrate-tokens-v2.js",
     "shortcuts-v1": "./scripts/migrate-shortcuts-v1.js",
+    "editor-v1": "./scripts/migrate-editor-v1.js",
     "destinations-v1": "./scripts/migrate-destinations-v1.js"
   },
   "scripts": {
@@ -103,6 +104,7 @@
     "tailwind",
     "vitepress",
     "scripts/migrate-shortcuts-v1.js",
+    "scripts/migrate-editor-v1.js",
     "experimental",
     "experimental.ts",
     "tsconfig.base.json"

package/scripts/migrate-editor-v1.js

@@ -0,0 +1,477 @@
+#!/usr/bin/env node
+/**
+ * Editor v1 migration codemod.
+ *
+ * Renames the public EditorFixedMenu `buttonSize` prop to `size` in Vue
+ * templates. Suggestion `component` keys deliberately stay manual because the
+ * replacement is `nodeView` or `listComponent` depending on the config shape.
+ *
+ * Usage: editor-v1 [--dry-run] <dir-or-file...>
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import ts from 'typescript'
+
+const USAGE = 'Usage: editor-v1 [--dry-run] <dir-or-file...>'
+const OPTIONS = new Set(['--dry-run', '--help', '-h'])
+const VUE_EXTENSIONS = new Set(['.vue'])
+const SKIP_DIRS = new Set([
+  'node_modules',
+  '.git',
+  'dist',
+  'build',
+  'cache',
+  'coverage',
+])
+
+function kebabCase(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function editorFixedMenuBindings(source) {
+  const bindings = new Set()
+  const importPattern =
+    /import\s*\{([^}]*)\}\s*from\s*['"]frappe-ui\/editor['"]/g
+  for (const match of source.matchAll(importPattern)) {
+    for (const specifier of match[1].split(',')) {
+      const parts = specifier
+        .trim()
+        .match(/^EditorFixedMenu(?:\s+as\s+([A-Za-z_$][\w$]*))?$/)
+      if (parts) bindings.add(parts[1] || 'EditorFixedMenu')
+    }
+  }
+  return bindings
+}
+
+function lineAt(source, offset) {
+  return source.slice(0, offset).split('\n').length
+}
+
+function tagEnd(source, start) {
+  let quote
+  for (let index = start; index < source.length; index++) {
+    const char = source[index]
+    if (quote) {
+      if (char === quote) quote = undefined
+    } else if (char === '"' || char === "'") {
+      quote = char
+    } else if (char === '>') {
+      return index + 1
+    }
+  }
+  return source.length
+}
+
+function expressionEnd(source, start) {
+  let quote
+  let escaped = false
+  for (let index = start; index < source.length - 1; index++) {
+    const char = source[index]
+    if (quote) {
+      if (escaped) escaped = false
+      else if (char === '\\') escaped = true
+      else if (char === quote) quote = undefined
+    } else if (char === '"' || char === "'" || char === '`') {
+      quote = char
+    } else if (char === '}' && source[index + 1] === '}') {
+      return index + 2
+    }
+  }
+  return source.length
+}
+
+function templateContentRange(source) {
+  let index = 0
+  while (index < source.length) {
+    const start = source.indexOf('<', index)
+    if (start === -1) return
+    if (source.startsWith('<!--', start)) {
+      const end = source.indexOf('-->', start + 4)
+      index = end === -1 ? source.length : end + 3
+      continue
+    }
+
+    const opening = source.slice(start).match(/^<([A-Za-z][\w.-]*)\b/)
+    if (!opening) {
+      index = start + 1
+      continue
+    }
+    const name = opening[1]
+    const contentStart = tagEnd(source, start)
+    if (name !== 'template') {
+      const closing = new RegExp(`</${name}\\s*>`, 'i').exec(
+        source.slice(contentStart),
+      )
+      index = closing
+        ? contentStart + closing.index + closing[0].length
+        : contentStart
+      continue
+    }
+
+    let depth = 1
+    index = contentStart
+    while (index < source.length) {
+      if (source.startsWith('<!--', index)) {
+        const end = source.indexOf('-->', index + 4)
+        index = end === -1 ? source.length : end + 3
+        continue
+      }
+      if (source.startsWith('{{', index)) {
+        index = expressionEnd(source, index + 2)
+        continue
+      }
+      if (source[index] !== '<') {
+        index++
+        continue
+      }
+      const tag = source.slice(index).match(/^<(\/?)([A-Za-z][\w.-]*)\b/i)
+      if (!tag) {
+        index++
+        continue
+      }
+      const end = tagEnd(source, index)
+      // Skip the whole tag so a literal `<template>` inside an attribute
+      // value is not mistaken for a nested template boundary.
+      if (tag[2].toLowerCase() === 'template') {
+        if (tag[1]) depth--
+        else if (!/\/\s*>$/.test(source.slice(index, end))) depth++
+        if (depth === 0) return { start: contentStart, end: index }
+      }
+      index = end
+    }
+    return { start: contentStart, end: source.length }
+  }
+}
+
+function attributesIn(tag, tagNameLength) {
+  const attributes = []
+  let index = 1 + tagNameLength
+  while (index < tag.length - 1) {
+    while (/\s/.test(tag[index])) index++
+    if (tag[index] === '/' || tag[index] === '>' || index >= tag.length - 1)
+      break
+
+    const start = index
+    while (index < tag.length && !/[\s=/>]/.test(tag[index])) index++
+    const nameEnd = index
+    while (/\s/.test(tag[index])) index++
+
+    let value
+    if (tag[index] === '=') {
+      index++
+      while (/\s/.test(tag[index])) index++
+      const quote = tag[index]
+      if (quote === '"' || quote === "'") {
+        const valueStart = ++index
+        while (index < tag.length && tag[index] !== quote) index++
+        value = tag.slice(valueStart, index)
+        if (index < tag.length) index++
+      } else {
+        const valueStart = index
+        while (index < tag.length && !/[\s>]/.test(tag[index])) index++
+        value = tag.slice(valueStart, index)
+      }
+    }
+    attributes.push({ start, nameEnd, name: tag.slice(start, nameEnd), value })
+  }
+  return attributes
+}
+
+function propertyNameText(name) {
+  if (ts.isIdentifier(name) || ts.isStringLiteral(name)) return name.text
+  if (ts.isComputedPropertyName(name) && ts.isStringLiteral(name.expression)) {
+    return name.expression.text
+  }
+}
+
+function mergeObjectBindAnalysis(left, right) {
+  return {
+    hasLegacy: left.hasLegacy || right.hasLegacy,
+    hasSize: left.hasSize || right.hasSize,
+    opaque: left.opaque || right.opaque,
+  }
+}
+
+function analyzeObjectBindExpression(expression) {
+  while (
+    ts.isParenthesizedExpression(expression) ||
+    ts.isAsExpression(expression) ||
+    ts.isTypeAssertionExpression(expression) ||
+    ts.isSatisfiesExpression(expression)
+  ) {
+    expression = expression.expression
+  }
+
+  if (ts.isConditionalExpression(expression)) {
+    return mergeObjectBindAnalysis(
+      analyzeObjectBindExpression(expression.whenTrue),
+      analyzeObjectBindExpression(expression.whenFalse),
+    )
+  }
+  if (
+    ts.isBinaryExpression(expression) &&
+    [
+      ts.SyntaxKind.BarBarToken,
+      ts.SyntaxKind.QuestionQuestionToken,
+      ts.SyntaxKind.AmpersandAmpersandToken,
+    ].includes(expression.operatorToken.kind)
+  ) {
+    return mergeObjectBindAnalysis(
+      analyzeObjectBindExpression(expression.left),
+      analyzeObjectBindExpression(expression.right),
+    )
+  }
+  if (!ts.isObjectLiteralExpression(expression)) {
+    return { hasLegacy: false, hasSize: false, opaque: true }
+  }
+
+  return expression.properties.reduce(
+    (analysis, property) => {
+      if (ts.isSpreadAssignment(property)) {
+        return mergeObjectBindAnalysis(
+          analysis,
+          analyzeObjectBindExpression(property.expression),
+        )
+      }
+      if (!property.name) return analysis
+      if (
+        ts.isComputedPropertyName(property.name) &&
+        !ts.isStringLiteral(property.name.expression)
+      ) {
+        return { ...analysis, opaque: true }
+      }
+      const name = propertyNameText(property.name)
+      return {
+        hasLegacy:
+          analysis.hasLegacy || name === 'buttonSize' || name === 'button-size',
+        hasSize: analysis.hasSize || name === 'size',
+        opaque: analysis.opaque,
+      }
+    },
+    { hasLegacy: false, hasSize: false, opaque: false },
+  )
+}
+
+function analyzeObjectBind(value) {
+  const source = ts.createSourceFile(
+    'editor-v1-bind.ts',
+    `const bound = (${value})`,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS,
+  )
+  const statement = source.statements[0]
+  const initializer =
+    statement &&
+    ts.isVariableStatement(statement) &&
+    statement.declarationList.declarations[0]?.initializer
+  if (!initializer || source.parseDiagnostics.length) {
+    return { hasLegacy: false, hasSize: false, opaque: true }
+  }
+  return analyzeObjectBindExpression(initializer)
+}
+
+function rewriteTag(tag, tagName, filename, offset, source) {
+  const edits = []
+  const refusals = []
+  const attributes = attributesIn(tag, tagName.length)
+  const objectBinds = attributes
+    .filter((attribute) => attribute.name === 'v-bind' && attribute.value)
+    .map((attribute) => ({
+      attribute,
+      analysis: analyzeObjectBind(attribute.value),
+    }))
+  const legacyAttributes = attributes.filter((attribute) =>
+    /^(?:v-bind:|:)?(?:button-size|buttonSize)$/.test(attribute.name),
+  )
+  const sizeAttributes = attributes.filter((attribute) =>
+    /^(?:v-bind:|:)?size$/.test(attribute.name),
+  )
+
+  if (
+    legacyAttributes.length &&
+    (legacyAttributes.length + sizeAttributes.length > 1 ||
+      objectBinds.some(({ analysis }) => analysis.hasSize))
+  ) {
+    refusals.push({
+      file: filename,
+      line: lineAt(source, offset + legacyAttributes[0].start),
+      message:
+        'EditorFixedMenu carries both `buttonSize` and `size` values. Renaming would produce duplicate props; merge them manually. This file is unchanged.',
+    })
+  }
+
+  for (const { attribute, analysis } of objectBinds) {
+    if (analysis.hasLegacy) {
+      refusals.push({
+        file: filename,
+        line: lineAt(source, offset + attribute.start),
+        message:
+          'EditorFixedMenu uses an object v-bind containing `buttonSize`; rename that JavaScript property to `size` manually. This file is unchanged.',
+      })
+    } else if (analysis.opaque) {
+      refusals.push({
+        file: filename,
+        line: lineAt(source, offset + attribute.start),
+        message:
+          'EditorFixedMenu uses an opaque object v-bind that may contain `buttonSize`; inspect it and rename that JavaScript property to `size` manually if needed. This file is unchanged.',
+      })
+    }
+  }
+
+  if (refusals.length) return { tag, refusals }
+
+  for (const attribute of legacyAttributes) {
+    const match = attribute.name.match(
+      /^((?:v-bind:|:)?)(button-size|buttonSize)$/,
+    )
+    if (!match) continue
+    const [, prefix] = match
+    const replacement =
+      prefix && attribute.value === undefined
+        ? `${prefix}size="buttonSize"`
+        : `${prefix}size`
+    edits.push({ start: attribute.start, end: attribute.nameEnd, replacement })
+  }
+
+  for (const edit of edits.reverse()) {
+    tag = tag.slice(0, edit.start) + edit.replacement + tag.slice(edit.end)
+  }
+  return { tag, refusals }
+}
+
+export function migrateEditor(source, filename = '<source>') {
+  const bindings = editorFixedMenuBindings(source)
+  if (!bindings.size) return { migrated: source, changed: false, refusals: [] }
+
+  const tagNames = new Set()
+  for (const binding of bindings) {
+    tagNames.add(binding)
+    tagNames.add(kebabCase(binding))
+  }
+
+  const edits = []
+  const refusals = []
+  const template = templateContentRange(source)
+  if (!template) return { migrated: source, changed: false, refusals: [] }
+
+  let index = template.start
+  while (index < template.end) {
+    if (source.startsWith('<!--', index)) {
+      const end = source.indexOf('-->', index + 4)
+      index = end === -1 ? template.end : end + 3
+      continue
+    }
+    if (source.startsWith('{{', index)) {
+      index = expressionEnd(source, index + 2)
+      continue
+    }
+    if (source[index] !== '<') {
+      index++
+      continue
+    }
+    const match = source.slice(index).match(/^<([A-Za-z][\w.-]*)\b/)
+    if (!match) {
+      index++
+      continue
+    }
+    const tagName = match[1]
+    const start = index
+    const end = tagEnd(source, start)
+    index = end
+    if (!tagNames.has(tagName)) continue
+    const tag = source.slice(start, end)
+    const result = rewriteTag(tag, tagName, filename, start, source)
+    refusals.push(...result.refusals)
+    if (result.tag !== tag) edits.push({ start, end, replacement: result.tag })
+  }
+
+  if (refusals.length) return { migrated: source, changed: false, refusals }
+  let migrated = source
+  for (const edit of edits.reverse()) {
+    migrated =
+      migrated.slice(0, edit.start) +
+      edit.replacement +
+      migrated.slice(edit.end)
+  }
+  return { migrated, changed: migrated !== source, refusals }
+}
+
+function* walk(target) {
+  if (fs.statSync(target).isFile()) {
+    if (VUE_EXTENSIONS.has(path.extname(target))) yield target
+    else console.error(`Skipped ${target}: not a Vue file`)
+    return
+  }
+  for (const entry of fs.readdirSync(target, { withFileTypes: true })) {
+    const full = path.join(target, entry.name)
+    if (entry.isSymbolicLink()) continue
+    if (entry.isDirectory()) {
+      if (!SKIP_DIRS.has(entry.name)) yield* walk(full)
+    } else if (VUE_EXTENSIONS.has(path.extname(entry.name))) {
+      yield full
+    }
+  }
+}
+
+function main(argv) {
+  if (argv.includes('--help') || argv.includes('-h')) {
+    console.log(USAGE)
+    return 0
+  }
+  const unknown = argv.filter((arg) => arg.startsWith('-') && !OPTIONS.has(arg))
+  if (unknown.length) {
+    console.error(`Unknown option: ${unknown.join(' ')}`)
+    console.error(USAGE)
+    return 1
+  }
+
+  const dryRun = argv.includes('--dry-run')
+  const targets = argv.filter((arg) => !arg.startsWith('-'))
+  if (!targets.length) {
+    console.error(USAGE)
+    return 1
+  }
+
+  const files = []
+  const seen = new Set()
+  for (const target of targets) {
+    if (!fs.existsSync(target)) {
+      console.error(`Invalid path: ${target}`)
+      return 1
+    }
+    for (const file of walk(path.resolve(target))) {
+      const resolved = fs.realpathSync(file)
+      if (seen.has(resolved)) continue
+      seen.add(resolved)
+      files.push(file)
+    }
+  }
+
+  let changed = 0
+  let refused = 0
+  for (const file of files) {
+    const source = fs.readFileSync(file, 'utf8')
+    const result = migrateEditor(source, file)
+    for (const refusal of result.refusals) {
+      refused++
+      console.error(`${refusal.file}:${refusal.line}: ${refusal.message}`)
+    }
+    if (!result.changed) continue
+    changed++
+    if (!dryRun) fs.writeFileSync(file, result.migrated)
+    console.log(`${dryRun ? 'Would update' : 'Updated'} ${file}`)
+  }
+
+  if (!changed && !refused)
+    console.log('No EditorFixedMenu buttonSize props found.')
+  return refused ? 1 : 0
+}
+
+const scriptPath = fileURLToPath(import.meta.url)
+const invokedPath = process.argv[1]
+const isCLI =
+  invokedPath && fs.realpathSync(invokedPath) === fs.realpathSync(scriptPath)
+if (isCLI) process.exitCode = main(process.argv.slice(2))

package/src/molecules/editor/EditorFixedMenu.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   // Optional inside <Editor> — falls back to the provided editor context.
   editor?: Editor | null
   items: MenuItem[]
-  buttonSize?: 'xs' | 'sm'
+  size?: 'xs' | 'sm'
 }>()
 
 const editor = useResolvedEditor(() => props.editor)
@@ -16,6 +16,6 @@ const editor = useResolvedEditor(() => props.editor)
 
 <template>
   <div data-slot="fixed-menu" class="flex items-center gap-1">
-    <MenuItems :editor="editor" :items="items" :button-size="buttonSize" />
+    <MenuItems :editor="editor" :items="items" :size="size" />
   </div>
 </template>

package/src/molecules/editor/MenuItems.vue

@@ -9,7 +9,7 @@ import TooltipProvider from '#components/Tooltip/TooltipProvider.vue'
 const props = defineProps<{
   editor: Editor | null
   items: MenuItem[]
-  buttonSize?: 'xs' | 'sm'
+  size?: 'xs' | 'sm'
 }>()
 
 // The editor from `useEditor` is built on `@tiptap/core` (not `@tiptap/vue-3`),
@@ -101,7 +101,7 @@ function run(item: CommandMenuItem, event?: MouseEvent) {
   }
 }
 
-const menuButtonSize = computed(() => props.buttonSize ?? 'xs')
+const menuButtonSize = computed(() => props.size ?? 'xs')
 </script>
 
 <template>

package/src/molecules/editor/SuggestionExtension.ts

@@ -3,6 +3,7 @@ import Suggestion from '@tiptap/suggestion'
 import { PluginKey } from '@tiptap/pm/state'
 import type { Component } from 'vue'
 import type { Editor } from './useEditor'
+import { warnRemoved } from '#utils/warnDeprecated'
 import {
   createSuggestionRenderer,
   type SuggestionFloatingOptions,
@@ -14,7 +15,7 @@ export type SuggestionExtensionOptions<TItem = any> = {
   name: string
   trigger: string
   items: TItem[] | ((query: string) => TItem[] | Promise<TItem[]>)
-  component?: Component
+  listComponent?: Component
   floatingOptions?: SuggestionFloatingOptions
   allowSpaces?: boolean
   /**
@@ -33,6 +34,12 @@ export type SuggestionExtensionOptions<TItem = any> = {
 function buildSuggestionExtension<TItem = any>(
   options: SuggestionExtensionOptions<TItem>,
 ) {
+  if ('component' in options) {
+    warnRemoved(
+      'SuggestionExtension.component',
+      'SuggestionExtension.listComponent',
+    )
+  }
   return Extension.create({
     name: options.name,
     addOptions() {
@@ -57,10 +64,10 @@ function buildSuggestionExtension<TItem = any>(
           }) => {
             options.command({ editor, item: props, range })
           },
-          render: options.component
+          render: options.listComponent
             ? () =>
                 createSuggestionRenderer(
-                  options.component as Component,
+                  options.listComponent as Component,
                   options.floatingOptions,
                 )
             : undefined,

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

@@ -50,5 +50,5 @@ export default createSuggestionExtension<EmojiItem>({
       )
     }
   },
-  component: EmojiList,
+  listComponent: EmojiList,
 })

package/src/molecules/editor/extensions/mention/mention-extension.test.ts

@@ -6,7 +6,7 @@
  * (`jane@example.com`). Typography rewrites straight quotes to curly ones, so
  * those prefixes are covered too.
  */
-import { describe, it, expect, afterEach } from 'vitest'
+import { describe, it, expect, afterEach, vi } from 'vitest'
 import { Editor, type AnyExtension } from '@tiptap/core'
 import { Document } from '@tiptap/extension-document'
 import { Paragraph } from '@tiptap/extension-paragraph'
@@ -14,6 +14,7 @@ import { Text } from '@tiptap/extension-text'
 import { PluginKey } from '@tiptap/pm/state'
 import { Typography } from '../../extensions'
 import { MentionExtension } from './mention-extension'
+import { _resetWarnDeprecated } from '../../../../utils/warnDeprecated'
 
 const openEditors: Editor[] = []
 
@@ -60,6 +61,7 @@ function type(editor: Editor, text: string) {
 describe('Mention allowedPrefixes', () => {
   afterEach(() => {
     while (openEditors.length) openEditors.pop()?.destroy()
+    _resetWarnDeprecated()
   })
 
   it('opens at the start of a paragraph and after a space', () => {
@@ -72,6 +74,20 @@ describe('Mention allowedPrefixes', () => {
     expect(mentionActive(editor)).toBe(true)
   })
 
+  it('warns in development when Mention receives the old component key', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const extension = MentionExtension.configure({ component: {} } as any)
+
+    ;(extension.config.addExtensions as Function).call(extension)
+    ;(extension.config.addExtensions as Function).call(extension)
+
+    expect(warn).toHaveBeenCalledWith(
+      '[frappe-ui] Mention.component was removed. Use Mention.nodeView instead.',
+    )
+    expect(warn).toHaveBeenCalledTimes(1)
+    warn.mockRestore()
+  })
+
   it.each([
     '(',
     '[',

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

@@ -14,6 +14,7 @@ import {
   type BaseSuggestionItem,
 } from '../suggestion/createSuggestionExtension'
 import SuggestionList from '../suggestion/SuggestionList.vue'
+import { warnRemoved } from '#utils/warnDeprecated'
 import {
   insertSuggestionNode,
   filterByQuery,
@@ -33,9 +34,9 @@ interface MentionSuggestionOptions {
   mentions: MaybeRefOrGetter<MentionSuggestionItem[]>
 }
 
-function createMentionNode(component?: Component) {
-  const nodeView = component
-    ? { addNodeView: () => VueNodeViewRenderer(component) }
+function createMentionNode(nodeView?: Component) {
+  const nodeViewExtension = nodeView
+    ? { addNodeView: () => VueNodeViewRenderer(nodeView) }
     : {}
 
   return Node.create({
@@ -44,12 +45,6 @@ function createMentionNode(component?: Component) {
     inline: true,
     selectable: true,
     atom: true,
-    addOptions() {
-      return {
-        component: undefined,
-      }
-    },
-
     addAttributes() {
       return {
         id: {
@@ -104,7 +99,7 @@ function createMentionNode(component?: Component) {
       return `@${node.attrs.label || node.attrs.id || ''}`
     },
 
-    ...nodeView,
+    ...nodeViewExtension,
   })
 }
 
@@ -150,7 +145,7 @@ const MentionSuggestionExtension =
     name: 'mentionSuggestion',
     char: '@',
     pluginKey: new PluginKey('mentionSuggestion'),
-    component: SuggestionList,
+    listComponent: SuggestionList,
     allowedPrefixes: ALLOWED_MENTION_PREFIXES,
 
     addOptions() {
@@ -189,19 +184,21 @@ const MentionSuggestionExtension =
 
 export const MentionExtension = Extension.create<{
   items: MaybeRefOrGetter<MentionSuggestionItem[]> | null
-  component?: Component
+  nodeView?: Component
 }>({
   name: 'mentionExtension',
 
   addOptions() {
     return {
       items: null,
-      component: undefined,
     }
   },
 
   addExtensions() {
-    const node = createMentionNode(this.options.component)
+    if ('component' in this.options) {
+      warnRemoved('Mention.component', 'Mention.nodeView')
+    }
+    const node = createMentionNode(this.options.nodeView)
     // Inert until configured: only wire the `@` suggestion when an item source
     // is provided. Existing mentions in content still render through the node.
     if (this.options.items == null) return [node]

package/src/molecules/editor/extensions/shared/suggestion-open.test.ts

@@ -97,7 +97,7 @@ function makeRealEditor(content = '') {
         pluginKey: key,
         items: () => [],
         command: () => {},
-        component: { render: () => null },
+        listComponent: { render: () => null },
       }),
     ],
     content: content ? `<p>${content}</p>` : '<p></p>',

package/src/molecules/editor/extensions/slash-commands/slash-commands-extension.ts

@@ -190,7 +190,7 @@ export const SlashCommands = createSuggestionExtension<CommandItem>({
       )
     }
   },
-  component: SlashCommandsList,
+  listComponent: SlashCommandsList,
 })
 
 export default SlashCommands

package/src/molecules/editor/extensions/suggestion/createSuggestionExtension.ts

@@ -57,7 +57,7 @@ export interface CreateSuggestionExtensionOptions<
     editor: Editor
   }) => TItem[] | Promise<TItem[]>
   command: (props: { editor: Editor; range: Range; props: TItem }) => void
-  component: VueComponent
+  listComponent: VueComponent
   floatingOptions?: SuggestionFloatingOptions
   allowSpaces?: boolean
   /**
@@ -111,7 +111,7 @@ export function createSuggestionExtension<TItem extends BaseSuggestionItem>(
           decorationClass: options.decorationClass || 'suggestion',
           render: () =>
             createSuggestionRenderer(
-              options.component,
+              options.listComponent,
               options.floatingOptions,
             ),
         } as Omit<SuggestionOptions<TItem>, 'editor'>,

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

@@ -113,7 +113,7 @@ export const TagExtension = createSuggestionExtension<TagSuggestionItem>({
   name: 'tagSuggestion',
   char: '#',
   pluginKey: new PluginKey('tagSuggestion'),
-  component: SuggestionList,
+  listComponent: SuggestionList,
 
   addOptions() {
     return {

package/src/molecules/editor/kits.ts

@@ -55,7 +55,7 @@ type CustomMember = Record<string, any> | false
 type MentionMember =
   | {
       items?: MaybeRefOrGetter<MentionSuggestionItem[]> | null
-      component?: Component
+      nodeView?: Component
     }
   | false
 type TagMember =

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

@@ -144,6 +144,17 @@ describe('editor menu primitives and presets', () => {
     expect(calls.join('|')).toContain('focus:|toggleBold:|run:')
   })
 
+  it('uses the fixed menu size for its buttons', async () => {
+    const { EditorFixedMenu, Bold } = editorMenu
+    const { editor } = fakeEditor()
+
+    const root = mount(EditorFixedMenu, { editor, items: [Bold], size: 'sm' })
+
+    expect(root.querySelector('[aria-label="Bold"]')?.className).toContain(
+      'h-7',
+    )
+  })
+
   it('hides items whose mark/node/extension is absent (self-pruning)', async () => {
     const { EditorFixedMenu, Bold, InsertTable, AlignLeft } = editorMenu
     // A trimmed editor: no table node, no textAlign extension.

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

@@ -4,6 +4,7 @@
 
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { createApp, defineComponent, h, nextTick, ref, toRaw } from 'vue'
+import { _resetWarnDeprecated } from '../../utils/warnDeprecated'
 
 const editors: any[] = []
 
@@ -126,6 +127,7 @@ vi.mock('@tiptap/vue-3', () => ({
 
 beforeEach(() => {
   editors.length = 0
+  _resetWarnDeprecated()
 })
 
 describe('frappe-ui/editor minimal primitives', () => {
@@ -141,7 +143,7 @@ describe('frappe-ui/editor minimal primitives', () => {
     expect(editor.InsertIframe).toBeTruthy()
   })
 
-  it('wires the public SuggestionExtension component into the suggestion renderer', async () => {
+  it('wires the public SuggestionExtension list component into the suggestion renderer', async () => {
     const component = defineComponent({ setup: () => () => h('div') })
     const { SuggestionExtension } = await import('./index')
 
@@ -149,7 +151,7 @@ describe('frappe-ui/editor minimal primitives', () => {
       name: 'people',
       trigger: '@',
       items: [],
-      component,
+      listComponent: component,
       command: vi.fn(),
     })
 
@@ -157,6 +159,32 @@ describe('frappe-ui/editor minimal primitives', () => {
     expect(typeof options.suggestion.render).toBe('function')
   })
 
+  it('warns in development when SuggestionExtension receives the old component key', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const { SuggestionExtension } = await import('./index')
+
+    SuggestionExtension.configure({
+      name: 'people',
+      trigger: '@',
+      items: [],
+      component: defineComponent({ setup: () => () => h('div') }),
+      command: vi.fn(),
+    } as any)
+    SuggestionExtension.configure({
+      name: 'tags',
+      trigger: '#',
+      items: [],
+      component: defineComponent({ setup: () => () => h('div') }),
+      command: vi.fn(),
+    } as any)
+
+    expect(warn).toHaveBeenCalledWith(
+      '[frappe-ui] SuggestionExtension.component was removed. Use SuggestionExtension.listComponent instead.',
+    )
+    expect(warn).toHaveBeenCalledTimes(1)
+    warn.mockRestore()
+  })
+
   it('forwards allowSpaces from SuggestionExtension options to the suggestion plugin', async () => {
     const { SuggestionExtension } = await import('./index')
 

package/src/utils/warnDeprecated.ts

@@ -1,19 +1,36 @@
 const warned = new Set<string>()
 
+function warnOnce(key: string, message: string) {
+  if (import.meta.env.PROD) return
+  if (warned.has(key)) return
+  warned.add(key)
+  console.warn(message)
+}
+
 export function warnDeprecated(
   name: string,
   replacement: string,
   docHref?: string,
 ) {
-  if (import.meta.env.PROD) return
-  if (warned.has(name)) return
-  warned.add(name)
   const suffix = docHref ? ` See ${docHref}` : ''
-  console.warn(
+  warnOnce(
+    `deprecated:${name}`,
     `[frappe-ui] ${name} is deprecated. Use ${replacement} instead.${suffix}`,
   )
 }
 
+export function warnRemoved(
+  name: string,
+  replacement: string,
+  docHref?: string,
+) {
+  const suffix = docHref ? ` See ${docHref}` : ''
+  warnOnce(
+    `removed:${name}`,
+    `[frappe-ui] ${name} was removed. Use ${replacement} instead.${suffix}`,
+  )
+}
+
 /** Test-only: clear the dedup set so each test sees a fresh warning surface. */
 export function _resetWarnDeprecated() {
   warned.clear()