vue2-premium-bbl-editor 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,78 @@
+# Changelog
+
+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.0] - 2024-01-18
+
+### Added
+- Initial release of Vue 2 Premium BBL Editor
+- Full Vue 2.6+ compatibility
+- Production-ready rich text editor with Tiptap
+- Comprehensive configuration system with 50+ props
+- Multiple themes (default, minimal, dark)
+- Advanced media handling (resizable images and videos)
+- Interactive table system with cell controls
+- Auto-save functionality
+- Source code view toggle
+- Upload handling with custom upload functions
+- TypeScript definitions
+- Comprehensive event system
+- Bubble menus for contextual editing
+- Toolbar customization
+- Extension configuration system
+- Content validation and limits
+- Custom CSS class support
+- Font family and size configuration
+- Line height controls
+- Text alignment options
+- Color and highlight support
+- Link management with modal
+- Task lists with checkboxes
+- Code blocks with syntax highlighting
+- Blockquotes and horizontal rules
+- Undo/redo functionality
+- Placeholder support
+- Spellcheck configuration
+- Focus and blur handling
+- Content format options (HTML/JSON)
+- Responsive design
+- Accessibility features
+- Demo components and examples
+- Comprehensive documentation
+
+### Technical Features
+- Vue plugin architecture
+- Individual component exports
+- Composable useEditor function
+- Custom Tiptap extensions
+- CSS-in-JS styling
+- Build optimization for libraries
+- External dependency management
+- Tree-shaking support
+- ES modules and CommonJS builds
+- UMD build for CDN usage
+
+### Documentation
+- Complete README with usage examples
+- TypeScript definitions
+- API documentation
+- Configuration guide
+- Event handling examples
+- Custom styling guide
+- Upload handling examples
+- Theme customization
+- Extension configuration
+- Troubleshooting guide
+
+### Development
+- Vue CLI build system
+- Jest testing setup
+- ESLint configuration
+- Babel transpilation
+- Development server
+- Hot module replacement
+- Production build optimization
+- Library build configuration

package/INSTALLATION.md

@@ -0,0 +1,282 @@
+# Installation Guide
+
+## Prerequisites
+
+- Vue 2.6 or higher
+- Node.js 12 or higher
+- npm or yarn package manager
+
+## Installation Methods
+
+### 1. NPM Installation (Recommended)
+
+```bash
+npm install vue2-premium-bbl-editor
+```
+
+### 2. Yarn Installation
+
+```bash
+yarn add vue2-premium-bbl-editor
+```
+
+### 3. CDN Installation
+
+```html
+<!-- Vue 2 -->
+<script src="https://unpkg.com/vue@2"></script>
+
+<!-- Editor -->
+<script src="https://unpkg.com/vue2-premium-bbl-editor"></script>
+<link rel="stylesheet" href="https://unpkg.com/vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css">
+```
+
+## Setup Methods
+
+### Method 1: Global Registration (Recommended)
+
+```javascript
+// main.js
+import Vue from 'vue'
+import PremiumBblEditor from 'vue2-premium-bbl-editor'
+
+// Register the plugin
+Vue.use(PremiumBblEditor)
+
+// Or with options
+Vue.use(PremiumBblEditor, {
+  registerAllComponents: true // Registers all sub-components globally
+})
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```
+
+### Method 2: Component Registration
+
+```javascript
+// In your component
+import { PremiumBblEditor } from 'vue2-premium-bbl-editor'
+
+export default {
+  components: {
+    PremiumBblEditor
+  }
+}
+```
+
+### Method 3: Individual Component Imports
+
+```javascript
+import {
+  PremiumBblEditor,
+  ToolbarMain,
+  ImageModal,
+  useEditor
+} from 'vue2-premium-bbl-editor'
+```
+
+## Basic Usage
+
+```vue
+<template>
+  <div>
+    <PremiumBblEditor
+      v-model="content"
+      placeholder="Start writing..."
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: '<p>Hello World!</p>'
+    }
+  },
+  methods: {
+    handleInput(content) {
+      console.log('Content updated:', content)
+    }
+  }
+}
+</script>
+```
+
+## TypeScript Setup
+
+If you're using TypeScript, the package includes full type definitions:
+
+```typescript
+// types are automatically imported
+import { PremiumBblEditor, ToolbarConfig } from 'vue2-premium-bbl-editor'
+
+interface ComponentData {
+  content: string
+  config: ToolbarConfig
+}
+
+export default Vue.extend({
+  data(): ComponentData {
+    return {
+      content: '',
+      config: {
+        bold: true,
+        italic: true,
+        // ... other options
+      }
+    }
+  }
+})
+```
+
+## CSS Import
+
+The package includes CSS that needs to be imported:
+
+### Method 1: Automatic (when using Vue plugin)
+CSS is automatically imported when you use `Vue.use(PremiumBblEditor)`
+
+### Method 2: Manual Import
+```javascript
+import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
+```
+
+### Method 3: CSS in HTML
+```html
+<link rel="stylesheet" href="https://unpkg.com/vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css">
+```
+
+## Build Configuration
+
+### Webpack Configuration
+
+If you're using a custom webpack setup, you may need to configure it to handle the package:
+
+```javascript
+// webpack.config.js
+module.exports = {
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  }
+}
+```
+
+### Vue CLI Configuration
+
+For Vue CLI projects, add this to your `vue.config.js`:
+
+```javascript
+// vue.config.js
+module.exports = {
+  transpileDependencies: [
+    'vue2-premium-bbl-editor'
+  ]
+}
+```
+
+## Nuxt.js Setup
+
+For Nuxt.js applications:
+
+```javascript
+// nuxt.config.js
+export default {
+  plugins: [
+    { src: '~/plugins/tiptap-editor.js', mode: 'client' }
+  ],
+  css: [
+    'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'
+  ]
+}
+```
+
+```javascript
+// plugins/tiptap-editor.js
+import Vue from 'vue'
+import PremiumBblEditor from 'vue2-premium-bbl-editor'
+
+Vue.use(PremiumBblEditor)
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **"Cannot resolve module" error**
+   - Make sure you've installed the package: `npm install vue2-premium-bbl-editor`
+   - Check that your Node.js version is 12 or higher
+
+2. **CSS not loading**
+   - Import the CSS manually: `import 'vue2-premium-bbl-editor/dist/vue2-premium-bbl-editor.css'`
+   - Or use the CDN link in your HTML
+
+3. **TypeScript errors**
+   - Make sure you have the latest version of the package
+   - Check that your `tsconfig.json` includes the package in `types`
+
+4. **Build errors with Vue CLI**
+   - Add the package to `transpileDependencies` in `vue.config.js`
+
+5. **SSR issues with Nuxt.js**
+   - Use client-side only plugin: `{ src: '~/plugins/tiptap-editor.js', mode: 'client' }`
+
+### Browser Compatibility
+
+The editor supports:
+- Chrome 60+
+- Firefox 55+
+- Safari 11+
+- Edge 79+
+
+For older browsers, you may need additional polyfills.
+
+### Performance Optimization
+
+For better performance in production:
+
+1. **Tree Shaking**: Import only the components you need
+2. **Code Splitting**: Use dynamic imports for the editor
+3. **CSS Optimization**: Use PurgeCSS to remove unused styles
+
+```javascript
+// Dynamic import example
+const PremiumBblEditor = () => import('vue2-premium-bbl-editor')
+
+export default {
+  components: {
+    PremiumBblEditor
+  }
+}
+```
+
+## Next Steps
+
+- Check out the [README.md](README.md) for full API documentation
+- See [examples/](examples/) for usage examples
+- Read the [CHANGELOG.md](CHANGELOG.md) for version history
+
+## Support
+
+If you encounter any issues during installation:
+
+1. Check the [GitHub Issues](https://github.com/yourusername/vue2-premium-bbl-editor/issues)
+2. Make sure you're using compatible versions of Vue and Node.js
+3. Try clearing your node_modules and reinstalling: `rm -rf node_modules package-lock.json && npm install`

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Vue 2 Premium Tiptap Editor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/PUBLISH_GUIDE.md

@@ -0,0 +1,101 @@
+# Publishing Guide for Vue 2 Premium BBL Editor
+
+## 🚀 Complete Publishing Steps
+
+### Step 1: ✅ Build Library (COMPLETED)
+```bash
+npm run build:lib
+```
+
+### Step 2: ✅ Git Commit (COMPLETED)
+```bash
+git add .
+git commit -m "feat: Initial release of Vue 2 Premium BBL Editor v1.0.0"
+git tag -a v1.0.0 -m "Release version 1.0.0"
+```
+
+### Step 3: 📡 Push to GitHub
+
+1. **Create GitHub Repository:**
+   - Go to https://github.com/new
+   - Repository name: `vue2-premium-bbl-editor`
+   - Description: "A production-ready, fully configurable rich text editor for Vue 2.6 built with Tiptap"
+   - Make it Public
+   - Don't initialize with README (we already have one)
+
+2. **Add Remote and Push:**
+   ```bash
+   # Replace 'yourusername' with your actual GitHub username
+   git remote add origin https://github.com/yourusername/vue2-premium-bbl-editor.git
+   
+   # Push code and tags
+   git push -u origin main
+   git push origin --tags
+   ```
+
+### Step 4: 📦 Publish to NPM
+
+1. **Login to NPM:**
+   ```bash
+   npm login
+   ```
+   Enter your NPM credentials when prompted.
+
+2. **Verify Package:**
+   ```bash
+   npm pack --dry-run
+   ```
+   This shows what files will be included in the package.
+
+3. **Publish Package:**
+   ```bash
+   npm publish
+   ```
+
+### Step 5: 🔧 Post-Publication Setup
+
+1. **Update GitHub Repository:**
+   - Add repository description
+   - Add topics/tags: `vue`, `vue2`, `editor`, `tiptap`, `rich-text`, `wysiwyg`
+   - Enable GitHub Pages for documentation (optional)
+
+2. **Create GitHub Release:**
+   - Go to your repository → Releases → Create a new release
+   - Tag: `v1.0.0`
+   - Title: `Vue 2 Premium BBL Editor v1.0.0`
+   - Description: Copy from CHANGELOG.md
+
+## 📋 Pre-Publication Checklist
+
+- ✅ Package built successfully
+- ✅ All tests passing
+- ✅ ESLint errors fixed
+- ✅ Documentation complete
+- ✅ Version tagged
+- ✅ Git repository ready
+
+## 🎯 Installation Instructions for Users
+
+Once published, users can install with:
+
+```bash
+npm install vue2-premium-bbl-editor
+```
+
+## 🔄 Future Updates
+
+For future versions:
+
+1. Update version in `package.json`
+2. Update `CHANGELOG.md`
+3. Build: `npm run build:lib`
+4. Commit: `git commit -m "feat: version x.x.x"`
+5. Tag: `git tag -a vx.x.x -m "Release version x.x.x"`
+6. Push: `git push && git push --tags`
+7. Publish: `npm publish`
+
+## 📞 Support
+
+- Repository: https://github.com/yourusername/vue2-premium-bbl-editor
+- NPM Package: https://www.npmjs.com/package/vue2-premium-bbl-editor
+- Issues: https://github.com/yourusername/vue2-premium-bbl-editor/issues

package/PUBLISH_STEPS.md

@@ -0,0 +1,60 @@
+# Final Publishing Steps
+
+## Current Status: ✅ Almost Complete!
+
+- ✅ GitHub repository: https://github.com/Mahadi74/vue2-premium-bbl-editor
+- ✅ Code pushed successfully
+- ✅ NPM account logged in
+- ⚠️ Need to complete 2FA setup
+
+## Next Steps:
+
+### 1. Set up 2FA on NPM (Required)
+1. Go to: https://www.npmjs.com/settings/meheduhasan60/tfa
+2. Click "Add Two-Factor Authentication"
+3. Choose "Authenticator App" 
+4. Use Google Authenticator, Authy, or similar app
+5. Scan QR code and enter verification code
+6. Save backup codes in a safe place
+
+### 2. Publish Package
+After 2FA is set up, run:
+```bash
+npm publish
+```
+
+You'll be prompted for your 2FA code during publishing.
+
+### 3. Verify Publication
+```bash
+npm view vue2-premium-bbl-editor
+```
+
+## Alternative: Create Access Token
+
+If you prefer using an access token:
+
+1. Go to: https://www.npmjs.com/settings/meheduhasan60/tokens
+2. Click "Generate New Token"
+3. Choose "Granular Access Token"
+4. Set permissions for publishing
+5. Copy the token
+6. Use: `npm config set //registry.npmjs.org/:_authToken YOUR_TOKEN`
+
+## After Publishing
+
+Your package will be available at:
+- NPM: https://www.npmjs.com/package/vue2-premium-bbl-editor
+- GitHub: https://github.com/Mahadi74/vue2-premium-bbl-editor
+
+Users can install with:
+```bash
+npm install vue2-premium-bbl-editor
+```
+
+## Package Info
+- Name: vue2-premium-bbl-editor
+- Version: 1.0.0
+- Size: 1.8 MB (124 KB gzipped)
+- Files: 96 files included
+- Built: ✅ Ready for distribution