feat(Editor): new component

docs/app/components/VersionMenu.vue

@@ -25,7 +25,7 @@ const items = computed(() => {
       trailing-icon="i-lucide-chevron-down"
       size="xs"
       class="-mb-[6px] font-semibold rounded-full truncate"
-      :class="[open && 'bg-primary/15 ']"
+      :class="[open && 'bg-primary/15']"
       :ui="{
         trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
       }"

docs/app/components/content/examples/editor/EditorBubbleMenuExample.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { EditorContent, EditorToolbarItem } from '@nuxt/ui'
+
+const content = ref<EditorContent>(`Select some text to see the bubble menu appear with formatting options.
+
+You can make text bold, italic, or apply other formatting options from the contextual menu.`)
+
+const toolbarItems: EditorToolbarItem[][] = [[{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold'
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic'
+}, {
+  kind: 'mark',
+  mark: 'underline',
+  icon: 'i-lucide-underline'
+}, {
+  kind: 'mark',
+  mark: 'strike',
+  icon: 'i-lucide-strikethrough'
+}, {
+  kind: 'mark',
+  mark: 'code',
+  icon: 'i-lucide-code'
+}]]
+</script>
+
+<template>
+  <UEditor v-slot="{ editor }" v-model="content" content-type="markdown" placeholder="Start typing...">
+    <UEditorToolbar
+      :editor="editor"
+      :items="toolbarItems"
+      layout="bubble"
+    />
+  </UEditor>
+</template>

docs/app/components/content/examples/editor/EditorCustomExtensionHandlerExample.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { EditorContent, EditorHandlers, EditorToolbarItem } from '@nuxt/ui'
+import type { Editor } from '@tiptap/vue-3'
+import { ImageUpload } from '~/utils/editor/image-upload'
+
+const content = ref<EditorContent>(`This editor includes a custom ImageUpload extension with custom handlers.
+
+Click the image button to upload a file. The extension uses a custom Vue component to handle the file upload process.`)
+
+const customHandlers: Partial<EditorHandlers> = {
+  image: {
+    canExecute: (editor: Editor) => editor.can().insertContent({ type: 'imageUpload' }),
+    execute: (editor: Editor) => editor.chain().focus().insertImageUpload().run(),
+    isActive: (editor: Editor) => editor.isActive('imageUpload'),
+    isDisabled: undefined
+  }
+}
+
+const toolbarItems: EditorToolbarItem[][] = [[{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold'
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic'
+}], [{
+  kind: 'image',
+  icon: 'i-lucide-image'
+}]]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="content"
+    :extensions="[ImageUpload]"
+    :handlers="customHandlers"
+    content-type="markdown"
+    placeholder="Start typing..."
+    class="min-h-80"
+  >
+    <UEditorToolbar :editor="editor" :items="toolbarItems" class="mb-2" />
+  </UEditor>
+</template>

docs/app/components/content/examples/editor/EditorCustomExtensionsExample.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { EditorContent, EditorToolbarItem, EditorEmojiMenuItem } from '@nuxt/ui'
+import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'
+import TextAlign from '@tiptap/extension-text-align'
+
+const content = ref<EditorContent>(`This editor includes custom extensions for emoji picker and text alignment.
+
+Type : to add emojis or use the alignment buttons in the toolbar.`)
+
+const toolbarItems: EditorToolbarItem[][] = [[{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold'
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic'
+}], [{
+  kind: 'textAlign',
+  align: 'left',
+  icon: 'i-lucide-align-left'
+}, {
+  kind: 'textAlign',
+  align: 'center',
+  icon: 'i-lucide-align-center'
+}, {
+  kind: 'textAlign',
+  align: 'right',
+  icon: 'i-lucide-align-right'
+}]]
+
+const emojiItems: EditorEmojiMenuItem[] = gitHubEmojis.filter(emoji => !emoji.name.startsWith('regional_indicator_')).slice(0, 50)
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="content"
+    :extensions="[
+      Emoji,
+      TextAlign.configure({ types: ['heading', 'paragraph'] })
+    ]"
+    content-type="markdown"
+    placeholder="Start typing..."
+  >
+    <UEditorToolbar :editor="editor" :items="toolbarItems" class="mb-2" />
+    <UEditorEmojiMenu :editor="editor" :items="emojiItems" />
+  </UEditor>
+</template>

docs/app/components/content/examples/editor/EditorCustomHandlersExample.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { EditorContent, EditorHandlers, EditorToolbarItem } from '@nuxt/ui'
+import type { Editor } from '@tiptap/vue-3'
+
+const content = ref<EditorContent>(`This editor has a custom handler for the bold command that also adds a notification.
+
+Try clicking the bold button!`)
+
+const toast = useToast()
+
+const customHandlers: Partial<EditorHandlers> = {
+  mark: {
+    canExecute: (editor: Editor, item) => editor.can().toggleMark(item.mark),
+    execute: (editor: Editor, item) => {
+      if (item.mark === 'bold') {
+        toast.add({
+          title: 'Bold toggled!',
+          description: 'Custom handler executed'
+        })
+      }
+      return editor.chain().focus().toggleMark(item.mark)
+    },
+    isActive: (editor: Editor, item) => editor.isActive(item.mark),
+    isDisabled: undefined
+  }
+}
+
+const toolbarItems: EditorToolbarItem[][] = [[{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold'
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic'
+}]]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="content"
+    :handlers="customHandlers"
+    content-type="markdown"
+    placeholder="Start typing..."
+  >
+    <UEditorToolbar :editor="editor" :items="toolbarItems" class="mb-2" />
+  </UEditor>
+</template>

docs/app/components/content/examples/editor/EditorCustomToolbarSlotExample.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { EditorContent, EditorToolbarItem } from '@nuxt/ui'
+import EditorLinkPopover from './EditorLinkPopover.vue'
+
+const content = ref<EditorContent>(`Select text and click the link button to add a link with the custom popover.
+
+You can also edit existing links like [this one](https://ui.nuxt.com).`)
+
+const toolbarItems: EditorToolbarItem[][] = [[{
+  kind: 'mark',
+  mark: 'bold',
+  icon: 'i-lucide-bold'
+}, {
+  kind: 'mark',
+  mark: 'italic',
+  icon: 'i-lucide-italic'
+}, {
+  slot: 'link'
+}]]
+</script>
+
+<template>
+  <UEditor v-slot="{ editor }" v-model="content" content-type="markdown" placeholder="Start typing...">
+    <UEditorToolbar :editor="editor" :items="toolbarItems" class="mb-2">
+      <template #link>
+        <EditorLinkPopover :editor="editor" />
+      </template>
+    </UEditorToolbar>
+  </UEditor>
+</template>

docs/app/components/content/examples/editor/EditorDragHandleAddExample.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { EditorContent } from '@nuxt/ui'
+
+const content = ref<EditorContent>({
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [{ type: 'text', text: 'Click the plus button to add a new paragraph below the current block.' }]
+  }, {
+    type: 'paragraph',
+    content: [{ type: 'text', text: 'The button appears when hovering over blocks.' }]
+  }]
+})
+</script>
+
+<template>
+  <UEditor v-slot="{ editor }" v-model="content" content-type="markdown" placeholder="Start typing...">
+    <UEditorDragHandle
+      v-slot="{ ui, onClick }"
+      :editor="editor"
+    >
+      <UButton
+        icon="i-lucide-plus"
+        color="primary"
+        variant="ghost"
+        size="sm"
+        :class="ui.handle()"
+        @click="(e) => {
+          const node = onClick(e)
+          if (node) {
+            editor.chain().focus().insertContentAt(node.pos + 1, { type: 'paragraph' }).run()
+          }
+        }"
+      />
+
+      <UButton
+        icon="i-lucide-grip-vertical"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :class="ui.handle()"
+      />
+    </UEditorDragHandle>
+  </UEditor>
+</template>

docs/app/components/content/examples/editor/EditorDragHandleBasicExample.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { EditorContent } from '@nuxt/ui'
+
+const content = ref<EditorContent>({
+  type: 'doc',
+  content: [{
+    type: 'heading',
+    attrs: { level: 2 },
+    content: [{ type: 'text', text: 'Drag and drop blocks' }]
+  }, {
+    type: 'paragraph',
+    content: [{ type: 'text', text: 'Hover over the left side of any block to see the drag handle.' }]
+  }, {
+    type: 'paragraph',
+    content: [{ type: 'text', text: 'Click to select the block or drag to reorder.' }]
+  }, {
+    type: 'paragraph',
+    content: [{ type: 'text', text: 'Try dragging this paragraph above the previous one.' }]
+  }]
+})
+</script>
+
+<template>
+  <UEditor v-slot="{ editor }" v-model="content" content-type="markdown" placeholder="Start typing...">
+    <UEditorDragHandle :editor="editor" />
+  </UEditor>
+</template>

docs/app/components/content/examples/editor/EditorDragHandleColorExample.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { EditorContent } from '@nuxt/ui'
+
+const content = ref<EditorContent>({
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [{ type: 'text', text: 'The drag handle has custom color and variant styling.' }]
+  }, {
+    type: 'paragraph',
+    content: [{ type: 'text', text: 'Hover to see the primary colored handle.' }]
+  }]
+})
+</script>
+
+<template>
+  <UEditor v-slot="{ editor }" v-model="content" content-type="markdown" placeholder="Start typing...">
+    <UEditorDragHandle :editor="editor" color="primary" variant="soft" />
+  </UEditor>
+</template>