@srcker/editor-vue-next 1.0.3 → 1.0.5

package/src/RichEditor.vue

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

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

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

package/src/index.js

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

package/src/index.ts

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

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

package/src/main.ts

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

package/src/styles/style.scss

@@ -1,196 +0,0 @@
-/* 进入 / 离开 公共过渡 */
-.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

@@ -1,28 +0,0 @@
-/* ================== 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;
-}