vue2-bbl-editor 1.4.1 → 1.4.3

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

@@ -193,7 +193,7 @@ function _typeof(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof(o);
 }
-var _excluded = ["width", "height", "align", "caption", "captionPosition", "spacing"];
+var _excluded = ["width", "height", "align", "caption", "captionPosition", "spacing", "display"];
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -308,9 +308,13 @@ function _objectWithoutPropertiesLoose(r, e) {
 
 /* harmony default export */ __webpack_exports__["a"] = (_tiptap_core__WEBPACK_IMPORTED_MODULE_0__["Node"].create({
   name: 'resizableVideo',
-  group: 'inline',
-  inline: true,
+  group: 'block',
   atom: true,
+  addOptions: function addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
   addAttributes: function addAttributes() {
     return {
       src: {
@@ -349,19 +353,58 @@ function _objectWithoutPropertiesLoose(r, e) {
     return [{
       tag: 'iframe[src*="youtube.com"]',
       getAttrs: function getAttrs(element) {
+        // Extract width and height from style if available
+        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'),
-          width: element.getAttribute('width') || 560,
-          height: element.getAttribute('height') || 315
+          width: widthMatch ? parseInt(widthMatch[1]) : element.getAttribute('width') || 560,
+          height: heightMatch ? parseInt(heightMatch[1]) : element.getAttribute('height') || 315,
+          align: element.getAttribute('data-align') || 'left',
+          spacing: element.getAttribute('data-spacing') || 'medium',
+          controls: element.getAttribute('controls') !== 'false',
+          nocookie: element.getAttribute('nocookie') === 'true'
         };
       }
     }, {
       tag: 'iframe[src*="youtu.be"]',
       getAttrs: function getAttrs(element) {
+        // Extract width and height from style if available
+        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'),
-          width: element.getAttribute('width') || 560,
-          height: element.getAttribute('height') || 315
+          width: widthMatch ? parseInt(widthMatch[1]) : element.getAttribute('width') || 560,
+          height: heightMatch ? parseInt(heightMatch[1]) : element.getAttribute('height') || 315,
+          align: element.getAttribute('data-align') || 'left',
+          spacing: element.getAttribute('data-spacing') || 'medium',
+          controls: element.getAttribute('controls') !== 'false',
+          nocookie: element.getAttribute('nocookie') === 'true'
+        };
+      }
+    }, {
+      tag: 'figure',
+      getAttrs: function getAttrs(element) {
+        var iframe = element.querySelector('iframe[src*="youtube.com"], iframe[src*="youtu.be"]');
+        var figcaption = element.querySelector('figcaption');
+        if (!iframe) return false;
+
+        // Extract width and height from style if available
+        var style = iframe.getAttribute('style') || '';
+        var widthMatch = style.match(/width:\s*(\d+)px/);
+        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,
+          align: element.getAttribute('data-align') || iframe.getAttribute('data-align') || 'left',
+          spacing: element.getAttribute('data-spacing') || iframe.getAttribute('data-spacing') || 'medium',
+          controls: iframe.getAttribute('controls') !== 'false',
+          nocookie: iframe.getAttribute('nocookie') === 'true',
+          caption: figcaption ? figcaption.textContent : '',
+          captionPosition: figcaption ? 'bottom' : 'none'
         };
       }
     }];
@@ -374,6 +417,7 @@ function _objectWithoutPropertiesLoose(r, e) {
       caption = HTMLAttributes.caption,
       captionPosition = HTMLAttributes.captionPosition,
       spacing = HTMLAttributes.spacing,
+      display = HTMLAttributes.display,
       attrs = _objectWithoutProperties(HTMLAttributes, _excluded);
 
     // Determine spacing values
@@ -387,12 +431,42 @@ function _objectWithoutPropertiesLoose(r, e) {
     // Build inline styles for iframe with proper text wrapping
     var iframeStyle = 'border: none; border-radius: 8px; max-width: 100%; vertical-align: top;';
     if (width) {
-      iframeStyle += " width: ".concat(width - 5, "px;");
+      iframeStyle += " width: ".concat(width, "px;");
     }
     if (height) {
       iframeStyle += " height: ".concat(height, "px;");
     }
 
+    // Handle display mode
+    if (display === 'inline') {
+      // Inline display - video flows with text
+      iframeStyle += ' display: inline-block; vertical-align: top;';
+      if (align === 'center') {
+        // For inline center, we still need a wrapper
+        return ['div', {
+          style: 'text-align: center; display: block; margin: 0.5em 0;',
+          'data-display': display,
+          'data-align': align,
+          'data-spacing': spacing
+        }, ['iframe', Object(_tiptap_core__WEBPACK_IMPORTED_MODULE_0__["mergeAttributes"])(attrs, {
+          frameborder: '0',
+          allowfullscreen: 'true',
+          style: iframeStyle
+        })]];
+      } else {
+        // Simple inline iframe
+        return ['iframe', Object(_tiptap_core__WEBPACK_IMPORTED_MODULE_0__["mergeAttributes"])(attrs, {
+          frameborder: '0',
+          allowfullscreen: 'true',
+          style: iframeStyle,
+          'data-display': display,
+          'data-align': align,
+          'data-spacing': spacing
+        })];
+      }
+    }
+
+    // Block display mode
     // Handle alignment with proper text wrapping
     if (align === 'center') {
       iframeStyle += ' display: block; margin: 1em auto;';
@@ -401,7 +475,7 @@ function _objectWithoutPropertiesLoose(r, e) {
     } else if (align === 'left') {
       iframeStyle += " float: left; margin: 0 ".concat(spacingValue, " ").concat(spacingValue, " 0; clear: left;");
     } else {
-      iframeStyle += " display: inline-block; margin: 0 ".concat(spacingValue, ";");
+      iframeStyle += " display: block; margin: 0 auto ".concat(spacingValue, ";");
     }
 
     // If no caption, return simple iframe
@@ -410,6 +484,7 @@ function _objectWithoutPropertiesLoose(r, e) {
         frameborder: '0',
         allowfullscreen: 'true',
         style: iframeStyle,
+        'data-display': display,
         'data-align': align,
         'data-spacing': spacing
       })];
@@ -427,7 +502,7 @@ function _objectWithoutPropertiesLoose(r, e) {
     } else if (align === 'left') {
       figureStyle += " float: left; margin: 0 ".concat(spacingValue, " ").concat(spacingValue, " 0; clear: left;");
     } else {
-      figureStyle += " margin: 0 ".concat(spacingValue, ";");
+      figureStyle += " margin: 0 auto ".concat(spacingValue, ";");
     }
     var captionStyle = 'font-size: 0.875em; color: #6b7280; padding: 0.5em 0; text-align: center; font-style: italic; margin: 0; display: block;';
 
@@ -444,6 +519,7 @@ function _objectWithoutPropertiesLoose(r, e) {
     var children = captionPosition === 'top' ? [captionEl, iframe] : [iframe, captionEl];
     return ['figure', {
       style: figureStyle,
+      'data-display': display,
       'data-align': align,
       'data-spacing': spacing
     }].concat(children);
@@ -453,23 +529,22 @@ function _objectWithoutPropertiesLoose(r, e) {
       var HTMLAttributes = _ref2.HTMLAttributes,
         getPos = _ref2.getPos,
         editor = _ref2.editor;
-      var container = document.createElement('span');
+      var container = document.createElement('div');
       container.className = 'resizable-video-container';
       container.style.position = 'relative';
-      container.style.display = 'inline-block';
       container.style.maxWidth = '100%';
       container.style.verticalAlign = 'top';
 
       // Create inner wrapper for proper positioning
-      var videoWrapper = document.createElement('span');
+      var videoWrapper = document.createElement('div');
       videoWrapper.className = 'resizable-video-wrapper';
       videoWrapper.style.position = 'relative';
-      videoWrapper.style.display = 'inline-block';
       videoWrapper.style.maxWidth = '100%';
       videoWrapper.style.borderRadius = '8px';
       videoWrapper.style.overflow = 'hidden';
       var align = HTMLAttributes.align || 'left';
       var spacing = HTMLAttributes.spacing || 'medium';
+      var display = HTMLAttributes.display || 'block';
 
       // Determine spacing values
       var spacingMap = {
@@ -479,23 +554,47 @@ function _objectWithoutPropertiesLoose(r, e) {
       };
       var spacingValue = spacingMap[spacing] || spacingMap.medium;
 
-      // Apply proper floating and margins for text wrapping
-      if (align === 'center') {
-        container.style.display = 'block';
-        container.style.textAlign = 'center';
-        container.style.margin = '1em auto';
-        container.style.float = 'none';
-        container.style.clear = 'both';
-      } else if (align === 'right') {
-        container.style.float = 'right';
-        container.style.margin = "0 0 ".concat(spacingValue, " ").concat(spacingValue);
-        container.style.clear = 'right';
-      } else if (align === 'left') {
-        container.style.float = 'left';
-        container.style.margin = "0 ".concat(spacingValue, " ").concat(spacingValue, " 0");
-        container.style.clear = 'left';
+      // Apply display mode styling
+      var mainContainer = container;
+      if (display === 'inline') {
+        container.style.display = 'inline-block';
+        videoWrapper.style.display = 'inline-block';
+        if (align === 'center') {
+          // For inline center, wrap in a block container
+          var centerWrapper = document.createElement('div');
+          centerWrapper.style.textAlign = 'center';
+          centerWrapper.style.display = 'block';
+          centerWrapper.style.margin = '0.5em 0';
+          centerWrapper.appendChild(container);
+
+          // Use the center wrapper as the main container
+          mainContainer = centerWrapper;
+        } else {
+          container.style.margin = "0 0.25em";
+        }
       } else {
-        container.style.margin = "0 ".concat(spacingValue);
+        // Block display mode
+        container.style.display = 'inline-block';
+        videoWrapper.style.display = 'inline-block';
+
+        // Apply proper floating and margins for text wrapping
+        if (align === 'center') {
+          container.style.display = 'block';
+          container.style.textAlign = 'center';
+          container.style.margin = '1em auto';
+          container.style.float = 'none';
+          container.style.clear = 'both';
+        } else if (align === 'right') {
+          container.style.float = 'right';
+          container.style.margin = "0 0 ".concat(spacingValue, " ").concat(spacingValue);
+          container.style.clear = 'right';
+        } else if (align === 'left') {
+          container.style.float = 'left';
+          container.style.margin = "0 ".concat(spacingValue, " ").concat(spacingValue, " 0");
+          container.style.clear = 'left';
+        } else {
+          container.style.margin = "0 auto ".concat(spacingValue);
+        }
       }
 
       // Caption elements
@@ -686,7 +785,7 @@ function _objectWithoutPropertiesLoose(r, e) {
         }
       });
       return {
-        dom: container,
+        dom: mainContainer,
         contentDOM: captionEl,
         update: function update(updatedNode) {
           if (updatedNode.type.name !== 'resizableVideo') {
@@ -696,9 +795,15 @@ function _objectWithoutPropertiesLoose(r, e) {
           var oldAlign = align;
           var oldCaptionPosition = captionPosition;
           var oldSpacing = spacing;
+          var oldDisplay = display;
+
+          // If display mode changed, force re-render
+          if (newAttrs.display !== oldDisplay) {
+            return false;
+          }
 
           // Handle spacing changes without re-rendering
-          if (newAttrs.spacing !== oldSpacing && newAttrs.align === oldAlign && newAttrs.captionPosition === oldCaptionPosition) {
+          if (newAttrs.spacing !== oldSpacing && newAttrs.align === oldAlign && newAttrs.captionPosition === oldCaptionPosition && newAttrs.display === oldDisplay) {
             // Update spacing without re-rendering
             var _spacingMap = {
               small: '0.5em',
@@ -708,20 +813,22 @@ function _objectWithoutPropertiesLoose(r, e) {
             var _spacingValue = _spacingMap[newAttrs.spacing] || _spacingMap.medium;
 
             // Update container margins based on alignment and new spacing
-            if (newAttrs.align === 'center') {
-              container.style.margin = '1em auto';
-            } else if (newAttrs.align === 'right') {
-              container.style.margin = "0 0 0 ".concat(_spacingValue);
-            } else if (newAttrs.align === 'left') {
-              container.style.margin = "0 ".concat(_spacingValue, " 0 0");
-            } else {
-              container.style.margin = "0 ".concat(_spacingValue);
+            if (newAttrs.display === 'block') {
+              if (newAttrs.align === 'center') {
+                container.style.margin = '1em auto';
+              } else if (newAttrs.align === 'right') {
+                container.style.margin = "0 0 ".concat(_spacingValue, " ").concat(_spacingValue);
+              } else if (newAttrs.align === 'left') {
+                container.style.margin = "0 ".concat(_spacingValue, " ").concat(_spacingValue, " 0");
+              } else {
+                container.style.margin = "0 auto ".concat(_spacingValue);
+              }
             }
             return true;
           }
 
-          // Only force re-render if structural attributes changed (align or caption position)
-          if (newAttrs.align !== oldAlign || newAttrs.captionPosition !== oldCaptionPosition) {
+          // Only force re-render if structural attributes changed (align, caption position, or display)
+          if (newAttrs.align !== oldAlign || newAttrs.captionPosition !== oldCaptionPosition || newAttrs.display !== oldDisplay) {
             return false;
           }
 
@@ -780,6 +887,22 @@ function _objectWithoutPropertiesLoose(r, e) {
         };
       }
     };
+  },
+  // Add a method to update the node's inline/block behavior
+  addStorage: function addStorage() {
+    var _this2 = this;
+    return {
+      updateInlineMode: function updateInlineMode(editor, display) {
+        // This will be used by the bubble menu to switch modes
+        var isInline = display === 'inline';
+
+        // Update the extension options
+        _this2.options.inline = isInline;
+
+        // Force re-render by recreating the node
+        return true;
+      }
+    };
   }
 }));
 
@@ -1441,7 +1564,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=36924141&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=3d307e70&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
@@ -1449,7 +1572,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=36924141&scoped=true
+// CONCATENATED MODULE: ./src/components/PremiumBblEditor.vue?vue&type=template&id=3d307e70&scoped=true
 
 // EXTERNAL MODULE: external "@tiptap/vue-2"
 var vue_2_ = __webpack_require__("9637");
@@ -2473,8 +2596,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=36924141&prod&scoped=true&lang=css
-var PremiumBblEditorvue_type_style_index_0_id_36924141_prod_scoped_true_lang_css = __webpack_require__("f891");
+// EXTERNAL MODULE: ./src/components/PremiumBblEditor.vue?vue&type=style&index=0&id=3d307e70&prod&scoped=true&lang=css
+var PremiumBblEditorvue_type_style_index_0_id_3d307e70_prod_scoped_true_lang_css = __webpack_require__("6f86");
 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__("2877");
@@ -2494,7 +2617,7 @@ var component = Object(componentNormalizer["a" /* default */])(
   staticRenderFns,
   false,
   null,
-  "36924141",
+  "3d307e70",
   null
   
 )
@@ -2951,6 +3074,13 @@ module.exports = require("@tiptap/extension-table-header");
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "4fc5":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ }),
 
 /***/ "521c":
@@ -4556,6 +4686,17 @@ function _toPrimitive(t, r) {
   }
 }));
 
+/***/ }),
+
+/***/ "6f86":
+/***/ (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_3d307e70_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("a511");
+/* 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_3d307e70_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_3d307e70_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "71c9":
@@ -16927,13 +17068,6 @@ module.exports = require("@tiptap/vue-2");
 
 /***/ }),
 
-/***/ "98d1":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "9bba":
 /***/ (function(module, exports) {
 
@@ -18692,6 +18826,13 @@ var SplitCell_component = Object(componentNormalizer["a" /* default */])(
 
 /***/ }),
 
+/***/ "a511":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "aa88":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -19568,17 +19709,6 @@ var component = Object(componentNormalizer["a" /* default */])(
 
 // extracted by mini-css-extract-plugin
 
-/***/ }),
-
-/***/ "b764":
-/***/ (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_410a85e4_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("98d1");
-/* 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_410a85e4_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_410a85e4_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "baf3":
@@ -19934,6 +20064,17 @@ var component = Object(componentNormalizer["a" /* default */])(
 
 /* harmony default export */ var LinkModal = __webpack_exports__["a"] = (component.exports);
 
+/***/ }),
+
+/***/ "c4c0":
+/***/ (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_f08bc882_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("4fc5");
+/* 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_f08bc882_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_f08bc882_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "c5d0":
@@ -22309,7 +22450,7 @@ function _typeof(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof(o);
 }
-var _excluded = ["width", "height", "align", "caption", "captionPosition", "spacing"];
+var _excluded = ["width", "height", "align", "caption", "captionPosition", "spacing", "display"];
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -22481,6 +22622,29 @@ function _objectWithoutPropertiesLoose(r, e) {
           spacing: element.getAttribute('data-spacing') || 'medium'
         };
       }
+    }, {
+      tag: 'div.resizable-image-wrapper',
+      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 ? widthMatch[1] : null,
+          height: heightMatch ? heightMatch[1] : null,
+          align: element.getAttribute('data-align') || 'left',
+          spacing: element.getAttribute('data-spacing') || 'medium',
+          caption: figcaption ? figcaption.textContent : '',
+          captionPosition: figcaption ? 'bottom' : 'none'
+        };
+      }
     }, {
       tag: 'figure',
       getAttrs: function getAttrs(element) {
@@ -22509,6 +22673,7 @@ function _objectWithoutPropertiesLoose(r, e) {
       caption = HTMLAttributes.caption,
       captionPosition = HTMLAttributes.captionPosition,
       spacing = HTMLAttributes.spacing,
+      display = HTMLAttributes.display,
       attrs = _objectWithoutProperties(HTMLAttributes, _excluded);
 
     // Determine spacing values
@@ -22519,6 +22684,42 @@ function _objectWithoutPropertiesLoose(r, e) {
     };
     var spacingValue = spacingMap[spacing] || spacingMap.medium;
 
+    // Build inline styles for image
+    var imgStyle = 'max-width: 100%; height: auto; vertical-align: top;';
+    if (width) {
+      imgStyle += " width: ".concat(width, "px;");
+    }
+    if (height) {
+      imgStyle += " height: ".concat(height, "px;");
+    }
+
+    // Handle display mode
+    if (display === 'inline') {
+      // Inline display - image flows with text
+      imgStyle += ' display: inline-block;';
+      if (align === 'center') {
+        // For inline center, we still need a wrapper
+        return ['div', {
+          style: 'text-align: center; display: block; margin: 0.5em 0;',
+          'data-display': display,
+          'data-align': align,
+          'data-spacing': spacing,
+          class: 'resizable-image-wrapper'
+        }, ['img', Object(_tiptap_core__WEBPACK_IMPORTED_MODULE_0__["mergeAttributes"])(attrs, {
+          style: imgStyle
+        })]];
+      } else {
+        // Simple inline image
+        return ['img', Object(_tiptap_core__WEBPACK_IMPORTED_MODULE_0__["mergeAttributes"])(attrs, {
+          style: imgStyle,
+          'data-display': display,
+          'data-align': align,
+          'data-spacing': spacing
+        })];
+      }
+    }
+
+    // Block display mode
     // Create a wrapper div that allows text wrapping
     var wrapperStyle = 'display: inline-block; max-width: 100%; vertical-align: top;';
 
@@ -22530,11 +22731,11 @@ function _objectWithoutPropertiesLoose(r, e) {
     } else if (align === 'left') {
       wrapperStyle += " float: left; margin: 0 ".concat(spacingValue, " ").concat(spacingValue, " 0; clear: left;");
     } else {
-      wrapperStyle += " margin: 0 ".concat(spacingValue, ";");
+      wrapperStyle += " margin: 0 auto ".concat(spacingValue, ";");
     }
 
-    // Build inline styles for image
-    var imgStyle = 'max-width: 100%; height: auto; display: block; margin: 0;';
+    // Reset image style for wrapper context
+    imgStyle = 'max-width: 100%; height: auto; display: block; margin: 0;';
     if (width) {
       imgStyle += " width: ".concat(width, "px;");
     }
@@ -22546,6 +22747,7 @@ function _objectWithoutPropertiesLoose(r, e) {
     if (!caption || captionPosition === 'none') {
       return ['div', {
         style: wrapperStyle,
+        'data-display': display,
         'data-align': align,
         'data-spacing': spacing,
         class: 'resizable-image-wrapper'
@@ -22565,6 +22767,7 @@ function _objectWithoutPropertiesLoose(r, e) {
     var children = captionPosition === 'top' ? [captionEl, img] : [img, captionEl];
     return ['div', {
       style: wrapperStyle,
+      'data-display': display,
       'data-align': align,
       'data-spacing': spacing,
       class: 'resizable-image-wrapper'
@@ -22580,7 +22783,6 @@ function _objectWithoutPropertiesLoose(r, e) {
       var container = document.createElement('div');
       container.className = 'resizable-image-container';
       container.style.position = 'relative';
-      container.style.display = 'inline-block';
       container.style.maxWidth = '100%';
       container.style.verticalAlign = 'top';
 
@@ -22588,10 +22790,10 @@ function _objectWithoutPropertiesLoose(r, e) {
       var imageWrapper = document.createElement('div');
       imageWrapper.className = 'resizable-image-wrapper';
       imageWrapper.style.position = 'relative';
-      imageWrapper.style.display = 'inline-block';
       imageWrapper.style.maxWidth = '100%';
       var align = HTMLAttributes.align || 'left';
       var spacing = HTMLAttributes.spacing || 'medium';
+      var display = HTMLAttributes.display || 'block';
 
       // Determine spacing values
       var spacingMap = {
@@ -22601,23 +22803,47 @@ function _objectWithoutPropertiesLoose(r, e) {
       };
       var spacingValue = spacingMap[spacing] || spacingMap.medium;
 
-      // Apply proper floating and margins for text wrapping
-      if (align === 'center') {
-        container.style.display = 'block';
-        container.style.textAlign = 'center';
-        container.style.margin = '1em auto';
-        container.style.float = 'none';
-        container.style.clear = 'both';
-      } else if (align === 'right') {
-        container.style.float = 'right';
-        container.style.margin = "0 0 0 ".concat(spacingValue);
-        container.style.clear = 'right';
-      } else if (align === 'left') {
-        container.style.float = 'left';
-        container.style.margin = "0 ".concat(spacingValue, " 0 0");
-        container.style.clear = 'left';
+      // Apply display mode styling
+      var mainContainer = container;
+      if (display === 'inline') {
+        container.style.display = 'inline-block';
+        imageWrapper.style.display = 'inline-block';
+        if (align === 'center') {
+          // For inline center, wrap in a block container
+          var centerWrapper = document.createElement('div');
+          centerWrapper.style.textAlign = 'center';
+          centerWrapper.style.display = 'block';
+          centerWrapper.style.margin = '0.5em 0';
+          centerWrapper.appendChild(container);
+
+          // Use the center wrapper as the main container
+          mainContainer = centerWrapper;
+        } else {
+          container.style.margin = "0 0.25em";
+        }
       } else {
-        container.style.margin = "0 ".concat(spacingValue);
+        // Block display mode
+        container.style.display = 'inline-block';
+        imageWrapper.style.display = 'inline-block';
+
+        // Apply proper floating and margins for text wrapping
+        if (align === 'center') {
+          container.style.display = 'block';
+          container.style.textAlign = 'center';
+          container.style.margin = '1em auto';
+          container.style.float = 'none';
+          container.style.clear = 'both';
+        } else if (align === 'right') {
+          container.style.float = 'right';
+          container.style.margin = "0 0 0 ".concat(spacingValue);
+          container.style.clear = 'right';
+        } else if (align === 'left') {
+          container.style.float = 'left';
+          container.style.margin = "0 ".concat(spacingValue, " 0 0");
+          container.style.clear = 'left';
+        } else {
+          container.style.margin = "0 auto ".concat(spacingValue);
+        }
       }
 
       // Caption elements
@@ -22809,7 +23035,7 @@ function _objectWithoutPropertiesLoose(r, e) {
         }
       });
       return {
-        dom: container,
+        dom: mainContainer,
         contentDOM: captionEl,
         update: function update(updatedNode) {
           if (updatedNode.type.name !== 'resizableImage') {
@@ -22819,9 +23045,15 @@ function _objectWithoutPropertiesLoose(r, e) {
           var oldAlign = align;
           var oldCaptionPosition = captionPosition;
           var oldSpacing = spacing;
+          var oldDisplay = display;
+
+          // If display mode changed, force re-render
+          if (newAttrs.display !== oldDisplay) {
+            return false;
+          }
 
           // Handle spacing changes without re-rendering
-          if (newAttrs.spacing !== oldSpacing && newAttrs.align === oldAlign && newAttrs.captionPosition === oldCaptionPosition) {
+          if (newAttrs.spacing !== oldSpacing && newAttrs.align === oldAlign && newAttrs.captionPosition === oldCaptionPosition && newAttrs.display === oldDisplay) {
             // Update spacing without re-rendering
             var _spacingMap = {
               small: '0.5em',
@@ -22831,20 +23063,22 @@ function _objectWithoutPropertiesLoose(r, e) {
             var _spacingValue = _spacingMap[newAttrs.spacing] || _spacingMap.medium;
 
             // Update container margins based on alignment and new spacing
-            if (newAttrs.align === 'center') {
-              container.style.margin = '1em auto';
-            } else if (newAttrs.align === 'right') {
-              container.style.margin = "0 0 ".concat(_spacingValue, " ").concat(_spacingValue);
-            } else if (newAttrs.align === 'left') {
-              container.style.margin = "0 ".concat(_spacingValue, " ").concat(_spacingValue, " 0");
-            } else {
-              container.style.margin = "0 ".concat(_spacingValue);
+            if (newAttrs.display === 'block') {
+              if (newAttrs.align === 'center') {
+                container.style.margin = '1em auto';
+              } else if (newAttrs.align === 'right') {
+                container.style.margin = "0 0 ".concat(_spacingValue, " ").concat(_spacingValue);
+              } else if (newAttrs.align === 'left') {
+                container.style.margin = "0 ".concat(_spacingValue, " ").concat(_spacingValue, " 0");
+              } else {
+                container.style.margin = "0 auto ".concat(_spacingValue);
+              }
             }
             return true;
           }
 
-          // Only force re-render if structural attributes changed (align or caption position)
-          if (newAttrs.align !== oldAlign || newAttrs.captionPosition !== oldCaptionPosition) {
+          // Only force re-render if structural attributes changed (align, caption position, or display)
+          if (newAttrs.align !== oldAlign || newAttrs.captionPosition !== oldCaptionPosition || newAttrs.display !== oldDisplay) {
             return false;
           }
 
@@ -22896,6 +23130,22 @@ function _objectWithoutPropertiesLoose(r, e) {
         };
       }
     };
+  },
+  // Add a method to update the node's inline/block behavior
+  addStorage: function addStorage() {
+    var _this2 = this;
+    return {
+      updateInlineMode: function updateInlineMode(editor, display) {
+        // This will be used by the bubble menu to switch modes
+        var isInline = display === 'inline';
+
+        // Update the extension options
+        _this2.options.inline = isInline;
+
+        // Force re-render by recreating the node
+        return true;
+      }
+    };
   }
 }));
 
@@ -23622,24 +23872,6 @@ var CodeBlock = _tiptap_core__WEBPACK_IMPORTED_MODULE_0__["Node"].create({
 });
 
 
-/***/ }),
-
-/***/ "f6aa":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
-/***/ "f891":
-/***/ (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_36924141_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("f6aa");
-/* 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_36924141_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_36924141_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "f948":
@@ -23698,7 +23930,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=410a85e4&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=f08bc882&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
@@ -23706,7 +23938,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=410a85e4&scoped=true
+// CONCATENATED MODULE: ./src/components/PremiumBblEditorOptionsAPI.vue?vue&type=template&id=f08bc882&scoped=true
 
 // EXTERNAL MODULE: external "@tiptap/vue-2"
 var vue_2_ = __webpack_require__("9637");
@@ -25435,8 +25667,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=410a85e4&prod&scoped=true&lang=css
-var PremiumBblEditorOptionsAPIvue_type_style_index_0_id_410a85e4_prod_scoped_true_lang_css = __webpack_require__("b764");
+// EXTERNAL MODULE: ./src/components/PremiumBblEditorOptionsAPI.vue?vue&type=style&index=0&id=f08bc882&prod&scoped=true&lang=css
+var PremiumBblEditorOptionsAPIvue_type_style_index_0_id_f08bc882_prod_scoped_true_lang_css = __webpack_require__("c4c0");
 
 // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 var componentNormalizer = __webpack_require__("2877");
@@ -25456,7 +25688,7 @@ var component = Object(componentNormalizer["a" /* default */])(
   staticRenderFns,
   false,
   null,
-  "410a85e4",
+  "f08bc882",
   null
   
 )