@orangelogic/design-system 2.19.0-pr77202.21 → 2.19.0-pr77233.3

package/library/components/types.js

@@ -142036,7 +142036,7 @@ var zVt = Object.defineProperty, FVt = Object.getOwnPropertyDescriptor, Ur = (n,
 };
 let Ar = class extends Fn {
   constructor() {
-    super(), this.localize = new nr(this), this.configsController = new ca(this.localize), this.initialData = "", this.device = "desktop", this.devices = HQ, this.autoInit = !1, this.pageId = "", this.allowDuplicateBlocks = !1, this.mode = qd.Template, this.contentBuilder = null, this.ready = !1, this.editingComponent = null, this.isGalleryConfigOpen = !1, this.hoveredComponent = void 0, this.hoveredComponentPlacement = "top", this.defaultRowGap = 0, this.containerDropdowns = [], this.containerDropdownStateMap = {}, this.distance = void 0, this.toolbar = [], this.toolbarActive = !1, this.childSelected = void 0, this.mousePosition = { x: 0, y: 0 }, this._teamSpaceRoles = [], this.canvasDocument = null, this._dsm = null, this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout = null, this.initializeCustomFrame = eLt(), this.containerDropdownObservers = [], this.nextMapHoveredBadgeState = null, this.deselectAll = this.deselectAll.bind(this), this.handleCanvasClick = this.handleCanvasClick.bind(this), this.handleCanvasKeydown = this.handleCanvasKeydown.bind(this), this.handleDataSourceChange = this.handleDataSourceChange.bind(this), this.handleCanvasMouseMove = this.handleCanvasMouseMove.bind(this), this.handleTemplateManagerUpdated = this.handleTemplateManagerUpdated.bind(this), this.handleCanvasScroll = this.handleCanvasScroll.bind(this);
+    super(), this.localize = new nr(this), this.configsController = new ca(this.localize), this.initialData = "", this.device = "desktop", this.devices = HQ, this.autoInit = !1, this.pageId = "", this.allowDuplicateBlocks = !1, this.mode = qd.Template, this.contentBuilder = null, this.ready = !1, this.editingComponent = null, this.isGalleryConfigOpen = !1, this.hoveredComponent = void 0, this.hoveredComponentPlacement = "top", this.defaultRowGap = 0, this.containerDropdowns = [], this.containerDropdownStateMap = {}, this.distance = void 0, this.toolbar = [], this.toolbarActive = !1, this.childSelected = void 0, this.mousePosition = { x: 0, y: 0 }, this._teamSpaceRoles = [], this.canvasDocument = null, this._dsm = null, this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout = null, this.initializeCustomFrame = eLt(), this.containerDropdownObservers = [], this.nextMapHoveredBadgeState = null, this.deselectAll = this.deselectAll.bind(this), this.handleCanvasClick = this.handleCanvasClick.bind(this), this.handleRootToolbarRightClick = this.handleRootToolbarRightClick.bind(this), this.handleCanvasKeydown = this.handleCanvasKeydown.bind(this), this.handleDataSourceChange = this.handleDataSourceChange.bind(this), this.handleCanvasMouseMove = this.handleCanvasMouseMove.bind(this), this.handleTemplateManagerUpdated = this.handleTemplateManagerUpdated.bind(this), this.handleCanvasScroll = this.handleCanvasScroll.bind(this);
   }
   get teamSpaceRoles() {
     return this._teamSpaceRoles;
@@ -142340,6 +142340,10 @@ let Ar = class extends Fn {
     const n = this.contentBuilder?.getSelected(), e = this.childSelected;
     n && !e && this.contentBuilder?.trigger("component:selected", n), this.toggleToolbarAndBadge();
   }
+  handleRootToolbarRightClick(n) {
+    const e = n.target;
+    n.button === 2 && e instanceof Element && e.closest(".gjs-toolbar") && (n.preventDefault(), n.stopImmediatePropagation());
+  }
   handleCanvasClick(n) {
     n.target.closest("[data-cms5-page-viewer__page-content]") || this.deselectAll();
   }
@@ -142504,27 +142508,31 @@ let Ar = class extends Fn {
         return;
       this.contentBuilder.Canvas.getFrameEl().setAttribute("title", "content-builder-frame"), this.updateFrameSize(), this._teamSpaceRoles = await this.fetchTeamSpaceRoles();
     }), this.contentBuilder?.on("load", async (t) => {
-      t.UndoManager.stop();
-      const r = this.canvasDocument?.getElementById("Form1");
-      r && r.addEventListener("scroll", this.handleCanvasScroll);
+      this.contentBuilder?.getEl()?.addEventListener(
+        "mousedown",
+        this.handleRootToolbarRightClick,
+        !0
+      ), t.UndoManager.stop();
+      const i = this.canvasDocument?.getElementById("Form1");
+      i && i.addEventListener("scroll", this.handleCanvasScroll);
       try {
         t.getWrapper()?.set({
           highlightable: !1,
           hoverable: !1,
           selectable: !1
         });
-        const i = t.getWrapper(), o = t.Canvas.getBody().querySelector(
+        const o = t.getWrapper(), a = t.Canvas.getBody().querySelector(
           "[data-cms5-page-viewer]"
         );
-        if (!i)
+        if (!o)
           return;
-        let a = "12px";
-        if (o) {
-          const l = getComputedStyle(o).getPropertyValue("--row-gap").trim();
-          l && (a = l);
+        let s = "12px";
+        if (a) {
+          const c = getComputedStyle(a).getPropertyValue("--row-gap").trim();
+          c && (s = c);
         }
-        const s = Number.parseFloat(a || "12px");
-        this.defaultRowGap = Number.isFinite(s) ? s : 12, i.findType(ot.Column).length === 0 ? t.addComponents({
+        const l = Number.parseFloat(s || "12px");
+        this.defaultRowGap = Number.isFinite(l) ? l : 12, o.findType(ot.Column).length === 0 ? t.addComponents({
           copyable: !1,
           editable: !1,
           highlightable: !1,
@@ -142534,12 +142542,12 @@ let Ar = class extends Fn {
           style: {
             "--flex-content": "none",
             "--padding": "4px",
-            "--row-gap": a
+            "--row-gap": s
           },
           toolbar: [],
           type: ot.Column
-        }) : i.findType(ot.Column)?.forEach((l, c) => {
-          c === 0 && l.set({
+        }) : o.findType(ot.Column)?.forEach((c, d) => {
+          d === 0 && c.set({
             copyable: !1,
             editable: !1,
             highlightable: !1,
@@ -142549,14 +142557,14 @@ let Ar = class extends Fn {
             style: {
               "--flex-content": "none",
               "--padding": "4px",
-              "--row-gap": a
+              "--row-gap": s
             }
-          }), l.set({
+          }), c.set({
             draggable: '[data-gjs-type="BlockColumns"]',
             droppable: '[data-gjs-type="BlockButton"], [data-gjs-type="BlockColumns"], [data-gjs-type="BlockDivider"], [data-gjs-type="BlockHeader"], [data-gjs-type="BlockImage"], [data-gjs-type="BlockText"], [data-gjs-type="BlockVideo"], [data-gjs-type="BlockFontKit"], [data-gjs-type="BlockCarousel"], [data-gjs-type="BlockGallery"], [data-gjs-type="BlockTabs"], [data-gjs-type="BlockAccordion"], [data-gjs-type="BlockSearchBox"], [data-gjs-type="BlockColorSwatches"]'
           });
-        }), this.dsm?.getAll().forEach((l) => {
-          l.records.on("add", this.handleDataSourceChange);
+        }), this.dsm?.getAll().forEach((c) => {
+          c.records.on("add", this.handleDataSourceChange);
         }), this.updateDataSourceEntries(), this.resetDirtyCount();
       } finally {
         t.UndoManager.start();
@@ -142731,12 +142739,17 @@ let Ar = class extends Fn {
         "cx-template-manager-updated",
         this.handleTemplateManagerUpdated
       );
-      const n = this.canvasDocument?.getElementById("Form1");
-      n && n.removeEventListener("scroll", this.handleCanvasScroll);
+      const e = this.canvasDocument?.getElementById("Form1");
+      e && e.removeEventListener("scroll", this.handleCanvasScroll);
     }
-    this.contentBuilder?.destroy(), this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout && clearTimeout(this.newlyAddedComponentTimeout);
-    for (const n of this.containerDropdownObservers)
-      n.disconnect?.();
+    const n = this.contentBuilder?.getEl();
+    n && n.removeEventListener(
+      "mousedown",
+      this.handleRootToolbarRightClick,
+      !0
+    ), this.contentBuilder?.destroy(), this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout && clearTimeout(this.newlyAddedComponentTimeout);
+    for (const e of this.containerDropdownObservers)
+      e.disconnect?.();
     this.containerDropdownObservers = [];
   }
   handleBuilderPropsChange() {

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.19.0-pr77202.21",
+  "version": "2.19.0-pr77233.3",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/organisms/src/content-builder/content-builder.d.ts

@@ -210,6 +210,7 @@ export default class CxContentBuilder extends CortexElement {
     private handleCanvasMouseMove;
     private handleCanvasScroll;
     private handleHorizontalScroll;
+    private handleRootToolbarRightClick;
     private handleCanvasClick;
     private handleCanvasKeydown;
     private handleTemplateManagerUpdated;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.19.0-pr77202.21",
+  "version": "2.19.0-pr77233.3",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {