vue2-bbl-editor 1.3.0

package/package.json

@@ -0,0 +1,172 @@
+{
+  "name": "vue2-bbl-editor",
+  "version": "1.3.0",
+  "description": "A production-ready, fully configurable rich text editor for Vue 2.6 built with Tiptap",
+  "main": "dist/vue2-bbl-editor.common.js",
+  "module": "dist/vue2-bbl-editor.esm.js",
+  "unpkg": "dist/vue2-bbl-editor.umd.min.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "dist/*",
+    "types/*",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "INSTALLATION.md",
+    "QUICK_SETUP.md",
+    "COMPONENT_USAGE_GUIDE.md",
+    "EXTERNAL_INTEGRATION_GUIDE.md",
+    "EXTERNAL_HTML_RENDERING.md",
+    "CONTENT_WRAPPER_GUIDE.md",
+    "PACKAGE_DOCUMENTATION.md"
+  ],
+  "keywords": [
+    "vue",
+    "vue2",
+    "tiptap",
+    "editor",
+    "rich-text",
+    "wysiwyg",
+    "text-editor",
+    "prosemirror",
+    "upload",
+    "base64",
+    "image-compression",
+    "file-upload",
+    "media-management"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Mahadi74/vue2-bbl-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Mahadi74/vue2-bbl-editor/issues"
+  },
+  "homepage": "https://github.com/Mahadi74/vue2-bbl-editor#readme",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build:lib": "vue-cli-service build --target lib --name vue2-bbl-editor src/index.js",
+    "lint": "vue-cli-service lint",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "^2.1.13",
+    "@tiptap/extension-code": "^2.1.13",
+    "@tiptap/extension-code-block": "^2.1.13",
+    "@tiptap/extension-color": "^2.1.13",
+    "@tiptap/extension-font-family": "^2.27.2",
+    "@tiptap/extension-highlight": "^2.1.13",
+    "@tiptap/extension-link": "^2.1.13",
+    "@tiptap/extension-placeholder": "^2.27.2",
+    "@tiptap/extension-table": "^2.1.13",
+    "@tiptap/extension-table-cell": "^2.1.13",
+    "@tiptap/extension-table-header": "^2.1.13",
+    "@tiptap/extension-table-row": "^2.1.13",
+    "@tiptap/extension-task-item": "^2.27.2",
+    "@tiptap/extension-task-list": "^2.27.2",
+    "@tiptap/extension-text-align": "^2.1.13",
+    "@tiptap/extension-text-style": "^2.1.13",
+    "@tiptap/extension-underline": "^2.1.13",
+    "@tiptap/starter-kit": "^2.1.13",
+    "@tiptap/vue-2": "^2.1.13",
+    "@vue/composition-api": "^1.7.2",
+    "vue": "^2.6.0"
+  },
+  "dependencies": {
+    "@tiptap/core": "^2.1.13",
+    "@tiptap/extension-blockquote": "^2.1.13",
+    "@tiptap/extension-bold": "^2.1.13",
+    "@tiptap/extension-bubble-menu": "^2.27.2",
+    "@tiptap/extension-bullet-list": "^2.1.13",
+    "@tiptap/extension-code": "^2.1.13",
+    "@tiptap/extension-code-block": "^2.1.13",
+    "@tiptap/extension-color": "^2.1.13",
+    "@tiptap/extension-document": "^2.1.13",
+    "@tiptap/extension-dropcursor": "^2.1.13",
+    "@tiptap/extension-font-family": "^2.27.2",
+    "@tiptap/extension-gapcursor": "^2.1.13",
+    "@tiptap/extension-hard-break": "^2.1.13",
+    "@tiptap/extension-heading": "^2.1.13",
+    "@tiptap/extension-highlight": "^2.1.13",
+    "@tiptap/extension-history": "^2.1.13",
+    "@tiptap/extension-horizontal-rule": "^2.1.13",
+    "@tiptap/extension-image": "^2.1.13",
+    "@tiptap/extension-italic": "^2.1.13",
+    "@tiptap/extension-link": "^2.1.13",
+    "@tiptap/extension-list-item": "^2.1.13",
+    "@tiptap/extension-ordered-list": "^2.1.13",
+    "@tiptap/extension-paragraph": "^2.1.13",
+    "@tiptap/extension-placeholder": "^2.27.2",
+    "@tiptap/extension-strike": "^2.1.13",
+    "@tiptap/extension-table": "^2.1.13",
+    "@tiptap/extension-table-cell": "^2.1.13",
+    "@tiptap/extension-table-header": "^2.1.13",
+    "@tiptap/extension-table-row": "^2.1.13",
+    "@tiptap/extension-task-item": "^2.27.2",
+    "@tiptap/extension-task-list": "^2.27.2",
+    "@tiptap/extension-text": "^2.1.13",
+    "@tiptap/extension-text-align": "^2.1.13",
+    "@tiptap/extension-text-style": "^2.1.13",
+    "@tiptap/extension-underline": "^2.1.13",
+    "@tiptap/starter-kit": "^2.1.13",
+    "@tiptap/vue-2": "^2.1.13",
+    "dompurify": "^3.3.1",
+    "prosemirror-commands": "^1.7.1",
+    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-gapcursor": "^1.4.0",
+    "prosemirror-history": "^1.5.0",
+    "prosemirror-keymap": "^1.2.3",
+    "prosemirror-model": "^1.25.4",
+    "prosemirror-schema-list": "^1.5.1",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-tables": "^1.8.5",
+    "prosemirror-transform": "^1.10.5",
+    "prosemirror-view": "^1.41.4"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
+    "@babel/plugin-transform-optional-chaining": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/runtime": "^7.28.6",
+    "@vue/cli-plugin-babel": "~4.5.19",
+    "@vue/cli-plugin-eslint": "~4.5.19",
+    "@vue/cli-service": "~4.5.19",
+    "@vue/test-utils": "^1.3.6",
+    "babel-eslint": "^10.1.0",
+    "core-js": "^3.6.5",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "fast-check": "^3.15.0",
+    "jest": "^27.5.1",
+    "vue": "^2.6.11",
+    "vue-jest": "^3.0.7",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/types/index.d.ts

@@ -0,0 +1,266 @@
+import { VueConstructor } from 'vue'
+import { Editor } from '@tiptap/core'
+
+export interface ToolbarConfig {
+  bold?: boolean
+  italic?: boolean
+  underline?: boolean
+  strike?: boolean
+  code?: boolean
+  textColor?: boolean
+  highlight?: boolean
+  fontFamily?: boolean
+  fontSize?: boolean
+  textAlign?: boolean
+  lineHeight?: boolean
+  headings?: boolean
+  lists?: boolean
+  blockquote?: boolean
+  codeBlock?: boolean
+  horizontalRule?: boolean
+  link?: boolean
+  image?: boolean
+  video?: boolean
+  table?: boolean
+  clearFormatting?: boolean
+  sourceCode?: boolean
+  undo?: boolean
+  redo?: boolean
+}
+
+export interface ExtensionConfig {
+  image?: {
+    allowResize?: boolean
+    allowAlignment?: boolean
+    allowDelete?: boolean
+    maxWidth?: string
+    quality?: number
+  }
+  video?: {
+    allowResize?: boolean
+    allowAlignment?: boolean
+    allowDelete?: boolean
+    maxWidth?: string
+    autoplay?: boolean
+  }
+  table?: {
+    resizable?: boolean
+    allowRowControls?: boolean
+    allowColumnControls?: boolean
+    cellSelection?: boolean
+  }
+  link?: {
+    openOnClick?: boolean
+    autolink?: boolean
+    linkOnPaste?: boolean
+  }
+  textAlign?: {
+    types?: string[]
+  }
+}
+
+export interface UploadHandler {
+  (file: File): Promise<{ src: string; alt?: string; width?: number; height?: number; size?: number; originalSize?: number; type?: string; originalName?: string; compressed?: boolean }>
+}
+
+export interface ImageCompressionEvent {
+  originalSize: number
+  compressedSize: number
+  originalDimensions: { width: number; height: number }
+  compressedDimensions: { width: number; height: number }
+  compressionRatio: number
+}
+
+export interface PremiumBblEditorProps {
+  value?: string
+  placeholder?: string
+  editable?: boolean
+  outputFormat?: 'html' | 'json'
+  maxHeight?: string | number
+  minHeight?: string | number
+  theme?: 'default' | 'minimal' | 'dark'
+  showToolbar?: boolean
+  showBubbleMenu?: boolean
+  showTableBubbleMenu?: boolean
+  showImageBubbleMenu?: boolean
+  showVideoBubbleMenu?: boolean
+  toolbarConfig?: ToolbarConfig
+  extensionConfig?: ExtensionConfig
+  uploadHandler?: UploadHandler
+  imageUploadUrl?: string
+  videoUploadUrl?: string
+  maxFileSize?: number
+  allowedImageTypes?: string[]
+  allowedVideoTypes?: string[]
+  // Local file base64 management
+  useBase64Upload?: boolean
+  base64Quality?: number
+  base64MaxWidth?: number
+  base64MaxHeight?: number
+  enableImageCompression?: boolean
+  preserveOriginalFileName?: boolean
+  base64Prefix?: string
+  maxContentLength?: number
+  allowedHeadings?: number[]
+  fontFamilies?: string[]
+  fontSizes?: string[]
+  lineHeights?: string[]
+  autofocus?: boolean
+  spellcheck?: boolean
+  autoSave?: boolean
+  autoSaveInterval?: number
+  editorClass?: string | string[] | object
+  toolbarClass?: string | string[] | object
+  contentClass?: string | string[] | object
+  // HTML Output wrapper
+  wrapWithContentClass?: boolean
+}
+
+export interface PremiumBblEditorEvents {
+  input: (content: string) => void
+  update: (content: string) => void
+  ready: (editor: Editor) => void
+  created: (editor: Editor) => void
+  focus: () => void
+  blur: () => void
+  destroyed: () => void
+  'auto-save': (content: string) => void
+  'content-limit-exceeded': (data: { current: number; max: number }) => void
+  'image-compressed': (data: ImageCompressionEvent) => void
+  error: (error: { type: string; message: string; [key: string]: any }) => void
+}
+
+export interface PremiumBblEditorMethods {
+  focus(): void
+  blur(): void
+  getContent(format?: 'html' | 'json', wrapContent?: boolean): string | object
+  setContent(content: string, emitUpdate?: boolean): void
+  executeCommand(command: string, options?: any): void
+}
+
+export declare class PremiumBblEditorComponent {
+  $props: PremiumBblEditorProps
+  $emit: PremiumBblEditorEvents
+  focus(): void
+  blur(): void
+  getContent(format?: 'html' | 'json', wrapContent?: boolean): string | object
+  setContent(content: string, emitUpdate?: boolean): void
+  executeCommand(command: string, options?: any): void
+}
+
+export declare class PremiumBblEditorOptionsAPIComponent {
+  $props: PremiumBblEditorProps
+  $emit: PremiumBblEditorEvents
+  focus(): void
+  blur(): void
+  getContent(format?: 'html' | 'json', wrapContent?: boolean): string | object
+  setContent(content: string, emitUpdate?: boolean): void
+  executeCommand(command: string, options?: any): void
+}
+
+export declare class DiagnosticToolComponent {
+  $props: {}
+}
+
+export declare class DebugHelperComponent {
+  $props: {}
+}
+
+export interface PluginOptions {
+  registerAllComponents?: boolean
+}
+
+export declare function install(Vue: VueConstructor, options?: PluginOptions): void
+
+// Composable types
+export interface UseEditorOptions {
+  content?: string
+  extensions?: any[]
+  editable?: boolean
+  autofocus?: boolean
+  onUpdate?: (props: { editor: Editor }) => void
+  onCreate?: (props: { editor: Editor }) => void
+  onFocus?: (props: { editor: Editor; event: FocusEvent }) => void
+  onBlur?: (props: { editor: Editor; event: FocusEvent }) => void
+  onDestroy?: () => void
+}
+
+export interface UseEditorReturn {
+  editor: Editor | null
+}
+
+export declare function useEditor(options?: UseEditorOptions): UseEditorReturn
+
+// Component exports with proper names
+export const PremiumBblEditor: typeof PremiumBblEditorComponent
+export const PremiumBblEditorOptionsAPI: typeof PremiumBblEditorOptionsAPIComponent
+export const DiagnosticTool: typeof DiagnosticToolComponent
+export const DebugHelper: typeof DebugHelperComponent
+
+// Upload system types
+export interface UploadResult {
+  success: boolean
+  url: string
+  publicUrl?: string
+  uploadId: string
+  size: number
+  adapter: string
+  metadata?: {
+    fileName?: string
+    fileType?: string
+    uploadedAt?: string
+    [key: string]: any
+  }
+}
+
+export interface UploadConfig {
+  defaultAdapter: string
+  adapters: Record<string, any>
+  validation?: {
+    maxSize?: number
+    allowedTypes?: string[]
+    customValidator?: (file: File) => boolean
+  }
+  retry?: {
+    maxAttempts?: number
+    baseDelay?: number
+    maxDelay?: number
+    backoffFactor?: number
+  }
+  progress?: {
+    throttleMs?: number
+  }
+  debug?: boolean
+}
+
+export declare class UploadManager {
+  constructor(config: UploadConfig)
+  registerAdapter(adapter: any): void
+  setDefaultAdapter(name: string): void
+  upload(file: File, options?: any): Promise<UploadResult>
+  uploadWithAdapter(adapterName: string, file: File, options?: any): Promise<UploadResult>
+  cancelUpload(uploadId: string): Promise<void>
+  getStats(): any
+  destroy(): void
+  on(event: string, callback: Function): void
+  off(event: string, callback: Function): void
+}
+
+export declare class LocalStorageAdapter {
+  constructor(options?: any)
+  getName(): string
+  upload(file: File, options?: any): Promise<UploadResult>
+}
+
+export declare function createUploadConfig(preset: string, overrides?: Partial<UploadConfig>): UploadConfig
+export declare function integrateTipTapUpload(editor: Editor, uploadManager: UploadManager, options?: any): void
+
+declare const plugin: {
+  install: typeof install
+  PremiumBblEditor: typeof PremiumBblEditorComponent
+  PremiumBblEditorOptionsAPI: typeof PremiumBblEditorOptionsAPIComponent
+  DiagnosticTool: typeof DiagnosticToolComponent
+  DebugHelper: typeof DebugHelperComponent
+}
+
+export default plugin