@srcker/editor-vue-next 1.0.4 → 1.0.5

package/src/Button/TextColorButton.vue

@@ -1,329 +0,0 @@
-<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

@@ -1,243 +0,0 @@
-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

@@ -1,34 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-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

@@ -1,29 +0,0 @@
-<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>
-