roosterjs 8.6.1 → 8.10.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.
@@ -1,4 +1,4 @@
1
- // Type definitions for roosterjs (Version 8.6.1)
1
+ // Type definitions for roosterjs (Version 8.10.0)
2
2
  // Generated by dts tool from roosterjs
3
3
  // Project: https://github.com/Microsoft/roosterjs
4
4
 
@@ -60,7 +60,8 @@ export interface BrowserInfo {
60
60
 
61
61
  /**
62
62
  * Command strings for Document.execCommand() API
63
- * https: */
63
+ * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
64
+ */
64
65
  export const enum DocumentCommand {
65
66
  /**
66
67
  * Changes the browser auto-link behavior (Internet Explorer only)
@@ -275,7 +276,8 @@ export const enum DocumentCommand {
275
276
 
276
277
  /**
277
278
  * The is essentially an enum representing result from browser compareDocumentPosition API
278
- * https: */
279
+ * https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
280
+ */
279
281
  export const enum DocumentPosition {
280
282
  /**
281
283
  * Same node
@@ -303,12 +305,29 @@ export const enum DocumentPosition {
303
305
  ContainedBy = 16
304
306
  }
305
307
 
306
- /** @internal */
308
+ /**
309
+ * The link preview pasted info provided by Edge
310
+ */
307
311
  export interface EdgeLinkPreview {
312
+ /**
313
+ * Domain of the source page
314
+ */
308
315
  domain: string;
316
+ /**
317
+ * Preferred paste format
318
+ */
309
319
  preferred_format: string;
320
+ /**
321
+ * Title of the source page
322
+ */
310
323
  title: string;
324
+ /**
325
+ * Type of the paste content
326
+ */
311
327
  type: string;
328
+ /**
329
+ * Url of the source page
330
+ */
312
331
  url: string;
313
332
  }
314
333
 
@@ -348,7 +367,8 @@ export const enum Keys {
348
367
 
349
368
  /**
350
369
  * The is essentially an enum represents the type of the node
351
- * https: * Values not listed here are deprecated.
370
+ * https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
371
+ * Values not listed here are deprecated.
352
372
  */
353
373
  export const enum NodeType {
354
374
  /**
@@ -636,7 +656,17 @@ export const enum EntityOperation {
636
656
  * This event will provide a cloned DOM tree for each entity, do NOT compare the DOM nodes with cached nodes
637
657
  * because it will always return false.
638
658
  */
639
- ReplaceTemporaryContent = 8
659
+ ReplaceTemporaryContent = 8,
660
+ /**
661
+ * Notify plugins that editor has attached shadow root for an entity.
662
+ * Plugins can handle this event to do extra operations to the shadow root
663
+ */
664
+ AddShadowRoot = 9,
665
+ /**
666
+ * Notify plugins that editor has removed the shadow root of an entity
667
+ * Plugins can handle this event to do any necessary clean up for shadow root
668
+ */
669
+ RemoveShadowRoot = 10
640
670
  }
641
671
 
642
672
  /**
@@ -678,7 +708,15 @@ export const enum ExperimentalFeatures {
678
708
  /**
679
709
  * Crop an inline image (requires ImageEdit plugin)
680
710
  */
681
- ImageCrop = "ImageCrop"
711
+ ImageCrop = "ImageCrop",
712
+ /**
713
+ * Check if the element has a style attribute, if not, apply the default format
714
+ */
715
+ AlwaysApplyDefaultFormat = "AlwaysApplyDefaultFormat",
716
+ /**
717
+ * Paste the Html instead of the Img when the Html Body only have one IMG Child node
718
+ */
719
+ ConvertSingleImageBody = "ConvertSingleImageBody"
682
720
  }
683
721
 
684
722
  /**
@@ -889,7 +927,43 @@ export const enum TableOperation {
889
927
  /**
890
928
  * Split current table cell vertically
891
929
  */
892
- SplitVertically = 12
930
+ SplitVertically = 12,
931
+ /**
932
+ * Align current table at the center
933
+ */
934
+ AlignCenter = 13,
935
+ /**
936
+ * Align current table at the left
937
+ */
938
+ AlignLeft = 14,
939
+ /**
940
+ * Align current table at the right
941
+ */
942
+ AlignRight = 15,
943
+ /**
944
+ * Align current content table cell at the left
945
+ */
946
+ AlignCellLeft = 16,
947
+ /**
948
+ * Align current content table cell at the center
949
+ */
950
+ AlignCellCenter = 17,
951
+ /**
952
+ * Align current content table cell at the right
953
+ */
954
+ AlignCellRight = 18,
955
+ /**
956
+ * Align current content table cell at the top
957
+ */
958
+ AlignCellTop = 19,
959
+ /**
960
+ * Align current table cell at the middle
961
+ */
962
+ AlignCellMiddle = 20,
963
+ /**
964
+ * Align current table cell at the bottom
965
+ */
966
+ AlignCellBottom = 21
893
967
  }
894
968
 
895
969
  /**
@@ -930,6 +1004,65 @@ export const enum ImageEditOperation {
930
1004
  All = 15
931
1005
  }
932
1006
 
1007
+ /**
1008
+ * Represents the strategy to clear the format of the current editor selection
1009
+ */
1010
+ export const enum ClearFormatMode {
1011
+ /**
1012
+ * Inline format. Remove text format.
1013
+ */
1014
+ Inline = 0,
1015
+ /**
1016
+ * BLock format. Remove text and structure format of the block.
1017
+ */
1018
+ Block = 1,
1019
+ /**
1020
+ * Detect Inline or Block format based on the current editor selectior.
1021
+ */
1022
+ AutoDetect = 2
1023
+ }
1024
+
1025
+ /**
1026
+ * Index of known CreateElementData used by createElement function
1027
+ */
1028
+ export const enum KnownCreateElementDataIndex {
1029
+ /**
1030
+ * Set a none value to help createElement funciton ignore falsy value
1031
+ */
1032
+ None = 0,
1033
+ /**
1034
+ * An empty line without format
1035
+ */
1036
+ EmptyLine = 1,
1037
+ /**
1038
+ * Wrapper for blockquote
1039
+ */
1040
+ BlockquoteWrapper = 2,
1041
+ /**
1042
+ * Temp DIV for copy/paste
1043
+ */
1044
+ CopyPasteTempDiv = 3,
1045
+ /**
1046
+ * ListItem with block style
1047
+ */
1048
+ BlockListItem = 4,
1049
+ /**
1050
+ * Wrapper element for context menu
1051
+ */
1052
+ ContextMenuWrapper = 5,
1053
+ /**
1054
+ * Wrapper element for image edit
1055
+ */
1056
+ ImageEditWrapper = 6,
1057
+ /**
1058
+ * Table resizers
1059
+ */
1060
+ TableHorizontalResizer = 7,
1061
+ TableVerticalResizer = 8,
1062
+ TableResizerLTR = 9,
1063
+ TableResizerRTL = 10
1064
+ }
1065
+
933
1066
  /**
934
1067
  * Provides a chance for plugin to change the content before it is copied from editor.
935
1068
  */
@@ -1006,6 +1139,17 @@ export interface BeforePasteEvent extends BasePluginEvent<PluginEventType.Before
1006
1139
  htmlAttributes: Record<string, string>;
1007
1140
  }
1008
1141
 
1142
+ /**
1143
+ * The event to be triggered before SetContent API is called.
1144
+ * Handle this event to cache anything you need from editor before it is gone.
1145
+ */
1146
+ export interface BeforeSetContentEvent extends BasePluginEvent<PluginEventType.BeforeSetContent> {
1147
+ /**
1148
+ * New content HTML that is about to set to editor
1149
+ */
1150
+ newContent: string;
1151
+ }
1152
+
1009
1153
  /**
1010
1154
  * Represents a change to the editor made by another plugin
1011
1155
  */
@@ -1068,6 +1212,18 @@ export interface EntityOperationEvent extends BasePluginEvent<PluginEventType.En
1068
1212
  * Optional raw event. Need to do null check before use its value
1069
1213
  */
1070
1214
  rawEvent?: Event;
1215
+ /**
1216
+ * A document fragment for entity based on Shadow DOM. This property is only available for NewEntity operation.
1217
+ * Putting DOM nodes under this fragment will cause a shadow root to be attached to the entity wrapper
1218
+ * with these DOM nodes under it.
1219
+ *
1220
+ * If there is already cached DOM nodes, they will also be put under this fragment.
1221
+ * Plugin need to decide:
1222
+ * 1. Apply the cache: do nothing and the DOM nodes will be appended as shadow DOM entity content
1223
+ * 2. Discard the cache and use new content instead: clear the fragment and append new DOM nodes, then new DOM nodes will be used
1224
+ * 3. Dehydrate this entity: clear the fragment, and leave it empty
1225
+ */
1226
+ contentForShadowEntity?: DocumentFragment;
1071
1227
  }
1072
1228
 
1073
1229
  /**
@@ -1181,7 +1337,7 @@ export interface PluginScrollEvent extends PluginDomEventBase<PluginEventType.Sc
1181
1337
  /**
1182
1338
  * Editor plugin event interface
1183
1339
  */
1184
- export type PluginEvent = BeforeCutCopyEvent | BeforePasteEvent | ContentChangedEvent | EntityOperationEvent | ExtractContentWithDomEvent | PluginDomEvent | EditorReadyEvent | BeforeDisposeEvent | PendingFormatStateChangedEvent | EnterShadowEditEvent | LeaveShadowEditEvent | EditImageEvent;
1340
+ export type PluginEvent = BeforeCutCopyEvent | BeforePasteEvent | ContentChangedEvent | EntityOperationEvent | ExtractContentWithDomEvent | PluginDomEvent | EditorReadyEvent | BeforeDisposeEvent | PendingFormatStateChangedEvent | EnterShadowEditEvent | LeaveShadowEditEvent | EditImageEvent | BeforeSetContentEvent;
1185
1341
 
1186
1342
  /**
1187
1343
  * Editor plugin event type
@@ -1269,7 +1425,12 @@ export const enum PluginEventType {
1269
1425
  /**
1270
1426
  * Content of image is being changed from client side
1271
1427
  */
1272
- EditImage = 19
1428
+ EditImage = 19,
1429
+ /**
1430
+ * Content of editor is about to be cleared by SetContent API, handle this event to cache anything you need
1431
+ * before it is gone
1432
+ */
1433
+ BeforeSetContent = 20
1273
1434
  }
1274
1435
 
1275
1436
  /**
@@ -1389,6 +1550,10 @@ export interface ClipboardData {
1389
1550
  * BASE64 encoded data uri of the image if any
1390
1551
  */
1391
1552
  imageDataUri?: string;
1553
+ /**
1554
+ * Array of tag names of the first level child nodes
1555
+ */
1556
+ htmlFirstLevelChildTags?: string[];
1392
1557
  /**
1393
1558
  * Value of custom paste type. By default it is always empty.
1394
1559
  * To allow custom paste type, pass the allowed types to EditorOptions.allowedCustomPasteType
@@ -1833,6 +1998,9 @@ export interface LinkData {
1833
1998
  normalizedUrl: string;
1834
1999
  }
1835
2000
 
2001
+ /**
2002
+ * A color object contains both light mode and dark mode color
2003
+ */
1836
2004
  export interface ModeIndependentColor {
1837
2005
  /**
1838
2006
  * The color to be used in dark mode, if enabled.
@@ -2604,8 +2772,9 @@ export interface IEditor {
2604
2772
  /**
2605
2773
  * Run a callback function asynchronously
2606
2774
  * @param callback The callback function to run
2775
+ * @returns a function to cancel this async run
2607
2776
  */
2608
- runAsync(callback: (editor: IEditor) => void): void;
2777
+ runAsync(callback: (editor: IEditor) => void): () => void;
2609
2778
  /**
2610
2779
  * Set DOM attribute of editor content DIV
2611
2780
  * @param name Name of the attribute
@@ -2634,6 +2803,12 @@ export interface IEditor {
2634
2803
  * Get style based format state from current selection, including font name/size and colors
2635
2804
  */
2636
2805
  getStyleBasedFormatState(node?: Node): StyleBasedFormatState;
2806
+ /**
2807
+ * Get the pendable format state from the current selection, incluing formats as underline, bold, italics
2808
+ * @param forceGetStateFromDOM If set to true, will not consider the cached format and will get the format state directly from DOM tree
2809
+ * @return The pending format state of editor.
2810
+ */
2811
+ getPendableFormatState(forceGetStateFromDOM?: boolean): PendableFormatState;
2637
2812
  /**
2638
2813
  * Ensure user will type into a container element rather than into the editor content DIV directly
2639
2814
  * @param position The position that user is about to type to
@@ -2672,6 +2847,13 @@ export interface IEditor {
2672
2847
  * @param feature The feature to check
2673
2848
  */
2674
2849
  isFeatureEnabled(feature: ExperimentalFeatures): boolean;
2850
+ /**
2851
+ * Get a function to convert HTML string to trusted HTML string.
2852
+ * By default it will just return the input HTML directly. To override this behavior,
2853
+ * pass your own trusted HTML handler to EditorOptions.trustedHTMLHandler
2854
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
2855
+ */
2856
+ getTrustedHTMLHandler(): TrustedHTMLHandler;
2675
2857
  }
2676
2858
 
2677
2859
  /**
@@ -2798,6 +2980,7 @@ export interface CorePlugins {
2798
2980
  */
2799
2981
  readonly mouseUp: EditorPlugin;
2800
2982
  /**
2983
+ * @deprecated after Firefox update
2801
2984
  * TypeAfterLinkPlugin plugin helps workaround a Firefox bug to allow type outside a hyperlink
2802
2985
  */
2803
2986
  readonly typeAfterLink: EditorPlugin;
@@ -2816,17 +2999,17 @@ export interface CorePlugins {
2816
2999
  }
2817
3000
 
2818
3001
  /**
2819
- * @internal
3002
+ * Names of core plugins
2820
3003
  */
2821
3004
  export type PluginKey = keyof CorePlugins;
2822
3005
 
2823
3006
  /**
2824
- * @internal
3007
+ * Names of the core plugins that have plugin state
2825
3008
  */
2826
3009
  export type KeyOfStatePlugin<Key extends PluginKey> = CorePlugins[Key] extends PluginWithState<infer U> ? Key : never;
2827
3010
 
2828
3011
  /**
2829
- * @internal
3012
+ * A type map from name of plugin with state to its plugin type
2830
3013
  */
2831
3014
  export type GenericPluginState<Key extends PluginKey> = {
2832
3015
  [P in StatePluginKeys<Key>]: TypeOfStatePlugin<P>;
@@ -2838,14 +3021,14 @@ export type GenericPluginState<Key extends PluginKey> = {
2838
3021
  export type PluginState = GenericPluginState<PluginKey>;
2839
3022
 
2840
3023
  /**
2841
- * @internal
3024
+ * All names of plugins with plugin state
2842
3025
  */
2843
3026
  export type StatePluginKeys<Key extends PluginKey> = {
2844
3027
  [P in Key]: KeyOfStatePlugin<P>;
2845
3028
  }[Key];
2846
3029
 
2847
3030
  /**
2848
- * @internal
3031
+ * Get type of a plugin with state
2849
3032
  */
2850
3033
  export type TypeOfStatePlugin<Key extends PluginKey> = CorePlugins[Key] extends PluginWithState<infer U> ? U : never;
2851
3034
 
@@ -2865,6 +3048,12 @@ export interface EditorCore extends PluginState {
2865
3048
  * Core API map of this editor
2866
3049
  */
2867
3050
  readonly api: CoreApiMap;
3051
+ /**
3052
+ * A handler to convert HTML string to a trust HTML string.
3053
+ * By default it will just return the original HTML string directly.
3054
+ * To override, pass your own trusted HTML handler to EditorOptions.trustedHTMLHandler
3055
+ */
3056
+ readonly trustedHTMLHandler: TrustedHTMLHandler;
2868
3057
  }
2869
3058
 
2870
3059
  /**
@@ -2884,6 +3073,10 @@ export type AddUndoSnapshot = (core: EditorCore, callback: (start: NodePosition,
2884
3073
  */
2885
3074
  export type AttachDomEvent = (core: EditorCore, eventMap: Record<string, DOMEventHandler>) => () => void;
2886
3075
 
3076
+ /**
3077
+ * The interface for the map of core API.
3078
+ * Editor can call call API from this map under EditorCore object
3079
+ */
2887
3080
  export interface CoreApiMap {
2888
3081
  /**
2889
3082
  * Call an editing callback with adding undo snapshots around, and trigger a ContentChanged event if change source is specified.
@@ -2944,6 +3137,13 @@ export interface CoreApiMap {
2944
3137
  * @param node The node to get style from
2945
3138
  */
2946
3139
  getStyleBasedFormatState: GetStyleBasedFormatState;
3140
+ /**
3141
+ * Get the pendable format such as underline and bold
3142
+ * @param core The EditorCore object
3143
+ *@param forceGetStateFromDOM If set to true, will force get the format state from DOM tree.
3144
+ * @return The pending format state of editor.
3145
+ */
3146
+ getPendableFormatState: GetPendableFormatState;
2947
3147
  /**
2948
3148
  * Check if the editor has focus now
2949
3149
  * @param core The EditorCore object
@@ -3051,6 +3251,14 @@ export type GetSelectionRange = (core: EditorCore, tryGetFromCache: boolean) =>
3051
3251
  */
3052
3252
  export type GetStyleBasedFormatState = (core: EditorCore, node: Node) => StyleBasedFormatState;
3053
3253
 
3254
+ /**
3255
+ * Get the pendable format such as underline and bold
3256
+ * @param core The EditorCore object
3257
+ * @param forceGetStateFromDOM If set to true, will force get the format state from DOM tree.
3258
+ * @return The pending format state of editor.
3259
+ */
3260
+ export type GetPendableFormatState = (core: EditorCore, forceGetStateFromDOM: boolean) => PendableFormatState;
3261
+
3054
3262
  /**
3055
3263
  * Check if the editor has focus now
3056
3264
  * @param core The EditorCore object
@@ -3195,6 +3403,12 @@ export interface EditorOptions {
3195
3403
  * Only text types are supported, and do not add "text/" prefix to the type values
3196
3404
  */
3197
3405
  allowedCustomPasteType?: string[];
3406
+ /**
3407
+ * Customized trusted type handler used for sanitizing HTML string before assign to DOM tree
3408
+ * This is required when trusted-type Content-Security-Policy (CSP) is enabled.
3409
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
3410
+ */
3411
+ trustedHTMLHandler?: TrustedHTMLHandler;
3198
3412
  }
3199
3413
 
3200
3414
  /**
@@ -3405,6 +3619,13 @@ export interface CustomReplacement {
3405
3619
  * Whether the matching should be case sensitive
3406
3620
  */
3407
3621
  matchSourceCaseSensitive: boolean;
3622
+ /**
3623
+ * A callback to check if the string should be replaced
3624
+ * @param content the content where the string is
3625
+ * @param sourceString string to be replaced
3626
+ * @return true, if the string should be replaced, else return false
3627
+ */
3628
+ shouldReplace?: (replacement: CustomReplacement, content: string) => boolean;
3408
3629
  }
3409
3630
 
3410
3631
  /**
@@ -3606,12 +3827,48 @@ export interface ImageEditOptions {
3606
3827
  */
3607
3828
  imageSelector?: string;
3608
3829
  /**
3830
+ * @deprecated
3609
3831
  * HTML for the rotate icon
3610
3832
  * @default A predefined SVG icon
3611
3833
  */
3612
3834
  rotateIconHTML?: string;
3613
3835
  }
3614
3836
 
3837
+ /**
3838
+ * An interface represents the data for creating element used by createElemnet()
3839
+ */
3840
+ export interface CreateElementData {
3841
+ /**
3842
+ * Tag name of this element.
3843
+ * It can be just a tag, or in format "namespace:tag"
3844
+ */
3845
+ tag: string;
3846
+ /**
3847
+ * Namespace of this tag
3848
+ */
3849
+ namespace?: string;
3850
+ /**
3851
+ * CSS class name
3852
+ */
3853
+ className?: string;
3854
+ /**
3855
+ * CSS style
3856
+ */
3857
+ style?: string;
3858
+ /**
3859
+ * Dataset of this element
3860
+ */
3861
+ dataset?: Record<string, string>;
3862
+ /**
3863
+ * Additional attributes of this element
3864
+ */
3865
+ attributes?: Record<string, string>;
3866
+ /**
3867
+ * Child nodes of this element, can be another CreateElementData, or a string which represents a text node
3868
+ */
3869
+ children?: (CreateElementData | string)[];
3870
+ }
3871
+
3615
3872
  /**
3616
3873
  * The state object for DOMEventPlugin
3617
3874
  */
@@ -3653,9 +3910,10 @@ export interface EditPluginState {
3653
3910
  */
3654
3911
  export interface EntityPluginState {
3655
3912
  /**
3913
+ * @deprecated
3656
3914
  * Last clicking point when mouse down event happens
3657
3915
  */
3658
- clickingPoint: {
3916
+ clickingPoint?: {
3659
3917
  pageX: number;
3660
3918
  pageY: number;
3661
3919
  };
@@ -3663,6 +3921,12 @@ export interface EntityPluginState {
3663
3921
  * All known entity elements
3664
3922
  */
3665
3923
  knownEntityElements: HTMLElement[];
3924
+ /**
3925
+ * Cache for the hydrated content of shadow DOM entity.
3926
+ * When set content to replace the whole editor, we will cache the hydrated content
3927
+ * before it is gone, then after that we can use the cached content to rehydrate entity
3928
+ */
3929
+ shadowEntityCache: Record<string, HTMLElement>;
3666
3930
  }
3667
3931
 
3668
3932
  /**
@@ -3831,6 +4095,11 @@ export interface DOMEventHandlerObject {
3831
4095
  */
3832
4096
  export type DOMEventHandler = PluginEventType | DOMEventHandlerFunction | DOMEventHandlerObject;
3833
4097
 
4098
+ /**
4099
+ * A handler type to convert HTML string to a trust HTML string
4100
+ */
4101
+ export type TrustedHTMLHandler = (html: string) => string;
4102
+
3834
4103
  /**
3835
4104
  * This produces a block element from a a node
3836
4105
  * It needs to account for various HTML structure. Examples:
@@ -4281,6 +4550,7 @@ export function contains(container: Node, contained: Range): boolean;
4281
4550
  export function findClosestElementAncestor(node: Node, root?: Node, selector?: string): HTMLElement;
4282
4551
 
4283
4552
  /**
4553
+ * @deprecated
4284
4554
  * Creates an HTML node array from html
4285
4555
  * @param html the html string to create HTML elements from
4286
4556
  * @param ownerDocument Owner document of the result HTML elements
@@ -4412,7 +4682,8 @@ export function unwrap(node: Node): Node;
4412
4682
  export function wrap<T extends keyof HTMLElementTagNameMap>(nodes: Node | Node[], wrapper?: T): HTMLElementTagNameMap[T];
4413
4683
 
4414
4684
  /**
4415
- * Wrap all the node with html and return the wrapped node, and put the wrapper node under the parent of the first node
4685
+ * @deprecated
4686
+ * Wrap all the nodes with html and return the wrapped node, and put the wrapper node under the parent of the first node
4416
4687
  * @param nodes The node or node array to wrap
4417
4688
  * @param wrapper The wrapper HTML string, default value is DIV
4418
4689
  * @returns The wrapper element
@@ -4420,13 +4691,20 @@ export function wrap<T extends keyof HTMLElementTagNameMap>(nodes: Node | Node[]
4420
4691
  export function wrap(nodes: Node | Node[], wrapper?: string): HTMLElement;
4421
4692
 
4422
4693
  /**
4423
- * Wrap all the node with html and return the wrapped node, and put the wrapper node under the parent of the first node
4694
+ * Wrap all the nodes with html and return the wrapped node, and put the wrapper node under the parent of the first node
4424
4695
  * @param nodes The node or node array to wrap
4425
4696
  * @param wrapper The wrapper HTML element, default value is a new DIV element
4426
4697
  * @returns The wrapper element
4427
4698
  */
4428
4699
  export function wrap(nodes: Node | Node[], wrapper?: HTMLElement): HTMLElement;
4429
4700
 
4701
+ /**
4702
+ * Wrapp all the nodes with CreateElementData or an index of a known CreateElementData
4703
+ * @param nodes The nodes to wrap
4704
+ * @param wrapper The CreateElementData or an index of a known CreateElementData
4705
+ */
4706
+ export function wrap(nodes: Node | Node[], wrapper?: CreateElementData | KnownCreateElementDataIndex): HTMLElement;
4707
+
4430
4708
  /**
4431
4709
  * This walks forwards DOM tree to get next meaningful node
4432
4710
  * @param rootNode Root node to scope the leaf sibling node
@@ -4530,6 +4808,13 @@ export function readFile(file: File, callback: (dataUrl: string) => void): void;
4530
4808
  */
4531
4809
  export function getInnerHTML(node: HTMLElement | DocumentFragment): string;
4532
4810
 
4811
+ /**
4812
+ * Set text color or background color to the given element
4813
+ * @param element The element to set color to
4814
+ * @param color The color to set, it can be a string of color name/value or a ModeIndependentColor object
4815
+ * @param isBackgroundColor Whether set background color or text color
4816
+ * @param isDarkMode Whether current mode is dark mode. @default false
4817
+ */
4533
4818
  export function setColor(element: HTMLElement, color: string | ModeIndependentColor, isBackgroundColor: boolean, isDarkMode?: boolean): void;
4534
4819
 
4535
4820
  /**
@@ -4539,6 +4824,45 @@ export function setColor(element: HTMLElement, color: string | ModeIndependentCo
4539
4824
  */
4540
4825
  export function matchesSelector(element: Node, selector: string): boolean;
4541
4826
 
4827
+ /**
4828
+ *
4829
+ * @param root the contentDiv of the ditor
4830
+ * @param nodeToInsert the node to be inserted
4831
+ * @param position the position of the node to be inserted
4832
+ * @param range the range current or cached range of the editor
4833
+ * @returns the adjusted position of the inserted node
4834
+ */
4835
+ export function adjustInsertPosition(root: HTMLElement, nodeToInsert: Node, position: NodePosition, range: Range): NodePosition;
4836
+
4837
+ /**
4838
+ * Create DOM element from the given CreateElementData
4839
+ * @param elementData The CreateElementData or an index of a known CreateElementData used for creating this element
4840
+ * @param document The document to create the element from
4841
+ * @returns The root DOM element just created
4842
+ */
4843
+ export function createElement(elementData: CreateElementData | KnownCreateElementDataIndex, document: Document): Element;
4844
+
4845
+ /**
4846
+ * All known CreateElementData used by roosterjs to create elements
4847
+ */
4848
+ export const KnownCreateElementData: Record<KnownCreateElementDataIndex, CreateElementData>;
4849
+
4850
+ /**
4851
+ * Replace all child nodes of the given target node to the child nodes of source node.
4852
+ * @param target Target node, all child nodes of this node will be removed if keepExistingChildren is not set to true
4853
+ * @param source (Optional) source node, all child nodes of this node will be move to target node
4854
+ * @param keepExistingChildren (Optional) When set to true, all existing child nodes of target will be kept
4855
+ */
4856
+ export function moveChildNodes(target: Node, source?: Node, keepExistingChildren?: boolean): void;
4857
+
4858
+ /**
4859
+ * Set the Style of a List Item provided, with the styles that the inline child elements have
4860
+ * If the child inline elements have different styles, it will not modify the styles of the list item
4861
+ * @param element the LI Element to set the styles
4862
+ * @param styles The styles that should be applied to the element.
4863
+ */
4864
+ export function setListItemStyle(element: HTMLLIElement, styles: string[]): void;
4865
+
4542
4866
  /**
4543
4867
  * A virtual table class, represent an HTML table, by expand all merged cells to each separated cells
4544
4868
  */
@@ -4700,6 +5024,12 @@ export class VList {
4700
5024
  * After that, this VList becomes unavailable because we set this.rootList to null
4701
5025
  */
4702
5026
  writeBack(): void;
5027
+ /**
5028
+ * Sets the New List Start Property, that is going to be used to create a new List in the WriteBack function
5029
+ * @param separator The HTML element that indicates when to split the VList
5030
+ * @param startNumber The start number of the new List
5031
+ */
5032
+ split(separator: HTMLElement, startNumber: number): void;
4703
5033
  /**
4704
5034
  * Set indentation of the given range of this list
4705
5035
  * @param start Start position to operate from
@@ -4745,7 +5075,6 @@ export class VList {
4745
5075
  }
4746
5076
 
4747
5077
  /**
4748
- * @internal
4749
5078
  * !!! Never directly create instance of this class. It should be created within VList class !!!
4750
5079
  *
4751
5080
  * Represent a list item.
@@ -4753,12 +5082,12 @@ export class VList {
4753
5082
  * A list item is normally wrapped using a LI tag. But this class is only a logical item,
4754
5083
  * it can be a LI tag, or another other type of node which means it is actually not a list item.
4755
5084
  * That can happen after we do "outdent" on a 1-level list item, then it becomes not a list item.
4756
- * @internal
4757
5085
  */
4758
5086
  export class VListItem {
4759
5087
  private listTypes;
4760
5088
  private node;
4761
5089
  private dummy;
5090
+ private newListStart;
4762
5091
  /**
4763
5092
  * Construct a new instance of VListItem class
4764
5093
  * @param node The DOM node for this item
@@ -4778,6 +5107,10 @@ export class VListItem {
4778
5107
  * Get DOM node of this list item
4779
5108
  */
4780
5109
  getNode(): HTMLLIElement;
5110
+ /**
5111
+ * Get the Start Number of the new List
5112
+ */
5113
+ getNewListStart(): number | undefined;
4781
5114
  /**
4782
5115
  * Check if a given node is contained by this list item
4783
5116
  * @param node The node to check
@@ -4821,6 +5154,11 @@ export class VListItem {
4821
5154
  * @param isDummy Whether the item is a dummy item
4822
5155
  */
4823
5156
  setIsDummy(isDummy: boolean): void;
5157
+ /**
5158
+ * Set the start Number of the new list
5159
+ * @param isDummy Whether the item is a dummy item
5160
+ */
5161
+ setNewListStart(startNumber: number): void;
4824
5162
  /**
4825
5163
  * Write the change result back into DOM
4826
5164
  * @param listStack current stack of list elements
@@ -4830,7 +5168,7 @@ export class VListItem {
4830
5168
  }
4831
5169
 
4832
5170
  /**
4833
- * @internal
5171
+ * Create a VList object from the given region.
4834
5172
  * @param region The region to get VList from
4835
5173
  * @param includeSiblingLists True to also try get lists before and after the selection and merge them together,
4836
5174
  * false to only include the list for the selected blocks
@@ -5084,7 +5422,7 @@ export function getHtmlWithSelectionPath(rootNode: HTMLElement | DocumentFragmen
5084
5422
  * @param html The html to restore
5085
5423
  * @returns A selection range if the html contains a valid selection path, otherwise null
5086
5424
  */
5087
- export function setHtmlWithSelectionPath(rootNode: HTMLElement, html: string): Range;
5425
+ export function setHtmlWithSelectionPath(rootNode: HTMLElement, html: string, trustedHTMLHandler?: TrustedHTMLHandler): Range;
5088
5426
 
5089
5427
  /**
5090
5428
  * Add the given range into selection of the given document
@@ -5232,7 +5570,7 @@ export function createDefaultHtmlSanitizerOptions(): Required<HtmlSanitizerOptio
5232
5570
  * If the same property got multiple callbacks, the final return value will be the return
5233
5571
  * value of the latest callback
5234
5572
  */
5235
- export function chainSanitizerCallback<T extends any[], R>(map: Record<string, (...args: T) => R>, name: string, newCallback: (...args: T) => R): void;
5573
+ export function chainSanitizerCallback<TOriginalArgs extends any[], TChainedFn extends (...args: TOriginalArgs) => R, R>(map: Record<string, (...args: TOriginalArgs) => R>, name: string, newCallback: TChainedFn): void;
5236
5574
 
5237
5575
  /**
5238
5576
  * Commit information of an entity (type, isReadonly, id) into the wrapper node as CSS Classes
@@ -5251,7 +5589,7 @@ export function commitEntity(wrapper: HTMLElement, type: string, isReadonly: boo
5251
5589
  export function getEntityFromElement(element: HTMLElement): Entity;
5252
5590
 
5253
5591
  /**
5254
- * @internal Get a selector string for specified entity type and id
5592
+ * Get a selector string for specified entity type and id
5255
5593
  * @param type (Optional) Type of entity
5256
5594
  * @param id (Optional) Id of entity
5257
5595
  */
@@ -5293,7 +5631,7 @@ export function isCharacterValue(event: KeyboardEvent): boolean;
5293
5631
  * @param event A Keyboard event or Mouse event object
5294
5632
  * @returns True if Ctrl key is pressed on Windows or Meta key is pressed on Mac
5295
5633
  */
5296
- export const isCtrlOrMetaPressed: (event: KeyboardEvent | MouseEvent) => boolean;
5634
+ export function isCtrlOrMetaPressed(event: KeyboardEvent | MouseEvent): boolean;
5297
5635
 
5298
5636
  /**
5299
5637
  * Get CSS styles of a given element in name-value pair format
@@ -5556,8 +5894,9 @@ export class Editor implements IEditor {
5556
5894
  /**
5557
5895
  * Run a callback function asynchronously
5558
5896
  * @param callback The callback function to run
5897
+ * @returns a function to cancel this async run
5559
5898
  */
5560
- runAsync(callback: (editor: IEditor) => void): void;
5899
+ runAsync(callback: (editor: IEditor) => void): () => void;
5561
5900
  /**
5562
5901
  * Set DOM attribute of editor content DIV
5563
5902
  * @param name Name of the attribute
@@ -5586,6 +5925,12 @@ export class Editor implements IEditor {
5586
5925
  * Get style based format state from current selection, including font name/size and colors
5587
5926
  */
5588
5927
  getStyleBasedFormatState(node?: Node): StyleBasedFormatState;
5928
+ /**
5929
+ * Get the pendable format such as underline and bold
5930
+ * @param forceGetStateFromDOM If set to true, will force get the format state from DOM tree.
5931
+ * @returns The pending format state
5932
+ */
5933
+ getPendableFormatState(forceGetStateFromDOM?: boolean): PendableFormatState;
5589
5934
  /**
5590
5935
  * Ensure user will type into a container element rather than into the editor content DIV directly
5591
5936
  * @param position The position that user is about to type to
@@ -5624,6 +5969,13 @@ export class Editor implements IEditor {
5624
5969
  * @param feature The feature to check
5625
5970
  */
5626
5971
  isFeatureEnabled(feature: ExperimentalFeatures): boolean;
5972
+ /**
5973
+ * Get a function to convert HTML string to trusted HTML string.
5974
+ * By default it will just return the input HTML directly. To override this behavior,
5975
+ * pass your own trusted HTML handler to EditorOptions.trustedHTMLHandler
5976
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
5977
+ */
5978
+ getTrustedHTMLHandler(): TrustedHTMLHandler;
5627
5979
  }
5628
5980
 
5629
5981
  /**
@@ -5641,8 +5993,7 @@ export function changeFontSize(editor: IEditor, change: FontSizeChange, fontSize
5641
5993
  export const FONT_SIZES: number[];
5642
5994
 
5643
5995
  /**
5644
- * Clear all formats of selected blocks.
5645
- * When selection is collapsed, only clear format of current block.
5996
+ * @deprecated Use clearFormat instead and pass the ClearFormatMode.Block as parameter
5646
5997
  * @param editor The editor instance
5647
5998
  */
5648
5999
  export function clearBlockFormat(editor: IEditor): void;
@@ -5652,8 +6003,9 @@ export function clearBlockFormat(editor: IEditor): void;
5652
6003
  * changed to default format. The format that get cleaned include B/I/U/font name/
5653
6004
  * font size/text color/background color/align left/align right/align center/superscript/subscript
5654
6005
  * @param editor The editor instance
6006
+ * @param formatType type of format to apply
5655
6007
  */
5656
- export function clearFormat(editor: IEditor): void;
6008
+ export function clearFormat(editor: IEditor, formatType?: ClearFormatMode): void;
5657
6009
 
5658
6010
  /**
5659
6011
  * Insert a hyperlink at cursor.
@@ -5810,8 +6162,9 @@ export function setBackgroundColor(editor: IEditor, color: string | ModeIndepend
5810
6162
  * Currently there's no validation to the string, if the passed string is invalid, it won't take affect
5811
6163
  * Alternatively, you can pass a @typedef ModeIndependentColor. If in light mode, the lightModeColor property will be used.
5812
6164
  * If in dark mode, the darkModeColor will be used and the lightModeColor will be used when converting back to light mode.
6165
+ * @param shouldApplyInlineStyle Optional callback function to be invoked to verify if the current element should have the inline Style applied
5813
6166
  */
5814
- export function setTextColor(editor: IEditor, color: string | ModeIndependentColor): void;
6167
+ export function setTextColor(editor: IEditor, color: string | ModeIndependentColor, shouldApplyInlineStyle?: (element: HTMLElement) => boolean): void;
5815
6168
 
5816
6169
  /**
5817
6170
  * Change direction for the blocks/paragraph at selection
@@ -5842,7 +6195,8 @@ export function setFontSize(editor: IEditor, fontSize: string): void;
5842
6195
  * in selection, do nothing.
5843
6196
  * The alt attribute provides alternative information for an image if a user for some reason
5844
6197
  * cannot view it (because of slow connection, an error in the src attribute, or if the user
5845
- * uses a screen reader). See https: * @param editor The editor instance
6198
+ * uses a screen reader). See https://www.w3schools.com/tags/att_img_alt.asp
6199
+ * @param editor The editor instance
5846
6200
  * @param altText The image alt text
5847
6201
  */
5848
6202
  export function setImageAltText(editor: IEditor, altText: string): void;
@@ -5908,6 +6262,14 @@ export function toggleItalic(editor: IEditor): void;
5908
6262
  */
5909
6263
  export function toggleNumbering(editor: IEditor, startNumber?: number): void;
5910
6264
 
6265
+ /**
6266
+ * Resets Ordered List Numbering back to the value of the parameter startNumber
6267
+ * @param editor The editor instance
6268
+ * @param separator The HTML element that indicates when to split the VList
6269
+ * @param startNumber The number of that the splitted list should start
6270
+ */
6271
+ export function setOrderedListNumbering(editor: IEditor, separator: HTMLLIElement, startNumber?: number): void;
6272
+
5911
6273
  /**
5912
6274
  * Toggle blockquote at selection, if selection already contains any blockquote elements,
5913
6275
  * the blockquote elements will be unquote and other elements will take no effect
@@ -5977,6 +6339,30 @@ export function toggleUnderline(editor: IEditor): void;
5977
6339
  */
5978
6340
  export function toggleHeader(editor: IEditor, level: number): void;
5979
6341
 
6342
+ /**
6343
+ * Toggle List Type at selection
6344
+ * If ListType Provided is Ordered:
6345
+ * If selection contains numbering in deep level, toggle numbering will decrease the numbering level by one
6346
+ * If selection contains bullet list, toggle numbering will convert the bullet list into number list
6347
+ * If selection contains both bullet/numbering and normal text, the behavior is decided by corresponding
6348
+ * realization of browser execCommand API
6349
+ * If ListType Provided is Unordered:
6350
+ * If selection contains bullet in deep level, toggle bullet will decrease the bullet level by one
6351
+ * If selection contains number list, toggle bullet will convert the number list into bullet list
6352
+ * If selection contains both bullet/numbering and normal text, the behavior is decided by corresponding
6353
+ * browser execCommand API
6354
+ * @param editor The editor instance
6355
+ * @param listType The list type to toggle
6356
+ * @param startNumber (Optional) Start number of the list
6357
+ * @param includeSiblingLists Sets wether the operation should include Sibling Lists, by default true
6358
+ */
6359
+ export function toggleListType(editor: IEditor, listType: ListType, startNumber?: number, includeSiblingLists?: boolean): void;
6360
+
6361
+ /**
6362
+ * Split selection into regions, and perform a block-wise formatting action for each region.
6363
+ */
6364
+ export function blockFormat(editor: IEditor, callback: (region: Region, start: NodePosition, end: NodePosition, chains: VListChain[]) => void, beforeRunCallback?: () => boolean): void;
6365
+
5980
6366
  /**
5981
6367
  * Commit changes of all list changes when experiment features are allowed
5982
6368
  * @param editor The Editor object
@@ -6066,9 +6452,27 @@ export class ContextMenu<T> implements EditorPlugin {
6066
6452
  private onDismiss;
6067
6453
  }
6068
6454
 
6455
+ /**
6456
+ * Context Menu options for ContextMenu plugin
6457
+ */
6069
6458
  export interface ContextMenuOptions<T> {
6459
+ /**
6460
+ * Render function for the context menu
6461
+ * @param container The container HTML element, it will be located at the mouse click position,
6462
+ * so the callback just need to render menu content into this container
6463
+ * @param onDismiss The onDismiss callback, some menu render need to know this callback so that
6464
+ * it can handle the dismiss event
6465
+ */
6070
6466
  render: (container: HTMLElement, items: (T | null)[], onDismiss: () => void) => void;
6467
+ /**
6468
+ * Dismiss function for the context menu, it will be called when user wants to dismiss this context menu
6469
+ * e.g. user click away so the menu should be dismissed
6470
+ * @param container The container HTML element
6471
+ */
6071
6472
  dismiss?: (container: HTMLElement) => void;
6473
+ /**
6474
+ * Whether the default context menu is allowed. @default false
6475
+ */
6072
6476
  allowDefaultMenu?: boolean;
6073
6477
  }
6074
6478
 
@@ -6221,6 +6625,10 @@ export class ImageEdit implements EditorPlugin {
6221
6625
  private editInfo;
6222
6626
  private lastSrc;
6223
6627
  private dndHelpers;
6628
+ /**
6629
+ * Identify if the image was resized by the user.
6630
+ */
6631
+ private wasResized;
6224
6632
  /**
6225
6633
  * Create a new instance of ImageEdit
6226
6634
  * @param options Image editing options
@@ -6327,6 +6735,30 @@ export function isResizedTo(image: HTMLImageElement, percentage: number): boolea
6327
6735
  */
6328
6736
  export function resetImage(editor: IEditor, image: HTMLImageElement): void;
6329
6737
 
6738
+ /**
6739
+ * @deprecated Use ImageEdit plugin instead
6740
+ */
6741
+ export class ImageResize extends ImageEdit {
6742
+ /**
6743
+ * Create a new instance of ImageResize
6744
+ * @param minWidth Minimum width of image when resize in pixel, default value is 10
6745
+ * @param minHeight Minimum height of image when resize in pixel, default value is 10
6746
+ * @param selectionBorderColor Color of resize border and handles, default value is #DB626C
6747
+ * @param forcePreserveRatio Whether always preserve width/height ratio when resize, default value is false
6748
+ * @param resizableImageSelector Selector for picking which image is resizable (e.g. for all images not placeholders), note
6749
+ * that the tag must be IMG regardless what the selector is
6750
+ */
6751
+ constructor(minWidth?: number, minHeight?: number, selectionBorderColor?: string, forcePreserveRatio?: boolean, resizableImageSelector?: string);
6752
+ /**
6753
+ * @deprecated
6754
+ */
6755
+ showResizeHandle(img: HTMLImageElement): void;
6756
+ /**
6757
+ * @deprecated
6758
+ */
6759
+ hideResizeHandle(selectImageAfterUnSelect?: boolean): void;
6760
+ }
6761
+
6330
6762
  /**
6331
6763
  * Paste plugin, handles BeforePaste event and reformat some special content, including:
6332
6764
  * 1. Content copied from Word
@@ -6335,6 +6767,7 @@ export function resetImage(editor: IEditor, image: HTMLImageElement): void;
6335
6767
  */
6336
6768
  export class Paste implements EditorPlugin {
6337
6769
  private unknownTagReplacement;
6770
+ private editor;
6338
6771
  /**
6339
6772
  * Construct a new instance of Paste class
6340
6773
  * @param unknownTagReplacement Replace solution of unknown tags, default behavior is to replace with SPAN
@@ -6348,7 +6781,7 @@ export class Paste implements EditorPlugin {
6348
6781
  * Initialize this plugin. This should only be called from Editor
6349
6782
  * @param editor Editor instance
6350
6783
  */
6351
- initialize(): void;
6784
+ initialize(editor: IEditor): void;
6352
6785
  /**
6353
6786
  * Dispose this plugin
6354
6787
  */
@@ -6369,7 +6802,8 @@ export class Paste implements EditorPlugin {
6369
6802
  *
6370
6803
  * PickerPlugin doesn't provide any UI, it just wraps related DOM events and invoke callback functions.
6371
6804
  * To show a picker UI, you need to build your own UI component. Please reference to
6372
- * https: */
6805
+ * https://github.com/microsoft/roosterjs/tree/master/demo/scripts/controls/samplepicker
6806
+ */
6373
6807
  export class PickerPlugin<T extends PickerDataProvider = PickerDataProvider> implements EditorPlugin {
6374
6808
  readonly dataProvider: T;
6375
6809
  private pickerOptions;