SlashCommand

<script setup lang="ts">
import { defaultSlashCommands, SlashCommand } from '@vuemaildev/editor/ui';
</script>

<template>
  <SlashCommand :items="defaultSlashCommands" />
</template>

<script setup lang="ts">
import { defaultSlashCommands, SlashCommand } from '@vuemaildev/editor/ui';
</script>

<template>
  <SlashCommand
    v-slot="{ items, query, selectedIndex, onSelect }"
    :items="defaultSlashCommands"
  >
    <div class="my-command-list">
      <button
        v-for="(item, index) in items"
        :key="item.title"
        type="button"
        class="my-command-item"
        :data-selected="index === selectedIndex"
        @click="onSelect(index)"
      >
        <!-- the icons of the default commands are elements, made with h() -->
        <component :is="() => item.icon" />
        <div>
          <span>{{ item.title }}</span>
          <span>{{ item.description }}</span>
        </div>
      </button>
      <div v-if="items.length === 0" class="my-command-empty">
        No results for "{{ query }}"
      </div>
    </div>
  </SlashCommand>
</template>

<script setup lang="ts">
import {
  defaultSlashCommands,
  SlashCommand,
  type SlashCommandItem,
} from '@vuemaildev/editor/ui';
import { ImageIcon } from 'lucide-vue-next';
import { h } from 'vue';

const customCommands: SlashCommandItem[] = [
  ...defaultSlashCommands,
  {
    title: 'Image',
    description: 'Insert an image',
    searchTerms: ['photo', 'picture', 'img'],
    icon: h(ImageIcon, { size: 18 }),
    category: 'Media',
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setImage({ src: '' }).run();
    },
  },
];
</script>

<template>
  <SlashCommand :items="customCommands" />
</template>

interface SlashCommandItem {
  title: string;
  description: string;
  searchTerms?: string[];
  icon: VNodeChild | Component;
  category: string;
  command: (props: { editor: Editor; range: Range }) => void;
}

interface SlashCommandRenderProps {
  items: SlashCommandItem[];
  query: string;
  selectedIndex: number;
  onSelect: (index: number) => void;
}

import '@vuemaildev/editor/styles/slash-command.css';