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

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

@@ -10,6 +10,9 @@ import {
   type EditorCommandMeta,
 } from '#molecules/editor/commands'
 import { filterByQuery } from '#molecules/editor/extensions/shared/suggestion-helpers'
+import { PLATFORM_CONFIGS } from '#molecules/editor/extensions/iframe/iframe-embed-utils'
+import { allowlistPermitsHosts } from '#molecules/editor/extensions/iframe/iframe-allowlist'
+import { openTableSizePicker } from '#molecules/editor/components/table-size-picker/tableSizePickerController'
 import SlashCommandsList from './SlashCommandsList.vue'
 
 export const SlashCommandSuggestionKey = new PluginKey('slashCommandSuggestion')
@@ -17,6 +20,8 @@ export const SlashCommandSuggestionKey = new PluginKey('slashCommandSuggestion')
 export interface CommandItem extends BaseSuggestionItem {
   title: string
   icon: string
+  /** Section header this command renders under (dropdown-group style). */
+  group?: string
   isAvailable?: EditorCommandMeta['isAvailable']
   command: (props: CommandExecutionProps) => void
 }
@@ -38,67 +43,126 @@ function slashCommand(
   }
 }
 
+/** Stamp a section header onto a run of commands (dropdown-group style). */
+function inGroup(group: string, items: CommandItem[]): CommandItem[] {
+  return items.map((item) => ({ ...item, group }))
+}
+
 const getCommands = (): CommandItem[] => [
-  slashCommand(headingMeta(2), ({ editor, range }: CommandExecutionProps) => {
-    editor
-      .chain()
-      .focus()
-      .deleteRange(range)
-      .setNode('heading', { level: 2 })
-      .run()
-  }),
-  slashCommand(headingMeta(3), ({ editor, range }: CommandExecutionProps) => {
-    editor
-      .chain()
-      .focus()
-      .deleteRange(range)
-      .setNode('heading', { level: 3 })
-      .run()
-  }),
-  slashCommand(commandMeta.bulletList, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).toggleBulletList().run()
-  }),
-  slashCommand(commandMeta.orderedList, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).toggleOrderedList().run()
-  }),
-  slashCommand(commandMeta.taskList, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).toggleTaskList().run()
-  }),
-  slashCommand(commandMeta.codeBlock, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
-  }),
-  slashCommand(commandMeta.blockquote, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).toggleBlockquote().run()
-  }),
-  slashCommand(commandMeta.image, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).selectAndUploadImage().run()
-  }),
-  slashCommand(commandMeta.video, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).selectAndUploadVideo().run()
-  }),
-  slashCommand(commandMeta.embed, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).openIframeDialog().run()
-  }),
-  slashCommand(commandMeta.link, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).setLink({ href: '' }).run()
-  }),
-  slashCommand(commandMeta.horizontalRule, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).setHorizontalRule().run()
-  }),
-  slashCommand(
-    { ...commandMeta.table, icon: 'lucide-table-2' },
-    ({ editor, range }: CommandExecutionProps) => {
+  ...inGroup('Text', [
+    slashCommand(headingMeta(2), ({ editor, range }: CommandExecutionProps) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .setNode('heading', { level: 2 })
+        .run()
+    }),
+    slashCommand(headingMeta(3), ({ editor, range }: CommandExecutionProps) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .setNode('heading', { level: 3 })
+        .run()
+    }),
+    slashCommand(commandMeta.blockquote, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleBlockquote().run()
+    }),
+    slashCommand(commandMeta.codeBlock, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+    }),
+  ]),
+  ...inGroup('Lists', [
+    slashCommand(commandMeta.bulletList, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleBulletList().run()
+    }),
+    slashCommand(commandMeta.orderedList, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleOrderedList().run()
+    }),
+    slashCommand(commandMeta.taskList, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleTaskList().run()
+    }),
+  ]),
+  ...inGroup('Media', [
+    slashCommand(commandMeta.image, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).selectAndUploadImage().run()
+    }),
+    slashCommand(commandMeta.video, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).selectAndUploadVideo().run()
+    }),
+    slashCommand(commandMeta.attachment, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).selectAndUploadFile().run()
+    }),
+  ]),
+  ...inGroup('Embeds', [
+    slashCommand(commandMeta.embed, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).openIframeDialog().run()
+    }),
+    // One shortcut per first-party embed integration. Each opens the same embed
+    // dialog, pre-titled for the platform; a custom iframe allowlist that
+    // excludes a platform's hosts prunes its shortcut.
+    ...PLATFORM_CONFIGS.map((platform) =>
+      slashCommand(
+        {
+          label: platform.name,
+          icon: platform.icon,
+          isAvailable: (editor) =>
+            commandMeta.embed.isAvailable(editor) &&
+            allowlistPermitsHosts(editor, platform.hosts),
+        },
+        ({ editor, range }) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .openIframeDialog(platform.name)
+            .run()
+        },
+      ),
+    ),
+  ]),
+  ...inGroup('Insert', [
+    slashCommand(commandMeta.link, ({ editor, range }) => {
+      const from = range.from
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .insertContent('Link')
+        .setTextSelection({ from, to: from + 4 })
+        .run()
+      editor.commands.openLinkEditor({ startInEdit: true })
+    }),
+    slashCommand(
+      { ...commandMeta.table, icon: 'lucide-table-2' },
+      ({ editor, range }: CommandExecutionProps) => {
+        editor.chain().focus().deleteRange(range).run()
+        // Anchor the size picker to the caret left behind by the deleted query.
+        const caret = editor.view.coordsAtPos(editor.state.selection.from)
+        openTableSizePicker({
+          editor,
+          reference: new DOMRect(
+            caret.left,
+            caret.top,
+            0,
+            caret.bottom - caret.top,
+          ),
+        })
+      },
+    ),
+    slashCommand(commandMeta.horizontalRule, ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).setHorizontalRule().run()
+    }),
+    slashCommand(commandMeta.toc, ({ editor, range }) => {
       editor
         .chain()
         .focus()
         .deleteRange(range)
-        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+        .insertTableOfContentsNode()
         .run()
-    },
-  ),
-  slashCommand(commandMeta.toc, ({ editor, range }) => {
-    editor.chain().focus().deleteRange(range).insertTableOfContentsNode().run()
-  }),
+    }),
+  ]),
 ]
 
 export const SlashCommands = createSuggestionExtension<CommandItem>({

package/src/molecules/editor/extensions/suggestion/SuggestionList.vue

@@ -1,36 +1,56 @@
 <template>
-  <div
+  <EditorPopover
     v-if="items.length || showNoResults"
-    ref="container"
-    class="relative max-h-[300px] min-w-40 overflow-y-auto rounded-lg bg-surface-white p-1 text-base shadow-lg"
-    :class="containerClass"
+    dialog-label="Suggestions"
+    :autofocus="false"
+    :trapped="false"
+    :loop="false"
+    :content-class="[
+      'relative max-h-[300px] min-w-40 overflow-y-auto rounded-lg p-1 text-base',
+      containerClass,
+    ]"
   >
     <template v-if="items.length">
-      <SuggestionListItem
-        v-for="(item, index) in items"
-        :key="index"
-        :ref="(el) => setItemRef(el, index)"
-        :item="item"
-        :selected="index === selectedIndex"
-        :item-class="itemClass"
-        @select="selectItem(index)"
-        @hover="selectedIndex = index"
+      <template
+        v-for="(group, groupIndex) in groupedItems"
+        :key="group.label ?? groupIndex"
       >
-        <template #default="{ item: slotItem }">
-          <slot :item="slotItem" :index="index">
-            <span>{{ slotItem.display || slotItem.title || slotItem.name }}</span>
-          </slot>
-        </template>
-      </SuggestionListItem>
+        <!-- Same idiom as the Dropdown group label (`dropdownClasses.groupLabel`). -->
+        <div
+          v-if="group.label"
+          class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
+        >
+          {{ group.label }}
+        </div>
+        <SuggestionListItem
+          v-for="{ item, index } in group.entries"
+          :key="index"
+          :ref="(el) => setItemRef(el, index)"
+          :item="item"
+          :selected="index === selectedIndex"
+          :item-class="itemClass"
+          @select="selectItem(index)"
+          @hover="selectedIndex = index"
+        >
+          <template #default="{ item: slotItem }">
+            <slot :item="slotItem" :index="index">
+              <span>{{
+                slotItem.display || slotItem.title || slotItem.name
+              }}</span>
+            </slot>
+          </template>
+        </SuggestionListItem>
+      </template>
     </template>
     <div v-else class="px-3 py-1.5 text-sm text-ink-gray-5">No results</div>
-  </div>
+  </EditorPopover>
 </template>
 
 <script setup lang="ts">
 import {
   ref,
   toRef,
+  computed,
   nextTick,
   onBeforeUpdate,
   type PropType,
@@ -39,6 +59,7 @@ import {
 import type { BaseSuggestionItem } from '#molecules/editor/extensions/shared/suggestion-types'
 import { useSuggestionList } from '#molecules/editor/composables/useSuggestionList'
 import SuggestionListItem from './SuggestionListItem.vue'
+import EditorPopover from '#molecules/editor/components/EditorPopover.vue'
 
 const props = defineProps({
   items: {
@@ -63,9 +84,27 @@ const props = defineProps({
   },
 })
 
-const container = ref<HTMLDivElement | null>(null)
 const itemRefs = ref<HTMLElement[]>([])
 
+/**
+ * Display-only grouping: split the flat filtered list into consecutive runs of
+ * `item.group`, keeping each item's ORIGINAL index so selection/keyboard state
+ * (which is flat) maps 1:1 onto rendered items. `filterByQuery` preserves
+ * source order, so a group's items stay adjacent and empty groups simply never
+ * appear. Items without a `group` render headerless.
+ */
+const groupedItems = computed(() => {
+  type Entry = { item: BaseSuggestionItem; index: number }
+  const groups: Array<{ label?: string; entries: Entry[] }> = []
+  props.items.forEach((item, index) => {
+    const label = typeof item.group === 'string' ? item.group : undefined
+    const last = groups[groups.length - 1]
+    if (last && last.label === label) last.entries.push({ item, index })
+    else groups.push({ label, entries: [{ item, index }] })
+  })
+  return groups
+})
+
 const { selectedIndex, onKeyDown } = useSuggestionList<BaseSuggestionItem>(
   toRef(props, 'items'),
   (item) => props.command(item),
@@ -79,7 +118,8 @@ function setItemRef(
   el: Element | ComponentPublicInstance | null,
   index: number,
 ): void {
-  const node = (el as ComponentPublicInstance | null)?.$el ?? (el as Element | null)
+  const node =
+    (el as ComponentPublicInstance | null)?.$el ?? (el as Element | null)
   if (node instanceof HTMLElement) itemRefs.value[index] = node
 }
 

package/src/molecules/editor/extensions/suggestion/SuggestionListItem.vue

@@ -2,7 +2,7 @@
   <button
     type="button"
     :class="[
-      'flex w-full items-center whitespace-nowrap rounded-md px-2 py-1.5 text-sm text-ink-gray-9',
+      'flex w-full items-center whitespace-nowrap rounded px-2 py-1.5 text-sm text-ink-gray-9',
       selected ? 'bg-surface-gray-2' : '',
       itemClass,
     ]"

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

@@ -7,6 +7,7 @@ import {
   createSuggestionRenderer,
   type SuggestionFloatingOptions,
 } from '#molecules/editor/extensions/shared/suggestion-renderer'
+import { isInCode } from '#molecules/editor/extensions/shared/suggestion-helpers'
 
 // Re-export for back-compat: several extensions still import the base item type
 // from this module path. The canonical home is `suggestion-types`.
@@ -59,6 +60,9 @@ export function createSuggestionExtension<TItem extends BaseSuggestionItem>(
           pluginKey: options.pluginKey,
           items: options.items,
           command: options.command,
+          // Stay inert inside code blocks / inline code, where a trigger char
+          // (`:`/`#`/`@`) is literal source the author is typing — not a cue.
+          allow: ({ state, range }) => !isInCode(state, range.from),
           allowSpaces: options.allowSpaces,
           startOfLine: options.startOfLine,
           decorationTag: options.decorationTag || 'span',

package/src/molecules/editor/extensions/table/drag-scroll.ts

@@ -0,0 +1,154 @@
+/**
+ * Shared scaffolding for pointer drags over tables (cell drag-select, grip
+ * drags): pointer capture so a release outside the window still ends the drag,
+ * and edge auto-scroll so dragging past the visible boundary keeps selecting —
+ * horizontally inside the `.tableWrapper` (overflow-x: auto) and vertically in
+ * the nearest scrollable ancestor (or the page).
+ */
+
+const EDGE = 28
+const MAX_STEP = 16
+
+/** Scroll velocity for one axis given the pointer and the visible range. */
+function axisStep(pos: number, start: number, end: number): number {
+  if (end - start < EDGE * 3) return 0
+  if (pos < start + EDGE) {
+    return -Math.ceil(((start + EDGE - pos) / EDGE) * MAX_STEP)
+  }
+  if (pos > end - EDGE) {
+    return Math.ceil(((pos - (end - EDGE)) / EDGE) * MAX_STEP)
+  }
+  return 0
+}
+
+/** Nearest ancestor that can scroll vertically, else the page scroller. */
+export function verticalScrollParent(el: Element): HTMLElement {
+  for (let cur = el.parentElement; cur; cur = cur.parentElement) {
+    const style = getComputedStyle(cur)
+    if (
+      /(auto|scroll)/.test(style.overflowY) &&
+      cur.scrollHeight > cur.clientHeight
+    ) {
+      return cur
+    }
+  }
+  return (
+    (document.scrollingElement as HTMLElement | null) ??
+    document.documentElement
+  )
+}
+
+interface DragScroller {
+  update(x: number, y: number): void
+  stop(): void
+}
+
+function createDragScroller(
+  area: HTMLElement,
+  onScrolled: () => void,
+): DragScroller {
+  const page =
+    (document.scrollingElement as HTMLElement | null) ??
+    document.documentElement
+  const vertical = verticalScrollParent(area)
+  let raf = 0
+  let px = 0
+  let py = 0
+
+  const tick = () => {
+    raf = 0
+    let moved = false
+
+    if (area.scrollWidth > area.clientWidth) {
+      const rect = area.getBoundingClientRect()
+      const dx = axisStep(
+        px,
+        Math.max(rect.left, 0),
+        Math.min(rect.right, window.innerWidth),
+      )
+      if (dx) {
+        const before = area.scrollLeft
+        area.scrollLeft += dx
+        moved = moved || area.scrollLeft !== before
+      }
+    }
+
+    const bounds =
+      vertical === page
+        ? { top: 0, bottom: window.innerHeight }
+        : (() => {
+            const rect = vertical.getBoundingClientRect()
+            return {
+              top: Math.max(rect.top, 0),
+              bottom: Math.min(rect.bottom, window.innerHeight),
+            }
+          })()
+    const dy = axisStep(py, bounds.top, bounds.bottom)
+    if (dy) {
+      const before = vertical.scrollTop
+      vertical.scrollTop += dy
+      moved = moved || vertical.scrollTop !== before
+    }
+
+    if (moved) {
+      onScrolled()
+      raf = requestAnimationFrame(tick)
+    }
+  }
+
+  return {
+    update(x, y) {
+      px = x
+      py = y
+      if (!raf) raf = requestAnimationFrame(tick)
+    },
+    stop() {
+      if (raf) cancelAnimationFrame(raf)
+      raf = 0
+    },
+  }
+}
+
+/**
+ * Run a pointer drag from `event` until pointerup/pointercancel, reporting the
+ * latest pointer position through `onPoint` — on every move and again on every
+ * auto-scroll step (so the selection keeps growing while the pointer idles in
+ * the edge zone).
+ */
+export function trackPointerDrag(options: {
+  event: PointerEvent
+  /** Horizontal auto-scroll container (the table's `.tableWrapper`), if any. */
+  area: HTMLElement | null
+  onPoint: (x: number, y: number) => void
+}): void {
+  const { event, area, onPoint } = options
+  const pointerId = event.pointerId
+  const target = event.target instanceof Element ? event.target : null
+  try {
+    target?.setPointerCapture(pointerId)
+  } catch {
+    // Detached or capture-incapable target; document listeners still cover us.
+  }
+
+  let x = event.clientX
+  let y = event.clientY
+  const scroller = area ? createDragScroller(area, () => onPoint(x, y)) : null
+
+  const onMove = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    x = e.clientX
+    y = e.clientY
+    onPoint(x, y)
+    scroller?.update(x, y)
+  }
+  const stop = (e: PointerEvent) => {
+    if (e.pointerId !== pointerId) return
+    scroller?.stop()
+    document.removeEventListener('pointermove', onMove)
+    document.removeEventListener('pointerup', stop, true)
+    document.removeEventListener('pointercancel', stop, true)
+  }
+  document.addEventListener('pointermove', onMove)
+  document.addEventListener('pointerup', stop, true)
+  document.addEventListener('pointercancel', stop, true)
+}