@canva/design 2.2.1-beta.2 → 2.3.0-beta.1

package/beta.d.ts

@@ -87,6 +87,11 @@ export declare type AppElementChangeHandler<A extends AppElementData> = (
          * The version number of the app.
          */
         version: number;
+        /**
+         * @beta
+         * Function to update the app element data.
+         */
+        update: (opts: AppElementOptions<A>) => Promise<void>;
       }
     | undefined,
 ) => void;
@@ -103,6 +108,12 @@ 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>;
+  /**
+   * @beta
+   * Adds a new app element to the design.
+   * @param opts - The data and placement of the app element.
+   */
+  addElement(opts: AppElementOptions<A>): Promise<void>;
   /**
    * A callback that runs when:
    *
@@ -132,6 +143,22 @@ export declare type AppElementClientConfiguration<A extends AppElementData> = {
  */
 export declare type AppElementData = Record<string, Value>;
 
+/**
+ * @beta
+ * Used to add or update an app element to the design.
+ * The update function is provided in the AppElementChangeHandler callback (registerOnElementChange).
+ */
+export declare type AppElementOptions<A extends AppElementData> = {
+  /**
+   * The data to attach to the app element.
+   */
+  data: A;
+  /**
+   * The position, dimensions, and rotation of the app element.
+   */
+  placement?: Placement;
+};
+
 /**
  * @public
  * A callback function that renders an app element based on the data it receives.
@@ -329,7 +356,7 @@ export declare interface ContentDraft<T> {
 export declare type ContentType = "richtext";
 
 /**
- * @beta
+ * @public
  * Options for configuring where content in a design should be queried from.
  */
 declare type ContextOptions = {
@@ -1204,10 +1231,10 @@ export declare type DragStartEvent<E extends Element> = Pick<
 };
 
 /**
- * @beta
+ * @public
  * Reads and edits content of the specified type from the user's design.
- * @param options - Options for configuring how the design content is read.
- * @param callback - A callback for operating on the queried content.
+ * @param options - Options for configuring how a design is read.
+ * @param callback - A callback for operating on the read content.
  */
 export declare const editContent: (
   options: EditContentOptions,
@@ -1215,7 +1242,7 @@ export declare const editContent: (
 ) => Promise<void>;
 
 /**
- * @beta
+ * @public
  * A callback for reading and updating the requested design content.
  * @param session - The result of reading the content in the design.
  */
@@ -1234,7 +1261,7 @@ export declare type EditContentCallback = (session: {
 }) => Promise<void> | void;
 
 /**
- * @beta
+ * @public
  * Options for configuring how the design content is read.
  */
 export declare type EditContentOptions = {
@@ -1671,7 +1698,7 @@ export declare type ImageRef = string & {
 };
 
 /**
- * @public
+ * @beta
  * @param appElementConfig - Configuration for an AppElementClient
  */
 export declare const initAppElement: <A extends AppElementData>(
@@ -2052,7 +2079,7 @@ export declare const requestExport: (
 ) => Promise<ExportResponse>;
 
 /**
- * @beta
+ * @public
  * Provides methods for interacting with a range of formatted text.
  */
 export declare interface RichtextContentRange extends RichtextRange {

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

@@ -12,9 +12,6 @@ _export(exports, {
     initAppElement: function() {
         return initAppElement;
     },
-    editContent: function() {
-        return editContent;
-    },
     openDesign: function() {
         return openDesign;
     }
@@ -36,6 +33,5 @@ function _export_star(from, to) {
 var _window___canva___sdkRegistration, _window___canva__;
 const { canva_sdk } = window;
 const initAppElement = canva_sdk.design.v2.designInteraction.initAppElement;
-const editContent = canva_sdk.design.v2.designInteraction.editContent;
 const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
-(_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', 'beta');
+(_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', 'beta');

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/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/beta.js

@@ -0,0 +1,18 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./index"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

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/beta.js

@@ -1,7 +1,6 @@
 var _window___canva___sdkRegistration, _window___canva__;
 const { canva_sdk } = window;
 export const initAppElement = canva_sdk.design.v2.designInteraction.initAppElement;
-export const editContent = canva_sdk.design.v2.designInteraction.editContent;
 export const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
 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', 'beta');
+(_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', 'beta');

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/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/beta.js

@@ -0,0 +1 @@
+export * from './index';

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-beta.2",
+  "version": "2.3.0-beta.1",
   "description": "The Canva Apps SDK design library",
   "author": "Canva Pty Ltd.",
   "license": "SEE LICENSE IN LICENSE.md FILE",
@@ -14,6 +14,11 @@
       "types": "./beta.d.ts",
       "require": "./lib/cjs/sdk/design/beta.js",
       "import": "./lib/esm/sdk/design/beta.js"
+    },
+    "./test": {
+      "types": "./test/beta.d.ts",
+      "require": "./lib/cjs/sdk/design/test/beta.js",
+      "import": "./lib/esm/sdk/design/test/beta.js"
     }
   },
   "typings": "./beta.d.ts"

package/test/beta.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 {};