Merge branch 'main' into feat/git-blob

larbish · larbish · commit 6e0c3431f78f · 2025-09-30T11:57:26.000+02:00
diff --git a/package.json b/package.json
@@ -41,28 +41,28 @@
     "@nuxt/eslint-config": "latest",
     "@nuxt/kit": "^4.1.2",
     "@nuxt/module-builder": "latest",
-    "@nuxt/ui": "4.0.0-alpha.2",
+    "@nuxt/ui": "4.0.0",
     "@octokit/types": "^15.0.0",
     "@tailwindcss/typography": "latest",
     "@vitejs/plugin-vue": "^6.0.1",
     "eslint": "^9.36.0",
-    "modern-monaco": "^0.2.1",
+    "modern-monaco": "^0.2.2",
     "nuxt-studio": "workspace:*",
-    "vite": "^7.1.6",
+    "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-libcss": "^1.1.2",
     "vitest": "^3.2.4",
-    "vue": "^3.5.21",
+    "vue": "^3.5.22",
     "vue-router": "^4.5.1",
-    "vue-tsc": "^3.0.7",
-    "zod": "^4.1.9"
+    "vue-tsc": "^3.1.0",
+    "zod": "^4.1.11"
   },
   "resolutions": {
     "@nuxt/content": "https://pkg.pr.new/@nuxt/content@22409fe",
     "@nuxtjs/mdc": "https://pkg.pr.new/@nuxtjs/mdc@61af819",
     "remark-mdc": "npm:remark-mdc-edge@3.6.0-29310522.024adeb"
   },
-  "packageManager": "pnpm@10.17.0",
+  "packageManager": "pnpm@10.17.1",
   "dependencies": {
     "@nuxtjs/mdc": "https://pkg.pr.new/@nuxtjs/mdc@61af819",
     "@nuxtlabs/monarch-mdc": "^0.8.1",
diff --git a/playground/docus/content/2.essentials/3.nested/1.components.md b/playground/docus/content/2.essentials/3.nested/1.components.md
diff --git a/playground/docus/content/2.essentials/3.nested/2.images-embeds.md b/playground/docus/content/2.essentials/3.nested/2.images-embeds.md
diff --git a/playground/docus/package.json b/playground/docus/package.json
@@ -6,7 +6,7 @@
     "build": "nuxt build --extends docus"
   },
   "dependencies": {
-    "docus": "https://pkg.pr.new/docus@db0ec99",
+    "docus": "^5.1.0",
     "better-sqlite3": "^12.2.0",
     "nuxt": "latest",
     "@nuxt/content": "latest",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/src/App.vue b/src/app/src/App.vue
@@ -23,7 +23,7 @@ function detectActiveDocuments() {
   })
 }
 
-async function onContentSelect(id: string) {
+async function editContentFile(id: string) {
   await documentTree.selectItemById(id)
   ui.openPanel(StudioFeature.Content)
 }
@@ -59,19 +59,20 @@ host.on.mounted(() => {
       >
         <UButton
           icon="i-lucide-panel-left-open"
-          size="lg"
-          color="primary"
-          class="shadow-lg"
+          size="sm"
+          color="neutral"
+          class="shadow"
           @click="ui.panels.content = true"
         />
         <UButton
           v-if="activeDocuments.length === 1"
-          icon="i-lucide-file-text"
-          size="lg"
+          icon="i-lucide-pen"
+          size="sm"
+          color="neutral"
           variant="outline"
-          label="Edit This Page"
-          class="shadow-lg bg-white hover:bg-gray-100"
-          @click="onContentSelect(activeDocuments[0].id)"
+          label="Edit this page"
+          class="shadow"
+          @click="editContentFile(activeDocuments[0].id)"
         />
       </div>
     </UApp>
diff --git a/src/app/src/components/panel/base/PanelBaseFooter.vue b/src/app/src/components/panel/base/PanelBaseFooter.vue
@@ -34,43 +34,47 @@ const userMenuItems = computed(() => [
 </script>
 
 <template>
-  <UFooter class="h-var(--ui-footer-height) sticky bottom-0 bg-white">
+  <UFooter
+    class="h-var(--ui-footer-height) sticky bottom-0 bg-white"
+    :ui="{ container: 'px-2 sm:px-2 lg:px-2', right: 'gap-0' }"
+  >
     <template #left>
       <UDropdownMenu
         :portal="false"
         :items="userMenuItems"
-        :ui="{ slots: { content: 'w-full' } }"
-        placeholder="Select a content"
+        :ui="{ content: 'w-full' }"
+        size="xs"
       >
         <UButton
           color="neutral"
           variant="ghost"
-          size="xs"
-        >
-          <UAvatar
-            :src="user?.avatar"
-            size="xs"
-          />
-          <span>{{ user?.name }}</span>
-        </UButton>
+          size="sm"
+          :avatar="{ src: user?.avatar, alt: user?.name, size: '2xs' }"
+          class="px-2 font-medium"
+          :label="user?.name"
+        />
       </UDropdownMenu>
     </template>
 
     <template #right>
-      <UTooltip :text="uiConfig.syncEditorAndRoute ? 'Disable synchronization between editor and host' : 'Enable synchronization between editor and host'">
+      <UTooltip
+        :text="uiConfig.syncEditorAndRoute ? 'Unlink editor and preview' : 'Link editor and preview'"
+        :delay-duration="0"
+      >
         <UButton
           icon="i-lucide-arrow-left-right"
-          variant="link"
-          :color="uiConfig.syncEditorAndRoute ? 'success' : 'neutral'"
-          size="md"
+          variant="ghost"
+          :color="uiConfig.syncEditorAndRoute ? 'info' : 'neutral'"
+          :class="!uiConfig.syncEditorAndRoute && 'opacity-50'"
+          size="sm"
           @click="uiConfig.syncEditorAndRoute = !uiConfig.syncEditorAndRoute"
         />
       </UTooltip>
       <UButton
         icon="i-lucide-panel-left-close"
-        variant="link"
+        variant="ghost"
         color="neutral"
-        size="md"
+        size="sm"
         @click="ui.closePanels()"
       />
     </template>
diff --git a/src/app/src/components/panel/content/editor/PanelContentEditorCode.vue b/src/app/src/components/panel/content/editor/PanelContentEditorCode.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref, shallowRef, watch } from 'vue'
 import type { DatabasePageItem, DraftItem } from '../../../../types'
+import { DraftStatus } from '../../../../types/draft'
 import type { PropType } from 'vue'
-import { setupMonaco, type Editor } from '../../../../utils/monaco'
+import { setupMonaco, setupSuggestion, type Editor } from '../../../../utils/monaco/index'
 import { generateContentFromDocument, generateDocumentFromContent, pickReservedKeysFromDocument } from '../../../../utils/content'
+import { useStudio } from '../../../../composables/useStudio'
 
 const props = defineProps({
   draftItem: {
@@ -18,15 +20,18 @@ const props = defineProps({
 })
 
 const document = defineModel<DatabasePageItem>()
+const { mediaTree, host } = useStudio()
 
 const editor = shallowRef<Editor.IStandaloneCodeEditor | null>(null)
 const editorRef = ref()
 const content = ref<string>('')
 const currentDocumentId = ref<string | null>(null)
+const localStatus = ref<DraftStatus>(props.draftItem.status)
 
 // Trigger on action events
-watch(() => props.draftItem.status, () => {
-  if (editor.value) {
+watch(() => props.draftItem.status, (newStatus) => {
+  if (editor.value && newStatus !== localStatus.value) {
+    localStatus.value = newStatus
     setContent(props.draftItem.modified as DatabasePageItem)
   }
 })
@@ -40,6 +45,7 @@ watch(() => document.value?.id, async () => {
 
 onMounted(async () => {
   const monaco = await setupMonaco()
+  setupSuggestion(monaco.monaco, host.meta.components(), mediaTree.root.value)
 
   // create a Monaco editor instance
   editor.value = monaco.createEditor(editorRef.value, {
@@ -70,6 +76,10 @@ onMounted(async () => {
     content.value = newContent
 
     generateDocumentFromContent(document.value!.id, content.value).then((doc) => {
+      // Update local status
+      localStatus.value = DraftStatus.Updated
+
+      // Update document
       document.value = {
         ...pickReservedKeysFromDocument(props.draftItem.original as DatabasePageItem || document.value!),
         ...doc,
@@ -86,7 +96,11 @@ function setContent(document: DatabasePageItem) {
     content.value = md || ''
 
     if (editor.value && editor.value.getModel()?.getValue() !== md) {
+      // Keep the cursor position
+      const position = editor.value.getPosition()
       editor.value.getModel()?.setValue(md || '')
+      // Restore the cursor position
+      position && editor.value.setPosition(position)
     }
 
     currentDocumentId.value = document.id
diff --git a/src/app/src/composables/useHooks.ts b/src/app/src/composables/useHooks.ts
@@ -2,5 +2,8 @@ import { createSharedComposable } from '@vueuse/core'
 import { createHooks } from 'hookable'
 
 export const useHooks = createSharedComposable(() => {
-  return createHooks()
+  return createHooks<{
+    'studio:draft:document:updated': () => void
+    'studio:draft:media:updated': () => void
+  }>()
 })
diff --git a/src/app/src/composables/useMonacoDiff.ts b/src/app/src/composables/useMonacoDiff.ts
@@ -1,7 +1,7 @@
 // import { computed, watch, unref } from 'vue'
 // import type { Ref } from 'vue'
 // import type { editor as Editor } from 'modern-monaco/editor-core'
-// import { setupMonaco, setupTheme, baseEditorOptions } from '../utils/monaco'
+// import { setupMonaco, setupTheme, baseEditorOptions } from '../utils/monaco/index'
 
 // export function useMonacoDiff(target: Ref, options: { original: string, modified: string, language: string, renderSideBySide?: boolean }) {
 //   let monaco: Awaited<ReturnType<typeof setupMonaco>>
diff --git a/src/app/src/composables/useMonacoMinimal.ts b/src/app/src/composables/useMonacoMinimal.ts
@@ -2,7 +2,7 @@
 // import type { editor as Editor } from 'modern-monaco/editor-core'
 // import type { Ref } from 'vue'
 // import { omit } from '../utils/object'
-// import { setupMonaco, setupTheme, baseEditorOptions } from '../utils/monaco'
+// import { setupMonaco, setupTheme, baseEditorOptions } from '../utils/monaco/index'
 
 // export function useMonacoMinimal(target: Ref, options: {
 //   code: string
diff --git a/src/app/src/index.ts b/src/app/src/index.ts
@@ -16,7 +16,10 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
       shadowRoot: true,
       configureApp(app) {
         const router = createRouter({
-          routes: [],
+          routes: [
+            // Dummy route
+            { path: '/', component: { template: '<div>Nuxt Studio Home</div>' } },
+          ],
           history: createWebHistory(),
         })
 
diff --git a/src/app/src/types/components.ts b/src/app/src/types/components.ts
@@ -0,0 +1,11 @@
+import type { ComponentData } from 'nuxt-component-meta'
+
+export interface ComponentMeta {
+  name: string,
+  path: string,
+  meta: {
+    props: ComponentData['meta']['props'],
+    slots: ComponentData['meta']['slots'],
+    events: ComponentData['meta']['events'],
+  },
+}
diff --git a/src/app/src/types/index.ts b/src/app/src/types/index.ts
@@ -3,6 +3,7 @@ import type { DatabaseItem } from './database'
 import type { RouteLocationNormalized } from 'vue-router'
 import type { MediaItem } from './media'
 import type { Repository } from './git'
+import type { ComponentMeta } from './components'
 
 export * from './item'
 export * from './draft'
@@ -13,8 +14,12 @@ export * from './tree'
 export * from './git'
 export * from './context'
 export * from './content'
+export * from './components'
 
 export interface StudioHost {
+  meta: {
+    components: () => ComponentMeta[]
+  }
   on: {
     routeChange: (fn: (to: RouteLocationNormalized, from: RouteLocationNormalized) => void) => void
     mounted: (fn: () => void) => void
diff --git a/src/app/src/utils/monaco/index.ts b/src/app/src/utils/monaco/index.ts
@@ -1,6 +1,7 @@
 import { createSingletonPromise } from '@vueuse/core'
 import type { editor as Editor } from 'modern-monaco/editor-core'
 
+export { setupSuggestion } from './mdc-compilation'
 export type { editor as Editor } from 'modern-monaco/editor-core'
 export type Monaco = Awaited<ReturnType<typeof import('modern-monaco')['init']>>
 
@@ -21,6 +22,7 @@ export const setupMonaco = createSingletonPromise(async () => {
   const monaco: Monaco = await init()
 
   return {
+    monaco,
     editor: monaco.editor,
     createEditor: ((domElement, options, override) => {
       // Inject the CSS bundle into the DOM
diff --git a/src/app/src/utils/monaco/mdc-compilation.ts b/src/app/src/utils/monaco/mdc-compilation.ts
diff --git a/src/module/src/runtime/composables/useMeta.ts b/src/module/src/runtime/composables/useMeta.ts
diff --git a/src/module/src/runtime/host.ts b/src/module/src/runtime/host.ts
