@srcker/editor-vue-next 1.0.1

package/src/styles/variables.css

@@ -0,0 +1,158 @@
+.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);
+}

package/src/styles/variables.scss

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

package/src/types.js

@@ -0,0 +1 @@
+export {};

package/src/types.ts

@@ -0,0 +1,7 @@
+/**
+ * 上传返回结构
+ */
+export interface UploadImageResult {
+	url: string
+	name?: string
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "jsx": "preserve",
+        "skipLibCheck": true,
+        "baseUrl": "."
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue"
+    ]
+}
+

package/vite.config.ts

@@ -0,0 +1,29 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import path from 'path'
+
+export default defineConfig({
+    plugins: [vue()],
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, 'src/index.ts'),
+            name: 'RichEditor',
+            fileName: (format) => `rich-editor.${format}.js`
+        },
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, 'src') // 让 Rollup 识别 @
+            }
+        },
+        rollupOptions: {
+            external: ['vue'],
+            output: {
+                globals: {
+                    vue: 'Vue'
+                }
+            }
+        }
+    }
+})