@canva/design 1.11.0-beta.1 → 2.0.0

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.
package/beta.d.ts DELETED
@@ -1,2058 +0,0 @@
1
- /**
2
- * Adds an audio track to the user's design.
3
- * @public
4
- * @param audioTrack - The audio track to add to the user's design.
5
- */
6
- export declare function addAudioTrack(audioTrack: AudioTrack): Promise<void>;
7
-
8
- /**
9
- * @beta
10
- * Adds a native element to the user's design.
11
- * @param element - The element to add to the user's design.
12
- */
13
- export declare function addNativeElement(
14
- element:
15
- | NativeElement
16
- | NativeElementWithBox
17
- | NativeTableElement
18
- | NativeRichtextElement
19
- | NativeRichtextElementWithBox
20
- ): Promise<void>;
21
-
22
- /**
23
- * @public
24
- * Adds a native element to the user's design.
25
- * @param element - The element to add to the user's design.
26
- */
27
- export declare function addNativeElement(
28
- element: NativeElement | NativeElementWithBox
29
- ): Promise<void>;
30
-
31
- /**
32
- * @public
33
- * Adds a new page immediately after the currently selected page.
34
- * @param opts - Configuration for the new page to be added.
35
- */
36
- export declare function addPage(opts?: {
37
- /** Elements to be added to the page */
38
- elements?: NativeElementWithBox[];
39
- /**
40
- * The page background. This can be a solid color, an image or a video.
41
- **/
42
- background?: PageBackgroundFill;
43
- /** A page title which must be no longer than 255 characters */
44
- title?: string;
45
- }): Promise<void>;
46
-
47
- /**
48
- * @public
49
- * Describes any alt-text that will be added for a11y.
50
- */
51
- export declare type AltText = {
52
- /**
53
- * The text that will appear as alt-text.
54
- */
55
- text: string;
56
- /**
57
- * An optional property that will determine whether text is shown in just the editor or both editor and view mode.
58
- * If set to true, alt-text will only be rendered inside the editor.
59
- * If set to false or omitted, alt-text will be rendered in both the editor and in view only mode.
60
- */
61
- decorative: boolean | undefined;
62
- };
63
-
64
- /**
65
- * @public
66
- * A callback that runs when an app element's data is created or updated,
67
- * or when the user selects an existing app element.
68
- */
69
- export declare type AppElementChangeHandler<A extends AppElementData> = (
70
- appElement:
71
- | {
72
- data: A;
73
- version: number;
74
- }
75
- | undefined
76
- ) => void;
77
-
78
- /**
79
- * @public
80
- * A client interface for managing app elements and app element data.
81
- */
82
- export declare interface AppElementClient<A extends AppElementData> {
83
- /**
84
- * Attaches data to the selected app element or creates a new app element if one is not selected.
85
- * If data already exists, it's overwritten.
86
- * @param appElementData - The data to attach to the app element.
87
- */
88
- addOrUpdateElement(appElementData: A, placement?: Placement): Promise<void>;
89
- /**
90
- * Registers a callback that runs when the app element's data is created or
91
- * updated and when the user selects an existing app element.
92
- * @param handler - The callback to run when the app element's data is changed
93
- * and when the user selects an existing app element.
94
- */
95
- registerOnElementChange(handler: AppElementChangeHandler<A>): void;
96
- }
97
-
98
- /**
99
- * @public
100
- * Configuration for an AppElementClient
101
- */
102
- export declare type AppElementClientConfiguration<A extends AppElementData> = {
103
- /**
104
- * The AppElementRenderer to use when rendering the app element
105
- */
106
- render: AppElementRenderer<A>;
107
- };
108
-
109
- /**
110
- * @public
111
- * The data an app can attach to an app element.
112
- */
113
- export declare type AppElementData = Record<string, Value>;
114
-
115
- /**
116
- * @public
117
- * A callback that runs when an app's element is changed.
118
- *
119
- * @remarks
120
- * This callback must return one or more elements to render within the app element.
121
- */
122
- export declare type AppElementRenderer<A extends AppElementData> = (
123
- appElementData: A
124
- ) => AppElementRendererOutput;
125
-
126
- /**
127
- * @public
128
- * A return value of {@link AppElementRenderer} function.
129
- * It is an array of elements to render within an app element.
130
- */
131
- export declare type AppElementRendererOutput = NativeSimpleElementWithBox[];
132
-
133
- /**
134
- * @public
135
- * A unique identifier that references an app runtime process
136
- */
137
- export declare type AppProcessId = string & {
138
- __appProcessId: never;
139
- };
140
-
141
- /**
142
- * @public
143
- * Options for defining the drag-and-drop behavior of audio tracks.
144
- */
145
- export declare type AudioDragConfig = {
146
- /**
147
- * The type of element.
148
- */
149
- type: "AUDIO";
150
- /**
151
- * A function that returns a reference (ref) to an audio asset in Canva's backend.
152
- */
153
- resolveAudioRef: () => Promise<{
154
- ref: AudioRef;
155
- }>;
156
- /**
157
- * The duration of the audio track, in milliseconds.
158
- */
159
- durationMs: number;
160
- /**
161
- * A human readable title for the audio track.
162
- */
163
- title: string;
164
- };
165
-
166
- /**
167
- * @public
168
- * A unique identifier that references an audio asset in Canva's backend.
169
- */
170
- export declare type AudioRef = string & {
171
- __audioRef: never;
172
- };
173
-
174
- /**
175
- * @public
176
- * An audio track that can be added to a user's design.
177
- */
178
- export declare type AudioTrack = {
179
- /**
180
- * A unique identifier that references an audio asset in Canva's backend.
181
- */
182
- ref: AudioRef;
183
- };
184
-
185
- /**
186
- * @beta
187
- * The boundaries of a rich text region.
188
- */
189
- export declare type Bounds = {
190
- /**
191
- * The index of the character from which the region starts.
192
- *
193
- * @remarks
194
- * A value of `0` means the region starts from the first character.
195
- */
196
- index: number;
197
- /**
198
- * The length of the text region.
199
- */
200
- length: number;
201
- };
202
-
203
- /**
204
- * @public
205
- * The dimensions, position, and rotation of an element.
206
- *
207
- * @remarks
208
- * Units are relative to the parent container both in terms of position and size
209
- */
210
- export declare type Box = Position & (WidthAndHeight | Width | Height);
211
-
212
- /**
213
- * @beta
214
- * A cell for a NativeTableElement. Cells can have text content and a background color.
215
- * A cell can also be sized by setting the colSpan and rowSpan values for how many columns
216
- * and rows the cell occupies respectively.
217
- */
218
- export declare type Cell = {
219
- /**
220
- * The text content of the table cell
221
- */
222
- text?: NativeTextElement;
223
- /**
224
- * The background of the table cell
225
- */
226
- fill?: Pick<Fill, "color">;
227
- /**
228
- * How many columns this cell occupies
229
- */
230
- colSpan?: number;
231
- /**
232
- * How many rows this cell occupies
233
- */
234
- rowSpan?: number;
235
- };
236
-
237
- declare type CommonImageDragConfig = {
238
- /**
239
- * The type of element.
240
- */
241
- type: "IMAGE";
242
- /**
243
- * The dimensions of the preview image.
244
- *
245
- * @remarks
246
- * The preview image is the image that users see under their cursor while dragging
247
- * it into their design.
248
- */
249
- previewSize: Dimensions;
250
- };
251
-
252
- /**
253
- * @public
254
- * A snapshot of some part of the document content.
255
- *
256
- * @remarks
257
- * You can mutate the values in the `contents` array and then persist those changes with the `save` method.
258
- */
259
- export declare interface ContentDraft<T> {
260
- /**
261
- * The selected content.
262
- */
263
- readonly contents: readonly T[];
264
- /**
265
- * Saves changes made to items in the `contents` array.
266
- * Once saved, those changes are reflected in the user's design.
267
- *
268
- * @remarks
269
- * Any other changes to the content since calling the `read` method, such as the user editing the content directly, will be overwritten.
270
- * Only properties that are different from the original state are written to the design.
271
- */
272
- save(): Promise<void>;
273
- }
274
-
275
- /**
276
- * @beta
277
- * A type of content that can be read from a user's design.
278
- */
279
- export declare type ContentType = "richtext";
280
-
281
- /**
282
- * @beta
283
- * Options for configuring where content in a design should be queried from.
284
- */
285
- declare type ContextOptions = {
286
- context: "current_page";
287
- };
288
-
289
- /**
290
- * @public
291
- * Represents X and Y coordinates.
292
- */
293
- export declare type Coordinates = {
294
- /**
295
- * Represents an X coordinate, in pixels.
296
- */
297
- x: number;
298
- /**
299
- * Represents a Y coordinate, in pixels.
300
- */
301
- y: number;
302
- };
303
-
304
- /**
305
- * @beta
306
- * Creates a new RichtextRange object, which contains methods to manipulate text.
307
- */
308
- export declare function createRichtextRange(): RichtextRange;
309
-
310
- /**
311
- * @public
312
- * Provides methods for interacting with design overlay
313
- */
314
- export declare type DesignOverlay = {
315
- /**
316
- * Registers a callback that runs when an overlay canOpen status changed on a particular target.
317
- *
318
- * @remarks
319
- * The callback fires immediately
320
- */
321
- registerOnCanOpen<Target extends OverlayTarget>(opts: {
322
- target: Target;
323
- onCanOpen(event: OverlayOpenableEvent<Target>): void;
324
- }): () => void;
325
- };
326
-
327
- /**
328
- * @beta
329
- * Provides methods for interacting with the user's selected content, such as images or text.
330
- */
331
- export declare type DesignSelection = {
332
- /**
333
- * Registers a callback that runs when a user selects an element that contains the specified type of content.
334
- *
335
- * @remarks
336
- * The callback fires immediately if content is already selected.
337
- */
338
- registerOnChange<Scope extends SelectionScope>(opts: {
339
- /**
340
- * The type of content that, when selected, triggers the `onChange` callback.
341
- */
342
- scope: Scope;
343
- /**
344
- * The callback to run when the selection changes.
345
- */
346
- onChange(event: SelectionEvent<Scope>): void;
347
- }): () => void;
348
- };
349
-
350
- /**
351
- * @public
352
- * JWT that contains the Design ID and App ID.
353
- */
354
- export declare type DesignToken = {
355
- token: string;
356
- };
357
-
358
- /**
359
- * @public
360
- * Represents a width and a height.
361
- */
362
- export declare type Dimensions = {
363
- /**
364
- * Represents a width, in pixels.
365
- */
366
- width: number;
367
- /**
368
- * Represents a height, in pixels.
369
- */
370
- height: number;
371
- };
372
-
373
- /**
374
- * @public
375
- * Callbacks that run during the lifecycle of a drag-and-drop.
376
- */
377
- export declare type DragCallback = {
378
- /**
379
- * A callback that runs when the user starts dragging an element into their design.
380
- *
381
- * @param element - The element being dragged into the user's design.
382
- */
383
- onDragStart: (element: HTMLElement) => void;
384
- /**
385
- * A callback that runs when the user finishes dragging an element into their design.
386
- *
387
- * @param element - The element being dragged into the user's design.
388
- */
389
- onDragEnd: (element: HTMLElement) => void;
390
- };
391
-
392
- /**
393
- * @public
394
- * Options for making an element draggable.
395
- */
396
- export declare type DraggableElementData = ElementData | ImageElementData;
397
-
398
- /**
399
- * @public
400
- * Represents a drag start event that occurs when initiating a drag-and-drop behavior inside the app.
401
- */
402
- export declare type DragStartEvent<E extends Element> = Pick<
403
- DragEvent,
404
- "dataTransfer" | "currentTarget" | "preventDefault" | "clientX" | "clientY"
405
- > & {
406
- currentTarget: E;
407
- };
408
-
409
- /**
410
- * @beta
411
- * Options for configuring how a design is read.
412
- */
413
- export declare type EditContentOptions<T extends ContentType> = {
414
- contentType: T;
415
- } & ContextOptions;
416
-
417
- /**
418
- * @public
419
- * Options for making an `HTMLElement` draggable.
420
- */
421
- export declare type ElementData = DragCallback & {
422
- /**
423
- * The element to be made draggable.
424
- */
425
- node: HTMLElement;
426
- /**
427
- * Options for defining the drag-and-drop behavior.
428
- *
429
- * @remarks
430
- * This data is required because it can't be inferred from the `node` property.
431
- */
432
- dragData: UserSuppliedDragData;
433
- };
434
-
435
- /**
436
- * @public
437
- *
438
- * Options for defining the drag-and-drop behaviour for embeds.
439
- */
440
- export declare type EmbedDragConfig = {
441
- /**
442
- * The type of element.
443
- */
444
- type: "EMBED";
445
- /**
446
- * The dimensions of the preview image.
447
- * The preview image is the image that users see under their cursor
448
- * while dragging it into their design.
449
- */
450
- previewSize: Dimensions;
451
- /**
452
- * Represents the preview image of the embed.
453
- */
454
- previewUrl: string;
455
- /**
456
- * Represents the embed source url.
457
- */
458
- embedUrl: string;
459
- };
460
-
461
- /**
462
- * @public
463
- * Export aborted response
464
- *
465
- * @remarks
466
- * Ane export flow is considered aborted when a user closes
467
- * the export options menu.
468
- */
469
- export declare type ExportAborted = {
470
- /**
471
- * The status of the export flow when the user has aborted the export menu.
472
- */
473
- status: "ABORTED";
474
- };
475
-
476
- /**
477
- * @public
478
- * The exported file.
479
- */
480
- export declare type ExportBlob = {
481
- /**
482
- * The URL of the exported design.
483
- *
484
- * @remarks
485
- * If the user's design contains multiple pages but is exported in a format that doesn't support multiple pages, the URL will point to a ZIP file that contains each page as a separate file.
486
- *
487
- * For example:
488
- *
489
- * - If a single-page design is exported as a JPG, the URL will point to a JPG file
490
- * - If a multi-page design is exported as a JPG, the URL will point to a ZIP file that contains a separate JPG file for each page
491
- * - If a multi-page design is exported as a PDF, the URL will point to a PDF file that contains all of the pages
492
- *
493
- * The following file types support multiple pages:
494
- *
495
- * - `"GIF"`
496
- * - `"PDF_STANDARD"`
497
- * - `"PPTX"`
498
- * - `"VIDEO"`
499
- *
500
- * The following file types do not support multiple pages:
501
- *
502
- * - `"JPG"`
503
- * - `"PNG"`
504
- * - `"SVG"`
505
- */
506
- url: string;
507
- };
508
-
509
- /**
510
- * @public
511
- * Export completed response
512
- */
513
- export declare type ExportCompleted = {
514
- /**
515
- * The status of the export flow when the user has submitted the export menu.
516
- */
517
- status: "COMPLETED";
518
- /**
519
- * The title of the successful export of a design, if it has been set by the user.
520
- */
521
- title?: string;
522
- /**
523
- * The exported files.
524
- *
525
- * @remarks
526
- * This array only contains one element. This is because, if a multi-page design is exported as multiple files, the files are exported in a ZIP file. In the future, there'll be an option for each file to be a separate element in the array.
527
- */
528
- exportBlobs: ExportBlob[];
529
- };
530
-
531
- /**
532
- * @public
533
- * The types of files that Canva supports for exported designs.
534
- */
535
- export declare type ExportFileType =
536
- | "PNG"
537
- | "JPG"
538
- | "PDF_STANDARD"
539
- | "VIDEO"
540
- | "GIF"
541
- | "PPTX"
542
- | "SVG";
543
-
544
- /**
545
- * @public
546
- * The options for configuring the export of a design.
547
- */
548
- export declare type ExportRequest = {
549
- /**
550
- * The types of files the user can export their design as.
551
- *
552
- * @remarks
553
- * You must provide at least one file type.
554
- */
555
- acceptedFileTypes: ExportFileType[];
556
- };
557
-
558
- /**
559
- * @public
560
- * The response of an export request.
561
- */
562
- export declare type ExportResponse = ExportCompleted | ExportAborted;
563
-
564
- /**
565
- * @public
566
- *
567
- * Options for defining the Drag and Drop behaviour for images uploaded
568
- * via the Content capability.
569
- */
570
- export declare type ExternalImageDragConfig = CommonImageDragConfig & {
571
- /**
572
- * The function that resolves an image ref
573
- * @remarks
574
- *
575
- * This function will be run during the drag process in order to fetch the media ref of the
576
- * external image being fetched. This function should return the result of `upload`
577
- * from the content capability.
578
- */
579
- resolveImageRef: () => Promise<{
580
- ref: ImageRef;
581
- }>;
582
- /**
583
- * The URL of the preview image.
584
- *
585
- * @remarks
586
- * The preview image is the image that users see under their cursor while dragging
587
- * it into their design.
588
- */
589
- previewUrl: string;
590
- /**
591
- * The dimensions of the full-size image.
592
- *
593
- * @remarks
594
- * The full-size image is the image that Canva uploads to the user's account and
595
- * adds to their design.
596
- *
597
- * If omitted, the value of the `previewSize` property is used as a fallback.
598
- */
599
- fullSize?: Dimensions;
600
- };
601
-
602
- /**
603
- * @public
604
- * The appearance of a path's interior.
605
- */
606
- export declare type Fill = {
607
- /**
608
- * Boolean defining whether image or video can be dropped on the fill by the user.
609
- * If set to true, images or videos can be dropped on the fill.
610
- */
611
- dropTarget?: boolean;
612
- /**
613
- * The color of the fill as a hex code.
614
- *
615
- * @remarks
616
- * The hex code must include all six characters and be prefixed with a # symbol (e.g. #ff0099).
617
- * Only one type of fill (color, image or video) can be set.
618
- */
619
- color?: string;
620
- /**
621
- * An asset (image or video) that will be used to fill the given path.
622
- *
623
- * @remarks
624
- * Only one type of fill (color, image or video) can be set.
625
- */
626
- asset?: ImageFill | VideoFill;
627
- };
628
-
629
- /**
630
- * @public
631
- * A reference to a font that can be used in other parts of the SDK.
632
- */
633
- export declare type FontRef = string & {
634
- __fontRef: never;
635
- };
636
-
637
- /**
638
- * @public
639
- * Font weights supported in the SDK.
640
- **/
641
- export declare type FontWeight =
642
- | "normal"
643
- | "thin"
644
- | "extralight"
645
- | "light"
646
- | "medium"
647
- | "semibold"
648
- | "bold"
649
- | "ultrabold"
650
- | "heavy";
651
-
652
- /**
653
- * Allows to get the context of currently selected page.
654
- * @public
655
- * @returns Page context of currently selected page
656
- */
657
- export declare function getCurrentPageContext(): Promise<PageContext>;
658
-
659
- /**
660
- * @public
661
- * Gets the default dimensions that a new page will have when it is added to a design.
662
- * It is possible for a user to resize a page without resizing the entire design, e.g. by clicking
663
- * "Expand to Whiteboard". However, there will always be a single set of default dimensions for a
664
- * design that is applied whenever a new page is created.
665
- *
666
- * Returns `undefined` if the design is unbounded (e.g. Whiteboard or Doc).
667
- */
668
- export declare function getDefaultPageDimensions(): Promise<
669
- Dimensions | undefined
670
- >;
671
-
672
- /**
673
- * @public
674
- * Retrieves a signed JWT that contains the Design ID, App ID and User ID.
675
- */
676
- export declare function getDesignToken(): Promise<DesignToken>;
677
-
678
- declare type Height = {
679
- width: "auto";
680
- height: number;
681
- };
682
-
683
- /**
684
- * @public
685
- * Options for defining the drag-and-drop behavior of an image element that can be defined by an
686
- * app developer.
687
- */
688
- export declare type ImageDragConfig = ExternalImageDragConfig;
689
-
690
- /**
691
- * @public
692
- * Options for defining the drag-and-drop behavior for images.
693
- */
694
- export declare type ImageDragConfigForElement<E extends Element> =
695
- E extends HTMLImageElement
696
- ? Partial<ImageDragConfig> & Pick<ImageDragConfig, "type">
697
- : ImageDragConfig;
698
-
699
- /**
700
- * @public
701
- * Options for making an `HTMLImageElement` draggable.
702
- */
703
- export declare type ImageElementData = DragCallback & {
704
- /**
705
- * The element to be made draggable.
706
- */
707
- node: HTMLImageElement;
708
- /**
709
- * Options for defining the drag-and-drop behavior.
710
- *
711
- * @remarks
712
- * If any of this data is omitted, it's inferred from the `node` property.
713
- */
714
- dragData?:
715
- | Partial<UserSuppliedImageDragData>
716
- | (Partial<UserSuppliedVideoDragData> &
717
- Pick<UserSuppliedVideoDragData, "type" | "resolveVideoRef">);
718
- };
719
-
720
- /**
721
- * @public
722
- * An image asset that will be used to fill the given path.
723
- */
724
- export declare type ImageFill = {
725
- /**
726
- * Type of an asset that will be used to fill the given path.
727
- */
728
- type: "IMAGE";
729
- /**
730
- * A unique identifier that references an image asset in Canva's backend.
731
- */
732
- ref: ImageRef;
733
- };
734
-
735
- /**
736
- * @public
737
- * A unique identifier that references an image asset in Canva's backend.
738
- */
739
- export declare type ImageRef = string & {
740
- __imageRef: never;
741
- };
742
-
743
- /**
744
- * @public
745
- * @param appElementConfig - Configuration for an AppElementClient
746
- */
747
- export declare function initAppElement<A extends AppElementData>(
748
- appElementConfig: AppElementClientConfiguration<A>
749
- ): AppElementClient<A>;
750
-
751
- /**
752
- * @beta
753
- *
754
- * Inline formatting values for richtext
755
- */
756
- export declare type InlineFormatting = {
757
- /**
758
- * The color of the text as a hex code.
759
- *
760
- * @remarks
761
- * The hex code must include all six characters and be prefixed with a # symbol
762
- * (e.g. #ff0099). The default value is #000000.
763
- */
764
- color?: string;
765
- /**
766
- * The weight (thickness) of the font.
767
- *
768
- * @remarks
769
- * The available font weights depend on the font.
770
- *
771
- * @defaultValue 'normal'
772
- */
773
- fontWeight?: FontWeight;
774
- /**
775
- * The style of the font.
776
- * @defaultValue 'normal'
777
- */
778
- fontStyle?: "normal" | "italic";
779
- /**
780
- * The decoration of the text.
781
- * @defaultValue 'none'
782
- */
783
- decoration?: "none" | "underline";
784
- /**
785
- * The strikethrough of the text.
786
- * @defaultValue 'none'
787
- */
788
- strikethrough?: "none" | "strikethrough";
789
- /**
790
- * A url that the underlying text will link to
791
- */
792
- link?: string;
793
- };
794
-
795
- /**
796
- * @public
797
- * A native element.
798
- */
799
- export declare type NativeElement =
800
- | NativeImageElement
801
- | NativeVideoElement
802
- | NativeEmbedElement
803
- | NativeTextElement
804
- | NativeShapeElement
805
- | NativeGroupElement;
806
-
807
- /**
808
- * @public
809
- * The types of elements an app can add to a user's design.
810
- */
811
- export declare type NativeElementType =
812
- | "IMAGE"
813
- | "EMBED"
814
- | "TEXT"
815
- | "SHAPE"
816
- | "VIDEO";
817
-
818
- /**
819
- * @public
820
- * An element that exists within an app or group element.
821
- */
822
- export declare type NativeElementWithBox =
823
- | NativeImageElementWithBox
824
- | NativeVideoElementWithBox
825
- | NativeEmbedElementWithBox
826
- | NativeTextElementWithBox
827
- | NativeShapeElementWithBox
828
- | NativeGroupElementWithBox;
829
-
830
- /**
831
- * @public
832
- * An element that renders an embeddable piece of media, such as a YouTube video.
833
- */
834
- export declare type NativeEmbedElement = {
835
- /**
836
- * The type of element.
837
- */
838
- type: "EMBED";
839
- /**
840
- * The URL of the embed. This URL must be supported by the Iframely API.
841
- */
842
- url: string;
843
- };
844
-
845
- /**
846
- * @public
847
- * An element that renders an embeddable piece of media, such as a YouTube video.
848
- *
849
- * @remarks
850
- * This type includes properties for controlling the position and dimensions of the
851
- * element.
852
- * It will be positioned and sized relative to its parent container.
853
- * The parent container may be an app element, or the current page.
854
- */
855
- export declare type NativeEmbedElementWithBox = {
856
- /**
857
- * The type of element.
858
- */
859
- type: "EMBED";
860
- /**
861
- * The URL of the embed.
862
- *
863
- * @remarks
864
- * This URL must be supported by the Iframely API.
865
- */
866
- url: string;
867
- } & Box;
868
-
869
- /**
870
- * @public
871
- * An element containing two or more {@link NativeElementWithBox}.
872
- */
873
- export declare type NativeGroupElement = {
874
- /**
875
- * The type of element.
876
- */
877
- type: "GROUP";
878
- /**
879
- * The inner elements contained by the group element. These elements require a Box as they are
880
- * relatively positioned to the outer boundaries of the group element.
881
- */
882
- children: NativeSimpleElementWithBox[];
883
- };
884
-
885
- /**
886
- * @public
887
- * An element containing two or more {@link NativeSimpleElementWithBox}.
888
- *
889
- * @remarks
890
- * This type includes properties for controlling the position and dimensions
891
- * of the element
892
- */
893
- export declare type NativeGroupElementWithBox = {
894
- /**
895
- * The type of element.
896
- */
897
- type: "GROUP";
898
- /**
899
- * The inner elements contained by the group element. These elements require a Box as they are
900
- * relatively positioned to the outer boundaries of the group element.
901
- */
902
- children: NativeSimpleElementWithBox[];
903
- } & Box;
904
-
905
- /**
906
- * @public
907
- * An element that renders an image in the user's design.
908
- */
909
- export declare type NativeImageElement = {
910
- /**
911
- * The type of element.
912
- */
913
- type: "IMAGE";
914
- /**
915
- * An optional object to describe alt-text that may be applied to an image.
916
- */
917
- altText?: AltText;
918
- } & (
919
- | {
920
- /**
921
- * A data URL that contains the image data.
922
- */
923
- dataUrl: string;
924
- /**
925
- * A unique identifier that references an image asset in Canva's backend.
926
- */
927
- ref?: never;
928
- }
929
- | {
930
- /**
931
- * A data URL that contains the image data.
932
- */
933
- dataUrl?: never;
934
- /**
935
- * A unique identifier that references an image asset in Canva's backend.
936
- */
937
- ref: ImageRef;
938
- }
939
- );
940
-
941
- /**
942
- * @public
943
- * An element that renders an image in the user's design.
944
- *
945
- * @remarks
946
- * This type includes properties for controlling the position and dimensions
947
- * of the element.
948
- * It will be positioned and sized relative to its parent container.
949
- * The parent container may be an app element, or the current page.
950
- */
951
- export declare type NativeImageElementWithBox = NativeImageElement & Box;
952
-
953
- /**
954
- * @beta
955
- * An element that renders richtext.
956
- */
957
- export declare type NativeRichtextElement = {
958
- /**
959
- * The type of element.
960
- */
961
- type: "RICHTEXT";
962
- /**
963
- * An object containing rich text which exposes methods to manipulate the text.
964
- */
965
- range: RichtextRange;
966
- };
967
-
968
- /**
969
- * @beta
970
- * An element that renders richtext.
971
- *
972
- * @remarks
973
- * This type includes properties for controlling the position and dimensions of the
974
- * element.
975
- * It will be positioned and sized relative to its parent container.
976
- * The parent container may be an app element, or the current page.
977
- */
978
- export declare type NativeRichtextElementWithBox = NativeRichtextElement &
979
- TextBox;
980
-
981
- /**
982
- * @public
983
- * An element that renders a vector shape.
984
- */
985
- export declare type NativeShapeElement = {
986
- /**
987
- * The type of element.
988
- */
989
- type: "SHAPE";
990
- /**
991
- * Properties for configuring the scale and cropping of a shape.
992
- *
993
- * @remarks
994
- * This is similar to the `viewBox` attribute of the <svg> element.
995
- */
996
- viewBox: ShapeViewBox;
997
- /**
998
- * The paths that define the shape of the element.
999
- *
1000
- * @remarks
1001
- * There must be between 1 and 30 paths. The maximum combined size of all paths must
1002
- * not exceed 2kb. The maximum numbrer of unique fill colors across all paths is 6.
1003
- */
1004
- paths: ShapePath[];
1005
- };
1006
-
1007
- /**
1008
- * @public
1009
- * An element that renders a vector shape.
1010
- *
1011
- * @remarks
1012
- * This type includes properties for controlling the position and dimensions of the
1013
- * element.
1014
- * It will be positioned and sized relative to its parent container.
1015
- * The parent container may be an app element, or the current page.
1016
- */
1017
- export declare type NativeShapeElementWithBox = {
1018
- /**
1019
- * The type of element.
1020
- */
1021
- type: "SHAPE";
1022
- /**
1023
- * Properties for configuring the scale and cropping of a shape.
1024
- *
1025
- * @remarks
1026
- * This is similar to the `viewBox` attribute of the <svg> element.
1027
- */
1028
- viewBox: ShapeViewBox;
1029
- /**
1030
- * The paths that define the shape of the element.
1031
- */
1032
- paths: ShapePath[];
1033
- } & Box;
1034
-
1035
- /**
1036
- * @public
1037
- * An element that exists within a group element.
1038
- */
1039
- export declare type NativeSimpleElementWithBox = Exclude<
1040
- NativeElementWithBox,
1041
- NativeGroupElementWithBox
1042
- >;
1043
-
1044
- /**
1045
- * @beta
1046
- * An element that renders a table.
1047
- */
1048
- export declare type NativeTableElement = {
1049
- /**
1050
- * The type of element.
1051
- */
1052
- type: "TABLE";
1053
- /**
1054
- * The rows of the table. Each row contains an array of cells, 1 cell per column in the row.
1055
- */
1056
- rows: {
1057
- cells: Cell[];
1058
- }[];
1059
- };
1060
-
1061
- /**
1062
- * @public
1063
- * An element that renders text.
1064
- */
1065
- export declare type NativeTextElement = {
1066
- /**
1067
- * The type of element.
1068
- */
1069
- type: "TEXT";
1070
- /**
1071
- * The text to render within the element. In the future, each item in this
1072
- * array will map to a paragraph. At the moment, only one item is supported.
1073
- */
1074
- children: string[];
1075
- } & TextAttributes;
1076
-
1077
- /**
1078
- * @public
1079
- * An element that renders text.
1080
- *
1081
- * @remarks
1082
- * This type includes properties for controlling the position and dimensions of the
1083
- * element.
1084
- * It will be positioned and sized relative to its parent container.
1085
- * The parent container may be an app element, or the current page.
1086
- */
1087
- export declare type NativeTextElementWithBox = {
1088
- /**
1089
- * The type of element.
1090
- */
1091
- type: "TEXT";
1092
- /**
1093
- * The text to render within the element.
1094
- *
1095
- * @remarks
1096
- * In the future, each item in this array will map to a paragraph. At the moment,
1097
- * only one item is supported.
1098
- */
1099
- children: [string];
1100
- /**
1101
- * The width of the element. This must be an integer between 0 and 32767.
1102
- */
1103
- width?: number;
1104
- /**
1105
- * The distance from the top edge of the container.
1106
- *
1107
- * @remarks
1108
- * This must be an integer between -32768 and 32767. This property doesn't have
1109
- * any effect if the app element only contains a single element.
1110
- */
1111
- top: number;
1112
- /**
1113
- * The distance from the left edge of the container.
1114
- *
1115
- * @remarks
1116
- * This must be an integer between -32768 and 32767. This property doesn't have
1117
- * any effect if the app element only contains a single element.
1118
- */
1119
- left: number;
1120
- /**
1121
- * The rotation of the element, in degrees.
1122
- *
1123
- * @remarks
1124
- * This must be an integer between -180 and 180.
1125
- */
1126
- rotation?: number;
1127
- } & TextAttributes;
1128
-
1129
- /**
1130
- * @public
1131
- * An element that renders a video in the user's design.
1132
- */
1133
- export declare type NativeVideoElement = {
1134
- /**
1135
- * The type of element.
1136
- */
1137
- type: "VIDEO";
1138
- /**
1139
- * A unique identifier that references a video asset in Canva's backend.
1140
- */
1141
- ref: VideoRef;
1142
- /**
1143
- * An optional object to describe alt-text that may be applied to a video.
1144
- */
1145
- altText?: AltText;
1146
- };
1147
-
1148
- /**
1149
- * @public
1150
- * An element that renders a video in the user's design.
1151
- *
1152
- * @remarks
1153
- * This type includes properties for controlling the position and dimensions
1154
- * of the element.
1155
- * It will be positioned and sized relative to its parent container.
1156
- * The parent container may be an app element, or the current page.
1157
- */
1158
- export declare type NativeVideoElementWithBox = NativeVideoElement & Box;
1159
-
1160
- /**
1161
- * The types of object primitive values that can be stored within an app element's data.
1162
- */
1163
- declare type ObjectPrimitive = Boolean | String;
1164
-
1165
- /**
1166
- * @public
1167
- * An alias for the DesignOverlay interface, providing access to design overlay related functionality
1168
- */
1169
- export declare const overlay: DesignOverlay;
1170
-
1171
- /**
1172
- * @public
1173
- * Information about whether the overlay can be opened or not on a particular {@link OverlayTarget}
1174
- */
1175
- export declare type OverlayOpenableEvent<Target extends OverlayTarget> = {
1176
- /**
1177
- * An event indicating whether the overlay can be opened or not when {@link OverlayTarget} is `"image_selection"`
1178
- */
1179
- ["image_selection"]:
1180
- | OverlayUnopenableEvent
1181
- | {
1182
- canOpen: true;
1183
- /**
1184
- * Launch a new app process on an overlay on top of the current selected image fill
1185
- *
1186
- * @remarks
1187
- * `launchParameters` specifies the type of data that are provided to an app process at its launch
1188
- */
1189
- readonly open: (options: {
1190
- launchParameters?: any;
1191
- }) => Promise<AppProcessId>;
1192
- };
1193
- }[Target];
1194
-
1195
- /**
1196
- * @public
1197
- * The target to check if an overlay can be opened for
1198
- */
1199
- export declare type OverlayTarget = "image_selection";
1200
-
1201
- /**
1202
- * @public
1203
- * Information about the overlay when it can not be opened on a particular {@link OverlayTarget}
1204
- */
1205
- declare type OverlayUnopenableEvent = {
1206
- canOpen: false;
1207
- reason: string;
1208
- };
1209
-
1210
- /**
1211
- * @public
1212
- * The appearance of a page's background.
1213
- */
1214
- export declare type PageBackgroundFill = Pick<Fill, "asset" | "color">;
1215
-
1216
- /**
1217
- * @public
1218
- * Page context
1219
- */
1220
- export declare type PageContext = {
1221
- /**
1222
- * Page dimensions in px
1223
- *
1224
- * @remarks
1225
- * This value is undefined for Whiteboard and Docs
1226
- */
1227
- dimensions: PageDimensions | undefined;
1228
- };
1229
-
1230
- /**
1231
- * @public
1232
- * Page Dimensions
1233
- */
1234
- export declare type PageDimensions = {
1235
- width: number;
1236
- height: number;
1237
- };
1238
-
1239
- /**
1240
- * @public
1241
- * The outline of a path.
1242
- */
1243
- export declare type PathStroke = {
1244
- /**
1245
- * The weight of the stroke. This must be an integer between 0 and 100.
1246
- */
1247
- weight: number;
1248
- /**
1249
- * The color of the stroke as a hex code.
1250
- *
1251
- * @remarks
1252
- * The hex code must include all six characters and be prefixed with a # symbol (e.g. #ff0099).
1253
- */
1254
- color: string;
1255
- /**
1256
- * The alignment of the stroke. The only supported value is 'inset'.
1257
- */
1258
- strokeAlign: "inset";
1259
- };
1260
-
1261
- /**
1262
- * @public
1263
- * The dimensions, position, and rotation of an element.
1264
- */
1265
- export declare type Placement = Position & (WidthAndHeight | Width | Height);
1266
-
1267
- declare type Position = {
1268
- /**
1269
- * The distance from the top edge of the container.
1270
- *
1271
- * @remarks
1272
- * This must be an integer between -32768 and 32767. This property doesn't
1273
- * have any effect if the app element only contains a single element.
1274
- */
1275
- top: number;
1276
- /**
1277
- * The distance from the left edge of the container.
1278
- *
1279
- * @remarks
1280
- * This must be an integer between -32768 and 32767. This property doesn't
1281
- * have any effect if the app element only contains a single element.
1282
- */
1283
- left: number;
1284
- /**
1285
- * The rotation of the box, in degrees.
1286
- *
1287
- * @remarks
1288
- * This must be an integer between -180 and 180.
1289
- */
1290
- rotation?: number;
1291
- };
1292
-
1293
- /**
1294
- * The types of primitive values that can be stored within an app element's data.
1295
- *
1296
- * @remarks
1297
- * All types of primitives are supported except for symbols and bigints.
1298
- */
1299
- declare type Primitive = undefined | null | number | boolean | string;
1300
-
1301
- /**
1302
- * @beta
1303
- * A snapshot of content returned by a query.
1304
- *
1305
- * @remarks
1306
- * The snapshot is known as the *draft*.
1307
- */
1308
- export declare interface QueryContentDraft<T> {
1309
- /**
1310
- * The individual content items returned by a query.
1311
- */
1312
- readonly contents: readonly T[];
1313
- /**
1314
- * Commits any changes made to the items in the `contents` array.
1315
- *
1316
- * @remarks
1317
- * An app must call this method for any changes to be reflected in the user's design.
1318
- */
1319
- sync(): Promise<void>;
1320
- }
1321
-
1322
- /**
1323
- * @beta
1324
- * The result of querying content in a design.
1325
- */
1326
- export declare type QueryResult<T extends ContentType> = {
1327
- ["richtext"]: QueryContentDraft<
1328
- RichtextRange & {
1329
- readonly deleted: boolean;
1330
- }
1331
- >;
1332
- }[T];
1333
-
1334
- /**
1335
- * @beta
1336
- * Reads content of the specified type from the user's design.
1337
- * @param options - Options for configuring how a design is read.
1338
- * @param callback - A callback for operating on the queried content.
1339
- */
1340
- export declare function readContent<T extends ContentType>(
1341
- options: EditContentOptions<T>,
1342
- callback: (draft: QueryResult<T>) => Promise<void> | void
1343
- ): Promise<void>;
1344
-
1345
- /**
1346
- * @public
1347
- * Exports the user's design as one or more static files.
1348
- * @param request - The request object containing configurations of the design export.
1349
- */
1350
- export declare function requestExport(
1351
- request: ExportRequest
1352
- ): Promise<ExportResponse>;
1353
-
1354
- /**
1355
- * @beta
1356
- *
1357
- * Formatting values for richtext
1358
- */
1359
- export declare type RichtextFormatting = InlineFormatting & {
1360
- /**
1361
- * @public
1362
- * A reference to the font to use for this text element.
1363
- */
1364
- fontRef?: FontRef;
1365
- /**
1366
- * The size of the text, in pixels.
1367
- *
1368
- * @remarks
1369
- * This must be an integer between 1 and 1000.
1370
- * In the UI of the Canva editor, this number is shown as points (pts), not pixels.
1371
- */
1372
- fontSize?: number;
1373
- /**
1374
- * The alignment of the text.
1375
- * @defaultValue 'start'
1376
- */
1377
- textAlign?: "start" | "center" | "end" | "justify";
1378
- /**
1379
- * The list indentation level of the current paragraph.
1380
- */
1381
- listLevel?: number;
1382
- /**
1383
- * The appearance of the marker for list items.
1384
- *
1385
- * @remarks
1386
- * This property only has an effect if `listLevel` is a number greater than 0.
1387
- *
1388
- * @defaultValue 'none'
1389
- */
1390
- listMarker?:
1391
- | "none"
1392
- | "disc"
1393
- | "circle"
1394
- | "square"
1395
- | "decimal"
1396
- | "lower-alpha"
1397
- | "lower-roman"
1398
- | "checked"
1399
- | "unchecked";
1400
- };
1401
-
1402
- /**
1403
- * @beta
1404
- *
1405
- * An object containing rich text which exposes methods to manipulate the text.
1406
- * This is generated from a selection, with a range created for each instance of text in the selection.
1407
- * For example, if a table is currently selected, a range will be created for each cell.
1408
- * If only part of the text of an element is selected, then only that part will be represented in the range.
1409
- */
1410
- export declare type RichtextRange = {
1411
- /**
1412
- * Formats all paragraphs that overlap the given bounds. The newline character separates text into
1413
- * distinct paragraphs. Newline separator is treated as the final character of each paragraph.
1414
- * All paragraphs that overlap the given bounds will be formatted in their entirety.
1415
- * @param bounds - The region of text overlapping the paragraphs to apply the formatting.
1416
- * @param formatting - The formatting to apply to the paragraph(s).
1417
- */
1418
- formatParagraph(bounds: Bounds, formatting: RichtextFormatting): void;
1419
- /**
1420
- * Formats a given region of rich text with inline formatting.
1421
- * @param bounds - The region of text to apply the formatting.
1422
- * @param formatting - The inline formatting to apply to the region of text.
1423
- */
1424
- formatText(bounds: Bounds, formatting: InlineFormatting): void;
1425
- /**
1426
- * Appends characters to the rich text range.
1427
- * Appended characters can be formatted with inline formatting properties.
1428
- * @param characters - The characters to append to the rich text range.
1429
- * @param formatting - The inline formatting to apply to the appended text.
1430
- */
1431
- appendText(
1432
- characters: string,
1433
- formatting?: InlineFormatting
1434
- ): {
1435
- bounds: Bounds;
1436
- };
1437
- /**
1438
- * Replaces a region of the rich text range with the specified characters.
1439
- * Replaced characters can be formatted with inline formatting properties.
1440
- * @param bounds - The region of text to be replaced.
1441
- * @param characters - The replacement characters.
1442
- * @param formatting - The inline formatting to apply to the replaced text.
1443
- */
1444
- replaceText(
1445
- bounds: Bounds,
1446
- characters: string,
1447
- formatting?: InlineFormatting
1448
- ): {
1449
- bounds: Bounds;
1450
- };
1451
- /**
1452
- * Returns the current state of the rich text range as plain text.
1453
- *
1454
- * @remarks
1455
- * If this range is a draft, this includes any changes to the text that have not been committed.
1456
- */
1457
- readPlaintext(): string;
1458
- /**
1459
- * Returns the current state of the rich text range as an array of text regions.
1460
- * Each region is an object that contains the text itself and its formatting.
1461
- *
1462
- * @remarks
1463
- * If this range is a draft, this array includes any changes to the text that have not been committed.
1464
- */
1465
- readTextRegions(): TextRegion[];
1466
- };
1467
-
1468
- /**
1469
- * @beta
1470
- * An alias for the DesignSelection interface, providing access to design selection related functionality
1471
- */
1472
- export declare const selection: DesignSelection;
1473
-
1474
- /**
1475
- * @beta
1476
- * Information about the user's selection. To access the selected content, call the `read` method.
1477
- */
1478
- export declare interface SelectionEvent<Scope extends SelectionScope> {
1479
- /**
1480
- * The type of content that's selected.
1481
- */
1482
- readonly scope: Scope;
1483
- /**
1484
- * The number of selected elements.
1485
- */
1486
- readonly count: number;
1487
- /**
1488
- * Creates a snapshot of the selected content and returns a *draft* object.
1489
- * The draft has a mutable `contents` property for making changes to the selected content.
1490
- * Any changes made to `contents` are not immediately persisted or reflected in the user's design.
1491
- * To persist the changes, call the `save` method that's available via the draft.
1492
- *
1493
- * @example Replacing text
1494
- * ```
1495
- * const draft = await selectionEvent.read();
1496
- *
1497
- * for(const content of draft.contents) {
1498
- * // This change won't immediately appear in the user's design
1499
- * content.text = "This is the new text";
1500
- * }
1501
- *
1502
- * // The changes will now appear in the user's design
1503
- * await draft.save();
1504
- * ```
1505
- */
1506
- read(): Promise<ContentDraft<SelectionValue<Scope>>>;
1507
- }
1508
-
1509
- /**
1510
- * @beta
1511
- * The type of content that apps can detect selection changes on.
1512
- */
1513
- export declare type SelectionScope =
1514
- | "plaintext"
1515
- | "image"
1516
- | "video"
1517
- | "richtext";
1518
-
1519
- /**
1520
- * @beta
1521
- * The selected content.
1522
- *
1523
- * @remarks
1524
- * The value depends on the {@link SelectionScope}.
1525
- */
1526
- export declare type SelectionValue<Scope extends SelectionScope> = {
1527
- /**
1528
- * The selected content when {@link SelectionScope} is `"plaintext"`.
1529
- */
1530
- ["plaintext"]: {
1531
- /**
1532
- * The text content of the element as plain text.
1533
- */
1534
- text: string;
1535
- };
1536
- /**
1537
- * The selected content when {@link SelectionScope} is `"image"`.
1538
- */
1539
- ["image"]: {
1540
- /**
1541
- * A unique identifier that points to an image asset in Canva's backend.
1542
- */
1543
- ref: ImageRef;
1544
- };
1545
- /**
1546
- * The selected content when {@link SelectionScope} is `"video"`.
1547
- */
1548
- ["video"]: {
1549
- /**
1550
- * A unique identifier that points to an video asset in Canva's backend.
1551
- */
1552
- ref: VideoRef;
1553
- };
1554
- /**
1555
- * The selected content when {@link SelectionScope} is `"richtext"`.
1556
- */
1557
- ["richtext"]: RichtextRange;
1558
- }[Scope];
1559
-
1560
- /**
1561
- * @public
1562
- * Updates the background of the user's current page. The background can be a solid color,
1563
- * an image or a video.
1564
- */
1565
- export declare function setCurrentPageBackground(
1566
- opts: PageBackgroundFill
1567
- ): Promise<void>;
1568
-
1569
- /**
1570
- * @public
1571
- * A path that defines the shape of a shape element.
1572
- */
1573
- export declare type ShapePath = {
1574
- /**
1575
- * The shape of the path.
1576
- *
1577
- * @remarks
1578
- * This accepts the same value as the `d` attribute of the SVG <path> element,
1579
- * with some limitations.
1580
- *
1581
- * The path must:
1582
- *
1583
- * - start with an M command
1584
- * - not have more than one M command
1585
- * - not use the Q command
1586
- * - be closed, either with a Z command at the end or by having the last
1587
- * coordinate match the first coordinate
1588
- */
1589
- d: string;
1590
- /**
1591
- * The appearance of the path's interior.
1592
- */
1593
- fill: Fill;
1594
- /**
1595
- * The outline of the path.
1596
- */
1597
- stroke?: PathStroke;
1598
- };
1599
-
1600
- /**
1601
- * @public
1602
- * Properties for configuring the scale and cropping of a shape.
1603
- *
1604
- * @remarks
1605
- * This is similar to the `viewBox` attribute of the <svg> element.
1606
- */
1607
- export declare type ShapeViewBox = {
1608
- /**
1609
- * The distance of the shape from the top edge of the element.
1610
- */
1611
- top: number;
1612
- /**
1613
- * The distance of the shape from the left edge of the element.
1614
- */
1615
- left: number;
1616
- /**
1617
- * The width of the view box.
1618
- */
1619
- width: number;
1620
- /**
1621
- * The height of the view box.
1622
- */
1623
- height: number;
1624
- };
1625
-
1626
- /**
1627
- * @public
1628
- * Attributes for changing the appearance of text.
1629
- */
1630
- export declare type TextAttributes = {
1631
- /**
1632
- * The size of the text.
1633
- *
1634
- * @remarks
1635
- * The default value is 16. This must be an integer between 1 and 1000.
1636
- * This property will be ignored when adding native text elements without specifying placement.
1637
- */
1638
- fontSize?: number;
1639
- /**
1640
- * The alignment of the text.
1641
- * @defaultValue 'start'
1642
- */
1643
- textAlign?: "start" | "center" | "end" | "justify";
1644
- /**
1645
- * The color of the text as a hex code.
1646
- *
1647
- * @remarks
1648
- * The hex code must include all six characters and be prefixed with a # symbol
1649
- * (e.g. #ff0099). The default value is #000000.
1650
- */
1651
- color?: string;
1652
- /**
1653
- * @public
1654
- * A reference to the font to use for this text element.
1655
- */
1656
- fontRef?: FontRef;
1657
- /**
1658
- * The weight of the font.
1659
- * @defaultValue 'normal'
1660
- */
1661
- fontWeight?: FontWeight;
1662
- /**
1663
- * The style of the font.
1664
- * @defaultValue 'normal'
1665
- */
1666
- fontStyle?: "normal" | "italic";
1667
- /**
1668
- * The decoration of the font.
1669
- * @defaultValue 'none'
1670
- */
1671
- decoration?: "none" | "underline";
1672
- };
1673
-
1674
- /**
1675
- * @beta
1676
- */
1677
- declare type TextBox = {
1678
- /**
1679
- * The width of the element. This must be an integer between 0 and 32767.
1680
- */
1681
- width?: number;
1682
- /**
1683
- * The distance from the top edge of the container.
1684
- *
1685
- * @remarks
1686
- * This must be an integer between -32768 and 32767. This property doesn't have
1687
- * any effect if the app element only contains a single element.
1688
- */
1689
- top: number;
1690
- /**
1691
- * The distance from the left edge of the container.
1692
- *
1693
- * @remarks
1694
- * This must be an integer between -32768 and 32767. This property doesn't have
1695
- * any effect if the app element only contains a single element.
1696
- */
1697
- left: number;
1698
- /**
1699
- * The rotation of the element, in degrees.
1700
- *
1701
- * @remarks
1702
- * This must be an integer between -180 and 180.
1703
- */
1704
- rotation?: number;
1705
- };
1706
-
1707
- /**
1708
- * @public
1709
- * Options for defining the drag-and-drop behavior of a text element.
1710
- */
1711
- export declare type TextDragConfig = {
1712
- /**
1713
- * The type of element.
1714
- */
1715
- type: "TEXT";
1716
- /**
1717
- * The text content to drag.
1718
- */
1719
- children?: string[];
1720
- /**
1721
- * The alignment of the text.
1722
- * @defaultValue 'start'
1723
- */
1724
- textAlign?: "start" | "center" | "end" | "justify";
1725
- /**
1726
- * The weight of the font.
1727
- * @defaultValue 'normal'
1728
- */
1729
- fontWeight?: FontWeight;
1730
- /**
1731
- * The style of the font.
1732
- * @defaultValue 'normal'
1733
- */
1734
- fontStyle?: "normal" | "italic";
1735
- /**
1736
- * The decoration of the font.
1737
- * @defaultValue 'none'
1738
- */
1739
- decoration?: "none" | "underline";
1740
- /**
1741
- * @beta
1742
- * A unique identifier that references a font asset in Canva's backend.
1743
- */
1744
- fontRef?: FontRef;
1745
- };
1746
-
1747
- /**
1748
- * @beta
1749
- * A region of rich text.
1750
- */
1751
- export declare type TextRegion = {
1752
- /**
1753
- * The plain text content of the region.
1754
- */
1755
- text: string;
1756
- /**
1757
- * The formatting of the region.
1758
- */
1759
- formatting?: Partial<RichtextFormatting>;
1760
- };
1761
-
1762
- /**
1763
- * @public
1764
- * The methods for adding drag-and-drop behavior to an app.
1765
- */
1766
- export declare interface UI {
1767
- /**
1768
- * @public
1769
- * Makes the specified node draggable.
1770
- *
1771
- * @deprecated use `UI.startDrag` instead
1772
- *
1773
- * @param options - Options for making an element draggable.
1774
- */
1775
- makeDraggable(options: DraggableElementData): void;
1776
- /**
1777
- * @public
1778
- * Handles a drag event initiated inside the app to Canva, enables drag-and_drop interactions with elements outside of the app.
1779
- * @param event - The drag start event.
1780
- * @param dragData - The data to be passed to the drag handler.
1781
- */
1782
- startDrag<E extends HTMLElement>(
1783
- event: DragStartEvent<E>,
1784
- dragData:
1785
- | TextDragConfig
1786
- | AudioDragConfig
1787
- | EmbedDragConfig
1788
- | VideoDragConfigForElement<E>
1789
- | ImageDragConfigForElement<E>
1790
- ): Promise<void>;
1791
- }
1792
-
1793
- /**
1794
- * An alias for the UI interface, providing access to ui related functionality
1795
- * @public
1796
- */
1797
- export declare const ui: UI;
1798
-
1799
- /**
1800
- * @deprecated
1801
- * @public
1802
- * Options for defining the drag-and-drop behavior of audio tracks.
1803
- */
1804
- export declare type UserSuppliedAudioDragData = AudioDragConfig;
1805
-
1806
- /**
1807
- * @deprecated
1808
- * @public
1809
- *
1810
- * Options for defining the Drag and Drop behaviour for images
1811
- * which have been supplied as data urls
1812
- */
1813
- export declare type UserSuppliedDataUrlImageDragData = CommonImageDragConfig & {
1814
- /**
1815
- * The dimensions of the full-size image.
1816
- *
1817
- * @remarks
1818
- * The full-size image is the image that Canva uploads to the user's account and
1819
- * adds to their design.
1820
- *
1821
- * If omitted, the value of the `previewSize` property is used as a fallback.
1822
- */
1823
- fullSize?: Dimensions;
1824
- /**
1825
- * The data URL of the preview image.
1826
- *
1827
- * @remarks
1828
- * The preview image is the image that users see under their cursor while dragging
1829
- * it into their design.
1830
- *
1831
- * If omitted, the value of the `fullSizeSrc` property is used as a fallback.
1832
- */
1833
- previewSrc?: string;
1834
- /**
1835
- * The data URL of the full-size image.
1836
- *
1837
- * @remarks
1838
- * The full-size image is the image that Canva uploads to the user's account and
1839
- * adds to their design.
1840
- */
1841
- fullSizeSrc: string;
1842
- };
1843
-
1844
- /**
1845
- * @deprecated
1846
- * @public
1847
- * Options for defining the drag-and-drop behavior that can be defined by an app developer.
1848
- */
1849
- export declare type UserSuppliedDragData =
1850
- | UserSuppliedImageDragData
1851
- | UserSuppliedTextDragData
1852
- | UserSuppliedVideoDragData
1853
- | UserSuppliedAudioDragData;
1854
-
1855
- /**
1856
- * @deprecated
1857
- * @public
1858
- *
1859
- * Options for defining the Drag and Drop behaviour for images uploaded
1860
- * via the Content capability.
1861
- */
1862
- export declare type UserSuppliedExternalImageDragData =
1863
- CommonImageDragConfig & {
1864
- /**
1865
- * The function that resolves an image ref
1866
- * @remarks
1867
- *
1868
- * This function will be run during the drag process in order to fetch the media ref of the
1869
- * external image being fetched. This function should return the result of `upload`
1870
- * from the content capability.
1871
- */
1872
- resolveImageRef: () => Promise<{
1873
- ref: ImageRef;
1874
- }>;
1875
- /**
1876
- * The URL of the preview image.
1877
- *
1878
- * @remarks
1879
- * The preview image is the image that users see under their cursor while dragging
1880
- * it into their design.
1881
- */
1882
- previewSrc: string;
1883
- /**
1884
- * The dimensions of the full-size image.
1885
- *
1886
- * @remarks
1887
- * The full-size image is the image that Canva uploads to the user's account and
1888
- * adds to their design.
1889
- *
1890
- * If omitted, the value of the `previewSize` property is used as a fallback.
1891
- */
1892
- fullSize?: Dimensions;
1893
- };
1894
-
1895
- /**
1896
- * @deprecated
1897
- * @public
1898
- * Options for defining the drag-and-drop behavior of an image element that can be defined by an
1899
- * app developer.
1900
- */
1901
- export declare type UserSuppliedImageDragData =
1902
- | UserSuppliedDataUrlImageDragData
1903
- | UserSuppliedExternalImageDragData;
1904
-
1905
- /**
1906
- * @deprecated
1907
- * @public
1908
- * Options for defining the drag-and-drop behavior of a text element.
1909
- */
1910
- export declare type UserSuppliedTextDragData = TextDragConfig;
1911
-
1912
- /**
1913
- * @deprecated
1914
- * @public
1915
- * Options for defining the drag-and-drop behavior for videos.
1916
- */
1917
- export declare type UserSuppliedVideoDragData = {
1918
- /**
1919
- * The type of element.
1920
- */
1921
- type: "VIDEO";
1922
- /**
1923
- * The function used resolve the video ref.
1924
- * This is used in conjunction with content import.
1925
- */
1926
- resolveVideoRef: () => Promise<{
1927
- ref: VideoRef;
1928
- }>;
1929
- /**
1930
- * The dimensions of the preview image.
1931
- * @remarks
1932
- * The preview image is the image that users see under their cursor
1933
- * while dragging it into their design.
1934
- */
1935
- previewSize: Dimensions;
1936
- /**
1937
- * The dimensions of the full-size video.
1938
- * These dimensions are used when adding the video to the design
1939
- *
1940
- * If omitted, the value of the `previewSize` property is
1941
- * used as a fallback.
1942
- */
1943
- fullSize?: Dimensions;
1944
- /**
1945
- * The URL of the preview image.
1946
- *
1947
- * @remarks
1948
- * The preview image is the image that users see under their cursor while dragging
1949
- * it into their design.
1950
- */
1951
- previewSrc: string;
1952
- };
1953
-
1954
- /**
1955
- * @public
1956
- * The types of values that can be stored within an app element's data.
1957
- */
1958
- export declare type Value =
1959
- | Primitive
1960
- | ObjectPrimitive
1961
- | Exclude<Value, undefined>[]
1962
- | {
1963
- [key: string]: Value;
1964
- };
1965
-
1966
- /**
1967
- * @public
1968
- * Options for defining the drag-and-drop behavior for videos.
1969
- */
1970
- export declare type VideoDragConfig = {
1971
- /**
1972
- * The type of element.
1973
- */
1974
- type: "VIDEO";
1975
- /**
1976
- * The function used resolve the video ref.
1977
- * This is used in conjunction with content import.
1978
- */
1979
- resolveVideoRef: () => Promise<{
1980
- ref: VideoRef;
1981
- }>;
1982
- /**
1983
- * The dimensions of the preview image.
1984
- * @remarks
1985
- * The preview image is the image that users see under their cursor
1986
- * while dragging it into their design.
1987
- */
1988
- previewSize: Dimensions;
1989
- /**
1990
- * The dimensions of the full-size video.
1991
- * These dimensions are used when adding the video to the design
1992
- *
1993
- * If omitted, the value of the `previewSize` property is
1994
- * used as a fallback.
1995
- */
1996
- fullSize?: Dimensions;
1997
- /**
1998
- * The URL of the preview image.
1999
- *
2000
- * @remarks
2001
- * The preview image is the image that users see under their cursor while dragging
2002
- * it into their design.
2003
- */
2004
- previewUrl: string;
2005
- };
2006
-
2007
- /**
2008
- * @public
2009
- * Options for defining the drag-and-drop behavior for videos.
2010
- */
2011
- export declare type VideoDragConfigForElement<E extends Element> =
2012
- E extends HTMLImageElement
2013
- ? Partial<VideoDragConfig> &
2014
- Pick<VideoDragConfig, "type" | "resolveVideoRef">
2015
- : VideoDragConfig;
2016
-
2017
- /**
2018
- * @public
2019
- * A video asset that will be used to fill the given path.
2020
- */
2021
- export declare type VideoFill = {
2022
- /**
2023
- * Type of an asset that will be used to fill the given path.
2024
- */
2025
- type: "VIDEO";
2026
- /**
2027
- * A unique identifier that references a video asset in Canva's backend.
2028
- */
2029
- ref: VideoRef;
2030
- };
2031
-
2032
- /**
2033
- * @public
2034
- * A unique identifier that references a video asset in Canva's backend.
2035
- */
2036
- export declare type VideoRef = string & {
2037
- __videoRef: never;
2038
- };
2039
-
2040
- declare type Width = {
2041
- width: number;
2042
- height: "auto";
2043
- };
2044
-
2045
- declare type WidthAndHeight = {
2046
- /**
2047
- * The width of the box. If height is a number, this can be set to "auto".
2048
- * Otherwise, it must be an integer between 0 and 32767.
2049
- */
2050
- width: number;
2051
- /**
2052
- * The height of the box. If width is a number, this can be set to "auto".
2053
- * Otherwise, it must be an integer between 0 and 32767.
2054
- */
2055
- height: number;
2056
- };
2057
-
2058
- export {};