Squire icon indicating copy to clipboard operation
Squire copied to clipboard

Start unordered list via `* ....`

Open guettli opened this issue 3 years ago • 1 comments

It would be nice if I could start an unordered list without using the menu.

Many applications support it, that you just need to type * and now your text is the first entry of an unordered list.

I tried it in fastmail, but up to now this does not work.

guettli avatar Apr 22 '21 20:04 guettli

What if you don't want to, can i disable your feature?

the-djmaze avatar Aug 13 '21 22:08 the-djmaze

What you are discribing is markdown behavior. Many editors adopt a markdown parser into their editing modes.

Puddingboy avatar Feb 22 '23 13:02 Puddingboy

I was able to workaround and make it work this way to handle ordered and unordered lists

const handleMarkdownList = useCallback(() => {
        const editor = editorRef.current
        const formatAsList = (listType) => {
            if (listType === 'ordered') {
                editor.makeOrderedList()
            } else if (listType === 'unordered') {
                editor.makeUnorderedList()
            }
        }

        editor.forEachBlock((block) => {
            const handleListToken = (token, listType) => {
                if (block.innerText?.startsWith(`${token} `)) {
                    block.innerText = block.innerText.replace(`${token} `, ' ')
                    formatAsList(listType)
                } else if (block.innerText?.startsWith(`${token}\u00a0`)) {
                    block.innerText = block.innerText.replace(`${token}\u00a0`, ' ')
                    formatAsList(listType)
                }
            }

            handleListToken('1.', 'ordered')
            handleListToken('-', 'unordered')
            handleListToken('*', 'unordered')
        }, false)
    }, [])

...

editor.addEventListener('input', handleMarkdownList)

luantrasel avatar Aug 17 '23 21:08 luantrasel

Not bad @luantrasel , but I'm slightly worried, about the performance of your approach. maybe you can move your tokenlisthandler up in the scope instead of reinitializing inside every block callback and then calling it 3 times. Perhaps using regex methods may work well for this too. Let me know if I'm missing something, because I may have oversimplified the problem.

const ul = /^[\*\-]{1}\s+/;
const ol = /^[0-9]+\s+/;
const text = block.innerText;

if (ul.test(text)) {
  block.innerText = text.replace(ul, '');
  editor.makeUnorderedList();
  return;
}

if (ol.test(text)) {
  block.innerText = text.replace(ol, '');
  editor.makeOrderedList();
  return;
}

Puddingboy avatar Aug 18 '23 14:08 Puddingboy

I have added support for this in Squire 2.1.0.

neilj avatar Sep 19 '23 06:09 neilj