@srcker/editor-vue-next 1.0.1

package/src/Button/CodeBlockButton.vue

@@ -0,0 +1,28 @@
+<template>
+    <button
+        class="icon-button"
+        :class="{ 'active': editor.isActive('codeBlock') }"
+        @click="editor.chain().focus().toggleCodeBlock().run()" >
+
+        <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+                <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M64 96c0-35.3 28.7-64 64-64l384 0c35.3 0 64 28.7 64 64l0 240-64 0 0-240-384 0 0 240-64 0 0-240zM0 403.2C0 392.6 8.6 384 19.2 384l601.6 0c10.6 0 19.2 8.6 19.2 19.2 0 42.4-34.4 76.8-76.8 76.8L76.8 480C34.4 480 0 445.6 0 403.2zM281 209l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-48-48c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM393 175l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"/>
+            </svg>
+        </div>
+
+        <div class="tips">代码块</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+
+
+</script>

package/src/Button/CodeBlockButton.vue.js

@@ -0,0 +1,56 @@
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+});
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.editor.chain().focus().toggleCodeBlock().run();
+            // @ts-ignore
+            [editor,];
+        } },
+    ...{ class: "icon-button" },
+    ...{ class: ({ 'active': __VLS_ctx.editor.isActive('codeBlock') }) },
+});
+/** @type {__VLS_StyleScopedClasses['icon-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['active']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "icon" },
+});
+/** @type {__VLS_StyleScopedClasses['icon']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 640 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M64 96c0-35.3 28.7-64 64-64l384 0c35.3 0 64 28.7 64 64l0 240-64 0 0-240-384 0 0 240-64 0 0-240zM0 403.2C0 392.6 8.6 384 19.2 384l601.6 0c10.6 0 19.2 8.6 19.2 19.2 0 42.4-34.4 76.8-76.8 76.8L76.8 480C34.4 480 0 445.6 0 403.2zM281 209l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-48-48c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM393 175l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "tips" },
+});
+/** @type {__VLS_StyleScopedClasses['tips']} */ ;
+// @ts-ignore
+[editor,];
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default {};

package/src/Button/CodeButton.vue

@@ -0,0 +1,30 @@
+<template>
+    <button
+        class="icon-button"
+        :class="{ 'active': editor.isActive('code') }"
+        @click="editor.chain().focus().toggleCode().run()" >
+
+        <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+                <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M360.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm64.6 136.1c-12.5 12.5-12.5 32.8 0 45.3l73.4 73.4-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0zm-274.7 0c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 150.6 182.6c12.5-12.5 12.5-32.8 0-45.3z"/>
+            </svg>
+        </div>
+
+        <div class="tips">行内代码</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+
+
+</script>
+
+

package/src/Button/CodeButton.vue.js

@@ -0,0 +1,56 @@
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+});
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.editor.chain().focus().toggleCode().run();
+            // @ts-ignore
+            [editor,];
+        } },
+    ...{ class: "icon-button" },
+    ...{ class: ({ 'active': __VLS_ctx.editor.isActive('code') }) },
+});
+/** @type {__VLS_StyleScopedClasses['icon-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['active']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "icon" },
+});
+/** @type {__VLS_StyleScopedClasses['icon']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 576 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M360.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm64.6 136.1c-12.5 12.5-12.5 32.8 0 45.3l73.4 73.4-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0zm-274.7 0c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 150.6 182.6c12.5-12.5 12.5-32.8 0-45.3z",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "tips" },
+});
+/** @type {__VLS_StyleScopedClasses['tips']} */ ;
+// @ts-ignore
+[editor,];
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default {};

package/src/Button/FontSizeButton.vue

@@ -0,0 +1,85 @@
+<template>
+
+<div class="dropdown-button font-button" ref="wrapperRef" :class="{ 'is-open': isOpen }">
+    <div class="trigger" @click="isOpen = !isOpen">
+
+        <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l128 0 0 352c0 17.7 14.3 32 32 32s32-14.3 32-32l0-352 128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32z"/>
+            </svg>
+        </div>
+        <span class="label">{{ sizeLabel }}</span>
+    </div>
+
+    <transition name="dropdown">
+        <div class="dropdown" v-show="isOpen">
+            <div 
+                class="item" 
+                v-for="size in sizes" 
+                :key="size"
+                :class="{ 'is-selected': editor.isActive('textStyle', { fontSize: size }) }"
+                @click="setFontSize(size)">
+                <span class="text">{{ size }}</span>
+            </div>
+        </div>
+    </transition>
+</div>
+
+</template>
+
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+
+const isOpen = ref(false)
+const wrapperRef = ref(null)
+
+const sizes = ['12px', '14px', '16px', '18px', '20px', '24px', '30px', '36px', '48px']
+
+const setFontSize = (size) => {
+    props.editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
+    isOpen.value = false
+}
+
+
+
+const sizeLabel = computed(() => {
+    if (!props.editor) return '16px'
+    const size = props.editor.getAttributes('textStyle').fontSize
+    return size || '16px'
+})
+
+
+
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+const handleClickOutside = (e) => {
+	if (!wrapperRef.value) return
+
+	if (!wrapperRef.value.contains(e.target)) {
+		isOpen.value = false
+	}
+}
+
+onMounted(() => {
+	document.addEventListener('mousedown', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('mousedown', handleClickOutside)
+})
+
+</script>
+
+
+<style lang="css" scoped>
+.trigger{
+    width: 55px;
+}
+</style>

package/src/Button/FontSizeButton.vue.js

@@ -0,0 +1,131 @@
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+const isOpen = ref(false);
+const wrapperRef = ref(null);
+const sizes = ['12px', '14px', '16px', '18px', '20px', '24px', '30px', '36px', '48px'];
+const setFontSize = (size) => {
+    props.editor.chain().focus().setMark('textStyle', { fontSize: size }).run();
+    isOpen.value = false;
+};
+const sizeLabel = computed(() => {
+    if (!props.editor)
+        return '16px';
+    const size = props.editor.getAttributes('textStyle').fontSize;
+    return size || '16px';
+});
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+});
+const handleClickOutside = (e) => {
+    if (!wrapperRef.value)
+        return;
+    if (!wrapperRef.value.contains(e.target)) {
+        isOpen.value = false;
+    }
+};
+onMounted(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+});
+onBeforeUnmount(() => {
+    document.removeEventListener('mousedown', handleClickOutside);
+});
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "dropdown-button font-button" },
+    ref: "wrapperRef",
+    ...{ class: ({ 'is-open': __VLS_ctx.isOpen }) },
+});
+/** @type {__VLS_StyleScopedClasses['dropdown-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['font-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['is-open']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.isOpen = !__VLS_ctx.isOpen;
+            // @ts-ignore
+            [isOpen, isOpen, isOpen,];
+        } },
+    ...{ class: "trigger" },
+});
+/** @type {__VLS_StyleScopedClasses['trigger']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "icon" },
+});
+/** @type {__VLS_StyleScopedClasses['icon']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 384 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l128 0 0 352c0 17.7 14.3 32 32 32s32-14.3 32-32l0-352 128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32z",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+    ...{ class: "label" },
+});
+/** @type {__VLS_StyleScopedClasses['label']} */ ;
+(__VLS_ctx.sizeLabel);
+let __VLS_0;
+/** @ts-ignore @type {typeof __VLS_components.transition | typeof __VLS_components.Transition | typeof __VLS_components.transition | typeof __VLS_components.Transition} */
+transition;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    name: "dropdown",
+}));
+const __VLS_2 = __VLS_1({
+    name: "dropdown",
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+const { default: __VLS_5 } = __VLS_3.slots;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "dropdown" },
+});
+__VLS_asFunctionalDirective(__VLS_directives.vShow, {})(null, { ...__VLS_directiveBindingRestFields, value: (__VLS_ctx.isOpen) }, null, null);
+/** @type {__VLS_StyleScopedClasses['dropdown']} */ ;
+for (const [size] of __VLS_vFor((__VLS_ctx.sizes))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ onClick: (...[$event]) => {
+                __VLS_ctx.setFontSize(size);
+                // @ts-ignore
+                [isOpen, sizeLabel, sizes, setFontSize,];
+            } },
+        ...{ class: "item" },
+        key: (size),
+        ...{ class: ({ 'is-selected': __VLS_ctx.editor.isActive('textStyle', { fontSize: size }) }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['item']} */ ;
+    /** @type {__VLS_StyleScopedClasses['is-selected']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "text" },
+    });
+    /** @type {__VLS_StyleScopedClasses['text']} */ ;
+    (size);
+    // @ts-ignore
+    [editor,];
+}
+// @ts-ignore
+[];
+var __VLS_3;
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default {};

package/src/Button/FormatButton.vue

@@ -0,0 +1,25 @@
+<template>
+    <button
+        class="icon-button"
+        @click="editor.chain().focus().unsetAllMarks().run()" >
+        <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M162.4 6c-1.5-3.6-5-6-8.9-6l-19 0c-3.9 0-7.5 2.4-8.9 6L104.9 57.7c-3.2 8-14.6 8-17.8 0L66.4 6c-1.5-3.6-5-6-8.9-6L48 0C21.5 0 0 21.5 0 48l0 208 384 0 0-208c0-26.5-21.5-48-48-48L230.5 0c-3.9 0-7.5 2.4-8.9 6L200.9 57.7c-3.2 8-14.6 8-17.8 0L162.4 6zM0 304l0 16c0 35.3 28.7 64 64 64l64 0 0 64c0 35.3 28.7 64 64 64s64-28.7 64-64l0-64 64 0c35.3 0 64-28.7 64-64l0-16-384 0zM192 464c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z"/>
+            </svg>
+        </div>
+        <div class="tips">清除格式</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+
+
+</script>

package/src/Button/FormatButton.vue.js

@@ -0,0 +1,54 @@
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+});
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.editor.chain().focus().unsetAllMarks().run();
+            // @ts-ignore
+            [editor,];
+        } },
+    ...{ class: "icon-button" },
+});
+/** @type {__VLS_StyleScopedClasses['icon-button']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "icon" },
+});
+/** @type {__VLS_StyleScopedClasses['icon']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M162.4 6c-1.5-3.6-5-6-8.9-6l-19 0c-3.9 0-7.5 2.4-8.9 6L104.9 57.7c-3.2 8-14.6 8-17.8 0L66.4 6c-1.5-3.6-5-6-8.9-6L48 0C21.5 0 0 21.5 0 48l0 208 384 0 0-208c0-26.5-21.5-48-48-48L230.5 0c-3.9 0-7.5 2.4-8.9 6L200.9 57.7c-3.2 8-14.6 8-17.8 0L162.4 6zM0 304l0 16c0 35.3 28.7 64 64 64l64 0 0 64c0 35.3 28.7 64 64 64s64-28.7 64-64l0-64 64 0c35.3 0 64-28.7 64-64l0-16-384 0zM192 464c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "tips" },
+});
+/** @type {__VLS_StyleScopedClasses['tips']} */ ;
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default {};

package/src/Button/HeadingButton.vue

@@ -0,0 +1,103 @@
+<template>
+
+<div class="dropdown-button heading-button" ref="wrapperRef" :class="{ 'is-open': isOpen }">
+    <div class="trigger" @click="isOpen = !isOpen">
+        <div class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M0 64C0 46.3 14.3 32 32 32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-16 0 0 112 224 0 0-112-16 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-16 0 0 320 16 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l16 0 0-144-224 0 0 144 16 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l16 0 0-320-16 0C14.3 96 0 81.7 0 64z"/>
+            </svg>
+        </div>
+        <span class="label">{{ headingLabel }}</span>
+    </div>
+
+
+    <transition name="dropdown">
+        <div class="dropdown" v-show="isOpen">
+            <div 
+                class="item" :class="{ 'is-selected': editor.isActive('paragraph') }" @click="setParagraph()">
+                <span class="icon">H</span>
+                <span class="text">正文</span>
+            </div>
+            <div 
+                class="item" 
+                v-for="level in [1, 2, 3, 4, 5]" 
+                :key="level"
+                :class="{ 'is-selected': editor.isActive('heading', { level }) }"
+                @click="setHeading(level)">
+                <span class="icon">H{{ level }}</span>
+                <span class="text" :style="{ fontSize: sizes[level], fontWeight: 'bold' }">标题 {{ level }}</span>
+            </div>
+        </div>
+    </transition>
+
+    
+</div>
+
+</template>
+
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+
+const isOpen = ref(false)
+const wrapperRef = ref(null)
+
+const sizes = { 1: '24px', 2: '20px', 3: '18px', 4: '16px', 5: '14px' } 
+
+const setHeading = (level) => {
+    props.editor.chain().focus().toggleHeading({ level: level }).run()
+    isOpen.value = false
+}
+
+const setParagraph = () => {
+    props.editor.chain().focus().setParagraph().run()
+    isOpen.value = false
+}
+
+const headingLabel = computed(() => {
+
+    if (!props.editor) return '正文'
+
+    for (let i = 1; i <= 5; i++) {
+        if (props.editor.isActive('heading', { level: i })) {
+            return `标题${i}`
+        }
+    }
+
+	return '正文'
+})
+
+
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+const handleClickOutside = (e) => {
+	if (!wrapperRef.value) return
+
+	if (!wrapperRef.value.contains(e.target)) {
+		isOpen.value = false
+	}
+}
+
+onMounted(() => {
+	document.addEventListener('mousedown', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('mousedown', handleClickOutside)
+})
+
+</script>
+
+
+
+<style lang="css" scoped>
+.trigger{
+    width: 60px;
+}
+</style>