fix: sticky toolbar & vue warns

examples/App.vue

@@ -1,38 +1,27 @@
 <template>
-  <div
-    style="
-      padding: 24px;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      max-width: 1024px;
-      gap: 24px;
-      margin: 0 auto;
-    "
-  >
-    <div style="display: flex; gap: 12px">
+  <div>
+    <header class="p-3 flex gap-3 justify-center w-full bg-gray-100 text-black">
       <button ghost @click="locale.setLang('zhHans')">中文</button>
       <button ghost @click="locale.setLang('en')">English</button>
       <button ghost @click="theme = 'dark'">dark</button>
       <button ghost @click="theme = null">light</button>
       <button ghost @click="hideToolbar = !hideToolbar">{{ !hideToolbar ? 'Hide Toolbar' : 'Show Toolbar' }}</button>
       <button ghost @click="disabled = !disabled">{{ disabled ? 'Editable' : 'Readonly' }}</button>
       <a href="https://github.com/Seedsa/echo-editor" target="__blank">Github</a>
-    </div>
-    <echo-editor
-      v-model="content"
-      :extensions="extensions"
-      :max-height="1024"
-      :hideToolbar="hideToolbar"
-      :disabled="disabled"
-      :min-height="512"
-      output="html"
-      maxWidth="900"
-      :dark="theme === 'dark'"
-    >
-    </echo-editor>
-    <div title="content" style="margin-top: 20px">
-      {{ content }}
+    </header>
+    <div class="my-0 mx-auto max-w-[1024px] p-6">
+      <echo-editor
+        v-model="content"
+        :extensions="extensions"
+        :hideToolbar="hideToolbar"
+        :disabled="disabled"
+        output="html"
+        :dark="theme === 'dark'"
+      >
+      </echo-editor>
+      <div class="mt-3 text-sm text-zinc-700">
+        {{ content }}
+      </div>
     </div>
   </div>
 </template>

examples/main.ts

@@ -1,10 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import EchoEditor from 'echo-editor'
+import './style.css'
 import 'echo-editor/style.css'
-
 const app = createApp(App)
-
 app.use(EchoEditor)
 
 app.mount('#app')

examples/package.json

@@ -7,6 +7,8 @@
   },
   "dependencies": {
     "echo-editor": "workspace:*",
+    "sass": "^1.75.0",
+    "tailwindcss": "^3.4.3",
     "lowlight": "^3.1.0",
     "openai": "4.47.1",
     "prosemirror-docx": "latest",

examples/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/tailwind.config.js

@@ -1,93 +1,8 @@
-const animate = require('tailwindcss-animate')
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ['class'],
-  safelist: ['dark'],
-  prefix: '',
-
-  content: [
-    './pages/**/*.{ts,tsx,vue}',
-    './components/**/*.{ts,tsx,vue}',
-    './app/**/*.{ts,tsx,vue}',
-    './src/**/*.{ts,tsx,vue}',
-  ],
-
+  content: ['./App.vue'],
   theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        xl: 'calc(var(--radius) + 4px)',
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: 0 },
-        },
-        'collapsible-down': {
-          from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
-        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
-      },
-    },
+    extend: {},
   },
-  plugins: [animate],
+  plugins: [],
 }

examples/vite.config.ts

@@ -2,7 +2,15 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import svgLoader from 'vite-svg-loader'
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+
 export default defineConfig({
+  css: {
+    postcss: {
+      plugins: [tailwind(), autoprefixer()],
+    },
+  },
   plugins: [vue(), svgLoader()],
   build: {
     outDir: path.resolve(__dirname, '../dist'),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "echo-editor",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "private": false,
   "license": "MIT",
   "description": "A modern WYSIWYG rich-text editor using tiptap for Vue.js",