@innovastudio/contentbuilder 1.5.174 → 1.5.176

package/public/contentbuilder/contentbuilder.esm.js

@@ -2541,11 +2541,11 @@ function dispatchEvent$1(_ref) {
   }
 }
 
-var _excluded = ["evt"];
+var _excluded$1 = ["evt"];
 var pluginEvent = function pluginEvent(eventName, sortable) {
   var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
     originalEvent = _ref.evt,
-    data = _objectWithoutProperties$1(_ref, _excluded);
+    data = _objectWithoutProperties$1(_ref, _excluded$1);
   PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, _objectSpread2$3({
     dragEl: dragEl,
     parentEl: parentEl,
@@ -5399,7 +5399,7 @@ class Util {
       if (elm && elm.closest('.is-block')) ; else {
         // If no active cell, check if it is from .row-add-initial (empty info)
         row = this.builder.doc.querySelector('.row-active');
-        if (!row) return;else {
+        if (row) {
           // Empty content will always use 'row' mode to insert block.
           mode = 'row';
         }
@@ -5579,7 +5579,7 @@ class Util {
         element.insertAdjacentHTML('afterend', html);
         newelement = element.nextElementSibling;
       }
-      let builderActive = this.builder.doc.querySelector('.builder-active');
+      let builderActive = element.closest('.is-container'); // this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
       if (newelement.tagName.toLowerCase() === 'img') {
         let checkLoad = setInterval(() => {
@@ -13677,145 +13677,113 @@ function get_beautify(js_beautify, css_beautify, html_beautify) {
 
 var JsBeautify = js$1.exports;
 
-function _defineProperty$2(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
+function _arrayLikeToArray$1(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
-
-function ownKeys$2(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
 }
-
-function _objectSpread2$2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys$2(Object(source), true).forEach(function (key) {
-        _defineProperty$2(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys$2(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
+function _defineProperty$2(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
     }
+    return a;
   }
-
-  return target;
 }
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
+function ownKeys$2(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-
-  return target;
+  return t;
 }
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
+function _objectSpread2$2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) {
+      _defineProperty$2(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
 }
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
 }
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-
-  return _arr;
+  return t;
 }
-
-function _unsupportedIterableToArray$1(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$1(r, e) || _nonIterableRest();
 }
-
-function _arrayLikeToArray$1(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
 }
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray$1(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
+  }
 }
 
 function _defineProperty$1(obj, key, value) {
@@ -14012,23 +13980,20 @@ var index = {
 
 var config$1 = {
   paths: {
-    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs'
+    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.54.0/min/vs'
   }
 };
 
 function curry(fn) {
   return function curried() {
     var _this = this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return args.length >= fn.length ? fn.apply(this, args) : function () {
       for (var _len2 = arguments.length, nextArgs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         nextArgs[_key2] = arguments[_key2];
       }
-
       return curried.apply(_this, [].concat(args, nextArgs));
     };
   };
@@ -14043,11 +14008,9 @@ function isObject$3(value) {
  * @param {Object} config - the configuration object 
  * @return {Object} config - the validated configuration object
  */
-
 function validateConfig(config) {
   if (!config) errorHandler('configIsRequired');
   if (!isObject$3(config)) errorHandler('configType');
-
   if (config.urls) {
     informAboutDeprecation();
     return {
@@ -14056,22 +14019,18 @@ function validateConfig(config) {
       }
     };
   }
-
   return config;
 }
+
 /**
  * logs deprecation message
  */
-
-
 function informAboutDeprecation() {
   console.warn(errorMessages.deprecation);
 }
-
 function throwError(errorMessages, type) {
   throw new Error(errorMessages[type] || errorMessages["default"]);
 }
-
 var errorMessages = {
   configIsRequired: 'the configuration object is required',
   configType: 'the configuration object should be an object',
@@ -14087,7 +14046,6 @@ var compose = function compose() {
   for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
     fns[_key] = arguments[_key];
   }
-
   return function (x) {
     return fns.reduceRight(function (y, f) {
       return f(y);
@@ -14107,11 +14065,11 @@ function merge(target, source) {
 }
 
 // The source (has been changed) is https://github.com/facebook/react/issues/5465#issuecomment-157888325
+
 var CANCELATION_MESSAGE = {
   type: 'cancelation',
   msg: 'operation is manually canceled'
 };
-
 function makeCancelable(promise) {
   var hasCanceled_ = false;
   var wrappedPromise = new Promise(function (resolve, reject) {
@@ -14125,29 +14083,28 @@ function makeCancelable(promise) {
   }, wrappedPromise;
 }
 
-/** the local state of the module */
+var _excluded = ["monaco"];
 
+/** the local state of the module */
 var _state$create = index.create({
-  config: config$1,
-  isInitialized: false,
-  resolve: null,
-  reject: null,
-  monaco: null
-}),
-    _state$create2 = _slicedToArray(_state$create, 2),
-    getState = _state$create2[0],
-    setState = _state$create2[1];
+    config: config$1,
+    isInitialized: false,
+    resolve: null,
+    reject: null,
+    monaco: null
+  }),
+  _state$create2 = _slicedToArray(_state$create, 2),
+  getState = _state$create2[0],
+  setState = _state$create2[1];
+
 /**
  * set the loader configuration
  * @param {Object} config - the configuration object
  */
-
-
 function config(globalConfig) {
   var _validators$config = validators.config(globalConfig),
-      monaco = _validators$config.monaco,
-      config = _objectWithoutProperties(_validators$config, ["monaco"]);
-
+    monaco = _validators$config.monaco,
+    config = _objectWithoutProperties(_validators$config, _excluded);
   setState(function (state) {
     return {
       config: merge(state.config, config),
@@ -14155,100 +14112,88 @@ function config(globalConfig) {
     };
   });
 }
+
 /**
  * handles the initialization of the monaco-editor
  * @return {Promise} - returns an instance of monaco (with a cancelable promise)
  */
-
-
 function init() {
   var state = getState(function (_ref) {
     var monaco = _ref.monaco,
-        isInitialized = _ref.isInitialized,
-        resolve = _ref.resolve;
+      isInitialized = _ref.isInitialized,
+      resolve = _ref.resolve;
     return {
       monaco: monaco,
       isInitialized: isInitialized,
       resolve: resolve
     };
   });
-
   if (!state.isInitialized) {
     setState({
       isInitialized: true
     });
-
     if (state.monaco) {
       state.resolve(state.monaco);
       return makeCancelable(wrapperPromise);
     }
-
     if (window.monaco && window.monaco.editor) {
       storeMonacoInstance(window.monaco);
       state.resolve(window.monaco);
       return makeCancelable(wrapperPromise);
     }
-
     compose(injectScripts, getMonacoLoaderScript)(configureLoader);
   }
-
   return makeCancelable(wrapperPromise);
 }
+
 /**
  * injects provided scripts into the document.body
  * @param {Object} script - an HTML script element
  * @return {Object} - the injected HTML script element
  */
-
-
 function injectScripts(script) {
   return document.body.appendChild(script);
 }
+
 /**
  * creates an HTML script element with/without provided src
  * @param {string} [src] - the source path of the script
  * @return {Object} - the created HTML script element
  */
-
-
 function createScript(src) {
   var script = document.createElement('script');
   return src && (script.src = src), script;
 }
+
 /**
  * creates an HTML script element with the monaco loader src
  * @return {Object} - the created HTML script element
  */
-
-
 function getMonacoLoaderScript(configureLoader) {
   var state = getState(function (_ref2) {
     var config = _ref2.config,
-        reject = _ref2.reject;
+      reject = _ref2.reject;
     return {
       config: config,
       reject: reject
     };
   });
   var loaderScript = createScript("".concat(state.config.paths.vs, "/loader.js"));
-
   loaderScript.onload = function () {
     return configureLoader();
   };
-
   loaderScript.onerror = state.reject;
   return loaderScript;
 }
+
 /**
  * configures the monaco loader
  */
-
-
 function configureLoader() {
   var state = getState(function (_ref3) {
     var config = _ref3.config,
-        resolve = _ref3.resolve,
-        reject = _ref3.reject;
+      resolve = _ref3.resolve,
+      reject = _ref3.reject;
     return {
       config: config,
       resolve: resolve,
@@ -14256,21 +14201,19 @@ function configureLoader() {
     };
   });
   var require = window.require;
-
   require.config(state.config);
-
-  require(['vs/editor/editor.main'], function (monaco) {
+  require(['vs/editor/editor.main'], function (_ref4) {
+    var monaco = _ref4.m;
     storeMonacoInstance(monaco);
     state.resolve(monaco);
   }, function (error) {
     state.reject(error);
   });
 }
+
 /**
  * store monaco instance in local state
  */
-
-
 function storeMonacoInstance(monaco) {
   if (!getState().monaco) {
     setState({
@@ -14278,20 +14221,18 @@ function storeMonacoInstance(monaco) {
     });
   }
 }
+
 /**
  * internal helper function
  * extracts stored monaco instance
  * @return {Object|null} - the monaco instance
  */
-
-
 function __getMonacoInstance() {
-  return getState(function (_ref4) {
-    var monaco = _ref4.monaco;
+  return getState(function (_ref5) {
+    var monaco = _ref5.monaco;
     return monaco;
   });
 }
-
 var wrapperPromise = new Promise(function (resolve, reject) {
   return setState({
     resolve: resolve,
@@ -14439,7 +14380,14 @@ class HtmlUtil {
       const cell = util.cellSelected();
       cell.innerHTML = html;
       let builderActive = this.builder.doc.querySelector('.builder-active');
-      if (builderActive) this.builder.applyBehaviorOn(builderActive);
+      if (builderActive) {
+        this.builder.applyBehaviorOn(builderActive);
+
+        // reinit after apply html
+        if (this.builder.win.builderRuntime && builderActive.querySelector('[data-cb-type]')) {
+          this.builder.win.builderRuntime.reinitialize(builderActive);
+        }
+      }
 
       //Trigger Change event
       this.builder.opts.onChange();
@@ -14458,7 +14406,14 @@ class HtmlUtil {
       if (!row) return;
       row.innerHTML = html;
       let builderActive = this.builder.doc.querySelector('.builder-active');
-      if (builderActive) this.builder.applyBehaviorOn(builderActive);
+      if (builderActive) {
+        this.builder.applyBehaviorOn(builderActive);
+
+        // reinit after apply html
+        if (this.builder.win.builderRuntime && builderActive.querySelector('[data-cb-type]')) {
+          this.builder.win.builderRuntime.reinitialize(builderActive);
+        }
+      }
 
       //Trigger Change event
       this.builder.opts.onChange();
@@ -14493,6 +14448,12 @@ class HtmlUtil {
       // let builderActive = this.builder.doc.querySelector('.builder-active');
       // if(builderActive) this.builder.applyBehaviorOn(builderActive);
       this.builder.applyBehaviorOn(area);
+
+      // reinit after apply html
+      if (this.builder.win.builderRuntime && area.querySelector('[data-cb-type]')) {
+        this.builder.win.builderRuntime.reinitialize(area);
+      }
+
       /*else {
            const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
           if(builders.length > 1) {
@@ -15090,6 +15051,11 @@ class HtmlUtil {
             element.removeAttribute(name);
           }
         });
+        const areas = element.querySelectorAll('.is-container');
+        Array.from(areas).forEach(area => {
+          area.removeAttribute('data-sort');
+          area.classList.remove('is-builder');
+        });
 
         // Remove runtime-added classes
         const type = element.getAttribute('data-cb-type');
@@ -15113,9 +15079,11 @@ class HtmlUtil {
         });
       }
       // Cleanup data-item-id
-      let elms = element.querySelectorAll('[data-item-id]');
+      let elms = element.querySelectorAll('[data-item-id],[data-slide-id],[contenteditable]');
       elms.forEach(elm => {
         elm.removeAttribute('data-item-id');
+        elm.removeAttribute('data-slide-id');
+        elm.removeAttribute('contenteditable');
       });
 
       // Clean data-edit-id in editable area 
@@ -51152,9 +51120,10 @@ class SettingsUIGenerator {
   generateForm(pluginName, element, onChange) {
     const plugin = this.runtime.getPlugin(pluginName);
     if (!plugin || !plugin.settings) {
-      console.warn(`Plugin "${pluginName}" has no settings schema`);
+      // console.warn(`Plugin "${pluginName}" has no settings schema`);
       if (!plugin.editor) return this.createEmptyForm();
     }
+    if (!plugin.settings) plugin.settings = {};
     const form = document.createElement('div');
     form.className = 'cb-settings-form';
 
@@ -51530,6 +51499,7 @@ class SettingsUIGenerator {
    */
   getCurrentValues(element, settings) {
     const values = {};
+    if (!settings) return values;
     Object.keys(settings).forEach(key => {
       if (key.startsWith('_')) return;
       const attrName = 'data-cb-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -63025,6 +62995,40 @@ class ElementTool {
         dom.addClass(quickadd, 'center');
       }
       quickadd.setAttribute('data-mode', 'elm');
+      const plugin = builder.activeElement && builder.activeElement.closest('[data-cb-type]');
+      const btnAddHeadline = quickadd.querySelector('.add-headline');
+      const btnAddQuote = quickadd.querySelector('.add-quote');
+      const btnAddTable = quickadd.querySelector('.add-table');
+      const btnAddCode = quickadd.querySelector('.add-code');
+      const btnAddForm = quickadd.querySelector('.add-form');
+      const btnAddMap = quickadd.querySelector('.add-map');
+      const btnAddYoutube = quickadd.querySelector('.add-youtube');
+      const btnAddVideo = quickadd.querySelector('.add-video');
+      const btnAddMore = quickadd.querySelector('.add-more');
+      const separator = quickadd.querySelector('.pop-separator');
+      if (plugin) {
+        if (btnAddHeadline) btnAddHeadline.style.display = 'none';
+        if (btnAddQuote) btnAddQuote.style.display = 'none';
+        if (btnAddCode) btnAddCode.style.display = 'none';
+        if (btnAddTable) btnAddTable.style.display = 'none';
+        if (btnAddForm) btnAddForm.style.display = 'none';
+        if (btnAddMap) btnAddMap.style.display = 'none';
+        if (btnAddYoutube) btnAddYoutube.style.display = 'none';
+        if (btnAddVideo) btnAddVideo.style.display = 'none';
+        if (btnAddMore) btnAddMore.style.display = 'none';
+        if (separator) separator.style.display = 'none';
+      } else {
+        if (btnAddHeadline) btnAddHeadline.style.display = '';
+        if (btnAddQuote) btnAddQuote.style.display = '';
+        if (btnAddCode) btnAddCode.style.display = '';
+        if (btnAddTable) btnAddTable.style.display = '';
+        if (btnAddForm) btnAddForm.style.display = '';
+        if (btnAddMap) btnAddMap.style.display = '';
+        if (btnAddYoutube) btnAddYoutube.style.display = '';
+        if (btnAddVideo) btnAddVideo.style.display = '';
+        if (btnAddMore) btnAddMore.style.display = '';
+        if (separator) separator.style.display = '';
+      }
 
       //handleQuickAddClickOut
       const handleQuickAddClickOut = e => {
@@ -63585,6 +63589,14 @@ class ElementTool {
     let elementTool = this.elementTool;
     let elm = this.builder.activeElement;
     if (!elm) return;
+    const editableArea = elm.closest('[data-edit-actions]');
+    if (editableArea) {
+      const editActions = editableArea.dataset.editActions || '';
+      if (editActions.includes('no-add')) {
+        // Adding elements is disabled
+        return;
+      }
+    }
     if (elm.closest('.is-dock')) return;
     // if(elm.closest('[data-cb-type]')) return;
 
@@ -97775,6 +97787,25 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   }
   applyBehaviorOn(builder) {
     const util = this.util;
+    if (builder.closest('[data-cb-type]')) {
+      // Fix buttons not wrapped in  <div style="white-space: nowrap;">
+      let linkButtons = builder.querySelectorAll('a[role="button"]');
+      Array.prototype.forEach.call(linkButtons, btn => {
+        if (btn.parentNode && btn.parentNode === builder) {
+          btn.outerHTML = `
+                    <div style="white-space: nowrap;">
+                        ${btn.outerHTML}
+                    </div>
+                    `;
+        }
+      });
+      linkButtons = builder.querySelectorAll('a[role="button"]');
+      Array.prototype.forEach.call(linkButtons, btn => {
+        btn.parentNode.setAttribute('contenteditable', 'false');
+        btn.setAttribute('contenteditable', 'true');
+      });
+      return;
+    }
 
     // upload
     if (this.opts.onImageUpload) {
@@ -102813,7 +102844,7 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
     if (lockIndicator) lockIndicator.style.display = '';
     let linkTool = this.doc.querySelector('#divLinkTool');
     if (linkTool) linkTool.style.display = '';
-    let spacerTool = this.builderStuff.querySelector('.is-spacer-tool');
+    let spacerTool = this.doc.querySelector('.is-spacer-tool');
     if (spacerTool) spacerTool.style.display = '';
     this.element.image.hideImageTool();
     this.doc.querySelectorAll('.icon-active').forEach(elm => elm.classList.remove('icon-active'));