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

package/src/molecules/editor/menu.ts

@@ -6,7 +6,15 @@ import {
   type EditorCommandContext,
   type EditorCommandMeta,
 } from './commands'
+import { CellSelection } from '@tiptap/pm/tables'
 import { openFontColorPicker } from './components/font-color/fontColorController'
+import { openTableCellColorPicker } from './components/table-color/tableCellColorController'
+import { openTableSizePicker } from './components/table-size-picker/tableSizePickerController'
+
+/** True when a multi-cell table range is selected (drag across cells). */
+function isCellRangeSelection(editor: Editor): boolean {
+  return editor.state?.selection instanceof CellSelection
+}
 
 export type MenuActionContext = EditorCommandContext
 
@@ -15,6 +23,11 @@ export type CommandMenuItem = {
   // house convention); a component renders as-is. Predefined items default it.
   icon?: Component | string
   label: string
+  /**
+   * State-dependent display label (e.g. "Merge cells" vs "Split cell").
+   * Renderers fall back to `label`, which stays the stable identity.
+   */
+  getLabel?: (editor: Editor) => string
   action: (
     editor: Editor,
     context?: MenuActionContext,
@@ -79,9 +92,14 @@ function command(
   }
 }
 
-export const Bold = command(commandMeta.bold, (editor) =>
-  editor.chain().focus().toggleBold().run(),
-)
+export const Bold = command(commandMeta.bold, (editor) => {
+  // A CellSelection must keep its cell range — `.focus()` collapses it to a
+  // text cursor, so fan bold out across cells without focusing.
+  if (isCellRangeSelection(editor)) {
+    return editor.chain().toggleCellBold().run()
+  }
+  return editor.chain().focus().toggleBold().run()
+})
 export const Italic = command(commandMeta.italic, (editor) =>
   editor.chain().focus().toggleItalic().run(),
 )
@@ -124,15 +142,19 @@ export const HeadingGroup: MenuGroupItem = {
   items: [H2, H3, H4],
 }
 
-export const AlignLeft = command(commandMeta.alignLeft, (editor) =>
-  editor.chain().focus().setTextAlign('left').run(),
-)
-export const AlignCenter = command(commandMeta.alignCenter, (editor) =>
-  editor.chain().focus().setTextAlign('center').run(),
-)
-export const AlignRight = command(commandMeta.alignRight, (editor) =>
-  editor.chain().focus().setTextAlign('right').run(),
-)
+function align(meta: EditorCommandMeta, alignment: string): CommandMenuItem {
+  return command(meta, (editor) => {
+    // Keep a multi-cell range intact: `.focus()` would collapse the
+    // CellSelection so alignment only hits the anchor cell.
+    if (isCellRangeSelection(editor)) {
+      return editor.chain().setCellTextAlign(alignment).run()
+    }
+    return editor.chain().focus().setTextAlign(alignment).run()
+  })
+}
+export const AlignLeft = align(commandMeta.alignLeft, 'left')
+export const AlignCenter = align(commandMeta.alignCenter, 'center')
+export const AlignRight = align(commandMeta.alignRight, 'right')
 // Named color/highlight (`namedColor`/`namedHighlight`) drive an imperative
 // picker so the toolbar button remains owned by MenuItems.
 export const FontColor = command(
@@ -159,6 +181,14 @@ export const InsertVideo = command(
   undefined,
   false,
 )
+// Like InsertVideo, exposed as a command but not added to any default toolbar;
+// the primary entry points for attachments are drag/drop and paste.
+export const InsertAttachment = command(
+  commandMeta.attachment,
+  (editor) => editor.chain().focus().selectAndUploadFile().run(),
+  undefined,
+  false,
+)
 export const InsertLink = command(
   commandMeta.link,
   (editor) => editor.commands.openLinkEditor(),
@@ -171,12 +201,24 @@ export const InsertIframe = command(
   undefined,
   false,
 )
-export const InsertTable = command(commandMeta.table, (editor) =>
-  editor
-    .chain()
-    .focus()
-    .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-    .run(),
+// Opens a size-picker grid anchored to the toolbar button; without a trigger
+// (programmatic call) it inserts the default 3×3 directly. Like the other
+// picker-opening items, the action can't be probed via `can()`.
+export const InsertTable = command(
+  commandMeta.table,
+  (editor, context) => {
+    if (context?.trigger) {
+      openTableSizePicker({ editor, anchor: context.trigger })
+      return
+    }
+    return editor
+      .chain()
+      .focus()
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run()
+  },
+  undefined,
+  false,
 )
 export const HorizontalRule = command(commandMeta.horizontalRule, (editor) =>
   editor.chain().focus().setHorizontalRule().run(),
@@ -199,6 +241,126 @@ export const Redo: CommandMenuItem = {
 
 export const Separator: MenuItem = { type: 'separator' }
 
+// ---------------------------------------------------------------------------
+// Table controls
+//
+// Surfaced in a contextual toolbar (`EditorTableMenu`) that appears only while
+// the selection is inside a table. Each item disables itself through the
+// editor's `can()` chain (via `canRun`), and the whole set self-prunes when the
+// Table extension isn't loaded — `isAvailable` checks the live schema, so the
+// same `tableToolbar` is inert in a comment editor and live in a doc editor.
+// ---------------------------------------------------------------------------
+
+/** True when the Table extension's node is present in the active schema. */
+function tableLoaded(editor: Editor): boolean {
+  return !!editor.schema.nodes.table
+}
+
+function tableCommand(
+  label: string,
+  icon: string,
+  action: CommandMenuItem['action'],
+  isActive?: (editor: Editor) => boolean,
+): CommandMenuItem {
+  return {
+    label,
+    icon,
+    action,
+    isActive,
+    isDisabled: (editor) => !canRun(editor, action),
+    isAvailable: tableLoaded,
+  }
+}
+
+export const TableAddColumnBefore = tableCommand(
+  'Insert column left',
+  'lucide-arrow-left-to-line',
+  (editor) => editor.chain().focus().addColumnBefore().run(),
+)
+export const TableAddColumnAfter = tableCommand(
+  'Insert column right',
+  'lucide-arrow-right-to-line',
+  (editor) => editor.chain().focus().addColumnAfter().run(),
+)
+export const TableDeleteColumn = tableCommand(
+  'Delete column',
+  'lucide-square-x',
+  (editor) => editor.chain().focus().deleteColumn().run(),
+)
+export const TableAddRowBefore = tableCommand(
+  'Insert row above',
+  'lucide-arrow-up-to-line',
+  (editor) => editor.chain().focus().addRowBefore().run(),
+)
+export const TableAddRowAfter = tableCommand(
+  'Insert row below',
+  'lucide-arrow-down-to-line',
+  (editor) => editor.chain().focus().addRowAfter().run(),
+)
+export const TableDeleteRow = tableCommand(
+  'Delete row',
+  'lucide-square-x',
+  (editor) => editor.chain().focus().deleteRow().run(),
+)
+// Active when the cursor sits in a header cell, so the toggle reflects the
+// state of the row it would flip.
+export const TableToggleHeaderRow = tableCommand(
+  'Toggle header row',
+  'lucide-panel-top',
+  (editor) => editor.chain().focus().toggleHeaderRow().run(),
+  (editor) => editor.isActive('tableHeader'),
+)
+// One button for both directions: merges a multi-cell selection, splits a
+// merged cell. `can()` disables it when neither applies; the label names
+// whichever direction currently applies.
+export const TableMergeOrSplit: CommandMenuItem = {
+  ...tableCommand(
+    'Merge or split cells',
+    'lucide-table-cells-merge',
+    (editor) => editor.chain().focus().mergeOrSplit().run(),
+  ),
+  getLabel: (editor) =>
+    editor.can().mergeCells()
+      ? 'Merge cells'
+      : editor.can().splitCell()
+        ? 'Split cell'
+        : 'Merge or split cells',
+}
+export const TableDelete = tableCommand(
+  'Delete table',
+  'lucide-trash-2',
+  (editor) => editor.chain().focus().deleteTable().run(),
+)
+// Opens an imperative picker (cell background + text color), so it owns no
+// can()-probe (which would invoke the action). `isAvailable` self-prunes it when
+// the Table extension is absent, matching the other table controls.
+export const CellColor: CommandMenuItem = {
+  label: 'Cell color',
+  icon: 'lucide-paint-bucket',
+  action: (editor, context) => {
+    if (!context?.trigger) return
+    openTableCellColorPicker({ editor, anchor: context.trigger })
+  },
+  isAvailable: tableLoaded,
+}
+
+/** Contextual table toolbar, consumed by `EditorTableMenu`. */
+export const tableToolbar: MenuItem[] = [
+  TableAddColumnBefore,
+  TableAddColumnAfter,
+  TableDeleteColumn,
+  Separator,
+  TableAddRowBefore,
+  TableAddRowAfter,
+  TableDeleteRow,
+  Separator,
+  TableToggleHeaderRow,
+  TableMergeOrSplit,
+  CellColor,
+  Separator,
+  TableDelete,
+]
+
 export const minimalToolbar: MenuItem[] = [Bold, Italic, InsertLink]
 export const commentToolbar: MenuItem[] = [
   Bold,

package/src/molecules/editor/stories/Comment.vue

@@ -41,7 +41,7 @@ function submit() {
   <div class="w-full max-w-2xl">
     <div class="flex gap-3">
       <div
-        class="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-gray-3 text-sm font-medium text-ink-gray-7"
+        class="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-gray-3 text-sm-medium text-ink-gray-7"
       >
         FA
       </div>
@@ -52,7 +52,7 @@ function submit() {
       >
         <template #default="{ isEmpty }">
           <div
-            class="min-w-0 flex-1 rounded-lg border border-outline-gray-2 bg-surface-white focus-within:border-outline-gray-3"
+            class="min-w-0 flex-1 rounded-lg border border-outline-gray-2 bg-surface-base focus-within:border-outline-gray-3"
           >
             <EditorBubbleMenu :items="commentToolbar" />
             <EditorContent
@@ -88,12 +88,12 @@ function submit() {
 
     <div v-if="submitted" class="mt-4 flex gap-3">
       <div
-        class="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-gray-3 text-sm font-medium text-ink-gray-7"
+        class="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-gray-3 text-sm-medium text-ink-gray-7"
       >
         FA
       </div>
       <div class="min-w-0 flex-1 rounded-lg bg-surface-gray-1 px-3 py-2">
-        <div class="mb-0.5 text-sm font-medium text-ink-gray-8">Faris Ansari</div>
+        <div class="mb-0.5 text-sm-medium text-ink-gray-8">Faris Ansari</div>
         <Editor v-model="submitted" :extensions="extensions" :editable="false">
           <template #default>
             <EditorContent class="text-ink-gray-8" />

package/src/molecules/editor/stories/Inline.vue

@@ -18,7 +18,7 @@ const title = ref('<p>Q3 launch plan</p>')
     <Editor v-model="title" :extensions="extensions" placeholder="Untitled">
       <EditorBubbleMenu :items="minimalToolbar" />
       <EditorContent
-        class="rounded-md border border-outline-gray-2 bg-surface-white px-3 py-2 text-2xl font-semibold text-ink-gray-9 focus-within:border-outline-gray-3 focus-within:ring-2 focus-within:ring-outline-gray-2"
+        class="rounded-md border border-outline-gray-2 bg-surface-base px-3 py-2 text-3xl-semibold text-ink-gray-9 focus-within:border-outline-gray-3 focus-within:ring-2 focus-within:ring-outline-gray-2"
       />
     </Editor>
     <p class="mt-2 text-sm text-ink-gray-5">

package/src/molecules/editor/stories/Primitives.vue

@@ -53,7 +53,7 @@ const wordCount = computed(() => {
 
 <template>
   <div class="w-full max-w-2xl">
-    <div class="overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white">
+    <div class="overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-base">
       <EditorBubbleMenu :editor="editor" :items="toolbar" />
       <EditorFloatingMenu :editor="editor" :items="toolbar" />
       <div class="border-b border-outline-gray-1 px-2 py-1.5">

package/src/molecules/editor/stories/RichText.vue

@@ -114,7 +114,7 @@ const uploadFunction = async (file) => ({
         <!-- Inside <Editor>, the building blocks read the editor from
              context — no :editor prop needed. -->
         <div
-          class="overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-white"
+          class="overflow-hidden rounded-lg border border-outline-gray-2 bg-surface-base"
         >
           <EditorBubbleMenu :items="bubbleToolbar" />
           <EditorFloatingMenu :items="toolbar" />

package/src/molecules/editor/style.css

@@ -28,6 +28,29 @@ img.ProseMirror-selectednode {
   padding: 0 10px;
 }
 
+/* Fast origin-aware appear for imperatively-mounted popups (useFloatingPopup).
+ * `transform-origin` is set inline from the resolved placement. */
+.editor-floating-pop {
+  animation: editor-floating-pop-in 90ms ease-out;
+}
+
+@keyframes editor-floating-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-floating-pop {
+    animation: none;
+  }
+}
+
 .table-of-contents-node li p {
   width: fit-content;
   padding: 0 3px;
@@ -131,12 +154,60 @@ img.ProseMirror-selectednode {
   background-color: var(--surface-gray-2);
 }
 
-.ProseMirror a span[style] {
-  text-decoration: underline;
+/* Spreadsheet-style active cell: prosemirror-tables adds `.selectedCell` to the
+   navigated cell (or a multi-cell selection). Overlay a translucent fill (keeps
+   text readable) + ring, applied instantly — no transition. `::after` rides the
+   cell's `position: relative`. */
+.ProseMirror .selectedCell::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 2;
+  box-shadow: inset 0 0 0 1.2px var(--surface-gray-8);
+}
+
+/* Multi-cell selection: drop the per-cell ring (keep the fill, so adjacent
+   cells merge into one tinted region) and let `.table-selection-box` draw a
+   single box around the whole selection (see table-selection-overlay.ts). */
+.ProseMirror.table-cell-range .selectedCell::after {
+  box-shadow: none;
+}
+
+.ProseMirror .table-selection-box {
+  position: absolute;
+  pointer-events: none;
+  z-index: 3;
+  border-radius: 2px;
+  inset: -1px;
+  box-shadow: inset 0 0 0 1.2px var(--surface-gray-8);
+}
+
+/* Links underline via `border-bottom` (see prose-v3 `a` in tailwind/plugin.js),
+   whose color is fixed and ignores the text `color`. When a link wraps named-
+   color text, drop that gray border (incl. on hover) and let the colored span
+   carry the underline in `currentColor`, so the line matches the text color.
+   Compound `.prose-v3.ProseMirror` (both classes are on the editor element) so
+   these win over the legacy TextEditor's `a span[style]` underline, which may
+   still be loaded alongside this stylesheet. */
+.prose-v3.ProseMirror a:has(span[style*='--prose-color-']),
+.prose-v3.ProseMirror a:has(span[style*='--prose-color-']):hover {
+  border-bottom-color: transparent;
+}
+
+.prose-v3.ProseMirror a span[style*='--prose-color-'] {
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
 }
 
 .ProseMirror .tableWrapper {
-  overflow-x: scroll;
+  /* Scroll a too-wide table inside its own bounds instead of letting it push
+     past the content column (every editor ancestor is overflow: visible). */
+  max-width: 100%;
+  overflow-x: auto;
+  /* Positioning context for the single-box multi-cell selection overlay. */
+  position: relative;
 }
 
 .prose-v3.ProseMirror[contenteditable='false']
@@ -150,3 +221,9 @@ img.ProseMirror-selectednode {
 .prose-v3 blockquote {
   border-inline-start-width: 2px;
 }
+
+/* Drop indicator (prosemirror-dropcursor): a rounded bar instead of the
+   default hairline. Width/color are set via EditorDropcursor in extensions.ts. */
+.editor-drop-cursor {
+  border-radius: 9999px;
+}

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

@@ -190,6 +190,10 @@ describe('frappe-ui/editor minimal primitives', () => {
     editor.content = { type: 'doc', content: [{ type: 'paragraph', content: [] }] }
     editor.options.onUpdate({ editor })
     expect(toRaw(content.value)).toBe(editor.content)
+
+    const calls = editor.commands.setContent.mock.calls.length
+    await nextTick()
+    expect(editor.commands.setContent).toHaveBeenCalledTimes(calls)
   })
 
   it('keeps editable reactive', async () => {

package/src/molecules/editor/useEditor.ts

@@ -1,6 +1,7 @@
 import {
   onBeforeUnmount,
   shallowRef,
+  toRaw,
   toValue,
   watch,
   type MaybeRefOrGetter,
@@ -106,12 +107,15 @@ export function useEditor(
       if (!editor.value) return
       // Our own write bounced back through the ref — ignore it (covers JSON,
       // whose fresh-object identity defeats the HTML string check below).
-      if (content === lastEmitted) return
+      if (toRaw(content) === lastEmitted) return
       if (format === 'html' && editor.value.getHTML() === content) return
 
       applyingExternalUpdate = true
-      editor.value.commands.setContent(content ?? '', { emitUpdate: false })
-      applyingExternalUpdate = false
+      try {
+        editor.value.commands.setContent(content ?? '', { emitUpdate: false })
+      } finally {
+        applyingExternalUpdate = false
+      }
     })
   }