feat: add aliases to heading toolbar (#814)

Author: shevnv

src/bundle/config/w-heading-config.tsx

@@ -26,6 +26,7 @@ export const wHeading1ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH1.run(),
     isActive: (e) => e.actions.toH1.isActive(),
     isEnable: (e) => e.actions.toH1.isEnable(),
+    aliases: ['h1'],
     preview: <HeadingPreview level={1} />,
 };
 export const wHeading2ItemData: WToolbarListButtonItemData = {
@@ -36,6 +37,7 @@ export const wHeading2ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH2.run(),
     isActive: (e) => e.actions.toH2.isActive(),
     isEnable: (e) => e.actions.toH2.isEnable(),
+    aliases: ['h2'],
     preview: <HeadingPreview level={2} />,
 };
 export const wHeading3ItemData: WToolbarListButtonItemData = {
@@ -46,6 +48,7 @@ export const wHeading3ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH3.run(),
     isActive: (e) => e.actions.toH3.isActive(),
     isEnable: (e) => e.actions.toH3.isEnable(),
+    aliases: ['h3'],
     preview: <HeadingPreview level={3} />,
 };
 export const wHeading4ItemData: WToolbarListButtonItemData = {
@@ -56,6 +59,7 @@ export const wHeading4ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH4.run(),
     isActive: (e) => e.actions.toH4.isActive(),
     isEnable: (e) => e.actions.toH4.isEnable(),
+    aliases: ['h4'],
     preview: <HeadingPreview level={4} />,
 };
 export const wHeading5ItemData: WToolbarListButtonItemData = {
@@ -66,6 +70,7 @@ export const wHeading5ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH5.run(),
     isActive: (e) => e.actions.toH5.isActive(),
     isEnable: (e) => e.actions.toH5.isEnable(),
+    aliases: ['h5'],
     preview: <HeadingPreview level={5} />,
 };
 export const wHeading6ItemData: WToolbarListButtonItemData = {
@@ -76,6 +81,7 @@ export const wHeading6ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH6.run(),
     isActive: (e) => e.actions.toH6.isActive(),
     isEnable: (e) => e.actions.toH6.isEnable(),
+    aliases: ['h6'],
     preview: <HeadingPreview level={6} />,
 };
 

src/extensions/behavior/CommandMenu/aliases.test.ts

@@ -0,0 +1,39 @@
+import {
+    wHeading1ItemData,
+    wHeading2ItemData,
+    wHeading3ItemData,
+    wHeading4ItemData,
+    wHeading5ItemData,
+    wHeading6ItemData,
+} from '../../../bundle/config/w-heading-config';
+
+import {filterActions} from './handler';
+
+describe('Heading aliases', () => {
+    it('should have correct aliases', () => {
+        expect(wHeading1ItemData.aliases).toContain('h1');
+        expect(wHeading2ItemData.aliases).toContain('h2');
+        expect(wHeading3ItemData.aliases).toContain('h3');
+        expect(wHeading4ItemData.aliases).toContain('h4');
+        expect(wHeading5ItemData.aliases).toContain('h5');
+        expect(wHeading6ItemData.aliases).toContain('h6');
+    });
+
+    it('should filter commands by aliases', () => {
+        const commands = [
+            wHeading1ItemData,
+            wHeading2ItemData,
+            wHeading3ItemData,
+            wHeading4ItemData,
+            wHeading5ItemData,
+            wHeading6ItemData,
+        ];
+
+        for (let i = 1; i <= 6; i++) {
+            expect(filterActions(commands, `h${i}`)).toHaveLength(1);
+            expect(filterActions(commands, `h${i}`)[0]).toBe(commands[i - 1]);
+        }
+
+        expect(filterActions(commands, 'h')).toHaveLength(6); // Should match all h1-h6
+    });
+});

src/extensions/behavior/CommandMenu/handler.ts

@@ -252,12 +252,18 @@ export class CommandHandler implements AutocompleteHandler {
     }
 }
 
-function filterActions(actions: readonly CommandAction[], text: string): CommandAction[] {
-    return actions.filter(
-        (action) =>
-            action.id.toLowerCase().includes(text) ||
-            (isFunction(action.title) ? action.title() : action.title).toLowerCase().includes(text),
-    );
+export function filterActions(actions: readonly CommandAction[], text: string): CommandAction[] {
+    return actions.filter((action) => {
+        const lowerText = text.toLowerCase();
+        const matchesId = action.id.toLowerCase().includes(lowerText);
+        const matchesTitle = (isFunction(action.title) ? action.title() : action.title)
+            .toLowerCase()
+            .includes(lowerText);
+        const matchesAliases =
+            action.aliases?.some((alias) => alias.toLowerCase().includes(lowerText)) ?? false;
+
+        return matchesId || matchesTitle || matchesAliases;
+    });
 }
 
 const CHARS_TO_HIDE = 4;

src/toolbar/types.ts

@@ -20,6 +20,10 @@ export type ToolbarItemData<E> = QAProps & {
     hint?: string | (() => string);
     hotkey?: HotkeyProps['value'];
     preview?: React.ReactNode;
+    /**
+     * Alternative IDs that can be used to find this command
+     */
+    aliases?: string[];
     /**
      * Show hint when _isEnable()_ returns false
      *