EditorMentionMenu

<script setup lang="ts">
import { ref } from 'vue'
import type { EditorMentionMenuItem } from 'pohon-ui'

const value = ref(`# Mention Menu

Type @ to mention someone and select from the list of available users.`)

const items: Array<EditorMentionMenuItem> = [
  {
    label: 'benjamincanac',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/739984?v=4',
      loading: 'lazy' as const
    }
  },
  {
    label: 'atinux',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/904724?v=4',
      loading: 'lazy' as const
    }
  },
  {
    label: 'danielroe',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/28706372?v=4',
      loading: 'lazy' as const
    }
  },
  {
    label: 'pi0',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/5158436?v=4',
      loading: 'lazy' as const
    }
  }
]

// SSR-safe function to append menus to body (avoids z-index issues in docs)
const appendToBody = false ? () => document.body : undefined
</script>

<template>
  <PEditor
    v-slot="{ editor }"
    v-model="value"
    content-type="markdown"
    placeholder="Type @ to mention someone..."
    class="min-h-21 w-full"
  >
    <PEditorMentionMenu :editor="editor" :items="items" :append-to="appendToBody" />
  </PEditor>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { EditorMentionMenuItem } from 'pohon-ui';

const value = ref(`Type @ to mention a user.

You can customize the items with avatars, icons, and descriptions.`);

const items: Array<EditorMentionMenuItem> = [{
  label: 'benjamincanac',
  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', loading: 'lazy' as const },
}, {
  label: 'HugoRCD',
  avatar: { src: 'https://avatars.githubusercontent.com/u/71938701?v=4', loading: 'lazy' as const },
}, {
  label: 'atinux',
  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4', loading: 'lazy' as const },
}, {
  label: 'romhml',
  avatar: { src: 'https://avatars.githubusercontent.com/u/25613751?v=4', loading: 'lazy' as const },
}, {
  label: 'sandros94',
  avatar: { src: 'https://avatars.githubusercontent.com/u/13056429?v=4', loading: 'lazy' as const },
}, {
  label: 'J-Michalek',
  avatar: { src: 'https://avatars.githubusercontent.com/u/71264422?v=4', loading: 'lazy' as const },
}, {
  label: 'hywax',
  avatar: { src: 'https://avatars.githubusercontent.com/u/149865959?v=4', loading: 'lazy' as const },
}];
</script>

<template>
  <PEditor
    v-slot="{ editor }"
    v-model="value"
    content-type="markdown"
    placeholder="Type @ to mention..."
    class="min-h-19 w-full"
  >
    <PEditorMentionMenu
      :editor="editor"
      :items="items"
    />
  </PEditor>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { refDebounced } from '@vueuse/core';

const value = ref(`# Async Mention Menu

Type @ to mention someone. Results are fetched from an API as you type.`);

const searchTerm = ref('');
const searchTermDebounced = refDebounced(searchTerm, 200);

const { data: items } = useLazyFetch('https://dummyjson.com/users/search?limit=10', {
  key: 'editor-mention-users-search',
  query: { q: searchTermDebounced },
  transform: (data: { users: Array<{ id: number; firstName: string; lastName: string; image: string }> }) => {
    return data.users?.map((user) => ({ id: user.id, label: `${user.firstName} ${user.lastName}`, avatar: { src: user.image, loading: 'lazy' as const } })) || [];
  },
  server: false,
});

// SSR-safe function to append menus to body (avoids z-index issues in docs)
const appendToBody = false ? () => document.body : undefined;
</script>

<template>
  <PEditor
    v-slot="{ editor }"
    v-model="value"
    content-type="markdown"
    placeholder="Type @ to mention someone..."
    class="min-h-21 w-full"
  >
    <PEditorMentionMenu
      v-model:search-term="searchTerm"
      :editor="editor"
      :items="items"
      :append-to="appendToBody"
      ignore-filter
    />
  </PEditor>
</template>