@widgetic/editor 4.1.2 → 4.1.3

package/README.md

@@ -1,5 +1,7 @@
 ### WIDGET PROPERTIES EDITOR
 
+> **Internal building block.** This package is part of Widgetic's own apps and is not a supported integration surface. Partners: use [`@widgetic/ui-sdk`](https://www.npmjs.com/package/@widgetic/ui-sdk) instead.
+
 
 A Svelte Component Module that will be loaded and used to edit the widget properties: design and content.
 

package/dist/components/editors/CompositionEditorApp.svelte

@@ -30,6 +30,8 @@
 	import { shareTextDirection, type TextDirection } from '@widgetic/design-system/components/textDirection';
 	import { leftOnThisScreen } from '../../utils/dockPlacement';
 	import { provideEditorLanguage } from '../../i18n/language.js';
+	import type { PartnerPickFileFn } from '../../pickFileContext.js';
+	import type { StoreFileUrlFn } from '../../fileStorageUrlContext.js';
 	import PropsEditor from './PropsEditor.svelte';
 	import WidgetPreview from '../WidgetPreview.svelte';
 	import { setGoogleFontsApiKey } from '../../config';
@@ -74,6 +76,15 @@
 	 * library. Without it the files are the ones of the Widgetic library the token can see.
 	 */
 	export let mediaLibrary: MediaLibraryProvider | undefined = undefined;
+	/** When given, file fields call this instead of opening the built-in File Browser. */
+	export let pickFile: PartnerPickFileFn | undefined = undefined;
+	/** When given, resolves the url stored with a picked file (partner `mediaLibrary.urlResolver`). */
+	export let storeFileUrl: StoreFileUrlFn | undefined = undefined;
+	/**
+	 * When true, dragging or typing a preview size changes the preview on screen but does not change the embed width and
+	 * height saved with the composition.
+	 */
+	export let lockPreviewSize = false;
 	/** The key the font pickers list Google Fonts with. Without one only the fonts that need no key are listed. */
 	export let googleFontsApiKey = '';
 	/** Wait this long after the last change before saving by itself; `0` turns saving by itself off. Read once, when the editor starts. */
@@ -130,6 +141,7 @@
 		compositionId,
 		api,
 		autosaveDelayMs,
+		lockPreviewSize,
 		// The sentences the controller makes (why there is no preview) are made in the language of the moment.
 		translate: (key, values) => get(language.t)(key, values),
 		// The preview page hears about every change as it happens (and everything, once its page has loaded).
@@ -508,6 +520,8 @@
 			initialDesignValues={state.designValues}
 			initialContentValues={propsEditorContentValues}
 			mediaLibrary={mediaLibrary ?? defaultMediaLibrary}
+			{pickFile}
+			{storeFileUrl}
 			width="{EDITOR_WIDTH_PX}px"
 			height="{floatingEditorHeight}px"
 			showDragHandle={true}

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

@@ -1,6 +1,8 @@
 import { type MediaLibraryProvider } from '@widgetic/file-browser';
 import type { MessageOverrides } from '@widgetic/design-system/i18n';
 import { type TextDirection } from '@widgetic/design-system/components/textDirection';
+import type { PartnerPickFileFn } from '../../pickFileContext.js';
+import type { StoreFileUrlFn } from '../../fileStorageUrlContext.js';
 import { type TokenReason } from '../../composition/compositionApi.js';
 import { type CompositionEditorState, type EditorFailure } from '../../composition/compositionEditorController.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
@@ -32,6 +34,12 @@ declare const CompositionEditorApp: $$__sveltets_2_IsomorphicComponent<{
          * Where the file picker gets its files, when they are not the Widgetic library: the partner's own media
          * library. Without it the files are the ones of the Widgetic library the token can see.
          */ mediaLibrary?: MediaLibraryProvider | undefined;
+    /** When given, file fields call this instead of opening the built-in File Browser. */ pickFile?: PartnerPickFileFn | undefined;
+    /** When given, resolves the url stored with a picked file (partner `mediaLibrary.urlResolver`). */ storeFileUrl?: StoreFileUrlFn | undefined;
+    /**
+         * When true, dragging or typing a preview size changes the preview on screen but does not change the embed width and
+         * height saved with the composition.
+         */ lockPreviewSize?: boolean;
     /** The key the font pickers list Google Fonts with. Without one only the fonts that need no key are listed. */ googleFontsApiKey?: string;
     /** Wait this long after the last change before saving by itself; `0` turns saving by itself off. Read once, when the editor starts. */ autosaveDelayMs?: number | undefined;
     /** Writes what the layout does to the console. */ debug?: boolean;

package/dist/components/editors/PropsEditor.svelte

@@ -90,6 +90,8 @@
     } from '../../utils/shadowDom';
     import { config as appConfig } from '../../config';
     import { provideEditorMediaLibrary } from '../../mediaLibraryContext';
+    import { provideEditorPickFile, type PartnerPickFileFn } from '../../pickFileContext';
+    import { provideEditorStoreFileUrl, type StoreFileUrlFn } from '../../fileStorageUrlContext';
     import { useEditorLanguage } from '../../i18n/language';
     import type { MediaLibraryProvider } from '@widgetic/file-browser';
 
@@ -181,8 +183,14 @@
      * storage (a CMS, an S3 bucket, a DAM) can be used with no Widgetic storage at all.
      */
     export let mediaLibrary: MediaLibraryProvider | undefined = undefined;
+    /** When given, file fields call this instead of opening the built-in File Browser. */
+    export let pickFile: PartnerPickFileFn | undefined = undefined;
+    /** When given, resolves the url stored with a picked file (partner `mediaLibrary.urlResolver`). */
+    export let storeFileUrl: StoreFileUrlFn | undefined = undefined;
     // The file controls are created from the schema several components down: give them the library through context.
     provideEditorMediaLibrary(() => mediaLibrary);
+    provideEditorPickFile(() => pickFile);
+    provideEditorStoreFileUrl(() => storeFileUrl);
 
     // The words of the editor in the language of the page: the editor above this one chose it (see `provideEditorLanguage`).
     const { t } = useEditorLanguage();

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

@@ -1,4 +1,6 @@
 import type { ContentSchemaView, DesignSchemaView } from '../../schemaViews.js';
+import { type PartnerPickFileFn } from '../../pickFileContext';
+import { type StoreFileUrlFn } from '../../fileStorageUrlContext';
 import type { MediaLibraryProvider } from '@widgetic/file-browser';
 /**
      * STYLES from Widgetic Design System
@@ -52,6 +54,8 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
          * `MediaLibraryProvider` they list, upload, rename and delete through its functions instead, so a partner's own
          * storage (a CMS, an S3 bucket, a DAM) can be used with no Widgetic storage at all.
          */ mediaLibrary?: MediaLibraryProvider | undefined;
+    /** When given, file fields call this instead of opening the built-in File Browser. */ pickFile?: PartnerPickFileFn | undefined;
+    /** When given, resolves the url stored with a picked file (partner `mediaLibrary.urlResolver`). */ storeFileUrl?: StoreFileUrlFn | undefined;
     updateDesignValue?: (propertyId: string, value: any) => void;
     setPosition?: (left: number, top: number) => void;
     getPosition?: () => {

package/dist/components/ic/BrowserInputController.svelte

@@ -32,10 +32,12 @@
   import { onDestroy, tick } from 'svelte';
 
   // Shadcn UI Components
-  import { Portal, Tooltip } from '@widgetic/design-system/components';
+  import { Portal, Tooltip, showToast } from '@widgetic/design-system/components';
   import { ThumbHashImage } from "@widgetic/design-system/components";
   import { FileBrowser, setFileBrowserUploadConfig, persistentSelectStore } from '@widgetic/file-browser';
   import { useEditorMediaLibrary } from '../../mediaLibraryContext';
+  import { useEditorPickFile, type PartnerPickFile } from '../../pickFileContext';
+  import { useEditorStoreFileUrl } from '../../fileStorageUrlContext';
   import { useEditorLanguage } from '../../i18n/language';
   import type { EditorMessageKey } from '../../i18n/messages';
   import type { Translate } from '@widgetic/design-system/i18n';
@@ -74,6 +76,9 @@
   // The media library the editor above was given (a partner's own storage, for instance), read through a getter
   // because it reaches this component through context.
   const getEditorMediaLibrary = useEditorMediaLibrary();
+  const getEditorPickFile = useEditorPickFile();
+  const getEditorStoreFileUrl = useEditorStoreFileUrl();
+  let pickAbortController: AbortController | null = null;
 
   // The words of the editor in the language of the page, and the share of them that belongs to the File Browser inside it.
   const { t, fileBrowser: fileBrowserLanguage } = useEditorLanguage();
@@ -218,7 +223,56 @@
     }
   }
 
+  function acceptPatternsForField(): string[] {
+    if (!fileTypes?.length || fileTypes.includes('*')) return ['*/*'];
+    return fileTypes;
+  }
+
+  async function storedUrlFor(file: PartnerPickFile): Promise<string> {
+    const storeFileUrl = getEditorStoreFileUrl();
+    if (!storeFileUrl) return file.url;
+    try {
+      return await storeFileUrl(file);
+    } catch (error) {
+      console.warn('[editor] storeFileUrl failed; using the file url.', error);
+      return file.url;
+    }
+  }
+
+  async function applyPickedFile(selectedFile: PartnerPickFile) {
+    const url = await storedUrlFor(selectedFile);
+    const nextValue: FileValue = {
+      id: selectedFile.id,
+      file: selectedFile.name || '',
+      url,
+      hash: selectedFile.hash
+    };
+    value = nextValue;
+    onChange(nextValue);
+  }
+
   async function openFileBrowser() {
+    const pickFile = getEditorPickFile();
+    if (pickFile) {
+      pickAbortController?.abort();
+      pickAbortController = new AbortController();
+      const signal = pickAbortController.signal;
+      try {
+        const picked = await pickFile({ accept: acceptPatternsForField(), multiple: false, signal });
+        if (signal.aborted) return;
+        const selectedFile = picked?.[0];
+        if (!selectedFile) return;
+        await applyPickedFile(selectedFile);
+      } catch (error) {
+        if (signal.aborted) return;
+        const name = error instanceof Error ? error.name : '';
+        if (name === 'AbortError') return;
+        console.error('[editor] pickFile failed:', error);
+        showToast('error', $t('editor.file.pickFailed'));
+      }
+      return;
+    }
+
     try {
       syncFileBrowserUploadConfigIfEmbedded();
       // console.log('BrowserInputController: opening file browser', {
@@ -240,7 +294,7 @@
     setPortalHostInteractive(false);
   }
 
-  function handleFileBrowserSelect(event: CustomEvent<{ files?: Array<FileValue & { name?: string; thumbnail?: string }> }>) {
+  async function handleFileBrowserSelect(event: CustomEvent<{ files?: Array<FileValue & { name?: string; thumbnail?: string }> }>) {
     try {
       const selectedFile = event.detail?.files?.[0];
       if (!selectedFile) {
@@ -248,21 +302,12 @@
         return;
       }
 
-      const nextValue: FileValue = {
+      await applyPickedFile({
         id: selectedFile.id,
-        file: selectedFile.file || selectedFile.name || '',
+        name: selectedFile.name || selectedFile.file || '',
         url: selectedFile.url,
         hash: selectedFile.hash
-      };
-
-      // console.log('BrowserInputController: selected file', {
-        // id: nextValue.id,
-        // file: nextValue.file,
-        // url: nextValue.url
-      // });
-
-      value = nextValue;
-      onChange(nextValue);
+      });
       closeFileBrowser();
     } catch (error) {
       console.error('BrowserInputController: failed to select file', error);
@@ -292,6 +337,8 @@
   }
 
   onDestroy(() => {
+    pickAbortController?.abort();
+    pickAbortController = null;
     clearTimeout(showHelpTimeout);
     setPortalHostInteractive(false);
     if (audioElement) {

package/dist/composition/compositionEditorController.d.ts

@@ -148,6 +148,11 @@ export interface CompositionEditorOptions {
      * Default: English.
      */
     translate?: Translate<EditorMessageKey>;
+    /**
+     * When true, resizing the preview changes how it is drawn but never updates the embed width and height that are saved
+     * with the composition (the partner owns embed size elsewhere).
+     */
+    lockPreviewSize?: boolean;
 }
 /** What went wrong, from whatever was thrown. */
 export declare function describeFailure(error: unknown): EditorFailure;

package/dist/composition/compositionEditorController.js

@@ -515,6 +515,14 @@ export class CompositionEditorController {
         // (The preview reports the size it was just given, too: that is not a new size.)
         if (previewWidth === this.state.previewWidth && previewHeight === this.state.previewHeight)
             return;
+        if (this.options.lockPreviewSize === true) {
+            this.patch({
+                previewWidth,
+                previewHeight,
+                deviceView: 'desktop'
+            });
+            return;
+        }
         const embedChanged = previewWidth !== this.state.embedWidth || previewHeight !== this.state.embedHeight;
         this.patch({
             previewWidth,

package/dist/fileStorageUrlContext.d.ts

@@ -0,0 +1,6 @@
+import type { PartnerPickFile } from './pickFileContext';
+/** Resolves the address stored with a composition for a picked file (partner `mediaLibrary.urlResolver`). */
+export type StoreFileUrlFn = (file: PartnerPickFile) => Promise<string>;
+export type StoreFileUrlGetter = () => StoreFileUrlFn | undefined;
+export declare function provideEditorStoreFileUrl(getStoreFileUrl: StoreFileUrlGetter): void;
+export declare function useEditorStoreFileUrl(): StoreFileUrlGetter;

package/dist/fileStorageUrlContext.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+const STORE_FILE_URL_CONTEXT_KEY = Symbol.for('widgetic.editor.storeFileUrl');
+export function provideEditorStoreFileUrl(getStoreFileUrl) {
+    setContext(STORE_FILE_URL_CONTEXT_KEY, getStoreFileUrl);
+}
+export function useEditorStoreFileUrl() {
+    try {
+        return getContext(STORE_FILE_URL_CONTEXT_KEY) ?? (() => undefined);
+    }
+    catch {
+        return () => undefined;
+    }
+}

package/dist/i18n/language.d.ts

@@ -145,6 +145,7 @@ export declare const EDITOR_CATALOGS: {
         readonly 'editor.file.notFound': "File not found";
         readonly 'editor.file.emptyFolder': "Empty folder";
         readonly 'editor.file.clear': "Clear file";
+        readonly 'editor.file.pickFailed': "Could not choose a file. Try again.";
         readonly 'editor.file.dialogTitle': "Select file";
         readonly 'editor.file.closeDialog': "Close file browser";
         readonly 'editor.color.noRecent': "No recent colors";

package/dist/i18n/messages.d.ts

@@ -164,6 +164,7 @@ export declare const EDITOR_MESSAGES: {
     readonly 'editor.file.notFound': "File not found";
     readonly 'editor.file.emptyFolder': "Empty folder";
     readonly 'editor.file.clear': "Clear file";
+    readonly 'editor.file.pickFailed': "Could not choose a file. Try again.";
     readonly 'editor.file.dialogTitle': "Select file";
     readonly 'editor.file.closeDialog': "Close file browser";
     readonly 'editor.color.noRecent': "No recent colors";

package/dist/i18n/messages.js

@@ -173,6 +173,7 @@ export const EDITOR_MESSAGES = {
     'editor.file.notFound': 'File not found',
     'editor.file.emptyFolder': 'Empty folder',
     'editor.file.clear': 'Clear file',
+    'editor.file.pickFailed': 'Could not choose a file. Try again.',
     'editor.file.dialogTitle': 'Select file',
     'editor.file.closeDialog': 'Close file browser',
     // ===== Colours =====

package/dist/pickFileContext.d.ts

@@ -0,0 +1,19 @@
+/** One file the partner's picker returns (same shape as the media library's `MediaLibraryFile`). */
+export interface PartnerPickFile {
+    id: string;
+    name: string;
+    url: string;
+    mimeType?: string;
+    size?: number;
+    thumbnail?: string;
+    hash?: string;
+}
+export interface PartnerPickFileRequest {
+    accept: string[];
+    multiple: boolean;
+    signal: AbortSignal;
+}
+export type PartnerPickFileFn = (request: PartnerPickFileRequest) => Promise<PartnerPickFile[]>;
+export type PickFileGetter = () => PartnerPickFileFn | undefined;
+export declare function provideEditorPickFile(getPickFile: PickFileGetter): void;
+export declare function useEditorPickFile(): PickFileGetter;

package/dist/pickFileContext.js

@@ -0,0 +1,19 @@
+/**
+ * Hands the partner's `pickFile` hook from the editor down to file field controls.
+ *
+ * Same pattern as {@link mediaLibraryContext}: `PropsEditor` receives `pickFile`, and the file controls read it through
+ * context instead of threading a prop through the controller renderer.
+ */
+import { getContext, setContext } from 'svelte';
+const PICK_FILE_CONTEXT_KEY = Symbol.for('widgetic.editor.pickFile');
+export function provideEditorPickFile(getPickFile) {
+    setContext(PICK_FILE_CONTEXT_KEY, getPickFile);
+}
+export function useEditorPickFile() {
+    try {
+        return getContext(PICK_FILE_CONTEXT_KEY) ?? (() => undefined);
+    }
+    catch {
+        return () => undefined;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/editor",
-	"version": "4.1.2",
+	"version": "4.1.3",
 	"type": "module",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",