frappe-ui 0.1.128 → 0.1.129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.128",
+  "version": "0.1.129",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "scripts": {

package/src/components/TextEditor/EditLink.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="p-2 flex min-w-72 items-center gap-2 bg-surface-white shadow-xl rounded-lg"
+  >
+    <TextInput
+      ref="input"
+      type="text"
+      class="w-full"
+      placeholder="https://example.com"
+      v-model="_href"
+      @keydown.enter="submitLink"
+      @keydown.esc="$emit('close')"
+    />
+    <div class="shrink-0 flex items-center gap-2">
+      <Tooltip text="Submit" placement="top">
+        <Button label="Submit" @click="submitLink">
+          <template #icon><LucideCheck class="size-4" /></template>
+        </Button>
+      </Tooltip>
+      <Tooltip text="Remove link" placement="top">
+        <Button label="Remove link" @click="$emit('updateHref', '')">
+          <template #icon><LucideX class="size-4" /></template>
+        </Button>
+      </Tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef, defineEmits } from 'vue'
+import Button from '../Button/Button.vue'
+import TextInput from '../TextInput.vue'
+import Tooltip from '../Tooltip/Tooltip.vue'
+
+const props = defineProps<{
+  show: boolean
+  href: string
+  onClose: () => void
+  onUpdateHref: (href: string) => void
+}>()
+
+const emit = defineEmits<{
+  (e: 'updateHref', href: string): void
+  (e: 'close'): void
+}>()
+
+const _href = ref(props.href)
+const input = useTemplateRef('input')
+
+// Simple URL validation regex
+const isValidUrl = (url: string) => {
+  if (!url) return true
+  const regex =
+    /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/i
+  return regex.test(url)
+}
+
+const submitLink = () => {
+  if (isValidUrl(_href.value)) {
+    emit('updateHref', _href.value)
+  }
+}
+
+onMounted(() => {
+  if (props.show) {
+    setTimeout(() => {
+      if (input.value?.el) {
+        input.value.el.focus()
+        input.value.el.select()
+      }
+    }, 0)
+  }
+})
+</script>

package/src/components/TextEditor/EmojiList.vue

@@ -1,111 +1,50 @@
 <template>
-  <div>
-    <div
-      v-if="items.length"
-      class="min-w-40 rounded-lg border bg-surface-white p-1 text-base shadow-lg"
-    >
-      <button
-        v-for="(item, index) in items"
-        :key="index"
-        :class="[
-          index === selectedIndex ? 'bg-surface-gray-2' : '',
-          'flex w-full items-center whitespace-nowrap rounded-md px-2 py-2 text-sm text-ink-gray-9',
-        ]"
-        @click="selectItem(index)"
-        @mouseover="selectedIndex = index"
-      >
-        <span class="mr-2">{{ item.emoji }}</span>
-        <span>{{ item.name }}</span>
-      </button>
-    </div>
-  </div>
+  <SuggestionList
+    ref="suggestionList"
+    :items="items"
+    :command="selectItem"
+    item-class="py-2"
+  >
+    <template #default="{ item }">
+      <span class="mr-2">{{ item.emoji }}</span>
+      <span>{{ item.name }}</span>
+    </template>
+  </SuggestionList>
 </template>
 
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    command: {
-      type: Function,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedIndex: 0,
-    }
-  },
-  watch: {
-    items() {
-      this.selectedIndex = 0
-    },
-  },
-  methods: {
-    onKeyDown({ event }) {
-      if (event.key === 'ArrowUp') {
-        this.upHandler()
-        return true
-      }
-      if (event.key === 'ArrowDown') {
-        this.downHandler()
-        return true
-      }
-      if (event.key === 'Enter') {
-        this.enterHandler()
-        return true
-      }
-      return false
-    },
-    upHandler() {
-      this.selectedIndex =
-        (this.selectedIndex + this.items.length - 1) % this.items.length
-    },
-    downHandler() {
-      this.selectedIndex = (this.selectedIndex + 1) % this.items.length
-    },
-    enterHandler() {
-      this.selectItem(this.selectedIndex)
-    },
-    selectItem(index) {
-      const item = this.items[index]
-      if (item) {
-        this.command({ emoji: item.emoji })
-      }
-    },
-  },
-}
-</script>
+<script setup lang="ts">
+import { ref, type PropType } from 'vue'
+import SuggestionList, { type SuggestionItem } from './SuggestionList.vue'
 
-<style>
-.emoji-suggestions {
-  background: #fff;
-  border-radius: 0.5rem;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0px 10px 20px rgba(0, 0, 0, 0.1);
-  padding: 0.2rem;
+interface EmojiItem extends SuggestionItem {
+  name: string
+  emoji: string
 }
 
-.emoji-item {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
-  border-radius: 0.3rem;
-  cursor: pointer;
-}
+const props = defineProps({
+  items: {
+    type: Array as PropType<EmojiItem[]>,
+    required: true,
+  },
+  command: {
+    type: Function as PropType<(params: { emoji: string }) => void>,
+    required: true,
+  },
+})
 
-.emoji-item.is-selected {
-  background: #eee;
-}
+const suggestionList = ref<InstanceType<typeof SuggestionList> | null>(null)
 
-.emoji {
-  margin-right: 0.5rem;
+const selectItem = (item: SuggestionItem) => {
+  if (item) {
+    props.command({ emoji: item.emoji })
+  }
 }
 
-.name {
-  font-size: 0.9rem;
+const onKeyDown = ({ event }: { event: KeyboardEvent }) => {
+  return suggestionList.value?.onKeyDown({ event }) ?? false
 }
-</style>
+
+defineExpose({
+  onKeyDown,
+})
+</script>

package/src/components/TextEditor/SlashCommandsList.vue

@@ -0,0 +1,47 @@
+<template>
+  <SuggestionList
+    ref="suggestionList"
+    :items="items"
+    :command="command"
+    container-class="min-w-48"
+    item-class="h-7"
+    :show-no-results="true"
+  >
+    <template #default="{ item }">
+      <component :is="item.icon" v-if="item.icon" class="mr-2 h-4 w-4" />
+      <div v-else class="mr-2 h-4 w-4"></div>
+      <span>{{ item.title }}</span>
+    </template>
+  </SuggestionList>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType, type Component } from 'vue'
+import SuggestionList, { type SuggestionItem } from './SuggestionList.vue'
+
+interface CommandItem extends SuggestionItem {
+  title: string
+  icon?: Component
+}
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<CommandItem[]>,
+    required: true,
+  },
+  command: {
+    type: Function as PropType<(item: SuggestionItem) => void>,
+    required: true,
+  },
+})
+
+const suggestionList = ref<InstanceType<typeof SuggestionList> | null>(null)
+
+const onKeyDown = ({ event }: { event: KeyboardEvent }) => {
+  return suggestionList.value?.onKeyDown({ event }) ?? false
+}
+
+defineExpose({
+  onKeyDown,
+})
+</script>

package/src/components/TextEditor/SuggestionList.vue

@@ -0,0 +1,134 @@
+<template>
+  <div
+    v-if="items.length"
+    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"
+  >
+    <button
+      v-for="(item, index) in items"
+      :key="index"
+      :ref="
+        (el) => {
+          if (el) itemRefs[index] = el as HTMLButtonElement
+        }
+      "
+      :class="[
+        'flex w-full items-center whitespace-nowrap rounded-md px-2 py-1.5 text-sm text-ink-gray-9',
+        index === selectedIndex ? 'bg-surface-gray-2' : '',
+        itemClass,
+      ]"
+      @click="selectItem(index)"
+      @mouseover="selectedIndex = index"
+    >
+      <slot :item="item" :index="index">
+        <span>{{ item.title || item.name }}</span>
+      </slot>
+    </button>
+    <div
+      v-if="!items.length && showNoResults"
+      class="px-3 py-1.5 text-sm text-ink-gray-5"
+    >
+      No results
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, type PropType, nextTick, onBeforeUpdate } from 'vue'
+
+export interface SuggestionItem {
+  [key: string]: any
+}
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<SuggestionItem[]>,
+    required: true,
+  },
+  command: {
+    type: Function as PropType<(item: SuggestionItem) => void>,
+    required: true,
+  },
+  containerClass: {
+    type: String,
+    default: '',
+  },
+  itemClass: {
+    type: String,
+    default: '',
+  },
+  showNoResults: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const selectedIndex = ref(0)
+const container = ref<HTMLDivElement | null>(null)
+const itemRefs = ref<HTMLButtonElement[]>([])
+
+onBeforeUpdate(() => {
+  itemRefs.value = []
+})
+
+const scrollIntoView = () => {
+  nextTick(() => {
+    const selectedElement = itemRefs.value[selectedIndex.value]
+    if (selectedElement) {
+      selectedElement.scrollIntoView({ block: 'nearest' })
+    }
+  })
+}
+
+const selectItem = (index: number) => {
+  const item = props.items[index]
+  if (item) {
+    props.command(item)
+  }
+}
+
+const onKeyDown = ({ event }: { event: KeyboardEvent }) => {
+  if (!props.items.length) return false
+
+  if (event.key === 'ArrowUp') {
+    upHandler()
+    return true
+  }
+  if (event.key === 'ArrowDown') {
+    downHandler()
+    return true
+  }
+  if (event.key === 'Enter') {
+    enterHandler()
+    return true
+  }
+  return false
+}
+
+const upHandler = () => {
+  selectedIndex.value =
+    (selectedIndex.value + props.items.length - 1) % props.items.length
+  scrollIntoView()
+}
+
+const downHandler = () => {
+  selectedIndex.value = (selectedIndex.value + 1) % props.items.length
+  scrollIntoView()
+}
+
+const enterHandler = () => {
+  selectItem(selectedIndex.value)
+}
+
+watch(
+  () => props.items,
+  () => {
+    selectedIndex.value = 0
+  },
+)
+
+defineExpose({
+  onKeyDown,
+})
+</script>

package/src/components/TextEditor/TextEditor.vue

@@ -27,8 +27,8 @@ import TableHeader from '@tiptap/extension-table-header'
 import TableRow from '@tiptap/extension-table-row'
 import ImageExtension from './image-extension'
 import ImageViewerExtension from './image-viewer-extension'
-import Video from './video-extension'
-import Link from '@tiptap/extension-link'
+import VideoExtension from './video-extension'
+import LinkExtension from './link-extension'
 import Typography from '@tiptap/extension-typography'
 import TextStyle from '@tiptap/extension-text-style'
 import Highlight from '@tiptap/extension-highlight'
@@ -41,6 +41,7 @@ import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
 import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
 import TextEditorFloatingMenu from './TextEditorFloatingMenu.vue'
 import EmojiExtension from './emoji-extension'
+import SlashCommands from './slash-commands-extension'
 import { detectMarkdown, markdownToHTML } from '../../utils/markdown'
 import { DOMParser } from 'prosemirror-model'
 
@@ -100,7 +101,7 @@ export default {
       type: Array,
       default: () => [],
     },
-    imageUploadFunction: {
+    uploadFunction: {
       type: Function,
       default: () => null,
     },
@@ -167,15 +168,16 @@ export default {
           },
         }).configure({ lowlight }),
         ImageExtension.configure({
-          uploadFunction: this.imageUploadFunction,
+          uploadFunction: this.uploadFunction,
         }),
         ImageViewerExtension,
-        Video,
-        Link.configure({
+        VideoExtension.configure({
+          uploadFunction: this.uploadFunction,
+        }),
+        LinkExtension.configure({
           openOnClick: false,
         }),
         Placeholder.configure({
-          showOnlyWhenEditable: false,
           placeholder:
             typeof this.placeholder === 'function'
               ? this.placeholder
@@ -183,6 +185,7 @@ export default {
         }),
         configureMention(this.mentions),
         EmojiExtension,
+        SlashCommands,
         ...(this.extensions || []),
       ],
       onUpdate: ({ editor }) => {
@@ -247,7 +250,7 @@ export default {
 }
 
 /* Placeholder */
-.ProseMirror:not(.ProseMirror-focused) p.is-editor-empty:first-child::before {
+.ProseMirror:not(.ProseMirror-focused) p.is-editor-empty::before {
   content: attr(data-placeholder);
   float: left;
   color: var(--ink-gray-4);

package/src/components/TextEditor/image-extension.ts

@@ -5,7 +5,7 @@ import {
 } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import ImageNodeView from './ImageNodeView.vue'
-import { Plugin, Selection } from 'prosemirror-state'
+import { Plugin } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
 import { Node } from '@tiptap/pm/model'
 import fileToBase64 from '../../utils/file-to-base64'
@@ -46,6 +46,11 @@ declare module '@tiptap/core' {
        * Upload and insert an image
        */
       uploadImage: (file: File) => ReturnType
+
+      /**
+       * Select an image file using the file picker and upload it
+       */
+      selectAndUploadImage: () => ReturnType
     }
   }
 }
@@ -153,6 +158,23 @@ export default NodeExtension.create<ImageOptions>({
         ({ editor }) => {
           return uploadImage(file, editor.view, null, this.options)
         },
+
+      selectAndUploadImage:
+        () =>
+        ({ editor }) => {
+          const input = document.createElement('input')
+          input.type = 'file'
+          input.accept = 'image/*'
+          input.onchange = (event) => {
+            const target = event.target as HTMLInputElement
+            if (target.files && target.files.length) {
+              const file = target.files[0]
+              editor.commands.uploadImage(file)
+            }
+          }
+          input.click()
+          return true
+        },
     }
   },
 
@@ -216,7 +238,7 @@ export default NodeExtension.create<ImageOptions>({
             },
           },
 
-          handlePaste: (view, event, slice) => {
+          handlePaste: (view, event) => {
             if (!extensionThis.options.uploadFunction) {
               return false
             }
@@ -252,7 +274,7 @@ export default NodeExtension.create<ImageOptions>({
           },
         },
 
-        appendTransaction(transactions, oldState, newState) {
+        appendTransaction(transactions, _, newState) {
           const newImageNodes: { node: Node; pos: number }[] = []
 
           if (transactions.some((tr) => tr.docChanged)) {

package/src/components/TextEditor/link-extension.ts

@@ -0,0 +1,162 @@
+import Link from '@tiptap/extension-link'
+import { createApp, h } from 'vue'
+import EditLink from './EditLink.vue'
+import tippy from 'tippy.js'
+
+export const LinkExtension = Link.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      openOnClick: false,
+      autolink: true,
+      defaultProtocol: 'https',
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-k': () => {
+        const editor = this.editor
+        const { state } = editor
+        const { from, to } = state.selection
+        const { doc } = state
+
+        if (from === to) {
+          return false
+        }
+
+        const existingHref = editor.getAttributes('link').href || ''
+
+        openLinkEditor(existingHref, editor.view.dom)
+          .then((href) => {
+            if (href === null) {
+              return
+            }
+
+            if (href === '') {
+              editor
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .unsetLink()
+                .setTextSelection(to)
+                .command(({ tr }) => {
+                  tr.setStoredMarks([])
+                  return true
+                })
+                .run()
+              return
+            }
+
+            let chain = editor
+              .chain()
+              .focus()
+              .extendMarkRange('link')
+              .setLink({ href })
+              .setTextSelection(to)
+              .command(({ tr }) => {
+                tr.setStoredMarks([])
+                return true
+              })
+
+            const posAfterLink = to
+            const charAfter =
+              posAfterLink < doc.content.size
+                ? doc.textBetween(posAfterLink, posAfterLink + 1)
+                : null
+
+            if (charAfter === null || charAfter !== ' ') {
+              chain = chain.insertContent(' ')
+            }
+
+            chain.run()
+          })
+          .catch(() => {})
+
+        return true
+      },
+    }
+  },
+})
+
+function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    let virtualReference: {
+      getBoundingClientRect: () => DOMRect | { [key: string]: any }
+    }
+
+    const selection = window.getSelection()
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0)
+      const rect = range.getBoundingClientRect()
+
+      virtualReference = {
+        getBoundingClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: rect.top,
+          right: rect.left + rect.width / 2,
+          bottom: rect.top,
+          left: rect.left + rect.width / 2,
+          x: rect.left + rect.width / 2,
+          y: rect.top,
+          toJSON: () => {},
+        }),
+      }
+    } else {
+      virtualReference = {
+        getBoundingClientRect: () => anchor.getBoundingClientRect(),
+      }
+    }
+
+    const app = createApp({
+      render() {
+        return h(EditLink, {
+          show: true,
+          href,
+          onClose: () => {
+            destroy()
+            reject('Link editing cancelled')
+          },
+          onUpdateHref: (newHref: string) => {
+            destroy()
+            resolve(newHref)
+          },
+        })
+      },
+    })
+
+    app.mount(container)
+
+    const tippyInstance = tippy(anchor, {
+      getReferenceClientRect: () => virtualReference.getBoundingClientRect(),
+      content: container,
+      trigger: 'manual',
+      interactive: true,
+      appendTo: document.body,
+      placement: 'top',
+      arrow: false,
+      theme: 'link-editor',
+      maxWidth: 'none',
+      onHidden() {
+        destroy()
+        reject('Link editing cancelled')
+      },
+    })
+
+    function destroy() {
+      setTimeout(() => {
+        tippyInstance.destroy()
+        app.unmount()
+        container.remove()
+      }, 0)
+    }
+
+    tippyInstance.show()
+  })
+}
+
+export default LinkExtension

package/src/components/TextEditor/slash-commands-extension.ts

@@ -0,0 +1,265 @@
+import { Extension, Editor, Range } from '@tiptap/core'
+import { VueRenderer } from '@tiptap/vue-3'
+import Suggestion, { SuggestionProps } from '@tiptap/suggestion'
+import { PluginKey } from 'prosemirror-state'
+import tippy, { Instance as TippyInstance, Props as TippyProps } from 'tippy.js'
+import SlashCommandsList from './SlashCommandsList.vue'
+import { Component } from 'vue'
+
+import Heading1 from '~icons/lucide/heading-1'
+import Heading2 from '~icons/lucide/heading-2'
+import Pilcrow from '~icons/lucide/pilcrow'
+import Heading3 from '~icons/lucide/heading-3'
+import List from '~icons/lucide/list'
+import ListOrdered from '~icons/lucide/list-ordered'
+import Code from '~icons/lucide/code'
+import Quote from '~icons/lucide/quote'
+import Image from '~icons/lucide/image'
+import Video from '~icons/lucide/video'
+import Link from '~icons/lucide/link'
+import Minus from '~icons/lucide/minus'
+import Table from '~icons/lucide/table-2'
+
+export const SlashCommandSuggestionKey = new PluginKey<any>(
+  'slashCommandSuggestion',
+)
+
+interface Command {
+  title: string
+  icon: Component
+  command: (props: CommandExecutionProps) => void
+}
+
+type CommandExecutionProps = {
+  editor: Editor
+  range: Range
+}
+
+const getCommands = (): Command[] => [
+  {
+    title: 'Heading 1',
+    icon: Heading1,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .setNode('heading', { level: 1 })
+        .run()
+    },
+  },
+  {
+    title: 'Heading 2',
+    icon: Heading2,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .setNode('heading', { level: 2 })
+        .run()
+    },
+  },
+  {
+    title: 'Heading 3',
+    icon: Heading3,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .setNode('heading', { level: 3 })
+        .run()
+    },
+  },
+  {
+    title: 'Bullet List',
+    icon: List,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).toggleBulletList().run()
+    },
+  },
+  {
+    title: 'Ordered List',
+    icon: ListOrdered,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).toggleOrderedList().run()
+    },
+  },
+  {
+    title: 'Code Block',
+    icon: Code,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+    },
+  },
+  {
+    title: 'Blockquote',
+    icon: Quote,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).toggleBlockquote().run()
+    },
+  },
+  {
+    title: 'Image',
+    icon: Image,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).selectAndUploadImage().run()
+    },
+  },
+  {
+    title: 'Video',
+    icon: Video,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).selectAndUploadVideo().run()
+    },
+  },
+  {
+    title: 'Link',
+    icon: Link,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).setLink({ href: '' }).run()
+    },
+  },
+  {
+    title: 'Horizontal Rule',
+    icon: Minus,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).setHorizontalRule().run()
+    },
+  },
+  {
+    title: 'Table',
+    icon: Table,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+        .run()
+    },
+  },
+  {
+    title: 'Paragraph',
+    icon: Pilcrow,
+    command: ({ editor, range }: CommandExecutionProps) => {
+      editor.chain().focus().deleteRange(range).setNode('paragraph').run()
+    },
+  },
+]
+
+type CommandProps = SuggestionProps<Command>
+
+export const SlashCommands = Extension.create({
+  name: 'slashCommands',
+
+  addOptions() {
+    return {
+      suggestion: {
+        char: '/',
+        pluginKey: SlashCommandSuggestionKey,
+        items: ({ query }: { query: string }): Command[] => {
+          const commands = getCommands()
+          return commands.filter((item) =>
+            item.title.toLowerCase().startsWith(query.toLowerCase()),
+          )
+        },
+        command: ({
+          editor,
+          range,
+          props,
+        }: {
+          editor: Editor
+          range: Range
+          props: Command
+        }) => {
+          props.command({ editor, range })
+        },
+        render: () => {
+          let component: VueRenderer | null
+          let popup: TippyInstance[] | null
+
+          return {
+            onStart: (props: CommandProps) => {
+              component = new VueRenderer(SlashCommandsList, {
+                props,
+                editor: props.editor,
+              })
+
+              if (!props.clientRect || !component.element) {
+                return
+              }
+
+              const tippyOptions: Partial<TippyProps> = {
+                getReferenceClientRect: props.clientRect as () => DOMRect,
+                appendTo: () => document.body,
+                content: component.element,
+                showOnCreate: true,
+                interactive: true,
+                trigger: 'manual',
+                placement: 'bottom-start',
+              }
+
+              popup = tippy('body', tippyOptions)
+            },
+
+            onUpdate(props: CommandProps) {
+              component?.updateProps(props)
+
+              if (!props.clientRect) {
+                return
+              }
+
+              if (popup && popup[0]) {
+                popup[0].setProps({
+                  getReferenceClientRect: props.clientRect as () => DOMRect,
+                })
+              }
+            },
+
+            onKeyDown(props: { event: KeyboardEvent }): boolean {
+              if (props.event.key === 'Escape') {
+                if (popup && popup[0]) {
+                  popup[0].hide()
+                }
+                return true
+              }
+
+              if (
+                component &&
+                component.ref &&
+                typeof (component.ref as any).onKeyDown === 'function'
+              ) {
+                return (component.ref as any).onKeyDown(props)
+              }
+              return false
+            },
+
+            onExit() {
+              if (popup && popup[0]) {
+                popup[0].destroy()
+              }
+              if (component) {
+                component.destroy()
+              }
+              popup = null
+              component = null
+            },
+          }
+        },
+      },
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion<Command>({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ]
+  },
+})
+
+export default SlashCommands

package/src/components/TextEditor/video-extension.ts

@@ -0,0 +1,166 @@
+import { Node, mergeAttributes, Editor } from '@tiptap/core'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { EditorView } from 'prosemirror-view'
+
+export interface VideoOptions {
+  uploadFunction:
+    | ((file: File) => Promise<{ src: string; [key: string]: any }>)
+    | null
+  HTMLAttributes: Record<string, any>
+}
+
+export interface SetVideoOptions {
+  src: string
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    video: {
+      setVideo: (options: SetVideoOptions) => ReturnType
+      uploadVideo: (file: File) => ReturnType
+      selectAndUploadVideo: () => ReturnType
+    }
+  }
+}
+
+export default Node.create<VideoOptions>({
+  name: 'video',
+  group: 'block',
+  selectable: true,
+  draggable: true,
+  atom: true,
+
+  addOptions() {
+    return {
+      uploadFunction: null,
+      HTMLAttributes: {},
+    }
+  },
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'video',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'video',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        controls: '',
+      }),
+    ]
+  },
+
+  addCommands() {
+    return {
+      setVideo:
+        (options: SetVideoOptions) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          })
+        },
+
+      uploadVideo:
+        (file: File) =>
+        ({ editor }) => {
+          const pos = editor.state.selection.from
+          return uploadVideoInternal(file, editor.view, pos, this.options)
+        },
+
+      selectAndUploadVideo:
+        () =>
+        ({ editor }) => {
+          if (!this.options.uploadFunction) {
+            console.error('uploadFunction option is not provided for videos.')
+            return false
+          }
+
+          const input = document.createElement('input')
+          input.type = 'file'
+          input.accept = 'video/*'
+          input.onchange = (event) => {
+            const target = event.target as HTMLInputElement
+            if (target.files && target.files.length) {
+              const file = target.files[0]
+              editor.commands.uploadVideo(file)
+            }
+          }
+          input.click()
+          return true
+        },
+    }
+  },
+
+  addNodeView() {
+    return ({ editor, node }: { editor: Editor; node: ProseMirrorNode }) => {
+      const div = document.createElement('div')
+      div.className =
+        'relative aspect-w-16 aspect-h-9' +
+        (editor.isEditable ? ' cursor-pointer' : '')
+
+      const video = document.createElement('video')
+      if (editor.isEditable) {
+        video.className = 'pointer-events-none'
+      }
+      video.src = node.attrs.src
+      video.setAttribute('controls', '')
+
+      if (editor.isEditable) {
+        let videoPill = document.createElement('div')
+        videoPill.className =
+          'absolute top-0 right-0 text-xs m-2 bg-surface-gray-6 text-ink-white px-2 py-1 rounded-md'
+        videoPill.innerHTML = 'Video'
+        div.append(videoPill)
+      }
+      div.append(video)
+      return {
+        dom: div,
+      }
+    }
+  },
+})
+
+function uploadVideoInternal(
+  file: File,
+  view: EditorView,
+  pos: number | null | undefined,
+  options: Record<string, any>,
+): boolean {
+  if (!options.uploadFunction) {
+    console.error('uploadFunction option is not provided for videos.')
+    return false
+  }
+
+  options
+    .uploadFunction(file)
+    .then((uploadedVideo: { src: string }) => {
+      const { schema } = view.state
+      const node = schema.nodes.video.create({ src: uploadedVideo.src })
+
+      const transaction = view.state.tr
+      if (pos != null) {
+        transaction.insert(pos, node)
+      } else {
+        transaction.replaceSelectionWith(node)
+      }
+      view.dispatch(transaction)
+    })
+    .catch((error: Error) => {
+      console.error('Video upload failed:', error)
+    })
+
+  return true
+}

package/src/components/TextEditor/video-extension.js

@@ -1,61 +0,0 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-// Inspired by this blog: https://www.codemzy.com/blog/tiptap-video-embed-extension
-
-const Video = Node.create({
-  name: 'video',
-  group: 'block',
-  selectable: true,
-  draggable: true,
-  atom: true,
-
-  addAttributes() {
-    return {
-      src: {
-        default: null,
-      },
-    }
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'video',
-      },
-    ]
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['video', mergeAttributes(HTMLAttributes)]
-  },
-
-  addNodeView() {
-    return ({ editor, node }) => {
-      const div = document.createElement('div')
-      div.className =
-        'relative aspect-w-16 aspect-h-9' +
-        (editor.isEditable ? ' cursor-pointer' : '')
-
-      const video = document.createElement('video')
-      if (editor.isEditable) {
-        video.className = 'pointer-events-none'
-        video.controls = true
-      }
-      video.src = node.attrs.src
-      if (!editor.isEditable) {
-        video.setAttribute('controls', '')
-      } else {
-        let videoPill = document.createElement('div')
-        videoPill.className =
-          'absolute top-0 right-0 text-xs m-2 bg-surface-gray-6 text-ink-white px-2 py-1 rounded-md'
-        videoPill.innerHTML = 'Video'
-        div.append(videoPill)
-      }
-      div.append(video)
-      return {
-        dom: div,
-      }
-    }
-  },
-})
-
-export default Video