refactor(app)!: use new component in main editor

Author: zzhenryquezz

package-lock.json

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { MarkdownNode } from '@language-kit/markdown'
 import { useEditor } from '../composables/editor'
+import { syncRef, useFocusWithin, useKeyModifier } from '@vueuse/core'
 
 // node model
 const node = defineModel({
@@ -9,6 +10,12 @@ const node = defineModel({
 })
 
 // selected
+
+const root = ref<HTMLElement | null>(null)
+
+const { focused } = useFocusWithin(root)
+const isControlPressed = useKeyModifier('Control')
+
 const editor = useEditor()
 
 const selected = defineModel('selected', {
@@ -17,22 +24,33 @@ const selected = defineModel('selected', {
     local: true,
 })
 
-watch(
-    editor.selected,
-    (value) => {
-        selected.value = value.includes(node.value)
+const isSelectedInEditor = computed({
+    get() {
+        return editor.selected.some((n) => n.meta.id === node.value.meta.id)
     },
-    { immediate: true }
-)
+    set(value) {
+        if (value) return editor.select(node.value)
 
-watch(selected, (value) => {
-    if (value === null) return
+        editor.unselect(node.value)
+    },
+})
 
-    if (value) {
-        return editor.select(node.value)
+syncRef(selected, isSelectedInEditor)
+
+function onMousedown(e: MouseEvent) {
+    if (e.ctrlKey) {
+        editor.select(node.value)
+
+        return
     }
 
-    editor.unselect(node.value)
+    editor.select(node.value, true)
+}
+
+watch(focused, (value) => {
+    if (value && !isControlPressed.value) {
+        isSelectedInEditor.value = true
+    }
 })
 
 // menu
@@ -43,7 +61,12 @@ const icon = defineProp<string>('icon', {
 })
 </script>
 <template>
-    <div>
+    <div
+        ref="root"
+        class="flex min-h-[48px] items-center group hover:bg-b-secondary/50"
+        :class="isSelectedInEditor ? 'bg-b-secondary/50' : ''"
+        @mousedown="onMousedown"
+    >
         <Teleport :to="`#${node.meta.toolbarId}`">
             <slot name="toolbar" />
         </Teleport>
@@ -59,7 +82,7 @@ const icon = defineProp<string>('icon', {
             </v-btn>
         </div>
 
-        <div class="flex-1">
+        <div class="flex-1" :class="isControlPressed ? 'pointer-events-none' : ''">
             <slot />
         </div>
     </div>

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

@@ -33,27 +33,37 @@ describe('BlockParagraph', () => {
     it('should when html changes, emit update event with correct format', async () => {
         const spy = vi.fn()
 
+        const payload = createNodeParagraphFromHtml('Test <strong>bold</strong>')
+
+        payload.meta = { id: 'test', toolbarId: 'test-toolbar' }
+
         component.mount({
             props: {
-                'modelValue': createNodeParagraphFromHtml('Test <strong>bold</strong>'),
+                'modelValue': payload,
                 'onUpdate:model-value': spy,
             },
         })
 
         const editable = findHTMLContentEditable()
 
+        const expected = createNodeParagraphFromHtml('Test <strong>bold</strong> update')
+
+        expected.meta = payload.meta
+
         await editable.setValue('Test <strong>bold</strong> update')
 
         expect(spy).toHaveBeenCalledOnce()
 
-        expect(spy).toHaveBeenCalledWith(
-            createNodeParagraphFromHtml('Test <strong>bold</strong> update')
-        )
+        expect(spy).toHaveBeenCalledWith(expected)
     })
 
     it.todo('should focus HTMLContentEditable when block is selected')
 
     it.todo('should blur HTMLContentEditable area when block is selected')
 
+    it.todo('should always end block with a break line')
+
+    it.todo('should replace empty spaces with &nbsp; to avoid bugs')
+
     it.todo('should emit update event when ToolbarTextFormat modifies the content')
 })

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

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { MarkdownNodeParagraph } from '@language-kit/markdown'
+import Block from './Block.vue'
 import HTMLContentEditable from './HTMLContentEditable.vue'
 import { createNodeParagraphFromHtml } from '../composables/helpers'
+import { TokenType } from '@language-kit/lexer'
+
+defineOptions({
+    inheritAttrs: false,
+})
 
 const model = defineModel({
     type: MarkdownNodeParagraph,
@@ -10,22 +16,39 @@ const model = defineModel({
 
 const html = ref('')
 
+const isEmpty = computed(() => {
+    if (model.value.tokens.length > 3) return
+
+    return model.value.tokens.every((token) =>
+        [TokenType.BreakLine, TokenType.EndOfFile].includes(token.type as any)
+    )
+})
+
 function load() {
-    html.value = model.value.toHtml()
+    html.value = model.value.toHtml().replaceAll(' ', '&nbsp;')
 }
 
-function onHtmlUpdate(payload: string) {
-    html.value = payload
+function update() {
+    const node = createNodeParagraphFromHtml(html.value)
 
-    const node = createNodeParagraphFromHtml(payload)
+    node.meta = model.value.meta
 
     model.value = node
 }
 
+function onBlur() {
+    update()
+}
+
 watch(model, load, { immediate: true })
 </script>
 <template>
-    <div>
-        <HTMLContentEditable :model-value="html" @update:model-value="onHtmlUpdate" />
-    </div>
+    <block v-model="model" :class="isEmpty ? 'hidden' : ''">
+        <HTMLContentEditable
+            v-model="html"
+            @blur="onBlur"
+            @keydown.enter.prevent="update"
+            @keydown.ctrl.s="update"
+        />
+    </block>
 </template>

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

@@ -7,6 +7,10 @@ import { MarkdownNode } from '@language-kit/markdown'
 
 const editor = useEditorOrCreate()
 
+const nodesReady = computed(() => {
+    return editor.nodes.filter((node) => editor.toolbars.has(node.meta.id))
+})
+
 function onNodeUpdate(node: MarkdownNode) {
     editor.update(node)
 }
@@ -15,18 +19,28 @@ function onNodeUpdate(node: MarkdownNode) {
     <div>
         <Toolbar />
 
-        <template v-for="n in editor.nodes" :key="n.meta.id">
-            <BlockParagraph
-                v-if="n.is('Paragraph')"
-                :model-value="n"
-                @update:model-value="onNodeUpdate"
-            />
+        <div class="h-[calc(100%-48px)] w-full overflow-auto pb-80">
+            <transition-group
+                move-class="transition duration-200"
+                enter-active-class="transition duration-200"
+                leave-active-class="transition duration-200 absolute"
+                enter-from-class="opacity-0"
+                leave-to-class="opacity-0 translate-x-[-50%]"
+            >
+                <template v-for="n in nodesReady" :key="n.meta.id">
+                    <BlockParagraph
+                        v-if="n.is('Paragraph')"
+                        :model-value="n"
+                        @update:model-value="onNodeUpdate"
+                    />
 
-            <Block v-else :model-value="n" data-test-id="invalid-block">
-                <div class="text-danger">
-                    {{ $t('errors.errorRenderingBlock', [n.type]) }}
-                </div>
-            </Block>
-        </template>
+                    <Block v-else :model-value="n" data-test-id="invalid-block">
+                        <div class="text-danger">
+                            {{ $t('errors.errorRenderingBlock', [n.type]) }}
+                        </div>
+                    </Block>
+                </template>
+            </transition-group>
+        </div>
     </div>
 </template>

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

@@ -5,13 +5,17 @@ const model = defineModel({
     default: '',
 })
 
+const emit = defineEmits(['blur'])
+
 const editableAreaRef = ref<HTMLElement>()
 
 const focused = ref(false)
 
 function loadEditableArea() {
     if (!editableAreaRef.value) return
 
+    if (model.value === editableAreaRef.value.innerHTML) return
+
     editableAreaRef.value.innerHTML = model.value
 }
 
@@ -21,6 +25,12 @@ function onInput() {
     model.value = editableAreaRef.value?.innerHTML ?? ''
 }
 
+function onBlur() {
+    focused.value = false
+
+    emit('blur')
+}
+
 watch(model, loadEditableArea)
 
 onMounted(loadEditableArea)
@@ -67,16 +77,17 @@ function loadComponent() {
 watch([model, state], loadComponent, { immediate: true })
 </script>
 <template>
-    <div>
+    <div class="flex w-full">
         <component :is="instance" v-if="showView" data-test-id="view-area" />
         <div
             ref="editableAreaRef"
+            :class="!focused && isDynamicRender ? 'opacity-0' : ''"
+            class="outline-none transition-opacity min-h-[20px] w-full"
             data-test-id="editable-area"
             contenteditable="true"
-            :class="!focused && isDynamicRender ? 'opacity-0' : ''"
             @input="onInput"
             @focus="focused = true"
-            @blur="focused = false"
+            @blur="onBlur"
         />
     </div>
 </template>