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

package/beta.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 | TableElement
+  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 | TableElement | RichtextElement
+  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;
 
 /**
@@ -138,14 +138,14 @@ 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;
 
 /**
  * @public
  * An array of one or more elements to render as output of an app element.
  */
-export declare type AppElementRendererOutput = NativeSimpleElementWithBox[];
+export declare type AppElementRendererOutput = GroupContentAtPoint[];
 
 /**
  * @public
@@ -225,7 +225,7 @@ export declare type Bounds = {
  * @remarks
  * The position and dimensions are relative to the container.
  */
-export declare type Box = Position & (WidthAndHeight | Width | Height);
+export declare type Box = Point & (WidthAndHeight | Width | Height);
 
 /**
  * @public
@@ -333,7 +333,7 @@ export declare type ContentType = "richtext";
  * Options for configuring where content in a design should be queried from.
  */
 declare type ContextOptions = {
-  context: "current_page";
+  target: "current_page";
 };
 
 /**
@@ -355,7 +355,7 @@ export declare type Coordinates = {
  * @public
  * Creates a new RichtextRange object, which contains methods to manipulate text.
  */
-export declare function createRichtextRange(): RichtextRange;
+export declare const createRichtextRange: () => RichtextRange;
 
 /**
  * @beta
@@ -438,7 +438,7 @@ export declare namespace DesignEditing {
    * @beta
    * Options for creating a shape path in the element builder
    */
-  export type ShapePathOpts = Pick<Path, "d"> & {
+  export type PathOpts = Pick<Path, "d"> & {
     fill?: FillOpts;
     stroke?: StrokeOpts;
   };
@@ -447,7 +447,7 @@ export declare namespace DesignEditing {
    * Options for creating a rect element.
    */
   export type CreateRectElementOpts = Required<
-    Pick<Element, "top" | "left" | "width" | "height">
+    Pick<RectElement, "top" | "left" | "width" | "height">
   > & {
     fill?: FillOpts;
   } & {
@@ -460,12 +460,13 @@ export declare namespace DesignEditing {
   export type CreateShapeElementOpts = Required<
     Pick<ShapeElement, "top" | "left" | "width" | "height" | "viewBox">
   > & {
-    paths: ShapePathOpts[];
+    paths: PathOpts[];
   } & Partial<Omit<ShapeElement, "type" | "paths">>;
   /**
    * @beta
    * Options for creating an embed element.
-   */ export type CreateEmbedElementOpts = Required<
+   */
+  export type CreateEmbedElementOpts = Required<
     Pick<EmbedElement, "top" | "left" | "width" | "height" | "url">
   > &
     Partial<Omit<EmbedElement, "type">>;
@@ -510,6 +511,17 @@ export declare namespace DesignEditing {
      * Creates a richtext range.
      */
     createRichtextRange(): RichtextRange;
+    /**
+     * Creates a clone of an element.
+     * @returns a new element with the same properties as the argument.
+     */
+    cloneElement(element: RectElement): RectElement;
+    cloneElement(element: ShapeElement): ShapeElement;
+    cloneElement(element: EmbedElement): EmbedElement;
+    cloneElement(element: TextElement): TextElement;
+    cloneElement(
+      element: RectElement | ShapeElement | EmbedElement | TextElement,
+    ): RectElement | ShapeElement | EmbedElement | TextElement;
   }
   /**
    * @beta
@@ -695,7 +707,7 @@ export declare namespace DesignEditing {
     /**
      * A unique identifier that points to an image asset in Canva's backend.
      */
-    imageRef: string;
+    imageRef: ImageRef;
     /**
      * If `true`, the image is flipped horizontally.
      */
@@ -717,7 +729,7 @@ export declare namespace DesignEditing {
     /**
      * A unique identifier that points to a video asset in Canva's backend.
      */
-    videoRef: string;
+    videoRef: VideoRef;
     /**
      * If `true`, the video is flipped horizontally.
      */
@@ -1073,7 +1085,15 @@ export declare namespace DesignEditing {
  * @public
  * An element that's natively supported by the Canva editor.
  */
-export declare type DesignElement = NativeElement;
+export declare type DesignElement =
+  | ImageElement
+  | VideoElement
+  | EmbedElement
+  | TextElement
+  | ShapeElement
+  | GroupElement
+  | RichtextElement
+  | TableElement;
 
 /**
  * @beta
@@ -1088,7 +1108,7 @@ export declare type DesignOpenCallback = (
      * Provides methods for creating elements.
      */
     elementBuilder: DesignEditing.ElementBuilder;
-  }
+  },
 ) => Promise<void> | void;
 
 /**
@@ -1172,29 +1192,6 @@ export declare type Dimensions = {
   height: number;
 };
 
-/**
- * @public
- * Callbacks for handling drag and drop events.
- */
-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;
-};
-
-/**
- * @public
- * Options for adding drag and drop behavior to an `HTMLElement`.
- */
-export declare type DraggableElementData = ElementData | ImageElementData;
-
 /**
  * @public
  * An event that occurs when a user starts dragging an HTML element.
@@ -1208,10 +1205,43 @@ export declare type DragStartEvent<E extends Element> = Pick<
 
 /**
  * @beta
- * Options for configuring how a design is read.
+ * 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.
+ */
+export declare const editContent: (
+  options: EditContentOptions,
+  callback: EditContentCallback,
+) => Promise<void>;
+
+/**
+ * @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: {
+  /**
+   * 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;
+
+/**
+ * @beta
+ * Options for configuring how the design content is read.
  */
-export declare type EditContentOptions<T extends ContentType> = {
-  contentType: T;
+export declare type EditContentOptions = {
+  /**
+   * The type of content to edit from the user's design
+   */
+  contentType: ContentType;
 } & ContextOptions;
 
 /**
@@ -1223,27 +1253,22 @@ export declare type ElementAtCursor =
   | VideoElement
   | EmbedElement
   | TextElement
-  | RichtextElement;
+  | RichtextElement
+  | TableElement;
 
 /**
  * @public
  * An element that's natively supported by the Canva editor and has positional properties.
  */
 export declare type ElementAtPoint =
-  | NativeElementWithBox
+  | ImageElementAtPoint
+  | VideoElementAtPoint
+  | EmbedElementAtPoint
+  | TextElementAtPoint
+  | ShapeElementAtPoint
+  | 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.
@@ -1274,13 +1299,27 @@ export declare type EmbedDragConfig = {
  * @public
  * An element that renders rich media, such as a YouTube video.
  */
-export declare type EmbedElement = NativeEmbedElement;
+export declare type EmbedElement = {
+  /**
+   * The type of element.
+   */
+  type: "embed";
+  /**
+   * The URL of the rich media.
+   *
+   * @remarks
+   * This URL must be supported by the Iframely API.
+   */
+  url: string;
+};
 
 /**
  * @public
  * An element that renders rich media, such as a YouTube video, and has positional properties.
  */
-export declare type EmbedElementAtPoint = NativeEmbedElementWithBox;
+export declare type EmbedElementAtPoint = EmbedElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * @public
@@ -1482,25 +1521,43 @@ export declare const getDefaultPageDimensions: () => Promise<
  * @public
  * Retrieves a signed JWT that contains the Design ID, App ID and User ID.
  */
-export declare function getDesignToken(): Promise<DesignToken>;
+export declare const getDesignToken: () => Promise<DesignToken>;
 
 /**
  * @public
  * An element that's natively supported by the Canva editor, can exist within a group, and has positional properties.
  */
-export declare type GroupContentAtPoint = NativeSimpleElementWithBox;
+export declare type GroupContentAtPoint = Exclude<
+  ElementAtPoint,
+  GroupElementAtPoint
+>;
 
 /**
  * @public
  * An element that contains two or more elements.
  */
-export declare type GroupElement = NativeGroupElement;
+export declare type GroupElement = {
+  /**
+   * The type of element.
+   */
+  type: "group";
+  /**
+   * The elements to render within the group.
+   *
+   * @remarks
+   * - Each element within a group must have dimensions and a position.
+   * - The dimensions and positions are relative to the dimensions and positions of the group.
+   */
+  children: GroupContentAtPoint[];
+};
 
 /**
  * @public
  * An element that contains two or more elements and has positional properties.
  */
-export declare type GroupElementAtPoint = NativeGroupElementWithBox;
+export declare type GroupElementAtPoint = GroupElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * A set of dimensions with an auto-calculated width.
@@ -1540,24 +1597,48 @@ export declare type ImageDragConfigForElement<E extends Element> =
  * @public
  * An element that renders image content.
  */
-export declare type ImageElement = NativeImageElement;
+export declare type ImageElement = {
+  /**
+   * The type of element.
+   */
+  type: "image";
+  /**
+   * A description of the image content.
+   *
+   * @remarks
+   * Use `undefined` for content with no description.
+   */
+  altText: AltText | undefined;
+} & (
+  | {
+      /**
+       * A data URL that contains the image data.
+       */
+      dataUrl: string;
+      /**
+       * A unique identifier that points to an image asset in Canva's backend.
+       */
+      ref?: never;
+    }
+  | {
+      /**
+       * A data URL that contains the image data.
+       */
+      dataUrl?: never;
+      /**
+       * A unique identifier that points to an image asset in Canva's backend.
+       */
+      ref: ImageRef;
+    }
+);
 
 /**
  * @public
  * An element that renders image content and has positional properties.
  */
-export declare type ImageElementAtPoint = NativeImageElementWithBox;
-
-/**
- * @public
- * Options for adding drag and drop behavior to an `HTMLImageElement`.
- */
-export declare type ImageElementData = DragCallback & {
-  /**
-   * The `HTMLImageElement` to be made draggable.
-   */
-  node: HTMLImageElement;
-};
+export declare type ImageElementAtPoint = ImageElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * @public
@@ -1572,6 +1653,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;
 };
 
 /**
@@ -1586,9 +1674,9 @@ export declare type ImageRef = string & {
  * @public
  * @param appElementConfig - Configuration for an AppElementClient
  */
-export declare function initAppElement<A extends AppElementData>(
-  appElementConfig: AppElementClientConfiguration<A>
-): AppElementClient<A>;
+export declare const initAppElement: <A extends AppElementData>(
+  appElementConfig: AppElementClientConfiguration<A>,
+) => AppElementClient<A>;
 
 /**
  * @public
@@ -1636,7 +1724,7 @@ export declare type InlineFormatting = {
 };
 
 /**
- * @deprecated
+ * @deprecated The type has been superseded by `DesignElement`.
  * @public
  * An element that's natively supported by the Canva editor.
  */
@@ -1678,279 +1766,91 @@ export declare type NativeElementWithBox =
  * @public
  * An element that renders rich media, such as a YouTube video.
  */
-export declare type NativeEmbedElement = {
-  /**
-   * The type of element.
-   */
-  type: "embed";
-  /**
-   * The URL of the rich media.
-   *
-   * @remarks
-   * This URL must be supported by the Iframely API.
-   */
-  url: string;
-};
+export declare type NativeEmbedElement = EmbedElement;
 
 /**
  * @deprecated The type has been superseded by `EmbedElementAtPoint`.
  * @public
  * An element that renders rich media, such as a YouTube video, and has positional properties.
  */
-export declare type NativeEmbedElementWithBox = {
-  /**
-   * The type of element.
-   */
-  type: "embed";
-  /**
-   * The URL of the rich media.
-   *
-   * @remarks
-   * This URL must be supported by the Iframely API.
-   */
-  url: string;
-} & Box;
+export declare type NativeEmbedElementWithBox = EmbedElementAtPoint;
 
 /**
  * @deprecated The type has been superseded by `GroupElement`.
  * @public
  * An element that contains two or more elements.
  */
-export declare type NativeGroupElement = {
-  /**
-   * The type of element.
-   */
-  type: "group";
-  /**
-   * The elements to render within the group.
-   *
-   * @remarks
-   * - Each element within a group must have dimensions and a position.
-   * - The dimensions and positions are relative to the dimensions and positions of the group.
-   */
-  children: NativeSimpleElementWithBox[];
-};
+export declare type NativeGroupElement = GroupElement;
 
 /**
  * @deprecated The type has been superseded by `GroupElementAtPoint`.
  * @public
  * An element that contains two or more elements and has positional properties.
  */
-export declare type NativeGroupElementWithBox = {
-  /**
-   * The type of element.
-   */
-  type: "group";
-  /**
-   * The elements to render within the group.
-   *
-   * @remarks
-   * - Each element within a group must have dimensions and a position.
-   * - The dimensions and positions are relative to the dimensions and positions of the group.
-   */
-  children: NativeSimpleElementWithBox[];
-} & Box;
+export declare type NativeGroupElementWithBox = GroupElementAtPoint;
 
 /**
  * @deprecated The type has been superseded by `ImageElement`.
  * @public
  * An element that renders image content.
  */
-export declare type NativeImageElement = {
-  /**
-   * The type of element.
-   */
-  type: "image";
-  /**
-   * A description of the image content.
-   */
-  altText: AltText | undefined;
-} & (
-  | {
-      /**
-       * A data URL that contains the image data.
-       */
-      dataUrl: string;
-      /**
-       * A unique identifier that points to an image asset in Canva's backend.
-       */
-      ref?: never;
-    }
-  | {
-      /**
-       * A data URL that contains the image data.
-       */
-      dataUrl?: never;
-      /**
-       * A unique identifier that points to an image asset in Canva's backend.
-       */
-      ref: ImageRef;
-    }
-);
+export declare type NativeImageElement = ImageElement;
 
 /**
  * @deprecated The type has been superseded by `ImageElementAtPoint`.
  * @public
  * An element that renders image content and has positional properties.
  */
-export declare type NativeImageElementWithBox = NativeImageElement & Box;
+export declare type NativeImageElementWithBox = ImageElementAtPoint;
 
 /**
  * @deprecated The type has been superseded by `ShapeElement`.
  * @public
  * An element that renders a vector shape.
  */
-export declare type NativeShapeElement = {
-  /**
-   * The type of element.
-   */
-  type: "shape";
-  /**
-   * Options for configuring the scale and cropping of the shape.
-   */
-  viewBox: ShapeViewBox;
-  /**
-   * The paths that define the structure of the shape.
-   *
-   * @remarks
-   * - There must be between 1 and 30 paths (inclusive).
-   * - The maximum combined size of all paths must not exceed 2kb.
-   * - The maximum number of unique fill colors across all paths is 6.
-   */
-  paths: ShapePath[];
-};
+export declare type NativeShapeElement = ShapeElement;
 
 /**
  * @deprecated The type has been superseded by `ShapeElementAtPoint`.
  * @public
  * An element that renders a vector shape and has positional properties.
  */
-export declare type NativeShapeElementWithBox = {
-  /**
-   * The type of element.
-   */
-  type: "shape";
-  /**
-   * Options for configuring the scale and cropping of a shape.
-   */
-  viewBox: ShapeViewBox;
-  /**
-   * The paths that define the structure of the shape.
-   *
-   * @remarks
-   * - There must be between 1 and 30 paths (inclusive).
-   * - The maximum combined size of all paths must not exceed 2kb.
-   * - The maximum number of unique fill colors across all paths is 6.
-   */
-  paths: ShapePath[];
-} & Box;
+export declare type NativeShapeElementWithBox = ShapeElementAtPoint;
 
 /**
  * @deprecated The type has been superseded by `GroupContentAtPoint`.
  * @public
  * An element that's natively supported by the Canva editor, can exist within a group, and has positional properties.
  */
-export declare type NativeSimpleElementWithBox = Exclude<
-  NativeElementWithBox,
-  NativeGroupElementWithBox
->;
+export declare type NativeSimpleElementWithBox = GroupContentAtPoint;
 
 /**
  * @deprecated The type has been superseded by `TextElement`.
  * @public
  * An element that renders text content.
  */
-export declare type NativeTextElement = {
-  /**
-   * The type of element.
-   */
-  type: "text";
-  /**
-   * The text content.
-   *
-   * @remarks
-   * Only the first element in this array is used.
-   */
-  children: string[];
-} & TextAttributes;
+export declare type NativeTextElement = TextElement;
 
 /**
  * @deprecated The type has been superseded by `TextElementAtPoint`.
  * @public
  * An element that renders text content and has positional properties.
  */
-export declare type NativeTextElementWithBox = {
-  /**
-   * The type of element.
-   */
-  type: "text";
-  /**
-   * The text content.
-   *
-   * @remarks
-   * Only the first element in this array is used.
-   */
-  children: [string];
-  /**
-   * The width of the element, in pixels.
-   *
-   * @remarks
-   * - Minimum: 0
-   * - Maximum: 32767
-   */
-  width?: number;
-  /**
-   * The distance from the top edge of the container, in pixels.
-   *
-   * @remarks
-   * - Minimum: -32768
-   * - Maximum: 32767
-   */
-  top: number;
-  /**
-   * The distance from the left edge of the container, in pixels.
-   *
-   * @remarks
-   * - Minimum: -32768
-   * - Maximum: 32767
-   */
-  left: number;
-  /**
-   * The rotation of the element, in degrees.
-   *
-   * @remarks
-   * - Minimum: -180
-   * - Maximum: 180
-   */
-  rotation?: number;
-} & TextAttributes;
+export declare type NativeTextElementWithBox = TextElementAtPoint;
 
 /**
  * @deprecated The type has been superseded by `VideoElement`.
  * @public
  * An element that renders video content.
  */
-export declare type NativeVideoElement = {
-  /**
-   * The type of element.
-   */
-  type: "video";
-  /**
-   * A unique identifier that points to a video asset in Canva's backend.
-   */
-  ref: VideoRef;
-  /**
-   * A description of the video content.
-   */
-  altText: AltText | undefined;
-};
+export declare type NativeVideoElement = VideoElement;
 
 /**
  * @deprecated The type has been superseded by `VideoElementAtPoint`.
  * @public
  * An element that renders video content and has positional properties.
  */
-export declare type NativeVideoElementWithBox = NativeVideoElement & Box;
+export declare type NativeVideoElementWithBox = VideoElementAtPoint;
 
 /**
  * An object primitive data type that can be used in app element data.
@@ -1961,7 +1861,7 @@ declare type ObjectPrimitive = Boolean | String;
  * @beta
  * Reads a specified part of the user's design and returns all elements in that part.
  *
- * @param options - Options for configuring how a design is read.
+ * @param options - Options for configuring how the design is read.
  * @param callback - A callback for operating on the design.
  */
 export declare const openDesign: (
@@ -1970,8 +1870,8 @@ export declare const openDesign: (
     draft: DesignEditing.DesignOpenResult,
     helpers: {
       elementBuilder: DesignEditing.ElementBuilder;
-    }
-  ) => Promise<void> | void
+    },
+  ) => Promise<void> | void,
 ) => Promise<void>;
 
 /**
@@ -2100,13 +2000,12 @@ export declare type PathStroke = {
  * @public
  * A position, set of dimensions, and rotation.
  */
-export declare type Placement = Position & (WidthAndHeight | Width | Height);
+export declare type Placement = Point & (WidthAndHeight | Width | Height);
 
 /**
- * @deprecated
  * A position and rotation.
  */
-declare type Position = {
+declare type Point = {
   /**
    * The distance from the top edge of the container, in pixels.
    *
@@ -2143,68 +2042,26 @@ declare type Position = {
  */
 declare type Primitive = undefined | null | number | boolean | string;
 
-/**
- * @beta
- * A snapshot of content returned by a query.
- *
- * @remarks
- * The snapshot is known as the *draft*.
- */
-export declare interface QueryContentDraft<T> {
-  /**
-   * The individual content items returned by a query.
-   */
-  readonly contents: readonly T[];
-  /**
-   * 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>;
-}
-
-/**
- * @beta
- * The result of querying content in a design.
- */
-export declare type QueryResult<T extends ContentType> = {
-  ["richtext"]: QueryContentDraft<
-    RichtextRange & {
-      readonly deleted: boolean;
-    }
-  >;
-}[T];
-
-/**
- * @beta
- * Reads 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 queried content.
- */
-export declare const readContent: <T extends ContentType>(
-  options: EditContentOptions<T>,
-  callback: (draft: QueryResult<T>) => Promise<void> | void
-) => Promise<void>;
-
-/**
- * @beta
- * A callback for reading and updating part of a design.
- * @param draft - The result of reading the content in a design.
- */
-export declare type ReadContentCallback<T extends ContentType> = (
-  draft: QueryResult<T>
-) => Promise<void> | void;
-
 /**
  * @public
  * Exports the user's design as one or more static files.
  * @param request - The request object containing configurations of the design export.
  */
 export declare const requestExport: (
-  request: ExportRequest
+  request: ExportRequest,
 ) => Promise<ExportResponse>;
 
+/**
+ * @beta
+ * 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.
@@ -2312,7 +2169,7 @@ export declare type RichtextRange = {
    */
   appendText(
     characters: string,
-    formatting?: InlineFormatting
+    formatting?: InlineFormatting,
   ): {
     bounds: Bounds;
   };
@@ -2326,7 +2183,7 @@ export declare type RichtextRange = {
   replaceText(
     bounds: Bounds,
     characters: string,
-    formatting?: InlineFormatting
+    formatting?: InlineFormatting,
   ): {
     /**
      * The bounds of the replacement characters within the updated range.
@@ -2464,20 +2321,40 @@ export declare type SelectionValue<Scope extends SelectionScope> = {
  * an image or a video.
  */
 export declare const setCurrentPageBackground: (
-  opts: PageBackgroundFill
+  opts: PageBackgroundFill,
 ) => Promise<void>;
 
 /**
  * @public
  * An element that renders a vector shape.
  */
-export declare type ShapeElement = NativeShapeElement;
+export declare type ShapeElement = {
+  /**
+   * The type of element.
+   */
+  type: "shape";
+  /**
+   * Options for configuring the scale and cropping of the shape.
+   */
+  viewBox: ShapeViewBox;
+  /**
+   * The paths that define the structure of the shape.
+   *
+   * @remarks
+   * - There must be between 1 and 30 paths (inclusive).
+   * - The maximum combined size of all paths must not exceed 2kb.
+   * - The maximum number of unique fill colors across all paths is 6.
+   */
+  paths: ShapePath[];
+};
 
 /**
  * @public
  * An element that renders a vector shape and has positional properties.
  */
-export declare type ShapeElementAtPoint = NativeShapeElementWithBox;
+export declare type ShapeElementAtPoint = ShapeElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * @public
@@ -2613,39 +2490,15 @@ export declare type TextAttributes = {
  * @public
  * The dimensions, position, and rotation of a text element.
  */
-declare type TextBox = {
+declare type TextBox = Point & {
   /**
-   * The width, in pixels.
+   * The width of the element, in pixels.
    *
    * @remarks
    * - Minimum: 0
    * - Maximum: 32767
    */
   width?: number;
-  /**
-   * The distance from the top edge of the container, in pixels.
-   *
-   * @remarks
-   * - Minimum: -32767
-   * - Maximum: 32767
-   */
-  top: number;
-  /**
-   * The distance from the left edge of the container, in pixels.
-   *
-   * @remarks
-   * - Minimum: -32767
-   * - Maximum: 32767
-   */
-  left: number;
-  /**
-   * The rotation, in degrees.
-   *
-   * @remarks
-   * - Minimum: -180
-   * - Maximum: 180
-   */
-  rotation?: number;
 };
 
 /**
@@ -2692,13 +2545,25 @@ export declare type TextDragConfig = {
  * @public
  * An element that renders text content.
  */
-export declare type TextElement = NativeTextElement;
+export declare type TextElement = {
+  /**
+   * The type of element.
+   */
+  type: "text";
+  /**
+   * The text content.
+   *
+   * @remarks
+   * Only the first element in this array is used.
+   */
+  children: string[];
+} & TextAttributes;
 
 /**
  * @public
  * An element that renders text content and has positional properties.
  */
-export declare type TextElementAtPoint = NativeTextElementWithBox;
+export declare type TextElementAtPoint = TextElement & TextBox;
 
 /**
  * @public
@@ -2735,7 +2600,7 @@ export declare interface UI {
       | AudioDragConfig
       | EmbedDragConfig
       | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>
+      | ImageDragConfigForElement<E>,
   ): Promise<void>;
   /**
    * @public
@@ -2751,7 +2616,7 @@ export declare interface UI {
       | AudioDragConfig
       | EmbedDragConfig
       | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>
+      | ImageDragConfigForElement<E>,
   ): Promise<void>;
   /**
    * @public
@@ -2765,7 +2630,7 @@ export declare interface UI {
     dragData:
       | EmbedDragConfig
       | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>
+      | ImageDragConfigForElement<E>,
   ): Promise<void>;
 }
 
@@ -2834,13 +2699,31 @@ export declare type VideoDragConfigForElement<E extends Element> =
  * @public
  * An element that renders video content.
  */
-export declare type VideoElement = NativeVideoElement;
+export declare type VideoElement = {
+  /**
+   * The type of element.
+   */
+  type: "video";
+  /**
+   * A unique identifier that points to a video asset in Canva's backend.
+   */
+  ref: VideoRef;
+  /**
+   * A description of the video content.
+   *
+   * @remarks
+   * Use `undefined` for content with no description.
+   */
+  altText: AltText | undefined;
+};
 
 /**
  * @public
  * An element that renders video content and has positional properties.
  */
-export declare type VideoElementAtPoint = NativeVideoElementWithBox;
+export declare type VideoElementAtPoint = VideoElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * @public
@@ -2855,6 +2738,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/beta.js

@@ -9,8 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    readContent: function() {
-        return readContent;
+    initAppElement: function() {
+        return initAppElement;
+    },
+    editContent: function() {
+        return editContent;
     },
     openDesign: function() {
         return openDesign;
@@ -32,7 +35,7 @@ function _export_star(from, to) {
 }
 var _window___canva___sdkRegistration, _window___canva__;
 const { canva_sdk } = window;
-const readContent = canva_sdk.design.v2.designInteraction.readContent;
+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.1.0', '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.2.1', 'beta');

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

@@ -68,12 +68,6 @@ const addElementAtPoint = canva_sdk.design.v2.designInteraction.addElementAtPoin
 const addElementAtCursor = canva_sdk.design.v2.designInteraction.addElementAtCursor;
 const addAudioTrack = canva_sdk.design.v2.designInteraction.addAudioTrack;
 const getCurrentPageContext = canva_sdk.design.v2.designInteraction.getCurrentPageContext;
-function initAppElement(appElementConfig) {
-    return canva_sdk.design.v2.designInteraction.initAppElement(appElementConfig);
-}
-function getDesignToken() {
-    return canva_sdk.design.v2.designInteraction.getDesignToken();
-}
-function createRichtextRange() {
-    return canva_sdk.design.v2.designInteraction.createRichtextRange();
-}
+const initAppElement = canva_sdk.design.v2.designInteraction.initAppElement;
+const getDesignToken = canva_sdk.design.v2.designInteraction.getDesignToken;
+const createRichtextRange = canva_sdk.design.v2.designInteraction.createRichtextRange;

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

@@ -1,7 +1,7 @@
 var _window___canva___sdkRegistration, _window___canva__;
 const { canva_sdk } = window;
-export const readContent = canva_sdk.design.v2.designInteraction.readContent;
+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.1.0', '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.2.1', 'beta');

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

@@ -11,12 +11,6 @@ export const addElementAtPoint = canva_sdk.design.v2.designInteraction.addElemen
 export const addElementAtCursor = canva_sdk.design.v2.designInteraction.addElementAtCursor;
 export const addAudioTrack = canva_sdk.design.v2.designInteraction.addAudioTrack;
 export const getCurrentPageContext = canva_sdk.design.v2.designInteraction.getCurrentPageContext;
-export function initAppElement(appElementConfig) {
-    return canva_sdk.design.v2.designInteraction.initAppElement(appElementConfig);
-}
-export function getDesignToken() {
-    return canva_sdk.design.v2.designInteraction.getDesignToken();
-}
-export function createRichtextRange() {
-    return canva_sdk.design.v2.designInteraction.createRichtextRange();
-}
+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;

package/package.json

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