Merge pull request #2827 from microsoft/u/juliaroldi/auto-format-b

Auto format list on TAB
microsoft · Oct 14, 2024 · ce3e1c6 · ce3e1c6
2 parents 84bad41 + 8ea655f
commit ce3e1c6
Show file tree

Hide file tree

Showing 2 changed files with 185 additions and 0 deletions.
diff --git a/packages/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts b/packages/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts
@@ -208,6 +208,31 @@ export class AutoFormatPlugin implements EditorPlugin {
                         unlink(editor, rawEvent);
                     }
                     break;
+                case 'Tab':
+                    formatTextSegmentBeforeSelectionMarker(
+                        editor,
+                        (model, _previousSegment, paragraph, _markerFormat, context) => {
+                            const { autoBullet, autoNumbering } = this.options;
+                            let shouldList = false;
+                            if (autoBullet || autoNumbering) {
+                                shouldList = keyboardListTrigger(
+                                    model,
+                                    paragraph,
+                                    context,
+                                    autoBullet,
+                                    autoNumbering
+                                );
+                                context.canUndoByBackspace = shouldList;
+                                event.rawEvent.preventDefault();
+                            }
+
+                            return shouldList;
+                        },
+                        {
+                            changeSource: ChangeSource.AutoFormat,
+                            apiName: 'autoToggleList',
+                        }
+                    );
             }
         }
     }

diff --git a/packages/roosterjs-content-model-plugins/test/autoFormat/AutoFormatPluginTest.ts b/packages/roosterjs-content-model-plugins/test/autoFormat/AutoFormatPluginTest.ts
@@ -167,6 +167,166 @@ describe('Content Model Auto Format Plugin Test', () => {
         });
     });
 
+    describe('onPluginEvent - [TAB] - keyboardListTrigger', () => {
+        function runTest(
+            event: KeyDownEvent,
+            testBullet: boolean,
+            expectResult: boolean,
+            options?: AutoFormatOptions
+        ) {
+            const plugin = new AutoFormatPlugin(options);
+            plugin.initialize(editor);
+
+            plugin.onPluginEvent(event);
+
+            const formatOptions = {
+                apiName: '',
+            };
+
+            const inputModel = (bullet: boolean): ContentModelDocument => ({
+                blockGroupType: 'Document',
+                blocks: [
+                    {
+                        blockType: 'Paragraph',
+                        segments: [
+                            {
+                                segmentType: 'Text',
+                                text: bullet ? '*' : '1)',
+                                format: {},
+                            },
+                            {
+                                segmentType: 'SelectionMarker',
+                                isSelected: true,
+                                format: {},
+                            },
+                        ],
+                        format: {},
+                    },
+                ],
+                format: {},
+            });
+
+            formatTextSegmentBeforeSelectionMarkerSpy.and.callFake((editor, callback, options) => {
+                expect(callback).toBe(
+                    editor,
+                    (
+                        _model: ContentModelDocument,
+                        _previousSegment: ContentModelText,
+                        paragraph: ContentModelParagraph,
+                        context: FormatContentModelContext
+                    ) => {
+                        const result = keyboardListTrigger(
+                            inputModel(testBullet),
+                            paragraph,
+                            context,
+                            options!.autoBullet,
+                            options!.autoNumbering
+                        );
+                        expect(result).toBe(expectResult);
+                        const preventDefaultSpy = spyOn(event.rawEvent, 'preventDefault');
+                        if (result) {
+                            expect(context.canUndoByBackspace).toBe(true);
+                            expect(preventDefaultSpy).toHaveBeenCalled();
+                        } else {
+                            expect(context.canUndoByBackspace).toBe(false);
+                            expect(preventDefaultSpy).not.toHaveBeenCalled();
+                        }
+                        formatOptions.apiName = result ? 'autoToggleList' : '';
+                        return result;
+                    }
+                );
+                expect(options).toEqual({
+                    changeSource: 'AutoFormat',
+                    apiName: formatOptions.apiName,
+                });
+            });
+        }
+
+        it('[TAB] should trigger keyboardListTrigger bullet ', () => {
+            const event: KeyDownEvent = {
+                eventType: 'keyDown',
+                rawEvent: {
+                    key: 'Tab',
+                    defaultPrevented: false,
+                    handledByEditFeature: false,
+                } as any,
+            };
+            runTest(event, true, true, { autoBullet: true, autoNumbering: false });
+        });
+
+        it('[TAB] should trigger keyboardListTrigger numbering ', () => {
+            const event: KeyDownEvent = {
+                eventType: 'keyDown',
+                rawEvent: {
+                    key: 'Tab',
+                    defaultPrevented: false,
+                    handledByEditFeature: false,
+                } as any,
+            };
+            runTest(event, false, true, { autoBullet: true, autoNumbering: true });
+        });
+
+        it('[TAB] should not trigger keyboardListTrigger numbering ', () => {
+            const event: KeyDownEvent = {
+                eventType: 'keyDown',
+                rawEvent: {
+                    key: 'Tab',
+                    defaultPrevented: false,
+                    handledByEditFeature: false,
+                } as any,
+            };
+            runTest(event, false, false, { autoBullet: true, autoNumbering: false });
+        });
+
+        it('[TAB] should not trigger keyboardListTrigger bullet ', () => {
+            const event: KeyDownEvent = {
+                eventType: 'keyDown',
+                rawEvent: {
+                    key: 'Tab',
+                    defaultPrevented: false,
+                    handledByEditFeature: false,
+                } as any,
+            };
+            runTest(event, true, false, { autoBullet: false, autoNumbering: false });
+        });
+
+        it('[TAB] should not trigger keyboardListTrigger - not tab ', () => {
+            const event: KeyDownEvent = {
+                eventType: 'keyDown',
+                rawEvent: {
+                    key: 'Ctrl',
+                    defaultPrevented: false,
+                    handledByEditFeature: false,
+                } as any,
+            };
+            runTest(event, true, false, { autoBullet: true, autoNumbering: true });
+        });
+
+        it('[TAB] should not trigger keyboardListTrigger - default prevented ', () => {
+            const event: KeyDownEvent = {
+                eventType: 'keyDown',
+                rawEvent: {
+                    key: 'Tab',
+                    defaultPrevented: true,
+                    handledByEditFeature: false,
+                } as any,
+            };
+            runTest(event, true, false, { autoBullet: true, autoNumbering: true });
+        });
+
+        it('[TAB] should not trigger keyboardListTrigger - handledByEditFeature', () => {
+            const event: KeyDownEvent = {
+                eventType: 'keyDown',
+                rawEvent: {
+                    key: 'Tab',
+                    defaultPrevented: false,
+                    handledByEditFeature: true,
+                } as any,
+            };
+            runTest(event, true, false, { autoBullet: true, autoNumbering: true });
+        });
+    });
+
     describe('onPluginEvent - createLink', () => {
         let createLinkSpy: jasmine.Spy;