关于vue3整合tiptap的slash菜单的ts支持

首先声明,这不是一篇技术文章

最近在捣鼓tiptap编辑器,tiptap构建的风格还是比较现代的,而且api简单,官方文档清晰明了,这就是我选择它的原因

注意: tiptap并不支持markdown,而且三方插件的表现也差强人意,但是对于普通的用户(区别于程序员),我觉得markdown并不是特别重要

整合tiptap的slash菜单,官方是给了vue的案例的,但是,官方给的案例是js的方式,而且vue是v2的写法,项目是v3+ts的,所以遇到一些问题,这就是这篇文章的主要目的,直接上代码

ts 复制代码

// 这个文件是创建一个插件,通过扩展Suggestion的插件而来
// commands.ts
import { Extension } from '@tiptap/core'
import Suggestion from '@tiptap/suggestion'
import { Editor, Range } from '@tiptap/vue-3'

export default Extension.create({
    name: 'slashMenu',

    addOptions() {
        return {
            suggestion: {
                char: '/',
                command: ({ editor, range, props }: { editor: Editor, range: Range, props: any }) => {
                    props.command({ editor, range })
                },
            },
        }
    },

    addProseMirrorPlugins() {
        return [
            Suggestion({
                editor: this.editor,
                ...this.options.suggestion,
            }),
        ]
    },
})

ts 复制代码

// 这个文件是主要的实现方法,其中遇到一些问题,根据源码的ts类型实现有些不知名的问题,直接使用any类型了
// suggestion.ts

import { Editor, Range, VueRenderer } from '@tiptap/vue-3'
import tippy from 'tippy.js'

import CommandsList from './CommandsList.vue'

export default {
    items: ({ query }: { query: string }) => {
        return [
            {
                title: 'Heading 1',
                command: ({ editor, range }: { editor: Editor, range: Range, props: any }) => {
                    editor
                        .chain()
                        .focus()
                        .deleteRange(range)
                        .setNode('heading', { level: 1 })
                        .run()
                },
            },
            {
                title: 'Heading 2',
                command: ({ editor, range }: { editor: Editor, range: Range, props: any }) => {
                    editor
                        .chain()
                        .focus()
                        .deleteRange(range)
                        .setNode('heading', { level: 2 })
                        .run()
                },
            },
            {
                title: 'Bold',
                command: ({ editor, range }: { editor: Editor, range: Range, props: any }) => {
                    editor
                        .chain()
                        .focus()
                        .deleteRange(range)
                        .setMark('bold')
                        .run()
                },
            },
            {
                title: 'Italic',
                command: ({ editor, range }: { editor: Editor, range: Range, props: any }) => {
                    editor
                        .chain()
                        .focus()
                        .deleteRange(range)
                        .setMark('italic')
                        .run()
                },
            },
        ].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
    },

    render: () => {
        let component: any
        let popup: any

        return {
            onStart: (props: any) => {
                component = new VueRenderer(CommandsList, {
                    props,
                    editor: props.editor,
                })

                if (!props.clientRect) {
                    return
                }

                const { $anchor } = props.editor.view.state.selection;
                const selection = props.editor.state.selection;

                // 获取选区的上下文
                const context = selection.$from.depth ? selection.$from.node(selection.$from.depth - 1) : null;
                const listItem = context && context.type.name === 'listItem';
                const isCursorInParagraph = $anchor && $anchor.parent.type.name === 'paragraph';
                if (!props.clientRect || !isCursorInParagraph || listItem) {
                    return;
                }

                popup = tippy("body", {
                    getReferenceClientRect: props.clientRect,
                    appendTo: () => document.body,
                    content: component.element,
                    showOnCreate: true,
                    interactive: true,
                    trigger: 'manual',
                    placement: 'bottom-start'
                })
            },

            onUpdate(props: any) {
                component.updateProps(props);
                if (!props.clientRect || props.text !== '/') {
                    popup[0].hide();
                    return;
                }
                if (props.text === '/') {
                    popup[0].show();
                }
                popup[0].setProps({
                    getReferenceClientRect: props.clientRect,
                });
            },

            onKeyDown(props: any) {
                if (props.event.key === 'Escape') {
                    popup[0].hide()

                    return true
                }

                return component.ref?.onKeyDown(props.event)
            },

            onExit() {
                popup[0].destroy()
                component.destroy()
            },
        }
    },
}

vue 复制代码

// 这就是最主要的vue文件,显示菜单与键盘导航
// CommandsList.vue

<template>
    <div class="w-max flex shadow rounded py-1">
        <div
            ref="scrollingDiv"
            class="flex flex-col items-center max-h-52 h-max overflow-y-auto bg-background"
        >
            <button
                class="tippy-item flex items-center p-1 pr-12 text-xs hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors rounded cursor-pointer w-full group"
                :class="{ 'bg-zinc-200 dark:bg-zinc-700': index === selectedIndex }" v-for="(item, index) in items"
                :key="index" @click="selectItem(index)"
                >
                {{ item.title }}
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Editor, Range } from '@tiptap/vue-3';
import { ref } from 'vue'

const webProps = defineProps<{
    items: {
        title: string,
        command: { editor: Editor, range: Range, props: any }
    }[],
    command: Function
}>()

const selectedIndex = ref(0)
const scrollingDiv = ref<HTMLElement>()

const onKeyDown = (e: any) => {
    if (e.key === 'ArrowUp') {
        upHandler()
        return true
    }

    if (e.key === 'ArrowDown') {
        downHandler()
        return true
    }

    if (e.key === 'Enter') {
        enterHandler()
        return true
    }

    return false
}

const upHandler = () => {
    selectedIndex.value = ((selectedIndex.value + webProps.items.length) - 1) % webProps.items.length
    scrollDiv()
}

const downHandler = () => {
    selectedIndex.value = (selectedIndex.value + 1) % webProps.items.length
    scrollDiv()
}

const scrollDiv = () => {
    let buttons = scrollingDiv.value?.querySelectorAll('button');
    let button = buttons![selectedIndex.value];
    button.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
}

const enterHandler = () => {
    selectItem(selectedIndex.value)
}

const selectItem = (index: number) => {
    const item = webProps.items[index]

    if (item) {
        webProps.command(item)
    }
}

defineExpose({ onKeyDown })
</script>

<style lang="scss">
/* Dropdown menu */
.dropdown-menu {
    overflow: auto;
    position: relative;

    button {
        align-items: center;
        background-color: transparent;
        display: flex;
        gap: 0.25rem;
        text-align: left;
        width: 100%;

        &:hover,
        &:hover.is-selected {
            @apply bg-accent;
        }

        &.is-selected {
            @apply bg-accent;
        }
    }
}
</style>