Merge pull request #2514 from microsoft/u/juliaroldi/fix-shift-tab

Do not prevent Shift+ Tab behavior
microsoft · Mar 20, 2024 · 79dc022 · 79dc022
2 parents 65ea84c + 5fb56cf
commit 79dc022
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnParagraph.ts b/packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnParagraph.ts
@@ -30,6 +30,15 @@ export function handleTabOnParagraph(
         selectedSegments.length === 1 && selectedSegments[0].segmentType === 'SelectionMarker';
     const isAllSelected = paragraph.segments.every(segment => segment.isSelected);
     if ((paragraph.segments[0].segmentType === 'SelectionMarker' && isCollapsed) || isAllSelected) {
+        const { marginLeft, marginRight, direction } = paragraph.format;
+        const isRtl = direction === 'rtl';
+        if (
+            rawEvent.shiftKey &&
+            ((!isRtl && (!marginLeft || marginLeft == '0px')) ||
+                (isRtl && (!marginRight || marginRight == '0px')))
+        ) {
+            return false;
+        }
         setModelIndentation(model, rawEvent.shiftKey ? 'outdent' : 'indent');
     } else {
         if (!isCollapsed) {
@@ -84,7 +93,6 @@ export function handleTabOnParagraph(
             }
         }
     }
-
     rawEvent.preventDefault();
     return true;
 }
diff --git a/packages/roosterjs-content-model-plugins/test/edit/tabUtils/handleTabOnParagraphTest.ts b/packages/roosterjs-content-model-plugins/test/edit/tabUtils/handleTabOnParagraphTest.ts
@@ -131,7 +131,7 @@ describe('handleTabOnParagraph', () => {
         runTest(model, paragraph, rawEvent, selection, true);
     });
 
-    it('Outdent - collapsed range should return true when cursor is at the start', () => {
+    it('Outdent - collapsed range should return false when cursor is at the start', () => {
         const model: ContentModelDocument = {
             blockGroupType: 'Document',
             blocks: [
@@ -165,6 +165,45 @@ describe('handleTabOnParagraph', () => {
                 collapsed: true,
             },
         } as RangeSelection;
+        runTest(model, paragraph, rawEvent, selection, false);
+    });
+
+    it('Outdent - collapsed range should return true when cursor is at the start and exist indentation', () => {
+        const model: ContentModelDocument = {
+            blockGroupType: 'Document',
+            blocks: [
+                {
+                    blockType: 'Paragraph',
+                    segments: [
+                        {
+                            segmentType: 'SelectionMarker',
+                            isSelected: true,
+                            format: {},
+                        },
+                        {
+                            segmentType: 'Text',
+                            text: 'test',
+                            format: {},
+                        },
+                    ],
+                    format: {
+                        marginLeft: '4px',
+                    },
+                },
+            ],
+            format: {},
+        };
+        const paragraph = model.blocks[0] as ContentModelParagraph;
+        const rawEvent = new KeyboardEvent('keydown', {
+            key: 'Tab',
+            shiftKey: true,
+        });
+        const selection = {
+            type: 'range',
+            range: {
+                collapsed: true,
+            },
+        } as RangeSelection;
         runTest(model, paragraph, rawEvent, selection, true);
     });