Selection strategy for list commands

[jbailleul]

Hi!

I would like list commands (unordered list, ordered list and checked list commands) to be applied to the whole line instead of word. For now, I've achieved that by defining custom commands and overriding the makeList() function:

import { checkedListCommand, orderedListCommand, unorderedListCommand} from '@uiw/react-md-editor';

const makeList = (state: ExecuteState, api: TextAreaTextApi, insertBefore: string | AlterLineFunction): void => {
    // const newSelectionRange = selectWord({ text: state.text, selection: state.selection, prefix: state.command.prefix! });
    const newSelectionRange = selectLine({
        text: state.text,
        selection: state.selection
    });
    
    // ... 
    // copy/paste all the remaining code from source
    // ...
};

export const customUnorderedListCommand: ICommand = {
    ...unorderedListCommand,
    execute: (state: ExecuteState, api: TextAreaTextApi) => {
        makeList(state, api, '- ');
    }
};

export const customOrderedListCommand: ICommand = {
    ...orderedListCommand,
    execute: (state: ExecuteState, api: TextAreaTextApi) => {
        makeList(state, api, (item, index) => `${index + 1}. `);
    }
};

export const customCheckedListCommand: ICommand = {
    ...checkedListCommand,
    execute: (state: ExecuteState, api: TextAreaTextApi) => {
        makeList(state, api, () => `- [ ] `);
    }
};

Would it be possible to have something like a selectionStrategy option on the commands, that could be set to word or line for example? Then the makeList() function would use selectWord() or selectLine() accordingly?

Thanks for you great work!

[jaywcjlove]

@jbailleul I haven't found a good way to define it yet

[jbailleul]

@jaywcjlove If adding such an option to the commands is what's bothering you (maybe for genericity/re-usability purpose between commands), what about adding an optional parameter to the makeList() function? I see it is only used by those three commands so could this kind of signature be ok?

const makeList = (
    state: ExecuteState,
    api: TextAreaTextApi,
    insertBefore: string | AlterLineFunction,
    selectionStrategy: 'word' | 'line' = 'word'
): void => {
    // Use `selectWord()` or `selectLine()` based on the `selectionStrategy` param
    ...
}

With this, I would only have to override the commands from my side, and not the makeList() function:

export const customUnorderedListCommand: ICommand = {
    ...unorderedListCommand,
    execute: (state: ExecuteState, api: TextAreaTextApi) => {
        makeList(state, api, '- ', 'line');
    }
};

export const customOrderedListCommand: ICommand = {
    ...orderedListCommand,
    execute: (state: ExecuteState, api: TextAreaTextApi) => {
        makeList(state, api, (item, index) => `${index + 1}. `, 'line');
    }
};

export const customCheckedListCommand: ICommand = {
    ...checkedListCommand,
    execute: (state: ExecuteState, api: TextAreaTextApi) => {
        makeList(state, api, () => `- [ ] `, 'line');
    }
};

[jaywcjlove]

@jbailleul makeList() method can be provided, welcome to submit PR