vue2-premium-bbl-editor 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -5,6 +5,39 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.2] - 2024-01-18
+
+### Added
+- **Documentation**: Comprehensive troubleshooting guide for "Loading Premium Editor..." issue
+- **Setup Guide**: Quick setup instructions with one-command installation
+- **Peer Dependencies**: Complete list of required Tiptap dependencies in package.json
+
+### Improved
+- Better error handling documentation
+- Step-by-step setup instructions for Vue 2.6 projects
+- Nuxt.js specific setup instructions
+
+### Fixed
+- Documentation for Vue Composition API requirement in Vue 2.6
+- Clear instructions for resolving loading state issues
+
+## [1.0.1] - 2024-01-18
+
+### Fixed
+- **Critical**: Resolved Vue case sensitivity issue in CommonJS build that caused `CaseSensitivePathsPlugin` errors when importing in other projects
+- Fixed externals configuration to properly handle Vue module resolution across different build formats
+- Updated repository URLs to correct GitHub path (Mahadi74/vue2-premium-bbl-editor)
+
+### Improved
+- **Bundle Size**: Reduced minified bundle size from 440KB to 213KB (51KB gzipped)
+- Better externals configuration for Tiptap dependencies
+- Added proper Vue runtime alias for consistent module resolution
+
+### Technical
+- Fixed webpack externals to use proper format for different module systems (CommonJS, UMD, AMD)
+- Added comprehensive externals list for all Tiptap extensions
+- Improved build configuration for library distribution
+
 ## [1.0.0] - 2024-01-18
 
 ### Added

package/OPTIMIZATION_GUIDE.md

@@ -0,0 +1,64 @@
+# Bundle Size Optimization Guide
+
+## Current Status: ✅ Published Successfully!
+- Package: vue2-premium-bbl-editor@1.0.0
+- Size: 440 KiB minified (124 KiB gzipped)
+- Status: **Acceptable for a full-featured editor**
+
+## Size Comparison with Popular Editors:
+- **CKEditor 5**: ~200-300 KB gzipped
+- **TinyMCE**: ~150-250 KB gzipped
+- **Quill**: ~100-150 KB gzipped
+- **Your Editor**: ~124 KB gzipped ✅ **Competitive!**
+
+## Future Optimization Options (v2.0+):
+
+### 1. Tree Shaking Improvements
+```javascript
+// Allow users to import only what they need
+import { PremiumBblEditor, BasicToolbar } from 'vue2-premium-bbl-editor/lite'
+```
+
+### 2. Extension Splitting
+```javascript
+// Separate heavy extensions
+import ImageExtension from 'vue2-premium-bbl-editor/extensions/image'
+import TableExtension from 'vue2-premium-bbl-editor/extensions/table'
+```
+
+### 3. Dynamic Imports
+```javascript
+// Lazy load heavy features
+const TableExtension = () => import('./extensions/table')
+```
+
+### 4. Build Variants
+- `vue2-premium-bbl-editor/lite` - Basic editor (50KB)
+- `vue2-premium-bbl-editor/standard` - Current version (124KB)
+- `vue2-premium-bbl-editor/full` - All features (200KB)
+
+## Current Bundle Analysis:
+- **Tiptap Core**: ~40KB
+- **ProseMirror**: ~60KB
+- **Extensions**: ~20KB
+- **Your Components**: ~4KB
+
+## Recommendations:
+1. **Keep current size** - It's competitive and feature-complete
+2. **Monitor usage** - See which features users actually use
+3. **Consider lite version** - For users who need basic editing only
+4. **External dependencies** - Let users provide their own Tiptap if needed
+
+## Performance Tips for Users:
+```javascript
+// Code splitting
+const Editor = () => import('vue2-premium-bbl-editor')
+
+// Lazy loading
+Vue.component('PremiumBblEditor', () => import('vue2-premium-bbl-editor'))
+
+// CDN usage
+<script src="https://unpkg.com/vue2-premium-bbl-editor"></script>
+```
+
+Your current bundle size is **excellent** for a production-ready editor! 🎉

package/QUICK_SETUP.md

@@ -0,0 +1,70 @@
+# Quick Setup Guide
+
+## 🚀 One-Command Installation
+
+Copy and paste this command to install everything you need:
+
+```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
+```
+
+## 📝 Setup Code
+
+**1. Update your main.js:**
+```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. **Clear node_modules and reinstall:**
+   ```bash
+   rm -rf node_modules package-lock.json
+   npm install
+   ```
+
+2. **Check for console errors** in browser DevTools
+
+3. **See TROUBLESHOOTING.md** for detailed solutions
+
+4. **Create an issue:** https://github.com/Mahadi74/vue2-premium-bbl-editor/issues

package/TROUBLESHOOTING.md

@@ -0,0 +1,397 @@
+# Troubleshooting Guide
+
+# Troubleshooting Guide
+
+## Common Issues and Solutions
+
+### 🔄 "Loading Premium Editor..." Stuck Issue
+
+**Problem:** Editor shows "Loading Premium Editor..." and never loads
+
+**Root Causes & Solutions:**
+
+#### 1. Missing Peer Dependencies
+The most common cause is missing Tiptap dependencies.
+
+**Solution:**
+```bash
+# Install all required peer dependencies
+npm install @tiptap/core @tiptap/vue-2 @tiptap/starter-kit
+npm install @tiptap/extension-text-style @tiptap/extension-color
+npm install @tiptap/extension-highlight @tiptap/extension-underline
+npm install @tiptap/extension-text-align @tiptap/extension-link
+npm install @tiptap/extension-font-family @tiptap/extension-code
+npm install @tiptap/extension-code-block @tiptap/extension-table
+npm install @tiptap/extension-table-row @tiptap/extension-table-cell
+npm install @tiptap/extension-table-header @tiptap/extension-task-list
+npm install @tiptap/extension-task-item @tiptap/extension-placeholder
+
+# Or install all at once
+npm install @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
+```
+
+#### 2. Vue Composition API Missing (Vue 2.6)
+The editor uses Vue Composition API which needs to be installed for Vue 2.6.
+
+**Solution:**
+```bash
+npm install @vue/composition-api
+```
+
+Then in your main.js:
+```javascript
+import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
+
+Vue.use(VueCompositionAPI)
+```
+
+#### 3. Incorrect Import/Registration
+
+**Problem:** Component not properly registered
+
+**Solution:**
+```javascript
+// Method 1: Global Registration (Recommended)
+import Vue from 'vue'
+import PremiumBblEditor from 'vue2-premium-bbl-editor'
+
+Vue.use(PremiumBblEditor)
+
+// Method 2: Component Registration
+import { PremiumBblEditor } from 'vue2-premium-bbl-editor'
+
+export default {
+  components: {
+    PremiumBblEditor
+  }
+}
+```
+
+#### 4. CSS Not Loaded
+
+**Problem:** Missing styles cause layout issues
+
+**Solution:**
+```javascript
+// Import CSS in main.js
+import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
+```
+
+#### 5. Build Configuration Issues
+
+**Problem:** Webpack/build tools not handling the package correctly
+
+**Solution for Vue CLI:**
+```javascript
+// vue.config.js
+module.exports = {
+  transpileDependencies: [
+    'vue2-premium-bbl-editor',
+    '@tiptap/core',
+    '@tiptap/vue-2'
+  ]
+}
+```
+
+**Solution for Nuxt.js:**
+```javascript
+// nuxt.config.js
+export default {
+  plugins: [
+    { src: '~/plugins/editor.js', mode: 'client' }
+  ],
+  css: [
+    'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
+  ]
+}
+```
+
+```javascript
+// plugins/editor.js
+import Vue from 'vue'
+import PremiumBblEditor from 'vue2-premium-bbl-editor'
+
+Vue.use(PremiumBblEditor)
+```
+
+### 🔧 Quick Debug Steps
+
+1. **Check Console Errors:**
+   Open browser DevTools and look for JavaScript errors
+
+2. **Verify Dependencies:**
+   ```bash
+   npm list @tiptap/core @tiptap/vue-2
+   ```
+
+3. **Test Minimal Setup:**
+   ```vue
+   <template>
+     <div>
+       <PremiumBblEditor 
+         v-model="content" 
+         placeholder="Test editor..."
+       />
+     </div>
+   </template>
+
+   <script>
+   export default {
+     data() {
+       return {
+         content: '<p>Hello World!</p>'
+       }
+     }
+   }
+   </script>
+   ```
+
+4. **Check Network Tab:**
+   Ensure all assets are loading correctly
+
+### 📋 Complete Working Setup Example
+
+**main.js:**
+```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'
+
+Vue.use(VueCompositionAPI)
+Vue.use(PremiumBblEditor)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```
+
+**Component:**
+```vue
+<template>
+  <div class="editor-container">
+    <PremiumBblEditor
+      v-model="content"
+      placeholder="Start writing..."
+      @ready="onEditorReady"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: '<p>Welcome to the editor!</p>'
+    }
+  },
+  methods: {
+    onEditorReady(editor) {
+      console.log('Editor is ready!', editor)
+    }
+  }
+}
+</script>
+```
+
+---
+
+## ✅ Fixed in v1.0.1: Case Sensitivity Error
+
+**Error:**
+```
+Module not found: Error: [CaseSensitivePathsPlugin] `/path/to/node_modules/Vue/dist/vue.runtime.esm.js` does not match the corresponding path on disk `vue`.
+```
+
+**Solution:**
+Update to version 1.0.1 or later:
+```bash
+npm update vue2-premium-bbl-editor
+```
+
+This issue was caused by incorrect externals configuration in the webpack build and has been completely resolved.
+
+---
+
+## Installation Issues
+
+### 1. Peer Dependency Warnings
+
+**Issue:** Warnings about Vue 2 peer dependencies
+
+**Solution:**
+```bash
+npm install vue@^2.6.0 --save
+npm install vue2-premium-bbl-editor
+```
+
+### 2. TypeScript Errors
+
+**Issue:** TypeScript cannot find module declarations
+
+**Solution:**
+The package includes TypeScript definitions. If you're still getting errors:
+
+```typescript
+// Add to your types or declarations file
+declare module 'vue2-premium-bbl-editor'
+```
+
+### 3. CSS Not Loading
+
+**Issue:** Editor appears unstyled
+
+**Solution:**
+Import the CSS manually:
+```javascript
+import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
+```
+
+Or use the CDN:
+```html
+<link rel="stylesheet" href="https://unpkg.com/vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css">
+```
+
+---
+
+## Build Issues
+
+### 1. Bundle Size Warnings
+
+**Issue:** Webpack warnings about large bundle size
+
+**Solution:**
+These warnings are normal for rich text editors. The gzipped size is only 51KB, which is excellent. To reduce warnings:
+
+```javascript
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    performance: {
+      maxAssetSize: 1000000,
+      maxEntrypointSize: 1000000
+    }
+  }
+}
+```
+
+### 2. Transpilation Issues
+
+**Issue:** Build errors with older browsers
+
+**Solution:**
+Add to your `vue.config.js`:
+```javascript
+module.exports = {
+  transpileDependencies: [
+    'vue2-premium-bbl-editor'
+  ]
+}
+```
+
+---
+
+## Runtime Issues
+
+### 1. Editor Not Rendering
+
+**Issue:** Component doesn't appear
+
+**Solution:**
+1. Ensure Vue 2.6+ is installed
+2. Check that the component is properly registered:
+```javascript
+import PremiumBblEditor from 'vue2-premium-bbl-editor'
+Vue.use(PremiumBblEditor)
+```
+
+### 2. Content Not Updating
+
+**Issue:** v-model not working
+
+**Solution:**
+Use the correct event handling:
+```vue
+<template>
+  <PremiumBblEditor
+    v-model="content"
+    @input="handleInput"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: '<p>Initial content</p>'
+    }
+  },
+  methods: {
+    handleInput(newContent) {
+      console.log('Content updated:', newContent)
+    }
+  }
+}
+</script>
+```
+
+---
+
+## Performance Issues
+
+### 1. Slow Loading
+
+**Issue:** Editor takes time to load
+
+**Solution:**
+Use dynamic imports for better performance:
+```javascript
+const PremiumBblEditor = () => import('vue2-premium-bbl-editor')
+
+export default {
+  components: {
+    PremiumBblEditor
+  }
+}
+```
+
+### 2. Memory Leaks
+
+**Issue:** Memory usage increases over time
+
+**Solution:**
+Ensure proper cleanup:
+```javascript
+beforeDestroy() {
+  // Editor cleanup is handled automatically
+  // But you can add custom cleanup here
+}
+```
+
+---
+
+## Getting Help
+
+If you encounter issues not covered here:
+
+1. **Check the version**: Make sure you're using the latest version
+   ```bash
+   npm list vue2-premium-bbl-editor
+   ```
+
+2. **GitHub Issues**: https://github.com/Mahadi74/vue2-premium-bbl-editor/issues
+
+3. **NPM Package**: https://www.npmjs.com/package/vue2-premium-bbl-editor
+
+4. **Documentation**: See README.md for full API documentation
+
+---
+
+## Version History
+
+- **v1.0.1**: Fixed case sensitivity issue, reduced bundle size
+- **v1.0.0**: Initial release
+
+Always use the latest version for the best experience and latest fixes.