feat(editor): components suggestions inside monaco (#21)

Author: farnabaz

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: {
@@ -13,15 +15,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)
   }
 })
@@ -35,6 +40,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)
@@ -52,6 +58,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 +78,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/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
+  }>()
 })

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>>

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

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'],
+  },
+}

src/app/src/types/index.ts

@@ -2,6 +2,7 @@ import type { StudioUser } from './user'
 import type { DatabaseItem } from './database'
 import type { RouteLocationNormalized } from 'vue-router'
 import type { MediaItem } from './media'
+import { ComponentMeta } from './components'
 
 export * from './item'
 export * from './draft'
@@ -12,8 +13,12 @@ export * from './tree'
 export * from './github'
 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
@@ -52,7 +57,7 @@ export interface StudioHost {
   }
 }
 
-export type UseStudioHost = (user: StudioUser) => StudioHost
+export type UseStudioHost = () => StudioHost
 
 declare global {
   interface Window {

src/app/src/utils/monaco.ts renamed to 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