@storyblok/js 6.2.1 → 6.3.0

package/dist/bridge.d.ts

@@ -1 +1 @@
-export declare const loadBridge: (src: string) => Promise<unknown>;
+export declare const loadBridge: () => Promise<void>;

package/dist/index-CtMAhUF-.js

@@ -0,0 +1,576 @@
+/**
+ * name: @storyblok/js
+ * (c) 2026
+ * description: SDK to integrate Storyblok into your project using JavaScript.
+ * author: undefined
+ */
+const M = (o, t) => {
+  for (; o && o.nodeType === 1; ) {
+    if (o.hasAttribute(t)) return o;
+    o = o.parentNode;
+  }
+  return null;
+}, y = (o) => {
+  const t = M(o, "data-blok-c");
+  if (!t) return null;
+  const e = t.getAttribute("data-blok-c");
+  return JSON.parse(e);
+}, A = (o, t) => o.contains(t), l = (o) => document.querySelector(`[data-blok-uid="${o}"]`), g = (o) => {
+  const t = o.getBoundingClientRect();
+  return t.top < 0 && t.top + t.height >= 0 || t.top >= 0 && t.top <= (window.innerHeight || document.documentElement.clientHeight);
+}, I = (o) => {
+  let t = {};
+  try {
+    const e = o.replace(/\\/g, "");
+    t = JSON.parse(e);
+  } catch {
+    console.error("Error parsing json", o);
+  }
+  return t;
+}, N = (o) => {
+  const t = [], e = () => NodeFilter.FILTER_ACCEPT, n = document.createNodeIterator(o, NodeFilter.SHOW_COMMENT, e, !1);
+  let s = {};
+  for (; s = n.nextNode(); ) if (s.nodeValue.indexOf("#storyblok#") > -1) {
+    const r = s.nodeValue.replace("#storyblok#", ""), u = s.nextElementSibling || s.nextSibling, d = I(r);
+    d && t.push({ options: d, el: u });
+  }
+  return t;
+}, f = (o) => {
+  let t = "";
+  return location.search.substr(1).split("&").forEach((e) => {
+    const n = e.split("=");
+    n[0] === o && (t = decodeURIComponent(n[1]));
+  }), t;
+}, O = (o, t, e) => typeof o != "string" ? "" : o.toString().replace(/([A-Z])/g, " $1").trim().toLowerCase().replace(/[_-]/g, " ").replace(/(?:^|\s)\S/g, function(n, s) {
+  return n.toUpperCase();
+}), E = (o) => o && o.display_name ? o.display_name : O(o.name), k = (o) => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  t.setAttribute("viewBox", o.viewBox), t.setAttribute("class", o.svgClass);
+  const e = document.createElementNS(t.namespaceURI, "path");
+  return e.setAttribute("d", o.path), e.setAttribute("fill", o.pathFill), e.setAttribute("transform", o.pathTransform ? o.pathTransform : "translate(0 0)"), t.appendChild(e), t;
+}, x = (o) => o, C = x, v = C`
+  @keyframes smoke {
+    from {
+      background-color: rgba(89, 197, 198, 0);
+    }
+    to {
+      background-color: rgba(89, 197, 198, 0.5);
+    }
+  }
+
+  .storyblok--outlined .storyblok__outline,
+  .storyblok--outlined [data-blok-c] {
+    outline: 1px dashed rgba(182, 186, 191, 0.5);
+  }
+
+  .storyblok--outlined .storyblok__outline[data-blok-focused='true'],
+  .storyblok--outlined [data-blok-c][data-blok-focused='true'] {
+    outline: 0;
+  }
+
+  .storyblok__hint {
+    box-sizing: border-box;
+    outline: 1px solid #05807f;
+    pointer-events: none;
+    position: absolute;
+    transition: opacity 0.2s ease;
+    z-index: 16777272;
+  }
+
+  .storyblok__highlight {
+    background: rgba(89, 197, 198, 0.2);
+    outline: 1px solid #05807f;
+    pointer-events: none;
+    position: absolute;
+    transition: opacity 0.2s ease;
+    z-index: 16777270;
+  }
+
+  .storyblok__overlay {
+    box-shadow: 0 0 8px 2px rgba(34, 42, 69, 0.07);
+    box-sizing: border-box;
+    outline: 1px solid #05807f;
+    pointer-events: none;
+    position: absolute;
+    z-index: 16777273;
+  }
+
+  .storyblok__overlay-menu {
+    background-color: #05807f;
+    border-radius: 5px;
+    display: inline-flex;
+    font-family:
+      -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, helvetica, arial,
+      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    height: 30px;
+    left: -1px;
+    pointer-events: auto;
+    position: absolute;
+    top: -40px;
+  }
+
+  .storyblok__overlay-menu--simple .storyblok__overlay-menu-btn {
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+
+  .storyblok__overlay-menu-label {
+    color: #fff;
+    font-size: 14px;
+    line-height: 30px;
+    margin-right: 20px;
+    max-width: 200px;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .storyblok__overlay-menu-label:first-child {
+    margin-left: 20px;
+  }
+
+  .storyblok__overlay-menu-btn {
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    display: flex;
+    justify-content: center;
+    outline: none;
+    padding: 0;
+  }
+
+  .storyblok__overlay-menu-btn:hover {
+    background-color: #0d5454;
+  }
+
+  .storyblok__overlay-menu-btn-action {
+    border-bottom-right-radius: 5px;
+    border-left: 1px solid #fff;
+    border-top-right-radius: 5px;
+    height: inherit;
+    margin: auto;
+    margin-right: 0;
+  }
+
+  .storyblok__overlay-menu-btn-parent {
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    cursor: pointer;
+    margin: 0;
+    width: auto;
+  }
+
+  .storyblok__overlay-menu-svg {
+    box-sizing: border-box;
+    cursor: pointer;
+    height: 24px;
+    margin: 0 3px;
+    width: 24px;
+  }
+
+  .storyblok__overlay--bottom .storyblok__overlay-menu {
+    bottom: -40px;
+    top: auto;
+  }
+
+  .storyblok__overlay--clicked {
+    animation-duration: 0.2s;
+    animation-iteration-count: 1;
+    animation-name: smoke;
+  }
+
+  .storyblok__actions-menu,
+  .storyblok__breadcrumbs-menu {
+    background-color: #fff;
+    border: 1px solid #dfe3e8;
+    border-radius: 5px;
+    box-shadow: 0 2px 17px 3px rgba(34, 42, 69, 0.07);
+    box-sizing: content-box;
+    display: none;
+    height: fit-content;
+    min-width: 156px;
+    overflow: hidden;
+    padding: 11px 0;
+    position: absolute;
+    top: 25px;
+    z-index: 2;
+  }
+
+  .storyblok__actions-menu hr,
+  .storyblok__breadcrumbs-menu hr {
+    background-color: #dfe3e8;
+    border: 0;
+    height: 1px;
+    margin: 11px 0 11px 20px;
+  }
+
+  .storyblok__actions-menu__menu-item,
+  .storyblok__breadcrumbs-menu__menu-item {
+    align-items: center;
+    appearance: none;
+    background: #fff;
+    border: 0;
+    color: #1b243f;
+    cursor: pointer;
+    display: flex;
+    font-family:
+      -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, helvetica, arial,
+      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    font-size: 14px;
+    padding: 8px 20px;
+    text-align: left;
+    width: 100%;
+  }
+
+  .storyblok__actions-menu__menu-item--delete,
+  .storyblok__breadcrumbs-menu__menu-item--delete {
+    color: #c11c14;
+    margin-bottom: 0;
+  }
+
+  .storyblok__actions-menu__menu-item--selected,
+  .storyblok__breadcrumbs-menu__menu-item--selected {
+    color: #05807f;
+    cursor: default;
+    margin-bottom: 0;
+  }
+
+  .storyblok__actions-menu__menu-item--selected:hover,
+  .storyblok__breadcrumbs-menu__menu-item--selected:hover {
+    background: transparent;
+  }
+
+  .storyblok__actions-menu__menu-item:hover,
+  .storyblok__breadcrumbs-menu__menu-item:hover {
+    background: #eff1f3;
+  }
+
+  .storyblok__actions-menu__menu-item:focus,
+  .storyblok__breadcrumbs-menu__menu-item:focus {
+    outline: none;
+  }
+
+  .storyblok__actions-menu {
+    left: calc(100% - 20px);
+  }
+
+  .storyblok__breadcrumbs-menu {
+    left: -10px;
+  }
+`, i = { OUTLINE: "storyblok--outlined", STYLESHEET: "storyblok-bridge-stylesheet", HINT: "storyblok__hint", HIGHLIGHTER: "storyblok__highlight", OVERLAY: "storyblok__overlay", COMPONENT_BASE: "storyblok__overlay-menu", ACTIONS_MENU: "storyblok__actions-menu", BREADCRUMBS_MENU: "storyblok__breadcrumbs-menu" };
+class w {
+  constructor(t) {
+    this.appVersion = "v1", this.inEditor = !0, this.initialized = !1, this.currentUid = null, this.storyId = "", this.componentNames = {}, this.outlineOnMoveInterval = null, this.calcInterval = null, this.canAddBlocks = !1, this.canMoveForward = !1, this.canMoveBackward = !1, this.canDeleteBlocks = !1, this.navigationBreadcrumbs = [], this.focusState = !1, this.actionsEnabled = !1, this.hinter = null, this.highlighter = null, this.overlay = null, this.componentBase = null, this.componentLabel = null, this.breadcrumbsButtonMenu = null, this.breadcrumbsMenu = null, this.actionsMenu = null, this.actionsMenuButton = null, this.actionsMenuItems = null, this.events = { input: [], change: [], published: [], unpublished: [], viewLiveVersion: [], enterEditmode: [], enterComponent: [], hoverComponent: [], highlightComponent: [], customEvent: [], pingBack: [], sessionReceived: [], editedBlok: [], deselectBlok: [], addedBlock: [], deletedBlock: [], movedBlock: [], duplicatedBlock: [] };
+    const e = { customParent: null, resolveRelations: null, resolveLinks: null, preventClicks: !1, initOnlyOnce: !0, fallbackLang: null };
+    this.config = { ...e, ...t }, this.init();
+  }
+  get isInIframe() {
+    return window.top !== window.self;
+  }
+  get csProtocol() {
+    let t = location.protocol.replace(":", "");
+    return t !== "http" && t !== "https" && (t = "https"), t;
+  }
+  get targetOrigin() {
+    return this.config.customParent ? this.config.customParent : f("_storyblok_env") === "stage" ? `${this.csProtocol}://app-beta.storyblok.com` : `${this.csProtocol}://app.storyblok.com`;
+  }
+  get lastBreadcrumbItem() {
+    return this.navigationBreadcrumbs[this.navigationBreadcrumbs.length - 1] || {};
+  }
+  isInEditor() {
+    return this.inEditor;
+  }
+  init() {
+    if (document.body === null) {
+      console.error("Body tag not found. Please install the Storyblok bridge script inside the body tag");
+      return;
+    }
+    this.config.initOnlyOnce && document.querySelectorAll(`.${i.HINT}`).length > 0 || this.isInIframe && (this.resetAllEvents(), this.addMessageListener(), this.outlineOnMove(), this.buildBridgeStyles(), this.on("enterEditmode", this.enterEditmode), this.isInIframe && this.sendDataToEditor({ action: "initialized", config: this.config }), this.initialized = !0);
+  }
+  keyPress(t, e) {
+    (e.key === "z" && e.metaKey || e.key === "z" && e.ctrlKey) && (e.preventDefault(), e.stopImmediatePropagation(), t.sendDataToEditor({ action: "undo" })), (e.key === "y" && e.metaKey || e.key === "y" && e.ctrlKey) && (e.preventDefault(), e.stopImmediatePropagation(), t.sendDataToEditor({ action: "redo" }));
+  }
+  sendDataToEditor(t) {
+    window.parent.postMessage(t, this.targetOrigin);
+  }
+  buildBridgeStyles() {
+    document.getElementById(i.STYLESHEET) ? (this.hinter = document.querySelector(`.${i.HINT}`), this.highlighter = document.querySelector(`.${i.HIGHLIGHTER}`), this.overlay = document.querySelector(`.${i.OVERLAY}`), this.componentBase = document.querySelector(`.${i.COMPONENT_BASE}`), this.breadcrumbsButtonMenu = document.querySelector(`.${i.COMPONENT_BASE}-btn-parent`), this.breadcrumbsMenu = document.querySelector(`.${i.BREADCRUMBS_MENU}`), this.actionsMenuButton = document.querySelector(`.${i.COMPONENT_BASE}-btn-action`), this.actionsMenu = document.querySelector(`.${i.ACTIONS_MENU}`), this.componentLabel = document.querySelector(`.${i.COMPONENT_BASE} > .${i.COMPONENT_BASE}-label`), this.createActionsMenuItems()) : (this.createBridgeStylesheet(), this.createHinter(), this.createHighlighter(), this.createOverlay(), this.createComponentContext());
+  }
+  createBridgeStylesheet() {
+    const t = document.createElement("style");
+    t.setAttribute("type", "text/css"), t.id = i.STYLESHEET, "textContent" in t ? t.textContent = v : t.styleSheet.cssText = v, document.getElementsByTagName("head")[0].appendChild(t);
+  }
+  createHinter() {
+    this.hinter = document.createElement("div"), this.hinter.className = i.HINT, this.hideElement(this.hinter), document.body.appendChild(this.hinter);
+  }
+  createHighlighter() {
+    this.highlighter = document.createElement("div"), this.highlighter.style.opacity = 0, this.hideElement(this.highlighter), document.body.appendChild(this.highlighter);
+  }
+  createOverlay() {
+    this.overlay = document.createElement("div"), this.overlay.setAttribute("class", i.OVERLAY), this.overlay.setAttribute("id", i.OVERLAY), this.hideElement(this.overlay), document.body.appendChild(this.overlay);
+  }
+  calculateElementPosition(t, e) {
+    if (!e) {
+      this.hideElement(t);
+      return;
+    }
+    const n = l(e);
+    if (n) {
+      const { left: s, top: r } = this.getElementOffset(n);
+      r <= 30 ? this.overlay.classList.add(`${i.OVERLAY}--bottom`) : this.overlay.classList.remove(`${i.OVERLAY}--bottom`), t.style.top = `${r}px`, t.style.left = `${s}px`, t.style.width = `${n.offsetWidth}px`, t.style.height = `${n.offsetHeight}px`, t.style.minHeight = "5px";
+    } else this.hideElement(t);
+  }
+  getElementOffset(t) {
+    const e = t.getBoundingClientRect(), n = window.pageXOffset || document.documentElement.scrollLeft, s = window.pageYOffset || document.documentElement.scrollTop;
+    return { top: e.top + s, left: e.left + n };
+  }
+  resetAllEvents() {
+    for (const t in this.events) this.events[t] = [];
+  }
+  addMessageListener() {
+    window.addEventListener && addEventListener("message", this.receiveMessageFromApp.bind(this), !1);
+  }
+  receiveMessageFromApp(t) {
+    t && t.data && t.data.action && this.emit(t.data.action, t.data);
+  }
+  emit(t, ...e) {
+    const n = this.events[t];
+    if (!(!t || !n || !n.length)) for (let s = 0; s < n.length; s++) n[s].apply(this, e);
+  }
+  outlineOnMoveHandler() {
+    document.body.classList.add(i.OUTLINE);
+    const t = () => {
+      document.body.classList.remove(i.OUTLINE), this.hinter && (this.hinter.style.opacity = 0);
+    };
+    this.outlineOnMoveInterval && clearTimeout(this.outlineOnMoveInterval), this.outlineOnMoveInterval = setTimeout(t, 800);
+  }
+  outlineOnMove() {
+    document.addEventListener("mousemove", this.outlineOnMoveHandler.bind(this), !1);
+  }
+  on(t, e) {
+    if (t.constructor === Array) {
+      for (const n of t) this.subscribeEvent(n, e);
+      return;
+    }
+    this.subscribeEvent(t, e);
+  }
+  subscribeEvent(t, e) {
+    t === "input" && (this.actionsEnabled = !0), this.events[t].indexOf(e) === -1 && this.events[t].push(e);
+  }
+  pingEditor(t) {
+    this.isInIframe ? this.sendDataToEditor({ action: "ping" }) : (this.inEditor = !1, t(this)), this.on("pingBack", this.handlePingBack(t));
+  }
+  handlePingBack(t) {
+    return () => {
+      this.inEditor = !0, t(this);
+    };
+  }
+  handleEditedBlok(t) {
+    this.navigationBreadcrumbs = t.breadcrumbs, this.canAddBlocks = t.canAddBlocks || !1, this.canMoveForward = t.canMoveForward || !1, this.canMoveBackward = t.canMoveBackward || !1, this.canDeleteBlocks = t.canDeleteBlocks || !1, this.updateComponentBase(t.blok);
+  }
+  handleAddMoveBlok(t) {
+    const e = l(`${this.storyId}-${t.blockId}`);
+    e && this.handleOpenBlok(e);
+  }
+  handleDeselectBlock() {
+    document.querySelectorAll("[data-blok-focused]").forEach((t) => t.removeAttribute("data-blok-focused")), this.hideElement(this.overlay);
+  }
+  handleDuplicatedBlok(t) {
+    this.handleDeselectBlock(), setTimeout(() => {
+      const e = l(`${this.storyId}-${t.blockId}`);
+      this.handleOpenBlok(e);
+    }, 500);
+  }
+  handleWindowClick(t) {
+    this.config.preventClicks && (t.preventDefault(), t.stopPropagation()), this.handleOpenBlok(t.target, t);
+  }
+  handleOpenBlok(t, e) {
+    const n = y(t);
+    if (n) {
+      e && n.uid !== this.currentUid && (e.preventDefault(), e.stopPropagation()), this.currentUid = n.uid, this.storyId = n.id, this.openBlok(n);
+      return;
+    }
+    e && this.toggleFocusElement(t, !0);
+  }
+  enterEditmode(t) {
+    const e = N(document.body);
+    t && t.appVersion && (this.appVersion = t.appVersion), t && t.componentNames && (this.componentNames = t.componentNames);
+    for (let n = 0; n < e.length; n++) {
+      const s = e[n].el, r = e[n].options;
+      !s || s.nodeType !== Node.ELEMENT_NODE || (r.name = this.componentNames[r.name] || r.name, s.setAttribute("data-blok-c", JSON.stringify(r)), s.setAttribute("data-blok-uid", `${r.id}-${r.uid}`), s.offsetHeight < 5 && (s.style["min-height"] = "5px"), s.classList.add("storyblok__outline"));
+    }
+    if (this.on("addedBlock", this.handleAddMoveBlok), this.on("duplicatedBlock", this.handleDuplicatedBlok), this.on("movedBlock", this.handleAddMoveBlok), this.on("enterComponent", this.enterComponent), this.on("highlightComponent", this.highlightComponent), this.on("hoverComponent", this.hoverComponent), this.on("editedBlok", this.handleEditedBlok), this.on("deselectBlok", this.handleDeselectBlock), t && t.blockId && this.config.setActiveBlock) {
+      const n = l(`${t.storyId}-${t.blockId}`);
+      this.handleOpenBlok(n);
+    }
+    window.addEventListener("click", this.handleWindowClick.bind(this)), this.calcInterval !== null && window.clearInterval(this.calcInterval), this.calcInterval = window.setInterval(() => {
+      this.calculateElementPosition(this.overlay, `${this.storyId}-${this.currentUid}`);
+    }, 300);
+  }
+  highlightComponent(t) {
+    this.highlighter.innerHTML = "", t.componentIds.length > 0 ? (this.highlighter.style.display = "block", this.highlighter.style.opacity = 1) : (this.highlighter.style.display = "none", this.highlighter.style.opacity = 0);
+    for (let e = 0; e < t.componentIds.length; e++) {
+      const n = `${t.storyId}-${t.componentIds[e]}`, s = l(n);
+      if (s) {
+        const r = document.createElement("div");
+        r.setAttribute("class", i.HIGHLIGHTER), this.highlighter.appendChild(r), this.calculateElementPosition(r, n), t.componentId === t.componentIds[e] && !g(s) && typeof s.scrollIntoView < "u" && s.scrollIntoView();
+      }
+    }
+  }
+  hoverComponent(t) {
+    this.calculateElementPosition(this.hinter, `${t.storyId}-${t.componentId}`), this.hinter.style.opacity = 1, this.hinter.style.display = "block";
+  }
+  toggleFocusElement(t, e = !1) {
+    if (!A(this.overlay, t)) {
+      if (this.handleDeselectBlock(), !e && this.storyId === f("_storyblok")) {
+        t.setAttribute("data-blok-focused", !0), this.showFocusedElement(this.overlay), this.focusState = !1;
+        return;
+      }
+      this.focusState || this.sendDataToEditor({ action: "noFocus" });
+    }
+  }
+  showFocusedElement(t) {
+    if (!this.currentUid) {
+      this.hideElement(t);
+      return;
+    }
+    this.showElement(t), this.calculateElementPosition(t, `${this.storyId}-${this.currentUid}`);
+  }
+  handleBlokActions(t) {
+    this.sendDataToEditor({ action: t, blok: this.lastBreadcrumbItem }), t === "addBlockBefore" || t === "addBlockAfter" || t === "copy" ? this.hideElement(this.actionsMenu) : this.hideElement(this.overlay), (t === "moveForward" || t === "moveBackward") && (this.focusState = !0);
+  }
+  hideElement(t) {
+    t.style.display = "none";
+  }
+  showElement(t) {
+    t.style.display = "block";
+  }
+  toggleElement(t) {
+    if (t.style.display === "block") {
+      this.hideElement(t);
+      return;
+    }
+    this.showElement(t);
+  }
+  enterComponent(t) {
+    const e = l(`${t.storyId}-${t.componentId}`), n = y(e);
+    n && (this.hinter.style.opacity = 0, this.hinter.style.display = "none", this.currentUid = n.uid, this.storyId = n.id, this.scrollIntoView(e), this.handleEditedBlok(t));
+  }
+  scrollIntoView(t) {
+    t && !g(t) && typeof t.scrollIntoView < "u" && setTimeout(() => {
+      t.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 100);
+  }
+  openBlok(t) {
+    this.sendDataToEditor({ action: "edit", dataC: t, config: this.config });
+  }
+  createComponentContext() {
+    this.createComponentBase(), this.createActionsMenu(), this.createActionsMenuItems(), this.createBreadcrumbsMenu(), this.createActionsMenuButton(), this.createBreadcrumbsMenuButton(), this.createComponentLabel(), this.createComponentButtonLabel();
+  }
+  createComponentBase() {
+    this.componentBase = document.createElement("div"), this.componentBase.setAttribute("class", i.COMPONENT_BASE), this.componentBase.setAttribute("id", i.COMPONENT_BASE), this.overlay.append(this.componentBase);
+  }
+  createComponentLabel() {
+    this.componentLabel = document.createElement("span"), this.componentLabel.setAttribute("class", `${i.COMPONENT_BASE}-label`), this.componentBase.prepend(this.componentLabel);
+  }
+  createComponentButtonLabel() {
+    const t = document.createElement("span");
+    t.setAttribute("class", `${i.COMPONENT_BASE}-label`), this.breadcrumbsButtonMenu.appendChild(t);
+  }
+  updateComponentLabel(t) {
+    document.querySelectorAll(`.${i.COMPONENT_BASE}-label`).forEach((e) => e.innerText = this.componentNames[t.name] || E(t));
+  }
+  updateComponentBase(t) {
+    this.hideElement(this.actionsMenu), this.hideElement(this.breadcrumbsMenu), this.overlay.classList.add(`${i.OVERLAY}--clicked`), setTimeout(() => {
+      this.overlay.classList.remove(`${i.OVERLAY}--clicked`);
+    }, 400), this.navigationBreadcrumbs.length > 1 ? (this.updateBreadcrumbsMenu(this.navigationBreadcrumbs), this.actionsEnabled ? this.updateActionsMenu() : (this.componentBase.setAttribute("class", `${i.COMPONENT_BASE} ${i.COMPONENT_BASE}--simple`), this.hideElement(this.actionsMenuButton)), this.hideElement(this.componentLabel)) : (this.hideElement(this.breadcrumbsButtonMenu), this.hideElement(this.actionsMenuButton), this.showElement(this.componentLabel)), this.updateComponentLabel(t);
+    const e = l(`${this.storyId}-${t.uid}`);
+    e && this.toggleFocusElement(e);
+  }
+  createBreadcrumbsMenuButton() {
+    this.breadcrumbsButtonMenu = document.createElement("button"), this.breadcrumbsButtonMenu.setAttribute("class", `${i.COMPONENT_BASE}-btn ${i.COMPONENT_BASE}-btn-parent`), this.breadcrumbsButtonMenu.prepend(k({ viewBox: "0 0 24 24", svgClass: `${i.COMPONENT_BASE}-svg`, path: "M13.73 14.284l-2.197-2.216 2.197-2.217a1.051 1.051 0 000-1.477 1.03 1.03 0 00-1.465 0l-2.93 2.955a1.043 1.043 0 00-.287.554l-.014.123v.123c.014.247.115.489.301.677l2.93 2.956a1.03 1.03 0 001.465 0 1.051 1.051 0 000-1.478z", pathFill: "#ffffff" })), this.breadcrumbsButtonMenu.addEventListener("click", () => {
+      this.toggleElement(this.breadcrumbsMenu), this.hideElement(this.actionsMenu);
+    }), this.componentBase.prepend(this.breadcrumbsButtonMenu);
+  }
+  createBreadcrumbsMenu() {
+    this.breadcrumbsMenu = document.createElement("div"), this.breadcrumbsMenu.setAttribute("class", i.BREADCRUMBS_MENU), this.breadcrumbsMenu.setAttribute("id", i.BREADCRUMBS_MENU), this.componentBase.append(this.breadcrumbsMenu);
+  }
+  updateBreadcrumbsMenu(t) {
+    this.breadcrumbsMenu.innerHTML = "";
+    const e = [];
+    for (let n = 0; n < t.length; n++) {
+      e[n] = document.createElement("button"), e[n].innerHTML = E({ display_name: this.componentNames[t[n].component], name: t[n].component });
+      const s = t[n];
+      e[n].addEventListener("click", (r) => {
+        r.stopPropagation(), this.currentUid = s._uid, this.openBlok({ id: this.storyId, uid: s._uid, name: s.component });
+      }), e[n].classList.add(`${i.BREADCRUMBS_MENU}__menu-item`), t[n]._uid === this.currentUid && (e[n].classList.add(`${i.BREADCRUMBS_MENU}__menu-item--selected`), e[n].setAttribute("disabled", !0)), this.breadcrumbsMenu.appendChild(e[n]), this.breadcrumbsButtonMenu.style.display = "flex";
+    }
+  }
+  createActionsMenuButton() {
+    this.actionsMenuButton = document.createElement("button"), this.actionsMenuButton.setAttribute("class", `${i.COMPONENT_BASE}-btn ${i.COMPONENT_BASE}-btn-action`), this.actionsMenuButton.prepend(k({ viewBox: "0 0 24 24", svgClass: `${i.COMPONENT_BASE}-svg`, path: "M7.5 11a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm10 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-5 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z", pathFill: "#ffffff" })), this.actionsMenuButton.addEventListener("click", () => {
+      this.toggleElement(this.actionsMenu), this.breadcrumbsMenu && this.hideElement(this.breadcrumbsMenu);
+    }), this.componentBase.append(this.actionsMenuButton);
+  }
+  createActionsMenuItems() {
+    this.actionsMenuItems = [{ eventFunction: () => this.handleBlokActions.bind(this, "addBlockBefore"), innerHTML: "Add Block Before", order: 0, show: () => this.canAddBlocks }, { eventFunction: () => this.handleBlokActions.bind(this, "addBlockAfter"), innerHTML: "Add Block After", order: 1, show: () => this.canAddBlocks }, { eventFunction: () => this.handleBlokActions.bind(this, "duplicateBlock"), innerHTML: "Duplicate", order: 2, show: () => this.canAddBlocks }, { eventFunction: () => this.handleBlokActions.bind(this, "copy"), innerHTML: "Copy", order: 3, show: () => this.appVersion === "v2" }, { separator: !0, order: 4, show: () => this.canAddBlocks && this.canMoveForward || !!(this.canMoveBackward && this.lastBreadcrumbItem._parentindex) }, { eventFunction: () => this.handleBlokActions.bind(this, "moveForward"), innerHTML: "Move Forward", order: 5, show: () => this.canMoveForward }, { eventFunction: () => this.handleBlokActions.bind(this, "moveBackward"), innerHTML: "Move Backward", order: 6, show: () => this.canMoveBackward && this.lastBreadcrumbItem._parentindex }, { separator: !0, order: 7, show: () => this.canAddBlocks && this.canDeleteBlocks }, { eventFunction: () => this.handleBlokActions.bind(this, "deleteBlock"), className: `${i.ACTIONS_MENU}__menu-item--delete`, innerHTML: "Delete", order: 8, show: () => this.canDeleteBlocks }];
+  }
+  createActionsMenu() {
+    this.actionsMenu = document.createElement("div"), this.actionsMenu.setAttribute("class", i.ACTIONS_MENU), this.actionsMenu.setAttribute("id", i.ACTIONS_MENU), this.componentBase.append(this.actionsMenu);
+  }
+  updateActionsMenu() {
+    this.actionsMenu.innerHTML = "";
+    const t = `${i.ACTIONS_MENU}__menu-item`, e = "button", n = "click";
+    this.actionsMenuItems.sort((s, r) => s.order > r.order ? 1 : r.order > s.order ? -1 : 0).forEach((s) => {
+      if (s.separator && s.show()) {
+        this.actionsMenu.appendChild(document.createElement("hr"));
+        return;
+      }
+      const r = document.createElement(s.element ? s.element : e);
+      r.classList.add(t), s.className && r.classList.add(s.className), r.innerHTML = s.innerHTML, s.eventFunction && r.addEventListener(s.event ? s.event : n, s.eventFunction()), s.show() && this.actionsMenu.appendChild(r);
+    }), this.actionsMenuButton.style.display = "flex";
+  }
+}
+var S = Object.defineProperty, T = (o, t, e) => t in o ? S(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, m = (o, t, e) => T(o, typeof t != "symbol" ? t + "" : t, e);
+let j = class {
+  constructor(t) {
+    m(this, "isInEditor"), m(this, "enterEditmode"), m(this, "pingEditor"), m(this, "on");
+    const e = new w(t);
+    this.isInEditor = () => e.isInEditor(), this.enterEditmode = (n) => {
+      e.enterEditmode(n);
+    }, this.pingEditor = (n) => {
+      e.pingEditor(n);
+    }, this.on = (n, s) => {
+      e.on(n, s);
+    };
+  }
+};
+const h = (o) => ({ tag: "success", value: o }), c = (o) => ({ tag: "failure", error: o, path: [] }), B = (o, t) => ({ tag: "failure", error: o.error, path: [t, ...o.path] }), $ = (o) => typeof o > "u", L = (o) => typeof o == "string", P = (o) => typeof o == "object" && o !== null, b = Symbol("propertyAbsent"), _ = Symbol("omitProperty"), H = "Not an object", U = (o) => B(c("Property is missing"), { tag: "object", key: o }), D = (o) => {
+  const t = Object.entries(o);
+  return (e) => {
+    if (!P(e)) return c(H);
+    const n = {};
+    for (let s = 0; s < t.length; s++) {
+      const [r, u] = t[s], d = e[r];
+      if (d === void 0 && !e.hasOwnProperty(r)) {
+        const a = u(b);
+        if (a.tag === "failure" || a.value === b) return U(r);
+        a.value !== _ && (n[r] = a.value);
+      } else {
+        const a = u(d);
+        if (a.tag === "failure") return B(a, { tag: "object", key: r });
+        n[r] = a.value;
+      }
+    }
+    return h(n);
+  };
+}, F = (o) => $(o) ? h(o) : c("Not undefined"), p = (o) => L(o) ? h(o) : c("Not a string"), R = (...o) => (t) => {
+  for (const e of o) {
+    const n = e(t);
+    if (n.tag === "success") return h(n.value);
+  }
+  return c("No parser in the union matched");
+}, V = (o) => R(z, F, o), z = (o) => o === b ? h(_) : c("not optional");
+D({ name: p, space: V(p), uid: p, id: p });
+export {
+  j as default
+};

package/dist/index.d.ts

@@ -6,11 +6,12 @@ export interface StoryblokBridgeEvent {
 }
 export declare const useStoryblokBridge: <T extends StoryblokComponentType<string> = any>(id: number, cb: (newStory: ISbStoryData<T>) => void, options?: StoryblokBridgeConfigV2) => void;
 export declare const storyblokInit: (pluginOptions?: SbSDKOptions) => SbInitResult;
-export declare const loadStoryblokBridge: () => Promise<unknown>;
+export declare const loadStoryblokBridge: () => Promise<void>;
 export { useStoryblokBridge as registerStoryblokBridge };
 export { default as apiPlugin } from './api';
 export { default as storyblokEditable } from './editable';
 export * from './types';
+export type { BridgeParams } from '@storyblok/preview-bridge';
 export { buildStoryblokImage, renderRichText, splitTableRows } from '@storyblok/richtext';
 export type { SbRichTextDoc, SbRichTextImageOptions, SbRichTextMark, SbRichTextNode, SbRichTextProps, SbRichTextRenderContext, SbRichTextRendererMap, } from '@storyblok/richtext';
 export { default as StoryblokClient } from 'storyblok-js-client';

package/dist/storyblok-js.js

@@ -4,4 +4,213 @@
  * description: SDK to integrate Storyblok into your project using JavaScript.
  * author: undefined
  */
-(function(e,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("storyblok-js-client"),require("@storyblok/richtext")):typeof define=="function"&&define.amd?define(["exports","storyblok-js-client","@storyblok/richtext"],l):(e=typeof globalThis<"u"?globalThis:e||self,l(e.storyblok={},e.StoryblokClient,e.StoryblokRichtext))})(this,(function(e,l,u){"use strict";let f=!1;const k=[],p=t=>new Promise((o,s)=>{if(typeof window>"u"){s(new Error("Cannot load Storyblok bridge: window is undefined (server-side environment)"));return}if(window.storyblokRegisterEvent=r=>{if(!window.location.search.includes("_storyblok")){console.warn("You are not in Draft Mode or in the Visual Editor.");return}f?r():k.push(r)},document.getElementById("storyblok-javascript-bridge")){o(void 0);return}const i=document.createElement("script");i.async=!0,i.src=t,i.id="storyblok-javascript-bridge",i.onerror=r=>s(r),i.onload=r=>{k.forEach(d=>d()),f=!0,o(r)},document.getElementsByTagName("head")[0].appendChild(i)}),h=(t={})=>{const{apiOptions:o}=t;if(!o||!o.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new l(o)}},S=t=>{if(typeof t!="object"||typeof t._editable!="string")return{};try{const o=JSON.parse(t._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return o?{"data-blok-c":JSON.stringify(o),"data-blok-uid":`${o.id}-${o.uid}`}:{}}catch{return{}}};let b="https://app.storyblok.com/f/storyblok-v2-latest.js";const w=(t,o,s={})=>{var c;const r=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",d=new URL((c=window.location)==null?void 0:c.href).searchParams.get("_storyblok"),y=d!==null&&+d===t;if(!(!r||!y)){if(!t){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(s).on(["input","published","change"],n=>{var a;n&&(n.action==="input"&&((a=n.story)==null?void 0:a.id)===t?o(n.story):(n.action==="change"||n.action==="published")&&n.storyId===t&&window.location.reload())})})}},m=(t={})=>{var a,g;const{bridge:o,accessToken:s,use:i=[],apiOptions:r={},bridgeUrl:d}=t;r.accessToken=r.accessToken||s;const y={bridge:o,apiOptions:r};let c={};i.forEach(T=>{c={...c,...T(y)}}),d&&(b=d);const n=!(typeof window>"u")&&((g=(a=window.location)==null?void 0:a.search)==null?void 0:g.includes("_storyblok_tk"));return o!==!1&&n&&p(b),c},B=()=>p(b);e.StoryblokClient=l,Object.defineProperty(e,"buildStoryblokImage",{enumerable:!0,get:()=>u.buildStoryblokImage}),Object.defineProperty(e,"renderRichText",{enumerable:!0,get:()=>u.renderRichText}),Object.defineProperty(e,"splitTableRows",{enumerable:!0,get:()=>u.splitTableRows}),e.apiPlugin=h,e.loadStoryblokBridge=B,e.registerStoryblokBridge=w,e.storyblokEditable=S,e.storyblokInit=m,e.useStoryblokBridge=w,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+(function(a,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("storyblok-js-client"),require("@storyblok/richtext")):typeof define=="function"&&define.amd?define(["exports","storyblok-js-client","@storyblok/richtext"],m):(a=typeof globalThis<"u"?globalThis:a||self,m(a.storyblok={},a.StoryblokClient,a.StoryblokRichtext))})(this,(function(a,m,E){"use strict";let v=!1,p;const _=[],M=()=>typeof window>"u"?Promise.reject(new Error("Cannot load Storyblok bridge: window is undefined (server-side environment)")):(window.storyblokRegisterEvent=o=>{if(!window.location.search.includes("_storyblok")){console.warn("You are not in Draft Mode or in the Visual Editor.");return}v?o():_.push(o)},v?Promise.resolve():p||(p=Promise.resolve().then(()=>ae).then(({default:o})=>{window.StoryblokBridge=o,_.forEach(e=>e()),v=!0}).catch(o=>{throw p=void 0,o}),p)),L=(o={})=>{const{apiOptions:e}=o;if(!e||!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new m(e)}},P=o=>{if(typeof o!="object"||typeof o._editable!="string")return{};try{const e=JSON.parse(o._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return e?{"data-blok-c":JSON.stringify(e),"data-blok-uid":`${e.id}-${e.uid}`}:{}}catch{return{}}};function R(o){const{language:e,resolveRelations:t,...n}=o;return e&&console.warn("[Storyblok] The `language` bridge option is no longer supported by the bundled bridge. Language context is now passed automatically by the Visual Editor via the `_storyblok_lang` URL parameter."),{...n,...t!==void 0&&{resolveRelations:Array.isArray(t)?t:[t]}}}const w=(o,e,t={})=>{var l;const i=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",r=new URL((l=window.location)==null?void 0:l.href).searchParams.get("_storyblok"),h=r!==null&&+r===o;if(!(!i||!h)){if(!o){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(R(t)).on(["input","published","change"],d=>{var g;d&&(d.action==="input"&&((g=d.story)==null?void 0:g.id)===o?e(d.story):(d.action==="change"||d.action==="published")&&d.storyId===o&&window.location.reload())})})}},U=(o={})=>{var g,$;const{bridge:e,accessToken:t,use:n=[],apiOptions:i={},bridgeUrl:r}=o;r&&console.warn("[Storyblok] The `bridgeUrl` option is deprecated and will be removed in a future major version. The Storyblok bridge is now bundled and is no longer loaded from a CDN URL."),i.accessToken=i.accessToken||t;const h={bridge:e,apiOptions:i};let l={};n.forEach(le=>{l={...l,...le(h)}});const d=!(typeof window>"u")&&(($=(g=window.location)==null?void 0:g.search)==null?void 0:$.includes("_storyblok_tk"));return e!==!1&&d&&M(),l},H=()=>M(),D=(o,e)=>{for(;o&&o.nodeType===1;){if(o.hasAttribute(e))return o;o=o.parentNode}return null},A=o=>{const e=D(o,"data-blok-c");if(!e)return null;const t=e.getAttribute("data-blok-c");return JSON.parse(t)},F=(o,e)=>o.contains(e),u=o=>document.querySelector(`[data-blok-uid="${o}"]`),S=o=>{const e=o.getBoundingClientRect();return e.top<0&&e.top+e.height>=0||e.top>=0&&e.top<=(window.innerHeight||document.documentElement.clientHeight)},j=o=>{let e={};try{const t=o.replace(/\\/g,"");e=JSON.parse(t)}catch{console.error("Error parsing json",o)}return e},V=o=>{const e=[],t=()=>NodeFilter.FILTER_ACCEPT,n=document.createNodeIterator(o,NodeFilter.SHOW_COMMENT,t,!1);let i={};for(;i=n.nextNode();)if(i.nodeValue.indexOf("#storyblok#")>-1){const r=i.nodeValue.replace("#storyblok#",""),h=i.nextElementSibling||i.nextSibling,l=j(r);l&&e.push({options:l,el:h})}return e},I=o=>{let e="";return location.search.substr(1).split("&").forEach(t=>{const n=t.split("=");n[0]===o&&(e=decodeURIComponent(n[1]))}),e},z=(o,e,t)=>typeof o!="string"?"":o.toString().replace(/([A-Z])/g," $1").trim().toLowerCase().replace(/[_-]/g," ").replace(/(?:^|\s)\S/g,function(n,i){return n.toUpperCase()}),O=o=>o&&o.display_name?o.display_name:z(o.name),N=o=>{const e=document.createElementNS("http://www.w3.org/2000/svg","svg");e.setAttribute("viewBox",o.viewBox),e.setAttribute("class",o.svgClass);const t=document.createElementNS(e.namespaceURI,"path");return t.setAttribute("d",o.path),t.setAttribute("fill",o.pathFill),t.setAttribute("transform",o.pathTransform?o.pathTransform:"translate(0 0)"),e.appendChild(t),e},q=o=>o,Y=q,T=Y`
+  @keyframes smoke {
+    from {
+      background-color: rgba(89, 197, 198, 0);
+    }
+    to {
+      background-color: rgba(89, 197, 198, 0.5);
+    }
+  }
+
+  .storyblok--outlined .storyblok__outline,
+  .storyblok--outlined [data-blok-c] {
+    outline: 1px dashed rgba(182, 186, 191, 0.5);
+  }
+
+  .storyblok--outlined .storyblok__outline[data-blok-focused='true'],
+  .storyblok--outlined [data-blok-c][data-blok-focused='true'] {
+    outline: 0;
+  }
+
+  .storyblok__hint {
+    box-sizing: border-box;
+    outline: 1px solid #05807f;
+    pointer-events: none;
+    position: absolute;
+    transition: opacity 0.2s ease;
+    z-index: 16777272;
+  }
+
+  .storyblok__highlight {
+    background: rgba(89, 197, 198, 0.2);
+    outline: 1px solid #05807f;
+    pointer-events: none;
+    position: absolute;
+    transition: opacity 0.2s ease;
+    z-index: 16777270;
+  }
+
+  .storyblok__overlay {
+    box-shadow: 0 0 8px 2px rgba(34, 42, 69, 0.07);
+    box-sizing: border-box;
+    outline: 1px solid #05807f;
+    pointer-events: none;
+    position: absolute;
+    z-index: 16777273;
+  }
+
+  .storyblok__overlay-menu {
+    background-color: #05807f;
+    border-radius: 5px;
+    display: inline-flex;
+    font-family:
+      -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, helvetica, arial,
+      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    height: 30px;
+    left: -1px;
+    pointer-events: auto;
+    position: absolute;
+    top: -40px;
+  }
+
+  .storyblok__overlay-menu--simple .storyblok__overlay-menu-btn {
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+
+  .storyblok__overlay-menu-label {
+    color: #fff;
+    font-size: 14px;
+    line-height: 30px;
+    margin-right: 20px;
+    max-width: 200px;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .storyblok__overlay-menu-label:first-child {
+    margin-left: 20px;
+  }
+
+  .storyblok__overlay-menu-btn {
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    display: flex;
+    justify-content: center;
+    outline: none;
+    padding: 0;
+  }
+
+  .storyblok__overlay-menu-btn:hover {
+    background-color: #0d5454;
+  }
+
+  .storyblok__overlay-menu-btn-action {
+    border-bottom-right-radius: 5px;
+    border-left: 1px solid #fff;
+    border-top-right-radius: 5px;
+    height: inherit;
+    margin: auto;
+    margin-right: 0;
+  }
+
+  .storyblok__overlay-menu-btn-parent {
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    cursor: pointer;
+    margin: 0;
+    width: auto;
+  }
+
+  .storyblok__overlay-menu-svg {
+    box-sizing: border-box;
+    cursor: pointer;
+    height: 24px;
+    margin: 0 3px;
+    width: 24px;
+  }
+
+  .storyblok__overlay--bottom .storyblok__overlay-menu {
+    bottom: -40px;
+    top: auto;
+  }
+
+  .storyblok__overlay--clicked {
+    animation-duration: 0.2s;
+    animation-iteration-count: 1;
+    animation-name: smoke;
+  }
+
+  .storyblok__actions-menu,
+  .storyblok__breadcrumbs-menu {
+    background-color: #fff;
+    border: 1px solid #dfe3e8;
+    border-radius: 5px;
+    box-shadow: 0 2px 17px 3px rgba(34, 42, 69, 0.07);
+    box-sizing: content-box;
+    display: none;
+    height: fit-content;
+    min-width: 156px;
+    overflow: hidden;
+    padding: 11px 0;
+    position: absolute;
+    top: 25px;
+    z-index: 2;
+  }
+
+  .storyblok__actions-menu hr,
+  .storyblok__breadcrumbs-menu hr {
+    background-color: #dfe3e8;
+    border: 0;
+    height: 1px;
+    margin: 11px 0 11px 20px;
+  }
+
+  .storyblok__actions-menu__menu-item,
+  .storyblok__breadcrumbs-menu__menu-item {
+    align-items: center;
+    appearance: none;
+    background: #fff;
+    border: 0;
+    color: #1b243f;
+    cursor: pointer;
+    display: flex;
+    font-family:
+      -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, helvetica, arial,
+      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    font-size: 14px;
+    padding: 8px 20px;
+    text-align: left;
+    width: 100%;
+  }
+
+  .storyblok__actions-menu__menu-item--delete,
+  .storyblok__breadcrumbs-menu__menu-item--delete {
+    color: #c11c14;
+    margin-bottom: 0;
+  }
+
+  .storyblok__actions-menu__menu-item--selected,
+  .storyblok__breadcrumbs-menu__menu-item--selected {
+    color: #05807f;
+    cursor: default;
+    margin-bottom: 0;
+  }
+
+  .storyblok__actions-menu__menu-item--selected:hover,
+  .storyblok__breadcrumbs-menu__menu-item--selected:hover {
+    background: transparent;
+  }
+
+  .storyblok__actions-menu__menu-item:hover,
+  .storyblok__breadcrumbs-menu__menu-item:hover {
+    background: #eff1f3;
+  }
+
+  .storyblok__actions-menu__menu-item:focus,
+  .storyblok__breadcrumbs-menu__menu-item:focus {
+    outline: none;
+  }
+
+  .storyblok__actions-menu {
+    left: calc(100% - 20px);
+  }
+
+  .storyblok__breadcrumbs-menu {
+    left: -10px;
+  }
+`,s={OUTLINE:"storyblok--outlined",STYLESHEET:"storyblok-bridge-stylesheet",HINT:"storyblok__hint",HIGHLIGHTER:"storyblok__highlight",OVERLAY:"storyblok__overlay",COMPONENT_BASE:"storyblok__overlay-menu",ACTIONS_MENU:"storyblok__actions-menu",BREADCRUMBS_MENU:"storyblok__breadcrumbs-menu"};class G{constructor(e){this.appVersion="v1",this.inEditor=!0,this.initialized=!1,this.currentUid=null,this.storyId="",this.componentNames={},this.outlineOnMoveInterval=null,this.calcInterval=null,this.canAddBlocks=!1,this.canMoveForward=!1,this.canMoveBackward=!1,this.canDeleteBlocks=!1,this.navigationBreadcrumbs=[],this.focusState=!1,this.actionsEnabled=!1,this.hinter=null,this.highlighter=null,this.overlay=null,this.componentBase=null,this.componentLabel=null,this.breadcrumbsButtonMenu=null,this.breadcrumbsMenu=null,this.actionsMenu=null,this.actionsMenuButton=null,this.actionsMenuItems=null,this.events={input:[],change:[],published:[],unpublished:[],viewLiveVersion:[],enterEditmode:[],enterComponent:[],hoverComponent:[],highlightComponent:[],customEvent:[],pingBack:[],sessionReceived:[],editedBlok:[],deselectBlok:[],addedBlock:[],deletedBlock:[],movedBlock:[],duplicatedBlock:[]};const t={customParent:null,resolveRelations:null,resolveLinks:null,preventClicks:!1,initOnlyOnce:!0,fallbackLang:null};this.config={...t,...e},this.init()}get isInIframe(){return window.top!==window.self}get csProtocol(){let e=location.protocol.replace(":","");return e!=="http"&&e!=="https"&&(e="https"),e}get targetOrigin(){return this.config.customParent?this.config.customParent:I("_storyblok_env")==="stage"?`${this.csProtocol}://app-beta.storyblok.com`:`${this.csProtocol}://app.storyblok.com`}get lastBreadcrumbItem(){return this.navigationBreadcrumbs[this.navigationBreadcrumbs.length-1]||{}}isInEditor(){return this.inEditor}init(){if(document.body===null){console.error("Body tag not found. Please install the Storyblok bridge script inside the body tag");return}this.config.initOnlyOnce&&document.querySelectorAll(`.${s.HINT}`).length>0||this.isInIframe&&(this.resetAllEvents(),this.addMessageListener(),this.outlineOnMove(),this.buildBridgeStyles(),this.on("enterEditmode",this.enterEditmode),this.isInIframe&&this.sendDataToEditor({action:"initialized",config:this.config}),this.initialized=!0)}keyPress(e,t){(t.key==="z"&&t.metaKey||t.key==="z"&&t.ctrlKey)&&(t.preventDefault(),t.stopImmediatePropagation(),e.sendDataToEditor({action:"undo"})),(t.key==="y"&&t.metaKey||t.key==="y"&&t.ctrlKey)&&(t.preventDefault(),t.stopImmediatePropagation(),e.sendDataToEditor({action:"redo"}))}sendDataToEditor(e){window.parent.postMessage(e,this.targetOrigin)}buildBridgeStyles(){document.getElementById(s.STYLESHEET)?(this.hinter=document.querySelector(`.${s.HINT}`),this.highlighter=document.querySelector(`.${s.HIGHLIGHTER}`),this.overlay=document.querySelector(`.${s.OVERLAY}`),this.componentBase=document.querySelector(`.${s.COMPONENT_BASE}`),this.breadcrumbsButtonMenu=document.querySelector(`.${s.COMPONENT_BASE}-btn-parent`),this.breadcrumbsMenu=document.querySelector(`.${s.BREADCRUMBS_MENU}`),this.actionsMenuButton=document.querySelector(`.${s.COMPONENT_BASE}-btn-action`),this.actionsMenu=document.querySelector(`.${s.ACTIONS_MENU}`),this.componentLabel=document.querySelector(`.${s.COMPONENT_BASE} > .${s.COMPONENT_BASE}-label`),this.createActionsMenuItems()):(this.createBridgeStylesheet(),this.createHinter(),this.createHighlighter(),this.createOverlay(),this.createComponentContext())}createBridgeStylesheet(){const e=document.createElement("style");e.setAttribute("type","text/css"),e.id=s.STYLESHEET,"textContent"in e?e.textContent=T:e.styleSheet.cssText=T,document.getElementsByTagName("head")[0].appendChild(e)}createHinter(){this.hinter=document.createElement("div"),this.hinter.className=s.HINT,this.hideElement(this.hinter),document.body.appendChild(this.hinter)}createHighlighter(){this.highlighter=document.createElement("div"),this.highlighter.style.opacity=0,this.hideElement(this.highlighter),document.body.appendChild(this.highlighter)}createOverlay(){this.overlay=document.createElement("div"),this.overlay.setAttribute("class",s.OVERLAY),this.overlay.setAttribute("id",s.OVERLAY),this.hideElement(this.overlay),document.body.appendChild(this.overlay)}calculateElementPosition(e,t){if(!t){this.hideElement(e);return}const n=u(t);if(n){const{left:i,top:r}=this.getElementOffset(n);r<=30?this.overlay.classList.add(`${s.OVERLAY}--bottom`):this.overlay.classList.remove(`${s.OVERLAY}--bottom`),e.style.top=`${r}px`,e.style.left=`${i}px`,e.style.width=`${n.offsetWidth}px`,e.style.height=`${n.offsetHeight}px`,e.style.minHeight="5px"}else this.hideElement(e)}getElementOffset(e){const t=e.getBoundingClientRect(),n=window.pageXOffset||document.documentElement.scrollLeft,i=window.pageYOffset||document.documentElement.scrollTop;return{top:t.top+i,left:t.left+n}}resetAllEvents(){for(const e in this.events)this.events[e]=[]}addMessageListener(){window.addEventListener&&addEventListener("message",this.receiveMessageFromApp.bind(this),!1)}receiveMessageFromApp(e){e&&e.data&&e.data.action&&this.emit(e.data.action,e.data)}emit(e,...t){const n=this.events[e];if(!(!e||!n||!n.length))for(let i=0;i<n.length;i++)n[i].apply(this,t)}outlineOnMoveHandler(){document.body.classList.add(s.OUTLINE);const e=()=>{document.body.classList.remove(s.OUTLINE),this.hinter&&(this.hinter.style.opacity=0)};this.outlineOnMoveInterval&&clearTimeout(this.outlineOnMoveInterval),this.outlineOnMoveInterval=setTimeout(e,800)}outlineOnMove(){document.addEventListener("mousemove",this.outlineOnMoveHandler.bind(this),!1)}on(e,t){if(e.constructor===Array){for(const n of e)this.subscribeEvent(n,t);return}this.subscribeEvent(e,t)}subscribeEvent(e,t){e==="input"&&(this.actionsEnabled=!0),this.events[e].indexOf(t)===-1&&this.events[e].push(t)}pingEditor(e){this.isInIframe?this.sendDataToEditor({action:"ping"}):(this.inEditor=!1,e(this)),this.on("pingBack",this.handlePingBack(e))}handlePingBack(e){return()=>{this.inEditor=!0,e(this)}}handleEditedBlok(e){this.navigationBreadcrumbs=e.breadcrumbs,this.canAddBlocks=e.canAddBlocks||!1,this.canMoveForward=e.canMoveForward||!1,this.canMoveBackward=e.canMoveBackward||!1,this.canDeleteBlocks=e.canDeleteBlocks||!1,this.updateComponentBase(e.blok)}handleAddMoveBlok(e){const t=u(`${this.storyId}-${e.blockId}`);t&&this.handleOpenBlok(t)}handleDeselectBlock(){document.querySelectorAll("[data-blok-focused]").forEach(e=>e.removeAttribute("data-blok-focused")),this.hideElement(this.overlay)}handleDuplicatedBlok(e){this.handleDeselectBlock(),setTimeout(()=>{const t=u(`${this.storyId}-${e.blockId}`);this.handleOpenBlok(t)},500)}handleWindowClick(e){this.config.preventClicks&&(e.preventDefault(),e.stopPropagation()),this.handleOpenBlok(e.target,e)}handleOpenBlok(e,t){const n=A(e);if(n){t&&n.uid!==this.currentUid&&(t.preventDefault(),t.stopPropagation()),this.currentUid=n.uid,this.storyId=n.id,this.openBlok(n);return}t&&this.toggleFocusElement(e,!0)}enterEditmode(e){const t=V(document.body);e&&e.appVersion&&(this.appVersion=e.appVersion),e&&e.componentNames&&(this.componentNames=e.componentNames);for(let n=0;n<t.length;n++){const i=t[n].el,r=t[n].options;!i||i.nodeType!==Node.ELEMENT_NODE||(r.name=this.componentNames[r.name]||r.name,i.setAttribute("data-blok-c",JSON.stringify(r)),i.setAttribute("data-blok-uid",`${r.id}-${r.uid}`),i.offsetHeight<5&&(i.style["min-height"]="5px"),i.classList.add("storyblok__outline"))}if(this.on("addedBlock",this.handleAddMoveBlok),this.on("duplicatedBlock",this.handleDuplicatedBlok),this.on("movedBlock",this.handleAddMoveBlok),this.on("enterComponent",this.enterComponent),this.on("highlightComponent",this.highlightComponent),this.on("hoverComponent",this.hoverComponent),this.on("editedBlok",this.handleEditedBlok),this.on("deselectBlok",this.handleDeselectBlock),e&&e.blockId&&this.config.setActiveBlock){const n=u(`${e.storyId}-${e.blockId}`);this.handleOpenBlok(n)}window.addEventListener("click",this.handleWindowClick.bind(this)),this.calcInterval!==null&&window.clearInterval(this.calcInterval),this.calcInterval=window.setInterval(()=>{this.calculateElementPosition(this.overlay,`${this.storyId}-${this.currentUid}`)},300)}highlightComponent(e){this.highlighter.innerHTML="",e.componentIds.length>0?(this.highlighter.style.display="block",this.highlighter.style.opacity=1):(this.highlighter.style.display="none",this.highlighter.style.opacity=0);for(let t=0;t<e.componentIds.length;t++){const n=`${e.storyId}-${e.componentIds[t]}`,i=u(n);if(i){const r=document.createElement("div");r.setAttribute("class",s.HIGHLIGHTER),this.highlighter.appendChild(r),this.calculateElementPosition(r,n),e.componentId===e.componentIds[t]&&!S(i)&&typeof i.scrollIntoView<"u"&&i.scrollIntoView()}}}hoverComponent(e){this.calculateElementPosition(this.hinter,`${e.storyId}-${e.componentId}`),this.hinter.style.opacity=1,this.hinter.style.display="block"}toggleFocusElement(e,t=!1){if(!F(this.overlay,e)){if(this.handleDeselectBlock(),!t&&this.storyId===I("_storyblok")){e.setAttribute("data-blok-focused",!0),this.showFocusedElement(this.overlay),this.focusState=!1;return}this.focusState||this.sendDataToEditor({action:"noFocus"})}}showFocusedElement(e){if(!this.currentUid){this.hideElement(e);return}this.showElement(e),this.calculateElementPosition(e,`${this.storyId}-${this.currentUid}`)}handleBlokActions(e){this.sendDataToEditor({action:e,blok:this.lastBreadcrumbItem}),e==="addBlockBefore"||e==="addBlockAfter"||e==="copy"?this.hideElement(this.actionsMenu):this.hideElement(this.overlay),(e==="moveForward"||e==="moveBackward")&&(this.focusState=!0)}hideElement(e){e.style.display="none"}showElement(e){e.style.display="block"}toggleElement(e){if(e.style.display==="block"){this.hideElement(e);return}this.showElement(e)}enterComponent(e){const t=u(`${e.storyId}-${e.componentId}`),n=A(t);n&&(this.hinter.style.opacity=0,this.hinter.style.display="none",this.currentUid=n.uid,this.storyId=n.id,this.scrollIntoView(t),this.handleEditedBlok(e))}scrollIntoView(e){e&&!S(e)&&typeof e.scrollIntoView<"u"&&setTimeout(()=>{e.scrollIntoView({behavior:"smooth",block:"start"})},100)}openBlok(e){this.sendDataToEditor({action:"edit",dataC:e,config:this.config})}createComponentContext(){this.createComponentBase(),this.createActionsMenu(),this.createActionsMenuItems(),this.createBreadcrumbsMenu(),this.createActionsMenuButton(),this.createBreadcrumbsMenuButton(),this.createComponentLabel(),this.createComponentButtonLabel()}createComponentBase(){this.componentBase=document.createElement("div"),this.componentBase.setAttribute("class",s.COMPONENT_BASE),this.componentBase.setAttribute("id",s.COMPONENT_BASE),this.overlay.append(this.componentBase)}createComponentLabel(){this.componentLabel=document.createElement("span"),this.componentLabel.setAttribute("class",`${s.COMPONENT_BASE}-label`),this.componentBase.prepend(this.componentLabel)}createComponentButtonLabel(){const e=document.createElement("span");e.setAttribute("class",`${s.COMPONENT_BASE}-label`),this.breadcrumbsButtonMenu.appendChild(e)}updateComponentLabel(e){document.querySelectorAll(`.${s.COMPONENT_BASE}-label`).forEach(t=>t.innerText=this.componentNames[e.name]||O(e))}updateComponentBase(e){this.hideElement(this.actionsMenu),this.hideElement(this.breadcrumbsMenu),this.overlay.classList.add(`${s.OVERLAY}--clicked`),setTimeout(()=>{this.overlay.classList.remove(`${s.OVERLAY}--clicked`)},400),this.navigationBreadcrumbs.length>1?(this.updateBreadcrumbsMenu(this.navigationBreadcrumbs),this.actionsEnabled?this.updateActionsMenu():(this.componentBase.setAttribute("class",`${s.COMPONENT_BASE} ${s.COMPONENT_BASE}--simple`),this.hideElement(this.actionsMenuButton)),this.hideElement(this.componentLabel)):(this.hideElement(this.breadcrumbsButtonMenu),this.hideElement(this.actionsMenuButton),this.showElement(this.componentLabel)),this.updateComponentLabel(e);const t=u(`${this.storyId}-${e.uid}`);t&&this.toggleFocusElement(t)}createBreadcrumbsMenuButton(){this.breadcrumbsButtonMenu=document.createElement("button"),this.breadcrumbsButtonMenu.setAttribute("class",`${s.COMPONENT_BASE}-btn ${s.COMPONENT_BASE}-btn-parent`),this.breadcrumbsButtonMenu.prepend(N({viewBox:"0 0 24 24",svgClass:`${s.COMPONENT_BASE}-svg`,path:"M13.73 14.284l-2.197-2.216 2.197-2.217a1.051 1.051 0 000-1.477 1.03 1.03 0 00-1.465 0l-2.93 2.955a1.043 1.043 0 00-.287.554l-.014.123v.123c.014.247.115.489.301.677l2.93 2.956a1.03 1.03 0 001.465 0 1.051 1.051 0 000-1.478z",pathFill:"#ffffff"})),this.breadcrumbsButtonMenu.addEventListener("click",()=>{this.toggleElement(this.breadcrumbsMenu),this.hideElement(this.actionsMenu)}),this.componentBase.prepend(this.breadcrumbsButtonMenu)}createBreadcrumbsMenu(){this.breadcrumbsMenu=document.createElement("div"),this.breadcrumbsMenu.setAttribute("class",s.BREADCRUMBS_MENU),this.breadcrumbsMenu.setAttribute("id",s.BREADCRUMBS_MENU),this.componentBase.append(this.breadcrumbsMenu)}updateBreadcrumbsMenu(e){this.breadcrumbsMenu.innerHTML="";const t=[];for(let n=0;n<e.length;n++){t[n]=document.createElement("button"),t[n].innerHTML=O({display_name:this.componentNames[e[n].component],name:e[n].component});const i=e[n];t[n].addEventListener("click",r=>{r.stopPropagation(),this.currentUid=i._uid,this.openBlok({id:this.storyId,uid:i._uid,name:i.component})}),t[n].classList.add(`${s.BREADCRUMBS_MENU}__menu-item`),e[n]._uid===this.currentUid&&(t[n].classList.add(`${s.BREADCRUMBS_MENU}__menu-item--selected`),t[n].setAttribute("disabled",!0)),this.breadcrumbsMenu.appendChild(t[n]),this.breadcrumbsButtonMenu.style.display="flex"}}createActionsMenuButton(){this.actionsMenuButton=document.createElement("button"),this.actionsMenuButton.setAttribute("class",`${s.COMPONENT_BASE}-btn ${s.COMPONENT_BASE}-btn-action`),this.actionsMenuButton.prepend(N({viewBox:"0 0 24 24",svgClass:`${s.COMPONENT_BASE}-svg`,path:"M7.5 11a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm10 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-5 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3z",pathFill:"#ffffff"})),this.actionsMenuButton.addEventListener("click",()=>{this.toggleElement(this.actionsMenu),this.breadcrumbsMenu&&this.hideElement(this.breadcrumbsMenu)}),this.componentBase.append(this.actionsMenuButton)}createActionsMenuItems(){this.actionsMenuItems=[{eventFunction:()=>this.handleBlokActions.bind(this,"addBlockBefore"),innerHTML:"Add Block Before",order:0,show:()=>this.canAddBlocks},{eventFunction:()=>this.handleBlokActions.bind(this,"addBlockAfter"),innerHTML:"Add Block After",order:1,show:()=>this.canAddBlocks},{eventFunction:()=>this.handleBlokActions.bind(this,"duplicateBlock"),innerHTML:"Duplicate",order:2,show:()=>this.canAddBlocks},{eventFunction:()=>this.handleBlokActions.bind(this,"copy"),innerHTML:"Copy",order:3,show:()=>this.appVersion==="v2"},{separator:!0,order:4,show:()=>this.canAddBlocks&&this.canMoveForward||!!(this.canMoveBackward&&this.lastBreadcrumbItem._parentindex)},{eventFunction:()=>this.handleBlokActions.bind(this,"moveForward"),innerHTML:"Move Forward",order:5,show:()=>this.canMoveForward},{eventFunction:()=>this.handleBlokActions.bind(this,"moveBackward"),innerHTML:"Move Backward",order:6,show:()=>this.canMoveBackward&&this.lastBreadcrumbItem._parentindex},{separator:!0,order:7,show:()=>this.canAddBlocks&&this.canDeleteBlocks},{eventFunction:()=>this.handleBlokActions.bind(this,"deleteBlock"),className:`${s.ACTIONS_MENU}__menu-item--delete`,innerHTML:"Delete",order:8,show:()=>this.canDeleteBlocks}]}createActionsMenu(){this.actionsMenu=document.createElement("div"),this.actionsMenu.setAttribute("class",s.ACTIONS_MENU),this.actionsMenu.setAttribute("id",s.ACTIONS_MENU),this.componentBase.append(this.actionsMenu)}updateActionsMenu(){this.actionsMenu.innerHTML="";const e=`${s.ACTIONS_MENU}__menu-item`,t="button",n="click";this.actionsMenuItems.sort((i,r)=>i.order>r.order?1:r.order>i.order?-1:0).forEach(i=>{if(i.separator&&i.show()){this.actionsMenu.appendChild(document.createElement("hr"));return}const r=document.createElement(i.element?i.element:t);r.classList.add(e),i.className&&r.classList.add(i.className),r.innerHTML=i.innerHTML,i.eventFunction&&r.addEventListener(i.event?i.event:n,i.eventFunction()),i.show()&&this.actionsMenu.appendChild(r)}),this.actionsMenuButton.style.display="flex"}}var J=Object.defineProperty,K=(o,e,t)=>e in o?J(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,f=(o,e,t)=>K(o,typeof e!="symbol"?e+"":e,t);let W=class{constructor(e){f(this,"isInEditor"),f(this,"enterEditmode"),f(this,"pingEditor"),f(this,"on");const t=new G(e);this.isInEditor=()=>t.isInEditor(),this.enterEditmode=n=>{t.enterEditmode(n)},this.pingEditor=n=>{t.pingEditor(n)},this.on=(n,i)=>{t.on(n,i)}}};const y=o=>({tag:"success",value:o}),b=o=>({tag:"failure",error:o,path:[]}),C=(o,e)=>({tag:"failure",error:o.error,path:[e,...o.path]}),X=o=>typeof o>"u",Z=o=>typeof o=="string",Q=o=>typeof o=="object"&&o!==null,B=Symbol("propertyAbsent"),x=Symbol("omitProperty"),ee="Not an object",te=o=>C(b("Property is missing"),{tag:"object",key:o}),oe=o=>{const e=Object.entries(o);return t=>{if(!Q(t))return b(ee);const n={};for(let i=0;i<e.length;i++){const[r,h]=e[i],l=t[r];if(l===void 0&&!t.hasOwnProperty(r)){const c=h(B);if(c.tag==="failure"||c.value===B)return te(r);c.value!==x&&(n[r]=c.value)}else{const c=h(l);if(c.tag==="failure")return C(c,{tag:"object",key:r});n[r]=c.value}}return y(n)}},ne=o=>X(o)?y(o):b("Not undefined"),k=o=>Z(o)?y(o):b("Not a string"),ie=(...o)=>e=>{for(const t of o){const n=t(e);if(n.tag==="success")return y(n.value)}return b("No parser in the union matched")},se=o=>ie(re,ne,o),re=o=>o===B?y(x):b("not optional");oe({name:k,space:se(k),uid:k,id:k});const ae=Object.freeze(Object.defineProperty({__proto__:null,default:W},Symbol.toStringTag,{value:"Module"}));a.StoryblokClient=m,Object.defineProperty(a,"buildStoryblokImage",{enumerable:!0,get:()=>E.buildStoryblokImage}),Object.defineProperty(a,"renderRichText",{enumerable:!0,get:()=>E.renderRichText}),Object.defineProperty(a,"splitTableRows",{enumerable:!0,get:()=>E.splitTableRows}),a.apiPlugin=L,a.loadStoryblokBridge=H,a.registerStoryblokBridge=w,a.storyblokEditable=P,a.storyblokInit=U,a.useStoryblokBridge=w,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));

package/dist/storyblok-js.mjs

@@ -4,98 +4,105 @@
  * description: SDK to integrate Storyblok into your project using JavaScript.
  * author: undefined
  */
-import k from "storyblok-js-client";
-import { default as R } from "storyblok-js-client";
-import { buildStoryblokImage as _, renderRichText as P, splitTableRows as x } from "@storyblok/richtext";
-let y = !1;
-const p = [], b = (e) => new Promise((o, n) => {
-  if (typeof window > "u") {
-    n(new Error("Cannot load Storyblok bridge: window is undefined (server-side environment)"));
+import g from "storyblok-js-client";
+import { default as _ } from "storyblok-js-client";
+import { buildStoryblokImage as P, renderRichText as x, splitTableRows as A } from "@storyblok/richtext";
+let u = !1, a;
+const y = [], f = () => typeof window > "u" ? Promise.reject(
+  new Error("Cannot load Storyblok bridge: window is undefined (server-side environment)")
+) : (window.storyblokRegisterEvent = (o) => {
+  if (!window.location.search.includes("_storyblok")) {
+    console.warn("You are not in Draft Mode or in the Visual Editor.");
     return;
   }
-  if (window.storyblokRegisterEvent = (t) => {
-    if (!window.location.search.includes("_storyblok")) {
-      console.warn("You are not in Draft Mode or in the Visual Editor.");
-      return;
-    }
-    y ? t() : p.push(t);
-  }, document.getElementById("storyblok-javascript-bridge")) {
-    o(void 0);
-    return;
-  }
-  const r = document.createElement("script");
-  r.async = !0, r.src = e, r.id = "storyblok-javascript-bridge", r.onerror = (t) => n(t), r.onload = (t) => {
-    p.forEach((s) => s()), y = !0, o(t);
-  }, document.getElementsByTagName("head")[0].appendChild(r);
-}), h = (e = {}) => {
-  const { apiOptions: o } = e;
-  if (!o || !o.accessToken) {
+  u ? o() : y.push(o);
+}, u ? Promise.resolve() : a || (a = import("./index-CtMAhUF-.js").then(({ default: o }) => {
+  window.StoryblokBridge = o, y.forEach((e) => e()), u = !0;
+}).catch((o) => {
+  throw a = void 0, o;
+}), a)), S = (o = {}) => {
+  const { apiOptions: e } = o;
+  if (!e || !e.accessToken) {
     console.error(
       "You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication"
     );
     return;
   }
-  return { storyblokApi: new k(o) };
-}, m = (e) => {
-  if (typeof e != "object" || typeof e._editable != "string")
+  return { storyblokApi: new g(e) };
+}, m = (o) => {
+  if (typeof o != "object" || typeof o._editable != "string")
     return {};
   try {
-    const o = JSON.parse(
-      e._editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, "")
+    const e = JSON.parse(
+      o._editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, "")
     );
-    return o ? {
-      "data-blok-c": JSON.stringify(o),
-      "data-blok-uid": `${o.id}-${o.uid}`
+    return e ? {
+      "data-blok-c": JSON.stringify(e),
+      "data-blok-uid": `${e.id}-${e.uid}`
     } : {};
   } catch {
     return {};
   }
 };
-let c = "https://app.storyblok.com/f/storyblok-v2-latest.js";
-const S = (e, o, n = {}) => {
-  var a;
-  const t = !(typeof window > "u") && typeof window.storyblokRegisterEvent < "u", s = new URL((a = window.location) == null ? void 0 : a.href).searchParams.get(
+function k(o) {
+  const { language: e, resolveRelations: r, ...l } = o;
+  return e && console.warn(
+    "[Storyblok] The `language` bridge option is no longer supported by the bundled bridge. Language context is now passed automatically by the Visual Editor via the `_storyblok_lang` URL parameter."
+  ), {
+    ...l,
+    ...r !== void 0 && {
+      resolveRelations: Array.isArray(r) ? r : [r]
+    }
+  };
+}
+const v = (o, e, r = {}) => {
+  var i;
+  const n = !(typeof window > "u") && typeof window.storyblokRegisterEvent < "u", d = new URL((i = window.location) == null ? void 0 : i.href).searchParams.get(
     "_storyblok"
-  ), l = s !== null && +s === e;
-  if (!(!t || !l)) {
-    if (!e) {
+  ), c = d !== null && +d === o;
+  if (!(!n || !c)) {
+    if (!o) {
       console.warn("Story ID is not defined. Please provide a valid ID.");
       return;
     }
     window.storyblokRegisterEvent(() => {
-      new window.StoryblokBridge(n).on(["input", "published", "change"], (i) => {
-        var d;
-        i && (i.action === "input" && ((d = i.story) == null ? void 0 : d.id) === e ? o(i.story) : (i.action === "change" || i.action === "published") && i.storyId === e && window.location.reload());
+      new window.StoryblokBridge(
+        k(r)
+      ).on(["input", "published", "change"], (t) => {
+        var s;
+        t && (t.action === "input" && ((s = t.story) == null ? void 0 : s.id) === o ? e(t.story) : (t.action === "change" || t.action === "published") && t.storyId === o && window.location.reload());
       });
     });
   }
-}, E = (e = {}) => {
-  var d, u;
+}, R = (o = {}) => {
+  var s, b;
   const {
-    bridge: o,
-    accessToken: n,
-    use: r = [],
-    apiOptions: t = {},
-    bridgeUrl: s
-  } = e;
-  t.accessToken = t.accessToken || n;
-  const l = { bridge: o, apiOptions: t };
-  let a = {};
-  r.forEach((w) => {
-    a = { ...a, ...w(l) };
-  }), s && (c = s);
-  const i = !(typeof window > "u") && ((u = (d = window.location) == null ? void 0 : d.search) == null ? void 0 : u.includes("_storyblok_tk"));
-  return o !== !1 && i && b(c), a;
-}, v = () => b(c);
+    bridge: e,
+    accessToken: r,
+    use: l = [],
+    apiOptions: n = {},
+    bridgeUrl: d
+  } = o;
+  d && console.warn(
+    "[Storyblok] The `bridgeUrl` option is deprecated and will be removed in a future major version. The Storyblok bridge is now bundled and is no longer loaded from a CDN URL."
+  ), n.accessToken = n.accessToken || r;
+  const c = { bridge: e, apiOptions: n };
+  let i = {};
+  l.forEach((w) => {
+    i = { ...i, ...w(c) };
+  });
+  const t = !(typeof window > "u") && ((b = (s = window.location) == null ? void 0 : s.search) == null ? void 0 : b.includes("_storyblok_tk"));
+  return e !== !1 && t && f(), i;
+}, B = () => f();
 export {
-  R as StoryblokClient,
-  h as apiPlugin,
-  _ as buildStoryblokImage,
-  v as loadStoryblokBridge,
-  S as registerStoryblokBridge,
-  P as renderRichText,
-  x as splitTableRows,
+  _ as StoryblokClient,
+  S as apiPlugin,
+  P as buildStoryblokImage,
+  B as loadStoryblokBridge,
+  v as registerStoryblokBridge,
+  x as renderRichText,
+  A as splitTableRows,
   m as storyblokEditable,
-  E as storyblokInit,
-  S as useStoryblokBridge
+  R as storyblokInit,
+  v as useStoryblokBridge
 };

package/dist/types/index.d.ts

@@ -37,7 +37,7 @@ export interface StoryblokBridgeConfigV2 {
     preventClicks?: boolean;
     language?: string;
     resolveLinks?: 'url' | 'story' | '0' | '1' | 'link';
-    fallbackLang?: 'string';
+    fallbackLang?: string;
 }
 export interface StoryblokBridgeV2 {
     pingEditor: (event: any) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/js",
   "type": "module",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "private": false,
   "description": "SDK to integrate Storyblok into your project using JavaScript.",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "dist"
   ],
   "dependencies": {
+    "@storyblok/preview-bridge": "^2.1.6",
     "@storyblok/richtext": "5.2.0",
     "storyblok-js-client": "7.7.1"
   },