@contentstack/live-preview-utils 2.0.4 → 3.0.0

package/dist/legacy/visualBuilder/generators/generateStartEditingButton.cjs

@@ -0,0 +1,57 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/generators/generateStartEditingButton.tsx
+var generateStartEditingButton_exports = {};
+__export(generateStartEditingButton_exports, {
+  generateStartEditingButton: () => generateStartEditingButton
+});
+module.exports = __toCommonJS(generateStartEditingButton_exports);
+var import_preact = require("preact");
+var import_logger = require("../../logger/logger.cjs");
+var import_startEditingButton = __toESM(require("../components/startEditingButton.cjs"), 1);
+var import_jsx_runtime = require("preact/jsx-runtime");
+function generateStartEditingButton(visualBuilderContainer) {
+  if (!visualBuilderContainer) {
+    import_logger.PublicLogger.warn("Visual builder overlay not found.");
+    return;
+  }
+  const wrapper = document.createDocumentFragment();
+  (0, import_preact.render)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_startEditingButton.default, {}), wrapper);
+  visualBuilderContainer == null ? void 0 : visualBuilderContainer.appendChild(wrapper);
+  const startEditingButton = document.querySelector(
+    ".visual-builder__start-editing-btn"
+  );
+  return startEditingButton;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateStartEditingButton
+});
+//# sourceMappingURL=generateStartEditingButton.cjs.map

package/dist/legacy/visualBuilder/generators/generateStartEditingButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateStartEditingButton.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport StartEditingButtonComponent from \"../components/startEditingButton\";\n\n/**\n * Generates a start editing button for the visual builder.\n *\n * @param visualBuilderContainer - The HTMLDivElement that wraps the visual builder.\n * @returns The generated HTMLAnchorElement representing the start editing button, or undefined if the visualBuilderContainer is null.\n */\nexport function generateStartEditingButton(\n    visualBuilderContainer: HTMLDivElement | null\n): HTMLAnchorElement | undefined {\n    if (!visualBuilderContainer) {\n        PublicLogger.warn(\"Visual builder overlay not found.\");\n        return;\n    }\n\n    const wrapper = document.createDocumentFragment();\n    render(<StartEditingButtonComponent />, wrapper);\n\n    visualBuilderContainer?.appendChild(wrapper);\n\n    const startEditingButton = document.querySelector(\n        \".visual-builder__start-editing-btn\"\n    ) as HTMLAnchorElement;\n\n    return startEditingButton;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,oBAA6B;AAC7B,gCAAwC;AAiB7B;AATJ,SAAS,2BACZ,wBAC6B;AAC7B,MAAI,CAAC,wBAAwB;AACzB,+BAAa,KAAK,mCAAmC;AACrD;AAAA,EACJ;AAEA,QAAM,UAAU,SAAS,uBAAuB;AAChD,4BAAO,4CAAC,0BAAAA,SAAA,EAA4B,GAAI,OAAO;AAE/C,mEAAwB,YAAY;AAEpC,QAAM,qBAAqB,SAAS;AAAA,IAChC;AAAA,EACJ;AAEA,SAAO;AACX;","names":["StartEditingButtonComponent"]}

package/dist/legacy/visualBuilder/generators/generateStartEditingButton.d.cts

@@ -0,0 +1,9 @@
+/**
+ * Generates a start editing button for the visual builder.
+ *
+ * @param visualBuilderContainer - The HTMLDivElement that wraps the visual builder.
+ * @returns The generated HTMLAnchorElement representing the start editing button, or undefined if the visualBuilderContainer is null.
+ */
+declare function generateStartEditingButton(visualBuilderContainer: HTMLDivElement | null): HTMLAnchorElement | undefined;
+
+export { generateStartEditingButton };

package/dist/legacy/visualBuilder/generators/generateStartEditingButton.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates a start editing button for the visual builder.
+ *
+ * @param visualBuilderContainer - The HTMLDivElement that wraps the visual builder.
+ * @returns The generated HTMLAnchorElement representing the start editing button, or undefined if the visualBuilderContainer is null.
+ */
+declare function generateStartEditingButton(visualBuilderContainer: HTMLDivElement | null): HTMLAnchorElement | undefined;
+
+export { generateStartEditingButton };

package/dist/legacy/visualBuilder/generators/generateStartEditingButton.js

@@ -0,0 +1,24 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/generators/generateStartEditingButton.tsx
+import { render } from "preact";
+import { PublicLogger } from "../../logger/logger.js";
+import StartEditingButtonComponent from "../components/startEditingButton.js";
+import { jsx } from "preact/jsx-runtime";
+function generateStartEditingButton(visualBuilderContainer) {
+  if (!visualBuilderContainer) {
+    PublicLogger.warn("Visual builder overlay not found.");
+    return;
+  }
+  const wrapper = document.createDocumentFragment();
+  render(/* @__PURE__ */ jsx(StartEditingButtonComponent, {}), wrapper);
+  visualBuilderContainer == null ? void 0 : visualBuilderContainer.appendChild(wrapper);
+  const startEditingButton = document.querySelector(
+    ".visual-builder__start-editing-btn"
+  );
+  return startEditingButton;
+}
+export {
+  generateStartEditingButton
+};
+//# sourceMappingURL=generateStartEditingButton.js.map

package/dist/legacy/visualBuilder/generators/generateStartEditingButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateStartEditingButton.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport { PublicLogger } from \"../../logger/logger\";\nimport StartEditingButtonComponent from \"../components/startEditingButton\";\n\n/**\n * Generates a start editing button for the visual builder.\n *\n * @param visualBuilderContainer - The HTMLDivElement that wraps the visual builder.\n * @returns The generated HTMLAnchorElement representing the start editing button, or undefined if the visualBuilderContainer is null.\n */\nexport function generateStartEditingButton(\n    visualBuilderContainer: HTMLDivElement | null\n): HTMLAnchorElement | undefined {\n    if (!visualBuilderContainer) {\n        PublicLogger.warn(\"Visual builder overlay not found.\");\n        return;\n    }\n\n    const wrapper = document.createDocumentFragment();\n    render(<StartEditingButtonComponent />, wrapper);\n\n    visualBuilderContainer?.appendChild(wrapper);\n\n    const startEditingButton = document.querySelector(\n        \".visual-builder__start-editing-btn\"\n    ) as HTMLAnchorElement;\n\n    return startEditingButton;\n}\n"],"mappings":";;;AAAA,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,OAAO,iCAAiC;AAiB7B;AATJ,SAAS,2BACZ,wBAC6B;AAC7B,MAAI,CAAC,wBAAwB;AACzB,iBAAa,KAAK,mCAAmC;AACrD;AAAA,EACJ;AAEA,QAAM,UAAU,SAAS,uBAAuB;AAChD,SAAO,oBAAC,+BAA4B,GAAI,OAAO;AAE/C,mEAAwB,YAAY;AAEpC,QAAM,qBAAqB,SAAS;AAAA,IAChC;AAAA,EACJ;AAEA,SAAO;AACX;","names":[]}

package/dist/legacy/visualBuilder/generators/generateToolbar.cjs

@@ -0,0 +1,129 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/generators/generateToolbar.tsx
+var generateToolbar_exports = {};
+__export(generateToolbar_exports, {
+  appendFieldPathDropdown: () => appendFieldPathDropdown,
+  appendFieldToolbar: () => appendFieldToolbar,
+  appendFocusedToolbar: () => appendFocusedToolbar
+});
+module.exports = __toCommonJS(generateToolbar_exports);
+var import_constants = require("../utils/constants.cjs");
+var import_FieldToolbar = __toESM(require("../components/FieldToolbar.cjs"), 1);
+var import_preact = require("preact");
+var import_fieldLabelWrapper = __toESM(require("../components/fieldLabelWrapper.cjs"), 1);
+var import_jsx_runtime = require("preact/jsx-runtime");
+function appendFocusedToolbar(eventDetails, focusedToolbarElement) {
+  appendFieldPathDropdown(eventDetails, focusedToolbarElement);
+  appendFieldToolbar(eventDetails, focusedToolbarElement);
+}
+function appendFieldToolbar(eventDetails, focusedToolbarElement) {
+  if (focusedToolbarElement.querySelector(
+    ".visual-builder__focused-toolbar__multiple-field-toolbar"
+  ))
+    return;
+  const wrapper = document.createDocumentFragment();
+  (0, import_preact.render)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_FieldToolbar.default,
+      {
+        eventDetails
+      }
+    ),
+    wrapper
+  );
+  focusedToolbarElement.append(wrapper);
+}
+function appendFieldPathDropdown(eventDetails, focusedToolbarElement) {
+  if (document.querySelector("visual-builder__focused-toolbar__field-label-wrapper"))
+    return;
+  const { editableElement: targetElement, fieldMetadata } = eventDetails;
+  const targetElementDimension = targetElement.getBoundingClientRect();
+  const distanceFromTop = targetElementDimension.top + window.scrollY - import_constants.TOOLBAR_EDGE_BUFFER;
+  const adjustedDistanceFromTop = targetElementDimension.top + window.scrollY < import_constants.TOP_EDGE_BUFFER ? distanceFromTop + targetElementDimension.height + import_constants.TOP_EDGE_BUFFER : distanceFromTop;
+  const distanceFromLeft = targetElementDimension.left - import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
+  const adjustedDistanceFromLeft = Math.max(
+    distanceFromLeft,
+    import_constants.TOOLBAR_EDGE_BUFFER
+  );
+  const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - targetElementDimension.left;
+  if (targetElementRightEdgeOffset < import_constants.RIGHT_EDGE_BUFFER) {
+    focusedToolbarElement.style.justifyContent = "flex-end";
+    focusedToolbarElement.style.left = `${targetElementDimension.right + import_constants.LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;
+  } else {
+    focusedToolbarElement.style.justifyContent = "flex-start";
+    focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;
+  }
+  focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;
+  const parentPaths = collectParentCSLPPaths(targetElement, 2);
+  const wrapper = document.createDocumentFragment();
+  (0, import_preact.render)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_fieldLabelWrapper.default,
+      {
+        fieldMetadata,
+        eventDetails,
+        parentPaths,
+        getParentEditableElement: (cslp) => {
+          const parentElement = targetElement.closest(
+            `[${import_constants.DATA_CSLP_ATTR_SELECTOR}="${cslp}"]`
+          );
+          return parentElement;
+        }
+      }
+    ),
+    wrapper
+  );
+  focusedToolbarElement.appendChild(wrapper);
+}
+function collectParentCSLPPaths(targetElement, count) {
+  const cslpPaths = [];
+  let currentElement = targetElement.parentElement;
+  while (count > 0 || currentElement === window.document.body) {
+    if (!currentElement) {
+      return cslpPaths;
+    }
+    if (currentElement.hasAttribute(import_constants.DATA_CSLP_ATTR_SELECTOR)) {
+      cslpPaths.push(
+        currentElement.getAttribute(import_constants.DATA_CSLP_ATTR_SELECTOR)
+      );
+      count--;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return cslpPaths;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  appendFieldPathDropdown,
+  appendFieldToolbar,
+  appendFocusedToolbar
+});
+//# sourceMappingURL=generateToolbar.cjs.map

package/dist/legacy/visualBuilder/generators/generateToolbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\"visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAMO;AAIP,0BAAkC;AAClC,oBAAuB;AACvB,+BAAuC;AAsB/B;AApBD,SAAS,qBACZ,cACA,uBACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,qBAAqB;AAC1D;AAEO,SAAS,mBACZ,cACA,uBACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,oBAAAA;AAAA,MAAA;AAAA,QACG;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,sDAAsD;AAC5E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,mCACxC,kBAAkB,uBAAuB,SAAS,mCAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,oCAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,iDACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,yBAAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,wCAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,wCAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,wCAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":["FieldToolbarComponent","FieldLabelWrapperComponent"]}

package/dist/legacy/visualBuilder/generators/generateToolbar.d.cts

@@ -0,0 +1,8 @@
+import { VisualBuilderCslpEventDetails } from '../types/visualBuilder.types.cjs';
+import '../../cslp/types/cslp.types.cjs';
+
+declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
+declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
+declare function appendFieldPathDropdown(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
+
+export { appendFieldPathDropdown, appendFieldToolbar, appendFocusedToolbar };

package/dist/legacy/visualBuilder/generators/generateToolbar.d.ts

@@ -0,0 +1,8 @@
+import { VisualBuilderCslpEventDetails } from '../types/visualBuilder.types.js';
+import '../../cslp/types/cslp.types.js';
+
+declare function appendFocusedToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
+declare function appendFieldToolbar(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
+declare function appendFieldPathDropdown(eventDetails: VisualBuilderCslpEventDetails, focusedToolbarElement: HTMLDivElement): void;
+
+export { appendFieldPathDropdown, appendFieldToolbar, appendFocusedToolbar };

package/dist/legacy/visualBuilder/generators/generateToolbar.js

@@ -0,0 +1,100 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/generators/generateToolbar.tsx
+import {
+  DATA_CSLP_ATTR_SELECTOR,
+  LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,
+  RIGHT_EDGE_BUFFER,
+  TOOLBAR_EDGE_BUFFER,
+  TOP_EDGE_BUFFER
+} from "../utils/constants.js";
+import FieldToolbarComponent from "../components/FieldToolbar.js";
+import { render } from "preact";
+import FieldLabelWrapperComponent from "../components/fieldLabelWrapper.js";
+import { jsx } from "preact/jsx-runtime";
+function appendFocusedToolbar(eventDetails, focusedToolbarElement) {
+  appendFieldPathDropdown(eventDetails, focusedToolbarElement);
+  appendFieldToolbar(eventDetails, focusedToolbarElement);
+}
+function appendFieldToolbar(eventDetails, focusedToolbarElement) {
+  if (focusedToolbarElement.querySelector(
+    ".visual-builder__focused-toolbar__multiple-field-toolbar"
+  ))
+    return;
+  const wrapper = document.createDocumentFragment();
+  render(
+    /* @__PURE__ */ jsx(
+      FieldToolbarComponent,
+      {
+        eventDetails
+      }
+    ),
+    wrapper
+  );
+  focusedToolbarElement.append(wrapper);
+}
+function appendFieldPathDropdown(eventDetails, focusedToolbarElement) {
+  if (document.querySelector("visual-builder__focused-toolbar__field-label-wrapper"))
+    return;
+  const { editableElement: targetElement, fieldMetadata } = eventDetails;
+  const targetElementDimension = targetElement.getBoundingClientRect();
+  const distanceFromTop = targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;
+  const adjustedDistanceFromTop = targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER : distanceFromTop;
+  const distanceFromLeft = targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;
+  const adjustedDistanceFromLeft = Math.max(
+    distanceFromLeft,
+    TOOLBAR_EDGE_BUFFER
+  );
+  const targetElementRightEdgeOffset = window.scrollX + window.innerWidth - targetElementDimension.left;
+  if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {
+    focusedToolbarElement.style.justifyContent = "flex-end";
+    focusedToolbarElement.style.left = `${targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;
+  } else {
+    focusedToolbarElement.style.justifyContent = "flex-start";
+    focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;
+  }
+  focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;
+  const parentPaths = collectParentCSLPPaths(targetElement, 2);
+  const wrapper = document.createDocumentFragment();
+  render(
+    /* @__PURE__ */ jsx(
+      FieldLabelWrapperComponent,
+      {
+        fieldMetadata,
+        eventDetails,
+        parentPaths,
+        getParentEditableElement: (cslp) => {
+          const parentElement = targetElement.closest(
+            `[${DATA_CSLP_ATTR_SELECTOR}="${cslp}"]`
+          );
+          return parentElement;
+        }
+      }
+    ),
+    wrapper
+  );
+  focusedToolbarElement.appendChild(wrapper);
+}
+function collectParentCSLPPaths(targetElement, count) {
+  const cslpPaths = [];
+  let currentElement = targetElement.parentElement;
+  while (count > 0 || currentElement === window.document.body) {
+    if (!currentElement) {
+      return cslpPaths;
+    }
+    if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {
+      cslpPaths.push(
+        currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR)
+      );
+      count--;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return cslpPaths;
+}
+export {
+  appendFieldPathDropdown,
+  appendFieldToolbar,
+  appendFocusedToolbar
+};
+//# sourceMappingURL=generateToolbar.js.map

package/dist/legacy/visualBuilder/generators/generateToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateToolbar.tsx"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    DATA_CSLP_ATTR_SELECTOR,\n    LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n    RIGHT_EDGE_BUFFER,\n    TOOLBAR_EDGE_BUFFER,\n    TOP_EDGE_BUFFER,\n} from \"../utils/constants\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\n\nimport FieldToolbarComponent from \"../components/FieldToolbar\";\nimport { render } from \"preact\";\nimport FieldLabelWrapperComponent from \"../components/fieldLabelWrapper\";\n\nexport function appendFocusedToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    appendFieldPathDropdown(eventDetails, focusedToolbarElement);\n    appendFieldToolbar(eventDetails, focusedToolbarElement);\n}\n\nexport function appendFieldToolbar(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if (\n        focusedToolbarElement.querySelector(\n            \".visual-builder__focused-toolbar__multiple-field-toolbar\"\n        )\n    )\n        return;\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldToolbarComponent\n            eventDetails={eventDetails}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.append(wrapper);\n}\n\nexport function appendFieldPathDropdown(\n    eventDetails: VisualBuilderCslpEventDetails,\n    focusedToolbarElement: HTMLDivElement\n): void {\n    if(document.querySelector(\"visual-builder__focused-toolbar__field-label-wrapper\"))\n        return;\n    const { editableElement: targetElement, fieldMetadata } = eventDetails;\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const distanceFromTop =\n        targetElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n    // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n    const adjustedDistanceFromTop =\n        targetElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n            ? distanceFromTop + targetElementDimension.height + TOP_EDGE_BUFFER\n            : distanceFromTop;\n\n    const distanceFromLeft =\n        targetElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n    const adjustedDistanceFromLeft = Math.max(\n        distanceFromLeft,\n        TOOLBAR_EDGE_BUFFER\n    );\n\n    const targetElementRightEdgeOffset =\n        window.scrollX + window.innerWidth - targetElementDimension.left;\n\n    if (targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER) {\n        // Overflow / Cutoff on right edge\n        focusedToolbarElement.style.justifyContent = \"flex-end\";\n        focusedToolbarElement.style.left = `${\n            targetElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n        }px`;\n    } else {\n        focusedToolbarElement.style.justifyContent = \"flex-start\"; // default\n        focusedToolbarElement.style.left = `${adjustedDistanceFromLeft}px`;\n    }\n\n    focusedToolbarElement.style.top = `${adjustedDistanceFromTop}px`;\n\n    const parentPaths = collectParentCSLPPaths(targetElement, 2);\n\n    const wrapper = document.createDocumentFragment();\n    render(\n        <FieldLabelWrapperComponent\n            fieldMetadata={fieldMetadata}\n            eventDetails={eventDetails}\n            parentPaths={parentPaths}\n            getParentEditableElement={(cslp: string) => {\n                const parentElement = targetElement.closest(\n                    `[${DATA_CSLP_ATTR_SELECTOR}=\"${cslp}\"]`\n                ) as HTMLElement | null;\n                return parentElement;\n            }}\n        />,\n        wrapper\n    );\n\n    focusedToolbarElement.appendChild(wrapper);\n}\n\nfunction collectParentCSLPPaths(\n    targetElement: Element,\n    count: number\n): Array<string> {\n    const cslpPaths: Array<string> = [];\n    let currentElement = targetElement.parentElement;\n\n    while (count > 0 || currentElement === window.document.body) {\n        if (!currentElement) {\n            return cslpPaths;\n        }\n\n        if (currentElement.hasAttribute(DATA_CSLP_ATTR_SELECTOR)) {\n            cslpPaths.push(\n                currentElement.getAttribute(DATA_CSLP_ATTR_SELECTOR) as string\n            );\n            count--;\n        }\n        currentElement = currentElement.parentElement;\n    }\n\n    return cslpPaths;\n}\n"],"mappings":";;;AACA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAIP,OAAO,2BAA2B;AAClC,SAAS,cAAc;AACvB,OAAO,gCAAgC;AAsB/B;AApBD,SAAS,qBACZ,cACA,uBACI;AACJ,0BAAwB,cAAc,qBAAqB;AAC3D,qBAAmB,cAAc,qBAAqB;AAC1D;AAEO,SAAS,mBACZ,cACA,uBACI;AACJ,MACI,sBAAsB;AAAA,IAClB;AAAA,EACJ;AAEA;AACJ,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,OAAO,OAAO;AACxC;AAEO,SAAS,wBACZ,cACA,uBACI;AACJ,MAAG,SAAS,cAAc,sDAAsD;AAC5E;AACJ,QAAM,EAAE,iBAAiB,eAAe,cAAc,IAAI;AAC1D,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,kBACF,uBAAuB,MAAM,OAAO,UAAU;AAElD,QAAM,0BACF,uBAAuB,MAAM,OAAO,UAAU,kBACxC,kBAAkB,uBAAuB,SAAS,kBAClD;AAEV,QAAM,mBACF,uBAAuB,OAAO;AAClC,QAAM,2BAA2B,KAAK;AAAA,IAClC;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,+BACF,OAAO,UAAU,OAAO,aAAa,uBAAuB;AAEhE,MAAI,+BAA+B,mBAAmB;AAElD,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAC/B,uBAAuB,QAAQ,gCACnC;AAAA,EACJ,OAAO;AACH,0BAAsB,MAAM,iBAAiB;AAC7C,0BAAsB,MAAM,OAAO,GAAG,wBAAwB;AAAA,EAClE;AAEA,wBAAsB,MAAM,MAAM,GAAG,uBAAuB;AAE5D,QAAM,cAAc,uBAAuB,eAAe,CAAC;AAE3D,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,CAAC,SAAiB;AACxC,gBAAM,gBAAgB,cAAc;AAAA,YAChC,IAAI,uBAAuB,KAAK,IAAI;AAAA,UACxC;AACA,iBAAO;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,wBAAsB,YAAY,OAAO;AAC7C;AAEA,SAAS,uBACL,eACA,OACa;AACb,QAAM,YAA2B,CAAC;AAClC,MAAI,iBAAiB,cAAc;AAEnC,SAAO,QAAQ,KAAK,mBAAmB,OAAO,SAAS,MAAM;AACzD,QAAI,CAAC,gBAAgB;AACjB,aAAO;AAAA,IACX;AAEA,QAAI,eAAe,aAAa,uBAAuB,GAAG;AACtD,gBAAU;AAAA,QACN,eAAe,aAAa,uBAAuB;AAAA,MACvD;AACA;AAAA,IACJ;AACA,qBAAiB,eAAe;AAAA,EACpC;AAEA,SAAO;AACX;","names":[]}