vue2-premium-bbl-editor 1.2.8 → 1.3.0

package/README.md

@@ -24,20 +24,9 @@ A production-ready, fully configurable rich text editor for Vue 2.6 applications
 npm install vue2-premium-bbl-editor
 ```
 
-### Required Dependencies
+### PREVIEW
 
-The editor requires these peer dependencies to be installed in your project:
-
-```bash
-npm install @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
-```
-
-### Quick Install Script
-
-```bash
-# Install the editor and all dependencies at once
-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
-```
+<img src="https://raw.githubusercontent.com/Mahadi74/vue2-premium-bbl-editor/refs/heads/main/public/preview.png?token=GHSAT0AAAAAAC2VZAZN5WMWV2SNVXGIKHW22LOIILA" width="100"/>
 
 ## 🎯 Quick Start
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-premium-bbl-editor",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "description": "A production-ready, fully configurable rich text editor for Vue 2.6 built with Tiptap",
   "main": "dist/vue2-premium-bbl-editor.common.js",
   "module": "dist/vue2-premium-bbl-editor.esm.js",
@@ -8,11 +8,15 @@
   "types": "types/index.d.ts",
   "files": [
     "dist/*",
-    "src/*",
     "types/*",
-    "examples/*",
-    "*.json",
-    "*.md"
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "INSTALLATION.md",
+    "QUICK_SETUP.md",
+    "COMPONENT_USAGE_GUIDE.md",
+    "EXTERNAL_INTEGRATION_GUIDE.md",
+    "PACKAGE_DOCUMENTATION.md"
   ],
   "keywords": [
     "vue",

package/API_SUPPORT_GUIDE.md

@@ -1,319 +0,0 @@
-# 🎯 API Support Guide - Options API & Composition API
-
-The BBL Editor now supports **both Vue Options API and Composition API**, making it compatible with all Vue 2.6+ projects regardless of your preferred coding style.
-
-## 🚀 Quick Start
-
-### Option 1: Options API (No Composition API Required)
-
-Perfect for traditional Vue 2 projects that don't use Composition API:
-
-```vue
-<template>
-  <div>
-    <PremiumBblEditorOptionsAPI v-model="content" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      content: '<p>Hello World!</p>'
-    }
-  }
-}
-</script>
-```
-
-**Installation:**
-```bash
-npm install vue2-premium-bbl-editor
-# No need for @vue/composition-api!
-```
-
-**Setup (main.js):**
-```javascript
-import Vue from 'vue'
-import PremiumBblEditor from 'vue2-premium-bbl-editor'
-import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
-
-Vue.use(PremiumBblEditor)
-```
-
-### Option 2: Composition API
-
-For projects using Vue Composition API:
-
-```vue
-<template>
-  <div>
-    <PremiumBblEditor v-model="content" />
-  </div>
-</template>
-
-<script>
-import { ref } from '@vue/composition-api'
-
-export default {
-  setup() {
-    const content = ref('<p>Hello World!</p>')
-    return { content }
-  }
-}
-</script>
-```
-
-**Installation:**
-```bash
-npm install vue2-premium-bbl-editor @vue/composition-api
-```
-
-**Setup (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'
-
-Vue.use(VueCompositionAPI) // Required for Composition API
-Vue.use(PremiumBblEditor)
-```
-
-## 📋 Component Comparison
-
-| Feature | PremiumBblEditor | PremiumBblEditorOptionsAPI |
-|---------|------------------|---------------------------|
-| **API Style** | Composition API | Options API |
-| **Dependencies** | Requires @vue/composition-api | No extra dependencies |
-| **Performance** | Slightly better reactivity | Traditional Vue 2 performance |
-| **Bundle Size** | Same | Same |
-| **Features** | All features | All features |
-| **Compatibility** | Vue 2.6+ with Composition API | Vue 2.6+ (any setup) |
-
-## 🎯 Which One Should You Use?
-
-### Use `PremiumBblEditorOptionsAPI` if:
-- ✅ You're working with a traditional Vue 2 project
-- ✅ You don't want to install @vue/composition-api
-- ✅ Your team prefers Options API syntax
-- ✅ You're getting "Loading Premium Editor..." issues with the Composition API version
-
-### Use `PremiumBblEditor` if:
-- ✅ You're already using Vue Composition API in your project
-- ✅ You prefer the Composition API syntax
-- ✅ You're planning to migrate to Vue 3 eventually
-- ✅ You want the latest reactive features
-
-## 🔧 Advanced Usage
-
-### Options API with Full Configuration
-
-```vue
-<template>
-  <div>
-    <PremiumBblEditorOptionsAPI
-      v-model="content"
-      placeholder="Start writing..."
-      :toolbar-config="toolbarConfig"
-      :extension-config="extensionConfig"
-      :max-height="500"
-      :show-toolbar="true"
-      @ready="onEditorReady"
-      @error="onEditorError"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      content: '<p>Welcome!</p>',
-      toolbarConfig: {
-        bold: true,
-        italic: true,
-        underline: true,
-        textColor: true,
-        highlight: true,
-        link: true,
-        image: true,
-        table: true
-      },
-      extensionConfig: {
-        textAlign: {
-          types: ['heading', 'paragraph']
-        },
-        link: {
-          openOnClick: false,
-          autolink: true
-        }
-      }
-    }
-  },
-  methods: {
-    onEditorReady(editor) {
-      console.log('Editor ready!', editor)
-    },
-    
-    onEditorError(error) {
-      console.error('Editor error:', error)
-    }
-  }
-}
-</script>
-```
-
-### Composition API with Full Configuration
-
-```vue
-<template>
-  <div>
-    <PremiumBblEditor
-      v-model="content"
-      placeholder="Start writing..."
-      :toolbar-config="toolbarConfig"
-      :extension-config="extensionConfig"
-      :max-height="500"
-      :show-toolbar="true"
-      @ready="onEditorReady"
-      @error="onEditorError"
-    />
-  </div>
-</template>
-
-<script>
-import { ref, reactive } from '@vue/composition-api'
-
-export default {
-  setup() {
-    const content = ref('<p>Welcome!</p>')
-    
-    const toolbarConfig = reactive({
-      bold: true,
-      italic: true,
-      underline: true,
-      textColor: true,
-      highlight: true,
-      link: true,
-      image: true,
-      table: true
-    })
-    
-    const extensionConfig = reactive({
-      textAlign: {
-        types: ['heading', 'paragraph']
-      },
-      link: {
-        openOnClick: false,
-        autolink: true
-      }
-    })
-    
-    const onEditorReady = (editor) => {
-      console.log('Editor ready!', editor)
-    }
-    
-    const onEditorError = (error) => {
-      console.error('Editor error:', error)
-    }
-    
-    return {
-      content,
-      toolbarConfig,
-      extensionConfig,
-      onEditorReady,
-      onEditorError
-    }
-  }
-}
-</script>
-```
-
-## 🔍 Troubleshooting
-
-### "Loading Premium Editor..." Issue
-
-If you're seeing this issue:
-
-1. **Try Options API version first:**
-   ```vue
-   <PremiumBblEditorOptionsAPI v-model="content" />
-   ```
-
-2. **Use the Diagnostic Tool:**
-   ```vue
-   <template>
-     <div>
-       <DiagnosticTool />
-       <PremiumBblEditorOptionsAPI v-model="content" />
-     </div>
-   </template>
-   ```
-
-3. **Check dependencies:**
-   ```bash
-   npm list vue2-premium-bbl-editor
-   ```
-
-### Migration Between APIs
-
-**From Composition API to Options API:**
-```vue
-<!-- Before (Composition API) -->
-<PremiumBblEditor v-model="content" />
-
-<!-- After (Options API) -->
-<PremiumBblEditorOptionsAPI v-model="content" />
-```
-
-**From Options API to Composition API:**
-1. Install Composition API: `npm install @vue/composition-api`
-2. Register in main.js: `Vue.use(VueCompositionAPI)`
-3. Update component:
-   ```vue
-   <!-- Before (Options API) -->
-   <PremiumBblEditorOptionsAPI v-model="content" />
-   
-   <!-- After (Composition API) -->
-   <PremiumBblEditor v-model="content" />
-   ```
-
-## 📦 Import Options
-
-### Named Imports
-```javascript
-import { 
-  PremiumBblEditor,           // Composition API version
-  PremiumBblEditorOptionsAPI, // Options API version
-  DiagnosticTool,
-  DebugHelper 
-} from 'vue2-premium-bbl-editor'
-```
-
-### Global Registration
-```javascript
-import Vue from 'vue'
-import PremiumBblEditor from 'vue2-premium-bbl-editor'
-
-Vue.use(PremiumBblEditor)
-
-// Now both components are available globally:
-// <PremiumBblEditor />
-// <PremiumBblEditorOptionsAPI />
-```
-
-## 🎉 Benefits
-
-✅ **Maximum Compatibility** - Works with any Vue 2.6+ project  
-✅ **No Breaking Changes** - Existing code continues to work  
-✅ **Flexible Architecture** - Choose the API that fits your project  
-✅ **Same Features** - Both versions have identical functionality  
-✅ **Easy Migration** - Switch between APIs with minimal changes  
-✅ **Better Debugging** - Options API version eliminates Composition API issues  
-
-## 🚀 Recommendation
-
-For **new projects** or if you're having issues with the Composition API version, we recommend starting with `PremiumBblEditorOptionsAPI` as it has fewer dependencies and is more compatible with existing Vue 2 projects.
-
-You can always migrate to the Composition API version later when you're ready to adopt Vue Composition API across your project.

package/CLEANUP_SUMMARY.md

@@ -1,111 +0,0 @@
-# Code Cleanup & Standardization Summary - v1.2.7
-
-## 🎯 Objectives Completed
-
-✅ **Remove unused code** - Eliminated redundant methods and console.log statements  
-✅ **Standardize upload logic** - Created unified upload system for both Image and Video modals  
-✅ **Bug-free implementation** - Thoroughly tested and validated all upload functionality  
-✅ **Clean documentation** - Removed outdated and redundant documentation files  
-
-## 🧹 Code Cleanup Actions
-
-### 1. Created Standardized Upload System
-- **New File**: `src/mixins/uploadMixin.js` - Shared upload functionality
-- **Unified Logic**: Both ImageModal and VideoModal now use the same upload system
-- **Consistent Props**: Standardized `uploadHandler`, `uploadManager`, `maxFileSize`, `allowedTypes`
-- **Error Handling**: Unified error messages and user feedback
-
-### 2. Refactored Modal Components
-- **ImageModal**: Completely rewritten using uploadMixin
-- **VideoModal**: Updated to use standardized upload system
-- **Removed Duplication**: Eliminated ~200 lines of duplicate upload code
-- **Enhanced Features**: Added progress indicators, error handling, and retry functionality
-
-### 3. Documentation Cleanup
-Removed outdated/redundant files:
-- ❌ `UPLOAD_HANDLER_FIX.md` - Issue resolved in codebase
-- ❌ `PUBLICATION_SUCCESS.md` - Outdated version info
-- ❌ `PUBLISH_STEPS.md` - Covered in PUBLISH_GUIDE.md
-- ❌ `RELEASE_NOTES_v1.0.5.md` - Old version notes
-- ❌ `DUAL_API_RELEASE_SUMMARY.md` - Now standard functionality
-- ❌ `LOCAL_DEVELOPMENT_FIXES.md` - Issues resolved
-
-### 4. Code Quality Improvements
-- **Removed Console Logs**: Cleaned up debug statements
-- **Eliminated Unused Methods**: Removed redundant functions
-- **Standardized Validation**: Consistent file type and size validation
-- **Better Error Messages**: User-friendly error handling
-
-## 🚀 New Features Added
-
-### VideoModal Enhancements
-- ✅ **Upload Progress**: Real-time progress indicators
-- ✅ **Error Handling**: Retry functionality with fallback options
-- ✅ **Upload Manager Support**: Full compatibility with new upload system
-- ✅ **File Validation**: Proper video file type and size validation
-
-### Upload System Improvements
-- ✅ **Unified API**: Same interface for both uploadHandler and uploadManager
-- ✅ **Better Validation**: Configurable file size limits and type restrictions
-- ✅ **Progress Tracking**: Consistent progress reporting across all uploads
-- ✅ **Error Recovery**: Retry mechanisms and fallback options
-
-## 📊 Impact Summary
-
-### Code Reduction
-- **Removed**: ~300 lines of duplicate code
-- **Consolidated**: Upload logic into single mixin
-- **Eliminated**: 6 redundant documentation files
-- **Cleaned**: All console.log statements and unused methods
-
-### Functionality Improvements
-- **Standardized**: Upload behavior across Image and Video modals
-- **Enhanced**: Error handling and user feedback
-- **Added**: Progress indicators for video uploads
-- **Improved**: File validation and size limits
-
-### Maintainability
-- **Single Source**: Upload logic centralized in uploadMixin
-- **Consistent**: Props and methods across components
-- **Testable**: Isolated upload functionality
-- **Extensible**: Easy to add new upload features
-
-## 🔧 Technical Details
-
-### Upload Mixin Features
-```javascript
-// Shared functionality
-- validateFile(file, fileType)
-- handleApiUpload(file)
-- handleLegacyUpload(file)
-- autoUpload(file)
-- retryUpload(file)
-- getErrorMessage(error)
-- formatFileSize(bytes)
-- resetUploadState()
-```
-
-### Props Standardization
-```javascript
-// Consistent across all modals
-uploadHandler: Function
-uploadManager: Object
-maxFileSize: Number
-allowedTypes: Array
-```
-
-## ✅ Quality Assurance
-
-- **Build Success**: All builds complete without errors
-- **No Diagnostics**: Clean code with no linting issues
-- **Backward Compatible**: Existing implementations continue to work
-- **Tested**: Upload functionality verified for both image and video files
-
-## 📦 Published Version
-
-**Package**: `vue2-premium-bbl-editor@1.2.7`  
-**Size**: 1.3 MB (package), 7.1 MB (unpacked)  
-**Files**: 136 files included  
-**Status**: ✅ Successfully published to npm  
-
-The codebase is now cleaner, more maintainable, and provides a standardized upload experience across all media types.

package/COMPATIBILITY_GUIDE.md

@@ -1,150 +0,0 @@
-# 🔧 Compatibility Guide - JavaScript Syntax Errors
-
-## 🚨 Common Error: "Unexpected token '!'"
-
-If you're seeing this error when using the package:
-
-```
-Uncaught SyntaxError: Unexpected token '!' (at index.js:189:16)
-```
-
-This is caused by modern JavaScript syntax (nullish coalescing `??` or optional chaining `?.`) not being transpiled for older browsers or build systems.
-
-## ✅ Solutions
-
-### Solution 1: Update to Latest Version (Recommended)
-
-Update to the latest version which includes better transpilation:
-
-```bash
-npm update vue2-premium-bbl-editor
-```
-
-### Solution 2: Configure Your Project's Babel
-
-Add these babel plugins to your project's `babel.config.js`:
-
-```javascript
-module.exports = {
-  presets: [
-    ['@babel/preset-env', {
-      targets: {
-        browsers: ['> 1%', 'last 2 versions', 'not dead']
-      }
-    }]
-  ],
-  plugins: [
-    '@babel/plugin-transform-optional-chaining',
-    '@babel/plugin-transform-nullish-coalescing-operator'
-  ]
-}
-```
-
-Install the required plugins:
-
-```bash
-npm install --save-dev @babel/plugin-transform-optional-chaining @babel/plugin-transform-nullish-coalescing-operator
-```
-
-### Solution 3: Transpile Dependencies in Vue CLI
-
-If using Vue CLI, add this to your `vue.config.js`:
-
-```javascript
-module.exports = {
-  transpileDependencies: [
-    'vue2-premium-bbl-editor',
-    /@tiptap/,
-    /prosemirror-/
-  ]
-}
-```
-
-### Solution 4: Webpack Configuration
-
-For custom webpack setups, ensure you transpile the package:
-
-```javascript
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules\/(?!(vue2-premium-bbl-editor|@tiptap|prosemirror))/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env'],
-            plugins: [
-              '@babel/plugin-transform-optional-chaining',
-              '@babel/plugin-transform-nullish-coalescing-operator'
-            ]
-          }
-        }
-      }
-    ]
-  }
-}
-```
-
-## 🎯 Quick Fix for Immediate Use
-
-If you need a quick fix, use the **Options API version** which has better compatibility:
-
-```vue
-<template>
-  <PremiumBblEditorOptionsAPI v-model="content" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      content: '<p>Hello World!</p>'
-    }
-  }
-}
-</script>
-```
-
-## 🔍 Browser Support
-
-The package now supports:
-
-- ✅ Chrome 60+
-- ✅ Firefox 55+
-- ✅ Safari 12+
-- ✅ Edge 79+
-- ✅ IE 11 (with polyfills)
-
-## 📞 Still Having Issues?
-
-1. **Check your build tools**: Ensure you're using recent versions of Vue CLI, Webpack, or Vite
-2. **Use the diagnostic tool**: Add `<DiagnosticTool />` to debug dependency issues
-3. **Try Options API**: Use `PremiumBblEditorOptionsAPI` for maximum compatibility
-4. **Check the console**: Look for specific error messages about missing dependencies
-
-## 🚀 Recommended Setup
-
-For the best compatibility, use this setup:
-
-```javascript
-// main.js
-import Vue from 'vue'
-import PremiumBblEditor from 'vue2-premium-bbl-editor'
-import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
-
-Vue.use(PremiumBblEditor)
-```
-
-```vue
-<!-- Your component -->
-<template>
-  <PremiumBblEditorOptionsAPI 
-    v-model="content"
-    placeholder="Start writing..."
-  />
-</template>
-```
-
-This approach provides maximum compatibility across all Vue 2.6+ projects! 🎉