@srcker/editor-vue-next 1.0.1

package/src/Button/BackgroundButton.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().setBackgroundColor(color).run();
+    isOpen.value = false;
+};
+const getColor = computed(() => {
+    if (!props.editor)
+        return '#fff';
+    const color = props.editor.getAttributes('textStyle').backgroundColor;
+    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: "M296 64c6.9 0 13.5 2.7 18.3 7.6L440.4 197.7c4.9 4.9 7.6 11.5 7.6 18.3s-2.7 13.5-7.6 18.3L386.7 288 65.3 288c1.3-3.9 3.4-7.4 6.3-10.3l96.4-96.4 33.4 33.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L213.3 136 277.7 71.6c4.9-4.9 11.5-7.6 18.3-7.6zM122.7 136L26.3 232.4C9.5 249.3 0 272.1 0 296s9.5 46.7 26.3 63.6L152.4 485.7C169.3 502.5 192.1 512 216 512s46.7-9.5 63.6-26.3L485.7 279.6C502.5 262.7 512 239.9 512 216s-9.5-46.7-26.3-63.6L359.6 26.3C342.7 9.5 319.9 0 296 0s-46.7 9.5-63.6 26.3L168 90.7 118.6 41.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L122.7 136z",
+});
+__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().setBackgroundColor($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().unsetBackgroundColor().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/BlockQuoteButton.vue

@@ -0,0 +1,26 @@
+<template>
+    <button
+        class="icon-button"
+        :class="{ 'active': editor.isActive('blockquote') }"
+        @click="editor.chain().focus().toggleBlockquote().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 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64L0 216zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-136z"/>
+            </svg>
+        </div>
+
+        <div class="tips">引用</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+</script>

package/src/Button/BlockQuoteButton.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().toggleBlockquote().run();
+            // @ts-ignore
+            [editor,];
+        } },
+    ...{ class: "icon-button" },
+    ...{ class: ({ 'active': __VLS_ctx.editor.isActive('blockquote') }) },
+});
+/** @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 448 512",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64L0 216zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-136z",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "tips" },
+});
+/** @type {__VLS_StyleScopedClasses['tips']} */ ;
+// @ts-ignore
+[editor,];
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default {};

package/src/Button/BoldButton.vue

@@ -0,0 +1,29 @@
+<template>
+    <button
+        class="icon-button"
+        :class="{ 'active': editor.isActive('bold') }"
+        @click="editor.chain().focus().toggleBold().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="M32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l32 0 0 320-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l224 0c70.7 0 128-57.3 128-128 0-46.5-24.8-87.3-62-109.7 18.7-22.3 30-51 30-82.3 0-70.7-57.3-128-128-128L32 32zM288 160c0 35.3-28.7 64-64 64l-96 0 0-128 96 0c35.3 0 64 28.7 64 64zM128 416l0-128 128 0c35.3 0 64 28.7 64 64s-28.7 64-64 64l-128 0z"/>
+            </svg>
+        </div>
+
+        <div class="tips">加粗</div>
+    </button>
+</template>
+
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+
+
+</script>
+

package/src/Button/BoldButton.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().toggleBold().run();
+            // @ts-ignore
+            [editor,];
+        } },
+    ...{ class: "icon-button" },
+    ...{ class: ({ 'active': __VLS_ctx.editor.isActive('bold') }) },
+});
+/** @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: "M32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l32 0 0 320-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l224 0c70.7 0 128-57.3 128-128 0-46.5-24.8-87.3-62-109.7 18.7-22.3 30-51 30-82.3 0-70.7-57.3-128-128-128L32 32zM288 160c0 35.3-28.7 64-64 64l-96 0 0-128 96 0c35.3 0 64 28.7 64 64zM128 416l0-128 128 0c35.3 0 64 28.7 64 64s-28.7 64-64 64l-128 0z",
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "tips" },
+});
+/** @type {__VLS_StyleScopedClasses['tips']} */ ;
+// @ts-ignore
+[editor,];
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default {};

package/src/Button/BulletListButton.vue

@@ -0,0 +1,114 @@
+<template>
+
+<div class="dropdown-button list-button" ref="wrapperRef">
+    <div class="trigger" @click="isOpen = !isOpen" :class="{ 'open': isOpen, 'active': editor.isActive('bulletList') }">
+        <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="M48 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM48 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM96 256a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"/>
+            </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('bulletList') && editor.getAttributes('bulletList').listStyleType === item.value }"
+                @click="setBulletListStyle(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:'●', label: '实心圆', value: 'disc' },
+    { icon:'○', label: '空心圆', value: 'circle' },
+    { icon:'■', label: '方块', value: 'square' },
+    { icon:'', label: '无', value: 'none' },
+]
+
+
+const setBulletListStyle = (value) => {
+    if(props.editor.isActive('bulletList') && value != 'none'){
+        props.editor.chain().focus()
+            .updateAttributes('bulletList', { listStyleType: value })
+            .run()
+    }else{
+        props.editor.chain().focus()
+            .toggleBulletList()
+            .updateAttributes('bulletList', { listStyleType: value })
+            .run()
+    }
+    isOpen.value = false
+}
+
+
+
+const sizeLabel = computed(() => {
+    if (!props.editor) return '16px'
+    const size = props.editor.getAttributes('textStyle').fontSize
+    return size || '16px'
+})
+
+
+
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+const handleClickOutside = (e) => {
+	if (!wrapperRef.value) return
+
+	if (!wrapperRef.value.contains(e.target)) {
+		isOpen.value = false
+	}
+}
+
+onMounted(() => {
+	document.addEventListener('mousedown', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('mousedown', handleClickOutside)
+})
+
+</script>
+
+
+<style lang="scss" scoped>
+
+.list-button { 
+    
+    .dropdown {
+        .item {
+            .icon {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 12px;
+            }
+        }
+    }
+}
+
+</style>
+
+
+

package/src/Button/BulletListButton.vue.js

@@ -0,0 +1,147 @@
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+const isOpen = ref(false);
+const wrapperRef = ref(null);
+const list = [
+    { icon: '●', label: '实心圆', value: 'disc' },
+    { icon: '○', label: '空心圆', value: 'circle' },
+    { icon: '■', label: '方块', value: 'square' },
+    { icon: '', label: '无', value: 'none' },
+];
+const setBulletListStyle = (value) => {
+    if (props.editor.isActive('bulletList') && value != 'none') {
+        props.editor.chain().focus()
+            .updateAttributes('bulletList', { listStyleType: value })
+            .run();
+    }
+    else {
+        props.editor.chain().focus()
+            .toggleBulletList()
+            .updateAttributes('bulletList', { listStyleType: value })
+            .run();
+    }
+    isOpen.value = false;
+};
+const sizeLabel = computed(() => {
+    if (!props.editor)
+        return '16px';
+    const size = props.editor.getAttributes('textStyle').fontSize;
+    return size || '16px';
+});
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+});
+const handleClickOutside = (e) => {
+    if (!wrapperRef.value)
+        return;
+    if (!wrapperRef.value.contains(e.target)) {
+        isOpen.value = false;
+    }
+};
+onMounted(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+});
+onBeforeUnmount(() => {
+    document.removeEventListener('mousedown', handleClickOutside);
+});
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "dropdown-button 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('bulletList') }) },
+});
+/** @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: "M48 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM48 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM96 256a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z",
+});
+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.setBulletListStyle(item.value);
+                // @ts-ignore
+                [isOpen, isOpen, editor, list, setBulletListStyle,];
+            } },
+        ...{ class: "item" },
+        key: (item.value),
+        ...{ class: ({ 'is-selected': __VLS_ctx.editor.isActive('bulletList') && __VLS_ctx.editor.getAttributes('bulletList').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 {};