refactor(app): use renderer in Heading node

Author: zzhenryquezz

packages/app/modules/editor/components/NodeEditorBlock.vue

@@ -51,6 +51,15 @@ onKeyStroke('ArrowUp', (e) => {
     focusBlock(-1)
 })
 
+onKeyStroke(
+    'Enter',
+    (e) => {
+        e.preventDefault()
+        // focusBlock(-1)
+    },
+    { target: content }
+)
+
 onMounted(() => {
     window.addEventListener('focus', setIsFocused, true)
 })

packages/app/modules/editor/components/NodeEditorBlockHeading.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import MBlock from './NodeEditorBlock.vue'
 import { Node as MarkdownNode, MarkdownToken, NodeType, Parser } from '@language-kit/markdown'
+import NodeEditorRenderer from './NodeEditorRenderer.vue'
 
 import debounce from 'lodash/debounce'
 import { NodeWithId } from '../types/node'
@@ -10,14 +11,11 @@ const model = defineModel({
     required: true,
 })
 
-const el = ref<HTMLElement>()
-const text = ref('')
+const html = ref('')
 const level = ref(1)
 const parser = new Parser()
 
 function setText() {
-    if (!el.value) return
-
     const tokens = model.value.tokens.filter((t) => t.value !== '#')
 
     const value = tokens
@@ -26,12 +24,7 @@ function setText() {
         .join('')
         .trim()
 
-    const isEqual = value === el.value.innerHTML || value === text.value
-
-    if (isEqual) return
-
-    text.value = value
-    el.value.innerHTML = value
+    html.value = value
 }
 
 function setLevel() {
@@ -40,8 +33,8 @@ function setLevel() {
     level.value = tokens
 }
 
-function updateNode(markdown: string) {
-    const tokens = parser.toTokens(markdown)
+function updateNode(text: string) {
+    const tokens = parser.toTokens(text)
 
     const lastIndex = tokens.length - 1
     const breakLine = MarkdownToken.breakLine()
@@ -56,42 +49,32 @@ function updateNode(markdown: string) {
     model.value = node
 }
 
-const onInput = debounce((event: InputEvent) => {
-    const html = (event.target as HTMLElement).innerHTML
+function update(newHtml: string) {
+    html.value = newHtml
 
-    const markdown = '#'.repeat(level.value) + ' ' + html
-
-    updateNode(markdown)
-}, 100)
+    updateNode('#'.repeat(level.value) + ' ' + newHtml)
+}
 
 function updateLevel(value: number) {
     level.value = value
 
-    const markdown = '#'.repeat(value) + ' ' + text.value
+    const markdown = '#'.repeat(value) + ' ' + html.value
 
     updateNode(markdown)
 }
 
-watch(model, setText)
+watch(model, setText, {
+    immediate: true,
+})
 
 watch(model, setLevel)
-
-onMounted(setText)
-
-onMounted(setLevel)
 </script>
 
 <template>
     <m-block :node="model" class="md-heading">
-        <component
-            :is="'h' + level"
-            ref="el"
-            contenteditable
-            class="outline-none"
-            @input="onInput"
-            @keydown.enter.prevent
-            v-html="text"
-        />
+        <component :is="'h' + level">
+            <NodeEditorRenderer :model-value="html" @update:model-value="update" />
+        </component>
 
         <template #menu>
             <v-list-item v-for="n in 6" :key="n" @click="updateLevel(n)">

packages/app/modules/editor/components/NodeEditorBlockParagraph.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import MBlock from './NodeEditorBlock.vue'
-import MHtml from './NodeEditorRenderer.vue'
+import NodeEditorRenderer from './NodeEditorRenderer.vue'
 import { MarkdownToken, NodeType, Parser } from '@language-kit/markdown'
 import { NodeWithId } from '../types/node'
 
@@ -18,10 +18,6 @@ function load() {
         .join('')
         .trim()
 
-    const isEqual = value === html.value
-
-    if (isEqual) return
-
     html.value = value
 }
 
@@ -47,12 +43,7 @@ onMounted(load)
 </script>
 
 <template>
-    <m-block :node="model">
-        <m-html
-            ref="content"
-            :model-value="html"
-            data-block-focusable
-            @update:model-value="update"
-        />
-    </m-block>
+    <MBlock :node="model">
+        <NodeEditorRenderer :model-value="html" @update:model-value="update" />
+    </MBlock>
 </template>

packages/app/modules/editor/components/NodeEditorRenderer.vue

@@ -25,9 +25,11 @@ const textHaveVariable = computed(() => props.modelValue.includes('{{'))
 function setInnerModel() {
     let text = props.modelValue
 
+    const innerHTML = (el.value?.innerHTML ?? '').replace(' ', ' ')
+
     if (text === innerModel.value) return
 
-    if (text === el.value?.innerHTML) return
+    if (el.value && text === innerHTML) return
 
     innerModel.value = text
 }