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,