feat(app): option to edit setup block

Author: zzhenryquezz

packages/app/components/VDialog.vue

@@ -42,7 +42,7 @@ function onClick() {
 
     <teleport to="body">
         <transition name="fade">
-            <div v-if="show" class="fixed inset-0 flex items-center justify-center">
+            <div v-if="show" class="fixed inset-0 flex items-center justify-center z-20">
                 <div
                     class="absolute z-10 inset-0 flex bg-b-primary/25 backdrop-blur-sm"
                     @click="show = false"

packages/app/i18n/en-US.ts

@@ -114,6 +114,7 @@ export default {
         collectionNotFound: '@:collection not found: {1}',
         directoryEntryNotFound: 'Entry not found: {0}',
         directoryEntryAlreadyExists: 'Entry already exists: {0}',
+        errorRenderingBlocks: 'Error rendering blocks',
         errorRenderingBlock: 'Error rendering block: {0}',
     },
     markdownEditor: {

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

@@ -3,17 +3,18 @@ import * as Vue from 'vue'
 
 import { waitFor } from '@composables/utils'
 import { useContext } from '../composable/context'
-import { Node as MarkdownNode } from '@language-kit/markdown'
+import { Node as MarkdownNode, NodeType } from '@language-kit/markdown'
 import { useEvaluation } from '@modules/evaluation/composables/use-evaluation'
 import { createParser } from '@modules/evaluation/parser/parser'
 import { useNodeHelper } from '@modules/evaluation/helpers/node-helper'
 import npmResolver from '@modules/evaluation/resolvers/npm'
+import { useMagicKeys, whenever } from '@vueuse/core'
+import MonacoEditor from '../../monaco/components/MEditor.vue'
+import { NodeWithId } from '../types/node'
 
-const props = defineProps({
-    modelValue: {
-        type: Object as () => MarkdownNode,
-        required: true,
-    },
+const model = defineModel({
+    type: Object as PropType<NodeWithId>,
+    required: true,
 })
 
 const loading = ref(false)
@@ -37,14 +38,9 @@ async function load() {
 
     loading.value = true
 
-    const startCodeIndex = props.modelValue.tokens.findIndex((t) => t.value === '\n')
+    if (!model.value.isComponent()) return
 
-    const code = props.modelValue.tokens
-        .slice(startCodeIndex + 1, props.modelValue.tokens.length - 2)
-        .map((t) => t.value)
-        .join('')
-
-    const nodes = parser.toNodes(code)
+    const nodes = parser.toNodes(model.value.body)
 
     const toExportNames = [] as string[]
 
@@ -67,11 +63,72 @@ async function load() {
     loading.value = false
 }
 
-watch(() => props.modelValue, load, {
+watch(() => model.value, load, {
     immediate: true,
 })
+
+// edit
+
+const dialog = ref(false)
+const text = ref('')
+
+const keys = useMagicKeys()
+
+function save() {
+    const payload = [':: setup', text.value, '', '::', ''].join('\n')
+
+    const tokens = parser.toTokens(payload)
+
+    // remove eof
+    tokens.pop()
+
+    const node = new NodeWithId(model.value.id, {
+        ...model.value,
+        tokens,
+    })
+
+    if (node.isComponent()) {
+        node.name = 'setup'
+        node.body = text.value
+    }
+
+    model.value = node
+
+    dialog.value = false
+
+    load()
+}
+
+whenever(keys.Alt_S, () => {
+    dialog.value = !dialog.value
+})
+
+watch(dialog, (v) => {
+    if (!v) return
+
+    text.value = model.value.isComponent() ? model.value.body : ''
+})
 </script>
 
 <template>
-    <div class="hidden"></div>
+    <v-dialog v-model="dialog">
+        <v-card width="800" height="500" color="b-secondary">
+            <v-card-head padding>
+                <v-card-title>
+                    {{ $t('editEntity', [$t('block')]) }}
+                </v-card-title>
+
+                <div class="ml-auto flex gap-x-4">
+                    <v-btn color="danger" @click="dialog = false">
+                        {{ $t('cancel') }}
+                    </v-btn>
+
+                    <v-btn @click="save">
+                        {{ $t('save') }}
+                    </v-btn>
+                </div>
+            </v-card-head>
+            <MonacoEditor v-model="text" language="javascript" autofocus />
+        </v-card>
+    </v-dialog>
 </template>

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

@@ -6,6 +6,9 @@ import MParagraph from './MParagraph.vue'
 import MSetup from './MSetup.vue'
 import MComponent from './MComponent.vue'
 import { provideNodeEditor } from '../composable/node-editor'
+import { NodeType } from '@language-kit/markdown'
+import { Token, TokenType } from '@language-kit/lexer'
+import { Icon } from '@iconify/vue'
 
 const nodes = defineModel({
     type: Array as PropType<NodeWithId[]>,
@@ -16,34 +19,101 @@ const emit = defineEmits(['change'])
 
 const editor = provideNodeEditor()
 
-function shouldHide(node: NodeWithId) {
+function isSetupNode(node: NodeWithId) {
     if (!node.isComponent()) return
 
     return node.name === 'setup'
 }
 
-function isSetup(node: NodeWithId) {
-    if (!node.isComponent()) return
+function findNodeSetup() {
+    return nodes.value.find(isSetupNode)
+}
 
-    return node.name === 'setup'
+function findStartNode() {
+    const setupNode = findNodeSetup()
+
+    if (!setupNode) return nodes.value[0]
+
+    const setupIndex = nodes.value.indexOf(setupNode)
+
+    return nodes.value.find((n, i) => {
+        if (i <= setupIndex) return false
+
+        return n.tokens.find((t) => t.type !== TokenType.BreakLine)
+    })
 }
 
 function updateNode(index: number, node: NodeWithId) {
     nodes.value.splice(index, 1, node)
 
     emit('change', nodes.value)
 }
+
+// Hidden blocks
+
+const hiddenIds = ref<string[]>([])
+
+function setHideIds() {
+    hiddenIds.value = []
+
+    const startNode = findStartNode()
+
+    if (!startNode) return
+
+    const startNodeIndex = nodes.value.indexOf(startNode)
+
+    if (startNodeIndex === -1) return
+
+    nodes.value.forEach((n, index) => {
+        if (index < startNodeIndex) {
+            hiddenIds.value.push(n.id)
+        }
+    })
+}
+
+watch(nodes, setHideIds, {
+    immediate: true,
+})
+
+// handle errors
+
+const error = ref<Error | null>(null)
+
+watch(nodes, () => {
+    error.value = null
+})
+
+onErrorCaptured((err) => {
+    error.value = err
+})
 </script>
 <template>
-    <div class="h-full overflow-auto pb-80 border-l border-b-secondary/25">
+    <div
+        v-if="error"
+        class="h-full w-full flex items-center justify-center border-l border-b-secondary/25"
+    >
+        <div class="text-center">
+            <div class="text-6xl text-danger mb-4">
+                <Icon icon="mdi:alert-circle-outline" class="mx-auto" />
+            </div>
+            <div class="text-2xl font-bold">
+                {{ $t('errors.errorRenderingBlocks') }}
+            </div>
+            <div class="text-1xl text-danger">
+                {{ error.message }}
+            </div>
+        </div>
+    </div>
+
+    <div v-else 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="hiddenIds.includes(node.id) ? 'hidden' : ''"
             class="w-full"
         >
             <MSetup
-                v-if="isSetup(node)"
+                v-if="isSetupNode(node)"
                 :model-value="node"
                 @update:model-value="updateNode(index, $event)"
             />