feat(app): add delete block button

Author: zzhenryquezz

package-lock.json

@@ -45,6 +45,7 @@ declare global {
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']

packages/app/auto-import.d.ts

@@ -9,7 +9,10 @@ describe('useEvaluation', () => {
     })
 
     it.each([
-        ['import lodash from "lodash"', `const lodash = ${composable.importIdentifier}("lodash");`],
+        [
+            'import lodash from "lodash"',
+            `const lodash = ${composable.importIdentifier}("lodash").default;`,
+        ],
         [
             'import { camelCase } from "lodash"',
             `const { camelCase } = ${composable.importIdentifier}("lodash");`,

packages/app/modules/evaluation/composables/use-evaluation.spec.ts

@@ -7,6 +7,6 @@ export default defineResolver({
         const version = 'latest'
         const url = `https://unpkg.com/${name}@${version}?module`
 
-        return import(url)
+        return import(/* @vite-ignore */ url)
     },
 })

packages/app/modules/evaluation/resolvers/npm.ts

@@ -1,9 +1,25 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Node } from '@language-kit/markdown'
+import { useManger } from '../composable/nodes-manager'
+
+const props = defineProps({
+    node: {
+        type: Object as () => Node,
+        required: true,
+    },
+})
+
+const manager = useManger()
+
+function deleteBlock() {
+    manager.removeNode(props.node)
+}
+</script>
 
 <template>
     <div class="flex min-h-[30px] items-center group">
         <div class="w-[50px] flex justify-center">
-            <v-menu offset-y offset-x close-on-content-click>
+            <v-menu offset-y close-on-content-click>
                 <template #activator="{ attrs }">
                     <v-btn
                         v-bind="attrs"
@@ -16,6 +32,11 @@
                 </template>
 
                 <v-card color="b-secondary">
+                    <v-list-item @click="deleteBlock">
+                        <v-icon name="trash" class="mr-2" />
+
+                        {{ $t('delete') }}
+                    </v-list-item>
                     <slot name="menu" />
                 </v-card>
             </v-menu>

packages/app/modules/markdown-editor/components/MBlock.vue

@@ -30,106 +30,11 @@ const loading = ref(false)
 const componentData = shallowRef({
     template: null as null | string,
     components: createComponentObject(),
-    props: {
-        context: {
-            type: Object,
-            required: true,
-        },
+    setup() {
+        return context
     },
 })
 
-function findAttrsRange() {
-    const startIndex = 4
-    const endIndex = model.value.tokens.findIndex((t, index) => {
-        const prev = model.value.tokens[index - 1]
-
-        if (t.type === TokenType.BreakLine && prev?.type === TokenType.WhiteSpace) {
-            return true
-        }
-
-        return false
-    })
-
-    return [startIndex, endIndex]
-}
-
-function findAttrs() {
-    const [startIndex, endIndex] = findAttrsRange()
-    const lines: string[] = []
-    const attrs: string[] = []
-
-    let current = 0
-
-    model.value.tokens.slice(startIndex, endIndex).forEach((t) => {
-        if (t.type === TokenType.BreakLine) {
-            current++
-            return
-        }
-
-        if (!lines[current]) {
-            lines[current] = ''
-        }
-
-        lines[current] += t.value
-    })
-
-    lines.forEach((line) => {
-        // split first =
-        let [name, value] = line.split(/=(.+)/)
-
-        name = name.trim()
-
-        if (!name) return
-
-        if (name[0] === ':' && value[1] === '`') {
-            // replace ${variable} to ${context.variable}
-            value = value.replace(/\$\{([a-zA-Z0-9_]+)\}/g, (_, name) => {
-                return `\${context.${name}}`
-            })
-        }
-
-        if (name[0] === '@' && !value.includes('(')) {
-            // replace method to context.method
-            value = value.replace(/([a-zA-Z0-9_]+)/g, (_, name) => {
-                return `context.${name}`
-            })
-        }
-
-        if (name[0] === '@' && value.includes('(')) {
-            // replace method(..args) to context.method(..args)
-            value = value.replace(/([a-zA-Z0-9_]+)\(/g, (_, name) => {
-                return `context.${name}(`
-            })
-        }
-
-        attrs.push(`${name}=${value}`)
-    })
-
-    return attrs
-}
-
-function findContent() {
-    const [, endAttrIndex] = findAttrsRange()
-
-    const tokens = model.value.tokens.slice(endAttrIndex + 1)
-
-    let content = tokens.map((t) => t.value).join('')
-
-    // replace {{variable}} to {{context.variable}}
-    content = content.replace(/\{\{([a-zA-Z0-9_]+)\}\}/g, (_, name) => {
-        return `{{context.${name}}}`
-    })
-
-    // replace {{ `...${variable}...` }} to {{ `...${context.variable}...` }}
-    content = content.replace(/\{\{ `(.+)` \}\}/g, (_, content) => {
-        return `{{ \`${content.replace(/\$\{([a-zA-Z0-9_]+)\}/g, (_, name) => {
-            return `\${context.${name}}`
-        })}\` }}`
-    })
-
-    return content.trim()
-}
-
 function load() {
     loading.value = true
 
@@ -138,14 +43,28 @@ function load() {
     }
 
     let name = model.value.tokens[3].value
-    const attrs: string[] = findAttrs()
-    const content = findContent()
+
+    if (!model.value.isComponent()) {
+        return
+    }
+
+    const attrs = Object.entries(model.value.attrs)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ')
+
+    const props = Object.entries(model.value.props)
+        .map(([key, value]) => `:${key}="${value}"`)
+        .join(' ')
+
+    const events = Object.entries(model.value.events)
+        .map(([key, value]) => `@${key}="${value}"`)
+        .join(' ')
 
     if (globalComponents[name]) {
         name = globalComponents[name]
     }
 
-    const template = `<${name} ${attrs.join(' ')}>${content}</${name}>`
+    const template = `<${name} ${props} ${attrs} ${events} >${model.value.body}</${name}>`
 
     componentData.value.template = template
 
@@ -157,10 +76,27 @@ function load() {
 watch(model, load)
 
 onMounted(load)
+
+// destroy
+
+const destroy = ref(false)
+
+watch(loading, (value) => {
+    if (value) {
+        destroy.value = true
+        return
+    }
+
+    destroy.value = false
+})
+
+onUnmounted(() => {
+    destroy.value = true
+})
 </script>
 
 <template>
-    <m-block class="my-2">
+    <m-block v-if="!destroy" :node="model">
         <div v-if="loading" class="text-t-secondary text-sm">Loading...</div>
         <component
             :is="componentData as any"

packages/app/modules/markdown-editor/components/MComponent.vue

@@ -2,11 +2,14 @@
 import MonacoEditor from '../../monaco/components/MEditor.vue'
 import { Parser, Node as MarkdownNode, NodeType } from '@language-kit/markdown'
 
+import uniqueId from 'lodash/uniqueId'
+
 import MHeading from './MHeading.vue'
 import MParagraph from './MParagraph.vue'
 import MSetup from './MSetup.vue'
 import MComponent from './MComponent.vue'
 import { provideContext } from '../composable/context'
+import { provideManager } from '../composable/nodes-manager'
 
 const props = defineProps({
     modelValue: {
@@ -19,28 +22,28 @@ const emit = defineEmits(['update:modelValue'])
 
 const parser = new Parser()
 
-const nodes = ref<MarkdownNode[]>([])
+const manager = provideManager()
 
 const text = ref('')
 
 function load() {
-    nodes.value = parser.toNodes(props.modelValue)
+    manager.nodes = parser.toNodes(props.modelValue)
 
     text.value = props.modelValue
 }
 
 function updateNode(index: number, node: MarkdownNode) {
-    nodes.value.splice(index, 1, node)
+    manager.nodes.splice(index, 1, node)
 
-    text.value = nodes.value.map((n) => n.toText()).join('')
+    text.value = manager.nodes.map((n) => n.toText()).join('')
 
     emit('update:modelValue', text.value)
 }
 
 function updateText(value: string) {
     text.value = value
 
-    nodes.value = parser.toNodes(value)
+    manager.nodes = parser.toNodes(value)
 
     emit('update:modelValue', value)
 }
@@ -49,6 +52,10 @@ watch(() => props.modelValue, load, {
     immediate: true,
 })
 
+manager.on('remove', () => {
+    text.value = manager.nodes.map((n) => n.toText()).join('')
+})
+
 // context
 
 provideContext()
@@ -68,7 +75,7 @@ function isSetup(node: MarkdownNode) {
         </div>
 
         <div class="h-full w-6/12 overflow-auto">
-            <template v-for="(node, index) in nodes" :key="index">
+            <template v-for="(node, index) in manager.nodes" :key="index">
                 <MSetup
                     v-if="isSetup(node)"
                     :model-value="node"

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

@@ -44,13 +44,10 @@ const onInput = debounce((event: InputEvent) => {
 
 const loading = ref(false)
 
-const componentData = shallowRef({
+const componentData = shallowRef<any>({
     template: '<div></div>',
-    props: {
-        context: {
-            type: Object,
-            required: true,
-        },
+    setup() {
+        return context
     },
 })
 
@@ -61,16 +58,6 @@ function setComponentData() {
 
     let text = props.modelValue
 
-    // replace any {{ variable }} with {{ context[variable] }}
-    text = text.replaceAll(/{{ ([a-zA-Z0-9]+) }}/g, (match, p1) => {
-        return `{{ context.${p1} }}`
-    })
-
-    // replace any {{ method(arg1, arg2) }} with {{ context.method(arg1, arg2) }}
-    text = text.replaceAll(/{{ ([a-zA-Z0-9]+)\((.*)\) }}/g, (match, p1, p2) => {
-        return `{{ context.${p1}(${p2}) }}`
-    })
-
     componentData.value.template = `<div>${text}</div>`
 
     setTimeout(() => {
@@ -86,7 +73,7 @@ watch(() => props.modelValue, setComponentData, {
 <template>
     <div v-if="loading" class="text-t-secondary text-sm">Loading...</div>
 
-    <component :is="componentData as any" v-else-if="textHaveVariable" :context="context" />
+    <component :is="componentData" v-else-if="textHaveVariable" :context="context" />
 
     <div
         v-else