feat: monaco editor [KHCP-11390]

package.json

@@ -73,6 +73,7 @@
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-textual-uml": "^0.17.1",
     "mermaid": "^10.7.0",
+    "monaco-editor": "^0.47.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

sandbox/App.vue

@@ -54,7 +54,7 @@ const frontmatterUpdated = (frontmatter: Record<string, any> | undefined) => {
   console.log('frontmatter updated', frontmatter)
 }
 
-const mode = ref<string>('read')
+const mode = ref<string>('split')
 const modeChanged = (m: string) => {
   mode.value = m
   if (mode.value === 'edit' || mode.value === 'split') {

sandbox/index.ts

@@ -1,5 +1,32 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import * as monaco from 'monaco-editor'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+// @ts-ignore
+self.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === 'json') {
+      return new JsonWorker()
+    }
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new CssWorker()
+    }
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      return new HtmlWorker()
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new TsWorker()
+    }
+    return new EditorWorker()
+  },
+}
+
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
 
 const app = createApp(App)
 

src/components/MarkdownUi.vue

@@ -54,7 +54,7 @@
         class="markdown-editor"
         data-testid="markdown-editor"
       >
-        <textarea
+        <!-- <textarea
           :id="textareaId"
           ref="textarea"
           autocapitalize="off"
@@ -68,6 +68,15 @@
           translate="no"
           :value="rawMarkdown"
           @input="$event => onContentEdit($event as any)"
+        /> -->
+        <div
+          :id="textareaId"
+          class="markdown-editor-textarea"
+          :class="[scrollableClass]"
+          data-testid="markdown-editor-textarea"
+          placeholder="Begin editing..."
+          spellcheck="false"
+          translate="no"
         />
       </div>
       <div
@@ -166,6 +175,7 @@ import { KUI_FONT_FAMILY_TEXT, KUI_FONT_FAMILY_CODE, KUI_SPACE_60, KUI_BREAKPOIN
 import { EditIcon, DownloadIcon } from '@kong/icons'
 import MermaidJs from 'mermaid'
 import type { MarkdownItEnv } from '@mdit-vue/types'
+import * as monaco from 'monaco-editor'
 
 const props = defineProps({
   /** The markdown content */
@@ -235,6 +245,7 @@ const emit = defineEmits<{
 
 // Initialize template refs
 const textarea = ref<HTMLTextAreaElement | null>(null)
+let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null
 const markdownComponent = ref<HTMLDivElement | null>(null)
 
 const { init: initMarkdownIt, md } = composables.useMarkdownIt()
@@ -255,7 +266,7 @@ const activeTheme = computed(():Theme => props.theme ? props.theme : (preferredC
 // props.editable will override the `props.mode`
 const currentMode = ref<MarkdownMode>(['edit', 'split', 'preview'].includes(props.mode) && props.editable ? props.mode : 'read')
 // Is fullscreen enabled
-const isFullscreen = ref<boolean>(false)
+const isFullscreen = ref<boolean>(true)
 // When true, show the HTML preview instead of the rendered markdown preview
 const htmlPreview = ref<boolean>(false)
 
@@ -299,6 +310,12 @@ watch(currentMode, async (mode: MarkdownMode): Promise<void> => {
 
   // Re-synchronize the scroll containers
   initializeSyncScroll()
+
+  monacoEditor?.dispose()
+
+  if (['edit', 'split'].includes(mode)) {
+    initMonacoEditor()
+  }
 })
 
 // Get rendered markdown
@@ -526,6 +543,26 @@ const copyCodeBlock = async (e: any): Promise<void> => {
 // Initialize keyboard shortcuts; they will only fire in edit mode when the textarea is active
 composables.useKeyboardShortcuts(textarea, rawMarkdown, tabSize, emulateInputEvent)
 
+const initMonacoEditor = (): void => {
+  // Create Monaco editor
+  monacoEditor = monaco.editor.create(document.getElementById(textareaId.value)!, {
+    value: rawMarkdown.value,
+    language: 'markdown',
+    theme: 'vs-dark', // 'vs' (default), 'vs-dark', 'hc-black'
+  })
+
+  // Update code ref when editor value changes
+  monacoEditor.onDidChangeModelContent(() => {
+    const event: TextAreaInputEvent = {
+      target: {
+        value: monacoEditor!.getValue(),
+      },
+    }
+    onContentEdit(event)
+    console.log('changed', event)
+  })
+}
+
 onMounted(async () => {
   // Initialize markdown-it
   await initMarkdownIt(activeTheme.value)
@@ -546,6 +583,10 @@ onMounted(async () => {
     // Synchronize the scroll containers
     initializeSyncScroll()
   }
+
+  if (['edit', 'split'].includes(currentMode.value)) {
+    initMonacoEditor()
+  }
 })
 
 onUnmounted(() => {
@@ -724,7 +765,8 @@ const markdownPanesMaxHeight = computed((): string => `${props.maxHeight}px`)
     flex-direction: column;
   }
 
-  textarea.markdown-editor-textarea {
+  // textarea.markdown-editor-textarea {
+  .markdown-editor-textarea {
     -webkit-appearance: none; // need this to allow box-shadow to apply on mobile
     appearance: none;
     background-color: var(--kui-color-background, $kui-color-background);
@@ -786,11 +828,13 @@ const markdownPanesMaxHeight = computed((): string => `${props.maxHeight}px`)
     }
 
     .markdown-preview,
-    textarea.markdown-editor-textarea {
+    // textarea.markdown-editor-textarea {
+    .markdown-editor-textarea {
       background-color: var(--kui-color-background-neutral-stronger, color.adjust($kui-color-background-neutral-strongest, $lightness: 5%));
     }
 
-    textarea.markdown-editor-textarea {
+    // textarea.markdown-editor-textarea {
+    .markdown-editor-textarea {
       color: var(--kui-color-text-inverse, $kui-color-text-inverse);
 
       &:hover,