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/ComponentCode.vue

@@ -97,6 +97,10 @@ const props = defineProps<{
    * Whether to add overflow-hidden to wrapper
    */
   overflowHidden?: boolean
+  /**
+   * Whether to add background-elevated to wrapper
+   */
+  elevated?: boolean
 }>()
 
 const route = useRoute()
@@ -416,7 +420,7 @@ const { data: ast } = await useAsyncData(codeKey, async () => {
         </template>
       </div>
 
-      <div v-if="component" class="flex justify-center border border-b-0 border-muted relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class, { 'overflow-hidden': props.overflowHidden }]">
+      <div v-if="component" class="flex justify-center border border-b-0 border-muted relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class, { 'overflow-hidden': props.overflowHidden, 'dark:bg-neutral-950/50': props.elevated }]">
         <component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <slot :name="slot" mdc-unwrap="p">

docs/app/components/content/ComponentExample.vue

@@ -59,9 +59,15 @@ const props = withDefaults(defineProps<{
    * Whether to add overflow-hidden to wrapper
    */
   overflowHidden?: boolean
+  /**
+   * Whether to add background-elevated to wrapper
+   */
+  elevated?: boolean
+  lang?: string
 }>(), {
   preview: true,
-  source: true
+  source: true,
+  lang: 'vue'
 })
 
 const slots = defineSlots<{
@@ -88,7 +94,7 @@ const code = computed(() => {
 `
   }
 
-  code += `\`\`\`vue ${props.preview ? '' : ` [${data.pascalName}.vue]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
+  code += `\`\`\`${props.lang} ${props.preview ? '' : ` [${data.pascalName}.${props.lang}]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
 ${data?.code ?? ''}
 \`\`\``
 
@@ -208,9 +214,9 @@ const urlSearchParams = computed(() => {
           v-bind="typeof iframe === 'object' ? iframe : {}"
           :src="`/examples/${name}?${urlSearchParams}`"
           class="relative w-full"
-          :class="[props.class, !iframeMobile && 'lg:left-1/2 lg:-translate-x-1/2 lg:w-[1024px]']"
+          :class="[props.class, { 'dark:bg-neutral-950/50 rounded-t-md': props.elevated }, !iframeMobile && 'lg:left-1/2 lg:-translate-x-1/2 lg:w-[1024px]']"
         />
-        <div v-else class="flex justify-center p-4" :class="props.class">
+        <div v-else class="flex justify-center p-4" :class="[props.class, { 'dark:bg-neutral-950/50 rounded-t-md': props.elevated }]">
           <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
         </div>
       </div>

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { upperFirst } from 'scule'
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { mapEditorItems } from '@nuxt/ui/utils/editor'
+import type { Editor, Node } from '@tiptap/vue-3'
+
+const value = ref(`Hover over the left side to see both drag handle and menu button.
+
+Click the menu to see block actions. Try duplicating or deleting a block.`)
+
+const selectedNode = ref<{ node: Node | null, pos: number }>()
+
+const getMenuItems = (editor: Editor): DropdownMenuItem[][] => {
+  if (!selectedNode.value?.node) {
+    return []
+  }
+
+  return mapEditorItems(editor, [[
+    {
+      type: 'label',
+      label: upperFirst(selectedNode.value.node.type)
+    },
+    {
+      label: 'Turn into',
+      icon: 'i-lucide-repeat-2',
+      children: [
+        { kind: 'paragraph', label: 'Paragraph', icon: 'i-lucide-type' },
+        { kind: 'heading', level: 1, label: 'Heading 1', icon: 'i-lucide-heading-1' },
+        { kind: 'heading', level: 2, label: 'Heading 2', icon: 'i-lucide-heading-2' },
+        { kind: 'heading', level: 3, label: 'Heading 3', icon: 'i-lucide-heading-3' },
+        { kind: 'heading', level: 4, label: 'Heading 4', icon: 'i-lucide-heading-4' },
+        { kind: 'bulletList', label: 'Bullet List', icon: 'i-lucide-list' },
+        { kind: 'orderedList', label: 'Ordered List', icon: 'i-lucide-list-ordered' },
+        { kind: 'blockquote', label: 'Blockquote', icon: 'i-lucide-text-quote' },
+        { kind: 'codeBlock', label: 'Code Block', icon: 'i-lucide-square-code' }
+      ]
+    },
+    {
+      kind: 'clearFormatting',
+      pos: selectedNode.value?.pos,
+      label: 'Reset formatting',
+      icon: 'i-lucide-rotate-ccw'
+    }
+  ], [
+    {
+      kind: 'duplicate',
+      pos: selectedNode.value?.pos,
+      label: 'Duplicate',
+      icon: 'i-lucide-copy'
+    },
+    {
+      label: 'Copy to clipboard',
+      icon: 'i-lucide-clipboard',
+      onSelect: async () => {
+        if (!selectedNode.value) return
+
+        const pos = selectedNode.value.pos
+        const node = editor.state.doc.nodeAt(pos)
+        if (node) {
+          await navigator.clipboard.writeText(node.textContent)
+        }
+      }
+    }
+  ], [
+    {
+      kind: 'moveUp',
+      pos: selectedNode.value?.pos,
+      label: 'Move up',
+      icon: 'i-lucide-arrow-up'
+    },
+    {
+      kind: 'moveDown',
+      pos: selectedNode.value?.pos,
+      label: 'Move down',
+      icon: 'i-lucide-arrow-down'
+    }
+  ], [
+    {
+      kind: 'delete',
+      pos: selectedNode.value?.pos,
+      label: 'Delete',
+      icon: 'i-lucide-trash'
+    }
+  ]]) as DropdownMenuItem[][]
+}
+</script>
+
+<template>
+  <UEditor v-slot="{ editor }" v-model="value" class="w-full min-h-21">
+    <UEditorDragHandle v-slot="{ ui }" :editor="editor" @node-change="selectedNode = $event">
+      <UDropdownMenu
+        v-slot="{ open }"
+        :modal="false"
+        :items="getMenuItems(editor)"
+        :content="{ side: 'left' }"
+        :ui="{ content: 'w-48', label: 'text-xs' }"
+        @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
+      >
+        <UButton
+          icon="i-lucide-more-vertical"
+          color="neutral"
+          variant="ghost"
+          active-variant="soft"
+          size="sm"
+          :active="open"
+          :class="ui.handle()"
+        />
+      </UDropdownMenu>
+    </UEditorDragHandle>
+  </UEditor>
+</template>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const value = ref(`# Drag Handle
+
+Hover over the left side of this block to see the drag handle appear and reorder blocks.`)
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    content-type="markdown"
+    class="w-full min-h-21"
+  >
+    <UEditorDragHandle :editor="editor" />
+  </UEditor>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { EditorSuggestionMenuItem } from '@nuxt/ui'
+
+const value = ref(`Click the plus button to open the suggestion menu and add new blocks.
+
+The button appears when hovering over blocks.`)
+
+const suggestionItems: EditorSuggestionMenuItem[][] = [[{
+  kind: 'heading',
+  level: 1,
+  label: 'Heading 1',
+  icon: 'i-lucide-heading-1'
+}, {
+  kind: 'heading',
+  level: 2,
+  label: 'Heading 2',
+  icon: 'i-lucide-heading-2'
+}, {
+  kind: 'bulletList',
+  label: 'Bullet List',
+  icon: 'i-lucide-list'
+}, {
+  kind: 'blockquote',
+  label: 'Blockquote',
+  icon: 'i-lucide-text-quote'
+}]]
+</script>
+
+<template>
+  <UEditor v-slot="{ editor, handlers }" v-model="value" class="w-full min-h-21">
+    <UEditorDragHandle v-slot="{ ui, onClick }" :editor="editor">
+      <UButton
+        icon="i-lucide-plus"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :class="ui.handle()"
+        @click="(e) => {
+          e.stopPropagation()
+          const node = onClick(e)
+          handlers.suggestion?.execute(editor, { pos: node?.pos }).run()
+        }"
+      />
+
+      <UButton
+        icon="i-lucide-grip-vertical"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :class="ui.handle()"
+      />
+    </UEditorDragHandle>
+
+    <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />
+  </UEditor>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { EditorEmojiMenuItem } from '@nuxt/ui'
+import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'
+
+const value = ref(`# Emoji Menu
+
+Type : to insert emojis and select from the list of available emojis.`)
+
+const items: EditorEmojiMenuItem[] = gitHubEmojis.filter(emoji => !emoji.name.startsWith('regional_indicator_'))
+
+// SSR-safe function to append menus to body (avoids z-index issues in docs)
+const appendToBody = import.meta.client ? () => document.body : undefined
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    :extensions="[Emoji]"
+    content-type="markdown"
+    placeholder="Type : to add emojis..."
+    class="w-full min-h-21"
+  >
+    <UEditorEmojiMenu :editor="editor" :items="items" :append-to="appendToBody" />
+  </UEditor>
+</template>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { EditorEmojiMenuItem } from '@nuxt/ui'
+import { Emoji } from '@tiptap/extension-emoji'
+
+const value = ref(`Type : to see popular emojis.`)
+
+const emojiItems: EditorEmojiMenuItem[] = [{
+  name: 'smile',
+  emoji: '😄',
+  shortcodes: ['smile'],
+  tags: ['happy', 'joy', 'pleased']
+}, {
+  name: 'heart',
+  emoji: '❤️',
+  shortcodes: ['heart'],
+  tags: ['love', 'like']
+}, {
+  name: 'thumbsup',
+  emoji: '👍',
+  shortcodes: ['thumbsup', '+1'],
+  tags: ['approve', 'ok']
+}, {
+  name: 'fire',
+  emoji: '🔥',
+  shortcodes: ['fire'],
+  tags: ['hot', 'burn']
+}, {
+  name: 'rocket',
+  emoji: '🚀',
+  shortcodes: ['rocket'],
+  tags: ['ship', 'launch']
+}, {
+  name: 'eyes',
+  emoji: '👀',
+  shortcodes: ['eyes'],
+  tags: ['look', 'watch']
+}, {
+  name: 'tada',
+  emoji: '🎉',
+  shortcodes: ['tada'],
+  tags: ['party', 'celebration']
+}, {
+  name: 'thinking',
+  emoji: '🤔',
+  shortcodes: ['thinking'],
+  tags: ['hmm', 'think', 'consider']
+}]
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="value"
+    :extensions="[Emoji]"
+    placeholder="Type : to add emojis..."
+    class="w-full min-h-21"
+  >
+    <UEditorEmojiMenu :editor="editor" :items="emojiItems" />
+  </UEditor>
+</template>