microsoft
diff --git a/‎demo/scripts/controlsV2/demoButtons/formatTableButton.ts‎
Lines changed: 269 additions & 104 deletions b/‎demo/scripts/controlsV2/demoButtons/formatTableButton.ts‎
Lines changed: 269 additions & 104 deletions
diff --git a/‎packages/roosterjs-content-model-core/lib/corePlugin/cache/CachePlugin.ts‎
Lines changed: 7 additions & 4 deletions b/‎packages/roosterjs-content-model-core/lib/corePlugin/cache/CachePlugin.ts‎
Lines changed: 7 additions & 4 deletions
diff --git a/‎packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts‎
Lines changed: 1 addition & 1 deletion b/‎packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎packages/roosterjs-content-model-core/test/corePlugin/cache/CachePluginTest.ts‎
Lines changed: 2 additions & 2 deletions b/‎packages/roosterjs-content-model-core/test/corePlugin/cache/CachePluginTest.ts‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎packages/roosterjs-content-model-core/test/corePlugin/selection/SelectionPluginTest.ts‎
Lines changed: 76 additions & 21 deletions b/‎packages/roosterjs-content-model-core/test/corePlugin/selection/SelectionPluginTest.ts‎
Lines changed: 76 additions & 21 deletions
diff --git a/‎packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts‎
Lines changed: 8 additions & 3 deletions b/‎packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts‎
Lines changed: 8 additions & 3 deletions
@@ -115,8 +115,6 @@ class CachePlugin implements PluginWithState<CachePluginState> {
 
                 if (contentModel) {
                     updateCache(this.state, contentModel, selection);
-                } else {
-                    this.invalidateCache();
                 }
 
                 break;
@@ -165,8 +163,13 @@ class CachePlugin implements PluginWithState<CachePluginState> {
 
     private invalidateCache() {
         if (!this.editor?.isInShadowEdit()) {
-            this.state.cachedModel = undefined;
-            this.state.cachedSelection = undefined;
+            if (this.state.cachedModel) {
+                this.state.cachedModel = undefined;
+            }
+
+            if (this.state.cachedSelection) {
+                this.state.cachedSelection = undefined;
+            }
 
             // Clear paragraph indexer to prevent stale references to old paragraphs
             // It will be rebuild next time when we create a new Content Model
 
@@ -584,7 +584,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
                       doc,
                       editor.getDOMHelper(),
                       cursorRect.left,
-                      isKeyUp ? rect.top - 1 : rect.top + 1
+                      isKeyUp ? rect.top : rect.top + 1
                   )
                 : null;
         return textOffset;
 
@@ -501,14 +501,14 @@ describe('CachePlugin', () => {
             });
 
             expect(state).toEqual({
-                cachedModel: undefined,
+                cachedModel: model,
                 cachedSelection: undefined,
                 paragraphMap: mockedParagraphMap,
                 domIndexer: new DomIndexerImpl(),
                 textMutationObserver: mockedObserver,
             });
             expect(reconcileSelectionSpy).not.toHaveBeenCalled();
-            expect(resetMapSpy).toHaveBeenCalledTimes(1);
+            expect(resetMapSpy).not.toHaveBeenCalled();
         });
 
         it('No domIndexer, has model in event', () => {
 
@@ -2144,18 +2144,71 @@ describe('SelectionPlugin handle table selection', () => {
         });
 
         it('From Range, Press Up - preserves cursor horizontal position', () => {
-            // Setup: cursor is at position in td4, moving up to td2
+            // Setup: Create a 3x3 table for this test
+            // Cursor is at position in td9 (bottom-right), moving up to td6 (middle-right)
+            const testTable = document.createElement('table');
+            testTable.setAttribute('contenteditable', 'true');
+            const testTr1 = document.createElement('tr');
+            const testTr2 = document.createElement('tr');
+            const testTr3 = document.createElement('tr');
+
+            const testTd1 = document.createElement('td');
+            const testTd2 = document.createElement('td');
+            const testTd3 = document.createElement('td');
+            const testTd4 = document.createElement('td');
+            const testTd5 = document.createElement('td');
+            const testTd6 = document.createElement('td');
+            const testTd7 = document.createElement('td');
+            const testTd8 = document.createElement('td');
+            const testTd9 = document.createElement('td');
+
+            // Create text nodes for each cell
+            const testTd1_text = document.createTextNode('1');
+            const testTd2_text = document.createTextNode('2');
+            const testTd3_text = document.createTextNode('3');
+            const testTd4_text = document.createTextNode('4');
+            const testTd5_text = document.createTextNode('5');
+            const testTd6_text = document.createTextNode('6');
+            const testTd7_text = document.createTextNode('7');
+            const testTd8_text = document.createTextNode('8');
+            const testTd9_text = document.createTextNode('9');
+
+            // Add text to cells
+            testTd1.appendChild(testTd1_text);
+            testTd2.appendChild(testTd2_text);
+            testTd3.appendChild(testTd3_text);
+            testTd4.appendChild(testTd4_text);
+            testTd5.appendChild(testTd5_text);
+            testTd6.appendChild(testTd6_text);
+            testTd7.appendChild(testTd7_text);
+            testTd8.appendChild(testTd8_text);
+            testTd9.appendChild(testTd9_text);
+
+            // Build table structure
+            testTr1.appendChild(testTd1);
+            testTr1.appendChild(testTd2);
+            testTr1.appendChild(testTd3);
+            testTr2.appendChild(testTd4);
+            testTr2.appendChild(testTd5);
+            testTr2.appendChild(testTd6);
+            testTr3.appendChild(testTd7);
+            testTr3.appendChild(testTd8);
+            testTr3.appendChild(testTd9);
+            testTable.appendChild(testTr1);
+            testTable.appendChild(testTr2);
+            testTable.appendChild(testTr3);
+            contentDiv.appendChild(testTable);
 
             // Mock getDOMInsertPointRect to return a cursor rect so getNodePositionFromEvent gets called
             spyOn(getDOMInsertPointRectFile, 'getDOMInsertPointRect').and.returnValue({
-                left: 50,
-                right: 60,
-                top: 30,
-                bottom: 40,
+                left: 150,
+                right: 160,
+                top: 70,
+                bottom: 80,
             });
 
-            // Mock getNodePositionFromEvent to return a specific position
-            const targetNode = td2_text;
+            // Mock getNodePositionFromEvent to return a specific position in td6 (middle row, third column)
+            const targetNode = testTd6_text;
             const targetOffset = 1;
             spyOn(getNodePositionFromEventFile, 'getNodePositionFromEvent').and.returnValue({
                 node: targetNode,
@@ -2165,25 +2218,26 @@ describe('SelectionPlugin handle table selection', () => {
             getDOMSelectionSpy.and.returnValue({
                 type: 'range',
                 range: {
-                    startContainer: td4_text,
+                    startContainer: testTd9_text,
                     startOffset: 1,
-                    endContainer: td4_text,
+                    endContainer: testTd9_text,
                     endOffset: 1,
-                    commonAncestorContainer: tr2,
+                    commonAncestorContainer: testTr3,
                     collapsed: true,
                 },
                 isReverted: false,
             });
 
             requestAnimationFrameSpy.and.callFake((func: Function) => {
+                // After ArrowUp, browser might move to td4 (first column of middle row)
                 getDOMSelectionSpy.and.returnValue({
                     type: 'range',
                     range: {
-                        startContainer: td1,
+                        startContainer: testTd4,
                         startOffset: 0,
-                        endContainer: td1,
+                        endContainer: testTd4,
                         endOffset: 0,
-                        commonAncestorContainer: tr1,
+                        commonAncestorContainer: testTr2,
                         collapsed: true,
                     },
                     isReverted: false,
@@ -2197,24 +2251,24 @@ describe('SelectionPlugin handle table selection', () => {
             const collapseSpy = jasmine.createSpy('collapse');
             const getBoundingClientRectSpy = jasmine
                 .createSpy('getBoundingClientRect')
-                .and.returnValue({ left: 50, right: 60, top: 30, bottom: 40 });
+                .and.returnValue({ left: 150, right: 160, top: 70, bottom: 80 });
             const mockedRange = {
                 setStart: setStartSpy,
                 setEnd: setEndSpy,
                 collapse: collapseSpy,
                 getBoundingClientRect: getBoundingClientRectSpy,
-                startContainer: td4_text,
+                startContainer: testTd9_text,
                 startOffset: 1,
             } as any;
 
             createRangeSpy.and.returnValue(mockedRange);
 
-            // Mock td2's getBoundingClientRect
-            spyOn(td2, 'getBoundingClientRect').and.returnValue({
-                left: 40,
-                right: 100,
-                top: 5,
-                bottom: 25,
+            // Mock td6's getBoundingClientRect (target cell in middle row, third column)
+            spyOn(testTd6, 'getBoundingClientRect').and.returnValue({
+                left: 140,
+                right: 200,
+                top: 35,
+                bottom: 55,
             } as DOMRect);
 
             plugin.onPluginEvent!({
@@ -2227,6 +2281,7 @@ describe('SelectionPlugin handle table selection', () => {
             expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(1);
             expect(setDOMSelectionSpy).toHaveBeenCalledTimes(1);
             // Verify that setStart is called with the position returned by getNodePositionFromEvent
+            // Cursor should be placed in td6 (same column as td9) preserving horizontal position
             expect(setStartSpy).toHaveBeenCalledWith(targetNode, targetOffset);
         });
 
 
@@ -109,13 +109,17 @@ const styleBasedSegmentFormats: (keyof FormatHandlerTypeMap)[] = [
     'fontSize',
 ];
 
-const elementBasedSegmentFormats: (keyof FormatHandlerTypeMap)[] = [
+const sizeNeutralElementBasedSegmentFormats: (keyof FormatHandlerTypeMap)[] = [
     'strike',
     'underline',
-    'superOrSubScript',
     'italic',
     'bold',
 ];
+
+const elementBasedSegmentFormats: (keyof FormatHandlerTypeMap)[] = [
+    ...sizeNeutralElementBasedSegmentFormats,
+    'superOrSubScript',
+];
 const sharedBlockFormats: (keyof FormatHandlerTypeMap)[] = [
     'direction',
     'textAlign',
@@ -142,7 +146,8 @@ export const defaultFormatKeysPerCategory: {
     listItemElement: [...sharedBlockFormats, 'listItemAlign', 'margin', 'listStyle'],
     listLevel: ['direction', 'textAlign', 'margin', 'padding', 'listStyle', 'backgroundColor'],
     styleBasedSegment: [...styleBasedSegmentFormats, 'textColor', 'backgroundColor', 'lineHeight'],
-    elementBasedSegment: elementBasedSegmentFormats,
+    elementBasedSegment: sizeNeutralElementBasedSegmentFormats,
+    superOrSubScript: ['superOrSubScript'],
     segment: [
         ...styleBasedSegmentFormats,
         ...elementBasedSegmentFormats,
Original file line number	Diff line number	Diff line change
`@@ -584,7 +584,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {`
`584`	`584`	`doc,`
`585`	`585`	`editor.getDOMHelper(),`
`586`	`586`	`cursorRect.left,`
`587`		`- isKeyUp ? rect.top - 1 : rect.top + 1`
	`587`	`+ isKeyUp ? rect.top : rect.top + 1`
`588`	`588`	`)`
`589`	`589`	`: null;`
`590`	`590`	`return textOffset;`