microsoft
diff --git a/‎demo/scripts/controls/sidePane/editorOptions/ContentEditFeatures.tsx‎
Lines changed: 1 addition & 0 deletions b/‎demo/scripts/controls/sidePane/editorOptions/ContentEditFeatures.tsx‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts‎
Lines changed: 1 addition & 0 deletions b/‎demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx‎
Lines changed: 4 additions & 0 deletions b/‎demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎demo/scripts/controls/sidePane/snapshot/SnapshotPane.tsx‎
Lines changed: 1 addition & 0 deletions b/‎demo/scripts/controls/sidePane/snapshot/SnapshotPane.tsx‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎package.json‎
Lines changed: 1 addition & 1 deletion b/‎package.json‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎packages/roosterjs-content-model/lib/formatHandlers/block/whiteSpaceFormatHandler.ts‎
Lines changed: 3 additions & 0 deletions b/‎packages/roosterjs-content-model/lib/formatHandlers/block/whiteSpaceFormatHandler.ts‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎packages/roosterjs-content-model/lib/formatHandlers/utils/color.ts‎
Lines changed: 26 additions & 0 deletions b/‎packages/roosterjs-content-model/lib/formatHandlers/utils/color.ts‎
Lines changed: 26 additions & 0 deletions
diff --git a/‎packages/roosterjs-content-model/lib/modelApi/common/clearModelFormat.ts‎
Lines changed: 25 additions & 14 deletions b/‎packages/roosterjs-content-model/lib/modelApi/common/clearModelFormat.ts‎
Lines changed: 25 additions & 14 deletions
diff --git a/‎packages/roosterjs-content-model/lib/modelApi/common/mergeModel.ts‎
Lines changed: 8 additions & 2 deletions b/‎packages/roosterjs-content-model/lib/modelApi/common/mergeModel.ts‎
Lines changed: 8 additions & 2 deletions
@@ -48,6 +48,7 @@ const EditFeatureDescriptionMap: Record<keyof ContentEditFeatureSettings, string
     autoNumberingList:
         'When press space after an number, a letter or roman number followed by ), ., -, or between parenthesis in an empty line, toggle numbering',
     mergeListOnBackspaceAfterList: 'When backspacing between lists, merge the lists',
+    deleteTableWithBackspace: 'Delete table with backspace key with whole table is selected',
 };
 
 export interface ContentEditFeaturessProps {
 
@@ -32,6 +32,7 @@ const initialState: BuildInPluginState = {
         ExperimentalFeatures.DefaultFormatInSpan,
         ExperimentalFeatures.AutoFormatList,
         ExperimentalFeatures.VariableBasedDarkColor,
+        ExperimentalFeatures.InlineEntityReadOnlyDelimiters,
     ],
     isRtl: false,
 };
 
@@ -19,6 +19,10 @@ const FeatureNames: Partial<Record<ExperimentalFeatures, string>> = {
     [ExperimentalFeatures.DefaultFormatInSpan]:
         'When apply default format when initialize or user type, apply the format on a SPAN element.',
     [ExperimentalFeatures.VariableBasedDarkColor]: 'Use variable-based color for dark mode',
+    [ExperimentalFeatures.DeleteTableWithBackspace]:
+        'Delete a table selected with the table selector pressing Backspace key',
+    [ExperimentalFeatures.InlineEntityReadOnlyDelimiters]:
+        'Add read entities around read only entities to handle browser edge cases.',
 };
 
 export default class ExperimentalFeaturesPane extends React.Component<
 
@@ -43,6 +43,7 @@ export default class SnapshotPane extends React.Component<SnapshotPaneProps, Sna
                             this.props.onRestoreSnapshot({
                                 html: this.textarea.value,
                                 metadata: null,
+                                knownColors: [],
                             })
                         }>
                         {'Restore snapshot'}
 
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.42.0",
+    "version": "8.43.0",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",
 
@@ -16,6 +16,9 @@ export const whiteSpaceFormatHandler: FormatHandler<WhiteSpaceFormat> = {
         if (format.whiteSpace == 'pre') {
             const pre = element.ownerDocument.createElement('pre');
 
+            pre.style.marginTop = '0';
+            pre.style.marginBottom = '0';
+
             element.parentNode?.appendChild(pre);
             pre.appendChild(element);
         } else if (format.whiteSpace) {
 
@@ -1,4 +1,5 @@
 import { DarkColorHandler, DarkModeDatasetNames } from 'roosterjs-editor-types';
+import { getTagOfNode } from 'roosterjs-editor-dom';
 
 /**
  * @internal
@@ -26,6 +27,8 @@ export function getColor(
 
     if (!color) {
         color =
+            (darkColorHandler &&
+                tryGetFontColor(element, isDarkMode, darkColorHandler, isBackground)) ||
             (isBackground ? element.style.backgroundColor : element.style.color) ||
             element.getAttribute(isBackground ? 'bgcolor' : 'color') ||
             undefined;
@@ -73,3 +76,26 @@ export function setColor(
         element.style.color = effectiveColor;
     }
 }
+
+/**
+ * There is a known issue that when input with IME in Chrome, it is possible Chrome insert a new FONT tag with colors.
+ * If editor is in dark mode, this color will cause the FONT tag doesn't have light mode color info so that after convert
+ * to light mode the color will be wrong.
+ * To workaround it, we check if this is a known color (for light mode with VariableBasedDarkColor enabled, all used colors
+ * are stored in darkColorHandler), then use the related light mode color instead.
+ */
+function tryGetFontColor(
+    element: HTMLElement,
+    isDarkMode: boolean,
+    darkColorHandler: DarkColorHandler,
+    isBackground: boolean
+) {
+    let darkColor: string | null;
+
+    return getTagOfNode(element) == 'FONT' &&
+        !element.style.getPropertyValue(isBackground ? 'background-color' : 'color') &&
+        isDarkMode &&
+        (darkColor = element.getAttribute(isBackground ? 'bgcolor' : 'color'))
+        ? darkColorHandler.findLightColorFromDarkColor(darkColor)
+        : null;
+}
@@ -1,3 +1,4 @@
+import { adjustWordSelection } from '../selection/adjustWordSelection';
 import { applyTableFormat } from '../table/applyTableFormat';
 import { arrayPush } from 'roosterjs-editor-dom';
 import { ContentModelBlock } from '../../publicTypes/block/ContentModelBlock';
@@ -39,27 +40,39 @@ export function clearModelFormat(
             }
         },
         {
-            includeListFormatHolder: 'anySegment',
+            // When there is a default format to apply, we know how to handle segment format under list.
+            // So no need to clear format of list number.
+            // Otherwise, we will clear all format of selected text. And since they are under LI tag, we
+            // also need to clear the format of LI (format holder) so that the format is really cleared
+            includeListFormatHolder: defaultSegmentFormat ? 'never' : 'anySegment',
         }
     );
 
-    // If a full block or multiple blocks are selected, clear block format first
+    const marker = segmentsToClear[0];
+
+    // 2. If selection is collapsed, add selection to whole word to clear if any
     if (
-        (blocksToClear.length == 1 && isOnlySelectionMarkerSelected(blocksToClear[0][1])) ||
-        blocksToClear.length > 1 ||
-        blocksToClear.some(x => isWholeBlockSelected(x[1]))
+        blocksToClear.length == 1 &&
+        isOnlySelectionMarkerSelected(blocksToClear[0][1]) &&
+        blocksToClear.length == 1
     ) {
+        segmentsToClear.splice(0, segmentsToClear.length, ...adjustWordSelection(model, marker));
+        clearListFormat(blocksToClear[0][0]);
+    } else if (blocksToClear.length > 1 || blocksToClear.some(x => isWholeBlockSelected(x[1]))) {
+        // 2. If a full block or multiple blocks are selected, clear block format
         for (let i = blocksToClear.length - 1; i >= 0; i--) {
             const [path, block] = blocksToClear[i];
 
-            clearBlockFormat(path, block, segmentsToClear);
+            clearBlockFormat(path, block);
             clearListFormat(path);
             clearQuoteFormat(path, block);
         }
     }
 
-    // Then clear segments format and table format if any
+    // 3. Finally clear format for segments
     clearSegmentsFormat(segmentsToClear, defaultSegmentFormat);
+
+    // 4. Clear format for table if any
     createTablesFormat(tablesToClear);
 }
 
@@ -84,7 +97,10 @@ function clearSegmentsFormat(
 ) {
     segmentsToClear.forEach(x => {
         x.format = { ...(defaultSegmentFormat || {}) };
-        delete x.link;
+
+        if (x.link) {
+            delete x.link.format.textColor;
+        }
     });
 }
 
@@ -139,19 +155,14 @@ function clearListFormat(path: ContentModelBlockGroup[]) {
     }
 }
 
-function clearBlockFormat(
-    path: ContentModelBlockGroup[],
-    block: ContentModelBlock,
-    segmentsToClear: ContentModelSegment[]
-) {
+function clearBlockFormat(path: ContentModelBlockGroup[], block: ContentModelBlock) {
     if (block.blockType == 'Divider') {
         const index = path[0].blocks.indexOf(block);
 
         if (index >= 0) {
             path[0].blocks.splice(index, 1);
         }
     } else if (block.blockType == 'Paragraph') {
-        arrayPush(segmentsToClear, block.segments);
         block.format = {};
         delete block.decorator;
     }
 
@@ -25,6 +25,12 @@ export interface MergeModelOption {
      * @default false
      */
     mergeTable?: boolean;
+
+    /**
+     * Use this insert position to merge instead of querying selection from target model
+     * @default undefined
+     */
+    insertPosition?: InsertPosition;
 }
 
 /**
@@ -35,7 +41,7 @@ export function mergeModel(
     source: ContentModelDocument,
     options?: MergeModelOption
 ) {
-    const insertPosition = deleteSelection(target);
+    const insertPosition = options?.insertPosition ?? deleteSelection(target);
 
     if (insertPosition) {
         for (let i = 0; i < source.blocks.length; i++) {
@@ -140,7 +146,7 @@ function mergeTable(
             }
         }
 
-        normalizeTable(table);
+        normalizeTable(table, markerPosition.marker.format);
         applyTableFormat(table, undefined /*newFormat*/, true /*keepCellShade*/);
     } else {
         insertBlock(markerPosition, newTable);
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "roosterjs",`
`3`		`- "version": "8.42.0",`
	`3`	`+ "version": "8.43.0",`
`4`	`4`	`"description": "Framework-independent javascript editor",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`