Merge branch 'main' into feat/duplicate-rename-actions

Author: larbish

playground/docus/nuxt.config.ts

@@ -17,4 +17,12 @@ export default defineNuxtConfig({
     },
   },
   compatibilityDate: '2025-08-26',
+  contentStudio: {
+    repository: {
+      owner: 'nuxt-content',
+      repo: 'studio',
+      branch: 'edit-preview',
+      rootDir: 'playground/docus',
+    },
+  },
 })

src/app/src/components/panel/base/PanelBaseBodyEditor.vue

@@ -8,6 +8,11 @@ defineProps({
     type: Object as PropType<DraftItem>,
     required: true,
   },
+  readOnly: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const { context } = useStudio()
@@ -17,9 +22,11 @@ const { context } = useStudio()
   <PanelContentEditor
     v-if="context.feature.value === StudioFeature.Content"
     :draft-item="draftItem"
+    :read-only="readOnly"
   />
   <PanelMediaEditor
     v-else
     :draft-item="draftItem"
+    :read-only="readOnly"
   />
 </template>

src/app/src/components/panel/base/PanelBaseFooter.vue

@@ -6,15 +6,30 @@ const { ui, host } = useStudio()
 
 const uiConfig = ui.config
 const user = host.user.get()
+const repositoryUrl = computed(() => {
+  switch (host.repository.provider) {
+    case 'github':
+      return `https://github.com/${host.repository.owner}/${host.repository.repo}/tree/${host.repository.branch}`
+    default:
+      return ''
+  }
+})
 
 const userMenuItems = computed(() => [
-  {
+  [{
+    label: 'Open Repository',
+    icon: 'i-lucide-github',
+    onClick: () => {
+      window.open(repositoryUrl.value, '_blank')
+    },
+  }],
+  [{
     label: 'Sign out',
     icon: 'i-lucide-log-out',
     onClick: () => {
       alert('TODO: delete cookie manually')
     },
-  },
+  }],
 ])
 </script>
 

src/app/src/components/panel/base/PanelBaseHeader.vue

@@ -3,7 +3,7 @@ import { useStudio } from '../../../composables/useStudio'
 import { StudioFeature } from '../../../types'
 import { ROOT_ITEM } from '../../../utils/tree'
 
-const { ui, context, documentTree, mediaTree } = useStudio()
+const { ui, git, context, documentTree, mediaTree, draftDocuments, draftMedias } = useStudio()
 
 const features = [{
   label: 'Content',
@@ -28,6 +28,16 @@ const features = [{
     ui.openPanel(StudioFeature.Media)
   },
 }]
+
+async function publishFiles() {
+  const files = await Promise.all([
+    draftDocuments.generateRawFiles(),
+    draftMedias.generateRawFiles(),
+  ]).then(([documents, medias]) => ([...documents, ...medias]))
+
+  const message = window.prompt('Enter a commit message')
+  await git.commitFiles(files, message || 'Publish files')
+}
 </script>
 
 <template>
@@ -46,6 +56,7 @@ const features = [{
         color="primary"
         variant="solid"
         size="sm"
+        @click="publishFiles"
       />
       <!-- <USeparator
         orientation="vertical"

src/app/src/components/panel/content/editor/PanelContentEditor.vue

@@ -10,6 +10,11 @@ const props = defineProps({
     type: Object as PropType<DraftItem>,
     required: true,
   },
+  readOnly: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const { draftDocuments } = useStudio()
@@ -38,6 +43,10 @@ const document = computed<DatabasePageItem>({
     return result
   },
   set(value) {
+    if (props.readOnly) {
+      return
+    }
+
     draftDocuments.update(props.draftItem.id, {
       ...toRaw(document.value as DatabasePageItem),
       ...toRaw(value),
@@ -51,6 +60,7 @@ const document = computed<DatabasePageItem>({
     <PanelContentEditorCode
       v-model="document"
       :draft-item="draftItem"
+      :read-only="readOnly"
     />
   </div>
   <!-- <MDCEditorAST v-model="document" /> -->

src/app/src/components/panel/content/editor/PanelContentEditorCode.vue

@@ -1,27 +1,37 @@
 <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: {
     type: Object as PropType<DraftItem>,
     required: true,
   },
+  readOnly: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 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)
   }
 })
@@ -35,10 +45,24 @@ 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)
+  editor.value = monaco.createEditor(editorRef.value, {
+    readOnly: props.readOnly,
+    scrollbar: props.readOnly
+      ? {
+          vertical: 'hidden',
+          horizontal: 'hidden',
+          handleMouseWheel: false,
+        }
+      : undefined,
+  })
   editor.value.onDidChangeModelContent(() => {
+    if (props.readOnly) {
+      return
+    }
+
     // Do not trigger model updates if the document id has changed
     if (currentDocumentId.value !== document.value?.id) {
       return
@@ -52,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,
@@ -68,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

src/app/src/composables/useContext.ts

@@ -76,7 +76,7 @@ export const useContext = createSharedComposable((
     },
     [StudioItemActionId.DeleteItem]: async (id: string) => {
       modal.openConfirmActionModal(id, StudioItemActionId.DeleteItem, async () => {
-        const ids: string[] = findDescendantsFileItemsFromId(tree.root.value, id).map(item => item.id)
+        const ids = findDescendantsFileItemsFromId(tree.root.value, id).map(item => item.id)
         await draft.value.remove(ids)
         await tree.selectParentById(id)
       })

src/app/src/composables/useDraftDocuments.ts

@@ -1,18 +1,19 @@
 import { createStorage } from 'unstorage'
 import indexedDbDriver from 'unstorage/drivers/indexedb'
 import { ref } from 'vue'
-import type { DatabaseItem, DraftItem, StudioHost, GithubFile, DatabasePageItem } from '../types'
+import type { DatabaseItem, DraftItem, StudioHost, GithubFile, DatabasePageItem, RawFile } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
 import { generateContentFromDocument } from '../utils/content'
 import { getDraftStatus, findDescendantsFromId } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
 import { stripNumericPrefix } from '../utils/string'
+import { joinURL } from 'ufo'
 
 const storage = createStorage({
   driver: indexedDbDriver({
-    dbName: 'nuxt-content-studio-document',
+    dbName: 'content-studio-document',
     storeName: 'drafts',
   }),
 })
@@ -41,7 +42,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     }
 
     const fsPath = host.document.getFileSystemPath(document.id)
-    const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+    const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
 
     const item: DraftItem<DatabaseItem> = {
       id: document.id,
@@ -119,7 +120,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
       }
       else {
       // TODO: check if gh file has been updated
-        const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+        const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
 
         deleteDraftItem = {
           id,
@@ -277,6 +278,21 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     select(draftItem)
   }
 
+  async function generateRawFiles(): Promise<RawFile[]> {
+    const files = [] as RawFile[]
+    for (const draftItem of list.value) {
+      if (draftItem.status === DraftStatus.Deleted) {
+        files.push({ path: joinURL('content', draftItem.fsPath), content: null, status: draftItem.status, encoding: 'utf-8' })
+        continue
+      }
+
+      const content = await generateContentFromDocument(draftItem.modified!)
+      files.push({ path: joinURL('content', draftItem.fsPath), content: content!, status: draftItem.status, encoding: 'utf-8' })
+    }
+
+    return files
+  }
+
   return {
     get,
     create,
@@ -290,5 +306,6 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     current,
     select,
     selectById,
+    generateRawFiles,
   }
 })

src/app/src/composables/useDraftMedias.ts

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { createStorage } from 'unstorage'
 import indexedDbDriver from 'unstorage/drivers/indexedb'
 import { joinURL, withLeadingSlash } from 'ufo'
-import type { DraftItem, StudioHost, GithubFile, MediaItem } from '../types'
+import type { DraftItem, StudioHost, GithubFile, MediaItem, RawFile } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
 import { getDraftStatus } from '../utils/draft'
@@ -11,7 +11,7 @@ import { useHooks } from './useHooks'
 
 const storage = createStorage({
   driver: indexedDbDriver({
-    dbName: 'nuxt-content-studio-media',
+    dbName: 'content-studio-media',
     storeName: 'drafts',
   }),
 })
@@ -34,7 +34,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     }
 
     const fsPath = host.media.getFileSystemPath(media.id)
-    const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+    const githubFile = await git.fetchFile(joinURL('public', fsPath), { cached: true }) as GithubFile
 
     const item: DraftItem = {
       id: media.id,
@@ -95,7 +95,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
       }
       else {
       // Fetch github file before creating draft to detect non deployed changes
-        const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+        const githubFile = await git.fetchFile(joinURL('public', fsPath), { cached: true }) as GithubFile
         const original = await host.media.get(id)
 
         const deleteItem: DraftItem = {
@@ -312,6 +312,21 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     })
   }
 
+  async function generateRawFiles(): Promise<RawFile[]> {
+    const files = [] as RawFile[]
+    for (const draftItem of list.value) {
+      if (draftItem.status === DraftStatus.Deleted) {
+        files.push({ path: joinURL('public', draftItem.fsPath), content: null, status: draftItem.status, encoding: 'base64' })
+        continue
+      }
+
+      const content = (await draftItem.modified?.raw as string).replace(/^data:\w+\/\w+;base64,/, '')
+      files.push({ path: joinURL('public', draftItem.fsPath), content, status: draftItem.status, encoding: 'base64' })
+    }
+
+    return files
+  }
+
   return {
     get,
     create,
@@ -326,5 +341,6 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     select,
     selectById,
     upload,
+    generateRawFiles,
   }
 })