roosterjs 8.28.0-git → 8.29.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.28.0git)
1
+ // Type definitions for roosterjs (Version 8.29.0)
2
2
  // Generated by dts tool from roosterjs
3
3
  // Project: https://github.com/Microsoft/roosterjs
4
4
 
@@ -2777,6 +2777,11 @@ export interface PendingFormatStatePluginState {
2777
2777
  * The position of last pendable format state changing
2778
2778
  */
2779
2779
  pendableFormatPosition: NodePosition;
2780
+ /**
2781
+ * A temporary SPAN element to hold pending format change. it will be inserted into content when user type something,
2782
+ * or discard if focus position is moved
2783
+ */
2784
+ pendableFormatSpan: HTMLElement;
2780
2785
  }
2781
2786
 
2782
2787
  /**
@@ -3494,7 +3499,13 @@ export const enum ExperimentalFeatures {
3494
3499
  * @deprecated this feature is always disabled
3495
3500
  * Automatically transform -- into hyphen, if typed between two words.
3496
3501
  */
3497
- AutoHyphen = "AutoHyphen"
3502
+ AutoHyphen = "AutoHyphen",
3503
+ /**
3504
+ * Use pending format strategy to do style based format, e.g. Font size, Color.
3505
+ * With this feature enabled, we don't need to insert temp ZeroWidthSpace character to hold pending format
3506
+ * when selection is collapsed. Instead, we will hold the pending format in memory and only apply it when type something
3507
+ */
3508
+ PendingStyleBasedFormat = "PendingStyleBasedFormat"
3498
3509
  }
3499
3510
 
3500
3511
  /**
@@ -3931,7 +3942,11 @@ export const enum TableBorderFormat {
3931
3942
  * |
3932
3943
  * |
3933
3944
  */
3934
- ESPECIAL_TYPE_3 = 7
3945
+ ESPECIAL_TYPE_3 = 7,
3946
+ /**
3947
+ * No border
3948
+ */
3949
+ CLEAR = 8
3935
3950
  }
3936
3951
 
3937
3952
  /**
@@ -4496,14 +4511,28 @@ export interface CompatibleExtractContentWithDomEvent extends ExtractContentWith
4496
4511
  * An event fired when pending format state (bold, italic, underline, ... with collapsed selection) is changed
4497
4512
  */
4498
4513
  export interface PendingFormatStateChangedEvent extends BasePluginEvent<PluginEventType.PendingFormatStateChanged> {
4514
+ /**
4515
+ * The new format state to apply. If null is passed, clear existing pending format state if any
4516
+ */
4499
4517
  formatState: PendableFormatState;
4518
+ /**
4519
+ * A callback to do format change to a temp element. This is used for style-based format such as font and color
4520
+ */
4521
+ formatCallback?: (element: HTMLElement, isInnerNode?: boolean) => any;
4500
4522
  }
4501
4523
 
4502
4524
  /**
4503
4525
  * An event fired when pending format state (bold, italic, underline, ... with collapsed selection) is changed
4504
4526
  */
4505
4527
  export interface CompatiblePendingFormatStateChangedEvent extends BasePluginEvent<CompatiblePluginEventType.PendingFormatStateChanged> {
4528
+ /**
4529
+ * The new format state to apply. If null is passed, clear existing pending format state if any
4530
+ */
4506
4531
  formatState: PendableFormatState;
4532
+ /**
4533
+ * A callback to do format change to a temp element. This is used for style-based format such as font and color
4534
+ */
4535
+ formatCallback?: (element: HTMLElement, isInnerNode?: boolean) => any;
4507
4536
  }
4508
4537
 
4509
4538
  /**
@@ -5037,6 +5066,10 @@ export interface ElementBasedFormatState {
5037
5066
  * Whether unlink command can be called to the text
5038
5067
  */
5039
5068
  canUnlink?: boolean;
5069
+ /**
5070
+ * Whether the selected text is multiline
5071
+ */
5072
+ isMultilineSelection?: boolean;
5040
5073
  /**
5041
5074
  * Whether add image alt text command can be called to the text
5042
5075
  */
@@ -7721,7 +7754,13 @@ export enum CompatibleExperimentalFeatures {
7721
7754
  * @deprecated this feature is always disabled
7722
7755
  * Automatically transform -- into hyphen, if typed between two words.
7723
7756
  */
7724
- AutoHyphen = "AutoHyphen"
7757
+ AutoHyphen = "AutoHyphen",
7758
+ /**
7759
+ * Use pending format strategy to do style based format, e.g. Font size, Color.
7760
+ * With this feature enabled, we don't need to insert temp ZeroWidthSpace character to hold pending format
7761
+ * when selection is collapsed. Instead, we will hold the pending format in memory and only apply it when type something
7762
+ */
7763
+ PendingStyleBasedFormat = "PendingStyleBasedFormat"
7725
7764
  }
7726
7765
 
7727
7766
  /**
@@ -8039,7 +8078,11 @@ export enum CompatibleTableBorderFormat {
8039
8078
  * |
8040
8079
  * |
8041
8080
  */
8042
- ESPECIAL_TYPE_3 = 7
8081
+ ESPECIAL_TYPE_3 = 7,
8082
+ /**
8083
+ * No border
8084
+ */
8085
+ CLEAR = 8
8043
8086
  }
8044
8087
 
8045
8088
  /**
@@ -2311,7 +2311,7 @@ function changeFontSize(editor, change, fontSizes) {
2311
2311
  if (fontSizes === void 0) { fontSizes = exports.FONT_SIZES; }
2312
2312
  var changeBase = change == 0 /* Increase */ ? 1 : -1;
2313
2313
  (0, applyInlineStyle_1.default)(editor, function (element) {
2314
- var pt = parseFloat((0, roosterjs_editor_dom_1.getComputedStyle)(element, 'font-size'));
2314
+ var pt = parseFloat((0, roosterjs_editor_dom_1.getComputedStyle)(element, 'font-size') || element.style.fontSize);
2315
2315
  element.style.fontSize = getNewFontSize(pt, changeBase, fontSizes) + 'pt';
2316
2316
  var lineHeight = (0, roosterjs_editor_dom_1.getComputedStyle)(element, 'line-height');
2317
2317
  if (lineHeight != 'normal') {
@@ -2808,10 +2808,19 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
2808
2808
  */
2809
2809
  function getElementBasedFormatState(editor, event) {
2810
2810
  var listTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('OL,UL', null /*startFrom*/, event));
2811
+ // Check if selection is multiline, spans more than one block
2812
+ var range = editor.getSelectionRange();
2813
+ var multiline = false;
2814
+ if (range && !range.collapsed) {
2815
+ var startingBlock = editor.getBlockElementAtNode(range.startContainer);
2816
+ var endingBlock = editor.getBlockElementAtNode(range.endContainer);
2817
+ multiline = !endingBlock.equals(startingBlock);
2818
+ }
2811
2819
  var headerTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('H1,H2,H3,H4,H5,H6', null /*startFrom*/, event));
2812
2820
  return {
2813
2821
  isBullet: listTag == 'UL',
2814
2822
  isNumbering: listTag == 'OL',
2823
+ isMultilineSelection: multiline,
2815
2824
  headerLevel: (headerTag && parseInt(headerTag[1])) || 0,
2816
2825
  canUnlink: !!editor.queryElements('a[href]', 1 /* OnSelection */)[0],
2817
2826
  canAddImageAltText: !!editor.queryElements('img', 1 /* OnSelection */)[0],
@@ -4105,6 +4114,7 @@ exports.default = formatTable;
4105
4114
 
4106
4115
  Object.defineProperty(exports, "__esModule", { value: true });
4107
4116
  var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
4117
+ var setBackgroundColor_1 = __webpack_require__(/*! ../format/setBackgroundColor */ "./packages/roosterjs-editor-api/lib/format/setBackgroundColor.ts");
4108
4118
  var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
4109
4119
  /**
4110
4120
  * Insert table into editor at current selection
@@ -4134,6 +4144,10 @@ function insertTable(editor, columns, rows, format) {
4134
4144
  }
4135
4145
  editor.focus();
4136
4146
  (0, formatUndoSnapshot_1.default)(editor, function () {
4147
+ var element = editor.getElementAtCursor();
4148
+ if (element.style.backgroundColor) {
4149
+ (0, setBackgroundColor_1.default)(editor, 'transparent');
4150
+ }
4137
4151
  var vtable = new roosterjs_editor_dom_1.VTable(table);
4138
4152
  vtable.applyFormat(format);
4139
4153
  vtable.writeBack();
@@ -4181,6 +4195,9 @@ var ZERO_WIDTH_SPACE = '\u200B';
4181
4195
  function applyInlineStyle(editor, callback, apiName) {
4182
4196
  editor.focus();
4183
4197
  var selection = editor.getSelectionRangeEx();
4198
+ var safeCallback = function (element, isInnerNode) {
4199
+ return element.isContentEditable && callback(element, isInnerNode);
4200
+ };
4184
4201
  if (selection && selection.areAllCollapsed) {
4185
4202
  var range = selection.ranges[0];
4186
4203
  var node = range.startContainer;
@@ -4189,7 +4206,14 @@ function applyInlineStyle(editor, callback, apiName) {
4189
4206
  ((0, roosterjs_editor_dom_1.getTagOfNode)(node.firstChild) == 'BR' && !node.firstChild.nextSibling));
4190
4207
  if (isEmptySpan) {
4191
4208
  editor.addUndoSnapshot();
4192
- callback(node);
4209
+ safeCallback(node);
4210
+ }
4211
+ else if (editor.isFeatureEnabled("PendingStyleBasedFormat" /* PendingStyleBasedFormat */)) {
4212
+ editor.triggerPluginEvent(13 /* PendingFormatStateChanged */, {
4213
+ formatState: {},
4214
+ formatCallback: safeCallback,
4215
+ });
4216
+ editor.triggerContentChangedEvent("Format" /* Format */);
4193
4217
  }
4194
4218
  else {
4195
4219
  var isZWSNode = node &&
@@ -4204,7 +4228,7 @@ function applyInlineStyle(editor, callback, apiName) {
4204
4228
  node = editor.getDocument().createTextNode(ZERO_WIDTH_SPACE);
4205
4229
  range.insertNode(node);
4206
4230
  }
4207
- (0, roosterjs_editor_dom_1.applyTextStyle)(node, callback);
4231
+ (0, roosterjs_editor_dom_1.applyTextStyle)(node, safeCallback);
4208
4232
  editor.select(node, -1 /* End */);
4209
4233
  }
4210
4234
  }
@@ -4220,7 +4244,7 @@ function applyInlineStyle(editor, callback, apiName) {
4220
4244
  while (inlineElement) {
4221
4245
  var nextInlineElement = contentTraverser.getNextInlineElement();
4222
4246
  inlineElement.applyStyle(function (element, isInnerNode) {
4223
- callback(element, isInnerNode);
4247
+ safeCallback(element, isInnerNode);
4224
4248
  firstNode = firstNode || element;
4225
4249
  lastNode = element;
4226
4250
  });
@@ -5404,19 +5428,35 @@ var getStyleBasedFormatState = function (core, node) {
5404
5428
  if (!node) {
5405
5429
  return {};
5406
5430
  }
5431
+ var override = [];
5432
+ var pendableFormatSpan = core.pendingFormatState.pendableFormatSpan;
5433
+ if (pendableFormatSpan) {
5434
+ override = [
5435
+ pendableFormatSpan.style.fontFamily,
5436
+ pendableFormatSpan.style.fontSize,
5437
+ pendableFormatSpan.style.color,
5438
+ pendableFormatSpan.style.backgroundColor,
5439
+ ];
5440
+ }
5407
5441
  var styles = node ? (0, roosterjs_editor_dom_1.getComputedStyles)(node) : [];
5408
5442
  var isDarkMode = core.lifecycle.isDarkMode;
5409
5443
  var root = core.contentDiv;
5410
- var ogTextColorNode = isDarkMode && (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, root, ORIGINAL_STYLE_COLOR_SELECTOR);
5411
- var ogBackgroundColorNode = isDarkMode && (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, root, ORIGINAL_STYLE_BACK_COLOR_SELECTOR);
5444
+ var ogTextColorNode = isDarkMode &&
5445
+ (override[2]
5446
+ ? pendableFormatSpan
5447
+ : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, root, ORIGINAL_STYLE_COLOR_SELECTOR));
5448
+ var ogBackgroundColorNode = isDarkMode &&
5449
+ (override[3]
5450
+ ? pendableFormatSpan
5451
+ : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, root, ORIGINAL_STYLE_BACK_COLOR_SELECTOR));
5412
5452
  return {
5413
- fontName: styles[0],
5414
- fontSize: styles[1],
5415
- textColor: styles[2],
5416
- backgroundColor: styles[3],
5453
+ fontName: override[0] || styles[0],
5454
+ fontSize: override[1] || styles[1],
5455
+ textColor: override[2] || styles[2],
5456
+ backgroundColor: override[3] || styles[3],
5417
5457
  textColors: ogTextColorNode
5418
5458
  ? {
5419
- darkModeColor: styles[2],
5459
+ darkModeColor: override[2] || styles[2],
5420
5460
  lightModeColor: ogTextColorNode.dataset["ogsc" /* OriginalStyleColor */] ||
5421
5461
  ogTextColorNode.dataset["ogac" /* OriginalAttributeColor */] ||
5422
5462
  styles[2],
@@ -5424,7 +5464,7 @@ var getStyleBasedFormatState = function (core, node) {
5424
5464
  : undefined,
5425
5465
  backgroundColors: ogBackgroundColorNode
5426
5466
  ? {
5427
- darkModeColor: styles[3],
5467
+ darkModeColor: override[3] || styles[3],
5428
5468
  lightModeColor: ogBackgroundColorNode.dataset["ogsb" /* OriginalStyleBackgroundColor */] ||
5429
5469
  ogBackgroundColorNode.dataset["ogab" /* OriginalAttributeBackgroundColor */] ||
5430
5470
  styles[3],
@@ -7515,6 +7555,7 @@ function normalizeTables(tables) {
7515
7555
 
7516
7556
  Object.defineProperty(exports, "__esModule", { value: true });
7517
7557
  var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
7558
+ var ZERO_WIDTH_SPACE = '\u200B';
7518
7559
  /**
7519
7560
  * @internal
7520
7561
  * PendingFormatStatePlugin handles pending format state management
@@ -7529,6 +7570,7 @@ var PendingFormatStatePlugin = /** @class */ (function () {
7529
7570
  this.state = {
7530
7571
  pendableFormatPosition: null,
7531
7572
  pendableFormatState: null,
7573
+ pendableFormatSpan: null,
7532
7574
  };
7533
7575
  }
7534
7576
  /**
@@ -7564,18 +7606,37 @@ var PendingFormatStatePlugin = /** @class */ (function () {
7564
7606
  PendingFormatStatePlugin.prototype.onPluginEvent = function (event) {
7565
7607
  switch (event.eventType) {
7566
7608
  case 13 /* PendingFormatStateChanged */:
7567
- // Got PendingFormatStateChanged event, cache current position and pending format
7568
- this.state.pendableFormatPosition = this.getCurrentPosition();
7569
- this.state.pendableFormatState = event.formatState;
7609
+ // Got PendingFormatStateChanged event, cache current position and pending format if a format is passed in
7610
+ // otherwise clear existing pending format.
7611
+ if (event.formatState) {
7612
+ this.state.pendableFormatPosition = this.getCurrentPosition();
7613
+ this.state.pendableFormatState = event.formatState;
7614
+ this.state.pendableFormatSpan = event.formatCallback
7615
+ ? this.createPendingFormatSpan(event.formatCallback)
7616
+ : null;
7617
+ }
7618
+ else {
7619
+ this.clear();
7620
+ }
7570
7621
  break;
7571
7622
  case 0 /* KeyDown */:
7572
7623
  case 5 /* MouseDown */:
7573
7624
  case 7 /* ContentChanged */:
7574
- // If content or position is changed (by keyboard, mouse, or code),
7575
- // check if current position is still the same with the cached one (if exist),
7576
- // and clear cached format if position is changed since it is out-of-date now
7577
- if (this.state.pendableFormatPosition &&
7578
- !this.state.pendableFormatPosition.equalTo(this.getCurrentPosition())) {
7625
+ if (event.eventType == 0 /* KeyDown */ &&
7626
+ (0, roosterjs_editor_dom_1.isCharacterValue)(event.rawEvent) &&
7627
+ this.state.pendableFormatSpan) {
7628
+ this.editor.insertNode(this.state.pendableFormatSpan);
7629
+ this.editor.select(this.state.pendableFormatSpan, -2 /* Before */, this.state.pendableFormatSpan, -1 /* End */);
7630
+ this.clear();
7631
+ }
7632
+ else if ((event.eventType == 0 /* KeyDown */ &&
7633
+ event.rawEvent.which >= 33 /* PAGEUP */ &&
7634
+ event.rawEvent.which <= 40 /* DOWN */) ||
7635
+ (this.state.pendableFormatPosition &&
7636
+ !this.state.pendableFormatPosition.equalTo(this.getCurrentPosition()))) {
7637
+ // If content or position is changed (by keyboard, mouse, or code),
7638
+ // check if current position is still the same with the cached one (if exist),
7639
+ // and clear cached format if position is changed since it is out-of-date now
7579
7640
  this.clear();
7580
7641
  }
7581
7642
  break;
@@ -7584,11 +7645,29 @@ var PendingFormatStatePlugin = /** @class */ (function () {
7584
7645
  PendingFormatStatePlugin.prototype.clear = function () {
7585
7646
  this.state.pendableFormatPosition = null;
7586
7647
  this.state.pendableFormatState = null;
7648
+ this.state.pendableFormatSpan = null;
7587
7649
  };
7588
7650
  PendingFormatStatePlugin.prototype.getCurrentPosition = function () {
7589
7651
  var range = this.editor.getSelectionRange();
7590
7652
  return range && roosterjs_editor_dom_1.Position.getStart(range).normalize();
7591
7653
  };
7654
+ PendingFormatStatePlugin.prototype.createPendingFormatSpan = function (callback) {
7655
+ var span = this.state.pendableFormatSpan;
7656
+ if (!span) {
7657
+ var currentStyle = this.editor.getStyleBasedFormatState();
7658
+ var doc = this.editor.getDocument();
7659
+ var isDarkMode = this.editor.isDarkMode();
7660
+ span = doc.createElement('span');
7661
+ span.contentEditable = 'true';
7662
+ span.appendChild(doc.createTextNode(ZERO_WIDTH_SPACE));
7663
+ span.style.fontFamily = currentStyle.fontName;
7664
+ span.style.fontSize = currentStyle.fontSize;
7665
+ (0, roosterjs_editor_dom_1.setColor)(span, currentStyle.textColors || currentStyle.textColor, false /*isBackground*/, isDarkMode);
7666
+ (0, roosterjs_editor_dom_1.setColor)(span, currentStyle.backgroundColors || currentStyle.backgroundColor, true /*isBackground*/, isDarkMode);
7667
+ }
7668
+ callback(span);
7669
+ return span;
7670
+ };
7592
7671
  return PendingFormatStatePlugin;
7593
7672
  }());
7594
7673
  exports.default = PendingFormatStatePlugin;
@@ -10046,6 +10125,7 @@ exports.default = SelectionScoper;
10046
10125
  Object.defineProperty(exports, "__esModule", { value: true });
10047
10126
  var changeElementTag_1 = __webpack_require__(/*! ../utils/changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
10048
10127
  var contains_1 = __webpack_require__(/*! ../utils/contains */ "./packages/roosterjs-editor-dom/lib/utils/contains.ts");
10128
+ var ContentTraverser_1 = __webpack_require__(/*! ../contentTraverser/ContentTraverser */ "./packages/roosterjs-editor-dom/lib/contentTraverser/ContentTraverser.ts");
10049
10129
  var createRange_1 = __webpack_require__(/*! ../selection/createRange */ "./packages/roosterjs-editor-dom/lib/selection/createRange.ts");
10050
10130
  var findClosestElementAncestor_1 = __webpack_require__(/*! ../utils/findClosestElementAncestor */ "./packages/roosterjs-editor-dom/lib/utils/findClosestElementAncestor.ts");
10051
10131
  var getBlockElementAtNode_1 = __webpack_require__(/*! ../blockElements/getBlockElementAtNode */ "./packages/roosterjs-editor-dom/lib/blockElements/getBlockElementAtNode.ts");
@@ -10071,6 +10151,7 @@ var adjustSteps = [
10071
10151
  adjustInsertPositionForVoidElement,
10072
10152
  adjustInsertPositionForMoveCursorOutOfALink,
10073
10153
  adjustInsertPositionForNotEditableNode,
10154
+ adjustInsertPositionForTable,
10074
10155
  ];
10075
10156
  /**
10076
10157
  * Adjust position for A tag don't be nested inside another A tag.
@@ -10231,6 +10312,37 @@ function adjustInsertPositionForNotEditableNode(root, nodeToInsert, position, ra
10231
10312
  }
10232
10313
  return position;
10233
10314
  }
10315
+ /**
10316
+ * Adjust the position of a table to be one line after another table.
10317
+ */
10318
+ function adjustInsertPositionForTable(root, nodeToInsert, position, range) {
10319
+ if ((nodeToInsert.childNodes.length == 1 &&
10320
+ (0, getTagOfNode_1.default)(nodeToInsert.childNodes[0]) == 'TABLE') ||
10321
+ (0, getTagOfNode_1.default)(nodeToInsert) == 'TABLE') {
10322
+ var element = position.element;
10323
+ var posBefore = new Position_1.default(element, -2 /* Before */);
10324
+ var rangeToTraverse = (0, createRange_1.default)(posBefore, position);
10325
+ var contentTraverser = ContentTraverser_1.default.createSelectionTraverser(root, rangeToTraverse);
10326
+ var blockElement = contentTraverser && contentTraverser.currentBlockElement;
10327
+ var nextBlockElement = blockElement;
10328
+ while (!nextBlockElement) {
10329
+ nextBlockElement = contentTraverser.getNextBlockElement();
10330
+ if (nextBlockElement) {
10331
+ blockElement = nextBlockElement;
10332
+ }
10333
+ }
10334
+ var prevElement = blockElement === null || blockElement === void 0 ? void 0 : blockElement.getEndNode();
10335
+ if (prevElement && (0, findClosestElementAncestor_1.default)(prevElement, root, 'TABLE')) {
10336
+ var tempRange = (0, createRange_1.default)(position);
10337
+ tempRange.collapse(false /* toStart */);
10338
+ var br = root.ownerDocument.createElement('br');
10339
+ tempRange.insertNode(br);
10340
+ tempRange = (0, createRange_1.default)(br);
10341
+ position = Position_1.default.getEnd(tempRange);
10342
+ }
10343
+ }
10344
+ return position;
10345
+ }
10234
10346
  /**
10235
10347
  *
10236
10348
  * @param root the contentDiv of the ditor
@@ -10293,7 +10405,12 @@ function deleteSelectedContent(root, range) {
10293
10405
  if (!regionRange) {
10294
10406
  return null;
10295
10407
  }
10296
- var startContainer = regionRange.startContainer, endContainer = regionRange.endContainer, startOffset = regionRange.startOffset, endOffset = regionRange.endOffset;
10408
+ var startContainer = regionRange.startContainer, endContainer = regionRange.endContainer, startOffset = regionRange.startOffset, endOffset = regionRange.endOffset, commonAncestorContainer = regionRange.commonAncestorContainer;
10409
+ // Disallow merging of readonly elements
10410
+ if ((0, safeInstanceOf_1.default)(commonAncestorContainer, 'HTMLElement') &&
10411
+ !commonAncestorContainer.isContentEditable) {
10412
+ return null;
10413
+ }
10297
10414
  // Make sure there are node before and after the merging point.
10298
10415
  // This is required by mergeBlocksInRegion API.
10299
10416
  // This may create some empty text node as anchor
@@ -10306,8 +10423,8 @@ function deleteSelectedContent(root, range) {
10306
10423
  return { region: region, beforeStart: beforeStart, afterEnd: afterEnd };
10307
10424
  })
10308
10425
  .filter(function (x) { return !!x; });
10309
- // 3. Delete all nodes that we found
10310
- nodesToDelete.forEach(function (node) { var _a; return (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node); });
10426
+ // 3. Delete all nodes that we found, whose parent is editable
10427
+ nodesToDelete.forEach(function (node) { var _a; return ((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.isContentEditable) && node.parentElement.removeChild(node); });
10311
10428
  // 4. Merge lines for each region, so that after we don't see extra line breaks
10312
10429
  nodesPairToMerge.forEach(function (nodes) {
10313
10430
  if (nodes) {
@@ -17804,6 +17921,7 @@ var TRANSPARENT = 'transparent';
17804
17921
  var DARK_COLORS_LIGHTNESS = 20;
17805
17922
  //If the value of the lightness is more than 80, the color is bright
17806
17923
  var BRIGHT_COLORS_LIGHTNESS = 80;
17924
+ var TRANSPARENT_COLOR = 'transparent';
17807
17925
  /**
17808
17926
  * Set text color or background color to the given element
17809
17927
  * @param element The element to set color to
@@ -17824,7 +17942,7 @@ function setColor(element, color, isBackgroundColor, isDarkMode, shouldAdaptTheF
17824
17942
  var dataSetName = isBackgroundColor
17825
17943
  ? "ogsb" /* OriginalStyleBackgroundColor */
17826
17944
  : "ogsc" /* OriginalStyleColor */;
17827
- if (!isDarkMode) {
17945
+ if (!isDarkMode || color == TRANSPARENT_COLOR) {
17828
17946
  delete element.dataset[dataSetName];
17829
17947
  }
17830
17948
  else if (modeIndependentColor) {
@@ -19381,16 +19499,17 @@ var AutoNumberingList = {
19381
19499
  var searcher = editor.getContentSearcherOfCursor();
19382
19500
  var textBeforeCursor = searcher.getSubStringBefore(5);
19383
19501
  var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
19384
- var listStyle = (0, getAutoNumberingListStyle_1.default)(textBeforeCursor);
19385
19502
  if (!textRange) {
19386
19503
  // no op if the range can't be found
19387
19504
  }
19388
19505
  else if ((regions = editor.getSelectedRegions()) && regions.length == 1) {
19389
19506
  var num = parseInt(textBeforeCursor);
19507
+ var listStyle = (0, getAutoNumberingListStyle_1.default)(textBeforeCursor, num);
19390
19508
  prepareAutoBullet(editor, textRange);
19391
19509
  (0, roosterjs_editor_api_1.toggleNumbering)(editor, num, listStyle, 'autoToggleList' /** apiNameOverride */);
19392
19510
  }
19393
19511
  else {
19512
+ var listStyle = (0, getAutoNumberingListStyle_1.default)(textBeforeCursor);
19394
19513
  prepareAutoBullet(editor, textRange);
19395
19514
  (0, roosterjs_editor_api_1.toggleNumbering)(editor, undefined /* startNumber*/, listStyle, 'autoToggleList' /** apiNameOverride */);
19396
19515
  }
@@ -20311,13 +20430,13 @@ var characters = {
20311
20430
  '.': 1 /* Dot */,
20312
20431
  '-': 2 /* Dash */,
20313
20432
  ')': 3 /* Parenthesis */,
20314
- '(': 4 /* DoubleParenthesis */,
20315
20433
  };
20316
- var identifyCharacter = function (text, secondSeparator) {
20317
- var charType = characters[text];
20318
- return charType === 4 /* DoubleParenthesis */ && secondSeparator !== ')'
20319
- ? undefined
20320
- : charType;
20434
+ var numberingTriggers = {
20435
+ '1': 1 /* Decimal */,
20436
+ i: 4 /* LowerRoman */,
20437
+ I: 5 /* UpperRoman */,
20438
+ a: 2 /* LowerAlpha */,
20439
+ A: 3 /* UpperAlpha */,
20321
20440
  };
20322
20441
  var identifyNumberingType = function (text) {
20323
20442
  if (!isNaN(parseInt(text))) {
@@ -20377,28 +20496,34 @@ var DecimalsTypes = (_f = {},
20377
20496
  _f[3 /* Parenthesis */] = 3 /* DecimalParenthesis */,
20378
20497
  _f[4 /* DoubleParenthesis */] = 4 /* DecimalDoubleParenthesis */,
20379
20498
  _f);
20380
- var identifyNumberingListType = function (numbering) {
20381
- // If the marker length is 3, the marker style is double parenthis such as (1), (A). Then the number is second character of the string and the separator is first character and last character.
20382
- var separator = numbering.length === 3 ? numbering[0] : numbering[1];
20383
- var secondSeparator = numbering.length === 3 ? numbering[2] : undefined;
20384
- var char = identifyCharacter(separator, secondSeparator);
20499
+ var identifyNumberingListType = function (numbering, isDoubleParenthesis, startNumber) {
20500
+ var separatorCharacter = isDoubleParenthesis
20501
+ ? 4 /* DoubleParenthesis */
20502
+ : characters[numbering[1]];
20385
20503
  // if separator is not valid, no need to check if the number is valid.
20386
- if (char) {
20504
+ if (separatorCharacter) {
20387
20505
  var number = numbering.length === 3 ? numbering[1] : numbering[0];
20388
- var numberingType = identifyNumberingType(number);
20389
- return numberingType ? numberingListTypes[numberingType](char) : null;
20506
+ var numberingType = startNumber
20507
+ ? identifyNumberingType(number)
20508
+ : numberingTriggers[number];
20509
+ return numberingType ? numberingListTypes[numberingType](separatorCharacter) : null;
20390
20510
  }
20391
20511
  return null;
20392
20512
  };
20393
20513
  /**
20394
20514
  * @internal
20395
20515
  * @param textBeforeCursor The trigger character
20516
+ * @param startNumber (Optional) Start number of the list
20396
20517
  * @returns The style of a numbering list triggered by a string
20397
20518
  */
20398
- function getAutoNumberingListStyle(textBeforeCursor) {
20519
+ function getAutoNumberingListStyle(textBeforeCursor, startNumber) {
20399
20520
  var trigger = textBeforeCursor.trim();
20400
20521
  // the marker must be a combination of 2 or 3 characters, so if the length is less than 2, no need to check
20401
- var numberingType = trigger.length > 1 ? identifyNumberingListType(trigger) : null;
20522
+ // If the marker length is 3, the marker style is double parenthesis such as (1), (A).
20523
+ var isDoubleParenthesis = trigger.length === 3 && trigger[0] === '(' && trigger[2] === ')';
20524
+ var numberingType = trigger.length === 2 || isDoubleParenthesis
20525
+ ? identifyNumberingListType(trigger, isDoubleParenthesis, startNumber)
20526
+ : null;
20402
20527
  return numberingType;
20403
20528
  }
20404
20529
  exports.default = getAutoNumberingListStyle;
@@ -22167,13 +22292,21 @@ exports.Resizer = {
22167
22292
  ? base.heightPx
22168
22293
  : Math.max(base.heightPx + deltaY * (y == 'n' ? -1 : 1), options.minHeight);
22169
22294
  if (shouldPreserveRatio && ratio > 0) {
22170
- newHeight = Math.min(newHeight, newWidth / ratio);
22171
- newWidth = Math.min(newWidth, newHeight * ratio);
22172
- if (newWidth < newHeight * ratio) {
22295
+ if (ratio > 1) {
22296
+ // first sure newHeight is right,calculate newWidth
22173
22297
  newWidth = newHeight * ratio;
22298
+ if (newWidth < options.minWidth) {
22299
+ newWidth = options.minWidth;
22300
+ newHeight = newWidth / ratio;
22301
+ }
22174
22302
  }
22175
22303
  else {
22304
+ // first sure newWidth is right,calculate newHeight
22176
22305
  newHeight = newWidth / ratio;
22306
+ if (newHeight < options.minHeight) {
22307
+ newHeight = options.minHeight;
22308
+ newWidth = newHeight * ratio;
22309
+ }
22177
22310
  }
22178
22311
  }
22179
22312
  editInfo.widthPx = newWidth;
@@ -27423,6 +27556,12 @@ var CompatibleExperimentalFeatures;
27423
27556
  * Automatically transform -- into hyphen, if typed between two words.
27424
27557
  */
27425
27558
  CompatibleExperimentalFeatures["AutoHyphen"] = "AutoHyphen";
27559
+ /**
27560
+ * Use pending format strategy to do style based format, e.g. Font size, Color.
27561
+ * With this feature enabled, we don't need to insert temp ZeroWidthSpace character to hold pending format
27562
+ * when selection is collapsed. Instead, we will hold the pending format in memory and only apply it when type something
27563
+ */
27564
+ CompatibleExperimentalFeatures["PendingStyleBasedFormat"] = "PendingStyleBasedFormat";
27426
27565
  })(CompatibleExperimentalFeatures = exports.CompatibleExperimentalFeatures || (exports.CompatibleExperimentalFeatures = {}));
27427
27566
 
27428
27567
 
@@ -28241,6 +28380,10 @@ var CompatibleTableBorderFormat;
28241
28380
  * |
28242
28381
  */
28243
28382
  CompatibleTableBorderFormat[CompatibleTableBorderFormat["ESPECIAL_TYPE_3"] = 7] = "ESPECIAL_TYPE_3";
28383
+ /**
28384
+ * No border
28385
+ */
28386
+ CompatibleTableBorderFormat[CompatibleTableBorderFormat["CLEAR"] = 8] = "CLEAR";
28244
28387
  })(CompatibleTableBorderFormat = exports.CompatibleTableBorderFormat || (exports.CompatibleTableBorderFormat = {}));
28245
28388
 
28246
28389