vue2-bbl-editor 1.3.0

package/QUICK_SETUP.md

@@ -0,0 +1,99 @@
+# Quick Setup Guide
+
+## 🔍 NEW: Diagnostic Tool
+
+If you're experiencing the "Loading Premium Editor..." issue, use our diagnostic tool first:
+
+```vue
+<template>
+  <div>
+    <DiagnosticTool />
+  </div>
+</template>
+
+<script>
+import { DiagnosticTool } from 'vue2-premium-bbl-editor'
+
+export default {
+  components: { DiagnosticTool }
+}
+</script>
+```
+
+The diagnostic tool will:
+- ✅ Check all required dependencies
+- ❌ Show exactly what's missing
+- 📋 Provide copy-paste install commands
+- 🧪 Test the editor once dependencies are installed
+
+## ⚠️ IMPORTANT: Complete Installation Required
+
+The editor shows "Loading Premium Editor..." when dependencies are missing. You need ALL of these:
+
+## 🚀 Complete Installation (Copy & Paste)
+
+**Step 1: Install ALL dependencies at once:**
+```bash
+npm install vue2-premium-bbl-editor @vue/composition-api @tiptap/core @tiptap/vue-2 @tiptap/starter-kit @tiptap/extension-text-style @tiptap/extension-color @tiptap/extension-highlight @tiptap/extension-underline @tiptap/extension-text-align @tiptap/extension-link @tiptap/extension-font-family @tiptap/extension-code @tiptap/extension-code-block @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-cell @tiptap/extension-table-header @tiptap/extension-task-list @tiptap/extension-task-item @tiptap/extension-placeholder prosemirror-commands prosemirror-dropcursor prosemirror-gapcursor prosemirror-history prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-tables prosemirror-transform prosemirror-view
+```
+
+**Step 2: Setup main.js (REQUIRED for Vue 2.6):**
+```javascript
+import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
+import PremiumBblEditor from 'vue2-premium-bbl-editor'
+import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
+import App from './App.vue'
+
+// Required for Vue 2.6
+Vue.use(VueCompositionAPI)
+
+// Register the editor
+Vue.use(PremiumBblEditor)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```
+
+**2. Use in your component:**
+```vue
+<template>
+  <div>
+    <PremiumBblEditor
+      v-model="content"
+      placeholder="Start writing..."
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: '<p>Hello World!</p>'
+    }
+  }
+}
+</script>
+```
+
+## ✅ That's it!
+
+Your editor should now load properly without the "Loading Premium Editor..." message.
+
+## 🔧 If Still Having Issues
+
+1. **Use the Diagnostic Tool first** (see above)
+
+2. **Clear node_modules and reinstall:**
+   ```bash
+   rm -rf node_modules package-lock.json
+   npm install
+   ```
+
+3. **Check for console errors** in browser DevTools
+
+4. **See TROUBLESHOOTING.md** for detailed solutions
+
+5. **Create an issue:** https://github.com/Mahadi74/vue2-premium-bbl-editor/issues