Squire
Squire copied to clipboard
Start unordered list via `* ....`
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.
What if you don't want to, can i disable your feature?
What you are discribing is markdown behavior. Many editors adopt a markdown parser into their editing modes.
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)
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;
}
I have added support for this in Squire 2.1.0.