@canva/design 2.2.1-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
+  element: ElementAtCursor,
 ) => Promise<void>;
 
 /**
@@ -18,7 +18,7 @@ export declare const addElementAtCursor: (
  * Add element to fixed designs, which use a coordinate-based positioning system.
  */
 export declare const addElementAtPoint: (
-  element: DesignElement | ElementAtPoint
+  element: DesignElement | ElementAtPoint,
 ) => Promise<void>;
 
 /**
@@ -28,7 +28,7 @@ export declare const addElementAtPoint: (
  * @param element - The element to add to the user's design.
  */
 export declare const addNativeElement: (
-  element: NativeElement | NativeElementWithBox
+  element: NativeElement | NativeElementWithBox,
 ) => Promise<void>;
 
 /**
@@ -88,7 +88,7 @@ export declare type AppElementChangeHandler<A extends AppElementData> = (
          */
         version: number;
       }
-    | undefined
+    | undefined,
 ) => void;
 
 /**
@@ -138,7 +138,7 @@ export declare type AppElementData = Record<string, Value>;
  * @param appElementData - The data the callback must use to render the app element.
  */
 export declare type AppElementRenderer<A extends AppElementData> = (
-  appElementData: A
+  appElementData: A,
 ) => AppElementRendererOutput;
 
 /**
@@ -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";
 };
 
 /**
@@ -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
@@ -1096,7 +1108,7 @@ export declare type DesignOpenCallback = (
      * Provides methods for creating elements.
      */
     elementBuilder: DesignEditing.ElementBuilder;
-  }
+  },
 ) => Promise<void> | void;
 
 /**
@@ -1180,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.
@@ -1216,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;
 
 /**
@@ -1247,17 +1269,6 @@ export declare type ElementAtPoint =
   | GroupElementAtPoint
   | RichtextElementAtPoint;
 
-/**
- * @public
- * Options for adding drag and drop behavior to an `HTMLElement`.
- */
-export declare type ElementData = DragCallback & {
-  /**
-   * The `HTMLElement` to be made draggable.
-   */
-  node: HTMLElement;
-};
-
 /**
  * @public
  * Embed element to be added to the design at the end of a drag event.
@@ -1593,6 +1604,9 @@ export declare type ImageElement = {
   type: "image";
   /**
    * A description of the image content.
+   *
+   * @remarks
+   * Use `undefined` for content with no description.
    */
   altText: AltText | undefined;
 } & (
@@ -1626,17 +1640,6 @@ export declare type ImageElementAtPoint = ImageElement &
   Point &
   (WidthAndHeight | Width | Height);
 
-/**
- * @public
- * Options for adding drag and drop behavior to an `HTMLImageElement`.
- */
-export declare type ImageElementData = DragCallback & {
-  /**
-   * The `HTMLImageElement` to be made draggable.
-   */
-  node: HTMLImageElement;
-};
-
 /**
  * @public
  * An image asset that fills a path's interior.
@@ -1650,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;
 };
 
 /**
@@ -1665,7 +1675,7 @@ export declare type ImageRef = string & {
  * @param appElementConfig - Configuration for an AppElementClient
  */
 export declare const initAppElement: <A extends AppElementData>(
-  appElementConfig: AppElementClientConfiguration<A>
+  appElementConfig: AppElementClientConfiguration<A>,
 ) => AppElementClient<A>;
 
 /**
@@ -1851,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: (
@@ -1860,8 +1870,8 @@ export declare const openDesign: (
     draft: DesignEditing.DesignOpenResult,
     helpers: {
       elementBuilder: DesignEditing.ElementBuilder;
-    }
-  ) => Promise<void> | void
+    },
+  ) => Promise<void> | void,
 ) => Promise<void>;
 
 /**
@@ -2032,68 +2042,26 @@ declare type Point = {
  */
 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.
@@ -2201,7 +2169,7 @@ export declare type RichtextRange = {
    */
   appendText(
     characters: string,
-    formatting?: InlineFormatting
+    formatting?: InlineFormatting,
   ): {
     bounds: Bounds;
   };
@@ -2215,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.
@@ -2353,7 +2321,7 @@ export declare type SelectionValue<Scope extends SelectionScope> = {
  * an image or a video.
  */
 export declare const setCurrentPageBackground: (
-  opts: PageBackgroundFill
+  opts: PageBackgroundFill,
 ) => Promise<void>;
 
 /**
@@ -2595,7 +2563,7 @@ export declare type TextElement = {
  * @public
  * An element that renders text content and has positional properties.
  */
-export declare type TextElementAtPoint = TextElement & TextAttributes & TextBox;
+export declare type TextElementAtPoint = TextElement & TextBox;
 
 /**
  * @public
@@ -2632,7 +2600,7 @@ export declare interface UI {
       | AudioDragConfig
       | EmbedDragConfig
       | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>
+      | ImageDragConfigForElement<E>,
   ): Promise<void>;
   /**
    * @public
@@ -2648,7 +2616,7 @@ export declare interface UI {
       | AudioDragConfig
       | EmbedDragConfig
       | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>
+      | ImageDragConfigForElement<E>,
   ): Promise<void>;
   /**
    * @public
@@ -2662,7 +2630,7 @@ export declare interface UI {
     dragData:
       | EmbedDragConfig
       | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>
+      | ImageDragConfigForElement<E>,
   ): Promise<void>;
 }
 
@@ -2742,6 +2710,9 @@ export declare type VideoElement = {
   ref: VideoRef;
   /**
    * A description of the video content.
+   *
+   * @remarks
+   * Use `undefined` for content with no description.
    */
   altText: AltText | undefined;
 };
@@ -2767,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,6 +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.2.1', 'beta');

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

@@ -1,6 +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.2.1', 'beta');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/design",
-  "version": "2.2.1-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"