@srcker/editor-vue-next 1.0.1

package/src/RichEditor.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import TextAlign from '@tiptap/extension-text-align'
+import Highlight from '@tiptap/extension-highlight'
+import Underline from '@tiptap/extension-underline'
+import Link from '@tiptap/extension-link'
+import Code from '@tiptap/extension-code'
+import CodeBlock from '@tiptap/extension-code-block'
+import Focus from '@tiptap/extension-focus'
+import CharacterCount from '@tiptap/extension-character-count'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+import Heading from '@tiptap/extension-heading'
+import Subscript from '@tiptap/extension-subscript'
+import Superscript from '@tiptap/extension-superscript'
+
+import { Color } from '@tiptap/extension-color'
+import { LineHeight, TextStyle, BackgroundColor } from '@tiptap/extension-text-style' 
+
+
+import { BulletListStyle } from './Extensions/BulletListStyle'
+import { OrderedListStyle } from './Extensions/OrderedListStyle'
+import { Indent } from './Extensions/Indent'
+import { FontSize } from './Extensions/FontSize'
+import { UploadImage } from './Extensions/UploadImage'
+import { BubbleMenu } from '@tiptap/vue-3/menus'
+
+import EditorToolbar from './EditorToolbar.vue'
+
+import { UploadImageResult } from 'src/types';
+
+import "./styles/theme.css";
+import "./styles/variables.css";
+import { ref } from 'vue'
+
+
+// props 类型
+interface EditorProps {
+    theme?: 'light' | 'dark'
+    modelValue?: string
+    uploadImage?: (file: File) => Promise<UploadImageResult>
+}
+
+const props = defineProps<EditorProps>()
+
+// 默认主题
+const theme = ref<'light' | 'dark'>(props.theme ?? 'light')
+
+// 切换主题
+const toggleTheme = () => {
+    theme.value = theme.value === 'light' ? 'dark' : 'light'
+}
+
+
+// --- 3. 编辑器配置 ---
+const  editor = useEditor({
+    content: props.modelValue,
+    extensions: [
+        StarterKit, 
+        OrderedListStyle, 
+        BulletListStyle, 
+        Subscript,
+        Superscript,
+        BackgroundColor,
+        Placeholder.configure({ placeholder: '请输入内容...' }),
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+        Highlight.configure({ multicolor: true }), 
+        Underline,
+        Link.configure({ openOnClick: false, autolink: true }),
+        UploadImage,
+        Focus.configure({ className: 'is-focused', mode: 'all' }),
+        CharacterCount, TaskList, TaskItem.configure({ nested: true }),
+        TextStyle, 
+        Color, 
+        FontSize, 
+        LineHeight, 
+        Indent,
+        Heading.configure({
+          levels: [1, 2, 3, 4, 5],
+        }),
+        // Indent, 
+        // ListStyle, 
+        CodeBlock.configure({
+            HTMLAttributes: {
+                class: 'code-block',
+            },
+        }),
+        Code
+
+    ],
+})
+
+
+const uploadImageBase64 = async (file: File) => {
+    console.log(file)
+
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+
+    const url = await new Promise<string>((resolve, reject) => {
+        reader.onload = () => resolve(reader.result as string)
+        reader.onerror = (err) => reject(err)
+    })
+
+    return {
+        url,
+        name: file.name,
+    }
+}
+</script>
+
+<template>
+  <div class="srcker-editor">
+
+    <EditorToolbar 
+        :editor="editor!" 
+        :class="theme"
+        :theme="theme"
+        @toggle-theme="()=>toggleTheme()"
+        :uploadImage="(file)=> props.uploadImage? props.uploadImage(file):uploadImageBase64(file)" />
+
+    <BubbleMenu
+        v-if="editor"
+        class="bubble-menu"
+        :should-show="() => editor!.isActive('image')"
+        :options="{ placement: 'top-start', offset: 8 }"
+        :editor="editor">
+        <button @click="editor.chain().focus().updateAttributes('image', { width: '20%' }).run()">20%</button>
+        <button @click="editor.chain().focus().updateAttributes('image', { width: '50%' }).run()">50%</button>
+        <button @click="editor.chain().focus().updateAttributes('image', { width: '100%' }).run()">100%</button>
+        <button @click="editor.chain().focus().updateAttributes('image', { width: 'auto' }).run()">默认</button>
+    </BubbleMenu>
+
+    <EditorContent :editor="editor" class="editor-body srcker-html-content" :class="theme" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+.srcker-editor {
+    display: flex;
+    flex-direction: column;
+
+    .bubble-menu{
+        padding: 5px;
+        background: #fff;
+        box-shadow: 0 0 15px rgba($color: #000000, $alpha: 0.15);
+        display: flex;
+        align-items: center;
+        gap: 0 10px;
+        border-radius: 10px;
+
+        button{
+            outline: none;
+            border: none;
+            font-size: 14px;
+            color: #333;
+            font-weight: bold;
+            background: none;
+            cursor: pointer;
+            padding: 8px 10px;
+            border-radius: 8px;
+            transition: all 0.2s ease-in-out;
+
+            &:hover{
+                background: rgba($color: #000000, $alpha: 0.15);
+            }
+        }
+    }
+
+
+    .editor-body {
+        flex: 1;
+        cursor: text;
+        padding: 20px;
+        min-height: 400px;
+        color: var(--color);
+        background: var(--background);
+
+        :deep(.ProseMirror) {
+            outline: none;
+        }
+    }
+  
+}
+
+
+
+</style>

package/src/RichEditor.vue.js

@@ -0,0 +1,199 @@
+import { useEditor, EditorContent } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import TextAlign from '@tiptap/extension-text-align';
+import Highlight from '@tiptap/extension-highlight';
+import Underline from '@tiptap/extension-underline';
+import Link from '@tiptap/extension-link';
+import Code from '@tiptap/extension-code';
+import CodeBlock from '@tiptap/extension-code-block';
+import Focus from '@tiptap/extension-focus';
+import CharacterCount from '@tiptap/extension-character-count';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import Heading from '@tiptap/extension-heading';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import { Color } from '@tiptap/extension-color';
+import { LineHeight, TextStyle, BackgroundColor } from '@tiptap/extension-text-style';
+import { BulletListStyle } from './Extensions/BulletListStyle';
+import { OrderedListStyle } from './Extensions/OrderedListStyle';
+import { Indent } from './Extensions/Indent';
+import { FontSize } from './Extensions/FontSize';
+import { UploadImage } from './Extensions/UploadImage';
+import { BubbleMenu } from '@tiptap/vue-3/menus';
+import EditorToolbar from './EditorToolbar.vue';
+import "./styles/theme.css";
+import "./styles/variables.css";
+import { ref } from 'vue';
+const props = defineProps();
+// 默认主题
+const theme = ref(props.theme ?? 'light');
+// 切换主题
+const toggleTheme = () => {
+    theme.value = theme.value === 'light' ? 'dark' : 'light';
+};
+// --- 3. 编辑器配置 ---
+const editor = useEditor({
+    content: props.modelValue,
+    extensions: [
+        StarterKit,
+        OrderedListStyle,
+        BulletListStyle,
+        Subscript,
+        Superscript,
+        BackgroundColor,
+        Placeholder.configure({ placeholder: '请输入内容...' }),
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+        Highlight.configure({ multicolor: true }),
+        Underline,
+        Link.configure({ openOnClick: false, autolink: true }),
+        UploadImage,
+        Focus.configure({ className: 'is-focused', mode: 'all' }),
+        CharacterCount, TaskList, TaskItem.configure({ nested: true }),
+        TextStyle,
+        Color,
+        FontSize,
+        LineHeight,
+        Indent,
+        Heading.configure({
+            levels: [1, 2, 3, 4, 5],
+        }),
+        // Indent, 
+        // ListStyle, 
+        CodeBlock.configure({
+            HTMLAttributes: {
+                class: 'code-block',
+            },
+        }),
+        Code
+    ],
+});
+const uploadImageBase64 = async (file) => {
+    console.log(file);
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    const url = await new Promise((resolve, reject) => {
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = (err) => reject(err);
+    });
+    return {
+        url,
+        name: file.name,
+    };
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "srcker-editor" },
+});
+/** @type {__VLS_StyleScopedClasses['srcker-editor']} */ ;
+const __VLS_0 = EditorToolbar;
+// @ts-ignore
+const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+    ...{ 'onToggleTheme': {} },
+    editor: (__VLS_ctx.editor),
+    ...{ class: (__VLS_ctx.theme) },
+    theme: (__VLS_ctx.theme),
+    uploadImage: ((file) => props.uploadImage ? props.uploadImage(file) : __VLS_ctx.uploadImageBase64(file)),
+}));
+const __VLS_2 = __VLS_1({
+    ...{ 'onToggleTheme': {} },
+    editor: (__VLS_ctx.editor),
+    ...{ class: (__VLS_ctx.theme) },
+    theme: (__VLS_ctx.theme),
+    uploadImage: ((file) => props.uploadImage ? props.uploadImage(file) : __VLS_ctx.uploadImageBase64(file)),
+}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+let __VLS_5;
+const __VLS_6 = ({ toggleTheme: {} },
+    { onToggleTheme: (() => __VLS_ctx.toggleTheme()) });
+var __VLS_3;
+var __VLS_4;
+if (__VLS_ctx.editor) {
+    let __VLS_7;
+    /** @ts-ignore @type {typeof __VLS_components.BubbleMenu | typeof __VLS_components.BubbleMenu} */
+    BubbleMenu;
+    // @ts-ignore
+    const __VLS_8 = __VLS_asFunctionalComponent1(__VLS_7, new __VLS_7({
+        ...{ class: "bubble-menu" },
+        shouldShow: (() => __VLS_ctx.editor.isActive('image')),
+        options: ({ placement: 'top-start', offset: 8 }),
+        editor: (__VLS_ctx.editor),
+    }));
+    const __VLS_9 = __VLS_8({
+        ...{ class: "bubble-menu" },
+        shouldShow: (() => __VLS_ctx.editor.isActive('image')),
+        options: ({ placement: 'top-start', offset: 8 }),
+        editor: (__VLS_ctx.editor),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+    /** @type {__VLS_StyleScopedClasses['bubble-menu']} */ ;
+    const { default: __VLS_12 } = __VLS_10.slots;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.editor))
+                    return;
+                __VLS_ctx.editor.chain().focus().updateAttributes('image', { width: '20%' }).run();
+                // @ts-ignore
+                [editor, editor, editor, editor, editor, theme, theme, uploadImageBase64, toggleTheme,];
+            } },
+    });
+    __VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.editor))
+                    return;
+                __VLS_ctx.editor.chain().focus().updateAttributes('image', { width: '50%' }).run();
+                // @ts-ignore
+                [editor,];
+            } },
+    });
+    __VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.editor))
+                    return;
+                __VLS_ctx.editor.chain().focus().updateAttributes('image', { width: '100%' }).run();
+                // @ts-ignore
+                [editor,];
+            } },
+    });
+    __VLS_asFunctionalElement1(__VLS_intrinsics.button, __VLS_intrinsics.button)({
+        ...{ onClick: (...[$event]) => {
+                if (!(__VLS_ctx.editor))
+                    return;
+                __VLS_ctx.editor.chain().focus().updateAttributes('image', { width: 'auto' }).run();
+                // @ts-ignore
+                [editor,];
+            } },
+    });
+    // @ts-ignore
+    [];
+    var __VLS_10;
+}
+let __VLS_13;
+/** @ts-ignore @type {typeof __VLS_components.EditorContent} */
+EditorContent;
+// @ts-ignore
+const __VLS_14 = __VLS_asFunctionalComponent1(__VLS_13, new __VLS_13({
+    editor: (__VLS_ctx.editor),
+    ...{ class: "editor-body srcker-html-content" },
+    ...{ class: (__VLS_ctx.theme) },
+}));
+const __VLS_15 = __VLS_14({
+    editor: (__VLS_ctx.editor),
+    ...{ class: "editor-body srcker-html-content" },
+    ...{ class: (__VLS_ctx.theme) },
+}, ...__VLS_functionalComponentArgsRest(__VLS_14));
+/** @type {__VLS_StyleScopedClasses['editor-body']} */ ;
+/** @type {__VLS_StyleScopedClasses['srcker-html-content']} */ ;
+// @ts-ignore
+[editor, theme,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+});
+export default {};

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+	import { DefineComponent } from 'vue'
+	const component: DefineComponent<{}, {}, any>
+	export default component
+}

package/src/index.js

@@ -0,0 +1,6 @@
+import './styles/style.scss';
+import RichEditor from './RichEditor.vue';
+RichEditor.install = (app) => {
+    app.component('RichEditor', RichEditor);
+};
+export default RichEditor;

package/src/index.ts

@@ -0,0 +1,11 @@
+import type { App } from 'vue'
+import './styles/style.scss' 
+
+import RichEditor from './RichEditor.vue';
+
+
+RichEditor.install = (app: App) => {
+    app.component('RichEditor', RichEditor)
+}
+
+export default RichEditor

package/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './styles/style.scss';
+createApp(App).mount('#app');

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+
+import './styles/style.scss' 
+
+createApp(App).mount('#app')

package/src/styles/style.scss

@@ -0,0 +1,196 @@
+/* 进入 / 离开 公共过渡 */
+.dropdown-enter-active,
+.dropdown-leave-active {
+	transition: 
+		opacity 0.1s ease,
+		transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+	transform-origin: top center;
+}
+
+/* 初始 & 离开结束状态 */
+.dropdown-enter-from,
+.dropdown-leave-to {
+	opacity: 0;
+	transform: scale(0.95) translateY(-4px);
+}
+
+/* 进入完成 & 离开开始 */
+.dropdown-enter-to,
+.dropdown-leave-from {
+	opacity: 1;
+	transform: scale(1) translateY(0);
+}
+
+
+
+.icon-button { 
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--color);
+    border: none;
+    position: relative;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    .icon{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        svg{
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    &:hover { 
+        color: var(--hover-color);
+        background: var(--hover-background);
+        .tips{
+            opacity: 1;
+        }
+    }
+    &.active { 
+        background: var(--active-background);
+        color: var(--active-color);
+    }
+
+    &:disabled { 
+        color: var(--disabled-color);
+        background: var(--disabled-background);
+        cursor: not-allowed; 
+    }
+    .tips{
+        position: absolute;
+        background: #000;
+        color: #fff;
+        font-size: 12px;
+        white-space: nowrap;
+        padding: 5px 10px;
+        border-radius: 5px;
+        left: 50%;
+        bottom: -30px;
+        z-index: 88;
+        opacity: 0;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transform: translateX(-50%);
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: -6px;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 6px solid transparent;
+            border-right: 6px solid transparent;
+            border-bottom: 6px solid #000;
+        }
+    }
+}
+
+.dropdown-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;
+            }
+        }
+
+        .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: #333;
+        box-shadow: 0 0px 15px rgba(0,0,0,0.05);
+        border-radius: 10px;
+        z-index: 1000;
+        overflow-y: auto;
+        padding: 5px 0;
+        transition: all 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+
+        .item {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            position: relative;
+            padding: 5px 20px;
+            line-height: 30px;
+            color: var(--color);
+
+            &:hover {
+                background-color: var(--hover-background);
+            }
+
+            &.is-selected {
+                background-color: var(--active-background);
+            }
+
+            .icon {
+                font-size: 14px;
+                width: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: bold;
+                padding-right: 10px;
+                opacity: 0.5;
+            }
+
+            .text {
+                font-size: 14px;
+                white-space: nowrap;
+            }
+        }
+    }
+
+
+}

package/src/styles/theme.css

@@ -0,0 +1,28 @@
+/* ================== Dark Theme ================== */
+.dark {
+    --color: rgba(255, 255, 255, 0.9);
+    --background: #0e0e11;
+    --border-color: rgba(255, 255, 255, 0.1);
+    --active-color: #226bf0;
+    --active-background: rgba(255, 255, 255, 0.08);
+    --hover-color: #aaa;
+    --hover-background: rgba(255, 255, 255, 0.1);
+    --disabled-color: rgba(255, 255, 255, 0.4);
+    --disabled-background: none;
+}
+
+.light {
+    --color: #1f1f1f;
+    --background: #ffffff;
+
+    --border-color: rgba(0, 0, 0, 0.1);
+
+    --active-color: #1677ff;
+    --active-background: #e6f4ff;
+
+    --hover-color: #555;
+    --hover-background: rgba(0, 0, 0, 0.05);
+
+    --disabled-color: rgba(0, 0, 0, 0.4);
+    --disabled-background: none;
+}