@srcker/editor-vue-next 1.0.1

package/src/Button/LineHeightButton.vue

@@ -0,0 +1,88 @@
+<template>
+
+<div class="dropdown-button line-height-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 576 512">
+                <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M40 32C17.9 32 0 49.9 0 72l0 56c0 17.7 14.3 32 32 32s32-14.3 32-32l0-32 64 0 0 320-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0 0-320 64 0 0 32c0 17.7 14.3 32 32 32s32-14.3 32-32l0-56c0-22.1-17.9-40-40-40L40 32zM438.6 361.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4 0-229.5 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64c-6-6-14.1-9.4-22.6-9.4s-16.6 3.4-22.6 9.4l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4 0 229.5-9.4-9.4z"/>
+            </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', { lineHeight: size }) }"
+                @click="setLineHeight(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 = ['1.0', '1.2', '1.5', '2.0', '2.5', '3.0']
+
+const setLineHeight = (size) => {
+    props.editor.chain().focus().toggleTextStyle({ lineHeight: size }).run()
+    isOpen.value = false
+}
+
+
+
+const sizeLabel = computed(() => {
+    if (!props.editor) return '16px'
+    const size = props.editor.getAttributes('textStyle').lineHeight
+    return size || '1.5'
+})
+
+
+
+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: 45px;
+}
+</style>

package/src/Button/LineHeightButton.vue.js

@@ -0,0 +1,131 @@
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+const isOpen = ref(false);
+const wrapperRef = ref(null);
+const sizes = ['1.0', '1.2', '1.5', '2.0', '2.5', '3.0'];
+const setLineHeight = (size) => {
+    props.editor.chain().focus().toggleTextStyle({ lineHeight: size }).run();
+    isOpen.value = false;
+};
+const sizeLabel = computed(() => {
+    if (!props.editor)
+        return '16px';
+    const size = props.editor.getAttributes('textStyle').lineHeight;
+    return size || '1.5';
+});
+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 line-height-button" },
+    ref: "wrapperRef",
+    ...{ class: ({ 'is-open': __VLS_ctx.isOpen }) },
+});
+/** @type {__VLS_StyleScopedClasses['dropdown-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['line-height-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 576 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M40 32C17.9 32 0 49.9 0 72l0 56c0 17.7 14.3 32 32 32s32-14.3 32-32l0-32 64 0 0 320-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0 0-320 64 0 0 32c0 17.7 14.3 32 32 32s32-14.3 32-32l0-56c0-22.1-17.9-40-40-40L40 32zM438.6 361.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4 0-229.5 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64c-6-6-14.1-9.4-22.6-9.4s-16.6 3.4-22.6 9.4l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4 0 229.5-9.4-9.4z",
+});
+__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.setLineHeight(size);
+                // @ts-ignore
+                [isOpen, sizeLabel, sizes, setLineHeight,];
+            } },
+        ...{ class: "item" },
+        key: (size),
+        ...{ class: ({ 'is-selected': __VLS_ctx.editor.isActive('textStyle', { lineHeight: 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/LinkButton.vue

@@ -0,0 +1,44 @@
+<template>
+    <button
+        class="icon-button"
+        :class="{ 'active': editor.isActive('link') }"
+        @click="setLink" >
+
+        <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="M419.5 96c-16.6 0-32.7 4.5-46.8 12.7-15.8-16-34.2-29.4-54.5-39.5 28.2-24 64.1-37.2 101.3-37.2 86.4 0 156.5 70 156.5 156.5 0 41.5-16.5 81.3-45.8 110.6l-71.1 71.1c-29.3 29.3-69.1 45.8-110.6 45.8-86.4 0-156.5-70-156.5-156.5 0-1.5 0-3 .1-4.5 .5-17.7 15.2-31.6 32.9-31.1s31.6 15.2 31.1 32.9c0 .9 0 1.8 0 2.6 0 51.1 41.4 92.5 92.5 92.5 24.5 0 48-9.7 65.4-27.1l71.1-71.1c17.3-17.3 27.1-40.9 27.1-65.4 0-51.1-41.4-92.5-92.5-92.5zM275.2 173.3c-1.9-.8-3.8-1.9-5.5-3.1-12.6-6.5-27-10.2-42.1-10.2-24.5 0-48 9.7-65.4 27.1L91.1 258.2c-17.3 17.3-27.1 40.9-27.1 65.4 0 51.1 41.4 92.5 92.5 92.5 16.5 0 32.6-4.4 46.7-12.6 15.8 16 34.2 29.4 54.6 39.5-28.2 23.9-64 37.2-101.3 37.2-86.4 0-156.5-70-156.5-156.5 0-41.5 16.5-81.3 45.8-110.6l71.1-71.1c29.3-29.3 69.1-45.8 110.6-45.8 86.6 0 156.5 70.6 156.5 156.9 0 1.3 0 2.6 0 3.9-.4 17.7-15.1 31.6-32.8 31.2s-31.6-15.1-31.2-32.8c0-.8 0-1.5 0-2.3 0-33.7-18-63.3-44.8-79.6z"/>
+            </svg>
+        </div>
+
+        <div class="tips">设置超链接</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+
+const setLink = () => {
+
+    if(props.editor.isActive('link')){
+        props.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+    }else{
+        const previousUrl = props.editor.getAttributes('link').href
+        const url = window.prompt('请输入链接 URL', previousUrl)
+        if (url === null) return
+        if (url === '') {
+            props.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+            return
+        }
+        props.editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+    }
+    
+}
+
+</script>

package/src/Button/LinkButton.vue.js

@@ -0,0 +1,69 @@
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+});
+const setLink = () => {
+    if (props.editor.isActive('link')) {
+        props.editor.chain().focus().extendMarkRange('link').unsetLink().run();
+    }
+    else {
+        const previousUrl = props.editor.getAttributes('link').href;
+        const url = window.prompt('请输入链接 URL', previousUrl);
+        if (url === null)
+            return;
+        if (url === '') {
+            props.editor.chain().focus().extendMarkRange('link').unsetLink().run();
+            return;
+        }
+        props.editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+    }
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (__VLS_ctx.setLink) },
+    ...{ class: "icon-button" },
+    ...{ class: ({ 'active': __VLS_ctx.editor.isActive('link') }) },
+});
+/** @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: "M419.5 96c-16.6 0-32.7 4.5-46.8 12.7-15.8-16-34.2-29.4-54.5-39.5 28.2-24 64.1-37.2 101.3-37.2 86.4 0 156.5 70 156.5 156.5 0 41.5-16.5 81.3-45.8 110.6l-71.1 71.1c-29.3 29.3-69.1 45.8-110.6 45.8-86.4 0-156.5-70-156.5-156.5 0-1.5 0-3 .1-4.5 .5-17.7 15.2-31.6 32.9-31.1s31.6 15.2 31.1 32.9c0 .9 0 1.8 0 2.6 0 51.1 41.4 92.5 92.5 92.5 24.5 0 48-9.7 65.4-27.1l71.1-71.1c17.3-17.3 27.1-40.9 27.1-65.4 0-51.1-41.4-92.5-92.5-92.5zM275.2 173.3c-1.9-.8-3.8-1.9-5.5-3.1-12.6-6.5-27-10.2-42.1-10.2-24.5 0-48 9.7-65.4 27.1L91.1 258.2c-17.3 17.3-27.1 40.9-27.1 65.4 0 51.1 41.4 92.5 92.5 92.5 16.5 0 32.6-4.4 46.7-12.6 15.8 16 34.2 29.4 54.6 39.5-28.2 23.9-64 37.2-101.3 37.2-86.4 0-156.5-70-156.5-156.5 0-41.5 16.5-81.3 45.8-110.6l71.1-71.1c29.3-29.3 69.1-45.8 110.6-45.8 86.6 0 156.5 70.6 156.5 156.9 0 1.3 0 2.6 0 3.9-.4 17.7-15.1 31.6-32.8 31.2s-31.6-15.1-31.2-32.8c0-.8 0-1.5 0-2.3 0-33.7-18-63.3-44.8-79.6z",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "tips" },
+});
+/** @type {__VLS_StyleScopedClasses['tips']} */ ;
+// @ts-ignore
+[setLink, editor,];
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default {};

package/src/Button/OrderedListButton.vue

@@ -0,0 +1,121 @@
+<template>
+
+<div class="dropdown-button list-button" ref="wrapperRef">
+    <div class="trigger" @click="isOpen = !isOpen" :class="{ 'open': isOpen, 'active': editor.isActive('orderedList') }">
+        <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="M0 72C0 58.8 10.7 48 24 48l48 0c13.3 0 24 10.7 24 24l0 104 24 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-80-24 0C10.7 96 0 85.3 0 72zM30.4 301.2C41.8 292.6 55.7 288 70 288l4.9 0c33.7 0 61.1 27.4 61.1 61.1 0 19.6-9.4 37.9-25.2 49.4l-24 17.5 33.2 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-90.7 0C13.1 464 0 450.9 0 434.7 0 425.3 4.5 416.5 12.1 411l70.5-51.3c3.4-2.5 5.4-6.4 5.4-10.6 0-7.2-5.9-13.1-13.1-13.1L70 336c-3.9 0-7.7 1.3-10.8 3.6L38.4 355.2c-10.6 8-25.6 5.8-33.6-4.8S-1 324.8 9.6 316.8l20.8-15.6zM224 64l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
+        </div>
+    </div>
+
+    <transition name="dropdown">
+        <div class="dropdown" v-show="isOpen">
+            <div 
+                class="item" 
+                v-for="item in list" 
+                :key="item.value"
+                :class="{ 'is-selected': editor.isActive('orderedList') && editor.getAttributes('orderedList').listStyleType === item.value }"
+                @click="setOrderedListStyle(item.value)">
+                <div class="icon">{{item.icon}}</div>
+                <span class="text">{{ item.label }}</span>
+            </div>
+        </div>
+    </transition>
+</div>
+
+</template>
+
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+
+const isOpen = ref(false)
+const wrapperRef = ref(null)
+
+const list = [
+    { icon: '1', label: '1. 2. 3.', value: 'decimal' },
+    { icon: '01', label: '01. 02. 03.', value: 'decimal-leading-zero' },
+    { icon: 'a', label: 'a. b. c.', value: 'lower-alpha' },
+    { icon: 'A', label: 'A. B. C.', value: 'upper-alpha' },
+    { icon: 'i', label: 'i. ii. iii.', value: 'lower-roman' },
+    { icon: 'I', label: 'I. II. III.', value: 'upper-roman' },
+    { icon: '一', label: '一 二 三', value: 'cjk-ideographic' },
+    { icon: '壹', label: '壹 贰 叁', value: 'simp-chinese-formal' },
+    { icon: '', label: '取消列表', value: 'none' }
+]
+
+
+
+
+const setOrderedListStyle = (value) => {
+    if(props.editor.isActive('orderedList') && value != 'none'){
+        props.editor.chain().focus()
+            .updateAttributes('orderedList', { listStyleType: value })
+            .run()
+    }else{
+        props.editor.chain().focus()
+            .toggleOrderedList()
+            .updateAttributes('orderedList', { listStyleType: value })
+            .run()
+    }
+    isOpen.value = false
+}
+
+
+
+
+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="scss" scoped>
+
+.list-button { 
+    width: auto;
+    .dropdown {
+        .item {
+            .icon {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                margin-right: 5px;
+                width: 15px;
+                height: 15px;
+                border-radius: 3px;
+                font-size: 12px;
+                font-weight: bold;
+                transform: scale(0.8);
+                padding: 0;
+                background: rgba($color: #000000, $alpha: 0.2);
+            }
+        }
+    }
+}
+
+</style>
+
+
+

package/src/Button/OrderedListButton.vue.js

@@ -0,0 +1,146 @@
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+const isOpen = ref(false);
+const wrapperRef = ref(null);
+const list = [
+    { icon: '1', label: '1. 2. 3.', value: 'decimal' },
+    { icon: '01', label: '01. 02. 03.', value: 'decimal-leading-zero' },
+    { icon: 'a', label: 'a. b. c.', value: 'lower-alpha' },
+    { icon: 'A', label: 'A. B. C.', value: 'upper-alpha' },
+    { icon: 'i', label: 'i. ii. iii.', value: 'lower-roman' },
+    { icon: 'I', label: 'I. II. III.', value: 'upper-roman' },
+    { icon: '一', label: '一 二 三', value: 'cjk-ideographic' },
+    { icon: '壹', label: '壹 贰 叁', value: 'simp-chinese-formal' },
+    { icon: '', label: '取消列表', value: 'none' }
+];
+const setOrderedListStyle = (value) => {
+    if (props.editor.isActive('orderedList') && value != 'none') {
+        props.editor.chain().focus()
+            .updateAttributes('orderedList', { listStyleType: value })
+            .run();
+    }
+    else {
+        props.editor.chain().focus()
+            .toggleOrderedList()
+            .updateAttributes('orderedList', { listStyleType: value })
+            .run();
+    }
+    isOpen.value = false;
+};
+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 list-button" },
+    ref: "wrapperRef",
+});
+/** @type {__VLS_StyleScopedClasses['dropdown-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['list-button']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.isOpen = !__VLS_ctx.isOpen;
+            // @ts-ignore
+            [isOpen, isOpen,];
+        } },
+    ...{ class: "trigger" },
+    ...{ class: ({ 'open': __VLS_ctx.isOpen, 'active': __VLS_ctx.editor.isActive('orderedList') }) },
+});
+/** @type {__VLS_StyleScopedClasses['trigger']} */ ;
+/** @type {__VLS_StyleScopedClasses['open']} */ ;
+/** @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 512 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M0 72C0 58.8 10.7 48 24 48l48 0c13.3 0 24 10.7 24 24l0 104 24 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-80-24 0C10.7 96 0 85.3 0 72zM30.4 301.2C41.8 292.6 55.7 288 70 288l4.9 0c33.7 0 61.1 27.4 61.1 61.1 0 19.6-9.4 37.9-25.2 49.4l-24 17.5 33.2 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-90.7 0C13.1 464 0 450.9 0 434.7 0 425.3 4.5 416.5 12.1 411l70.5-51.3c3.4-2.5 5.4-6.4 5.4-10.6 0-7.2-5.9-13.1-13.1-13.1L70 336c-3.9 0-7.7 1.3-10.8 3.6L38.4 355.2c-10.6 8-25.6 5.8-33.6-4.8S-1 324.8 9.6 316.8l20.8-15.6zM224 64l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z",
+});
+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 [item] of __VLS_vFor((__VLS_ctx.list))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ onClick: (...[$event]) => {
+                __VLS_ctx.setOrderedListStyle(item.value);
+                // @ts-ignore
+                [isOpen, isOpen, editor, list, setOrderedListStyle,];
+            } },
+        ...{ class: "item" },
+        key: (item.value),
+        ...{ class: ({ 'is-selected': __VLS_ctx.editor.isActive('orderedList') && __VLS_ctx.editor.getAttributes('orderedList').listStyleType === item.value }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['item']} */ ;
+    /** @type {__VLS_StyleScopedClasses['is-selected']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "icon" },
+    });
+    /** @type {__VLS_StyleScopedClasses['icon']} */ ;
+    (item.icon);
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "text" },
+    });
+    /** @type {__VLS_StyleScopedClasses['text']} */ ;
+    (item.label);
+    // @ts-ignore
+    [editor, 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/RedoButton.vue

@@ -0,0 +1,29 @@
+<template>
+    <button
+        class="icon-button"
+        :disabled="!editor.can().redo()"
+        @click="editor.chain().focus().redo().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="M488 192l-144 0c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l46.7-46.7c-75.3-58.6-184.3-53.3-253.5 15.9-75 75-75 196.5 0 271.5s196.5 75 271.5 0c8.2-8.2 15.5-16.9 21.9-26.1 10.1-14.5 30.1-18 44.6-7.9s18 30.1 7.9 44.6c-8.5 12.2-18.2 23.8-29.1 34.7-100 100-262.1 100-362 0S-25 175 75 75c94.3-94.3 243.7-99.6 344.3-16.2L471 7c6.9-6.9 17.2-8.9 26.2-5.2S512 14.3 512 24l0 144c0 13.3-10.7 24-24 24z"/>
+            </svg>
+        </div>
+
+        <div class="tips">撤销</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+
+
+</script>
+

package/src/Button/RedoButton.vue.js

@@ -0,0 +1,55 @@
+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().redo().run();
+            // @ts-ignore
+            [editor,];
+        } },
+    ...{ class: "icon-button" },
+    disabled: (!__VLS_ctx.editor.can().redo()),
+});
+/** @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: "M488 192l-144 0c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l46.7-46.7c-75.3-58.6-184.3-53.3-253.5 15.9-75 75-75 196.5 0 271.5s196.5 75 271.5 0c8.2-8.2 15.5-16.9 21.9-26.1 10.1-14.5 30.1-18 44.6-7.9s18 30.1 7.9 44.6c-8.5 12.2-18.2 23.8-29.1 34.7-100 100-262.1 100-362 0S-25 175 75 75c94.3-94.3 243.7-99.6 344.3-16.2L471 7c6.9-6.9 17.2-8.9 26.2-5.2S512 14.3 512 24l0 144c0 13.3-10.7 24-24 24z",
+});
+__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 {};