Merge pull request #1087 from microsoft/u/juliaroldi/auto-format-apin…

…ames Auto format detection
microsoft · Jul 14, 2022 · 67eeaf0 · 67eeaf0
2 parents 482994f + 883fe2a
commit 67eeaf0
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 53 deletions.
diff --git a/packages/roosterjs-editor-api/lib/format/toggleBullet.ts b/packages/roosterjs-editor-api/lib/format/toggleBullet.ts
@@ -13,14 +13,16 @@ import type { CompatibleBulletListType } from 'roosterjs-editor-types/lib/compat
  */
 export default function toggleBullet(
     editor: IEditor,
-    listStyle?: BulletListType | CompatibleBulletListType
+    listStyle?: BulletListType | CompatibleBulletListType,
+    autoFormat?: boolean
 ) {
     toggleListType(
         editor,
         ListType.Unordered,
         undefined /* startNumber */,
         false /* includeSiblingLists */,
         undefined /** orderedStyle  */,
-        listStyle
+        listStyle,
+        autoFormat
     );
 }
diff --git a/packages/roosterjs-editor-api/lib/format/toggleNumbering.ts b/packages/roosterjs-editor-api/lib/format/toggleNumbering.ts
@@ -15,13 +15,16 @@ import type { CompatibleNumberingListType } from 'roosterjs-editor-types/lib/com
 export default function toggleNumbering(
     editor: IEditor,
     startNumber?: number,
-    listStyle?: NumberingListType | CompatibleNumberingListType
+    listStyle?: NumberingListType | CompatibleNumberingListType,
+    autoFormat?: boolean
 ) {
     toggleListType(
         editor,
         ListType.Ordered,
         startNumber,
         undefined /* includeSiblingLists */,
-        listStyle
+        listStyle,
+        undefined /* unorderedStyle */,
+        autoFormat
     );
 }
diff --git a/packages/roosterjs-editor-api/lib/utils/toggleListType.ts b/packages/roosterjs-editor-api/lib/utils/toggleListType.ts
@@ -38,7 +38,8 @@ export default function toggleListType(
     startNumber?: number,
     includeSiblingLists: boolean = true,
     orderedStyle?: NumberingListType | CompatibleNumberingListType,
-    unorderedStyle?: BulletListType | CompatibleBulletListType
+    unorderedStyle?: BulletListType | CompatibleBulletListType,
+    autoFormat?: boolean
 ) {
     blockFormat(
         editor,
@@ -65,6 +66,6 @@ export default function toggleListType(
             }
         },
         undefined /* beforeRunCallback */,
-        'toggleListType'
+        autoFormat ? 'autoToggleListType' : 'toggleListType'
     );
 }
diff --git a/packages/roosterjs-editor-plugins/lib/plugins/AutoFormat/AutoFormat.ts b/packages/roosterjs-editor-plugins/lib/plugins/AutoFormat/AutoFormat.ts
@@ -1,4 +1,5 @@
 import {
+    ChangeSource,
     EditorPlugin,
     IEditor,
     PluginEvent,
@@ -15,6 +16,8 @@ export default class AutoFormat implements EditorPlugin {
     private editor: IEditor;
     private lastKeyTyped: string;
 
+    constructor(private enableAutoHyphen: boolean = true) {}
+
     /**
      * Get a friendly name of this plugin
      */
@@ -42,57 +45,60 @@ export default class AutoFormat implements EditorPlugin {
      * @param event PluginEvent object
      */
     onPluginEvent(event: PluginEvent) {
-        if (
-            event.eventType === PluginEventType.ContentChanged ||
-            event.eventType === PluginEventType.MouseDown ||
-            event.eventType === PluginEventType.MouseUp
-        ) {
-            this.lastKeyTyped = '';
-        }
-
-        if (event.eventType === PluginEventType.KeyDown) {
-            const keyTyped = event.rawEvent.key;
-
-            if (keyTyped.length > 1) {
+        if (this.enableAutoHyphen) {
+            if (
+                event.eventType === PluginEventType.ContentChanged ||
+                event.eventType === PluginEventType.MouseDown ||
+                event.eventType === PluginEventType.MouseUp
+            ) {
                 this.lastKeyTyped = '';
             }
 
-            if (
-                this.lastKeyTyped === '-' &&
-                !specialCharacters.test(keyTyped) &&
-                keyTyped !== ' ' &&
-                keyTyped !== '-'
-            ) {
-                const searcher = this.editor.getContentSearcherOfCursor(event);
-                const textBeforeCursor = searcher.getSubStringBefore(3);
-                const dashes = searcher.getSubStringBefore(2);
-                const isPrecededByADash = textBeforeCursor[0] === '-';
-                const isPrecededByASpace = textBeforeCursor[0] === ' ';
+            if (event.eventType === PluginEventType.KeyDown) {
+                const keyTyped = event.rawEvent.key;
+
+                if (keyTyped.length > 1) {
+                    this.lastKeyTyped = '';
+                }
+
                 if (
-                    isPrecededByADash ||
-                    isPrecededByASpace ||
-                    specialCharacters.test(textBeforeCursor[0]) ||
-                    dashes !== '--'
+                    this.lastKeyTyped === '-' &&
+                    !specialCharacters.test(keyTyped) &&
+                    keyTyped !== ' ' &&
+                    keyTyped !== '-'
                 ) {
-                    return;
-                }
+                    const searcher = this.editor.getContentSearcherOfCursor(event);
+                    const textBeforeCursor = searcher.getSubStringBefore(3);
+                    const dashes = searcher.getSubStringBefore(2);
+                    const isPrecededByADash = textBeforeCursor[0] === '-';
+                    const isPrecededByASpace = textBeforeCursor[0] === ' ';
+                    if (
+                        isPrecededByADash ||
+                        isPrecededByASpace ||
+                        specialCharacters.test(textBeforeCursor[0]) ||
+                        dashes !== '--'
+                    ) {
+                        return;
+                    }
 
-                const textRange = searcher.getRangeFromText(dashes, true /* exactMatch */);
-                const nodeHyphen = document.createTextNode('—');
-                this.editor.addUndoSnapshot(
-                    () => {
-                        textRange.deleteContents();
-                        textRange.insertNode(nodeHyphen);
-                        this.editor.select(nodeHyphen, PositionType.End);
-                    },
-                    null /*changeSource*/,
-                    true /*canUndoByBackspace*/
-                );
+                    const textRange = searcher.getRangeFromText(dashes, true /* exactMatch */);
+                    const nodeHyphen = document.createTextNode('—');
+                    this.editor.addUndoSnapshot(
+                        () => {
+                            textRange.deleteContents();
+                            textRange.insertNode(nodeHyphen);
+                            this.editor.select(nodeHyphen, PositionType.End);
+                        },
+                        ChangeSource.Format /*changeSource*/,
+                        true /*canUndoByBackspace*/,
+                        { formatApiName: 'autoHyphen' }
+                    );
 
-                //After the substitution the last key typed needs to be cleaned
-                this.lastKeyTyped = '';
-            } else {
-                this.lastKeyTyped = keyTyped;
+                    //After the substitution the last key typed needs to be cleaned
+                    this.lastKeyTyped = '';
+                } else {
+                    this.lastKeyTyped = keyTyped;
+                }
             }
         }
     }

diff --git a/packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/listFeatures.ts b/packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/listFeatures.ts
@@ -231,7 +231,7 @@ const AutoBulletList: BuildInEditFeature<PluginKeyboardEvent> = {
 
                 if (textRange) {
                     prepareAutoBullet(editor, textRange);
-                    toggleBullet(editor, listStyle);
+                    toggleBullet(editor, listStyle, true /** autoFormat */);
                 }
                 searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)?.deleteContents();
             },
@@ -271,10 +271,15 @@ const AutoNumberingList: BuildInEditFeature<PluginKeyboardEvent> = {
                 } else if ((regions = editor.getSelectedRegions()) && regions.length == 1) {
                     const num = parseInt(textBeforeCursor);
                     prepareAutoBullet(editor, textRange);
-                    toggleNumbering(editor, num, listStyle);
+                    toggleNumbering(editor, num, listStyle, true /** autoFormat */);
                 } else {
                     prepareAutoBullet(editor, textRange);
-                    toggleNumbering(editor, undefined /* startNumber*/, listStyle);
+                    toggleNumbering(
+                        editor,
+                        undefined /* startNumber*/,
+                        listStyle,
+                        true /** autoFormat */
+                    );
                 }
                 searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)?.deleteContents();
             },