@umbraco-cms/backoffice 14.1.0-rc2 → 14.1.0

package/dist-cms/custom-elements.json

@@ -2810,7 +2810,7 @@
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t\\t--umb-split-panel-initial-position: 50%;\\n\\t\\t\\t--umb-split-panel-start-min-width: 0;\\n\\t\\t\\t--umb-split-panel-end-min-width: 0;\\n\\t\\t\\t--umb-split-panel-divider-touch-area-width: 20px;\\n\\t\\t\\t--umb-split-panel-divider-width: 1px;\\n\\t\\t\\t--umb-split-panel-divider-color: transparent;\\n\\t\\t\\t--umb-split-panel-slot-overflow: hidden;\\n\\t\\t}\\n\\t\\tslot {\\n\\t\\t\\toverflow: var(--umb-split-panel-slot-overflow);\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tmin-height: 0;\\n\\t\\t}\\n\\t\\t#main {\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t#divider {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 999999;\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t#divider-touch-area {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-touch-area-width);\\n\\t\\t\\ttransform: translateX(-50%);\\n\\t\\t\\tcursor: col-resize;\\n\\t\\t}\\n\\t\\t/* Do we want a line that shows the divider? */\\n\\t\\t#divider::after {\\n\\t\\t\\tcontent: '';\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 50%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-width);\\n\\t\\t\\theight: 100%;\\n\\t\\t\\ttransform: round(translateX(-50%));\\n\\t\\t\\tbackground-color: var(--umb-split-panel-divider-color);\\n\\t\\t\\tz-index: -1;\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t\\t--umb-split-panel-initial-position: 50%;\\n\\t\\t\\t--umb-split-panel-start-min-width: 0;\\n\\t\\t\\t--umb-split-panel-end-min-width: 0;\\n\\t\\t\\t--umb-split-panel-divider-touch-area-width: 20px;\\n\\t\\t\\t--umb-split-panel-divider-width: 1px;\\n\\t\\t\\t--umb-split-panel-divider-color: transparent;\\n\\t\\t\\t--umb-split-panel-slot-overflow: hidden;\\n\\t\\t}\\n\\t\\tslot {\\n\\t\\t\\toverflow: var(--umb-split-panel-slot-overflow);\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tmin-height: 0;\\n\\t\\t}\\n\\t\\t#main {\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t#divider {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 999999;\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t#divider-touch-area {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 5px;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-touch-area-width);\\n\\t\\t\\ttransform: translateX(-50%);\\n\\t\\t\\tcursor: col-resize;\\n\\t\\t}\\n\\t\\t/* Do we want a line that shows the divider? */\\n\\t\\t#divider::after {\\n\\t\\t\\tcontent: '';\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 50%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-width);\\n\\t\\t\\theight: 100%;\\n\\t\\t\\ttransform: round(translateX(-50%));\\n\\t\\t\\tbackground-color: var(--umb-split-panel-divider-color);\\n\\t\\t\\tz-index: -1;\\n\\t\\t}\\n\\t`\""
         }
       ],
       "events": [

package/dist-cms/packages/block/block/workspace/block-workspace.context.js

@@ -112,6 +112,52 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
             this.#initialLayout ??= layoutData;
             this.removeUmbControllerByAlias('observeLayoutInitially');
         }, 'observeLayoutInitially');
+        this.#observeBlockData(unique);
+        if (this.#liveEditingMode) {
+            this.#establishLiveSync();
+        }
+    }
+    async create(contentElementTypeId) {
+        await this.#retrieveBlockEntries;
+        await this.#retrieveModalContext;
+        if (!this.#blockEntries) {
+            throw new Error('Block Entries not found');
+            return;
+        }
+        if (!this.#modalContext) {
+            throw new Error('Modal Context not found');
+            return;
+        }
+        // TODO: Missing some way to append more layout data... this could be part of modal data, (or context api?)
+        this.setIsNew(true);
+        const blockCreated = await this.#blockEntries.create(contentElementTypeId, {}, this.#modalContext.data);
+        if (!blockCreated) {
+            throw new Error('Block Entries could not create block');
+        }
+        // TODO: We should investigate if it makes sense to gather
+        if (!this.#liveEditingMode) {
+            this.#layout.setValue(blockCreated.layout);
+            this.content.setData(blockCreated.content);
+            if (blockCreated.settings) {
+                this.settings.setData(blockCreated.settings);
+            }
+        }
+        else {
+            // Insert already, cause we are in live editing mode:
+            const blockInserted = await this.#blockEntries.insert(blockCreated.layout, blockCreated.content, blockCreated.settings, this.#modalContext.data);
+            if (!blockInserted) {
+                throw new Error('Block Entries could not insert block');
+            }
+            const unique = blockCreated.layout.contentUdi;
+            this.#observeBlockData(unique);
+            this.#establishLiveSync();
+        }
+    }
+    #observeBlockData(unique) {
+        if (!this.#blockEntries) {
+            throw new Error('Block Entries not found');
+            return;
+        }
         this.observe(this.#blockEntries.layoutOf(unique), (layoutData) => {
             this.#layout.setValue(layoutData);
             // Content:
@@ -142,40 +188,6 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
                 }
             }
         }, 'observeLayout');
-        if (this.#liveEditingMode) {
-            this.#establishLiveSync();
-        }
-    }
-    async create(contentElementTypeId) {
-        await this.#retrieveBlockEntries;
-        await this.#retrieveModalContext;
-        if (!this.#blockEntries) {
-            throw new Error('Block Entries not found');
-            return;
-        }
-        if (!this.#modalContext) {
-            throw new Error('Modal Context not found');
-            return;
-        }
-        // TODO: Missing some way to append more layout data... this could be part of modal data, (or context api?)
-        this.setIsNew(true);
-        const blockCreated = await this.#blockEntries.create(contentElementTypeId, {}, this.#modalContext.data);
-        if (!blockCreated) {
-            throw new Error('Block Entries could not create block');
-        }
-        this.#layout.setValue(blockCreated.layout);
-        this.content.setData(blockCreated.content);
-        if (blockCreated.settings) {
-            this.settings.setData(blockCreated.settings);
-        }
-        if (this.#liveEditingMode) {
-            // Insert already, cause we are in live editing mode:
-            const blockInserted = await this.#blockEntries.insert(blockCreated.layout, blockCreated.content, blockCreated.settings, this.#modalContext.data);
-            if (!blockInserted) {
-                throw new Error('Block Entries could not insert block');
-            }
-            this.#establishLiveSync();
-        }
     }
     #establishLiveSync() {
         this.observe(this.layout, (layoutData) => {

package/dist-cms/packages/core/components/split-panel/split-panel.element.js

@@ -242,7 +242,7 @@ let UmbSplitPanelElement = class UmbSplitPanelElement extends LitElement {
 		#divider-touch-area {
 			position: absolute;
 			top: 0;
-			left: 0;
+			left: 5px;
 			height: 100%;
 			width: var(--umb-split-panel-divider-touch-area-width);
 			transform: translateX(-50%);

package/dist-cms/packages/ufm/components/ufm-render/ufm-render.element.js

@@ -82,6 +82,7 @@ let UmbUfmRenderElement = class UmbUfmRenderElement extends UmbLitElement {
         css `
 			* {
 				max-width: 100%;
+				word-wrap: break-word;
 			}
 
 			pre {