vue2-bbl-editor 1.5.1 → 1.5.2

package/dist/vue2-bbl-editor.common.js

@@ -370,9 +370,10 @@ function _objectWithoutPropertiesLoose(r, e) {
         var heightMatch = style.match(/height:\s*(\d+)px/);
         return {
           src: element.getAttribute('src'),
-          width: widthMatch ? parseInt(widthMatch[1]) : element.getAttribute('width') || 560,
-          height: heightMatch ? parseInt(heightMatch[1]) : element.getAttribute('height') || 315,
+          width: widthMatch ? parseInt(widthMatch[1]) : element.getAttribute('width') ? parseInt(element.getAttribute('width')) : 560,
+          height: heightMatch ? parseInt(heightMatch[1]) : element.getAttribute('height') ? parseInt(element.getAttribute('height')) : 315,
           align: element.getAttribute('data-align') || 'left',
+          display: element.getAttribute('data-display') || 'block',
           spacing: element.getAttribute('data-spacing') || 'medium',
           controls: element.getAttribute('controls') !== 'false',
           nocookie: element.getAttribute('nocookie') === 'true'
@@ -387,9 +388,10 @@ function _objectWithoutPropertiesLoose(r, e) {
         var heightMatch = style.match(/height:\s*(\d+)px/);
         return {
           src: element.getAttribute('src'),
-          width: widthMatch ? parseInt(widthMatch[1]) : element.getAttribute('width') || 560,
-          height: heightMatch ? parseInt(heightMatch[1]) : element.getAttribute('height') || 315,
+          width: widthMatch ? parseInt(widthMatch[1]) : element.getAttribute('width') ? parseInt(element.getAttribute('width')) : 560,
+          height: heightMatch ? parseInt(heightMatch[1]) : element.getAttribute('height') ? parseInt(element.getAttribute('height')) : 315,
           align: element.getAttribute('data-align') || 'left',
+          display: element.getAttribute('data-display') || 'block',
           spacing: element.getAttribute('data-spacing') || 'medium',
           controls: element.getAttribute('controls') !== 'false',
           nocookie: element.getAttribute('nocookie') === 'true'
@@ -408,9 +410,10 @@ function _objectWithoutPropertiesLoose(r, e) {
         var heightMatch = style.match(/height:\s*(\d+)px/);
         return {
           src: iframe.getAttribute('src'),
-          width: widthMatch ? parseInt(widthMatch[1]) : iframe.getAttribute('width') || 560,
-          height: heightMatch ? parseInt(heightMatch[1]) : iframe.getAttribute('height') || 315,
+          width: widthMatch ? parseInt(widthMatch[1]) : iframe.getAttribute('width') ? parseInt(iframe.getAttribute('width')) : 560,
+          height: heightMatch ? parseInt(heightMatch[1]) : iframe.getAttribute('height') ? parseInt(iframe.getAttribute('height')) : 315,
           align: element.getAttribute('data-align') || iframe.getAttribute('data-align') || 'left',
+          display: element.getAttribute('data-display') || iframe.getAttribute('data-display') || 'block',
           spacing: element.getAttribute('data-spacing') || iframe.getAttribute('data-spacing') || 'medium',
           controls: iframe.getAttribute('controls') !== 'false',
           nocookie: iframe.getAttribute('nocookie') === 'true',
@@ -699,6 +702,14 @@ function _objectWithoutPropertiesLoose(r, e) {
       iframe.style.margin = '0';
       iframe.style.verticalAlign = 'top';
 
+      // Apply width and height from attributes to style for proper rendering
+      if (HTMLAttributes.width) {
+        iframe.style.width = HTMLAttributes.width + 'px';
+      }
+      if (HTMLAttributes.height) {
+        iframe.style.height = HTMLAttributes.height + 'px';
+      }
+
       // Add resize handle
       var resizeHandle = document.createElement('div');
       resizeHandle.className = 'video-resize-handle';
@@ -1435,13 +1446,6 @@ var component = Object(componentNormalizer["a" /* default */])(
 /* unused harmony reexport * */
 
 
-/***/ }),
-
-/***/ "25e7":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
 /***/ }),
 
 /***/ "2877":
@@ -1554,7 +1558,7 @@ function normalizeComponent(
 
 "use strict";
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1a638e0e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/PremiumBblEditor.vue?vue&type=template&id=74a36ee2&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1a638e0e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/PremiumBblEditor.vue?vue&type=template&id=645beb94&scoped=true
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"premium-editor-container",class:[
     ("theme-" + _vm.theme),
     _vm.editorClass
@@ -1562,7 +1566,7 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel
 var staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('strong',[_vm._v("Missing Dependencies:")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"install-command"},[_c('p',[_c('strong',[_vm._v("Quick Fix:")])]),_c('code',[_vm._v("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")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"help-links"},[_c('a',{attrs:{"href":"https://github.com/kazi-shahin/vue2-bbl-editor#quick-setup","target":"_blank"}},[_vm._v("📖 Setup Guide")]),_c('a',{attrs:{"href":"https://github.com/kazi-shahin/vue2-bbl-editor/blob/main/TROUBLESHOOTING.md","target":"_blank"}},[_vm._v("🔧 Troubleshooting")])])}]
 
 
-// CONCATENATED MODULE: ./src/components/PremiumBblEditor.vue?vue&type=template&id=74a36ee2&scoped=true
+// CONCATENATED MODULE: ./src/components/PremiumBblEditor.vue?vue&type=template&id=645beb94&scoped=true
 
 // EXTERNAL MODULE: external "@tiptap/vue-2"
 var vue_2_ = __webpack_require__("9637");
@@ -2586,8 +2590,8 @@ var tables = __webpack_require__("e6b9");
 });
 // CONCATENATED MODULE: ./src/components/PremiumBblEditor.vue?vue&type=script&lang=js
  /* harmony default export */ var components_PremiumBblEditorvue_type_script_lang_js = (PremiumBblEditorvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./src/components/PremiumBblEditor.vue?vue&type=style&index=0&id=74a36ee2&prod&scoped=true&lang=css
-var PremiumBblEditorvue_type_style_index_0_id_74a36ee2_prod_scoped_true_lang_css = __webpack_require__("dffc");
+// EXTERNAL MODULE: ./src/components/PremiumBblEditor.vue?vue&type=style&index=0&id=645beb94&prod&scoped=true&lang=css
+var PremiumBblEditorvue_type_style_index_0_id_645beb94_prod_scoped_true_lang_css = __webpack_require__("ef69");
 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__("2877");
@@ -2607,24 +2611,13 @@ var component = Object(componentNormalizer["a" /* default */])(
   staticRenderFns,
   false,
   null,
-  "74a36ee2",
+  "645beb94",
   null
   
 )
 
 /* harmony default export */ var PremiumBblEditor = __webpack_exports__["a"] = (component.exports);
 
-/***/ }),
-
-/***/ "3132":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditorOptionsAPI_vue_vue_type_style_index_0_id_2db30600_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("bc05");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditorOptionsAPI_vue_vue_type_style_index_0_id_2db30600_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditorOptionsAPI_vue_vue_type_style_index_0_id_2db30600_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "32d6":
@@ -3068,6 +3061,17 @@ module.exports = require("@tiptap/extension-table-header");
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "4ddd":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditorOptionsAPI_vue_vue_type_style_index_0_id_cc6a3522_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("785c");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditorOptionsAPI_vue_vue_type_style_index_0_id_cc6a3522_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditorOptionsAPI_vue_vue_type_style_index_0_id_cc6a3522_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "521c":
@@ -10303,6 +10307,13 @@ module.exports = require("@tiptap/extension-font-family");
 
 /***/ }),
 
+/***/ "785c":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "7a7e":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -12834,16 +12845,20 @@ var state_dist = __webpack_require__("7c31");
         var shouldInsertNodeAtEnd = plugin.getState(newState);
         var endPosition = doc.content.size;
         var type = newState.schema.nodes[_this.options.node];
-        if (!shouldInsertNodeAtEnd) {
+        if (!shouldInsertNodeAtEnd || !type) {
           return;
         }
 
         // Check if we need to add a trailing paragraph
         var lastNode = doc.lastChild;
         if (!lastNode || _this.options.blockElements.includes(lastNode.type.name)) {
-          return tr.insert(endPosition, type.create());
+          // Ensure the insert position is valid
+          var safeEndPosition = Math.min(endPosition, doc.content.size);
+          if (safeEndPosition >= 0) {
+            return tr.insert(safeEndPosition, type.create());
+          }
         }
-        return tr.insert(endPosition, type.create());
+        return null;
       },
       state: {
         init: function init(_, state) {
@@ -12865,6 +12880,7 @@ var state_dist = __webpack_require__("7c31");
       key: new state_dist["b" /* PluginKey */]('cursorPositioning'),
       appendTransaction: function appendTransaction(transactions, oldState, newState) {
         var tr = null;
+        var docSize = newState.doc.content.size;
 
         // Check if any transaction inserted a block element
         transactions.forEach(function (transaction) {
@@ -12874,32 +12890,53 @@ var state_dist = __webpack_require__("7c31");
               var slice = step.slice;
               if (slice && slice.content) {
                 slice.content.forEach(function (node) {
+                  var _node$attrs;
                   // If a block display element was inserted
                   var isBlockElement = _this.options.blockElements.includes(node.type.name);
-                  var isBlockDisplay = node.attrs.display === 'block' || node.type.name === 'table';
+                  var isBlockDisplay = ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.display) === 'block' || node.type.name === 'table';
                   if (isBlockElement && isBlockDisplay) {
                     var insertPos = step.to || step.from;
-                    var nextPos = insertPos + node.nodeSize;
+                    var nextPos = Math.min(insertPos + node.nodeSize, docSize);
 
-                    // Check if there's content after the inserted element
-                    if (nextPos >= newState.doc.content.size) {
-                      // Add a paragraph after the block element
-                      if (!tr) {
-                        tr = newState.tr;
-                      }
-                      var paragraphType = newState.schema.nodes.paragraph;
-                      tr.insert(nextPos, paragraphType.create());
-
-                      // Position cursor in the new paragraph
-                      tr.setSelection(newState.selection.constructor.near(tr.doc.resolve(nextPos + 1)));
-                    } else {
-                      // Position cursor after the inserted element
-                      var nextNode = newState.doc.nodeAt(nextPos);
-                      if (nextNode && nextNode.type.name === 'paragraph') {
+                    // Ensure positions are within valid range
+                    if (insertPos >= 0 && insertPos <= docSize && nextPos >= 0 && nextPos <= docSize) {
+                      // Check if there's content after the inserted element
+                      if (nextPos >= docSize) {
+                        // Add a paragraph after the block element
                         if (!tr) {
                           tr = newState.tr;
                         }
-                        tr.setSelection(newState.selection.constructor.near(tr.doc.resolve(nextPos + 1)));
+                        var paragraphType = newState.schema.nodes.paragraph;
+                        var safeInsertPos = Math.min(nextPos, tr.doc.content.size);
+                        tr.insert(safeInsertPos, paragraphType.create());
+
+                        // Position cursor in the new paragraph safely
+                        var cursorPos = Math.min(safeInsertPos + 1, tr.doc.content.size);
+                        if (cursorPos > 0 && cursorPos <= tr.doc.content.size) {
+                          try {
+                            tr.setSelection(newState.selection.constructor.near(tr.doc.resolve(cursorPos)));
+                          } catch (e) {
+                            // Fallback to end of document if position is invalid
+                            tr.setSelection(newState.selection.constructor.atEnd(tr.doc));
+                          }
+                        }
+                      } else {
+                        // Position cursor after the inserted element
+                        var nextNode = newState.doc.nodeAt(nextPos);
+                        if (nextNode && nextNode.type.name === 'paragraph') {
+                          if (!tr) {
+                            tr = newState.tr;
+                          }
+                          var _cursorPos = Math.min(nextPos + 1, newState.doc.content.size);
+                          if (_cursorPos > 0 && _cursorPos <= newState.doc.content.size) {
+                            try {
+                              tr.setSelection(newState.selection.constructor.near(tr.doc.resolve(_cursorPos)));
+                            } catch (e) {
+                              // Fallback to end of document if position is invalid
+                              tr.setSelection(newState.selection.constructor.atEnd(tr.doc));
+                            }
+                          }
+                        }
                       }
                     }
                   }
@@ -12935,15 +12972,29 @@ var state_dist = __webpack_require__("7c31");
             var tr = state.tr,
               selection = state.selection;
             var pos = selection.to;
-            var nextNode = tr.doc.nodeAt(pos);
-            if (!nextNode || _this2.options.blockElements.includes(nextNode.type.name)) {
-              var paragraphType = state.schema.nodes.paragraph;
-              tr.insert(pos, paragraphType.create());
-
-              // Position cursor in the new paragraph
-              var newPos = pos + 1;
-              tr.setSelection(selection.constructor.near(tr.doc.resolve(newPos)));
-              dispatch(tr);
+            var docSize = tr.doc.content.size;
+
+            // Ensure position is within valid range
+            if (pos >= 0 && pos <= docSize) {
+              var nextNode = tr.doc.nodeAt(pos);
+              if (!nextNode || _this2.options.blockElements.includes(nextNode.type.name)) {
+                var paragraphType = state.schema.nodes.paragraph;
+                var safeInsertPos = Math.min(pos, docSize);
+                tr.insert(safeInsertPos, paragraphType.create());
+
+                // Position cursor in the new paragraph safely
+                var newPos = Math.min(safeInsertPos + 1, tr.doc.content.size);
+                if (newPos > 0 && newPos <= tr.doc.content.size) {
+                  try {
+                    tr.setSelection(selection.constructor.near(tr.doc.resolve(newPos)));
+                    dispatch(tr);
+                  } catch (e) {
+                    // Fallback to end of document if position is invalid
+                    tr.setSelection(selection.constructor.atEnd(tr.doc));
+                    dispatch(tr);
+                  }
+                }
+              }
             }
           }
           return result;
@@ -12962,6 +13013,11 @@ var state_dist = __webpack_require__("7c31");
           var pos = selection.to;
           var endPos = doc.content.size;
 
+          // Ensure position is within valid range
+          if (pos < 0 || pos > endPos) {
+            return false;
+          }
+
           // If we're at the end of the document
           if (pos >= endPos - 1) {
             var lastNode = doc.lastChild;
@@ -12969,7 +13025,8 @@ var state_dist = __webpack_require__("7c31");
             // If the last node is a block element, add a paragraph
             if (lastNode && _this2.options.blockElements.includes(lastNode.type.name)) {
               var paragraphType = state.schema.nodes.paragraph;
-              tr.insert(endPos, paragraphType.create());
+              var safeInsertPos = Math.min(endPos, doc.content.size);
+              tr.insert(safeInsertPos, paragraphType.create());
               if (dispatch) {
                 dispatch(tr);
               }
@@ -23131,6 +23188,13 @@ var SplitCell_component = Object(componentNormalizer["a" /* default */])(
 
 /***/ }),
 
+/***/ "a99c":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "aa88":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -26778,13 +26842,6 @@ function _toPrimitive(t, r) {
 
 /***/ }),
 
-/***/ "bc05":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "bc12":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -29531,13 +29588,18 @@ function _objectWithoutPropertiesLoose(r, e) {
     return [{
       tag: 'img[src]',
       getAttrs: function getAttrs(element) {
+        // Extract width and height from style if available, fallback to attributes
+        var style = element.getAttribute('style') || '';
+        var widthMatch = style.match(/width:\s*(\d+)px/);
+        var heightMatch = style.match(/height:\s*(\d+)px/);
         return {
           src: element.getAttribute('src'),
           alt: element.getAttribute('alt'),
           title: element.getAttribute('title'),
-          width: element.getAttribute('width'),
-          height: element.getAttribute('height'),
+          width: widthMatch ? parseInt(widthMatch[1]) : element.getAttribute('width') ? parseInt(element.getAttribute('width')) : null,
+          height: heightMatch ? parseInt(heightMatch[1]) : element.getAttribute('height') ? parseInt(element.getAttribute('height')) : null,
           align: element.getAttribute('data-align') || 'left',
+          display: element.getAttribute('data-display') || 'block',
           spacing: element.getAttribute('data-spacing') || 'medium'
         };
       }
@@ -29556,9 +29618,34 @@ function _objectWithoutPropertiesLoose(r, e) {
           src: img.getAttribute('src'),
           alt: img.getAttribute('alt'),
           title: img.getAttribute('title'),
-          width: widthMatch ? widthMatch[1] : null,
-          height: heightMatch ? heightMatch[1] : null,
+          width: widthMatch ? parseInt(widthMatch[1]) : img.getAttribute('width') ? parseInt(img.getAttribute('width')) : null,
+          height: heightMatch ? parseInt(heightMatch[1]) : img.getAttribute('height') ? parseInt(img.getAttribute('height')) : null,
+          align: element.getAttribute('data-align') || 'left',
+          display: element.getAttribute('data-display') || 'block',
+          spacing: element.getAttribute('data-spacing') || 'medium',
+          caption: figcaption ? figcaption.textContent : '',
+          captionPosition: figcaption ? 'bottom' : 'none'
+        };
+      }
+    }, {
+      tag: 'div[data-display][data-align]',
+      getAttrs: function getAttrs(element) {
+        var img = element.querySelector('img');
+        var figcaption = element.querySelector('figcaption');
+        if (!img) return false;
+
+        // Extract width and height from img style
+        var imgStyle = img.getAttribute('style') || '';
+        var widthMatch = imgStyle.match(/width:\s*(\d+)px/);
+        var heightMatch = imgStyle.match(/height:\s*(\d+)px/);
+        return {
+          src: img.getAttribute('src'),
+          alt: img.getAttribute('alt'),
+          title: img.getAttribute('title'),
+          width: widthMatch ? parseInt(widthMatch[1]) : img.getAttribute('width') ? parseInt(img.getAttribute('width')) : null,
+          height: heightMatch ? parseInt(heightMatch[1]) : img.getAttribute('height') ? parseInt(img.getAttribute('height')) : null,
           align: element.getAttribute('data-align') || 'left',
+          display: element.getAttribute('data-display') || 'block',
           spacing: element.getAttribute('data-spacing') || 'medium',
           caption: figcaption ? figcaption.textContent : '',
           captionPosition: figcaption ? 'bottom' : 'none'
@@ -29574,9 +29661,10 @@ function _objectWithoutPropertiesLoose(r, e) {
           src: img.getAttribute('src'),
           alt: img.getAttribute('alt'),
           title: img.getAttribute('title'),
-          width: img.getAttribute('width'),
-          height: img.getAttribute('height'),
+          width: img.getAttribute('width') ? parseInt(img.getAttribute('width')) : null,
+          height: img.getAttribute('height') ? parseInt(img.getAttribute('height')) : null,
           align: element.getAttribute('data-align') || 'left',
+          display: element.getAttribute('data-display') || 'block',
           spacing: element.getAttribute('data-spacing') || 'medium',
           caption: figcaption ? figcaption.textContent : '',
           captionPosition: figcaption ? 'bottom' : 'none'
@@ -29860,6 +29948,14 @@ function _objectWithoutPropertiesLoose(r, e) {
       img.style.margin = '0';
       img.style.verticalAlign = 'top';
 
+      // Apply width and height from attributes to style for proper rendering
+      if (HTMLAttributes.width) {
+        img.style.width = HTMLAttributes.width + 'px';
+      }
+      if (HTMLAttributes.height) {
+        img.style.height = HTMLAttributes.height + 'px';
+      }
+
       // Add resize handles
       var resizeHandle = document.createElement('div');
       resizeHandle.className = 'resize-handle';
@@ -30496,17 +30592,6 @@ var uploadMixin = {
 /* unused harmony reexport * */
 
 
-/***/ }),
-
-/***/ "dffc":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditor_vue_vue_type_style_index_0_id_74a36ee2_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("25e7");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditor_vue_vue_type_style_index_0_id_74a36ee2_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditor_vue_vue_type_style_index_0_id_74a36ee2_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "e6b9":
@@ -30525,6 +30610,17 @@ var uploadMixin = {
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "ef69":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditor_vue_vue_type_style_index_0_id_645beb94_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("a99c");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditor_vue_vue_type_style_index_0_id_645beb94_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_PremiumBblEditor_vue_vue_type_style_index_0_id_645beb94_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "f39e":
@@ -30854,7 +30950,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./src/components/PremiumBblEditor.vue + 4 modules
 var PremiumBblEditor = __webpack_require__("2cce");
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1a638e0e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/PremiumBblEditorOptionsAPI.vue?vue&type=template&id=2db30600&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1a638e0e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/PremiumBblEditorOptionsAPI.vue?vue&type=template&id=cc6a3522&scoped=true
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"premium-editor-container",class:[
     ("theme-" + _vm.theme),
     _vm.editorClass
@@ -30862,7 +30958,7 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel
 var staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('p',[_c('strong',[_vm._v("Missing Dependencies:")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"install-command"},[_c('p',[_c('strong',[_vm._v("Quick Fix:")])]),_c('code',[_vm._v("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")])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"help-links"},[_c('a',{attrs:{"href":"https://github.com/kazi-shahin/vue2-bbl-editor#quick-setup","target":"_blank"}},[_vm._v("📖 Setup Guide")]),_c('a',{attrs:{"href":"https://github.com/kazi-shahin/vue2-bbl-editor/blob/main/TROUBLESHOOTING.md","target":"_blank"}},[_vm._v("🔧 Troubleshooting")])])}]
 
 
-// CONCATENATED MODULE: ./src/components/PremiumBblEditorOptionsAPI.vue?vue&type=template&id=2db30600&scoped=true
+// CONCATENATED MODULE: ./src/components/PremiumBblEditorOptionsAPI.vue?vue&type=template&id=cc6a3522&scoped=true
 
 // EXTERNAL MODULE: external "@tiptap/vue-2"
 var vue_2_ = __webpack_require__("9637");
@@ -32591,8 +32687,8 @@ var LineHeight = core_["Extension"].create({
 });
 // CONCATENATED MODULE: ./src/components/PremiumBblEditorOptionsAPI.vue?vue&type=script&lang=js
  /* harmony default export */ var components_PremiumBblEditorOptionsAPIvue_type_script_lang_js = (PremiumBblEditorOptionsAPIvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./src/components/PremiumBblEditorOptionsAPI.vue?vue&type=style&index=0&id=2db30600&prod&scoped=true&lang=css
-var PremiumBblEditorOptionsAPIvue_type_style_index_0_id_2db30600_prod_scoped_true_lang_css = __webpack_require__("3132");
+// EXTERNAL MODULE: ./src/components/PremiumBblEditorOptionsAPI.vue?vue&type=style&index=0&id=cc6a3522&prod&scoped=true&lang=css
+var PremiumBblEditorOptionsAPIvue_type_style_index_0_id_cc6a3522_prod_scoped_true_lang_css = __webpack_require__("4ddd");
 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__("2877");
@@ -32612,7 +32708,7 @@ var component = Object(componentNormalizer["a" /* default */])(
   staticRenderFns,
   false,
   null,
-  "2db30600",
+  "cc6a3522",
   null
   
 )