integrate for frontmatter

Author: larbish

src/app/src/components/shared/form/FormPanelInput.vue

@@ -84,7 +84,7 @@ function computeValue(formItem: FormItem): unknown {
     :label="label"
     :ui="{
       root: 'w-full mt-2',
-      label: 'text-xs font-semibold tracking-tight',
+      label: 'text-xs font-medium tracking-tight',
     }"
   >
     <UInput

src/app/src/components/shared/form/FormPanelSection.vue

@@ -24,17 +24,15 @@ const childrenCount = computed(() => {
     class="w-full group/collapsible"
     :default-open="true"
   >
-    <div
-      class="flex items-center gap-2 w-full py-2"
-    >
+    <div class="flex items-center gap-2 w-full mt-3">
       <div class="flex items-center justify-center size-4 rounded bg-gray-100 dark:bg-gray-800 transition-colors duration-200 group-hover/collapsible:bg-gray-200 dark:group-hover/collapsible:bg-gray-700">
         <UIcon
           name="i-lucide-chevron-right"
           class="size-2.5 text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
         />
       </div>
       <div class="flex gap-2 items-center">
-        <span class="font-semibold text-gray-900 dark:text-gray-100 tracking-tight">
+        <span class="text-xs font-semibold text-gray-900 dark:text-gray-100 tracking-tight">
           {{ formItem.title }}
         </span>
         <UBadge
@@ -43,13 +41,13 @@ const childrenCount = computed(() => {
           size="xs"
           class="text-muted"
         >
-          {{ childrenCount }} child{{ childrenCount === 1 ? '' : 'ren' }}
+          {{ childrenCount }} propert{{ childrenCount === 1 ? 'y' : 'ies' }}
         </UBadge>
       </div>
     </div>
 
     <template #content>
-      <div class="mt-1 ml-5 pl-4 border-l border-gray-200 dark:border-gray-700/50 space-y-0.5">
+      <div class="mt-1 ml-3 pl-3 border-l border-gray-200 dark:border-gray-700/50 space-y-0.5">
         <FormPanelSection
           v-for="childKey in Object.keys(formItem.children)"
           :key="formItem.children[childKey].id"

src/app/src/components/shared/item/ItemActionsToolbar.vue

@@ -4,7 +4,7 @@ import { useStudio } from '../../../composables/useStudio'
 import { useStudioState } from '../../../composables/useStudioState'
 import type { StudioAction } from '../../../types'
 import { StudioItemActionId, TreeStatus } from '../../../types'
-import { MEDIA_EXTENSIONS, getFileExtension } from '../../../utils/file'
+import { MEDIA_EXTENSIONS } from '../../../utils/file'
 import type { DropdownMenuItem } from '@nuxt/ui/runtime/components/DropdownMenu.vue.d.ts'
 import { useI18n } from 'vue-i18n'
 
@@ -33,12 +33,10 @@ const extraActions = computed<DropdownMenuItem[]>(() => {
   const actions: DropdownMenuItem[] = []
 
   if (item.value.type === 'file') {
-    const fileExtension = getFileExtension(item.value.fsPath)
-    const isMarkdown = fileExtension === 'md'
     const isConflictDetected = context.activeTree.value.draft.current.value?.conflict
 
     // Add editor mode switch for markdown files
-    if (isMarkdown && !isConflictDetected) {
+    if (!isConflictDetected) {
       actions.push({
         label: preferences.value.editorMode === 'code'
           ? t('studio.actions.labels.switchToTipTap')

src/app/src/components/tiptap/extension/TiptapExtensionFrontmatter.vue

@@ -1,55 +1,31 @@
 <script setup lang="ts">
 import { nodeViewProps, NodeViewWrapper, NodeViewContent } from '@tiptap/vue-3'
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { useStudio } from '../../../composables/useStudio'
-import { useMonaco } from '../../../composables/useMonaco'
-import { jsonToYaml, yamlToJson } from '../../../utils/data'
+import type { Draft07 } from '@nuxt/content'
 
 const nodeProps = defineProps(nodeViewProps)
 
-const { ui } = useStudio()
+const { host, documentTree } = useStudio()
 
-const editorRef = ref<HTMLElement>()
 const collapsed = ref(true)
-const loadingMonaco = ref(true)
 
 const textColor = computed(() => collapsed.value ? 'text-muted group-hover/header:text-default' : 'text-default')
 
-const frontmatter = computed({
+const collection = computed(() => {
+  const currentItem = documentTree.currentItem.value
+  if (!currentItem?.fsPath) return null
+  return host.collection.getByFsPath(currentItem.fsPath)
+})
+
+const frontmatterJSON = computed({
   get: () => {
-    return jsonToYaml(nodeProps.node.attrs.frontmatter)
+    return nodeProps.node.attrs.frontmatter || {}
   },
   set: (value) => {
-    return nodeProps.updateAttributes({ frontmatter: yamlToJson(value) })
+    nodeProps.updateAttributes({ frontmatter: value })
   },
 })
-
-let monaco: ReturnType<typeof useMonaco> | null = null
-watch(collapsed, async (isCollapsed) => {
-  if (isCollapsed) {
-    return
-  }
-
-  if (!monaco) {
-    monaco = useMonaco(editorRef, {
-      language: 'yaml',
-      initialContent: frontmatter.value,
-      readOnly: false,
-      colorMode: ui.colorMode,
-      onChange(value: string) {
-        frontmatter.value = value
-      },
-    })
-
-    loadingMonaco.value = false
-  }
-})
-
-watch(frontmatter, () => {
-  if (monaco) {
-    monaco.setContent(frontmatter.value || '')
-  }
-})
 </script>
 
 <template>
@@ -87,13 +63,16 @@ watch(frontmatter, () => {
         v-show="!collapsed"
         :min-height="100"
         :max-height="500"
-        :initial-height="100"
+        :initial-height="270"
         class="mt-1 border-l-2 shadow-xs border-dashed border-muted bg-muted/30 overflow-hidden"
       >
-        <div
-          ref="editorRef"
-          class="w-full h-full overflow-hidden"
-        />
+        <div class="px-4 pt-2 pb-4 overflow-y-auto h-full">
+          <FormSchemaBased
+            v-model="frontmatterJSON"
+            :collection-name="collection!.name"
+            :schema="collection!.schema as Draft07"
+          />
+        </div>
       </ResizableElement>
     </div>
     <NodeViewContent />