@srcker/editor-vue-next 1.0.1

package/src/Button/TextColorButton.vue

@@ -0,0 +1,329 @@
+<template>
+    <div
+        class="color-button"
+        ref="wrapperRef"
+        :class="{ 'open': isOpen }"
+        @click="isOpen = !isOpen"
+        title="字体颜色">
+
+        <div class="trigger" >
+            <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="M285.1 50.7C279.9 39.3 268.5 32 256 32s-23.9 7.3-29.1 18.7L59.5 416 48 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l88 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-6.1 0 22-48 208.3 0 22 48-6.1 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l88 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-11.5 0-167.4-365.3zM330.8 304L181.2 304 256 140.8 330.8 304z"/>
+                </svg>
+            </div>
+            <div class="bar" :style="{ backgroundColor: getColor || '#000' }"></div>
+        </div>
+
+        <div class="dropdown" v-if="isOpen">
+            <div class="grid">
+                <div 
+                    v-for="color in colorPalette" 
+                    :key="color"
+                    class="item"
+                    :style="{ backgroundColor: color }"
+                    @click="setColor(color)"
+                    :title="color">
+                    <IconCheck v-if="editor.isActive('textStyle', { color })" :size="10" color="#fff" />
+                </div>
+            </div>
+            
+            <div class="footer">
+                <label>自定义颜色</label>
+                <div class="input">
+                    <input
+                        type="color"
+                        @input="editor.chain().focus().setColor($event.target.value).run()"
+                        :value="getColor"/>
+                </div>
+
+                <div class="button" @click="editor.chain().focus().unsetColor().run();">清除</div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+
+<script setup>
+
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import IconCheck from '../components/IconCheck.vue';
+
+const isOpen = ref(false)
+const wrapperRef = ref(null)
+
+const colorPalette = [
+// 黑白灰
+	'#000000',
+	'#262626',
+	'#595959',
+	'#8C8C8C',
+	'#BFBFBF',
+	'#D9D9D9',
+	'#E9E9E9',
+	'#F5F5F5',
+	'#FAFAFA',
+	'#FFFFFF',
+
+	// 基础色
+	'#F5222D',
+	'#FA541C',
+	'#FA8C16',
+	'#FADB14',
+	'#52C41A',
+	'#13C2C2',
+	'#1890FF',
+	'#2F54EB',
+	'#722ED1',
+	'#EB2F96',
+
+	// 浅色系
+	'#FFE8E6',
+	'#FFECE0',
+	'#FFEF D1'.replace(' ', ''),
+	'#FCFCCA',
+	'#E4F7D2',
+	'#D3F5F0',
+	'#D4EEFC',
+	'#DEE8FC',
+	'#EFE1FA',
+	'#FAE1EB',
+
+	// 中色系
+	'#FFA39E',
+	'#FFBB96',
+	'#FFD591',
+	'#FFFB8F',
+	'#B7EB8F',
+	'#87E8DE',
+	'#91D5FF',
+	'#ADC6FF',
+	'#D3ADF7',
+	'#FFADD2',
+
+	// 深色系
+	'#FF4D4F',
+	'#FF7A45',
+	'#FFA940',
+	'#FFEC3D',
+	'#73D13D',
+	'#36CFC9',
+	'#40A9FF',
+	'#597EF7',
+	'#9254DE',
+	'#F759AB',
+
+	// 暗色系
+	'#CF1322',
+	'#D4380D',
+	'#D46B08',
+	'#D4B106',
+	'#389E0D',
+	'#08979C',
+	'#096DD9',
+	'#1D39C4',
+	'#531DAB',
+	'#C41D7F',
+
+	// 极深色
+	'#820014',
+	'#871400',
+	'#873800',
+	'#614700',
+	'#135200',
+	'#00474F',
+	'#003A8C',
+	'#061178',
+	'#22075E',
+	'#780650'
+];
+
+
+const setColor = (color) => {
+    props.editor.chain().focus().setColor(color).run();
+    isOpen.value = false
+}
+
+
+
+const getColor = computed(() => {
+    if (!props.editor) return '#fff'
+    const color = props.editor.getAttributes('textStyle').color
+    return color || '#000'
+})
+
+
+
+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>
+
+.color-button { 
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+
+    .trigger {
+        height: 25px;
+        padding: 3px 8px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        border-radius: 6px;
+        font-size: 14px;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        color: var(--color);
+        background: var(--background);
+
+        &:hover, 
+        &.is-open {
+            color: var(--hover-color);
+            background: var(--hover-background);
+        }
+
+        .icon{
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            svg{
+                height: 14px;
+            }
+        }
+
+        .bar{
+            position: absolute; 
+            bottom: 5px; 
+            width: 15px;
+            height: 3px;
+            left: 50%; 
+            border: 1px solid rgba($color: #fff, $alpha: 0.5);
+            transform: translateX(-50%);
+        }
+
+        .label { 
+            margin: 0 5px; 
+            display: inline-flex;
+            align-items: center;
+            white-space: nowrap; 
+            overflow: hidden; 
+            text-overflow: ellipsis; 
+        }
+        .arrow { 
+            font-size: 14px; 
+            color: #666; 
+            display: inline-flex;
+            align-items: center;
+        }
+    }
+
+    .dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        margin-top: 5px;
+        background: #1f1f1f;
+        box-shadow: 0 0px 15px rgba(0,0,0,0.05);
+        border-radius: 10px;
+        z-index: 1000;
+        overflow-y: auto;
+        padding: 15px;
+        transition: all 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+
+        .grid{
+            display: grid;
+            grid-template-columns: repeat(10, 1fr);
+            gap: 5px;
+            width: 300px;
+            .item{ 
+                width: 20px;
+                height: 20px;
+                padding: 2px;
+                border-radius: 50%;
+                border: 1px solid transparent;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+                &:hover {
+                    border-color: rgba($color: #fff, $alpha: 0.5);
+                    z-index: 1;
+                }
+
+                .icon{
+                    display: inline-flex;
+                    align-items: center;
+                    color: rgba($color: #fff, $alpha: 1);
+                }
+            }
+        }
+
+        .footer{
+            margin-top: 20px;
+            display: flex;
+            align-items: center;
+
+            label{
+                font-size: 14px;
+                color: #fff;
+            }
+
+            .input{
+                flex: 1;
+                padding-left: 15px;
+
+                input{
+                    padding: 0;
+                    block-size: 20px;
+                    border: none;
+                    inline-size: 40px;
+                }
+            }
+            
+            .button{
+                display: flex;
+                align-items: center;
+                padding: 5px 15px;
+                border-radius: 12px;
+                color: rgba($color: #fff, $alpha: 0.5);
+                background: rgba($color: #fff, $alpha: 0.1);
+                font-size: 14px;
+                justify-content: center;
+
+                &:hover {
+                    cursor: pointer;
+                    background: rgba($color: #000000, $alpha: 0.2);
+                    color: rgba($color: #fff, $alpha: 0.8);
+                }
+            }
+        }
+    }
+}
+</style>

package/src/Button/TextColorButton.vue.js

@@ -0,0 +1,243 @@
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import IconCheck from '../components/IconCheck.vue';
+const isOpen = ref(false);
+const wrapperRef = ref(null);
+const colorPalette = [
+    // 黑白灰
+    '#000000',
+    '#262626',
+    '#595959',
+    '#8C8C8C',
+    '#BFBFBF',
+    '#D9D9D9',
+    '#E9E9E9',
+    '#F5F5F5',
+    '#FAFAFA',
+    '#FFFFFF',
+    // 基础色
+    '#F5222D',
+    '#FA541C',
+    '#FA8C16',
+    '#FADB14',
+    '#52C41A',
+    '#13C2C2',
+    '#1890FF',
+    '#2F54EB',
+    '#722ED1',
+    '#EB2F96',
+    // 浅色系
+    '#FFE8E6',
+    '#FFECE0',
+    '#FFEF D1'.replace(' ', ''),
+    '#FCFCCA',
+    '#E4F7D2',
+    '#D3F5F0',
+    '#D4EEFC',
+    '#DEE8FC',
+    '#EFE1FA',
+    '#FAE1EB',
+    // 中色系
+    '#FFA39E',
+    '#FFBB96',
+    '#FFD591',
+    '#FFFB8F',
+    '#B7EB8F',
+    '#87E8DE',
+    '#91D5FF',
+    '#ADC6FF',
+    '#D3ADF7',
+    '#FFADD2',
+    // 深色系
+    '#FF4D4F',
+    '#FF7A45',
+    '#FFA940',
+    '#FFEC3D',
+    '#73D13D',
+    '#36CFC9',
+    '#40A9FF',
+    '#597EF7',
+    '#9254DE',
+    '#F759AB',
+    // 暗色系
+    '#CF1322',
+    '#D4380D',
+    '#D46B08',
+    '#D4B106',
+    '#389E0D',
+    '#08979C',
+    '#096DD9',
+    '#1D39C4',
+    '#531DAB',
+    '#C41D7F',
+    // 极深色
+    '#820014',
+    '#871400',
+    '#873800',
+    '#614700',
+    '#135200',
+    '#00474F',
+    '#003A8C',
+    '#061178',
+    '#22075E',
+    '#780650'
+];
+const setColor = (color) => {
+    props.editor.chain().focus().setColor(color).run();
+    isOpen.value = false;
+};
+const getColor = computed(() => {
+    if (!props.editor)
+        return '#fff';
+    const color = props.editor.getAttributes('textStyle').color;
+    return color || '#000';
+});
+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;
+/** @type {__VLS_StyleScopedClasses['icon']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ onClick: (...[$event]) => {
+            __VLS_ctx.isOpen = !__VLS_ctx.isOpen;
+            // @ts-ignore
+            [isOpen, isOpen,];
+        } },
+    ...{ class: "color-button" },
+    ref: "wrapperRef",
+    ...{ class: ({ 'open': __VLS_ctx.isOpen }) },
+    title: "字体颜色",
+});
+/** @type {__VLS_StyleScopedClasses['color-button']} */ ;
+/** @type {__VLS_StyleScopedClasses['open']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ 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 512 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M285.1 50.7C279.9 39.3 268.5 32 256 32s-23.9 7.3-29.1 18.7L59.5 416 48 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l88 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-6.1 0 22-48 208.3 0 22 48-6.1 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l88 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-11.5 0-167.4-365.3zM330.8 304L181.2 304 256 140.8 330.8 304z",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "bar" },
+    ...{ style: ({ backgroundColor: __VLS_ctx.getColor || '#000' }) },
+});
+/** @type {__VLS_StyleScopedClasses['bar']} */ ;
+if (__VLS_ctx.isOpen) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "dropdown" },
+    });
+    /** @type {__VLS_StyleScopedClasses['dropdown']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "grid" },
+    });
+    /** @type {__VLS_StyleScopedClasses['grid']} */ ;
+    for (const [color] of __VLS_vFor((__VLS_ctx.colorPalette))) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+            ...{ onClick: (...[$event]) => {
+                    if (!(__VLS_ctx.isOpen))
+                        return;
+                    __VLS_ctx.setColor(color);
+                    // @ts-ignore
+                    [isOpen, isOpen, getColor, colorPalette, setColor,];
+                } },
+            key: (color),
+            ...{ class: "item" },
+            ...{ style: ({ backgroundColor: color }) },
+            title: (color),
+        });
+        /** @type {__VLS_StyleScopedClasses['item']} */ ;
+        if (__VLS_ctx.editor.isActive('textStyle', { color })) {
+            const __VLS_0 = IconCheck;
+            // @ts-ignore
+            const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+                size: (10),
+                color: "#fff",
+            }));
+            const __VLS_2 = __VLS_1({
+                size: (10),
+                color: "#fff",
+            }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        }
+        // @ts-ignore
+        [editor,];
+    }
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "footer" },
+    });
+    /** @type {__VLS_StyleScopedClasses['footer']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({});
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "input" },
+    });
+    /** @type {__VLS_StyleScopedClasses['input']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.input)({
+        ...{ onInput: (...[$event]) => {
+                if (!(__VLS_ctx.isOpen))
+                    return;
+                __VLS_ctx.editor.chain().focus().setColor($event.target.value).run();
+                // @ts-ignore
+                [editor,];
+            } },
+        type: "color",
+        value: (__VLS_ctx.getColor),
+    });
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.isOpen))
+                    return;
+                __VLS_ctx.editor.chain().focus().unsetColor().run();
+                ;
+                // @ts-ignore
+                [getColor, editor,];
+            } },
+        ...{ class: "button" },
+    });
+    /** @type {__VLS_StyleScopedClasses['button']} */ ;
+}
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default {};

package/src/Button/ThemeButton.vue

@@ -0,0 +1,34 @@
+<template>
+    <button
+        class="icon-button"
+        @click="toggleTheme" >
+        <div class="icon">
+            <!-- 黑色 -->
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" v-if="theme === 'light'">
+                <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512c68.8 0 131.3-27.2 177.3-71.4 7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9 .4-9.8 .6-14.8 .6-101.6 0-184-82.4-184-184 0-72.1 41.5-134.6 102.1-164.8 9.1-4.5 14.3-14.3 13.1-24.4S322.6 8.5 312.7 6.3C294.4 2.2 275.4 0 256 0z"/>
+            </svg>
+            <!-- 白色 -->
+             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" v-else>
+                <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M239.3 48.7c-107.1 8.5-191.3 98.1-191.3 207.3 0 114.9 93.1 208 208 208 33.3 0 64.7-7.8 92.6-21.7-103.4-23.4-180.6-115.8-180.6-226.3 0-65.8 27.4-125.1 71.3-167.3zM0 256c0-141.4 114.6-256 256-256 19.4 0 38.4 2.2 56.7 6.3 9.9 2.2 17.3 10.5 18.5 20.5s-4 19.8-13.1 24.4c-60.6 30.2-102.1 92.7-102.1 164.8 0 101.6 82.4 184 184 184 5 0 9.9-.2 14.8-.6 10.1-.8 19.6 4.8 23.8 14.1s2 20.1-5.3 27.1C387.3 484.8 324.8 512 256 512 114.6 512 0 397.4 0 256z"/>
+            </svg>
+        </div>
+
+        <div class="tips">切换主题</div>
+    </button>
+</template>
+
+
+<script setup lang="ts">
+const props = defineProps<{
+    theme: 'light' | 'dark'    // TS 类型优化，避免 String 报错
+}>()
+
+const emit = defineEmits<{
+	(e: 'toggle-theme'): void
+}>()
+
+const toggleTheme = () => {
+    emit('toggle-theme')
+}
+
+</script>

package/src/Button/ThemeButton.vue.js

@@ -0,0 +1,63 @@
+const props = defineProps();
+const emit = defineEmits();
+const toggleTheme = () => {
+    emit('toggle-theme');
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+    ...{ onClick: (__VLS_ctx.toggleTheme) },
+    ...{ class: "icon-button" },
+});
+/** @type {__VLS_StyleScopedClasses['icon-button']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "icon" },
+});
+/** @type {__VLS_StyleScopedClasses['icon']} */ ;
+if (__VLS_ctx.theme === 'light') {
+    __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: "M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512c68.8 0 131.3-27.2 177.3-71.4 7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9 .4-9.8 .6-14.8 .6-101.6 0-184-82.4-184-184 0-72.1 41.5-134.6 102.1-164.8 9.1-4.5 14.3-14.3 13.1-24.4S322.6 8.5 312.7 6.3C294.4 2.2 275.4 0 256 0z",
+    });
+}
+else {
+    __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: "M239.3 48.7c-107.1 8.5-191.3 98.1-191.3 207.3 0 114.9 93.1 208 208 208 33.3 0 64.7-7.8 92.6-21.7-103.4-23.4-180.6-115.8-180.6-226.3 0-65.8 27.4-125.1 71.3-167.3zM0 256c0-141.4 114.6-256 256-256 19.4 0 38.4 2.2 56.7 6.3 9.9 2.2 17.3 10.5 18.5 20.5s-4 19.8-13.1 24.4c-60.6 30.2-102.1 92.7-102.1 164.8 0 101.6 82.4 184 184 184 5 0 9.9-.2 14.8-.6 10.1-.8 19.6 4.8 23.8 14.1s2 20.1-5.3 27.1C387.3 484.8 324.8 512 256 512 114.6 512 0 397.4 0 256z",
+    });
+}
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "tips" },
+});
+/** @type {__VLS_StyleScopedClasses['tips']} */ ;
+// @ts-ignore
+[toggleTheme, theme,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
+    __typeProps: {},
+});
+export default {};

package/src/Button/UnderLineButton.vue

@@ -0,0 +1,29 @@
+<template>
+    <button
+        class="icon-button"
+        :class="{ 'active': editor.isActive('underline') }"
+        @click="editor.chain().focus().toggleUnderline().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="M0 32C0 14.3 14.3 0 32 0L96 0c17.7 0 32 14.3 32 32S113.7 64 96 64l0 160c0 53 43 96 96 96s96-43 96-96l0-160c-17.7 0-32-14.3-32-32S270.3 0 288 0l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 160c0 88.4-71.6 160-160 160S32 312.4 32 224L32 64C14.3 64 0 49.7 0 32zM0 480c0-17.7 14.3-32 32-32l320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-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>
+