test: create new BlockParagraph component

Author: zzhenryquezz

packages/app/__tests__/fixtures/component.ts

@@ -2,11 +2,14 @@ import { ComponentMountingOptions, VueWrapper, mount } from '@vue/test-utils'
 import { DefineComponent } from 'vue'
 import merge from 'lodash/merge'
 
-export function useMountWrapper<T extends DefineComponent<any, any, any, any, any>>(component: T) {
+export function useMountWrapper<T extends DefineComponent<any, any, any, any, any>>(
+    component: T,
+    defaultOptions?: ComponentMountingOptions<T>
+) {
     const state = {
         wrapper: null as VueWrapper<InstanceType<T>> | null,
         mount: (options?: ComponentMountingOptions<T>) => {
-            state.wrapper = mount(component, merge(options))
+            state.wrapper = mount(component, merge(options, defaultOptions))
 
             return state.wrapper!
         },

packages/app/modules/block-editor/components/BlockParagraph.spec.ts

@@ -0,0 +1,59 @@
+import { useMountWrapper } from '__tests__/fixtures/component'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import BlockParagraph from './BlockParagraph.vue'
+import HTMLContentEditable from './HTMLContentEditable.vue'
+import { createNodeParagraphFromHtml } from '../composables/helpers'
+
+describe('BlockParagraph', () => {
+    const component = useMountWrapper(BlockParagraph, {
+        shallow: true,
+    })
+
+    afterEach(component.unmount)
+
+    function findHTMLContentEditable() {
+        return component.wrapper!.findComponent(HTMLContentEditable)
+    }
+
+    it('should pass node as html to HTMLContentEditable component', () => {
+        component.mount({
+            props: {
+                modelValue: createNodeParagraphFromHtml('Test <strong>bold</strong>'),
+            },
+        })
+
+        const editable = findHTMLContentEditable()
+
+        expect(editable.exists()).toBe(true)
+
+        expect(editable.props('modelValue')).toBe('<p>Test <strong>bold</strong></p>')
+    })
+
+    it('should when html changes, emit update event with correct format', async () => {
+        const spy = vi.fn()
+
+        component.mount({
+            props: {
+                'modelValue': createNodeParagraphFromHtml('Test <strong>bold</strong>'),
+                'onUpdate:model-value': spy,
+            },
+        })
+
+        const editable = findHTMLContentEditable()
+
+        await editable.setValue('Test <strong>bold</strong> update')
+
+        expect(spy).toHaveBeenCalledOnce()
+
+        expect(spy).toHaveBeenCalledWith(
+            createNodeParagraphFromHtml('Test <strong>bold</strong> update')
+        )
+    })
+
+    it.todo('should focus HTMLContentEditable when block is selected')
+
+    it.todo('should blur HTMLContentEditable area when block is selected')
+
+    it.todo('should emit update event when ToolbarTextFormat modifies the content')
+})

packages/app/modules/block-editor/components/BlockParagraph.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { MarkdownNodeParagraph } from '@language-kit/markdown'
+import HTMLContentEditable from './HTMLContentEditable.vue'
+import { createNodeParagraphFromHtml } from '../composables/helpers'
+
+const model = defineModel({
+    type: MarkdownNodeParagraph,
+    required: true,
+})
+
+const html = ref('')
+
+function load() {
+    html.value = model.value.toHtml()
+}
+
+function onHtmlUpdate(payload: string) {
+    html.value = payload
+
+    const node = createNodeParagraphFromHtml(payload)
+
+    model.value = node
+}
+
+watch(model, load, { immediate: true })
+</script>
+<template>
+    <div>
+        <HTMLContentEditable :model-value="html" @update:model-value="onHtmlUpdate" />
+    </div>
+</template>

packages/app/modules/block-editor/composables/helpers.ts

@@ -0,0 +1,41 @@
+import {
+    MarkdownNodeParagraph,
+    MarkdownParser,
+    MarkdownProcessorParagraph,
+} from '@language-kit/markdown'
+
+const parser = new MarkdownParser()
+
+export function createNodeParagraphFromHtml(payload: string) {
+    const node = new MarkdownNodeParagraph()
+
+    let text = payload
+
+    if (text.startsWith('<p>')) {
+        // replace <p>{content}</p> > {content}
+        text = payload.replace(/^<p>(.*)<\/p>$/, '$1')
+    }
+
+    // replace <strong>Text</strong> to **Text**
+    text = text.replaceAll(/<strong>([^<]+)<\/strong>/g, '**$1**')
+
+    // replace <em>Text</em> to *Text*
+    text = text.replaceAll(/<em>([^<]+)<\/em>/g, '*$1*')
+
+    // replace <s>Text</s> to ~~Text~~
+    text = text.replaceAll(/<s>([^<]+)<\/s>/g, '~~$1~~')
+
+    // replace <span {attrs}>Text</span> to [Text]{attrs}
+    text = text.replaceAll(/<span\s+([^>]+)>([^<]+)<\/span>/g, '[$2]{ $1 }')
+
+    node.children = parser.toNodes(text, {
+        lexer: {
+            includeEndOfFileToken: false,
+        },
+        processors: {
+            exclude: [MarkdownProcessorParagraph],
+        },
+    })
+
+    return node
+}