@srcker/editor-vue-next 1.0.3 → 1.0.4

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@srcker/editor-vue-next",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "type": "module",
     "engines": {
         "node": "^20.19.0 || >=22.12.0"
     },
     "scripts": {
         "dev": "vite",
-        "build": "vue-tsc -b && vite build",
+        "build": "vue-tsc -b && vite build --emptyOutDir",
         "preview": "vite preview"
     },
     "dependencies": {

package/src/RichEditor.vue

@@ -31,11 +31,14 @@ import EditorToolbar from './EditorToolbar.vue'
 
 import { UploadImageResult } from 'src/types';
 
+
 import "./styles/theme.css";
-import "./styles/variables.css";
+import "./styles/style.scss";
+import "./styles/variables.scss";
 import { ref } from 'vue'
 
 
+
 // props 类型
 interface EditorProps {
     theme?: 'light' | 'dark'
@@ -45,6 +48,10 @@ interface EditorProps {
 
 const props = defineProps<EditorProps>()
 
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+}>()
+
 // 默认主题
 const theme = ref<'light' | 'dark'>(props.theme ?? 'light')
 
@@ -80,16 +87,16 @@ const  editor = useEditor({
         Heading.configure({
           levels: [1, 2, 3, 4, 5],
         }),
-        // Indent, 
-        // ListStyle, 
         CodeBlock.configure({
             HTMLAttributes: {
                 class: 'code-block',
             },
         }),
         Code
-
     ],
+    onUpdate({ editor }) {
+        emit('update:modelValue', editor.getHTML())
+    }
 })
 
 

package/src/RichEditor.vue.js

@@ -24,9 +24,11 @@ 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 "./styles/style.scss";
+import "./styles/variables.scss";
 import { ref } from 'vue';
 const props = defineProps();
+const emit = defineEmits();
 // 默认主题
 const theme = ref(props.theme ?? 'light');
 // 切换主题
@@ -59,8 +61,6 @@ const editor = useEditor({
         Heading.configure({
             levels: [1, 2, 3, 4, 5],
         }),
-        // Indent, 
-        // ListStyle, 
         CodeBlock.configure({
             HTMLAttributes: {
                 class: 'code-block',
@@ -68,6 +68,9 @@ const editor = useEditor({
         }),
         Code
     ],
+    onUpdate({ editor }) {
+        emit('update:modelValue', editor.getHTML());
+    }
 });
 const uploadImageBase64 = async (file) => {
     console.log(file);
@@ -87,6 +90,7 @@ const __VLS_ctx = {
     ...{},
     ...{},
     ...{},
+    ...{},
 };
 let __VLS_components;
 let __VLS_intrinsics;
@@ -194,6 +198,7 @@ const __VLS_15 = __VLS_14({
 // @ts-ignore
 [editor, theme,];
 const __VLS_export = (await import('vue')).defineComponent({
+    __typeEmits: {},
     __typeProps: {},
 });
 export default {};

package/src/index.js

@@ -1,4 +1,3 @@
-import './styles/style.scss';
 import RichEditor from './RichEditor.vue';
 RichEditor.install = (app) => {
     app.component('RichEditor', RichEditor);

package/src/index.ts

@@ -1,5 +1,4 @@
 import type { App } from 'vue'
-import './styles/style.scss' 
 
 import RichEditor from './RichEditor.vue';
 

package/src/styles/index.js

@@ -0,0 +1,3 @@
+import "./theme.css";
+import "./style.scss";
+import "./variables.scss";

package/src/styles/index.ts

@@ -0,0 +1,3 @@
+import "./theme.css";
+import "./style.scss";
+import "./variables.scss";

package/src/styles/theme.css

@@ -1,4 +1,3 @@
-/* ================== Dark Theme ================== */
 .dark {
     --color: rgba(255, 255, 255, 0.9);
     --background: #0e0e11;

package/src/styles/variables.js

@@ -0,0 +1 @@
+import "./variables.scss";

package/src/styles/variables.ts

@@ -0,0 +1 @@
+import "./variables.scss";

package/vite.config.ts

@@ -7,17 +7,28 @@ import path from 'path'
 export default defineConfig({
     plugins: [vue()],
     build: {
+        cssCodeSplit: true,
         lib: {
-            entry: path.resolve(__dirname, 'src/index.ts'),
+            entry: {
+                index: path.resolve(__dirname, 'src/index.ts'),
+                variables: path.resolve(__dirname, 'src/styles/variables.ts'),
+                style: path.resolve(__dirname, 'src/styles/index.ts'),
+            },
             name: 'RichEditor',
-            fileName: (format) => `rich-editor.${format}.js`
+            fileName: (format, entryName) => {
+                if (entryName === 'index') {
+                    return `rich-editor.${format}.js`
+                }
+                return `${entryName}.${format}.js`
+            }
         },
         rollupOptions: {
             external: ['vue'],
             output: {
+                assetFileNames: 'style/[name][extname]',
                 globals: {
                     vue: 'Vue'
-                }
+                },
             }
         }
     }

package/src/styles/variables.css

@@ -1,158 +0,0 @@
-.srcker-html-content {
-    outline: none;
-    min-height: 100%;
-    font-size: 16px;
-    line-height: 1.6;
-    outline: none;
-    color: var(--color);
-    background: var(--background);
-}
-
-/* ===== focus ===== */
-.srcker-html-content .is-focused {
-    background: var(--hover-background);
-}
-
-/* ===== placeholder ===== */
-.srcker-html-content p.is-editor-empty:first-child::before {
-    color: #888;
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
-}
-
-/* ===== list ===== */
-.srcker-html-content ul,
-.srcker-html-content ol {
-    padding-left: 1.5rem;
-    margin: 0.5rem 0;
-}
-
-.srcker-html-content ul[style*="list-style-type"],
-.srcker-html-content ol[style*="list-style-type"] {
-    padding-left: 40px !important;
-}
-
-.srcker-html-content ul li,
-.srcker-html-content ol li {
-    padding: 0;
-    margin: 0;
-}
-
-/* ===== blockquote ===== */
-.srcker-html-content blockquote {
-    border-left: 3px solid var(--border-color);
-    margin: 1rem 0;
-    padding-left: 1rem;
-    font-style: italic;
-    color: #555;
-    background: rgba(0, 0, 0, 0.02);
-}
-
-/* ===== inline code ===== */
-.srcker-html-content code {
-    background: #f0f0f0;
-    color: #c7254e;
-    border-radius: 4px;
-    font-size: 12px;
-    padding: 0.25em 0.3em;
-    font-family: 'JetBrainsMono', monospace;
-}
-
-/* ===== code block ===== */
-.srcker-html-content pre {
-    background: #000;
-    border-radius: 5px;
-    color: #fff;
-    font-family: 'JetBrainsMono', monospace;
-    margin: 15px 0;
-    padding: 5px 10px;
-}
-
-.srcker-html-content pre code {
-    background: none;
-    color: inherit;
-    font-size: 12px;
-    padding: 0;
-}
-
-/* ===== hr ===== */
-.srcker-html-content hr {
-    border: none;
-    border-top: 1px solid #ccc;
-    margin: 20px 0;
-}
-
-/* ===== link ===== */
-.srcker-html-content a {
-    color: #1890ff;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-/* ===== heading ===== */
-.srcker-html-content h1,
-.srcker-html-content h2,
-.srcker-html-content h3,
-.srcker-html-content h4,
-.srcker-html-content h5,
-.srcker-html-content h6 {
-    margin-top: 1em;
-    margin-bottom: 0.5em;
-    line-height: 1.3;
-    padding-left: 0 !important;
-}
-
-/* ===== image ===== */
-.srcker-html-content img.resizable-image {
-    cursor: pointer;
-    transition: opacity 0.2s;
-}
-
-.srcker-html-content img.resizable-image:hover {
-    opacity: 0.8;
-}
-
-.srcker-html-content img {
-    max-width: 100%;
-}
-
-
-.srcker-html-content.light blockquote {
-    color: #555;
-    background: rgba(0, 0, 0, 0.02);
-}
-
-.srcker-html-content.light code {
-    background: #f0f0f0;
-    color: #c7254e;
-}
-
-.srcker-html-content.light pre {
-    background: #f6f8fa;
-    color: #24292e;
-}
-
-.srcker-html-content.light hr {
-    border-top-color: rgba(0, 0, 0, 0.12);
-}
-
-
-.srcker-html-content.dark blockquote {
-    color: #aaa;
-}
-
-.srcker-html-content.dark code {
-    background: #333;
-    color: #fff;
-}
-
-.srcker-html-content.dark pre {
-    background: #000;
-    color: #fff;
-}
-
-.srcker-html-content.dark hr {
-    border-top-color: rgba(255, 255, 255, 0.15);
-}