Announce Plugin, add features to current plugin

demo/scripts/controls/getToggleablePlugins.ts

@@ -68,7 +68,11 @@ export default function getToggleablePlugins(initState: BuildInPluginState) {
 
 function getDefaultStringsMap(): Map<KnownAnnounceStrings, string> {
     return new Map<KnownAnnounceStrings, string>([
-        [KnownAnnounceStrings.AnnounceListItemBulletIndentation, 'Autocorrected Bullet'],
-        [KnownAnnounceStrings.AnnounceListItemNumberingIndentation, 'Autocorrected {0}'],
+        [KnownAnnounceStrings.AnnounceListItemBullet, 'Autocorrected Bullet'],
+        [KnownAnnounceStrings.AnnounceListItemNumbering, 'Autocorrected {0}'],
+        [
+            KnownAnnounceStrings.AnnounceOnFocusLastCell,
+            'Warning, pressing tab here adds an extra row.',
+        ],
     ]);
 }

packages/roosterjs-editor-dom/lib/announceData/getAnnounceDataForList.ts

@@ -0,0 +1,47 @@
+import convertDecimalsToAlpha from '../list/convertDecimalsToAlpha';
+import convertDecimalsToRoman from '../list/convertDecimalsToRomans';
+import safeInstanceOf from '../utils/safeInstanceOf';
+import VList from '../list/VList';
+import { KnownAnnounceStrings } from 'roosterjs-editor-types';
+import type { AnnounceData } from 'roosterjs-editor-types';
+
+/**
+ * Get the announce data for the current List
+ * @returns announce data for list or undefined.
+ */
+export default function getAnnounceDataForList(
+    list: HTMLElement | null,
+    li: HTMLElement | null
+): AnnounceData | undefined {
+    if (!safeInstanceOf(li, 'HTMLLIElement')) {
+        return undefined;
+    }
+
+    if (li && safeInstanceOf(list, 'HTMLOListElement')) {
+        const vList = new VList(list);
+        const listItemIndex = vList.getListItemIndex(li);
+        let stringToAnnounce = listItemIndex == -1 ? '' : listItemIndex.toString();
+        switch (list.style.listStyleType) {
+            case 'lower-alpha':
+            case 'lower-latin':
+            case 'upper-alpha':
+            case 'upper-latin':
+                stringToAnnounce = convertDecimalsToAlpha(listItemIndex - 1);
+                break;
+            case 'lower-roman':
+            case 'upper-roman':
+                stringToAnnounce = convertDecimalsToRoman(listItemIndex);
+                break;
+        }
+
+        return {
+            defaultStrings: KnownAnnounceStrings.AnnounceListItemNumbering,
+            formatStrings: [stringToAnnounce],
+        };
+    } else if (safeInstanceOf(list, 'HTMLUListElement')) {
+        return {
+            defaultStrings: KnownAnnounceStrings.AnnounceListItemBullet,
+        };
+    }
+    return undefined;
+}

packages/roosterjs-editor-dom/lib/index.ts

@@ -1,3 +1,5 @@
+export { default as getAnnounceDataForList } from './announceData/getAnnounceDataForList';
+
 export { default as getBlockElementAtNode } from './blockElements/getBlockElementAtNode';
 export { default as getFirstLastBlockElement } from './blockElements/getFirstLastBlockElement';
 
@@ -71,8 +73,6 @@ export { default as VList } from './list/VList';
 export { default as VListItem } from './list/VListItem';
 export { default as createVListFromRegion } from './list/createVListFromRegion';
 export { default as VListChain } from './list/VListChain';
-export { default as convertDecimalsToAlpha } from './list/convertDecimalsToAlpha';
-export { default as convertDecimalsToRoman } from './list/convertDecimalsToRomans';
 export { default as setListItemStyle } from './list/setListItemStyle';
 export { getTableFormatInfo } from './table/tableFormatInfo';
 export { saveTableCellMetadata } from './table/tableCellInfo';

packages/roosterjs-editor-dom/test/announceData/getAnnounceDataForListTest.ts

@@ -0,0 +1,55 @@
+import getAnnounceDataForList from '../../lib/announceData/getAnnounceDataForList';
+import { createElement } from 'roosterjs-editor-dom';
+import { KnownAnnounceStrings } from 'roosterjs-editor-types';
+
+describe('getAnnounceDataForList', () => {
+    it('should return announce data for numbered list item | OL', () => {
+        const el = createElement(
+            {
+                tag: 'OL',
+                children: [
+                    {
+                        tag: 'LI',
+                        children: ['asd'],
+                    },
+                ],
+            },
+            document
+        ) as any;
+
+        el && document.body.appendChild(el);
+
+        const announceData = getAnnounceDataForList(el, el?.firstChild);
+        expect(announceData).toEqual({
+            defaultStrings: KnownAnnounceStrings.AnnounceListItemNumbering,
+            formatStrings: ['1'],
+        });
+    });
+
+    it('should return announce data for numbered list item | UL', () => {
+        const el = createElement(
+            {
+                tag: 'UL',
+                children: [
+                    {
+                        tag: 'LI',
+                        children: ['asd'],
+                    },
+                ],
+            },
+            document
+        ) as any;
+
+        el && document.body.appendChild(el);
+
+        const announceData = getAnnounceDataForList(el, el?.firstChild);
+        expect(announceData).toEqual({
+            defaultStrings: KnownAnnounceStrings.AnnounceListItemBullet,
+        });
+    });
+
+    it('should return announce data for bullet list item | undefined', () => {
+        const announceData = getAnnounceDataForList(null, null);
+        expect(announceData).toEqual(undefined);
+    });
+});

packages/roosterjs-editor-plugins/lib/plugins/Announce/AnnounceFeature.ts

@@ -0,0 +1,17 @@
+import type { IEditor, AnnounceData } from 'roosterjs-editor-types';
+
+/**
+ * Represents a Announce feature used in Announce Plugin.
+ * If the Should Handle Callback returns announce data, it will be announced by using a aria-live region.
+ */
+export interface AnnounceFeature {
+    /**
+     * Whether to handle this feature, if returns Announce Data, will be announced, otherwise will do nothing.
+     * @returns
+     */
+    shouldHandle: (editor: IEditor, lastFocusedElement: HTMLElement | null) => AnnounceData | false;
+    /**
+     * Keys handled in the current event
+     */
+    keys: number[];
+}

packages/roosterjs-editor-plugins/lib/plugins/Announce/AnnouncePlugin.ts

@@ -1,11 +1,15 @@
-import { createElement } from 'roosterjs-editor-dom';
+import { AnnounceFeatures } from './features/AnnounceFeatures';
+import { createElement, getObjectKeys } from 'roosterjs-editor-dom';
 import { PluginEventType } from 'roosterjs-editor-types';
+import type { AnnounceFeatureKey } from './features/AnnounceFeatures';
+import type { AnnounceFeature } from './AnnounceFeature';
 import type { CompatibleKnownAnnounceStrings } from 'roosterjs-editor-types/lib/compatibleTypes';
 import type {
     EditorPlugin,
     IEditor,
     PluginEvent,
     AnnounceData,
+    PluginKeyDownEvent,
     KnownAnnounceStrings,
 } from 'roosterjs-editor-types';
 
@@ -36,13 +40,28 @@ const createAriaLiveElement = (document: Document): HTMLDivElement => {
 export default class Announce implements EditorPlugin {
     private ariaLiveElement: HTMLDivElement | undefined;
     private editor: IEditor | undefined;
+    private features: AnnounceFeature[];
+    private lastFocusedElement: HTMLElement | null = null;
 
     constructor(
         private stringsMapOrGetter?:
-            | Map<CompatibleKnownAnnounceStrings | KnownAnnounceStrings, string>
-            | ((key: CompatibleKnownAnnounceStrings | KnownAnnounceStrings) => string)
-            | undefined
-    ) {}
+            | Map<KnownAnnounceStrings | CompatibleKnownAnnounceStrings, string>
+            | ((key: KnownAnnounceStrings | CompatibleKnownAnnounceStrings) => string)
+            | undefined,
+        skipAnnounceFeatures: AnnounceFeatureKey[] = [],
+        additionalFeatures?: AnnounceFeature[]
+    ) {
+        this.features = getObjectKeys(AnnounceFeatures)
+            .map(key => {
+                if (skipAnnounceFeatures.indexOf(key) == -1) {
+                    return AnnounceFeatures[key];
+                }
+
+                return undefined;
+            })
+            .filter(feature => !!feature)
+            .concat(additionalFeatures || []) as AnnounceFeature[];
+    }
 
     /**
      * Get a friendly name of this plugin
@@ -65,23 +84,49 @@ export default class Announce implements EditorPlugin {
     dispose() {
         this.ariaLiveElement?.parentElement?.removeChild(this.ariaLiveElement);
         this.ariaLiveElement = undefined;
+        this.stringsMapOrGetter = undefined;
+        this.lastFocusedElement = null;
+        while (this.features.length > 0) {
+            this.features.pop();
+        }
+        this.editor = undefined;
     }
 
     /**
      * Handle events triggered from editor
      * @param event PluginEvent object
      */
-    onPluginEvent(event: PluginEvent) {
+    onPluginEvent(ev: PluginEvent) {
         if (
             this.editor &&
-            event.eventType == PluginEventType.ContentChanged &&
-            event.additionalData?.getAnnounceData
+            ev.eventType == PluginEventType.ContentChanged &&
+            ev.additionalData?.getAnnounceData
         ) {
-            const data = event.additionalData.getAnnounceData();
+            const data = ev.additionalData.getAnnounceData();
             if (data) {
                 this.announce(data, this.editor);
             }
         }
+
+        if (ev.eventType == PluginEventType.KeyDown && this.editor) {
+            this.handleFeatures(ev, this.editor);
+        }
+    }
+
+    private handleFeatures(event: PluginKeyDownEvent, editor: IEditor) {
+        editor.runAsync(() => {
+            this.features
+                .filter(feature => feature.keys.indexOf(event.rawEvent.which) > -1)
+                .some(feature => {
+                    const announceData = feature.shouldHandle(editor, this.lastFocusedElement);
+                    if (announceData) {
+                        this.announce(announceData, editor);
+                    }
+                    return !!announceData;
+                });
+
+            this.lastFocusedElement = editor.getElementAtCursor();
+        });
     }
 
     protected announce(announceData: AnnounceData, editor: IEditor) {

packages/roosterjs-editor-plugins/lib/plugins/Announce/features/AnnounceFeatures.ts

@@ -0,0 +1,15 @@
+import announceNewListItemNumber from './announceNewListItem';
+import announceWarningOnLastCell from './announceWarningOnLastTableCell';
+import type { AnnounceFeature } from '../AnnounceFeature';
+
+/**
+ * Announce feature keys
+ */
+export type AnnounceFeatureKey = 'announceNewListItem' | 'announceWarningOnLastTableCell';
+/**
+ * @internal
+ */
+export const AnnounceFeatures: Record<AnnounceFeatureKey, AnnounceFeature> = {
+    announceNewListItem: announceNewListItemNumber,
+    announceWarningOnLastTableCell: announceWarningOnLastCell,
+};

packages/roosterjs-editor-plugins/lib/plugins/Announce/features/announceNewListItem.ts

@@ -0,0 +1,17 @@
+import { getAnnounceDataForList } from 'roosterjs-editor-dom';
+import { Keys } from 'roosterjs-editor-types';
+import type { AnnounceFeature } from '../AnnounceFeature';
+
+const LIST_SELECTOR = 'OL,UL';
+const LIST_ITEM_SELECTOR = 'LI';
+
+const announceNewListItemNumber: AnnounceFeature = {
+    keys: [Keys.ENTER],
+    shouldHandle: editor => {
+        const li = editor.getElementAtCursor(LIST_ITEM_SELECTOR);
+        const list = editor.getElementAtCursor(LIST_SELECTOR);
+        return (!!(list && li) && getAnnounceDataForList(list, li)) || false;
+    },
+};
+
+export default announceNewListItemNumber;

packages/roosterjs-editor-plugins/lib/plugins/Announce/features/announceWarningOnLastTableCell.ts

@@ -0,0 +1,40 @@
+import { contains, safeInstanceOf } from 'roosterjs-editor-dom';
+import { Keys, KnownAnnounceStrings, SelectionRangeTypes } from 'roosterjs-editor-types';
+import type { AnnounceFeature } from '../AnnounceFeature';
+
+const TABLE_CELL_SELECTOR = 'td,th';
+const TABLE_SELECTOR = 'table';
+
+const announceWarningOnLastCell: AnnounceFeature = {
+    shouldHandle: (editor, lastFocusedElement) => {
+        const selection = editor.getSelectionRangeEx();
+
+        return (
+            selection?.type == SelectionRangeTypes.Normal &&
+            selection.areAllCollapsed &&
+            selection.ranges.length === 1 &&
+            !contains(
+                lastFocusedElement,
+                selection.ranges[0].startContainer,
+                true /*treatSameNodeAsContain*/
+            ) &&
+            isLastCell() && {
+                defaultStrings: KnownAnnounceStrings.AnnounceOnFocusLastCell,
+            }
+        );
+        function isLastCell(): boolean {
+            const table = editor.getElementAtCursor(TABLE_SELECTOR);
+
+            if (safeInstanceOf(table, 'HTMLTableElement')) {
+                const allCells = table.querySelectorAll(TABLE_CELL_SELECTOR);
+                const focusedCell = editor.getElementAtCursor(TABLE_CELL_SELECTOR);
+
+                return focusedCell == allCells.item(allCells.length - 1);
+            }
+            return false;
+        }
+    },
+    keys: [Keys.TAB, Keys.UP, Keys.DOWN, Keys.LEFT, Keys.RIGHT],
+};
+
+export default announceWarningOnLastCell;

packages/roosterjs-editor-plugins/lib/plugins/Announce/index.ts

@@ -1 +1,3 @@
 export { default as AnnouncePlugin } from './AnnouncePlugin';
+export { AnnounceFeatureKey } from './features/AnnounceFeatures';
+export { AnnounceFeature } from './AnnounceFeature';