@canva/design 2.2.1 → 2.3.0

package/index.d.ts

@@ -10,7 +10,7 @@ export declare const addAudioTrack: (audioTrack: AudioTrack) => Promise<void>;
  * Add element to responsive documents, which slot things into a text stream
  */
 export declare const addElementAtCursor: (
-  element: ElementAtCursor
+  element: ElementAtCursor,
 ) => Promise<void>;
 
 /**
@@ -18,7 +18,7 @@ export declare const addElementAtCursor: (
  * Add element to fixed designs, which use a coordinate-based positioning system.
  */
 export declare const addElementAtPoint: (
-  element: DesignElement | ElementAtPoint
+  element: DesignElement | ElementAtPoint,
 ) => Promise<void>;
 
 /**
@@ -28,7 +28,7 @@ export declare const addElementAtPoint: (
  * @param element - The element to add to the user's design.
  */
 export declare const addNativeElement: (
-  element: NativeElement | NativeElementWithBox
+  element: NativeElement | NativeElementWithBox,
 ) => Promise<void>;
 
 /**
@@ -88,7 +88,7 @@ export declare type AppElementChangeHandler<A extends AppElementData> = (
          */
         version: number;
       }
-    | undefined
+    | undefined,
 ) => void;
 
 /**
@@ -103,6 +103,7 @@ export declare interface AppElementClient<A extends AppElementData> {
    * @param placement - The position, dimensions, and rotation of the app element.
    */
   addOrUpdateElement(appElementData: A, placement?: Placement): Promise<void>;
+
   /**
    * A callback that runs when:
    *
@@ -138,7 +139,7 @@ export declare type AppElementData = Record<string, Value>;
  * @param appElementData - The data the callback must use to render the app element.
  */
 export declare type AppElementRenderer<A extends AppElementData> = (
-  appElementData: A
+  appElementData: A,
 ) => AppElementRendererOutput;
 
 /**
@@ -328,6 +329,14 @@ export declare interface ContentDraft<T> {
  */
 export declare type ContentType = "richtext";
 
+/**
+ * @public
+ * Options for configuring where content in a design should be queried from.
+ */
+declare type ContextOptions = {
+  target: "current_page";
+};
+
 /**
  * @public
  * A set of X and Y coordinates.
@@ -440,37 +449,55 @@ export declare type Dimensions = {
 
 /**
  * @public
- * Callbacks for handling drag and drop events.
+ * An event that occurs when a user starts dragging an HTML element.
  */
-export declare type DragCallback = {
-  /**
-   * A callback that runs at the start of a drag event.
-   * @param element - The element being dragged.
-   */
-  onDragStart: (element: HTMLElement) => void;
-  /**
-   * A callback that runs at the end of a drag event.
-   * @param element - The element being dragged.
-   */
-  onDragEnd: (element: HTMLElement) => void;
+export declare type DragStartEvent<E extends Element> = Pick<
+  DragEvent,
+  "dataTransfer" | "currentTarget" | "preventDefault" | "clientX" | "clientY"
+> & {
+  currentTarget: E;
 };
 
 /**
  * @public
- * Options for adding drag and drop behavior to an `HTMLElement`.
+ * Reads and edits content of the specified type from the user's design.
+ * @param options - Options for configuring how a design is read.
+ * @param callback - A callback for operating on the read content.
  */
-export declare type DraggableElementData = ElementData | ImageElementData;
+export declare const editContent: (
+  options: EditContentOptions,
+  callback: EditContentCallback,
+) => Promise<void>;
 
 /**
  * @public
- * An event that occurs when a user starts dragging an HTML element.
+ * A callback for reading and updating the requested design content.
+ * @param session - The result of reading the content in the design.
  */
-export declare type DragStartEvent<E extends Element> = Pick<
-  DragEvent,
-  "dataTransfer" | "currentTarget" | "preventDefault" | "clientX" | "clientY"
-> & {
-  currentTarget: E;
-};
+export declare type EditContentCallback = (session: {
+  /**
+   * The individual content items returned by a query.
+   */
+  readonly contents: readonly RichtextContentRange[];
+  /**
+   * Commits any changes made to the items in the `contents` array.
+   *
+   * @remarks
+   * An app must call this method for any changes to be reflected in the user's design.
+   */
+  sync(): Promise<void>;
+}) => Promise<void> | void;
+
+/**
+ * @public
+ * Options for configuring how the design content is read.
+ */
+export declare type EditContentOptions = {
+  /**
+   * The type of content to edit from the user's design
+   */
+  contentType: ContentType;
+} & ContextOptions;
 
 /**
  * @public
@@ -497,17 +524,6 @@ export declare type ElementAtPoint =
   | GroupElementAtPoint
   | RichtextElementAtPoint;
 
-/**
- * @public
- * Options for adding drag and drop behavior to an `HTMLElement`.
- */
-export declare type ElementData = DragCallback & {
-  /**
-   * The `HTMLElement` to be made draggable.
-   */
-  node: HTMLElement;
-};
-
 /**
  * @public
  * Embed element to be added to the design at the end of a drag event.
@@ -843,6 +859,9 @@ export declare type ImageElement = {
   type: "image";
   /**
    * A description of the image content.
+   *
+   * @remarks
+   * Use `undefined` for content with no description.
    */
   altText: AltText | undefined;
 } & (
@@ -876,17 +895,6 @@ export declare type ImageElementAtPoint = ImageElement &
   Point &
   (WidthAndHeight | Width | Height);
 
-/**
- * @public
- * Options for adding drag and drop behavior to an `HTMLImageElement`.
- */
-export declare type ImageElementData = DragCallback & {
-  /**
-   * The `HTMLImageElement` to be made draggable.
-   */
-  node: HTMLImageElement;
-};
-
 /**
  * @public
  * An image asset that fills a path's interior.
@@ -900,6 +908,13 @@ export declare type ImageFill = {
    * A unique identifier that points to an image asset in Canva's backend.
    */
   ref: ImageRef;
+  /**
+   * A description of the image content.
+   *
+   * @remarks
+   * Use `undefined` for content with no description.
+   */
+  altText?: AltText;
 };
 
 /**
@@ -915,7 +930,7 @@ export declare type ImageRef = string & {
  * @param appElementConfig - Configuration for an AppElementClient
  */
 export declare const initAppElement: <A extends AppElementData>(
-  appElementConfig: AppElementClientConfiguration<A>
+  appElementConfig: AppElementClientConfiguration<A>,
 ) => AppElementClient<A>;
 
 /**
@@ -1271,9 +1286,20 @@ declare type Primitive = undefined | null | number | boolean | string;
  * @param request - The request object containing configurations of the design export.
  */
 export declare const requestExport: (
-  request: ExportRequest
+  request: ExportRequest,
 ) => Promise<ExportResponse>;
 
+/**
+ * @public
+ * Provides methods for interacting with a range of formatted text.
+ */
+export declare interface RichtextContentRange extends RichtextRange {
+  /**
+   * Indicates whether the object containing this richtext range has been deleted.
+   */
+  readonly deleted: boolean;
+}
+
 /**
  * @public
  * An element that renders richtext content.
@@ -1381,7 +1407,7 @@ export declare type RichtextRange = {
    */
   appendText(
     characters: string,
-    formatting?: InlineFormatting
+    formatting?: InlineFormatting,
   ): {
     bounds: Bounds;
   };
@@ -1395,7 +1421,7 @@ export declare type RichtextRange = {
   replaceText(
     bounds: Bounds,
     characters: string,
-    formatting?: InlineFormatting
+    formatting?: InlineFormatting,
   ): {
     /**
      * The bounds of the replacement characters within the updated range.
@@ -1533,7 +1559,7 @@ export declare type SelectionValue<Scope extends SelectionScope> = {
  * an image or a video.
  */
 export declare const setCurrentPageBackground: (
-  opts: PageBackgroundFill
+  opts: PageBackgroundFill,
 ) => Promise<void>;
 
 /**
@@ -1770,7 +1796,7 @@ export declare type TextElement = {
  * @public
  * An element that renders text content and has positional properties.
  */
-export declare type TextElementAtPoint = TextElement & TextAttributes & TextBox;
+export declare type TextElementAtPoint = TextElement & TextBox;
 
 /**
  * @public
@@ -1807,7 +1833,7 @@ export declare interface UI {
       | AudioDragConfig
       | EmbedDragConfig
       | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>
+      | ImageDragConfigForElement<E>,
   ): Promise<void>;
   /**
    * @public
@@ -1823,7 +1849,7 @@ export declare interface UI {
       | AudioDragConfig
       | EmbedDragConfig
       | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>
+      | ImageDragConfigForElement<E>,
   ): Promise<void>;
   /**
    * @public
@@ -1837,7 +1863,7 @@ export declare interface UI {
     dragData:
       | EmbedDragConfig
       | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>
+      | ImageDragConfigForElement<E>,
   ): Promise<void>;
 }
 
@@ -1917,6 +1943,9 @@ export declare type VideoElement = {
   ref: VideoRef;
   /**
    * A description of the video content.
+   *
+   * @remarks
+   * Use `undefined` for content with no description.
    */
   altText: AltText | undefined;
 };
@@ -1942,6 +1971,13 @@ export declare type VideoFill = {
    * A unique identifier that points to a video asset in Canva's backend.
    */
   ref: VideoRef;
+  /**
+   * A description of the image content.
+   *
+   * @remarks
+   * Use `undefined` for content with no description.
+   */
+  altText?: AltText;
 };
 
 /**

package/lib/cjs/sdk/design/fake/create.js

@@ -0,0 +1,27 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createFakeDesignClients", {
+    enumerable: true,
+    get: function() {
+        return createFakeDesignClients;
+    }
+});
+const _synthetic_delay = require('../../utils/synthetic_delay');
+const _fake_design_interaction_client = require("./fake_design_interaction_client");
+const _fake_drag_and_drop_client = require("./fake_drag_and_drop_client");
+const _fake_export_client = require("./fake_export_client");
+function createFakeDesignClients() {
+    const syntheticDelay = (0, _synthetic_delay.createSyntheticDelay)(10);
+    const v2 = {
+        designInteraction: new _fake_design_interaction_client.FakeDesignInteractionClient(syntheticDelay),
+        dragAndDrop: new _fake_drag_and_drop_client.FakeDragAndDropClient(syntheticDelay),
+        export: new _fake_export_client.FakeExportClient(syntheticDelay)
+    };
+    return {
+        design: {
+            v2
+        }
+    };
+}

package/lib/cjs/sdk/design/fake/fake_design_interaction_client.js

@@ -0,0 +1,217 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FakeDesignInteractionClient", {
+    enumerable: true,
+    get: function() {
+        return FakeDesignInteractionClient;
+    }
+});
+class FakeDesignInteractionClient {
+    async getDesignToken() {
+        await this.delay();
+        return {
+            token: 'token'
+        };
+    }
+    async addNativeElement(element) {
+        await this.delay();
+    }
+    async addElementAtPoint(element) {
+        await this.delay();
+    }
+    async addElementAtCursor(element) {
+        await this.delay();
+    }
+    async addAudioTrack(audioTrack) {
+        await this.delay();
+    }
+    async addPage(opts) {
+        await this.delay();
+    }
+    async setCurrentPageBackground(opts) {
+        await this.delay();
+    }
+    async setAppElementData(appElementData, placement) {
+        await this.delay();
+    }
+    onAppElementChange(handler) {}
+    async addAppElement(opts) {
+        await this.delay();
+    }
+    async updateAppElement(opts) {
+        await this.delay();
+    }
+    onAppElementDrop(handler) {}
+    onAppElementCreateFromPreset(handler) {}
+    registerRenderAppElement(renderAppElement) {}
+    async getCurrentPageContext() {
+        await this.delay();
+        return {
+            dimensions: fakePageDimensions
+        };
+    }
+    async getDefaultPageDimensions() {
+        await this.delay();
+        return fakePageDimensions;
+    }
+    initAppElement(appElementConfig) {
+        return {
+            addOrUpdateElement: async ()=>{
+                await this.delay();
+            },
+            registerOnElementChange: (handler)=>{},
+            addElement: async (opts)=>{
+                await this.delay();
+            }
+        };
+    }
+    createRichtextRange() {
+        return fakeRichtextRange;
+    }
+    async editContent(options, callback) {
+        await this.delay();
+        await callback({
+            contents: [],
+            sync: async ()=>{
+                await this.delay();
+            }
+        });
+    }
+    async openDesign(options, callback) {
+        await this.delay();
+        await callback({
+            page: fakePage,
+            save: async ()=>{
+                await this.delay();
+            }
+        }, {
+            elementBuilder: fakeElementBuilder
+        });
+    }
+    constructor(delay){
+        this.delay = delay;
+        this.selection = {
+            registerOnChange: (e)=>{
+                return ()=>{};
+            }
+        };
+        this.overlay = {
+            registerOnCanOpen: (e)=>{
+                return ()=>{};
+            }
+        };
+    }
+}
+const fakeBounds = {
+    index: 0,
+    length: 12
+};
+const fakeTextRegion = {
+    text: 'Hello World!',
+    formatting: {
+        fontWeight: 'bold'
+    }
+};
+const fakeRichtextRange = {
+    formatParagraph: ()=>{},
+    formatText: ()=>{},
+    appendText: ()=>{
+        return {
+            bounds: fakeBounds
+        };
+    },
+    replaceText: ()=>{
+        return {
+            bounds: fakeBounds
+        };
+    },
+    readPlaintext: ()=>'',
+    readTextRegions: ()=>[
+            fakeTextRegion
+        ]
+};
+const fakePageDimensions = {
+    width: 800,
+    height: 600
+};
+const fakeFill = {
+    media: undefined,
+    color: {
+        type: 'solid',
+        color: '#FFFFFF'
+    }
+};
+const fakePage = {
+    type: 'fixed',
+    locked: false,
+    dimensions: fakePageDimensions,
+    background: fakeFill,
+    elements: {
+        count: ()=>0,
+        toArray: ()=>[],
+        insertBefore: (ref)=>ref,
+        insertAfter: (ref)=>ref,
+        forEach: (callback)=>{},
+        filter: (filter)=>[],
+        moveBefore: (item)=>{},
+        moveAfter: (item)=>{},
+        delete: (item)=>{}
+    }
+};
+const fakeElement = {
+    top: 0,
+    left: 0,
+    rotation: 0,
+    transparency: 0,
+    locked: true,
+    width: 100,
+    height: 100
+};
+const fakeRectElement = {
+    ...fakeElement,
+    type: 'rect',
+    fill: fakeFill,
+    stroke: {
+        weight: 10,
+        color: fakeFill.color
+    }
+};
+const fakeShapeElement = {
+    ...fakeElement,
+    type: 'shape',
+    viewBox: {
+        top: 0,
+        left: 0,
+        width: 100,
+        height: 100
+    },
+    paths: {
+        count: ()=>0,
+        toArray: ()=>[],
+        forEach: (callback)=>{},
+        filter: (filter)=>[]
+    }
+};
+const fakeEmbedElement = {
+    ...fakeElement,
+    type: 'embed',
+    url: 'https://canva.dev/docs/apps/testing/'
+};
+const fakeTextElement = {
+    ...fakeElement,
+    type: 'text',
+    text: fakeRichtextRange
+};
+function cloneElement(element) {
+    return fakeRectElement;
+}
+const fakeElementBuilder = {
+    createRectElement: (opts)=>fakeRectElement,
+    createShapeElement: (opts)=>fakeShapeElement,
+    createEmbedElement: (opts)=>fakeEmbedElement,
+    createTextElement: (opts)=>fakeTextElement,
+    createRichtextRange: ()=>fakeRichtextRange,
+    cloneElement
+};

package/lib/cjs/sdk/design/fake/fake_drag_and_drop_client.js

@@ -0,0 +1,24 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FakeDragAndDropClient", {
+    enumerable: true,
+    get: function() {
+        return FakeDragAndDropClient;
+    }
+});
+class FakeDragAndDropClient {
+    async startDrag(event, dragData) {
+        await this.delay();
+    }
+    async startDragToPoint(event, dragData) {
+        await this.delay();
+    }
+    async startDragToCursor(event, dragData) {
+        await this.delay();
+    }
+    constructor(delay){
+        this.delay = delay;
+    }
+}

package/lib/cjs/sdk/design/fake/fake_export_client.js

@@ -0,0 +1,34 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FakeExportClient", {
+    enumerable: true,
+    get: function() {
+        return FakeExportClient;
+    }
+});
+class FakeExportClient {
+    async queueDocument(request) {
+        await this.delay();
+        return {
+            status: 'completed',
+            exportBlobs: fakeExportBlobs
+        };
+    }
+    async requestExport(request) {
+        await this.delay();
+        return {
+            status: 'completed',
+            exportBlobs: fakeExportBlobs
+        };
+    }
+    constructor(delay){
+        this.delay = delay;
+    }
+}
+const fakeExportBlobs = [
+    {
+        url: 'https://canva.dev/docs/apps/testing/'
+    }
+];

package/lib/cjs/sdk/design/index.js

@@ -17,4 +17,4 @@ function _export_star(from, to) {
     return from;
 }
 var _window___canva___sdkRegistration, _window___canva__;
-(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.2.1', 'ga');
+(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.3.0', 'ga');

package/lib/cjs/sdk/design/public.js

@@ -53,6 +53,9 @@ _export(exports, {
     },
     createRichtextRange: function() {
         return createRichtextRange;
+    },
+    editContent: function() {
+        return editContent;
     }
 });
 const { canva_sdk } = window;
@@ -71,3 +74,4 @@ const getCurrentPageContext = canva_sdk.design.v2.designInteraction.getCurrentPa
 const initAppElement = canva_sdk.design.v2.designInteraction.initAppElement;
 const getDesignToken = canva_sdk.design.v2.designInteraction.getDesignToken;
 const createRichtextRange = canva_sdk.design.v2.designInteraction.createRichtextRange;
+const editContent = canva_sdk.design.v2.designInteraction.editContent;

package/lib/cjs/sdk/design/test/index.js

@@ -0,0 +1,16 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "initTestEnvironment", {
+    enumerable: true,
+    get: function() {
+        return initTestEnvironment;
+    }
+});
+const _create = require('../fake/create');
+const _canva_sdk = require('../../utils/canva_sdk');
+function initTestEnvironment() {
+    (0, _canva_sdk.assertIsTestCanvaSdk)();
+    (0, _canva_sdk.injectFakeAPIClients)((0, _create.createFakeDesignClients)());
+}

package/lib/cjs/sdk/utils/canva_sdk.js

@@ -0,0 +1,41 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getCanvaSdk: function() {
+        return getCanvaSdk;
+    },
+    assertIsTestCanvaSdk: function() {
+        return assertIsTestCanvaSdk;
+    },
+    injectFakeAPIClients: function() {
+        return injectFakeAPIClients;
+    }
+});
+function getCanvaSdk() {
+    return window.canva_sdk;
+}
+function assertIsTestCanvaSdk() {
+    var _window___canva__;
+    if ((_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : _window___canva__.uiKit) {
+        var _getCanvaSdk_error, _getCanvaSdk;
+        const CanvaError = (_getCanvaSdk = getCanvaSdk()) === null || _getCanvaSdk === void 0 ? void 0 : (_getCanvaSdk_error = _getCanvaSdk.error) === null || _getCanvaSdk_error === void 0 ? void 0 : _getCanvaSdk_error.v2.CanvaError;
+        throw new CanvaError({
+            code: 'failed_precondition',
+            message: "Canva App SDK: You're attempting to call `initTestEnvironment` in a non-test environment, such as in production. This method should be called in test environments, once and only once. For more info refer to https://canva.dev/docs/apps/testing/"
+        });
+    }
+}
+function injectFakeAPIClients(clients) {
+    window.canva_sdk = {
+        ...getCanvaSdk(),
+        ...clients
+    };
+}

package/lib/cjs/sdk/utils/synthetic_delay.js

@@ -0,0 +1,13 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createSyntheticDelay", {
+    enumerable: true,
+    get: function() {
+        return createSyntheticDelay;
+    }
+});
+function createSyntheticDelay(timeout) {
+    return ()=>new Promise((res)=>setTimeout(res, timeout));
+}

package/lib/esm/sdk/design/fake/create.js

@@ -0,0 +1,17 @@
+import { createSyntheticDelay } from '../../utils/synthetic_delay';
+import { FakeDesignInteractionClient } from './fake_design_interaction_client';
+import { FakeDragAndDropClient } from './fake_drag_and_drop_client';
+import { FakeExportClient } from './fake_export_client';
+export function createFakeDesignClients() {
+    const syntheticDelay = createSyntheticDelay(10);
+    const v2 = {
+        designInteraction: new FakeDesignInteractionClient(syntheticDelay),
+        dragAndDrop: new FakeDragAndDropClient(syntheticDelay),
+        export: new FakeExportClient(syntheticDelay)
+    };
+    return {
+        design: {
+            v2
+        }
+    };
+}

package/lib/esm/sdk/design/fake/fake_design_interaction_client.js

@@ -0,0 +1,207 @@
+export class FakeDesignInteractionClient {
+    async getDesignToken() {
+        await this.delay();
+        return {
+            token: 'token'
+        };
+    }
+    async addNativeElement(element) {
+        await this.delay();
+    }
+    async addElementAtPoint(element) {
+        await this.delay();
+    }
+    async addElementAtCursor(element) {
+        await this.delay();
+    }
+    async addAudioTrack(audioTrack) {
+        await this.delay();
+    }
+    async addPage(opts) {
+        await this.delay();
+    }
+    async setCurrentPageBackground(opts) {
+        await this.delay();
+    }
+    async setAppElementData(appElementData, placement) {
+        await this.delay();
+    }
+    onAppElementChange(handler) {}
+    async addAppElement(opts) {
+        await this.delay();
+    }
+    async updateAppElement(opts) {
+        await this.delay();
+    }
+    onAppElementDrop(handler) {}
+    onAppElementCreateFromPreset(handler) {}
+    registerRenderAppElement(renderAppElement) {}
+    async getCurrentPageContext() {
+        await this.delay();
+        return {
+            dimensions: fakePageDimensions
+        };
+    }
+    async getDefaultPageDimensions() {
+        await this.delay();
+        return fakePageDimensions;
+    }
+    initAppElement(appElementConfig) {
+        return {
+            addOrUpdateElement: async ()=>{
+                await this.delay();
+            },
+            registerOnElementChange: (handler)=>{},
+            addElement: async (opts)=>{
+                await this.delay();
+            }
+        };
+    }
+    createRichtextRange() {
+        return fakeRichtextRange;
+    }
+    async editContent(options, callback) {
+        await this.delay();
+        await callback({
+            contents: [],
+            sync: async ()=>{
+                await this.delay();
+            }
+        });
+    }
+    async openDesign(options, callback) {
+        await this.delay();
+        await callback({
+            page: fakePage,
+            save: async ()=>{
+                await this.delay();
+            }
+        }, {
+            elementBuilder: fakeElementBuilder
+        });
+    }
+    constructor(delay){
+        this.delay = delay;
+        this.selection = {
+            registerOnChange: (e)=>{
+                return ()=>{};
+            }
+        };
+        this.overlay = {
+            registerOnCanOpen: (e)=>{
+                return ()=>{};
+            }
+        };
+    }
+}
+const fakeBounds = {
+    index: 0,
+    length: 12
+};
+const fakeTextRegion = {
+    text: 'Hello World!',
+    formatting: {
+        fontWeight: 'bold'
+    }
+};
+const fakeRichtextRange = {
+    formatParagraph: ()=>{},
+    formatText: ()=>{},
+    appendText: ()=>{
+        return {
+            bounds: fakeBounds
+        };
+    },
+    replaceText: ()=>{
+        return {
+            bounds: fakeBounds
+        };
+    },
+    readPlaintext: ()=>'',
+    readTextRegions: ()=>[
+            fakeTextRegion
+        ]
+};
+const fakePageDimensions = {
+    width: 800,
+    height: 600
+};
+const fakeFill = {
+    media: undefined,
+    color: {
+        type: 'solid',
+        color: '#FFFFFF'
+    }
+};
+const fakePage = {
+    type: 'fixed',
+    locked: false,
+    dimensions: fakePageDimensions,
+    background: fakeFill,
+    elements: {
+        count: ()=>0,
+        toArray: ()=>[],
+        insertBefore: (ref)=>ref,
+        insertAfter: (ref)=>ref,
+        forEach: (callback)=>{},
+        filter: (filter)=>[],
+        moveBefore: (item)=>{},
+        moveAfter: (item)=>{},
+        delete: (item)=>{}
+    }
+};
+const fakeElement = {
+    top: 0,
+    left: 0,
+    rotation: 0,
+    transparency: 0,
+    locked: true,
+    width: 100,
+    height: 100
+};
+const fakeRectElement = {
+    ...fakeElement,
+    type: 'rect',
+    fill: fakeFill,
+    stroke: {
+        weight: 10,
+        color: fakeFill.color
+    }
+};
+const fakeShapeElement = {
+    ...fakeElement,
+    type: 'shape',
+    viewBox: {
+        top: 0,
+        left: 0,
+        width: 100,
+        height: 100
+    },
+    paths: {
+        count: ()=>0,
+        toArray: ()=>[],
+        forEach: (callback)=>{},
+        filter: (filter)=>[]
+    }
+};
+const fakeEmbedElement = {
+    ...fakeElement,
+    type: 'embed',
+    url: 'https://canva.dev/docs/apps/testing/'
+};
+const fakeTextElement = {
+    ...fakeElement,
+    type: 'text',
+    text: fakeRichtextRange
+};
+function cloneElement(element) {
+    return fakeRectElement;
+}
+const fakeElementBuilder = {
+    createRectElement: (opts)=>fakeRectElement,
+    createShapeElement: (opts)=>fakeShapeElement,
+    createEmbedElement: (opts)=>fakeEmbedElement,
+    createTextElement: (opts)=>fakeTextElement,
+    createRichtextRange: ()=>fakeRichtextRange,
+    cloneElement
+};

package/lib/esm/sdk/design/fake/fake_drag_and_drop_client.js

@@ -0,0 +1,14 @@
+export class FakeDragAndDropClient {
+    async startDrag(event, dragData) {
+        await this.delay();
+    }
+    async startDragToPoint(event, dragData) {
+        await this.delay();
+    }
+    async startDragToCursor(event, dragData) {
+        await this.delay();
+    }
+    constructor(delay){
+        this.delay = delay;
+    }
+}

package/lib/esm/sdk/design/fake/fake_export_client.js

@@ -0,0 +1,24 @@
+export class FakeExportClient {
+    async queueDocument(request) {
+        await this.delay();
+        return {
+            status: 'completed',
+            exportBlobs: fakeExportBlobs
+        };
+    }
+    async requestExport(request) {
+        await this.delay();
+        return {
+            status: 'completed',
+            exportBlobs: fakeExportBlobs
+        };
+    }
+    constructor(delay){
+        this.delay = delay;
+    }
+}
+const fakeExportBlobs = [
+    {
+        url: 'https://canva.dev/docs/apps/testing/'
+    }
+];

package/lib/esm/sdk/design/index.js

@@ -1,3 +1,3 @@
 var _window___canva___sdkRegistration, _window___canva__;
 export * from './public';
-(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.2.1', 'ga');
+(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.3.0', 'ga');

package/lib/esm/sdk/design/public.js

@@ -14,3 +14,4 @@ export const getCurrentPageContext = canva_sdk.design.v2.designInteraction.getCu
 export const initAppElement = canva_sdk.design.v2.designInteraction.initAppElement;
 export const getDesignToken = canva_sdk.design.v2.designInteraction.getDesignToken;
 export const createRichtextRange = canva_sdk.design.v2.designInteraction.createRichtextRange;
+export const editContent = canva_sdk.design.v2.designInteraction.editContent;

package/lib/esm/sdk/design/test/index.js

@@ -0,0 +1,6 @@
+import { createFakeDesignClients } from '../fake/create';
+import { assertIsTestCanvaSdk, injectFakeAPIClients } from '../../utils/canva_sdk';
+export function initTestEnvironment() {
+    assertIsTestCanvaSdk();
+    injectFakeAPIClients(createFakeDesignClients());
+}

package/lib/esm/sdk/utils/canva_sdk.js

@@ -0,0 +1,20 @@
+export function getCanvaSdk() {
+    return window.canva_sdk;
+}
+export function assertIsTestCanvaSdk() {
+    var _window___canva__;
+    if ((_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : _window___canva__.uiKit) {
+        var _getCanvaSdk_error, _getCanvaSdk;
+        const CanvaError = (_getCanvaSdk = getCanvaSdk()) === null || _getCanvaSdk === void 0 ? void 0 : (_getCanvaSdk_error = _getCanvaSdk.error) === null || _getCanvaSdk_error === void 0 ? void 0 : _getCanvaSdk_error.v2.CanvaError;
+        throw new CanvaError({
+            code: 'failed_precondition',
+            message: "Canva App SDK: You're attempting to call `initTestEnvironment` in a non-test environment, such as in production. This method should be called in test environments, once and only once. For more info refer to https://canva.dev/docs/apps/testing/"
+        });
+    }
+}
+export function injectFakeAPIClients(clients) {
+    window.canva_sdk = {
+        ...getCanvaSdk(),
+        ...clients
+    };
+}

package/lib/esm/sdk/utils/synthetic_delay.js

@@ -0,0 +1,3 @@
+export function createSyntheticDelay(timeout) {
+    return ()=>new Promise((res)=>setTimeout(res, timeout));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/design",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "The Canva Apps SDK design library",
   "author": "Canva Pty Ltd.",
   "license": "SEE LICENSE IN LICENSE.md FILE",
@@ -11,14 +11,14 @@
   "module": "./lib/esm/sdk/design/index.js",
   "exports": {
     ".": {
-      "require": {
-        "types": "./index.d.ts",
-        "default": "./lib/cjs/sdk/design/index.js"
-      },
-      "import": {
-        "types": "./index.d.ts",
-        "default": "./lib/esm/sdk/design/index.js"
-      }
+      "types": "./index.d.ts",
+      "require": "./lib/cjs/sdk/design/index.js",
+      "import": "./lib/esm/sdk/design/index.js"
+    },
+    "./test": {
+      "types": "./test/index.d.ts",
+      "require": "./lib/cjs/sdk/design/test/index.js",
+      "import": "./lib/esm/sdk/design/test/index.js"
     }
   },
   "typings": "./index.d.ts"

package/test/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @public
+ * Initializes a test environment for the `@canva/design` package, enabling unit tests to mock Canva's APIs.
+ * @remarks
+ * This method should only be called once in a test environment, such as in a Jest setup file.
+ * @see
+ * https://www.canva.dev/docs/apps/testing/
+ */
+export declare function initTestEnvironment(): void;
+
+export {};