@canva/design 2.1.0 → 2.2.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -328,6 +328,14 @@ export declare interface ContentDraft<T> {
328
328
  */
329
329
  export declare type ContentType = "richtext";
330
330
 
331
+ /**
332
+ * @beta
333
+ * Options for configuring where content in a design should be queried from.
334
+ */
335
+ declare type ContextOptions = {
336
+ context: "current_page";
337
+ };
338
+
331
339
  /**
332
340
  * @public
333
341
  * A set of X and Y coordinates.
@@ -349,12 +357,746 @@ export declare type Coordinates = {
349
357
  */
350
358
  export declare function createRichtextRange(): RichtextRange;
351
359
 
360
+ /**
361
+ * @beta
362
+ * Describes a part of a design.
363
+ */
364
+ export declare type DesignContext = DesignContextOptions["type"];
365
+
366
+ /**
367
+ * @beta
368
+ * Options for configuring which part of a design to read.
369
+ */
370
+ declare type DesignContextOptions = {
371
+ /**
372
+ * The type of context.
373
+ */
374
+ type: "current_page";
375
+ };
376
+
377
+ /**
378
+ * @beta
379
+ * Provides methods for reading and updating the structure and content of a design.
380
+ */
381
+ export declare namespace DesignEditing {
382
+ /**
383
+ * @beta
384
+ * A snapshot containing a fragment of a design's structure and content.
385
+ */
386
+ export type DesignDraft<D> = Readonly<D> & {
387
+ /**
388
+ * Saves any changes made to the draft.
389
+ *
390
+ * @remarks
391
+ * - Any changes to the draft are only reflected in the design after this method is called.
392
+ * - Once this method is called, further changes to the draft are not possible.
393
+ */
394
+ save(): Promise<void>;
395
+ };
396
+ /**
397
+ * @beta
398
+ * Options for creating an image fill in the element builder
399
+ */
400
+ export type ImageFillOpts = Partial<ImageFill> &
401
+ Required<Pick<ImageFill, "type" | "imageRef">>;
402
+ /**
403
+ * @beta
404
+ * Options for creating a video fill in the element builder
405
+ */
406
+ export type VideoFillOpts = Partial<VideoFill> &
407
+ Required<Pick<VideoFill, "type" | "videoRef">>;
408
+ /**
409
+ * @beta
410
+ * Options for creating a media fill in the element builder
411
+ */
412
+ export type MediaFillOpts = ImageFillOpts | VideoFillOpts;
413
+ /**
414
+ * @beta
415
+ * Options for creating a fill in the element builder
416
+ */
417
+ export type FillOpts =
418
+ | {
419
+ color: ColorFillOpts;
420
+ media?: MediaFillOpts;
421
+ }
422
+ | {
423
+ color?: ColorFillOpts;
424
+ media: MediaFillOpts;
425
+ };
426
+ /**
427
+ * @beta
428
+ */
429
+ export type ColorFillOpts = Exclude<ColorFill, Unsupported>;
430
+ /**
431
+ * @beta
432
+ * Options for creating a stroke in the element builder
433
+ */
434
+ export type StrokeOpts = Pick<Stroke, "weight"> & {
435
+ color: ColorFillOpts;
436
+ };
437
+ /**
438
+ * @beta
439
+ * Options for creating a shape path in the element builder
440
+ */
441
+ export type ShapePathOpts = Pick<Path, "d"> & {
442
+ fill?: FillOpts;
443
+ stroke?: StrokeOpts;
444
+ };
445
+ /**
446
+ * @beta
447
+ * Options for creating a rect element.
448
+ */
449
+ export type CreateRectElementOpts = Required<
450
+ Pick<Element, "top" | "left" | "width" | "height">
451
+ > & {
452
+ fill?: FillOpts;
453
+ } & {
454
+ stroke?: StrokeOpts;
455
+ } & Partial<Omit<RectElement, "fill" | "stroke" | "type">>;
456
+ /**
457
+ * @beta
458
+ * Options for creating a shape element.
459
+ */
460
+ export type CreateShapeElementOpts = Required<
461
+ Pick<ShapeElement, "top" | "left" | "width" | "height" | "viewBox">
462
+ > & {
463
+ paths: ShapePathOpts[];
464
+ } & Partial<Omit<ShapeElement, "type" | "paths">>;
465
+ /**
466
+ * @beta
467
+ * Options for creating an embed element.
468
+ */ export type CreateEmbedElementOpts = Required<
469
+ Pick<EmbedElement, "top" | "left" | "width" | "height" | "url">
470
+ > &
471
+ Partial<Omit<EmbedElement, "type">>;
472
+ /**
473
+ * @beta
474
+ * Options for creating a text element.
475
+ */
476
+ export type CreateTextElementOpts = Required<
477
+ Pick<TextElement, "top" | "left" | "width" | "text">
478
+ > &
479
+ Partial<Omit<TextElement, "type" | "height">>;
480
+ /**
481
+ * @beta
482
+ * Provides methods for creating elements.
483
+ *
484
+ * @remarks
485
+ * These methods don't add the elements to the design. They only return elements that can
486
+ * be added to a design, such as with the `insertAfter` method.
487
+ */
488
+ export interface ElementBuilder {
489
+ /**
490
+ * Creates a rect element.
491
+ * @param opts - Options for creating the rect element.
492
+ */
493
+ createRectElement(opts: CreateRectElementOpts): RectElement;
494
+ /**
495
+ * Creates a shape element.
496
+ * @param opts - Options for creating the shape element.
497
+ */
498
+ createShapeElement(opts: CreateShapeElementOpts): ShapeElement;
499
+ /**
500
+ * Creates an embed element.
501
+ * @param opts - Options for creating the embed element.
502
+ */
503
+ createEmbedElement(opts: CreateEmbedElementOpts): EmbedElement;
504
+ /**
505
+ * Creates a text element.
506
+ * @param opts - Options for creating the text element.
507
+ */
508
+ createTextElement(opts: CreateTextElementOpts): TextElement;
509
+ /**
510
+ * Creates a richtext range.
511
+ */
512
+ createRichtextRange(): RichtextRange;
513
+ }
514
+ /**
515
+ * @beta
516
+ * The result of reading part of a design when the context is the current page.
517
+ */
518
+ export type CurrentPageResult = DesignDraft<{
519
+ /**
520
+ * The current page of the design.
521
+ */
522
+ page: FixedPage;
523
+ }>;
524
+ /**
525
+ * @beta
526
+ * The result of reading part of a design.
527
+ */
528
+ export type DesignOpenResult = CurrentPageResult;
529
+ /**
530
+ * A function called for each item in the list.
531
+ *
532
+ * @param item - The current item in the list.
533
+ * @param index - The index of the current item.
534
+ */
535
+ export type ForEachCallback<T> = (item: T, index: number) => void;
536
+ /**
537
+ * A function that determines if an item should be included in the result.
538
+ *
539
+ * @param item - The item to test.
540
+ * @returns `true` if the item should be included, otherwise `false`.
541
+ */
542
+ export type FilterPredicate<T> = (item: T) => boolean;
543
+ /**
544
+ * A type predicate function that determines if an item is of a specific type.
545
+ *
546
+ * @param item - The item to test.
547
+ * @returns `true` if the item is of type `C`, otherwise `false`.
548
+ */
549
+ export type TypeFilterPredicate<T, C extends T> = (item: T) => item is C;
550
+ /**
551
+ * A list that cannot be changed.
552
+ */
553
+ export interface ReadableList<T> {
554
+ /**
555
+ * Gets the number of items in the list.
556
+ *
557
+ * @returns The number of items.
558
+ */
559
+ count(): number;
560
+ /**
561
+ * Converts the list to an array.
562
+ *
563
+ * @returns An array containing all items. The items are the same as in the list.
564
+ */
565
+ toArray(): readonly T[];
566
+ /**
567
+ * Executes a function for each item in the list.
568
+ *
569
+ * @param callback - The function to run for each item.
570
+ */
571
+ forEach(callback: ForEachCallback<T>): void;
572
+ /**
573
+ * Creates a new array with items that match a specific type.
574
+ *
575
+ * @param filter - A function that checks if an item is of type `C`.
576
+ * @returns An array of items that are of type `C`.
577
+ */
578
+ filter<C extends T>(filter: TypeFilterPredicate<T, C>): readonly C[];
579
+ /**
580
+ * Creates a new array with items that pass a test.
581
+ *
582
+ * @param filter - A function that tests each item. Returns `true` to keep the item.
583
+ * @returns An array of items that passed the test.
584
+ */
585
+ filter(filter: FilterPredicate<T>): readonly T[];
586
+ }
587
+ /**
588
+ * @beta
589
+ * A list of items that can be changed.
590
+ */
591
+ export interface MutableList<T> {
592
+ /**
593
+ * Adds a copy of an item to the list and places it right before another item.
594
+ *
595
+ * @param ref - The existing item to place the new item before.
596
+ * If `ref` is `undefined`, the new item is added at the end of the list.
597
+ * If `ref` does not exist in the list, the operation fails.
598
+ *
599
+ * @param item - The item to add. A copy of this item will be inserted.
600
+ *
601
+ * @returns
602
+ * The added item, or `undefined` if the operation failed.
603
+ */
604
+ insertBefore(ref: T | undefined, item: T): T | undefined;
605
+ /**
606
+ * Adds a copy of an item to the list and places it right after another item.
607
+ *
608
+ * @param ref - The existing item to place the new item after.
609
+ * If `ref` is `undefined`, the new item is added at the end of the list.
610
+ * If `ref` does not exist in the list, the operation fails.
611
+ *
612
+ * @param item - The item to add. A copy of this item will be inserted.
613
+ *
614
+ * @returns
615
+ * The added item, or `undefined` if the operation failed.
616
+ */
617
+ insertAfter(ref: T | undefined, item: T): T | undefined;
618
+ /**
619
+ * Moves an existing item to a new position right before another item.
620
+ *
621
+ * @param ref - The existing item to move the item before.
622
+ * If `ref` is `undefined`, the item is moved to the end of the list.
623
+ * If `ref` does not exist in the list, the operation fails.
624
+ *
625
+ * @param item - The item to move.
626
+ * The operation fails if the item is not already in the list.
627
+ */
628
+ moveBefore(ref: T | undefined, item: T): void;
629
+ /**
630
+ * Moves an existing item to a new position right after another item.
631
+ *
632
+ * @param ref - The existing item to move the item after.
633
+ * If `ref` is `undefined`, the item is moved to the end of the list.
634
+ * If `ref` does not exist in the list, the operation fails.
635
+ *
636
+ * @param item - The item to move.
637
+ * The operation fails if the item is not already in the list.
638
+ */
639
+ moveAfter(ref: T | undefined, item: T): void;
640
+ /**
641
+ * Removes an item from the list.
642
+ *
643
+ * @param item - The item to remove from the list.
644
+ */
645
+ delete(item: T): void;
646
+ }
647
+ /**
648
+ * @beta
649
+ * A list of items that can be read and updated.
650
+ */
651
+ export interface List<T> extends ReadableList<T>, MutableList<T> {}
652
+ /**
653
+ * @beta
654
+ * Represents an element that's not supported by the Apps SDK.
655
+ */
656
+ export interface Unsupported {
657
+ /**
658
+ * The type of element.
659
+ */
660
+ readonly type: "unsupported";
661
+ }
662
+ /**
663
+ * @beta
664
+ * A single valid character in a hex code.
665
+ */
666
+ export type Hex = `123456790abcdef`[number];
667
+ /**
668
+ * @beta
669
+ * A six-character hexadecimal color code prefixed with a `#`.
670
+ */
671
+ export type HexCode = `#${Hex}${Hex}${Hex}${Hex}${Hex}${Hex}`;
672
+ /**
673
+ * @beta
674
+ * A set of dimensions.
675
+ */
676
+ export interface Dimensions {
677
+ /**
678
+ * A width, in pixels.
679
+ */
680
+ readonly width: number;
681
+ /**
682
+ * A height, in pixels.
683
+ */
684
+ readonly height: number;
685
+ }
686
+ /**
687
+ * @beta
688
+ * An image that fills the interior of a path.
689
+ */
690
+ export interface ImageFill {
691
+ /**
692
+ * The type of media.
693
+ */
694
+ readonly type: "image";
695
+ /**
696
+ * A unique identifier that points to an image asset in Canva's backend.
697
+ */
698
+ imageRef: string;
699
+ /**
700
+ * If `true`, the image is flipped horizontally.
701
+ */
702
+ flipX: boolean;
703
+ /**
704
+ * If `true`, the image is flipped vertically.
705
+ */
706
+ flipY: boolean;
707
+ }
708
+ /**
709
+ * @beta
710
+ * A video that fills the interior of a path.
711
+ */
712
+ export interface VideoFill {
713
+ /**
714
+ * The type of media.
715
+ */
716
+ readonly type: "video";
717
+ /**
718
+ * A unique identifier that points to a video asset in Canva's backend.
719
+ */
720
+ videoRef: string;
721
+ /**
722
+ * If `true`, the video is flipped horizontally.
723
+ */
724
+ flipX: boolean;
725
+ /**
726
+ * If `true`, the video is flipped vertically.
727
+ */
728
+ flipY: boolean;
729
+ }
730
+ /**
731
+ * @beta
732
+ * A media item that fills the interior of a path.
733
+ */
734
+ export type MediaFill = ImageFill | VideoFill;
735
+ /**
736
+ * @beta
737
+ * A solid color that fills the interior of a path.
738
+ */
739
+ export interface SolidFill {
740
+ /**
741
+ * The type of color.
742
+ */
743
+ readonly type: "solid";
744
+ /**
745
+ * The color of the fill, as a hex code.
746
+ *
747
+ * @remarks
748
+ * - Must be six characters long.
749
+ * - Must start with a `#`.
750
+ * - Must use lowercase letters.
751
+ */
752
+ color: HexCode;
753
+ }
754
+ /**
755
+ * @beta
756
+ * A color that fills the interior of a path.
757
+ */
758
+ export type ColorFill = SolidFill | Unsupported;
759
+ /**
760
+ * @beta
761
+ * Describes how a path is filled with color or media.
762
+ *
763
+ * @remarks
764
+ * If both `media` and `color` are defined, `media` takes precedence.
765
+ */
766
+ export interface Fill {
767
+ /**
768
+ * The media fill for the path, if any.
769
+ */
770
+ media: MediaFill | undefined;
771
+ /**
772
+ * The color fill for the path, if any.
773
+ */
774
+ color: ColorFill | undefined;
775
+ }
776
+ /**
777
+ * @beta
778
+ * The scale and cropping of a shape.
779
+ *
780
+ * @remarks
781
+ * This is similar to the `viewBox` attribute of an `SVGElement`.
782
+ */
783
+ export type AlignedBox = {
784
+ /**
785
+ * The distance of the shape from the top edge of the element, in pixels.
786
+ */
787
+ readonly top: number;
788
+ /**
789
+ * The distance of the shape from the left edge of the element, in pixels.
790
+ */
791
+ readonly left: number;
792
+ /**
793
+ * The width of the view box, in pixels.
794
+ */
795
+ readonly width: number;
796
+ /**
797
+ * The height of the view box, in pixels.
798
+ */
799
+ readonly height: number;
800
+ };
801
+ /**
802
+ * @beta
803
+ * A path that defines the structure of a shape element.
804
+ */
805
+ export interface Path {
806
+ /**
807
+ * The shape of the path.
808
+ *
809
+ * @remarks
810
+ * This is similar to the `d` attribute of an SVG's `path` element, with some limitations:
811
+ *
812
+ * - Must start with an `M` command.
813
+ * - Only one `M` command is allowed.
814
+ * - `Q` and `T` commands are not permitted.
815
+ * - The path must be closed using a `Z` command or matching start and end coordinates.
816
+ */
817
+ readonly d: string;
818
+ /**
819
+ * The appearance of the path's interior.
820
+ */
821
+ readonly fill: Fill;
822
+ /**
823
+ * The stroke (outline) of the path, if any.
824
+ */
825
+ readonly stroke: Stroke | undefined;
826
+ }
827
+ /**
828
+ * @beta
829
+ * Represents an outline, such as the border of an element.
830
+ */
831
+ export interface Stroke {
832
+ /**
833
+ * The weight (thickness) of the stroke.
834
+ *
835
+ * @remarks
836
+ * - Minimum: 0
837
+ * - Maximum: 100
838
+ */
839
+ weight: number;
840
+ /**
841
+ * The color of the stroke.
842
+ */
843
+ color: ColorFill;
844
+ }
845
+ /**
846
+ * @beta
847
+ * The basic properties of an element.
848
+ *
849
+ * @remarks
850
+ * These properties are shared by all elements in a design.
851
+ */
852
+ export interface Element extends Dimensions {
853
+ /**
854
+ * If `true`, the element is locked and cannot be modified.
855
+ */
856
+ readonly locked: boolean;
857
+ /**
858
+ * The distance from the top edge of the container, in pixels.
859
+ *
860
+ * @remarks
861
+ * - The pixels are relative to their container.
862
+ * - Minimum: -32768
863
+ * - Maximum: 32767
864
+ */
865
+ top: number;
866
+ /**
867
+ * The distance from the left edge of the container, in pixels.
868
+ *
869
+ * @remarks
870
+ * - The pixels are relative to their container.
871
+ * - Minimum: -32768
872
+ * - Maximum: 32767
873
+ */
874
+ left: number;
875
+ /**
876
+ * A rotation, in degrees.
877
+ *
878
+ * @remarks
879
+ * - Minimum: -180
880
+ * - Maximum: 180
881
+ */
882
+ rotation: number;
883
+ /**
884
+ * Transparency as a percentage.
885
+ *
886
+ * @remarks
887
+ * - Minimum: 0
888
+ * - Maximum: 1
889
+ */
890
+ transparency: number;
891
+ }
892
+ /**
893
+ * @beta
894
+ * Represents a rectangular element.
895
+ */
896
+ export interface Rect {
897
+ /**
898
+ * The type of content.
899
+ */
900
+ readonly type: "rect";
901
+ /**
902
+ * The appearance of the rectangle's interior.
903
+ */
904
+ readonly fill: Fill;
905
+ /**
906
+ * The outline of the rectangle.
907
+ */
908
+ readonly stroke: Stroke;
909
+ }
910
+ /**
911
+ * @beta
912
+ * Represents a vector shape element.
913
+ */
914
+ export interface Shape {
915
+ /**
916
+ * The type of content.
917
+ */
918
+ readonly type: "shape";
919
+ /**
920
+ * The scale and cropping of the shape.
921
+ */
922
+ viewBox: AlignedBox;
923
+ /**
924
+ * The paths that define the structure of the shape.
925
+ *
926
+ * @remarks
927
+ * - Must have between 1 and 30 paths.
928
+ * - Total size of all paths must not exceed 2kb.
929
+ * - Maximum of 6 unique fill colors across all paths.
930
+ */
931
+ readonly paths: ReadableList<Path>;
932
+ }
933
+ /**
934
+ * @beta
935
+ * Represents group content.
936
+ */
937
+ export interface Group<C> {
938
+ /**
939
+ * The type of content.
940
+ */
941
+ readonly type: "group";
942
+ /**
943
+ * The elements that exist within the group.
944
+ */
945
+ readonly contents: ReadableList<C>;
946
+ }
947
+ /**
948
+ * @beta
949
+ * Represents rich media content.
950
+ */
951
+ export interface Embed {
952
+ /**
953
+ * The type of content.
954
+ */
955
+ readonly type: "embed";
956
+ /**
957
+ * The URL of the rich media.
958
+ *
959
+ * @remarks
960
+ * This URL must be supported by the Iframely API.
961
+ */
962
+ readonly url: string;
963
+ }
964
+ /**
965
+ * @beta
966
+ * Represents text content.
967
+ */
968
+ export interface Text {
969
+ /**
970
+ * The type of content.
971
+ */
972
+ readonly type: "text";
973
+ /**
974
+ * The text content.
975
+ */
976
+ readonly text: RichtextRange;
977
+ }
978
+ /**
979
+ * @beta
980
+ * An element that renders a rectangle.
981
+ *
982
+ * @remarks
983
+ * The rectangle can be filled with image content, video content, or a solid color.
984
+ */
985
+ export interface RectElement extends Rect, Element {}
986
+ /**
987
+ * @beta
988
+ * An element that renders a vector shape.
989
+ */
990
+ export interface ShapeElement extends Shape, Element {}
991
+ /**
992
+ * @beta
993
+ * An element that renders a group of other elements.
994
+ */
995
+ export interface GroupElement extends Group<GroupContentElement>, Element {}
996
+ /**
997
+ * @beta
998
+ * An element that embeds rich media, such as a YouTube video.
999
+ */
1000
+ export interface EmbedElement extends Embed, Element {}
1001
+ /**
1002
+ * @beta
1003
+ * An element that renders text content.
1004
+ */
1005
+ export interface TextElement extends Text, Element {}
1006
+ /**
1007
+ * @beta
1008
+ * An element that is not supported by the Apps SDK.
1009
+ */
1010
+ export interface UnsupportedElement extends Unsupported, Element {}
1011
+ /**
1012
+ * @beta
1013
+ * An element that can exist in a group element.
1014
+ */
1015
+ export type GroupContentElement =
1016
+ | RectElement
1017
+ | ShapeElement
1018
+ | EmbedElement
1019
+ | TextElement
1020
+ | UnsupportedElement;
1021
+ /**
1022
+ * @beta
1023
+ * An element that can exist on a fixed page.
1024
+ */
1025
+ export type FixedElement =
1026
+ | RectElement
1027
+ | ShapeElement
1028
+ | GroupElement
1029
+ | EmbedElement
1030
+ | TextElement
1031
+ | UnsupportedElement;
1032
+ /**
1033
+ * @beta
1034
+ * A page with fixed dimensions.
1035
+ */
1036
+ export interface FixedPage {
1037
+ /**
1038
+ * The type of page.
1039
+ */
1040
+ readonly type: "fixed";
1041
+ /**
1042
+ * If `true`, the page is locked and cannot be modified.
1043
+ */
1044
+ readonly locked: boolean;
1045
+ /**
1046
+ * The dimensions of the page. `dimensions` is undefined for whiteboard pages.
1047
+ */
1048
+ readonly dimensions: Dimensions | undefined;
1049
+ /**
1050
+ * The background of the page. `background` is undefined for whiteboard pages.
1051
+ */
1052
+ readonly background: Fill | undefined;
1053
+ /**
1054
+ * The elements on the page.
1055
+ *
1056
+ * @remarks
1057
+ * Elements are rendered in the order they appear in the list.
1058
+ * Later elements appear on top of earlier ones.
1059
+ */
1060
+ readonly elements: List<FixedElement>;
1061
+ }
1062
+ /**
1063
+ * @beta
1064
+ * A page in a design.
1065
+ */
1066
+ export type Page = FixedPage | Unsupported;
1067
+
1068
+ {
1069
+ }
1070
+ }
1071
+
352
1072
  /**
353
1073
  * @public
354
1074
  * An element that's natively supported by the Canva editor.
355
1075
  */
356
1076
  export declare type DesignElement = NativeElement;
357
1077
 
1078
+ /**
1079
+ * @beta
1080
+ * A callback for reading and updating part of a design.
1081
+ * @param draft - The result of reading part of a design.
1082
+ * @param helpers - Helper methods for reading and updating the design.
1083
+ */
1084
+ export declare type DesignOpenCallback = (
1085
+ draft: DesignEditing.DesignOpenResult,
1086
+ helpers: {
1087
+ /**
1088
+ * Provides methods for creating elements.
1089
+ */
1090
+ elementBuilder: DesignEditing.ElementBuilder;
1091
+ }
1092
+ ) => Promise<void> | void;
1093
+
1094
+ /**
1095
+ * @beta
1096
+ * Options for configuring which part of a design to read.
1097
+ */
1098
+ export declare type DesignOpenOptions = DesignContextOptions;
1099
+
358
1100
  /**
359
1101
  * @public
360
1102
  * Provides methods for managing the lifecycle of overlays, such as selected image overlays.
@@ -464,6 +1206,14 @@ export declare type DragStartEvent<E extends Element> = Pick<
464
1206
  currentTarget: E;
465
1207
  };
466
1208
 
1209
+ /**
1210
+ * @beta
1211
+ * Options for configuring how a design is read.
1212
+ */
1213
+ export declare type EditContentOptions<T extends ContentType> = {
1214
+ contentType: T;
1215
+ } & ContextOptions;
1216
+
467
1217
  /**
468
1218
  * @public
469
1219
  * Elements targeting a cursor are a subset of the base Element
@@ -1207,6 +1957,23 @@ export declare type NativeVideoElementWithBox = NativeVideoElement & Box;
1207
1957
  */
1208
1958
  declare type ObjectPrimitive = Boolean | String;
1209
1959
 
1960
+ /**
1961
+ * @beta
1962
+ * Reads a specified part of the user's design and returns all elements in that part.
1963
+ *
1964
+ * @param options - Options for configuring how a design is read.
1965
+ * @param callback - A callback for operating on the design.
1966
+ */
1967
+ export declare const openDesign: (
1968
+ options: DesignOpenOptions,
1969
+ callback: (
1970
+ draft: DesignEditing.DesignOpenResult,
1971
+ helpers: {
1972
+ elementBuilder: DesignEditing.ElementBuilder;
1973
+ }
1974
+ ) => Promise<void> | void
1975
+ ) => Promise<void>;
1976
+
1210
1977
  /**
1211
1978
  * @public
1212
1979
  * An alias for the DesignOverlay interface, providing access to design overlay related functionality
@@ -1376,6 +2143,59 @@ declare type Position = {
1376
2143
  */
1377
2144
  declare type Primitive = undefined | null | number | boolean | string;
1378
2145
 
2146
+ /**
2147
+ * @beta
2148
+ * A snapshot of content returned by a query.
2149
+ *
2150
+ * @remarks
2151
+ * The snapshot is known as the *draft*.
2152
+ */
2153
+ export declare interface QueryContentDraft<T> {
2154
+ /**
2155
+ * The individual content items returned by a query.
2156
+ */
2157
+ readonly contents: readonly T[];
2158
+ /**
2159
+ * Commits any changes made to the items in the `contents` array.
2160
+ *
2161
+ * @remarks
2162
+ * An app must call this method for any changes to be reflected in the user's design.
2163
+ */
2164
+ sync(): Promise<void>;
2165
+ }
2166
+
2167
+ /**
2168
+ * @beta
2169
+ * The result of querying content in a design.
2170
+ */
2171
+ export declare type QueryResult<T extends ContentType> = {
2172
+ ["richtext"]: QueryContentDraft<
2173
+ RichtextRange & {
2174
+ readonly deleted: boolean;
2175
+ }
2176
+ >;
2177
+ }[T];
2178
+
2179
+ /**
2180
+ * @beta
2181
+ * Reads content of the specified type from the user's design.
2182
+ * @param options - Options for configuring how a design is read.
2183
+ * @param callback - A callback for operating on the queried content.
2184
+ */
2185
+ export declare const readContent: <T extends ContentType>(
2186
+ options: EditContentOptions<T>,
2187
+ callback: (draft: QueryResult<T>) => Promise<void> | void
2188
+ ) => Promise<void>;
2189
+
2190
+ /**
2191
+ * @beta
2192
+ * A callback for reading and updating part of a design.
2193
+ * @param draft - The result of reading the content in a design.
2194
+ */
2195
+ export declare type ReadContentCallback<T extends ContentType> = (
2196
+ draft: QueryResult<T>
2197
+ ) => Promise<void> | void;
2198
+
1379
2199
  /**
1380
2200
  * @public
1381
2201
  * Exports the user's design as one or more static files.
@@ -1861,6 +2681,11 @@ export declare type TextDragConfig = {
1861
2681
  * @defaultValue "none"
1862
2682
  */
1863
2683
  decoration?: "none" | "underline";
2684
+ /**
2685
+ * @beta
2686
+ * A unique identifier that points to a font asset in Canva's backend.
2687
+ */
2688
+ fontRef?: FontRef;
1864
2689
  };
1865
2690
 
1866
2691
  /**
@@ -1,7 +1,21 @@
1
- "use strict"
1
+ "use strict";
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ readContent: function() {
13
+ return readContent;
14
+ },
15
+ openDesign: function() {
16
+ return openDesign;
17
+ }
18
+ });
5
19
  _export_star(require("./public"), exports);
6
20
  function _export_star(from, to) {
7
21
  Object.keys(from).forEach(function(k) {
@@ -17,5 +31,8 @@ function _export_star(from, to) {
17
31
  return from;
18
32
  }
19
33
  var _window___canva___sdkRegistration, _window___canva__;
34
+ const { canva_sdk } = window;
35
+ const readContent = canva_sdk.design.v2.designInteraction.readContent;
36
+ const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
20
37
  (_window___canva__ =
21
- 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', 'ga');
38
+ 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');
@@ -1,4 +1,7 @@
1
1
  var _window___canva___sdkRegistration, _window___canva__;
2
+ const { canva_sdk } = window;
3
+ export const readContent = canva_sdk.design.v2.designInteraction.readContent;
4
+ export const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
2
5
  export * from './public';
3
6
  (_window___canva__ =
4
- 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', 'ga');
7
+ 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');
package/package.json CHANGED
@@ -1,25 +1,25 @@
1
1
  {
2
2
  "name": "@canva/design",
3
- "version": "2.1.0",
3
+ "version": "2.2.0-beta.1",
4
4
  "description": "The Canva Apps SDK design library",
5
5
  "author": "Canva Pty Ltd.",
6
6
  "license": "SEE LICENSE IN LICENSE.md FILE",
7
7
  "peerDependencies": {
8
8
  "@canva/error": "^2.0.0"
9
9
  },
10
- "main": "./lib/cjs/sdk/design/index.js",
11
- "module": "./lib/esm/sdk/design/index.js",
10
+ "main": "./lib/cjs/sdk/design/beta.js",
11
+ "module": "./lib/esm/sdk/design/beta.js",
12
12
  "exports": {
13
13
  ".": {
14
14
  "require": {
15
- "types": "./index.d.ts",
16
- "default": "./lib/cjs/sdk/design/index.js"
15
+ "types": "./beta.d.ts",
16
+ "default": "./lib/cjs/sdk/design/beta.js"
17
17
  },
18
18
  "import": {
19
- "types": "./index.d.ts",
20
- "default": "./lib/esm/sdk/design/index.js"
19
+ "types": "./beta.d.ts",
20
+ "default": "./lib/esm/sdk/design/beta.js"
21
21
  }
22
22
  }
23
23
  },
24
- "typings": "./index.d.ts"
24
+ "typings": "./beta.d.ts"
25
25
  }