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

package/src/molecules/editor/EditorTableMenu.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import {
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watch,
+} from 'vue'
+import { computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { CellSelection, cellAround, isInTable, selectionCell } from '@tiptap/pm/tables'
+import { verticalScrollParent } from './extensions/table/drag-scroll'
+import MenuItems from './MenuItems.vue'
+import TableContextMenu from './components/TableContextMenu.vue'
+import { tableToolbar } from './menu'
+import type { Editor } from './useEditor'
+import { useResolvedEditor } from './editor-context'
+import {
+  useFloatingPopup,
+  type FloatingPopupHandle,
+} from './composables/useFloatingPopup'
+
+/**
+ * Contextual table toolbar with row/column insert + delete, header-row toggle,
+ * merge/split, and delete-table controls (see `tableToolbar`).
+ *
+ * Unlike a stock bubble menu — which anchors to the text selection and so jumps
+ * from cell to cell as the caret moves — this anchors to the *table* element. It
+ * therefore stays put while you move between cells and only re-positions when
+ * you enter a different table (or the table / viewport changes). The buttons
+ * still act on the active cell, so the toolbar adapts to context without moving.
+ *
+ * Safe to render unconditionally: it's hidden outside tables and the items
+ * self-prune when the Table extension is absent, so it's inert in a comment
+ * editor.
+ */
+const props = defineProps<{
+  // Optional inside <Editor> — falls back to the provided editor context.
+  editor?: Editor | null
+}>()
+
+const editor = useResolvedEditor(() => props.editor)
+
+const floating = useTemplateRef<HTMLElement>('floating')
+const anchor = shallowRef<HTMLElement | null>(null)
+const visible = ref(false)
+
+/** The DOM element of the table the selection is currently inside, if any. */
+function activeTableEl(ed: Editor): HTMLElement | null {
+  if (!ed.isEditable || !ed.isActive('table')) return null
+  // `editor.view` is a proxy that throws on access until the view is mounted;
+  // the immediate watch can run sync() before that. `isInitialized` flips true
+  // on mount, so bail until then.
+  if (!ed.isInitialized) return null
+  const { $from } = ed.state.selection
+  for (let depth = $from.depth; depth > 0; depth--) {
+    if ($from.node(depth).type.name === 'table') {
+      const dom = ed.view.nodeDOM($from.before(depth))
+      // nodeDOM returns the table's wrapper; anchor to the inner <table> so the
+      // toolbar sits against the table edge, not the wrapper's outer spacing.
+      if (dom instanceof HTMLElement) {
+        return dom.tagName === 'TABLE'
+          ? dom
+          : (dom.querySelector('table') ?? dom)
+      }
+    }
+  }
+  return null
+}
+
+/**
+ * The vertical band the toolbar may occupy: the visible part of the editor's
+ * scroll container (so a pinned toolbar never floats over the app chrome
+ * above/below it), clamped to the viewport.
+ */
+function verticalBounds(table: HTMLElement): { top: number; bottom: number } {
+  const parent = verticalScrollParent(table)
+  if (parent === document.scrollingElement || parent === document.documentElement) {
+    return { top: 0, bottom: window.innerHeight }
+  }
+  const rect = parent.getBoundingClientRect()
+  return {
+    top: Math.max(rect.top, 0),
+    bottom: Math.min(rect.bottom, window.innerHeight),
+  }
+}
+
+/** Whether any part of the table is visible inside its scroll container. */
+function tableInView(table: HTMLElement): boolean {
+  const rect = table.getBoundingClientRect()
+  const bounds = verticalBounds(table)
+  return (
+    rect.bottom > bounds.top &&
+    rect.top < bounds.bottom &&
+    rect.right > 0 &&
+    rect.left < window.innerWidth
+  )
+}
+
+function reposition() {
+  const table = anchor.value
+  const el = floating.value
+  if (!table || !el) return
+  // A wide table scrolls inside its `.tableWrapper` (overflow-x: auto), so the
+  // table's own horizontal center can be scrolled out of view — centering the
+  // toolbar on it would float it over the clipped region. Anchor instead to the
+  // part of the table actually visible inside the wrapper's viewport: the
+  // horizontal intersection of table and wrapper. That collapses to the table
+  // for a narrow (fully visible) table and to the visible window for a wide,
+  // scrolled one. Vertical anchor stays at the table's top edge.
+  const wrapper = table.closest<HTMLElement>('.tableWrapper')
+  const reference = wrapper
+    ? {
+        getBoundingClientRect: () => {
+          const t = table.getBoundingClientRect()
+          const w = wrapper.getBoundingClientRect()
+          const left = Math.max(t.left, w.left)
+          const right = Math.min(t.right, w.right)
+          return new DOMRect(left, t.top, Math.max(0, right - left), 0)
+        },
+      }
+    : table
+  void computePosition(reference, el, {
+    strategy: 'fixed',
+    placement: 'top',
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+  }).then(({ x, y }) => {
+    // Pin the toolbar inside the visible band while scrolling through a tall
+    // table, instead of letting it follow the table's top edge off-screen.
+    const bounds = verticalBounds(table)
+    const minY = bounds.top + 4
+    const maxY = bounds.bottom - el.offsetHeight - 4
+    el.style.left = `${x}px`
+    el.style.top = `${Math.min(Math.max(y, minY), Math.max(maxY, minY))}px`
+  })
+}
+
+function sync() {
+  const ed = editor.value
+  const table = ed ? activeTableEl(ed) : null
+  anchor.value = table
+  visible.value = !!table && tableInView(table)
+  // Wait for v-show to reveal the element before measuring it.
+  if (visible.value) void nextTick(reposition)
+}
+
+// --- Right-click context menu ---------------------------------------------
+let contextMenu: FloatingPopupHandle | null = null
+
+function closeContextMenu() {
+  contextMenu?.destroy()
+  contextMenu = null
+}
+
+function openContextMenu(ed: Editor, clientX: number, clientY: number) {
+  closeContextMenu()
+  contextMenu = useFloatingPopup({
+    anchor: ed.view.dom,
+    component: TableContextMenu,
+    props: { editor: ed, items: tableToolbar, onRun: closeContextMenu },
+    // Anchor at the cursor point so the menu opens where the user clicked.
+    virtualReference: {
+      getBoundingClientRect: () => new DOMRect(clientX, clientY, 0, 0),
+    },
+    closeOnAnchorPointerDown: true,
+    animate: true,
+    floatingOptions: { placement: 'right-start', strategy: 'fixed', offset: 0 },
+  })
+}
+
+function onContextMenu(event: MouseEvent) {
+  const ed = editor.value
+  if (!ed || ed.isDestroyed || !ed.isEditable) return
+  // The view getter throws until the editor is mounted; a real right-click
+  // always happens after mount, but guard anyway.
+  let dom: HTMLElement
+  try {
+    dom = ed.view.dom as HTMLElement
+  } catch {
+    return
+  }
+  const target = event.target
+  if (!(target instanceof Node) || !dom.contains(target)) return
+  const coords = ed.view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY,
+  })
+  let $cell = coords ? cellAround(ed.state.doc.resolve(coords.pos)) : null
+  let point = { x: event.clientX, y: event.clientY }
+  if (!$cell) {
+    // A real right-click outside any table — let the native menu through.
+    if (event.button === 2) return
+    // Keyboard-initiated (ContextMenu key / Shift+F10) events carry no usable
+    // coordinates; fall back to the active cell and anchor the menu to it.
+    if (!isInTable(ed.state)) return
+    $cell = selectionCell(ed.state)
+    const cellDom = ed.view.nodeDOM($cell.pos)
+    if (!(cellDom instanceof HTMLElement)) return
+    const rect = cellDom.getBoundingClientRect()
+    point = { x: rect.left + Math.min(rect.width / 2, 24), y: rect.bottom - 4 }
+  }
+  event.preventDefault()
+  // Keep an existing multi-cell selection when the click lands inside it — the
+  // menu is the natural place to act on the selected block (merge, color).
+  // Otherwise select the right-clicked cell so the actions target it.
+  const selection = ed.state.selection
+  let inSelection = false
+  if (selection instanceof CellSelection) {
+    selection.forEachCell((_node, pos) => {
+      if (pos === $cell!.pos) inSelection = true
+    })
+  }
+  if (!inSelection) {
+    ed.view.dispatch(
+      ed.state.tr.setSelection(CellSelection.create(ed.state.doc, $cell.pos)),
+    )
+  }
+  openContextMenu(ed, point.x, point.y)
+}
+
+// (Re)subscribe whenever the editor instance changes. The toolbar shows on
+// transactions (selection / content) and follows the table on scroll/resize —
+// re-clamped into the scroll container's visible band by `reposition`, and
+// hidden only once the table itself scrolls out of view.
+let scrollRaf = 0
+watch(
+  editor,
+  (ed, _old, onCleanup) => {
+    if (typeof ed?.on !== 'function') {
+      visible.value = false
+      return
+    }
+    const onChange = () => sync()
+    const onScroll = () => {
+      if (scrollRaf) return
+      scrollRaf = requestAnimationFrame(() => {
+        scrollRaf = 0
+        sync()
+      })
+    }
+    const onResize = () => sync()
+    ed.on('transaction', onChange)
+    ed.on('focus', onChange)
+    // Capture phase so inner scroll containers are caught too.
+    document.addEventListener('scroll', onScroll, true)
+    window.addEventListener('resize', onResize)
+    // Bound on document (not the view DOM) so it never touches `ed.view` before
+    // the view is mounted; the handler scopes itself to this editor.
+    document.addEventListener('contextmenu', onContextMenu, true)
+    sync()
+    onCleanup(() => {
+      ed.off('transaction', onChange)
+      ed.off('focus', onChange)
+      if (scrollRaf) cancelAnimationFrame(scrollRaf)
+      scrollRaf = 0
+      document.removeEventListener('scroll', onScroll, true)
+      window.removeEventListener('resize', onResize)
+      document.removeEventListener('contextmenu', onContextMenu, true)
+      closeContextMenu()
+    })
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(closeContextMenu)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="table-menu">
+      <div
+        v-show="visible && editor"
+        ref="floating"
+        data-slot="table-menu"
+        class="fixed left-0 top-0 z-[100] flex items-center gap-1 rounded-lg border border-outline-gray-2 bg-surface-elevation-2 p-1 shadow-sm"
+      >
+        <MenuItems v-if="editor" :editor="editor" :items="tableToolbar" />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+/* Fast appear only; leave is instant so the toolbar clears the moment the
+ * selection leaves a table. Mirrors EditorPopover's 90ms fade+scale. */
+.table-menu-enter-active {
+  transition:
+    opacity 90ms ease-out,
+    transform 90ms ease-out;
+  transform-origin: center bottom;
+}
+
+.table-menu-enter-from {
+  opacity: 0;
+  transform: scale(0.98);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table-menu-enter-active {
+    transition: none;
+  }
+}
+</style>

package/src/molecules/editor/MenuItems.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { computed, h, ref, watch, type Component } from 'vue'
+import { computed, ref, watch, type Component } from 'vue'
 import type { CommandMenuItem, MenuGroupItem, MenuItem } from './menu'
 import type { Editor } from './useEditor'
+import Button from '#components/Button/Button.vue'
+import Tooltip from '#components/Tooltip/Tooltip.vue'
+import TooltipProvider from '#components/Tooltip/TooltipProvider.vue'
 
 const props = defineProps<{
   editor: Editor | null
   items: MenuItem[]
+  buttonSize?: 'xs' | 'sm'
 }>()
 
 // The editor from `useEditor` is built on `@tiptap/core` (not `@tiptap/vue-3`),
@@ -39,15 +43,11 @@ function isItemDisabled(item: CommandMenuItem): boolean {
   return !props.editor || item.isDisabled?.(props.editor) === true
 }
 
-// Renders an item's glyph: a `lucide-*` (or any) string becomes a masked icon
-// span (sized here so item definitions stay terse); a component renders as-is;
-// with no icon we fall back to the label text.
-function ItemContent(p: { item: CommandMenuItem }) {
-  const { icon, label } = p.item
-  if (!icon) return h('span', label)
-  if (typeof icon === 'string')
-    return h('span', { class: ['size-4', icon], 'aria-hidden': 'true' })
-  return h(icon as Component)
+/** Display label, honoring state-dependent `getLabel` (e.g. merge vs split). */
+function labelOf(item: CommandMenuItem): string {
+  void version.value
+  if (props.editor && item.getLabel) return item.getLabel(props.editor)
+  return item.label
 }
 
 /** A command item that ships its own interactive component (e.g. color picker). */
@@ -100,68 +100,80 @@ function run(item: CommandMenuItem, event?: MouseEvent) {
     })
   }
 }
+
+const menuButtonSize = computed(() => props.buttonSize ?? 'xs')
 </script>
 
 <template>
-  <template
-    v-for="(item, index) in visibleItems"
-    :key="`${'label' in item ? item.label : item.type}-${index}`"
-  >
-    <span
-      v-if="isSeparator(item)"
-      data-slot="menu-separator"
-      class="mx-1 h-5 w-px bg-surface-gray-3"
-      aria-hidden="true"
-    />
-    <component
-      :is="item.component"
-      v-else-if="isComponentItem(item) && editor"
-      :editor="editor"
-    >
-      <template #default="trigger">
-        <button
-          type="button"
-          class="inline-flex size-6 items-center justify-center rounded text-sm text-ink-gray-7 hover:bg-surface-gray-3 disabled:cursor-not-allowed disabled:opacity-50 aria-pressed:bg-surface-gray-3"
-          :aria-label="item.label"
-          :aria-pressed="trigger.isActive === true || isPressed(item)"
-          :disabled="isItemDisabled(item)"
-          @click="isItemDisabled(item) ? undefined : trigger.onClick()"
-        >
-          <ItemContent :item="item" />
-        </button>
-      </template>
-    </component>
-    <div
-      v-else-if="isGroup(item)"
-      data-slot="menu-group"
-      class="flex items-center gap-1"
+  <!-- One shared provider so once any button's tooltip opens, neighbouring
+       buttons show theirs instantly (skip-delay) — toolbar-friendly. Renderless,
+       so the parent's flex layout is unaffected. -->
+  <TooltipProvider>
+    <template
+      v-for="(item, index) in visibleItems"
+      :key="`${'label' in item ? item.label : item.type}-${index}`"
     >
-      <span class="px-2 text-sm font-medium text-ink-gray-7">{{
-        item.label
-      }}</span>
-      <button
-        v-for="groupItem in item.items"
-        :key="groupItem.label"
-        type="button"
-        class="inline-flex size-6 items-center justify-center rounded text-sm text-ink-gray-7 hover:bg-surface-gray-3 disabled:cursor-not-allowed disabled:opacity-50 aria-pressed:bg-surface-gray-3"
-        :aria-label="groupItem.label"
-        :aria-pressed="isPressed(groupItem)"
-        :disabled="isItemDisabled(groupItem)"
-        @click="run(groupItem, $event)"
+      <span
+        v-if="isSeparator(item)"
+        data-slot="menu-separator"
+        class="mx-1 h-5 w-px bg-surface-gray-3"
+        aria-hidden="true"
+      />
+      <component
+        :is="item.component"
+        v-else-if="isComponentItem(item) && editor"
+        :editor="editor"
       >
-        <ItemContent :item="groupItem" />
-      </button>
-    </div>
-    <button
-      v-else
-      type="button"
-      class="inline-flex size-6 items-center justify-center rounded text-sm text-ink-gray-7 hover:bg-surface-gray-3 disabled:cursor-not-allowed disabled:opacity-50 aria-pressed:bg-surface-gray-3"
-      :aria-label="item.label"
-      :aria-pressed="isPressed(item)"
-      :disabled="isItemDisabled(item)"
-      @click="run(item, $event)"
-    >
-      <ItemContent :item="item" />
-    </button>
-  </template>
+        <template #default="trigger">
+          <Button
+            :size="menuButtonSize"
+            variant="ghost"
+            :icon="item.icon"
+            :label="item.label"
+            class="aria-pressed:bg-surface-gray-3"
+            :aria-pressed="trigger.isActive === true || isPressed(item)"
+            :disabled="isItemDisabled(item)"
+            @click="isItemDisabled(item) ? undefined : trigger.onClick()"
+          />
+        </template>
+      </component>
+      <div
+        v-else-if="isGroup(item)"
+        data-slot="menu-group"
+        class="flex items-center gap-1"
+      >
+        <span class="px-2 text-sm-medium text-ink-gray-7">{{
+          item.label
+        }}</span>
+        <Tooltip
+          v-for="groupItem in item.items"
+          :key="groupItem.label"
+          :text="groupItem.label"
+        >
+          <Button
+            :size="menuButtonSize"
+            variant="ghost"
+            :icon="groupItem.icon"
+            :label="groupItem.label"
+            class="aria-pressed:bg-surface-gray-3"
+            :aria-pressed="isPressed(groupItem)"
+            :disabled="isItemDisabled(groupItem)"
+            @click="run(groupItem, $event)"
+          />
+        </Tooltip>
+      </div>
+      <Tooltip v-else :text="labelOf(item)">
+        <Button
+          :size="menuButtonSize"
+          variant="ghost"
+          :icon="item.icon"
+          :label="labelOf(item)"
+          class="aria-pressed:bg-surface-gray-3"
+          :aria-pressed="isPressed(item)"
+          :disabled="isItemDisabled(item)"
+          @click="run(item, $event)"
+        />
+      </Tooltip>
+    </template>
+  </TooltipProvider>
 </template>

package/src/molecules/editor/commands.ts

@@ -134,7 +134,7 @@ export const commandMeta = {
     isAvailable: hasMark('namedHighlight'),
   },
   image: {
-    label: 'Image',
+    label: 'Image / Gallery',
     icon: 'lucide-image',
     isAvailable: (editor) =>
       hasNode('image')(editor) && hasCommand('selectAndUploadImage')(editor),
@@ -145,11 +145,19 @@ export const commandMeta = {
     isAvailable: (editor) =>
       hasNode('video')(editor) && hasCommand('selectAndUploadVideo')(editor),
   },
+  attachment: {
+    label: 'Attachment',
+    icon: 'lucide-paperclip',
+    isAvailable: (editor) =>
+      hasNode('attachment')(editor) &&
+      hasCommand('selectAndUploadFile')(editor),
+  },
   link: {
     label: 'Link',
     icon: 'lucide-link',
     isActive: (editor) => editor.isActive('link'),
-    isAvailable: hasMark('link'),
+    isAvailable: (editor) =>
+      hasMark('link')(editor) && hasCommand('openLinkEditor')(editor),
   },
   table: {
     label: 'Table',

package/src/molecules/editor/components/AttachmentNodeView.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, toRaw } from 'vue'
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import { formatBytes } from '#utils/fileSize'
+import {
+  abortUpload,
+  getUploadProgress,
+} from '#molecules/editor/extensions/shared/media-upload-state'
+import { useNodeViewEditable } from '#molecules/editor/composables/useNodeViewEditable'
+
+const props = defineProps(nodeViewProps)
+
+// Operate on the raw editor for commands (see MediaNodeView for the rationale:
+// the proxied editor throws "Applying a mismatched transaction").
+const editor = toRaw(props.editor)
+const isEditable = useNodeViewEditable(editor)
+
+const fileName = computed(() => props.node.attrs.fileName || 'Attachment')
+const fileSize = computed(() => {
+  const size = Number(props.node.attrs.fileSize)
+  return Number.isFinite(size) && size > 0 ? formatBytes(size) : ''
+})
+const href = computed(() => props.node.attrs.src || undefined)
+const isLoading = computed(() => Boolean(props.node.attrs.loading))
+const error = computed(() => props.node.attrs.error as string | null)
+const isUploaded = computed(() => Boolean(props.node.attrs.src))
+
+const uploadId = computed(() => props.node.attrs.uploadId as string | undefined)
+const progress = computed(() =>
+  uploadId.value ? getUploadProgress(uploadId.value) : undefined,
+)
+const percent = computed(() => progress.value?.percent ?? 0)
+
+function cancel() {
+  if (uploadId.value) abortUpload(uploadId.value)
+}
+
+function retry() {
+  if (uploadId.value) editor.commands.reuploadAttachment(uploadId.value)
+}
+
+// Plain link is non-interactive while a chip is loading/errored.
+const isLink = computed(() => isUploaded.value && !isLoading.value)
+</script>
+
+<template>
+  <!-- Gray-only chip (frappe-ui / Gameplan rule: never color shades). -->
+  <NodeViewWrapper
+    as="span"
+    class="inline-flex max-w-full items-center gap-1 align-baseline"
+    data-drag-handle
+    draggable="true"
+  >
+    <component
+      :is="isLink ? 'a' : 'span'"
+      class="inline-flex h-6 max-w-full items-center gap-1.5 rounded-lg border bg-surface-gray-2 px-2 text-sm no-underline"
+      :class="[
+        error
+          ? 'border-dashed border-outline-gray-2 text-ink-gray-6'
+          : 'border-outline-gray-2 text-ink-gray-8',
+        isLink ? 'cursor-pointer hover:bg-surface-gray-3' : 'cursor-default',
+      ]"
+      :href="isLink ? href : undefined"
+      :target="isLink ? '_blank' : undefined"
+      :rel="isLink ? 'noopener noreferrer' : undefined"
+      :download="isLink ? fileName : undefined"
+      contenteditable="false"
+    >
+      <span
+        v-if="isLoading"
+        class="lucide-loader-circle size-3.5 shrink-0 animate-spin text-ink-gray-6"
+        aria-hidden="true"
+      />
+      <span
+        v-else-if="error"
+        class="lucide-triangle-alert size-3.5 shrink-0 text-ink-gray-6"
+        aria-hidden="true"
+      />
+      <span
+        v-else
+        class="lucide-paperclip size-3.5 shrink-0 text-ink-gray-6"
+        aria-hidden="true"
+      />
+
+      <span class="max-w-64 truncate">{{ fileName }}</span>
+      <span v-if="fileSize && !error" class="shrink-0 text-ink-gray-5">
+        {{ fileSize }}
+      </span>
+      <span v-if="isLoading && percent > 0" class="shrink-0 text-ink-gray-5">
+        {{ percent }}%
+      </span>
+    </component>
+
+    <button
+      v-if="isLoading && isEditable"
+      type="button"
+      class="inline-flex items-center justify-center rounded p-0.5 text-ink-gray-6 hover:bg-surface-gray-3"
+      title="Cancel upload"
+      contenteditable="false"
+      @click="cancel"
+    >
+      <span class="lucide-x size-3.5 shrink-0" aria-hidden="true" />
+    </button>
+    <button
+      v-else-if="error && isEditable"
+      type="button"
+      class="inline-flex items-center justify-center rounded p-0.5 text-ink-gray-6 hover:bg-surface-gray-3"
+      title="Try again"
+      contenteditable="false"
+      @click="retry"
+    >
+      <span class="lucide-rotate-cw size-3.5 shrink-0" aria-hidden="true" />
+    </button>
+  </NodeViewWrapper>
+</template>