@canva/design 2.6.0 → 2.6.1-beta.1

package/{index.d.ts → beta.d.ts}

@@ -348,11 +348,39 @@ export declare interface ContentDraft<T> {
   save(): Promise<void>;
 }
 
+/**
+ * @beta
+ * Object for interacting with fill content (images/videos).
+ */
+export declare type ContentFill = (
+  | Omit<ImageFill, "altText">
+  | Omit<VideoFill, "altText">
+) & {
+  /**
+   * Indicates whether the fill object has been deleted.
+   */
+  deleted: boolean;
+};
+
+/**
+ * @beta
+ * Session for reading and updating fill content in a user's design.
+ */
+export declare interface ContentFillSession {
+  readonly contents: readonly ContentFill[];
+  sync(): Promise<void>;
+}
+
+/**
+ * @beta
+ */
+export declare type ContentType = "richtext" | "fill";
+
 /**
  * @public
  * A type of content that can be read from a user's design.
  */
-export declare type ContentType = "richtext";
+declare type ContentType_2 = "richtext";
 
 /**
  * @public
@@ -1792,6 +1820,15 @@ export declare namespace DesignEditing {
     | EmbedElement
     | TextElement
     | UnsupportedElement;
+  /**
+   * @public
+   * An element state that can be inserted into a page.
+   */
+  export type InsertableElementState =
+    | RectElementState
+    | ShapeElementState
+    | EmbedElementState
+    | TextElementState;
   /**
    * @public
    * A list of elements.
@@ -1816,6 +1853,10 @@ export declare namespace DesignEditing {
       ref: AbsoluteElement | undefined,
       state: RectElementState,
     ): RectElement;
+    insertBefore(
+      ref: AbsoluteElement | undefined,
+      state: InsertableElementState,
+    ): AbsoluteElement;
     insertAfter(
       ref: AbsoluteElement | undefined,
       state: EmbedElementState,
@@ -1832,6 +1873,10 @@ export declare namespace DesignEditing {
       ref: AbsoluteElement | undefined,
       state: RectElementState,
     ): RectElement;
+    insertAfter(
+      ref: AbsoluteElement | undefined,
+      state: InsertableElementState,
+    ): AbsoluteElement;
   }
 
   /**
@@ -1894,6 +1939,40 @@ export declare type DesignElement =
   | RichtextElement
   | TableElement;
 
+/**
+ * @beta
+ * Information about the design.
+ */
+export declare type DesignMetadata = {
+  /**
+   * The title of the user's design.
+   * @remarks
+   * This is optional and will be `undefined` if the user hasn't set a title.
+   */
+  title?: string;
+  /**
+   * The default dimensions that a new page will have when it is added to a design.
+   * It is possible for a user to resize a page without resizing the entire design, e.g. by clicking
+   * "Expand to Whiteboard". However, there will always be a single set of default dimensions for a
+   * design that is applied whenever a new page is created.
+   * @remarks
+   * This is optional and will be `undefined` if the design is unbounded (e.g. Whiteboard or Doc).
+   */
+  defaultPageDimensions?: PageDimensions;
+  /**
+   * The information associated with each page of the design.
+   * @remarks
+   * The order of pages is not guaranteed.
+   */
+  pageMetadata: Iterable<PageContext>;
+  /**
+   * The duration of the whole design in seconds.
+   * @remarks
+   * This is the precise value, which differs from what is displayed in the UI as duration in Canva UI is formatted differently.
+   */
+  durationInSeconds: number;
+};
+
 /**
  * @public
  * A callback for reading and updating part of a design.
@@ -2002,21 +2081,30 @@ export declare type DragStartEvent<E extends Element> = Pick<
  * @param callback - A callback for operating on the read content.
  */
 export declare const editContent: (
-  options: EditContentOptions,
-  callback: EditContentCallback,
+  options: EditContentOptions_2,
+  callback: EditContentCallback_2,
 ) => Promise<void>;
 
 /**
- * @public
+ * @beta
  * A callback for reading and updating the requested design content.
  * @param session - The result of reading the content in the design.
  */
 export declare type EditContentCallback = (
-  session: RichtextContentSession,
+  session: RichtextContentSession | ContentFillSession,
 ) => Promise<void> | void;
 
 /**
  * @public
+ * A callback for reading and updating the requested design content.
+ * @param session - The result of reading the content in the design.
+ */
+declare type EditContentCallback_2 = (
+  session: RichtextContentSession,
+) => Promise<void> | void;
+
+/**
+ * @beta
  * Options for configuring how the design content is read.
  */
 export declare type EditContentOptions = {
@@ -2026,6 +2114,17 @@ export declare type EditContentOptions = {
   contentType: ContentType;
 } & ContextOptions;
 
+/**
+ * @public
+ * Options for configuring how the design content is read.
+ */
+declare type EditContentOptions_2 = {
+  /**
+   * The type of content to edit from the user's design
+   */
+  contentType: ContentType_2;
+} & ContextOptions;
+
 /**
  * @public
  * Elements targeting a cursor are a subset of the base Element
@@ -2299,6 +2398,12 @@ export declare const getDefaultPageDimensions: () => Promise<
   Dimensions | undefined
 >;
 
+/**
+ * @beta
+ * Retrieves information about the design.
+ */
+export declare const getDesignMetadata: () => Promise<DesignMetadata>;
+
 /**
  * @public
  * Retrieves a signed JWT that contains the Design ID, App ID and User ID.
@@ -3321,6 +3426,11 @@ export declare type TextDragConfig = {
    * @defaultValue "none"
    */
   decoration?: "none" | "underline";
+  /**
+   * @beta
+   * A unique identifier that points to a font asset in Canva's backend.
+   */
+  fontRef?: FontRef;
 };
 
 /**

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

@@ -1,7 +1,13 @@
-"use strict"
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "getDesignMetadata", {
+    enumerable: true,
+    get: function() {
+        return getDesignMetadata;
+    }
+});
 _export_star(require("./public"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
@@ -17,4 +23,6 @@ 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.6.0', 'ga');
+const { canva_sdk } = window;
+const getDesignMetadata = canva_sdk.design.v2.designInteraction.getDesignMetadata;
+(_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.6.1', 'beta');

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

@@ -112,7 +112,21 @@ class FakeDesignInteractionClient {
         });
     }
     async openDesign(options, callback) {
-        throw new Error('Not yet implemented');
+        await this.delay();
+        await callback({
+            page: fakePage,
+            sync: async ()=>{
+                await this.delay();
+            },
+            helpers: {
+                elementStateBuilder: fakeElementStateBuilder,
+                group: fakeAsyncOperations.group,
+                ungroup: fakeAsyncOperations.ungroup,
+                snapshot: ()=>{
+                    return {};
+                }
+            }
+        });
     }
     constructor(delay){
         this.delay = delay;
@@ -160,3 +174,193 @@ const fakePageDimensions = {
     width: 800,
     height: 600
 };
+const fakeFill = {
+    mediaContainer: {
+        ref: undefined,
+        set (state) {}
+    },
+    colorContainer: {
+        ref: {
+            type: 'solid',
+            color: '#000000'
+        },
+        set (state) {}
+    }
+};
+const fakeColorContainer = {
+    ref: {
+        type: 'solid',
+        color: '#000000'
+    },
+    set (state) {}
+};
+const fakeElementList = {
+    forEach (callback) {},
+    delete (item) {},
+    moveAfter (ref, item) {},
+    moveBefore (ref, item) {},
+    toArray () {
+        return [
+            fakeRectElement,
+            fakeShapeElement
+        ];
+    },
+    count () {
+        return 0;
+    },
+    filter (filter) {},
+    insertAfter (ref, state) {
+        return fakeRectElement;
+    },
+    insertBefore (ref, state) {
+        return fakeRectElement;
+    }
+};
+const fakePage = {
+    type: 'absolute',
+    locked: false,
+    dimensions: fakePageDimensions,
+    background: fakeFill,
+    elements: fakeElementList
+};
+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,
+        colorContainer: fakeColorContainer
+    }
+};
+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
+};
+const fakeElementStateBuilder = {
+    createEmbedElement (opts) {
+        return fakeEmbedElement;
+    },
+    createRectElement (opts) {
+        return {
+            ...fakeRectElement,
+            fill: {
+                colorContainer: {
+                    type: 'solid',
+                    color: '#000000'
+                },
+                mediaContainer: undefined
+            },
+            stroke: {
+                weight: 10,
+                colorContainer: {
+                    type: 'solid',
+                    color: '#000000'
+                }
+            }
+        };
+    },
+    createRichtextRange () {
+        return fakeRichtextRange;
+    },
+    createShapeElement (opts) {
+        return {
+            ...fakeShapeElement,
+            paths: []
+        };
+    },
+    createTextElement (opts) {
+        return {
+            ...fakeTextElement,
+            text: {
+                regions: []
+            }
+        };
+    }
+};
+const fakeAsyncOperations = {
+    async group () {
+        const fakeGroupElement = {
+            top: 0,
+            left: 0,
+            width: 100,
+            height: 100,
+            locked: false,
+            rotation: 0,
+            transparency: 0,
+            type: 'group',
+            contents: {
+                count: ()=>0,
+                toArray: ()=>[],
+                forEach: (callback)=>{},
+                filter: (filter)=>[]
+            }
+        };
+        return fakeGroupElement;
+    },
+    async ungroup () {
+        const fakeRectElement = {
+            top: 0,
+            left: 0,
+            width: 100,
+            height: 100,
+            locked: false,
+            rotation: 0,
+            transparency: 0,
+            type: 'rect',
+            fill: {
+                mediaContainer: {
+                    set () {},
+                    ref: undefined
+                },
+                colorContainer: {
+                    set () {},
+                    ref: undefined
+                }
+            },
+            stroke: {
+                weight: 10,
+                colorContainer: {
+                    set () {},
+                    ref: {
+                        type: 'solid',
+                        color: '#000000'
+                    }
+                }
+            }
+        };
+        return [
+            fakeRectElement
+        ];
+    }
+};

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/esm/sdk/design/{index.js → beta.js}

@@ -1,3 +1,5 @@
 var _window___canva___sdkRegistration, _window___canva__;
+const { canva_sdk } = window;
+export const getDesignMetadata = canva_sdk.design.v2.designInteraction.getDesignMetadata;
 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.6.0', '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.6.1', 'beta');

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

@@ -102,7 +102,21 @@ export class FakeDesignInteractionClient {
         });
     }
     async openDesign(options, callback) {
-        throw new Error('Not yet implemented');
+        await this.delay();
+        await callback({
+            page: fakePage,
+            sync: async ()=>{
+                await this.delay();
+            },
+            helpers: {
+                elementStateBuilder: fakeElementStateBuilder,
+                group: fakeAsyncOperations.group,
+                ungroup: fakeAsyncOperations.ungroup,
+                snapshot: ()=>{
+                    return {};
+                }
+            }
+        });
     }
     constructor(delay){
         this.delay = delay;
@@ -150,3 +164,193 @@ const fakePageDimensions = {
     width: 800,
     height: 600
 };
+const fakeFill = {
+    mediaContainer: {
+        ref: undefined,
+        set (state) {}
+    },
+    colorContainer: {
+        ref: {
+            type: 'solid',
+            color: '#000000'
+        },
+        set (state) {}
+    }
+};
+const fakeColorContainer = {
+    ref: {
+        type: 'solid',
+        color: '#000000'
+    },
+    set (state) {}
+};
+const fakeElementList = {
+    forEach (callback) {},
+    delete (item) {},
+    moveAfter (ref, item) {},
+    moveBefore (ref, item) {},
+    toArray () {
+        return [
+            fakeRectElement,
+            fakeShapeElement
+        ];
+    },
+    count () {
+        return 0;
+    },
+    filter (filter) {},
+    insertAfter (ref, state) {
+        return fakeRectElement;
+    },
+    insertBefore (ref, state) {
+        return fakeRectElement;
+    }
+};
+const fakePage = {
+    type: 'absolute',
+    locked: false,
+    dimensions: fakePageDimensions,
+    background: fakeFill,
+    elements: fakeElementList
+};
+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,
+        colorContainer: fakeColorContainer
+    }
+};
+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
+};
+const fakeElementStateBuilder = {
+    createEmbedElement (opts) {
+        return fakeEmbedElement;
+    },
+    createRectElement (opts) {
+        return {
+            ...fakeRectElement,
+            fill: {
+                colorContainer: {
+                    type: 'solid',
+                    color: '#000000'
+                },
+                mediaContainer: undefined
+            },
+            stroke: {
+                weight: 10,
+                colorContainer: {
+                    type: 'solid',
+                    color: '#000000'
+                }
+            }
+        };
+    },
+    createRichtextRange () {
+        return fakeRichtextRange;
+    },
+    createShapeElement (opts) {
+        return {
+            ...fakeShapeElement,
+            paths: []
+        };
+    },
+    createTextElement (opts) {
+        return {
+            ...fakeTextElement,
+            text: {
+                regions: []
+            }
+        };
+    }
+};
+const fakeAsyncOperations = {
+    async group () {
+        const fakeGroupElement = {
+            top: 0,
+            left: 0,
+            width: 100,
+            height: 100,
+            locked: false,
+            rotation: 0,
+            transparency: 0,
+            type: 'group',
+            contents: {
+                count: ()=>0,
+                toArray: ()=>[],
+                forEach: (callback)=>{},
+                filter: (filter)=>[]
+            }
+        };
+        return fakeGroupElement;
+    },
+    async ungroup () {
+        const fakeRectElement = {
+            top: 0,
+            left: 0,
+            width: 100,
+            height: 100,
+            locked: false,
+            rotation: 0,
+            transparency: 0,
+            type: 'rect',
+            fill: {
+                mediaContainer: {
+                    set () {},
+                    ref: undefined
+                },
+                colorContainer: {
+                    set () {},
+                    ref: undefined
+                }
+            },
+            stroke: {
+                weight: 10,
+                colorContainer: {
+                    set () {},
+                    ref: {
+                        type: 'solid',
+                        color: '#000000'
+                    }
+                }
+            }
+        };
+        return [
+            fakeRectElement
+        ];
+    }
+};

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

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

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@canva/design",
-  "version": "2.6.0",
+  "version": "2.6.1-beta.1",
   "description": "The Canva Apps SDK design library",
   "author": "Canva Pty Ltd.",
   "license": "SEE LICENSE IN LICENSE.md FILE",
   "peerDependencies": {
     "@canva/error": "^2.0.0"
   },
-  "main": "./lib/cjs/sdk/design/index.js",
-  "module": "./lib/esm/sdk/design/index.js",
+  "main": "./lib/cjs/sdk/design/beta.js",
+  "module": "./lib/esm/sdk/design/beta.js",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "require": "./lib/cjs/sdk/design/index.js",
-      "import": "./lib/esm/sdk/design/index.js"
+      "types": "./beta.d.ts",
+      "require": "./lib/cjs/sdk/design/beta.js",
+      "import": "./lib/esm/sdk/design/beta.js"
     },
     "./test": {
-      "types": "./test/index.d.ts",
-      "require": "./lib/cjs/sdk/design/test/index.js",
-      "import": "./lib/esm/sdk/design/test/index.js"
+      "types": "./test/beta.d.ts",
+      "require": "./lib/cjs/sdk/design/test/beta.js",
+      "import": "./lib/esm/sdk/design/test/beta.js"
     }
   },
-  "typings": "./index.d.ts"
+  "typings": "./beta.d.ts"
 }