@canva/design 2.2.1 → 2.3.0-beta.1

package/lib/cjs/sdk/design/{index.js → beta.js}

@@ -1,7 +1,21 @@
-"use strict"
+"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, {
+    initAppElement: function() {
+        return initAppElement;
+    },
+    openDesign: function() {
+        return openDesign;
+    }
+});
 _export_star(require("./public"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
@@ -17,4 +31,7 @@ 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');
+const { canva_sdk } = window;
+const initAppElement = canva_sdk.design.v2.designInteraction.initAppElement;
+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.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/{index.js → beta.js}

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