@widgetic/editor 4.1.8 → 4.1.10

package/README.md

@@ -145,6 +145,9 @@ For a page that has controls of its own around the editor:
   screen, say). The editor sends back the embed settings it loaded with every save, so without this a later save would put
   them back. Call it after `await flush()` (so no save of the editor is on its way), with the settings the API now holds.
   Nothing becomes unsaved, and the preview takes the size the settings name.
+- `adoptName(name)` is the same for a page that renames the composition itself (its own title field): the editor sends
+  back the name it loaded with every save. Call it after `await flush()`, with the name the API now holds. Text that is
+  empty is ignored. Nothing becomes unsaved.
 
 What it asks of the API (all of it is on an editor session's allow-list): `GET /compositions/{id}`,
 `GET /compositions/{id}/preview`, `GET /compositions/{id}/schema/design`, `GET /compositions/{id}/schema/content` and

package/dist/components/WidgetPreview.svelte

@@ -905,7 +905,7 @@
 		{:else if effectiveSrc || (mode === 'standalone' && isResolvingUrl)}
 			<div
 				bind:this={resizeStageEl}
-				class="{enableResize ? 'preview-resize-stage-ct absolute inset-0 overflow-hidden' : 'preview-resize-stage-ct relative flex items-center justify-center w-full h-full'}"
+				class="{enableResize ? 'preview-resize-stage-ct absolute inset-0 overflow-visible' : 'preview-resize-stage-ct relative flex items-center justify-center w-full h-full'}"
 			>
 			<div
 				class="preview-iframe-shell relative flex flex-col {enableResize ? 'preview-iframe-shell-positioned' : ''}"
@@ -914,6 +914,24 @@
 					? `position: absolute; left: ${previewShellLeft}px; top: ${previewShellTop}px; width: ${resizeWidth ? resizeWidth + 'px' : '100%'};`
 					: `width: ${resizeWidth ? resizeWidth + 'px' : '100%'}; height: ${resizeHeight ? resizeHeight + 'px' : '100%'};`} transition: {isResizing || isDraggingPreview ? 'none' : 'width 0.2s, height 0.2s, left 0.15s, top 0.15s'};"
 			>
+				{#if showResizeHandles}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="preview-resize-handle preview-resize-handle-tl" onpointerdown={(e) => startResize(e, -1, -1)}></div>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="preview-resize-handle preview-resize-handle-n" onpointerdown={(e) => startResize(e, 0, -1)}></div>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="preview-resize-handle preview-resize-handle-tr" onpointerdown={(e) => startResize(e, 1, -1)}></div>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="preview-resize-handle preview-resize-handle-w" onpointerdown={(e) => startResize(e, -1, 0)}></div>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="preview-resize-handle preview-resize-handle-e" onpointerdown={(e) => startResize(e, 1, 0)}></div>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="preview-resize-handle preview-resize-handle-bl" onpointerdown={(e) => startResize(e, -1, 1)}></div>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="preview-resize-handle preview-resize-handle-s" onpointerdown={(e) => startResize(e, 0, 1)}></div>
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="preview-resize-handle preview-resize-handle-br" onpointerdown={(e) => startResize(e, 1, 1)}></div>
+				{/if}
 				{#if showPreviewChrome}
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
@@ -955,17 +973,7 @@
 					class="preview-iframe-wrapper relative"
 					style="width: 100%; height: {resizeHeight ? resizeHeight + 'px' : '100%'};"
 				>
-				{#if showResizeHandles}
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div class="preview-resize-handle preview-resize-handle-tl" onpointerdown={(e) => startResize(e, -1, -1)}></div>
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div class="preview-resize-handle preview-resize-handle-tr" onpointerdown={(e) => startResize(e, 1, -1)}></div>
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div class="preview-resize-handle preview-resize-handle-bl" onpointerdown={(e) => startResize(e, -1, 1)}></div>
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div class="preview-resize-handle preview-resize-handle-br" onpointerdown={(e) => startResize(e, 1, 1)}></div>
-				{/if}
-
+				
 				{#if (resizeWidth || resizeHeight) && !showDimensionInputs}
 					<div
 						class="widget-preview-dimension-badge absolute left-1/2 -translate-x-1/2 text-[10px] bg-black/70 px-1.5 py-px rounded text-gray-300 select-none pointer-events-none z-20 whitespace-nowrap"
@@ -1139,10 +1147,28 @@
 	}
 
 	/* The four corner handles of the preview are on the four corners of the box, a place on the screen: the set is the same in both directions. */
-	.preview-resize-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; } /* rtl-ok: top left corner */
-	.preview-resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; } /* rtl-ok: top right corner */
+	.preview-resize-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; } /* rtl-ok: top left corner, above the top bar */
+	.preview-resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; } /* rtl-ok: top right corner, above the top bar */
 	.preview-resize-handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; } /* rtl-ok: bottom left corner */
 	.preview-resize-handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; } /* rtl-ok: bottom right corner */
+	.preview-resize-handle-n,
+	.preview-resize-handle-s {
+		width: 28px;
+		height: 8px;
+		left: 50%;
+		margin-left: -14px;
+	}
+	.preview-resize-handle-n { top: -5px; cursor: ns-resize; } /* rtl-ok: top edge, above the top bar */
+	.preview-resize-handle-s { bottom: -5px; cursor: ns-resize; }
+	.preview-resize-handle-e,
+	.preview-resize-handle-w {
+		width: 8px;
+		height: 28px;
+		top: 50%;
+		margin-top: -14px;
+	}
+	.preview-resize-handle-e { right: -5px; cursor: ew-resize; } /* rtl-ok: right edge */
+	.preview-resize-handle-w { left: -5px; cursor: ew-resize; } /* rtl-ok: left edge */
 
 	.preview-resize-handle:hover {
 		background: #eff6ff;

package/dist/components/editors/CompositionEditorApp.svelte

@@ -235,6 +235,14 @@
 		void tick().then(() => dockFloatingEditorOnce());
 	}
 
+	/**
+	 * Tells the editor that the page renamed the composition itself, so a later save does not put the name the
+	 * editor loaded back. Call it after `flush()`, with the name the API now holds.
+	 */
+	export function adoptName(name: string): void {
+		controller.adoptName(name);
+	}
+
 	// --- the preview ----------------------------------------------------------------------------------
 
 	let previewRef: {

package/dist/components/editors/CompositionEditorApp.svelte.d.ts

@@ -68,6 +68,7 @@ declare const CompositionEditorApp: $$__sveltets_2_IsomorphicComponent<{
     reload?: () => Promise<void>;
     setDeviceView?: (deviceView: "desktop" | "mobile") => void;
     adoptEmbedSettings?: (settings: Record<string, unknown>) => void;
+    adoptName?: (name: string) => void;
 }, {
     ready: CustomEvent<{
         name: string;
@@ -98,6 +99,7 @@ declare const CompositionEditorApp: $$__sveltets_2_IsomorphicComponent<{
     reload: () => Promise<void>;
     setDeviceView: (deviceView: "desktop" | "mobile") => void;
     adoptEmbedSettings: (settings: Record<string, unknown>) => void;
+    adoptName: (name: string) => void;
 }, string>;
 type CompositionEditorApp = InstanceType<typeof CompositionEditorApp>;
 export default CompositionEditorApp;

package/dist/composition/compositionEditorController.d.ts

@@ -239,6 +239,12 @@ export declare class CompositionEditorController {
      * that is replaces them.
      */
     adoptEmbedSettings(settings: unknown): void;
+    /**
+     * The page renamed the composition itself (a page can have its own title field), so the name this editor loaded,
+     * and sends back with every save, is out of date. From now on a save carries this one. Nothing becomes unsaved:
+     * the page saved it already. Call it when no save of the editor is on its way (after `flush()`).
+     */
+    adoptName(name: unknown): void;
     /** An edit was made: there is something new to save, the wait for the next autosave starts again, and so does the count of failures. */
     private markEdited;
     private hasUnsavedChanges;

package/dist/composition/compositionEditorController.js

@@ -579,6 +579,20 @@ export class CompositionEditorController {
             ...(desktop ? { previewWidth: embedWidth, previewHeight: embedHeight } : {})
         });
     }
+    /**
+     * The page renamed the composition itself (a page can have its own title field), so the name this editor loaded,
+     * and sends back with every save, is out of date. From now on a save carries this one. Nothing becomes unsaved:
+     * the page saved it already. Call it when no save of the editor is on its way (after `flush()`).
+     */
+    adoptName(name) {
+        if (this.disposed || this.state.phase !== 'ready')
+            return;
+        if (typeof name !== 'string' || name.trim() === '')
+            return;
+        if (name === this.state.name)
+            return;
+        this.patch({ name });
+    }
     /** An edit was made: there is something new to save, the wait for the next autosave starts again, and so does the count of failures. */
     markEdited() {
         this.revision += 1;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/editor",
-	"version": "4.1.8",
+	"version": "4.1.10",
 	"license": "SEE LICENSE IN LICENSE",
 	"type": "module",
 	"main": "./dist/index.js",