vue2-bbl-editor 1.3.0

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-bbl-editor
+```
+
+### 2. Yarn Installation
+
+```bash
+yarn add vue2-bbl-editor
+```
+
+### 3. CDN Installation
+
+```html
+<!-- Vue 2 -->
+<script src="https://unpkg.com/vue@2"></script>
+
+<!-- Editor -->
+<script src="https://unpkg.com/vue2-bbl-editor"></script>
+<link rel="stylesheet" href="https://unpkg.com/vue2-bbl-editor/dist/vue2-bbl-editor.css">
+```
+
+## Setup Methods
+
+### Method 1: Global Registration (Recommended)
+
+```javascript
+// main.js
+import Vue from 'vue'
+import PremiumBblEditor from 'vue2-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-bbl-editor'
+
+export default {
+  components: {
+    PremiumBblEditor
+  }
+}
+```
+
+### Method 3: Individual Component Imports
+
+```javascript
+import {
+  PremiumBblEditor,
+  ToolbarMain,
+  ImageModal,
+  useEditor
+} from 'vue2-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-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-bbl-editor/dist/vue2-bbl-editor.css'
+```
+
+### Method 3: CSS in HTML
+```html
+<link rel="stylesheet" href="https://unpkg.com/vue2-bbl-editor/dist/vue2-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-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-bbl-editor/dist/vue2-bbl-editor.css'
+  ]
+}
+```
+
+```javascript
+// plugins/tiptap-editor.js
+import Vue from 'vue'
+import PremiumBblEditor from 'vue2-bbl-editor'
+
+Vue.use(PremiumBblEditor)
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **"Cannot resolve module" error**
+   - Make sure you've installed the package: `npm install vue2-bbl-editor`
+   - Check that your Node.js version is 12 or higher
+
+2. **CSS not loading**
+   - Import the CSS manually: `import 'vue2-bbl-editor/dist/vue2-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-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/kazi-shahin/vue2-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.