diff --git a/src/components/Block.vue b/src/components/Block.vue index 3db7f3b..0fa1aed 100644 --- a/src/components/Block.vue +++ b/src/components/Block.vue @@ -1,37 +1,54 @@ @@ -60,6 +77,10 @@ const props = defineProps({ type: Boolean, default: false, }, + listIndex: { + type: Number, + default: null + } }) const emit = defineEmits([ @@ -155,7 +176,11 @@ function keyDownHandler (event:KeyboardEvent) { const selection = window.getSelection() if (!(menu.value && menu.value.open) && atFirstChar() && selection && selection.anchorOffset === 0 && !props.readonly) { event.preventDefault() - emit('merge') + if (props.block.type === BlockType.UnorderedList || props.block.type === BlockType.OrderedList) { + setBlockType(BlockType.Text, 0) + } else { + emit('merge') + } } } else if (event.key === 'Enter') { event.preventDefault() @@ -166,7 +191,7 @@ function keyDownHandler (event:KeyboardEvent) { } function isContentBlock () { - return [BlockType.Text, BlockType.Quote, BlockType.H1, BlockType.H2, BlockType.H3].includes(props.block.type) + return [BlockType.Text, BlockType.Quote, BlockType.H1, BlockType.H2, BlockType.H3, BlockType.OrderedList, BlockType.UnorderedList].includes(props.block.type) } const content = ref(null) @@ -379,7 +404,7 @@ function getCaretPosWithoutTags () { function setCaretPos (caretPos:number) { const innerContent = getInnerContent() if (innerContent) { - if (isTextBlock(props.block.type)) { + if (isTextBlock(props.block.type)) { let offsetNode, offset = 0 const numNodes = (content.value as any).$el.firstChild.firstChild.childNodes.length for (const [i, node] of (content.value as any).$el.firstChild.firstChild.childNodes.entries()) { @@ -439,12 +464,14 @@ function parseMarkdown (event:KeyboardEvent) { const textContent = getTextContent() if(!textContent) return - const markdownRegexpMap = { + const markdownRegexpMap: Record = { + [BlockType.OrderedList]: /^1.\s(.*)$/, + [BlockType.UnorderedList]: /^-\s(.*)$/, [BlockType.H1]: /^#\s(.*)$/, [BlockType.H2]: /^##\s(.*)$/, [BlockType.H3]: /^###\s(.*)$/, [BlockType.Quote]: /^>\s(.*)$/, - [BlockType.Divider]: /^---\s$/ + [BlockType.Divider]: /^---\s$/, } const handleMarkdownContent = (blockType: keyof typeof markdownRegexpMap) => { @@ -457,18 +484,14 @@ function parseMarkdown (event:KeyboardEvent) { }) } + const blockTypes = [BlockType.OrderedList, BlockType.UnorderedList, BlockType.H1, BlockType.H2, BlockType.H3, BlockType.Quote, BlockType.Divider] + const matchedBlockType = blockTypes.find((type) => textContent.match(markdownRegexpMap[type])) - if (textContent.match(markdownRegexpMap[BlockType.H1]) && event.key === ' ') { - handleMarkdownContent(BlockType.H1) - } else if (textContent.match(markdownRegexpMap[BlockType.H2]) && event.key === ' ') { - handleMarkdownContent(BlockType.H2) - } else if (textContent.match(markdownRegexpMap[BlockType.H3]) && event.key === ' ') { - handleMarkdownContent(BlockType.H3) - } else if (textContent.match(markdownRegexpMap[BlockType.Quote]) && event.key === ' ') { - handleMarkdownContent(BlockType.Quote) - } else if (textContent.match(markdownRegexpMap[BlockType.Divider]) && event.key === ' ') { - handleMarkdownContent(BlockType.Divider) - props.block.details.value = '' + if (matchedBlockType && event.key === ' ') { + handleMarkdownContent(matchedBlockType) + if (matchedBlockType === BlockType.Divider) { + props.block.details.value = '' + } } else if (event.key === '/') { if (menu.value && !menu.value.open) { menu.value.open = true diff --git a/src/components/BlockMenu.vue b/src/components/BlockMenu.vue index 90c683d..c7b2b78 100644 --- a/src/components/BlockMenu.vue +++ b/src/components/BlockMenu.vue @@ -9,7 +9,7 @@
+ class="w-[10rem] lg:w-[12rem] xl:w-[16rem] absolute z-20 shadow-block rounded py-1 text-neutral-700 text-sm right-full bg-white max-h-[24rem] overflow-auto focus-visible:outline-none top-0">
-
Turn into
+
+
Turn into
+
Esc to Close
+
-
+

+ v-bind="dragOptions" class="space-y-2 pb-4"> - + @setBlockType="(type: BlockType) => setBlockType(i, type)" + />

diff --git a/src/components/Main.vue b/src/components/Main.vue index 930750a..281b749 100644 --- a/src/components/Main.vue +++ b/src/components/Main.vue @@ -50,43 +50,43 @@ const page = ref({ id: uuidv4(), type: BlockType.Text, details: { - value: '1. Hover on the left of each line for quick actions' + value: 'Hover on the left of each line for quick actions' }, }, { id: uuidv4(), type: BlockType.Text, details: { - value: '2. Click on the + button to add a new line' + value: 'Click on the + button to add a new line' }, }, { id: uuidv4(), type: BlockType.Text, details: { - value: '3. Drag the ⋮⋮ button to reorder' + value: 'Drag the ⋮⋮ button to reorder' }, }, { id: uuidv4(), type: BlockType.Text, details: { - value: '4. Click the trash icon to delete this block' + value: 'Click the trash icon to delete this block' }, }, { id: uuidv4(), - type: BlockType.Text, + type: BlockType.OrderedList, details: { - value: '5. **Bold** and *italicize* using markdown e.g. \\*\\*bold\\*\\* and \\*italics\\*' + value: '**Bold** and *italicize* using markdown e.\\*\\*bold\\*\\* and \\*italics\\*' }, }, { id: uuidv4(), - type: BlockType.Text, + type: BlockType.OrderedList, details: { - value: '6. Add headers and dividers with \'#\', \'##\' or \'---\' followed by a space' + value: 'Add headers and dividers with \'#\', \'##\' or \'---\' followed by a space' }, }, { id: uuidv4(), - type: BlockType.Text, + type: BlockType.OrderedList, details: { - value: '7. Type \'/\' for a menu to quickly switch blocks and search by typing' + value: 'Type \'/\' for a menu to quickly switch blocks and search by typing' }, },] }) diff --git a/src/components/blocks/DividerBlock.vue b/src/components/blocks/DividerBlock.vue index 54da391..bd0b908 100644 --- a/src/components/blocks/DividerBlock.vue +++ b/src/components/blocks/DividerBlock.vue @@ -1,13 +1,12 @@