@srcker/editor-vue-next 1.0.1

package/src/Button/HeadingButton.vue.js

@@ -0,0 +1,164 @@
+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);
+});
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "dropdown-button heading-button" },
+    ref: "wrapperRef",
+    ...{ class: ({ 'is-open': __VLS_ctx.isOpen }) },
+});
+/** @type {__VLS_StyleScopedClasses['dropdown-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['heading-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 448 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.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",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+    ...{ class: "label" },
+});
+/** @type {__VLS_StyleScopedClasses['label']} */ ;
+(__VLS_ctx.headingLabel);
+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']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.setParagraph();
+            // @ts-ignore
+            [isOpen, headingLabel, setParagraph,];
+        } },
+    ...{ class: "item" },
+    ...{ class: ({ 'is-selected': __VLS_ctx.editor.isActive('paragraph') }) },
+});
+/** @type {__VLS_StyleScopedClasses['item']} */ ;
+/** @type {__VLS_StyleScopedClasses['is-selected']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+    ...{ class: "icon" },
+});
+/** @type {__VLS_StyleScopedClasses['icon']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+    ...{ class: "text" },
+});
+/** @type {__VLS_StyleScopedClasses['text']} */ ;
+for (const [level] of __VLS_vFor(([1, 2, 3, 4, 5]))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ onClick: (...[$event]) => {
+                __VLS_ctx.setHeading(level);
+                // @ts-ignore
+                [editor, setHeading,];
+            } },
+        ...{ class: "item" },
+        key: (level),
+        ...{ class: ({ 'is-selected': __VLS_ctx.editor.isActive('heading', { level }) }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['item']} */ ;
+    /** @type {__VLS_StyleScopedClasses['is-selected']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "icon" },
+    });
+    /** @type {__VLS_StyleScopedClasses['icon']} */ ;
+    (level);
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "text" },
+        ...{ style: ({ fontSize: __VLS_ctx.sizes[level], fontWeight: 'bold' }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['text']} */ ;
+    (level);
+    // @ts-ignore
+    [editor, sizes,];
+}
+// @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/ImageUploadButton.vue

@@ -0,0 +1,93 @@
+<template>
+        
+<button class="icon-button image-button" @click="triggerFileSelect" :disabled="isUploading" title="插入图片">
+    <input ref="fileInputRef" type="file" accept="image/*" @change="handleFileChange" style="display: none" />
+    <div class="icon" v-if="!isUploading">
+        <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="M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zM0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm128 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm136 72c8.5 0 16.4 4.5 20.7 11.8l80 136c4.4 7.4 4.4 16.6 .1 24.1S352.6 384 344 384l-240 0c-8.9 0-17.2-5-21.3-12.9s-3.5-17.5 1.6-24.8l56-80c4.5-6.4 11.8-10.2 19.7-10.2s15.2 3.8 19.7 10.2l17.2 24.6 46.5-79c4.3-7.3 12.2-11.8 20.7-11.8z"/>
+        </svg>
+    </div>
+    <div class="icon" v-else>
+        <svg viewBox="0 0 38 38">
+            <circle stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none" cx="19" cy="19" r="16" stroke-dasharray="45.5 12.5" transform="rotate(10 19 19)">
+                <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.6s" values="0 19 19;360 19 19" />
+            </circle>
+        </svg>
+    </div>
+</button>
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Editor } from '@tiptap/core'
+import { UploadImageResult } from 'src/types';
+
+
+const props = defineProps<{
+	editor?: Editor
+	uploadImage: (file: File) => Promise<UploadImageResult>
+}>()
+
+const emit = defineEmits<{
+	(e: 'upload-start'): void
+	(e: 'upload-end'): void
+	(e: 'error', err: Error): void
+}>()
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const isUploading = ref(false)
+
+/**
+ * 触发文件选择
+ */
+const triggerFileSelect = () => {
+	if (!isUploading.value) {
+		fileInputRef.value?.click()
+	}
+}
+
+/**
+ * 文件变更处理
+ */
+const handleFileChange = async (event: Event) => {
+	const input = event.target as HTMLInputElement
+	const file = input.files?.[0]
+	if (!file) return
+
+	try {
+
+		isUploading.value = true
+		emit('upload-start')
+
+		const { url, name } = await props.uploadImage(file)
+
+		props.editor!
+			.chain()
+			.focus()
+			.setImage({
+				src: url,
+				title: name ?? '',
+				alt: name ?? '',
+				width: 200,
+			})
+			.run()
+	} catch (err: any) {
+		emit('error', err)
+		console.error(err)
+	} finally {
+		isUploading.value = false
+		emit('upload-end')
+		input.value = ''
+	}
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+.image-button { 
+    
+}
+
+</style>

package/src/Button/ImageUploadButton.vue.js

@@ -0,0 +1,123 @@
+import { ref } from 'vue';
+const props = defineProps();
+const emit = defineEmits();
+const fileInputRef = ref(null);
+const isUploading = ref(false);
+/**
+ * 触发文件选择
+ */
+const triggerFileSelect = () => {
+    if (!isUploading.value) {
+        fileInputRef.value?.click();
+    }
+};
+/**
+ * 文件变更处理
+ */
+const handleFileChange = async (event) => {
+    const input = event.target;
+    const file = input.files?.[0];
+    if (!file)
+        return;
+    try {
+        isUploading.value = true;
+        emit('upload-start');
+        const { url, name } = await props.uploadImage(file);
+        props.editor
+            .chain()
+            .focus()
+            .setImage({
+            src: url,
+            title: name ?? '',
+            alt: name ?? '',
+            width: 200,
+        })
+            .run();
+    }
+    catch (err) {
+        emit('error', err);
+        console.error(err);
+    }
+    finally {
+        isUploading.value = false;
+        emit('upload-end');
+        input.value = '';
+    }
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (__VLS_ctx.triggerFileSelect) },
+    ...{ class: "icon-button image-button" },
+    disabled: (__VLS_ctx.isUploading),
+    title: "插入图片",
+});
+/** @type {__VLS_StyleScopedClasses['icon-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['image-button']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.input)({
+    ...{ onChange: (__VLS_ctx.handleFileChange) },
+    ref: "fileInputRef",
+    type: "file",
+    accept: "image/*",
+    ...{ style: {} },
+});
+if (!__VLS_ctx.isUploading) {
+    __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 448 512",
+    });
+    __VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+        fill: "currentColor",
+        stroke: "currentColor",
+        'stroke-width': "4",
+        'stroke-linecap': "round",
+        'stroke-linejoin': "round",
+        d: "M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zM0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm128 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm136 72c8.5 0 16.4 4.5 20.7 11.8l80 136c4.4 7.4 4.4 16.6 .1 24.1S352.6 384 344 384l-240 0c-8.9 0-17.2-5-21.3-12.9s-3.5-17.5 1.6-24.8l56-80c4.5-6.4 11.8-10.2 19.7-10.2s15.2 3.8 19.7 10.2l17.2 24.6 46.5-79c4.3-7.3 12.2-11.8 20.7-11.8z",
+    });
+}
+else {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "icon" },
+    });
+    /** @type {__VLS_StyleScopedClasses['icon']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
+        viewBox: "0 0 38 38",
+    });
+    __VLS_asFunctionalElement1(__VLS_intrinsics.circle, __VLS_intrinsics.circle)({
+        stroke: "currentColor",
+        'stroke-width': "3",
+        'stroke-linecap': "round",
+        fill: "none",
+        cx: "19",
+        cy: "19",
+        r: "16",
+        'stroke-dasharray': "45.5 12.5",
+        transform: "rotate(10 19 19)",
+    });
+    __VLS_asFunctionalElement1(__VLS_intrinsics.animateTransform)({
+        attributeName: "transform",
+        type: "rotate",
+        repeatCount: "indefinite",
+        dur: "0.6s",
+        values: "0 19 19;360 19 19",
+    });
+}
+// @ts-ignore
+[triggerFileSelect, isUploading, isUploading, handleFileChange,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

package/src/Button/IndentLeftButton.vue

@@ -0,0 +1,25 @@
+<template>
+    <button
+        class="icon-button"
+        @click="editor.chain().focus().decreaseIndent().run()" >
+
+        <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 32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64zM192 192c0-17.7 14.3-32 32-32l192 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32zm32 96l192 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zM0 448c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32zM127.8 268.6L25.8 347.9C15.3 356.1 0 348.6 0 335.3L0 176.7c0-13.3 15.3-20.8 25.8-12.6l101.9 79.3c8.2 6.4 8.2 18.9 0 25.3z"/>
+            </svg>
+        </div>
+
+        <div class="tips">减少缩进</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+</script>

package/src/Button/IndentLeftButton.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().decreaseIndent().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 448 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M0 64C0 46.3 14.3 32 32 32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64zM192 192c0-17.7 14.3-32 32-32l192 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32zm32 96l192 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zM0 448c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32zM127.8 268.6L25.8 347.9C15.3 356.1 0 348.6 0 335.3L0 176.7c0-13.3 15.3-20.8 25.8-12.6l101.9 79.3c8.2 6.4 8.2 18.9 0 25.3z",
+});
+__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/IndentRightButton.vue

@@ -0,0 +1,29 @@
+<template>
+    <button
+        class="icon-button"
+        @click="editor.chain().focus().increaseIndent().run()" >
+
+        <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-17.7,14.3-32,32-32h384c17.7,0,32,14.3,32,32s-14.3,32-32,32H32C14.3,96,0,81.7,0,64z M192,192
+	c0-17.7,14.3-32,32-32h192c17.7,0,32,14.3,32,32s-14.3,32-32,32H224C206.3,224,192,209.7,192,192z M224,288h192
+	c17.7,0,32,14.3,32,32s-14.3,32-32,32H224c-17.7,0-32-14.3-32-32S206.3,288,224,288z M0,448c0-17.7,14.3-32,32-32h384
+	c17.7,0,32,14.3,32,32s-14.3,32-32,32H32C14.3,480,0,465.7,0,448z M6,243.4l102-79.3c10.5-8.2,25.8-0.7,25.8,12.6v158.6
+	c0,13.3-15.3,20.8-25.8,12.6L6.1,268.6c-8.2-6.4-8.2-18.9,0-25.3L6,243.4z"/>
+            </svg>
+        </div>
+
+        <div class="tips">增加缩进</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+</script>

package/src/Button/IndentRightButton.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().increaseIndent().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 448 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "\u004d\u0030\u002c\u0036\u0034\u0063\u0030\u002d\u0031\u0037\u002e\u0037\u002c\u0031\u0034\u002e\u0033\u002d\u0033\u0032\u002c\u0033\u0032\u002d\u0033\u0032\u0068\u0033\u0038\u0034\u0063\u0031\u0037\u002e\u0037\u002c\u0030\u002c\u0033\u0032\u002c\u0031\u0034\u002e\u0033\u002c\u0033\u0032\u002c\u0033\u0032\u0073\u002d\u0031\u0034\u002e\u0033\u002c\u0033\u0032\u002d\u0033\u0032\u002c\u0033\u0032\u0048\u0033\u0032\u0043\u0031\u0034\u002e\u0033\u002c\u0039\u0036\u002c\u0030\u002c\u0038\u0031\u002e\u0037\u002c\u0030\u002c\u0036\u0034\u007a\u0020\u004d\u0031\u0039\u0032\u002c\u0031\u0039\u0032\u000a\u0009\u0063\u0030\u002d\u0031\u0037\u002e\u0037\u002c\u0031\u0034\u002e\u0033\u002d\u0033\u0032\u002c\u0033\u0032\u002d\u0033\u0032\u0068\u0031\u0039\u0032\u0063\u0031\u0037\u002e\u0037\u002c\u0030\u002c\u0033\u0032\u002c\u0031\u0034\u002e\u0033\u002c\u0033\u0032\u002c\u0033\u0032\u0073\u002d\u0031\u0034\u002e\u0033\u002c\u0033\u0032\u002d\u0033\u0032\u002c\u0033\u0032\u0048\u0032\u0032\u0034\u0043\u0032\u0030\u0036\u002e\u0033\u002c\u0032\u0032\u0034\u002c\u0031\u0039\u0032\u002c\u0032\u0030\u0039\u002e\u0037\u002c\u0031\u0039\u0032\u002c\u0031\u0039\u0032\u007a\u0020\u004d\u0032\u0032\u0034\u002c\u0032\u0038\u0038\u0068\u0031\u0039\u0032\u000a\u0009\u0063\u0031\u0037\u002e\u0037\u002c\u0030\u002c\u0033\u0032\u002c\u0031\u0034\u002e\u0033\u002c\u0033\u0032\u002c\u0033\u0032\u0073\u002d\u0031\u0034\u002e\u0033\u002c\u0033\u0032\u002d\u0033\u0032\u002c\u0033\u0032\u0048\u0032\u0032\u0034\u0063\u002d\u0031\u0037\u002e\u0037\u002c\u0030\u002d\u0033\u0032\u002d\u0031\u0034\u002e\u0033\u002d\u0033\u0032\u002d\u0033\u0032\u0053\u0032\u0030\u0036\u002e\u0033\u002c\u0032\u0038\u0038\u002c\u0032\u0032\u0034\u002c\u0032\u0038\u0038\u007a\u0020\u004d\u0030\u002c\u0034\u0034\u0038\u0063\u0030\u002d\u0031\u0037\u002e\u0037\u002c\u0031\u0034\u002e\u0033\u002d\u0033\u0032\u002c\u0033\u0032\u002d\u0033\u0032\u0068\u0033\u0038\u0034\u000a\u0009\u0063\u0031\u0037\u002e\u0037\u002c\u0030\u002c\u0033\u0032\u002c\u0031\u0034\u002e\u0033\u002c\u0033\u0032\u002c\u0033\u0032\u0073\u002d\u0031\u0034\u002e\u0033\u002c\u0033\u0032\u002d\u0033\u0032\u002c\u0033\u0032\u0048\u0033\u0032\u0043\u0031\u0034\u002e\u0033\u002c\u0034\u0038\u0030\u002c\u0030\u002c\u0034\u0036\u0035\u002e\u0037\u002c\u0030\u002c\u0034\u0034\u0038\u007a\u0020\u004d\u0036\u002c\u0032\u0034\u0033\u002e\u0034\u006c\u0031\u0030\u0032\u002d\u0037\u0039\u002e\u0033\u0063\u0031\u0030\u002e\u0035\u002d\u0038\u002e\u0032\u002c\u0032\u0035\u002e\u0038\u002d\u0030\u002e\u0037\u002c\u0032\u0035\u002e\u0038\u002c\u0031\u0032\u002e\u0036\u0076\u0031\u0035\u0038\u002e\u0036\u000a\u0009\u0063\u0030\u002c\u0031\u0033\u002e\u0033\u002d\u0031\u0035\u002e\u0033\u002c\u0032\u0030\u002e\u0038\u002d\u0032\u0035\u002e\u0038\u002c\u0031\u0032\u002e\u0036\u004c\u0036\u002e\u0031\u002c\u0032\u0036\u0038\u002e\u0036\u0063\u002d\u0038\u002e\u0032\u002d\u0036\u002e\u0034\u002d\u0038\u002e\u0032\u002d\u0031\u0038\u002e\u0039\u002c\u0030\u002d\u0032\u0035\u002e\u0033\u004c\u0036\u002c\u0032\u0034\u0033\u002e\u0034\u007a",
+});
+__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/ItalicButton.vue

@@ -0,0 +1,29 @@
+<template>
+    <button
+        class="icon-button"
+        :class="{ 'active': editor.isActive('italic') }"
+        @click="editor.chain().focus().toggleItalic().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="M128 64c0-17.7 14.3-32 32-32l192 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-58.7 0-133.3 320 64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l58.7 0 133.3-320-64 0c-17.7 0-32-14.3-32-32z"/>
+            </svg>
+        </div>
+
+        <div class="tips">斜体</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+
+
+</script>
+

package/src/Button/ItalicButton.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().toggleItalic().run();
+            // @ts-ignore
+            [editor,];
+        } },
+    ...{ class: "icon-button" },
+    ...{ class: ({ 'active': __VLS_ctx.editor.isActive('italic') }) },
+});
+/** @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 512 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M128 64c0-17.7 14.3-32 32-32l192 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-58.7 0-133.3 320 64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l58.7 0 133.3-320-64 0c-17.7 0-32-14.3-32-32z",
+});
+__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 {};