refactor(app): make editor nodes have an id

Author: zzhenryquezz

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import MonacoEditor from '../../monaco/components/MEditor.vue'
 import { Parser, Node as MarkdownNode, NodeType } from '@language-kit/markdown'
+import NodeEditor from './NodeEditor.vue'
 
 import uniqueId from 'lodash/uniqueId'
 
@@ -10,56 +11,51 @@ import MSetup from './MSetup.vue'
 import MComponent from './MComponent.vue'
 import { provideContext } from '../composable/context'
 import { provideManager } from '../composable/nodes-manager'
+import { NodeWithId } from '../types/node'
 
-const props = defineProps({
-    modelValue: {
-        type: String,
-        default: '',
-    },
+const model = defineModel({
+    type: String,
+    default: '',
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 const parser = new Parser()
 
 const manager = provideManager()
 
 const text = ref('')
+const nodes = ref<NodeWithId[]>([])
 
-function load() {
-    const prepareText = props.modelValue.replace(/\r\n/g, '\n')
-
-    manager.nodes = parser.toNodes(prepareText)
-
-    text.value = prepareText
+function mountNodes(value: string) {
+    return parser.toNodes(value).map((n) => new NodeWithId(uniqueId('node:'), n))
 }
 
-function updateNode(index: number, node: MarkdownNode) {
-    manager.nodes.splice(index, 1, node)
-
-    text.value = manager.nodes.map((n) => n.toText()).join('')
+function load() {
+    nodes.value = mountNodes(model.value)
 
-    emit('update:modelValue', text.value)
+    text.value = model.value
 }
 
 function updateText(value: string) {
     text.value = value
 
-    manager.nodes = parser.toNodes(value)
+    nodes.value = mountNodes(value)
 
-    emit('update:modelValue', value)
+    model.value = value
 }
 
-function updateTextFromNodes() {
-    text.value = manager.nodes.map((n) => n.toText()).join('')
+function updateNodes(newNodes: NodeWithId[]) {
+    nodes.value = newNodes
+
+    text.value = nodes.value.map((n) => n.toText()).join('')
 }
 
-watch(() => props.modelValue, load, {
-    immediate: true,
-})
+function onChangeNodes() {
+    text.value = nodes.value.map((n) => n.toText()).join('')
+
+    model.value = text.value
+}
 
-manager.on('remove', updateTextFromNodes)
-manager.on('add', updateTextFromNodes)
+onMounted(load)
 
 // context
 
@@ -79,7 +75,10 @@ function isSetup(node: MarkdownNode) {
             <MonacoEditor v-model="text" language="markdown" @keydown.ctrl.s="updateText(text)" />
         </div>
 
-        <div class="h-full w-6/12 overflow-auto pb-80 border-l border-b-secondary/25">
+        <div class="h-full w-6/12">
+            <NodeEditor v-model="nodes" @change="onChangeNodes" />
+        </div>
+        <!-- <div class="h-full w-6/12 overflow-auto pb-80 border-l border-b-secondary/25">
             <template v-for="(node, index) in manager.nodes" :key="index">
                 <MSetup
                     v-if="isSetup(node)"
@@ -109,6 +108,6 @@ function isSetup(node: MarkdownNode) {
                     {{ $t('errors.errorRenderingBlock', [node.type]) }}
                 </div>
             </template>
-        </div>
+        </div> -->
     </div>
 </template>

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

@@ -7,11 +7,12 @@ import { useManger } from '../composable/nodes-manager'
 import { useFocusList } from '../composable/focus-list'
 import { Token } from '@language-kit/lexer'
 import { useCursorHelper } from '../composable/cursor'
+import { NodeWithId } from '../types/node'
 
 // Props & Emit
 
 const model = defineModel({
-    type: MarkdownNode,
+    type: NodeWithId,
     required: true,
 })
 
@@ -41,15 +42,15 @@ function update(newHtml: string) {
 
     tokens.splice(lastIndex, 0, breakLine as any)
 
-    const node = new MarkdownNode({
+    const node = new NodeWithId(model.value.id, {
         type: NodeType.Paragraph,
         tokens,
     })
 
     model.value = node
 }
 
-watch(model, load)
+// watch(model, load)
 
 onMounted(load)
 

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { NodeWithId } from '@modules/editor/types/node'
+
+import MHeading from './MHeading.vue'
+import MParagraph from './MParagraph.vue'
+import MSetup from './MSetup.vue'
+import MComponent from './MComponent.vue'
+import { provideNodeEditor } from '../composable/node-editor'
+
+const nodes = defineModel({
+    type: Array as PropType<NodeWithId[]>,
+    default: () => [],
+})
+
+const emit = defineEmits(['change'])
+
+const editor = provideNodeEditor()
+
+function shouldHide(node: NodeWithId) {
+    if (!node.isComponent()) return
+
+    return node.name === 'setup'
+}
+
+function isSetup(node: NodeWithId) {
+    if (!node.isComponent()) return
+
+    return node.name === 'setup'
+}
+
+function updateNode(index: number, node: NodeWithId) {
+    nodes.value.splice(index, 1, node)
+
+    emit('change', nodes.value)
+}
+</script>
+<template>
+    <div class="h-full overflow-auto pb-80 border-l border-b-secondary/25">
+        <div
+            v-for="(node, index) in nodes"
+            :key="node.id"
+            :class="shouldHide(node) ? 'hidden' : ''"
+            class="w-full"
+        >
+            <MSetup
+                v-if="isSetup(node)"
+                :model-value="node"
+                @update:model-value="updateNode(index, $event)"
+            />
+
+            <MComponent
+                v-else-if="node.type === 'component'"
+                :model-value="node"
+                @update:model-value="updateNode(index, $event)"
+            />
+
+            <MHeading
+                v-else-if="node.type === 'heading'"
+                :model-value="node"
+                @update:model-value="updateNode(index, $event)"
+            />
+
+            <MParagraph
+                v-else-if="node.type === 'paragraph'"
+                :model-value="node"
+                @update:model-value="updateNode(index, $event)"
+            />
+
+            <div v-else class="p-5 text-danger bg-danger/25 border-b">
+                {{ $t('errors.errorRenderingBlock', [node.type]) }}
+            </div>
+        </div>
+    </div>
+</template>

packages/app/modules/editor/composable/node-editor.ts

@@ -0,0 +1,21 @@
+const key = Symbol('node-editor')
+
+export function create() {
+    const setupContext = reactive({})
+
+    return {
+        setupContext,
+    }
+}
+
+export function provideNodeEditor() {
+    const state = create()
+
+    provide(key, state)
+
+    return state
+}
+
+export function useNodeEditor() {
+    return inject(key, create())
+}

packages/app/modules/editor/composable/nodes-manager.ts

@@ -1,4 +1,4 @@
-import { Node } from '@language-kit/markdown'
+import type { NodeWithId } from '../types/node'
 
 const key = Symbol('editor:nodes')
 
@@ -8,7 +8,7 @@ interface Observer {
 }
 
 function create() {
-    const nodes = ref<Node[]>([])
+    const nodes = ref<NodeWithId[]>([])
 
     const observers: Observer[] = []
 
@@ -19,11 +19,11 @@ function create() {
         observers.filter((o) => o.name === name).forEach((o) => o.callback())
     }
 
-    function updateNodeByIndex(index: number, node: Node) {
+    function updateNodeByIndex(index: number, node: NodeWithId) {
         nodes.value[index] = node
     }
 
-    function removeNode(node: Node) {
+    function removeNode(node: NodeWithId) {
         const index = nodes.value.indexOf(node)
 
         if (index === -1) return
@@ -33,21 +33,21 @@ function create() {
         emit('remove')
     }
 
-    function addNode(index: number, node: Node) {
+    function addNode(index: number, node: NodeWithId) {
         nodes.value.splice(index, 0, node)
 
         emit('add')
     }
 
-    function addNodeBefore(node: Node, before: Node) {
+    function addNodeBefore(node: NodeWithId, before: NodeWithId) {
         const index = nodes.value.indexOf(node)
 
         if (index === -1) return
 
         addNode(index - 1, before)
     }
 
-    function addNodeAfter(node: Node, after: Node) {
+    function addNodeAfter(node: NodeWithId, after: NodeWithId) {
         const index = nodes.value.indexOf(node)
 
         if (index === -1) return

packages/app/modules/editor/types/node.ts

@@ -0,0 +1,11 @@
+import { Node } from '@language-kit/markdown'
+
+export class NodeWithId extends Node {
+    public id: string
+
+    constructor(id: string, node: Pick<Node, 'tokens' | 'type'>) {
+        super(node)
+
+        this.id = id
+    }
+}

packages/app/modules/entry/pages/EMarkdown.vue

@@ -28,9 +28,12 @@ const props = defineProps({
 // set content
 const store = useStore()
 
+const loading = ref(false)
 const content = ref('')
 
 async function setContent() {
+    loading.value = true
+
     const decoder = new TextDecoder('utf-8')
 
     const contentBuffer = await store.read({
@@ -40,6 +43,8 @@ async function setContent() {
     if (!contentBuffer) return
 
     content.value = decoder.decode(contentBuffer)
+
+    loading.value = false
 }
 
 const save = debounce(async () => {
@@ -104,7 +109,7 @@ const modeLabels: Record<typeof mode.value, string> = {
         </v-layout-toolbar>
 
         <v-layout-content>
-            <m-editor v-model="content" />
+            <m-editor v-if="!loading" v-model="content" />
         </v-layout-content>
     </v-layout>
 </template>