fix: editor experience

package.json

@@ -15,8 +15,8 @@
       "default": "./dist/app/main.js"
     },
     "./app/utils": {
-      "types": "./dist/app/utils.d.ts",
-      "default": "./dist/app/utils.js"
+      "types": "./dist/app/shared.d.ts",
+      "default": "./dist/app/shared.js"
     },
     "./app/service-worker": {
       "types": "./dist/app/service-worker.d.ts",

src/app/src/components/content/ContentCardReview.vue

@@ -60,8 +60,6 @@ async function initializeEditor() {
       language: language.value,
       colorMode: ui.colorMode.value,
       editorOptions: {
-        // automatically adjust the layout of the editor
-        automaticLayout: true,
         // hide unchanged regions
         hideUnchangedRegions: {
           enabled: true,

src/app/src/composables/useMonacoDiff.ts

@@ -32,6 +32,7 @@ export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
       renderSideBySideInlineBreakpoint: 0,
       wordWrap: 'on',
       scrollBeyondLastLine: false,
+      automaticLayout: true,
       ...options.editorOptions,
     })
 

src/app/src/utils/draft.ts

@@ -3,6 +3,7 @@ import { DraftStatus, ContentFileExtension, TreeRootId } from '../types'
 import { isEqual } from './database'
 import { studioFlags } from '../composables/useStudio'
 import { generateContentFromDocument } from './content'
+import { fromBase64ToUTF8 } from '../utils/string'
 
 export async function checkConflict(draftItem: DraftItem<DatabaseItem | MediaItem>): Promise<ContentConflict | undefined> {
   if (draftItem.id.startsWith(TreeRootId.Media)) {
@@ -15,7 +16,7 @@ export async function checkConflict(draftItem: DraftItem<DatabaseItem | MediaIte
 
   if (draftItem.status === DraftStatus.Created && draftItem.githubFile) {
     return {
-      githubContent: atob(draftItem.githubFile.content!),
+      githubContent: fromBase64ToUTF8(draftItem.githubFile.content!),
       localContent: await generateContentFromDocument(draftItem.modified as DatabaseItem) as string,
     }
   }
@@ -26,7 +27,7 @@ export async function checkConflict(draftItem: DraftItem<DatabaseItem | MediaIte
   }
 
   const localContent = await generateContentFromDocument(draftItem.original as DatabaseItem) as string
-  const githubContent = atob(draftItem.githubFile.content)
+  const githubContent = fromBase64ToUTF8(draftItem.githubFile.content)
 
   if (localContent.trim() === githubContent.trim()) {
     return

src/app/src/utils/string.ts

@@ -0,0 +1,9 @@
+export function fromBase64ToUTF8(base64: string) {
+  const binary = atob(base64)
+  const len = binary.length
+  const bytes = new Uint8Array(len)
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binary.charCodeAt(i)
+  }
+  return new TextDecoder('utf-8').decode(bytes)
+}

src/app/vite.config.ts

@@ -61,7 +61,7 @@ export default defineConfig({
     cssCodeSplit: false,
     outDir: '../../dist/app',
     lib: {
-      entry: ['./src/main.ts', './src/utils.ts', './src/service-worker.ts'],
+      entry: ['./src/main.ts', './src/shared.ts', './src/service-worker.ts'],
       formats: ['es'],
     },
     sourcemap: false,

src/module/src/runtime/host.ts

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { ensure } from './utils/ensure'
 import type { CollectionItemBase, CollectionSource, DatabaseAdapter } from '@nuxt/content'
 import type { ContentDatabaseAdapter } from '../types/content'
-import { getCollectionByFilePath, generateIdFromFsPath, createCollectionDocument, generateRecordDeletion, generateRecordInsert, getCollectionInfo } from './utils/collection'
+import { getCollectionByFilePath, generateIdFromFsPath, createCollectionDocument, generateRecordDeletion, generateRecordInsert, getCollectionInfo, normalizeDocument } from './utils/collection'
 import { kebabCase } from 'scule'
 import type { StudioHost, StudioUser, DatabaseItem, MediaItem, Repository } from 'nuxt-studio/app'
 import type { RouteLocationNormalized, Router } from 'vue-router'
@@ -181,7 +181,9 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
 
     document: {
       get: async (id: string): Promise<DatabaseItem> => {
-        return useContentCollectionQuery(id.split('/')[0] as string).where('id', '=', id).first()
+        const item = await useContentCollectionQuery(id.split('/')[0] as string).where('id', '=', id).first()
+
+        return normalizeDocument(item as DatabaseItem)
       },
       getFileSystemPath: (id: string) => {
         return getCollectionInfo(id, useContentCollections()).fsPath

src/module/src/runtime/utils/collection.ts

@@ -137,6 +137,19 @@ export function createCollectionDocument(collection: CollectionInfo, id: string,
   return result
 }
 
+export function normalizeDocument(document: DatabaseItem) {
+  // `seo` is an auto-generated field in content module
+  // if `seo.title` and `seo.description` are same as `title` and `description`
+  // we can remove it to avoid duplication
+  if (document.seo) {
+    const seo = document.seo as Record<string, unknown>
+    if ((!seo.title || seo.title === document.title) && (!seo.description || seo.description === document.description)) {
+      Reflect.deleteProperty(document, 'seo')
+    }
+  }
+  return document
+}
+
 function computeValuesBasedOnCollectionSchema(collection: CollectionInfo, data: Record<string, unknown>) {
   const fields: string[] = []
   const values: Array<string | number | boolean> = []