@srcker/editor-vue-next 1.0.1

package/src/Button/UnderLineButton.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().toggleUnderline().run();
+            // @ts-ignore
+            [editor,];
+        } },
+    ...{ class: "icon-button" },
+    ...{ class: ({ 'active': __VLS_ctx.editor.isActive('underline') }) },
+});
+/** @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: "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",
+});
+__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/UndoButton.vue

@@ -0,0 +1,29 @@
+<template>
+    <button
+        class="icon-button"
+        :disabled="!editor.can().undo()"
+        @click="editor.chain().focus().undo().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="M24 192l144 0c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-46.7-46.7c75.3-58.6 184.3-53.3 253.5 15.9 75 75 75 196.5 0 271.5s-196.5 75-271.5 0c-10.2-10.2-19-21.3-26.4-33-9.5-14.9-29.3-19.3-44.2-9.8s-19.3 29.3-9.8 44.2C49.7 408.7 61.4 423.5 75 437 175 537 337 537 437 437S537 175 437 75C342.8-19.3 193.3-24.7 92.7 58.8L41 7C34.1 .2 23.8-1.9 14.8 1.8S0 14.3 0 24L0 168c0 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/UndoButton.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().undo().run();
+            // @ts-ignore
+            [editor,];
+        } },
+    ...{ class: "icon-button" },
+    disabled: (!__VLS_ctx.editor.can().undo()),
+});
+/** @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: "M24 192l144 0c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-46.7-46.7c75.3-58.6 184.3-53.3 253.5 15.9 75 75 75 196.5 0 271.5s-196.5 75-271.5 0c-10.2-10.2-19-21.3-26.4-33-9.5-14.9-29.3-19.3-44.2-9.8s-19.3 29.3-9.8 44.2C49.7 408.7 61.4 423.5 75 437 175 537 337 537 437 437S537 175 437 75C342.8-19.3 193.3-24.7 92.7 58.8L41 7C34.1 .2 23.8-1.9 14.8 1.8S0 14.3 0 24L0 168c0 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 {};

package/src/Components/IconArrow.vue

@@ -0,0 +1,16 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/>
+</svg>
+</template>
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+})
+
+
+</script>

package/src/Components/IconArrow.vue.js

@@ -0,0 +1,30 @@
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    }
+});
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__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)({
+    d: "M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z",
+});
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        }
+    },
+});
+export default {};

package/src/Components/IconCheck.vue

@@ -0,0 +1,40 @@
+<template>
+
+<div class="icon" :style="{color: color}">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" :height="size">
+        <path fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/>
+    </svg>
+</div>
+
+</template>
+
+<script setup>
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    },
+    color: {
+        type: String,
+        default: '#888'
+    },
+    size: {
+        type: Number,
+        default: 12
+    },
+})
+</script>
+
+
+<style lang="scss" scoped>
+
+.icon{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    svg{
+        height: 14px;
+    }
+}
+
+</style>

package/src/Components/IconCheck.vue.js

@@ -0,0 +1,59 @@
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true
+    },
+    color: {
+        type: String,
+        default: '#888'
+    },
+    size: {
+        type: Number,
+        default: 12
+    },
+});
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "icon" },
+    ...{ style: ({ color: __VLS_ctx.color }) },
+});
+/** @type {__VLS_StyleScopedClasses['icon']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.svg, __VLS_intrinsics.svg)({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 448 512",
+    height: (__VLS_ctx.size),
+});
+__VLS_asFunctionalElement1(__VLS_intrinsics.path)({
+    fill: "currentColor",
+    stroke: "currentColor",
+    'stroke-width': "4",
+    'stroke-linecap': "round",
+    'stroke-linejoin': "round",
+    d: "M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z",
+});
+// @ts-ignore
+[color, size,];
+const __VLS_export = (await import('vue')).defineComponent({
+    props: {
+        editor: {
+            type: Object,
+            required: true
+        },
+        color: {
+            type: String,
+            default: '#888'
+        },
+        size: {
+            type: Number,
+            default: 12
+        },
+    },
+});
+export default {};

package/src/EditorToolbar.vue

@@ -0,0 +1,150 @@
+<template>
+
+    <div class="toolbar" v-if="editor" @click.stop>
+
+        <div class="group">
+            <UndoButton :editor="editor" />
+            <RedoButton :editor="editor" />
+            <FormatButton :editor="editor" />
+        </div>
+
+        <div class="group">
+            <HeadingButton :editor="editor" />
+            <FontSizeButton :editor="editor" />
+            <LineHeightButton :editor="editor" />
+        </div>
+        
+        <div class="group">
+            <!-- 常用 -->
+            <BoldButton :editor="editor" />
+            <ItalicButton :editor="editor" />
+            <UnderLineButton :editor="editor" />
+            <StrikeButton :editor="editor" />
+            <IndentRightButton :editor="editor" />
+            <IndentLeftButton :editor="editor" />
+            <TextColorButton :editor="editor" />
+            <BackgroundButton :editor="editor" />
+            <BlockQuoteButton :editor="editor" />
+        </div>
+
+        <div class="group">
+            <!-- 列表 -->
+            <BulletListButton :editor="editor" />
+            <OrderedListButton :editor="editor" />
+        </div>
+
+        <div class="group">
+            <!-- 对齐 -->
+            <TextAlignLeftButton :editor="editor" />
+            <TextAlignCenterButton :editor="editor" />
+            <TextAlignRightButton :editor="editor" />
+            <SubscriptButton :editor="editor" />
+            <SuperscriptButton :editor="editor" />
+        </div>
+
+        <div class="group">
+            <LinkButton :editor="editor" />
+            <CodeButton :editor="editor" />
+            <CodeBlockButton :editor="editor" />
+            <ImageUploadButton :editor="editor" :uploadImage="uploadImage" />
+        </div>
+
+        <div class="group">
+            <ThemeButton :theme="theme" @toggle-theme="()=>emit('toggle-theme')" />
+        </div>
+    </div>
+
+</template>
+
+
+
+<script setup lang="ts">
+import type { Editor } from '@tiptap/core'
+import UndoButton from './Button/UndoButton.vue'
+import RedoButton from './Button/RedoButton.vue'
+import FormatButton from './Button/FormatButton.vue'
+import HeadingButton from './Button/HeadingButton.vue'
+import FontSizeButton from './Button/FontSizeButton.vue'
+import BoldButton from './Button/BoldButton.vue'
+import ItalicButton from './Button/ItalicButton.vue'
+import UnderLineButton from './Button/UnderLineButton.vue'
+import StrikeButton from './Button/StrikeButton.vue'
+import CodeButton from './Button/CodeButton.vue'
+import CodeBlockButton from './Button/CodeBlockButton.vue'
+import IndentLeftButton from './Button/IndentLeftButton.vue'
+import IndentRightButton from './Button/IndentRightButton.vue'
+import TextAlignLeftButton from './Button/TextAlignLeftButton.vue'
+import TextAlignCenterButton from './Button/TextAlignCenterButton.vue'
+import TextAlignRightButton from './Button/TextAlignRightButton.vue'
+import BlockQuoteButton from './Button/BlockQuoteButton.vue'
+import LinkButton from './Button/LinkButton.vue'
+import LineHeightButton from './Button/LineHeightButton.vue'
+import ImageUploadButton from './Button/ImageUploadButton.vue'
+import TextColorButton from './Button/TextColorButton.vue'
+import BackgroundButton from './Button/BackgroundButton.vue'
+import SubscriptButton from './Button/SubscriptButton.vue'
+import SuperscriptButton from './Button/SuperscriptButton.vue'
+import BulletListButton from './Button/BulletListButton.vue'
+import OrderedListButton from './Button/OrderedListButton.vue'
+
+import { UploadImageResult } from 'src/types';
+import ThemeButton from './Button/ThemeButton.vue'
+
+defineProps<{
+	theme: 'light' | 'dark'
+	editor: Editor
+	uploadImage: (file: File) => Promise<UploadImageResult>
+}>()
+
+
+const emit = defineEmits<{
+	(e: 'toggle-theme'): void
+}>()
+
+
+</script>
+
+
+<style lang="scss" scoped>
+
+.toolbar {
+
+    background: var(--background);
+    padding: 5px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0 5px;
+    user-select: none;
+    position: relative;
+    border-bottom: 1px solid var(--border-color);
+
+
+    .group {
+        display: flex;
+        align-items: center;
+        gap: 0 5px;
+        padding: 0 5px;
+        position: relative;
+
+        &::after{
+            content: ' ';
+            width: 1px;
+            height: 20px;
+            position: absolute;
+            right: 0px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: var(--border-color);
+        }
+
+        &:last-child { 
+            &::after{
+                width: 0;
+                content: '';
+            }
+        }
+    }
+}
+
+</style>