@kubik-cms/wysiwyg 0.1.21 → 0.1.24

package/dist/wysiwyg.es.js

@@ -5,6 +5,13 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { Controller } from "@hotwired/stimulus";
+import Header from "@editorjs/header";
+import NestedList from "@editorjs/nested-list";
+import Underline from "@editorjs/underline";
+import Embed from "@editorjs/embed";
+import Paragraph from "@editorjs/paragraph";
+import Quote from "@editorjs/quote";
+import Hyperlink from "editorjs-hyperlink";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace(n) {
   if (n.__esModule)
@@ -25,18 +32,18 @@ var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && common
 var _freeGlobal = freeGlobal$1;
 var freeGlobal = _freeGlobal;
 var freeSelf = typeof self == "object" && self && self.Object === Object && self;
-var root$9 = freeGlobal || freeSelf || Function("return this")();
-var _root = root$9;
-var root$8 = _root;
-var Symbol$5 = root$8.Symbol;
-var _Symbol = Symbol$5;
-var Symbol$4 = _Symbol;
-var objectProto$6 = Object.prototype;
-var hasOwnProperty$6 = objectProto$6.hasOwnProperty;
-var nativeObjectToString$1 = objectProto$6.toString;
-var symToStringTag$1 = Symbol$4 ? Symbol$4.toStringTag : void 0;
+var root$4 = freeGlobal || freeSelf || Function("return this")();
+var _root = root$4;
+var root$3 = _root;
+var Symbol$4 = root$3.Symbol;
+var _Symbol = Symbol$4;
+var Symbol$3 = _Symbol;
+var objectProto$5 = Object.prototype;
+var hasOwnProperty$5 = objectProto$5.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$5.toString;
+var symToStringTag$1 = Symbol$3 ? Symbol$3.toStringTag : void 0;
 function getRawTag$1(value) {
-  var isOwn = hasOwnProperty$6.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+  var isOwn = hasOwnProperty$5.call(value, symToStringTag$1), tag = value[symToStringTag$1];
   try {
     value[symToStringTag$1] = void 0;
     var unmasked = true;
@@ -53,39 +60,39 @@ function getRawTag$1(value) {
   return result2;
 }
 var _getRawTag = getRawTag$1;
-var objectProto$5 = Object.prototype;
-var nativeObjectToString = objectProto$5.toString;
+var objectProto$4 = Object.prototype;
+var nativeObjectToString = objectProto$4.toString;
 function objectToString$1(value) {
   return nativeObjectToString.call(value);
 }
 var _objectToString = objectToString$1;
-var Symbol$3 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;
+var Symbol$2 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;
 var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
-var symToStringTag = Symbol$3 ? Symbol$3.toStringTag : void 0;
-function baseGetTag$4(value) {
+var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : void 0;
+function baseGetTag$2(value) {
   if (value == null) {
     return value === void 0 ? undefinedTag : nullTag;
   }
   return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
 }
-var _baseGetTag = baseGetTag$4;
+var _baseGetTag = baseGetTag$2;
 function isObject$6(value) {
   var type = typeof value;
   return value != null && (type == "object" || type == "function");
 }
 var isObject_1 = isObject$6;
-var baseGetTag$3 = _baseGetTag, isObject$5 = isObject_1;
+var baseGetTag$1 = _baseGetTag, isObject$5 = isObject_1;
 var asyncTag = "[object AsyncFunction]", funcTag = "[object Function]", genTag = "[object GeneratorFunction]", proxyTag = "[object Proxy]";
 function isFunction$1(value) {
   if (!isObject$5(value)) {
     return false;
   }
-  var tag = baseGetTag$3(value);
+  var tag = baseGetTag$1(value);
   return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
 }
 var isFunction_1 = isFunction$1;
-var root$7 = _root;
-var coreJsData$1 = root$7["__core-js_shared__"];
+var root$2 = _root;
+var coreJsData$1 = root$2["__core-js_shared__"];
 var _coreJsData = coreJsData$1;
 var coreJsData = _coreJsData;
 var maskSrcKey = function() {
@@ -98,7 +105,7 @@ function isMasked$1(func) {
 var _isMasked = isMasked$1;
 var funcProto$1 = Function.prototype;
 var funcToString$1 = funcProto$1.toString;
-function toSource$2(func) {
+function toSource$1(func) {
   if (func != null) {
     try {
       return funcToString$1.call(func);
@@ -111,22 +118,22 @@ function toSource$2(func) {
   }
   return "";
 }
-var _toSource = toSource$2;
-var isFunction = isFunction_1, isMasked = _isMasked, isObject$4 = isObject_1, toSource$1 = _toSource;
+var _toSource = toSource$1;
+var isFunction = isFunction_1, isMasked = _isMasked, isObject$4 = isObject_1, toSource = _toSource;
 var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
 var reIsHostCtor = /^\[object .+?Constructor\]$/;
-var funcProto = Function.prototype, objectProto$4 = Object.prototype;
+var funcProto = Function.prototype, objectProto$3 = Object.prototype;
 var funcToString = funcProto.toString;
-var hasOwnProperty$5 = objectProto$4.hasOwnProperty;
+var hasOwnProperty$4 = objectProto$3.hasOwnProperty;
 var reIsNative = RegExp(
-  "^" + funcToString.call(hasOwnProperty$5).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+  "^" + funcToString.call(hasOwnProperty$4).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
 );
 function baseIsNative$1(value) {
   if (!isObject$4(value) || isMasked(value)) {
     return false;
   }
   var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
-  return pattern.test(toSource$1(value));
+  return pattern.test(toSource(value));
 }
 var _baseIsNative = baseIsNative$1;
 function getValue$1(object, key) {
@@ -134,15 +141,15 @@ function getValue$1(object, key) {
 }
 var _getValue = getValue$1;
 var baseIsNative = _baseIsNative, getValue = _getValue;
-function getNative$7(object, key) {
+function getNative$3(object, key) {
   var value = getValue(object, key);
   return baseIsNative(value) ? value : void 0;
 }
-var _getNative = getNative$7;
-var getNative$6 = _getNative;
+var _getNative = getNative$3;
+var getNative$2 = _getNative;
 var defineProperty$1 = function() {
   try {
-    var func = getNative$6(Object, "defineProperty");
+    var func = getNative$2(Object, "defineProperty");
     func({}, "", {});
     return func;
   } catch (e) {
@@ -168,25 +175,25 @@ function eq$2(value, other) {
 }
 var eq_1 = eq$2;
 var baseAssignValue = _baseAssignValue, eq$1 = eq_1;
-var objectProto$3 = Object.prototype;
-var hasOwnProperty$4 = objectProto$3.hasOwnProperty;
+var objectProto$2 = Object.prototype;
+var hasOwnProperty$3 = objectProto$2.hasOwnProperty;
 function assignValue$1(object, key, value) {
   var objValue = object[key];
-  if (!(hasOwnProperty$4.call(object, key) && eq$1(objValue, value)) || value === void 0 && !(key in object)) {
+  if (!(hasOwnProperty$3.call(object, key) && eq$1(objValue, value)) || value === void 0 && !(key in object)) {
     baseAssignValue(object, key, value);
   }
 }
 var _assignValue = assignValue$1;
 var isArray$4 = Array.isArray;
 var isArray_1 = isArray$4;
-function isObjectLike$3(value) {
+function isObjectLike$1(value) {
   return value != null && typeof value == "object";
 }
-var isObjectLike_1 = isObjectLike$3;
-var baseGetTag$2 = _baseGetTag, isObjectLike$2 = isObjectLike_1;
+var isObjectLike_1 = isObjectLike$1;
+var baseGetTag = _baseGetTag, isObjectLike = isObjectLike_1;
 var symbolTag = "[object Symbol]";
 function isSymbol$3(value) {
-  return typeof value == "symbol" || isObjectLike$2(value) && baseGetTag$2(value) == symbolTag;
+  return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
 }
 var isSymbol_1 = isSymbol$3;
 var isArray$3 = isArray_1, isSymbol$2 = isSymbol_1;
@@ -202,8 +209,8 @@ function isKey$1(value, object) {
   return reIsPlainProp.test(value) || !reIsDeepProp.test(value) || object != null && value in Object(object);
 }
 var _isKey = isKey$1;
-var getNative$5 = _getNative;
-var nativeCreate$4 = getNative$5(Object, "create");
+var getNative$1 = _getNative;
+var nativeCreate$4 = getNative$1(Object, "create");
 var _nativeCreate = nativeCreate$4;
 var nativeCreate$3 = _nativeCreate;
 function hashClear$1() {
@@ -219,23 +226,23 @@ function hashDelete$1(key) {
 var _hashDelete = hashDelete$1;
 var nativeCreate$2 = _nativeCreate;
 var HASH_UNDEFINED$1 = "__lodash_hash_undefined__";
-var objectProto$2 = Object.prototype;
-var hasOwnProperty$3 = objectProto$2.hasOwnProperty;
+var objectProto$1 = Object.prototype;
+var hasOwnProperty$2 = objectProto$1.hasOwnProperty;
 function hashGet$1(key) {
   var data = this.__data__;
   if (nativeCreate$2) {
     var result2 = data[key];
     return result2 === HASH_UNDEFINED$1 ? void 0 : result2;
   }
-  return hasOwnProperty$3.call(data, key) ? data[key] : void 0;
+  return hasOwnProperty$2.call(data, key) ? data[key] : void 0;
 }
 var _hashGet = hashGet$1;
 var nativeCreate$1 = _nativeCreate;
-var objectProto$1 = Object.prototype;
-var hasOwnProperty$2 = objectProto$1.hasOwnProperty;
+var objectProto = Object.prototype;
+var hasOwnProperty$1 = objectProto.hasOwnProperty;
 function hashHas$1(key) {
   var data = this.__data__;
-  return nativeCreate$1 ? data[key] !== void 0 : hasOwnProperty$2.call(data, key);
+  return nativeCreate$1 ? data[key] !== void 0 : hasOwnProperty$1.call(data, key);
 }
 var _hashHas = hashHas$1;
 var nativeCreate = _nativeCreate;
@@ -334,15 +341,15 @@ ListCache$1.prototype.get = listCacheGet;
 ListCache$1.prototype.has = listCacheHas;
 ListCache$1.prototype.set = listCacheSet;
 var _ListCache = ListCache$1;
-var getNative$4 = _getNative, root$6 = _root;
-var Map$3 = getNative$4(root$6, "Map");
-var _Map = Map$3;
-var Hash = _Hash, ListCache = _ListCache, Map$2 = _Map;
+var getNative = _getNative, root$1 = _root;
+var Map$2 = getNative(root$1, "Map");
+var _Map = Map$2;
+var Hash = _Hash, ListCache = _ListCache, Map$1 = _Map;
 function mapCacheClear$1() {
   this.size = 0;
   this.__data__ = {
     "hash": new Hash(),
-    "map": new (Map$2 || ListCache)(),
+    "map": new (Map$1 || ListCache)(),
     "string": new Hash()
   };
 }
@@ -453,9 +460,9 @@ function arrayMap$1(array, iteratee) {
   return result2;
 }
 var _arrayMap = arrayMap$1;
-var Symbol$2 = _Symbol, arrayMap = _arrayMap, isArray$2 = isArray_1, isSymbol$1 = isSymbol_1;
+var Symbol$1 = _Symbol, arrayMap = _arrayMap, isArray$2 = isArray_1, isSymbol$1 = isSymbol_1;
 var INFINITY$1 = 1 / 0;
-var symbolProto$1 = Symbol$2 ? Symbol$2.prototype : void 0, symbolToString = symbolProto$1 ? symbolProto$1.toString : void 0;
+var symbolProto = Symbol$1 ? Symbol$1.prototype : void 0, symbolToString = symbolProto ? symbolProto.toString : void 0;
 function baseToString$1(value) {
   if (typeof value == "string") {
     return value;
@@ -547,99 +554,6 @@ function get(object, path, defaultValue) {
   return result2 === void 0 ? defaultValue : result2;
 }
 var get_1 = get;
-var root$5 = _root;
-root$5.Uint8Array;
-var Symbol$1 = _Symbol;
-var symbolProto = Symbol$1 ? Symbol$1.prototype : void 0;
-symbolProto ? symbolProto.valueOf : void 0;
-var baseGetTag$1 = _baseGetTag, isObjectLike$1 = isObjectLike_1;
-var argsTag = "[object Arguments]";
-function baseIsArguments$1(value) {
-  return isObjectLike$1(value) && baseGetTag$1(value) == argsTag;
-}
-var _baseIsArguments = baseIsArguments$1;
-var baseIsArguments = _baseIsArguments, isObjectLike = isObjectLike_1;
-var objectProto = Object.prototype;
-var hasOwnProperty$1 = objectProto.hasOwnProperty;
-var propertyIsEnumerable = objectProto.propertyIsEnumerable;
-baseIsArguments(function() {
-  return arguments;
-}()) ? baseIsArguments : function(value) {
-  return isObjectLike(value) && hasOwnProperty$1.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
-};
-var isBuffer = { exports: {} };
-function stubFalse() {
-  return false;
-}
-var stubFalse_1 = stubFalse;
-(function(module, exports) {
-  var root2 = _root, stubFalse2 = stubFalse_1;
-  var freeExports = exports && !exports.nodeType && exports;
-  var freeModule = freeExports && true && module && !module.nodeType && module;
-  var moduleExports = freeModule && freeModule.exports === freeExports;
-  var Buffer2 = moduleExports ? root2.Buffer : void 0;
-  var nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : void 0;
-  var isBuffer2 = nativeIsBuffer || stubFalse2;
-  module.exports = isBuffer2;
-})(isBuffer, isBuffer.exports);
-var _nodeUtil = { exports: {} };
-(function(module, exports) {
-  var freeGlobal2 = _freeGlobal;
-  var freeExports = exports && !exports.nodeType && exports;
-  var freeModule = freeExports && true && module && !module.nodeType && module;
-  var moduleExports = freeModule && freeModule.exports === freeExports;
-  var freeProcess = moduleExports && freeGlobal2.process;
-  var nodeUtil2 = function() {
-    try {
-      var types = freeModule && freeModule.require && freeModule.require("util").types;
-      if (types) {
-        return types;
-      }
-      return freeProcess && freeProcess.binding && freeProcess.binding("util");
-    } catch (e) {
-    }
-  }();
-  module.exports = nodeUtil2;
-})(_nodeUtil, _nodeUtil.exports);
-var nodeUtil = _nodeUtil.exports;
-nodeUtil && nodeUtil.isTypedArray;
-var getNative$3 = _getNative, root$4 = _root;
-var DataView$1 = getNative$3(root$4, "DataView");
-var _DataView = DataView$1;
-var getNative$2 = _getNative, root$3 = _root;
-var Promise$2 = getNative$2(root$3, "Promise");
-var _Promise = Promise$2;
-var getNative$1 = _getNative, root$2 = _root;
-var Set$2 = getNative$1(root$2, "Set");
-var _Set = Set$2;
-var getNative = _getNative, root$1 = _root;
-var WeakMap$1 = getNative(root$1, "WeakMap");
-var _WeakMap = WeakMap$1;
-var DataView = _DataView, Map$1 = _Map, Promise$1 = _Promise, Set$1 = _Set, WeakMap = _WeakMap, baseGetTag = _baseGetTag, toSource = _toSource;
-var mapTag = "[object Map]", objectTag = "[object Object]", promiseTag = "[object Promise]", setTag = "[object Set]", weakMapTag = "[object WeakMap]";
-var dataViewTag = "[object DataView]";
-var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set$1), weakMapCtorString = toSource(WeakMap);
-var getTag = baseGetTag;
-if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map$1 && getTag(new Map$1()) != mapTag || Promise$1 && getTag(Promise$1.resolve()) != promiseTag || Set$1 && getTag(new Set$1()) != setTag || WeakMap && getTag(new WeakMap()) != weakMapTag) {
-  getTag = function(value) {
-    var result2 = baseGetTag(value), Ctor = result2 == objectTag ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
-    if (ctorString) {
-      switch (ctorString) {
-        case dataViewCtorString:
-          return dataViewTag;
-        case mapCtorString:
-          return mapTag;
-        case promiseCtorString:
-          return promiseTag;
-        case setCtorString:
-          return setTag;
-        case weakMapCtorString:
-          return weakMapTag;
-      }
-    }
-    return result2;
-  };
-}
 const isDate = (d) => d instanceof Date;
 const isEmpty = (o) => Object.keys(o).length === 0;
 const isObject$2 = (o) => o != null && typeof o === "object";
@@ -9003,17 +8917,104 @@ function array_move(arr, old_index, new_index) {
   arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
   return arr;
 }
+function uiPatch(data, patch) {
+  const ui = Object.assign({}, data._ui || {}, patch);
+  return Object.assign({}, data, { _ui: ui });
+}
+function parseAdditionalInformation(payload) {
+  var _a;
+  const raw = (_a = payload == null ? void 0 : payload.additional_information) != null ? _a : payload == null ? void 0 : payload.additional_info;
+  if (raw == null || raw === "")
+    return null;
+  if (typeof raw === "object")
+    return raw;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function itemPathForResourceId(idPath) {
+  const withoutId = idPath.replace(/\.id$/, "");
+  const lastDot = withoutId.lastIndexOf(".");
+  if (lastDot === -1)
+    return withoutId;
+  return withoutId.substring(0, lastDot);
+}
+function applyMediaMetadataFromGallery(data, resourceIdPath, payload) {
+  var _a, _b;
+  const info = parseAdditionalInformation(payload);
+  if (!info)
+    return data;
+  const itemPath = itemPathForResourceId(resourceIdPath);
+  const mappings = [
+    ["alt_text", info.alt_text],
+    ["caption", (_a = info.img_title) != null ? _a : info.caption],
+    ["credit", (_b = info.img_credit) != null ? _b : info.credit]
+  ];
+  let result2 = data;
+  mappings.forEach(([field, value]) => {
+    if (value == null || String(value).trim() === "")
+      return;
+    result2 = set_1(result2, `${itemPath}.${field}`, String(value).trim());
+  });
+  return result2;
+}
 class KubikWidgetController extends Controller {
   connect() {
+    this.syncExpandedFromData();
     this.getNewWidget();
-    console.log("connected widget");
     const element = this.element;
+    if (this.expandedValue) {
+      element.classList.add(this.expandedClass);
+    } else {
+      element.classList.remove(this.expandedClass);
+    }
     element.addEventListener("keydown", this.handleKeyDown.bind(this));
     element.addEventListener("paste", this.handlePaste.bind(this));
   }
+  syncExpandedFromData() {
+    const ui = this.dataValue._ui || {};
+    if (typeof ui.expanded === "boolean") {
+      this.expandedValue = ui.expanded;
+    } else if (typeof this.dataValue.expanded === "boolean") {
+      this.expandedValue = this.dataValue.expanded;
+    }
+  }
+  toggleExpanded() {
+    this.expandedValue = !this.expandedValue;
+    if (this.hasExpandedInputTarget) {
+      this.expandedInputTarget.value = this.expandedValue;
+    }
+    this.dataValue = uiPatch(this.dataValue, { expanded: this.expandedValue });
+  }
+  setActiveTab(event) {
+    const tab = event.currentTarget.value;
+    this.dataValue = uiPatch(this.dataValue, { active_tab: tab });
+  }
+  repeaterToggle(event) {
+    var _a;
+    const { tab, index: index2, expanded } = event.detail;
+    if (tab == null || index2 == null)
+      return;
+    const items = [...((_a = this.dataValue[tab]) == null ? void 0 : _a.repeated_items) || []];
+    if (!items[index2])
+      return;
+    items[index2] = Object.assign({}, items[index2], {
+      _ui: Object.assign({}, items[index2]._ui || {}, { expanded })
+    });
+    const tabData = Object.assign({}, this.dataValue[tab], { repeated_items: items });
+    this.dataValue = Object.assign({}, this.dataValue, { [tab]: tabData });
+  }
+  expandedValueChanged() {
+    if (this.expandedValue) {
+      this.element.classList.add(this.expandedClass);
+    } else {
+      this.element.classList.remove(this.expandedClass);
+    }
+  }
   handleKeyDown(event) {
     const element = this.element;
-    console.log(event.key);
     if (element.contains(document.activeElement) && (event.key === "Tab" || event.key === "Enter")) {
       event.stopPropagation();
     }
@@ -9070,10 +9071,18 @@ class KubikWidgetController extends Controller {
     this.getNewWidget();
   }
   dataValueChanged(value, previousValue) {
-    const diff = updatedDiff(value, previousValue);
+    if (!previousValue || !value)
+      return;
+    const diff = updatedDiff(previousValue, value);
     const changedKeys = deepKeys_1(diff);
+    if (changedKeys.length === 0)
+      return;
+    if (changedKeys.every((key) => key === "_ui" || key.startsWith("_ui."))) {
+      return;
+    }
     const addedItem = diff["items"] && diff["items"]["repeated_items"] && JSON.stringify(Object.values(diff["items"]["repeated_items"])[0]) === JSON.stringify({});
-    if (addedItem || changedKeys.filter((key) => key.match(/^id$|\.id$/g)).length > 0) {
+    const resourceIdChange = changedKeys.some((key) => key.match(/(^|\.)id$/));
+    if (addedItem || resourceIdChange) {
       this.getNewWidget();
     }
   }
@@ -9092,11 +9101,6 @@ class KubikWidgetController extends Controller {
     if (event.currentTarget.dataset.checkbox === "true" && event.currentTarget.type === "checkbox") {
       v = Array.from(event.currentTarget.parentElement.parentElement.querySelectorAll(`[name="${event.currentTarget.name}"]`)).map((el) => el.checked ? el.value : null).filter((el) => el !== null);
     }
-    if (event.currentTarget.dataset.repeatedKeyValue === "true") {
-      const [field, idx, ...rest] = event.currentTarget.name.split(".").reverse();
-      const fieldName = [rest.reverse().join("."), idx.toString(), field].join(".");
-      get_1(this.dataValue, fieldName, "");
-    }
     if (event.currentTarget.dataset.repeated === "true") {
       event.currentTarget.dataset.index;
       const [field, index2, ...rest] = event.currentTarget.name.split(".").reverse();
@@ -9127,15 +9131,22 @@ class KubikWidgetController extends Controller {
   }
   receiveModalReturn(return_value) {
     const returnObject = return_value;
-    const duplicateData = set_1(this.dataValue, returnObject["return_payload"]["field_name"], returnObject["payload"]["id"]);
+    const fieldPath = returnObject["return_payload"]["field_name"];
+    let duplicateData = set_1(this.dataValue, fieldPath, returnObject["payload"]["id"]);
+    duplicateData = applyMediaMetadataFromGallery(
+      duplicateData,
+      fieldPath,
+      returnObject["payload"]
+    );
     this.dataValue = duplicateData;
     this.getNewWidget();
   }
   getNewWidget() {
-    fetch(`${this.setupValue["src"]}.json`, {
+    fetch(`${this.setupValue["src"]}`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
+        "Accept": "text/vnd.turbo-stream.html",
         "X-CSRF-Token": getMetaValue("csrf-token")
       },
       body: JSON.stringify({
@@ -9144,9 +9155,14 @@ class KubikWidgetController extends Controller {
         setup: this.setupValue,
         max_items: this.maxItemsValue
       })
-    }).then((response) => response.json()).then((data) => {
-      const element = this.element;
-      element.innerHTML = data.html_data;
+    }).then((response) => response.text()).then((html) => {
+      Turbo.renderStreamMessage(html);
+      this.syncExpandedFromData();
+      if (this.expandedValue) {
+        this.element.classList.add(this.expandedClass);
+      } else {
+        this.element.classList.remove(this.expandedClass);
+      }
     });
   }
 }
@@ -9154,30 +9170,49 @@ __publicField(KubikWidgetController, "values", {
   widgetId: String,
   setup: Object,
   data: Object,
-  maxItems: { type: Number, default: 0 }
+  maxItems: { type: Number, default: 0 },
+  expanded: { type: Boolean, default: false }
 });
+__publicField(KubikWidgetController, "targets", ["expandedInput"]);
+__publicField(KubikWidgetController, "classes", ["expanded"]);
 class KubikRepeaterController extends Controller {
   connect() {
+    if (this.expandedValue) {
+      this.element.classList.add(this.expandedClass);
+    }
   }
   updateHeader(event) {
     this.headerTarget.innerHTML = event.currentTarget.value;
   }
   toggleItem(event) {
-    if (this.element.classList.contains(this.expandedClass)) {
-      this.element.classList.remove(this.expandedClass);
-    } else {
+    const expanded = !this.element.classList.contains(this.expandedClass);
+    if (expanded) {
       this.element.classList.add(this.expandedClass);
+    } else {
+      this.element.classList.remove(this.expandedClass);
     }
+    this.dispatch("toggle", {
+      prefix: "",
+      detail: {
+        tab: this.tabValue,
+        index: this.indexValue,
+        expanded
+      }
+    });
   }
 }
 __publicField(KubikRepeaterController, "targets", ["header"]);
 __publicField(KubikRepeaterController, "classes", ["expanded"]);
+__publicField(KubikRepeaterController, "values", {
+  tab: String,
+  index: Number,
+  expanded: { type: Boolean, default: false }
+});
 class KubikKeyValueRepeaterController extends Controller {
   connect() {
     this.renderFields();
   }
   dataValueChanged() {
-    console.log("dataValueChanged", this.dataValue);
     this.dispatch("updateData", {
       detail: {
         fieldName: this.fieldNameValue,
@@ -9443,28 +9478,44 @@ __publicField(KubikAutocompleteController, "values", {
   results: { type: Array, default: [] },
   resultActive: Number
 });
+function widgetExpanded(data) {
+  if (!data || typeof data !== "object")
+    return false;
+  if (data._ui && typeof data._ui.expanded === "boolean")
+    return data._ui.expanded;
+  return !!data.expanded;
+}
 const widgetWrapper = function widgetWrapper2(details = {}, data) {
   let wrapperAttributes = {
     "data-controller": "kubik-widget",
+    "data-kubik-widget-expanded-class": "kubik-widget__expanded",
+    "data-kubik-widget-expanded-value": JSON.stringify(widgetExpanded(data)),
     "data-kubik-widget-setup-value": JSON.stringify(details.setup),
     "data-kubik-widget-data-value": JSON.stringify(data),
     "data-kubik-widget-widget-id-value": details.setup.widget_id,
     "data-kubik-widget-widget-icon": details.setup.config.icon,
+    "refresh": "morph",
     id: details.setup.widget_id
   };
   if (details.items_limit) {
     wrapperAttributes["data-kubik-widget-items-max-items-value"] = details.items_limit;
   }
   const wrapper = makeElement(
-    "div",
+    "turbo-frame",
     [
       "kubik_media_wrapper",
-      "kubik-wysiwyg-component"
+      "kubik-wysiwyg-component",
+      details.setup.widget_class
     ],
     wrapperAttributes
   );
   return wrapper;
 };
+function uiFromData(data) {
+  if (!data || typeof data !== "object")
+    return {};
+  return data._ui && typeof data._ui === "object" ? data._ui : {};
+}
 class PluginFactory {
   static get defaultWidgetConfig() {
     return {
@@ -9472,7 +9523,7 @@ class PluginFactory {
     };
   }
   constructor({ data, api }) {
-    this.data = data;
+    this.data = data || {};
     this.api = api;
     this.randomString = Math.random().toString(36).substring(2, 7);
     this.label = this.constructor.toolbox.title;
@@ -9482,9 +9533,16 @@ class PluginFactory {
       defaultConfig,
       localConfig
     );
+    const ui = uiFromData(this.data);
+    if (this.data.expanded !== void 0 && ui.expanded === void 0) {
+      this.data = Object.assign({}, this.data, {
+        _ui: Object.assign({}, ui, { expanded: this.data.expanded })
+      });
+    }
   }
   render() {
     const widgetId = [this.config.widget_name, this.randomString].join("-");
+    const widgetClass = `widget_${this.api.ui.nodes.wrapper.parentElement.dataset.editorId}`;
     const wrapper = widgetWrapper({
       setup: {
         label: this.label,
@@ -9492,6 +9550,7 @@ class PluginFactory {
         src: this.config.data_src,
         widget_id: widgetId,
         widget_type: this.config.widget_name,
+        widget_class: widgetClass,
         config: this.config
       }
     }, this.data);
@@ -9503,17 +9562,232 @@ class PluginFactory {
     this.config.tabs.forEach((tab) => {
       widgetData[tab["name"]] = data[tab["name"]];
     });
+    if (data._ui) {
+      widgetData._ui = data._ui;
+    } else if (data.expanded !== void 0) {
+      widgetData._ui = { expanded: data.expanded };
+    }
     return widgetData;
   }
   validate(savedData) {
     return true;
   }
 }
+function defineBlock({ toolbox, sanitize = {}, widgetConfig }) {
+  if (!toolbox || !widgetConfig) {
+    throw new Error("defineBlock requires toolbox and widgetConfig");
+  }
+  return class extends PluginFactory {
+    static get toolbox() {
+      return toolbox;
+    }
+    static get sanitize() {
+      return sanitize;
+    }
+    static get widgetConfig() {
+      return widgetConfig;
+    }
+  };
+}
+function contentTab(fields = []) {
+  return {
+    name: "content",
+    label: "Content",
+    fields: [
+      { name: "title", label: "Title", type: "text" },
+      { name: "intro", label: "Intro", type: "textarea" },
+      { name: "link", label: "Link", type: "text" },
+      { name: "link_text", label: "Link text", type: "text" },
+      ...fields
+    ]
+  };
+}
+function settingsTab({ layouts = [], extras = [] } = {}) {
+  const fields = [];
+  if (layouts.length > 0) {
+    fields.push({
+      name: "layout",
+      label: "Layout",
+      type: "select",
+      options: layouts
+    });
+  }
+  fields.push(
+    { name: "additional_classes", type: "text", label: "Additional classes" },
+    { name: "element_id", type: "text", label: "Element ID" },
+    ...extras
+  );
+  return { name: "settings", label: "Settings", fields };
+}
+function standardSettingsExtras() {
+  return [
+    {
+      name: "image_loading",
+      label: "Image loading",
+      type: "select",
+      options: [
+        { value: "lazy", label: "Lazy" },
+        { value: "eager", label: "Eager (above the fold)" }
+      ]
+    },
+    {
+      name: "data_attributes",
+      label: "Data attributes",
+      type: "key_value_repeater",
+      prefix: "data",
+      fields: ["key", "value"]
+    }
+  ];
+}
+function thumbAndFieldsSections() {
+  return [
+    { name: "thumb", classes: "thumb" },
+    { name: "fields", classes: "fields" }
+  ];
+}
+function manualItemsTab({
+  name = "items",
+  label = "Items",
+  itemFields,
+  addLabel = "Add item",
+  summary = "title",
+  sections = thumbAndFieldsSections()
+}) {
+  return {
+    name,
+    label,
+    sections,
+    fields: itemFields,
+    repeated: true,
+    repeater_settings: {
+      add_label: addLabel,
+      summary
+    }
+  };
+}
+function resourceListSettingsTab({
+  filterField = "filter",
+  filterLabel = "Filter",
+  filterOptions = [],
+  layouts = [],
+  extras = []
+}) {
+  const fields = [];
+  if (filterOptions.length > 0) {
+    fields.push({
+      name: filterField,
+      label: filterLabel,
+      type: "select",
+      options: filterOptions
+    });
+  }
+  if (layouts.length > 0) {
+    fields.push({
+      name: "layout",
+      label: "Layout",
+      type: "select",
+      options: layouts
+    });
+  }
+  fields.push(
+    { name: "additional_classes", type: "text", label: "Additional classes" },
+    { name: "element_id", type: "text", label: "Element ID" },
+    ...extras
+  );
+  return { name: "settings", label: "Settings", fields };
+}
+const presets = {
+  contentTab,
+  settingsTab,
+  standardSettingsExtras,
+  thumbAndFieldsSections,
+  manualItemsTab,
+  resourceListSettingsTab
+};
+const DEFAULT_INLINE_TOOLBAR = ["bold", "italic", "underline", "hyperlink"];
+const WIDGET_INLINE_TOOLBAR = ["underline", "hyperlink"];
+const EDITORJS_INLINE_ICON_SPRITE_ID = "kubik-editorjs-inline-icons";
+const EDITORJS_LINK_ICON_SPRITE = `
+<symbol id="link" viewBox="0 0 14 10">
+  <path d="M6 0v2H5a3 3 0 000 6h1v2H5A5 5 0 115 0h1zm2 0h1a5 5 0 110 10H8V8h1a3 3 0 000-6H8V0zM5 4h4a1 1 0 110 2H5a1 1 0 110-2z"/>
+</symbol>
+<symbol id="unlink" viewBox="0 0 15 11">
+  <path d="M13.073 2.099l-1.448 1.448A3 3 0 009 2H8V0h1c1.68 0 3.166.828 4.073 2.099zM6.929 4l-.879.879L7.172 6H5a1 1 0 110-2h1.929zM6 0v2H5a3 3 0 100 6h1v2H5A5 5 0 115 0h1zm6.414 7l2.122 2.121-1.415 1.415L11 8.414l-2.121 2.122L7.464 9.12 9.586 7 7.464 4.879 8.88 3.464 11 5.586l2.121-2.122 1.415 1.415L12.414 7z"/>
+</symbol>
+`;
+function ensureEditorJsInlineIcons() {
+  if (document.getElementById(EDITORJS_INLINE_ICON_SPRITE_ID))
+    return;
+  if (document.getElementById("link"))
+    return;
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svg.setAttribute("aria-hidden", "true");
+  svg.style.display = "none";
+  svg.id = EDITORJS_INLINE_ICON_SPRITE_ID;
+  svg.innerHTML = EDITORJS_LINK_ICON_SPRITE;
+  document.body.appendChild(svg);
+}
+function buildBaseEditorTools({
+  widgetInlineToolbar = WIDGET_INLINE_TOOLBAR,
+  richInlineToolbar = DEFAULT_INLINE_TOOLBAR
+} = {}) {
+  return {
+    paragraph: {
+      class: Paragraph,
+      inlineToolbar: widgetInlineToolbar
+    },
+    hyperlink: {
+      class: Hyperlink,
+      config: {}
+    },
+    embed: {
+      class: Embed,
+      config: {
+        services: {
+          youtube: true,
+          vimeo: true,
+          twitter: true,
+          instagram: true
+        }
+      }
+    },
+    header: {
+      class: Header,
+      config: {
+        placeholder: "Add header text",
+        levels: [2, 3, 4, 5, 6],
+        defaultLevel: 2
+      },
+      inlineToolbar: richInlineToolbar
+    },
+    nested_list: {
+      class: NestedList,
+      inlineToolbar: richInlineToolbar
+    },
+    quote: {
+      class: Quote,
+      inlineToolbar: richInlineToolbar,
+      shortcut: "CMD+SHIFT+O",
+      config: {
+        quotePlaceholder: "Enter a quote",
+        captionPlaceholder: "Quote's author"
+      }
+    },
+    underline: Underline
+  };
+}
 var index = {
   KubikWidgetController,
   KubikRepeaterController,
   KubikKeyValueRepeaterController,
   PluginFactory,
-  KubikAutocompleteController
+  KubikAutocompleteController,
+  defineBlock,
+  presets,
+  DEFAULT_INLINE_TOOLBAR,
+  WIDGET_INLINE_TOOLBAR,
+  ensureEditorJsInlineIcons,
+  buildBaseEditorTools
 };
-export { index as default };
+export { DEFAULT_INLINE_TOOLBAR, KubikAutocompleteController, KubikKeyValueRepeaterController, KubikRepeaterController, KubikWidgetController, PluginFactory, WIDGET_INLINE_TOOLBAR, buildBaseEditorTools, index as default, defineBlock, ensureEditorJsInlineIcons, presets };