feat(repl): getEditorInstance, getMonacoEditor (expose) (#364)

Author: wangcch

src/Repl.vue

@@ -5,6 +5,7 @@ import { type Store, useStore } from './store'
 import { computed, provide, toRefs, useTemplateRef } from 'vue'
 import {
   type EditorComponentType,
+  type EditorMethods,
   injectKeyPreviewRef,
   injectKeyProps,
 } from './types'
@@ -73,6 +74,7 @@ if (!props.editor) {
 }
 
 const outputRef = useTemplateRef('output')
+const editorContainerRef = useTemplateRef('editorContainer')
 
 props.store.init()
 
@@ -95,14 +97,19 @@ function reload() {
   outputRef.value?.reload()
 }
 
-defineExpose({ reload })
+defineExpose({
+  reload,
+  getEditorInstance: (() =>
+    editorContainerRef.value?.getEditorIns()) as EditorMethods['getEditorIns'],
+  getMonacoEditor: () => editorContainerRef.value?.getMonacoEditor?.(),
+})
 </script>
 
 <template>
   <div class="vue-repl">
     <SplitPane :layout="layout">
       <template #[editorSlotName]>
-        <EditorContainer :editor-component="editor" />
+        <EditorContainer ref="editorContainer" :editor-component="editor" />
       </template>
       <template #[outputSlotName]>
         <Output

src/codemirror/CodeMirror.vue

@@ -99,6 +99,10 @@ onMounted(() => {
     { immediate: true },
   )
 })
+
+defineExpose({
+  getEditorIns: () => editor,
+})
 </script>
 
 <style>

src/editor/CodeMirrorEditor.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import CodeMirror, { type Props } from '../codemirror/CodeMirror.vue'
-import { computed } from 'vue'
-import type { EditorEmits, EditorProps } from '../types'
+import { computed, useTemplateRef } from 'vue'
+import type { EditorEmits, EditorMethods, EditorProps } from '../types'
 
 defineOptions({
   editorType: 'codemirror',
@@ -10,6 +10,8 @@ defineOptions({
 const props = defineProps<EditorProps>()
 const emit = defineEmits<EditorEmits>()
 
+const codeMirrorRef = useTemplateRef('codeMirror')
+
 const onChange = (code: string) => {
   emit('change', code)
 }
@@ -36,10 +38,16 @@ const activeMode = computed(() => {
   const mode = modes[forcedMode || filename.split('.').pop()!]
   return filename.lastIndexOf('.') !== -1 && mode ? mode : modes.js
 })
+
+defineExpose({
+  getEditorIns: (() =>
+    codeMirrorRef.value?.getEditorIns()) as EditorMethods['getEditorIns'],
+})
 </script>
 
 <template>
   <CodeMirror
+    ref="codeMirror"
     :value="value"
     :mode="activeMode"
     :readonly="readonly"

src/editor/EditorContainer.vue

@@ -2,9 +2,13 @@
 import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
 import { debounce } from '../utils'
-import { inject, ref, watch } from 'vue'
+import { inject, ref, useTemplateRef, watch } from 'vue'
 import ToggleButton from './ToggleButton.vue'
-import { type EditorComponentType, injectKeyProps } from '../types'
+import {
+  type EditorComponentType,
+  type EditorMethods,
+  injectKeyProps,
+} from '../types'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
 
@@ -14,6 +18,7 @@ const props = defineProps<{
 
 const { store, autoSave, editorOptions } = inject(injectKeyProps)!
 const showMessage = ref(getItem())
+const editorRef = useTemplateRef<EditorMethods>('editor')
 
 const onChange = debounce((code: string) => {
   store.value.activeFile.code = code
@@ -25,18 +30,25 @@ function setItem() {
 
 function getItem() {
   const item = localStorage.getItem(SHOW_ERROR_KEY)
-  return !(item === 'false')
+  return item !== 'false'
 }
 
 watch(showMessage, () => {
   setItem()
 })
+
+defineExpose({
+  getEditorIns: (() =>
+    editorRef.value?.getEditorIns?.()) as EditorMethods['getEditorIns'],
+  getMonacoEditor: () => editorRef.value?.getMonacoEditor?.(),
+})
 </script>
 
 <template>
   <FileSelector />
   <div class="editor-container">
     <props.editorComponent
+      ref="editor"
       :value="store.activeFile.code"
       :filename="store.activeFile.filename"
       @change="onChange"

src/editor/MonacoEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Monaco from '../monaco/Monaco.vue'
-import type { EditorEmits, EditorProps } from '../types'
+import type { EditorEmits, EditorMethods, EditorProps } from '../types'
+import { useTemplateRef } from 'vue'
 
 defineProps<EditorProps>()
 const emit = defineEmits<EditorEmits>()
@@ -9,13 +10,22 @@ defineOptions({
   editorType: 'monaco',
 })
 
+const monacoRef = useTemplateRef('monaco')
+
 const onChange = (code: string) => {
   emit('change', code)
 }
+
+defineExpose({
+  getEditorIns: (() =>
+    monacoRef.value?.getEditorIns()) as EditorMethods['getEditorIns'],
+  getMonacoEditor: () => monacoRef.value?.getMonacoEditor(),
+})
 </script>
 
 <template>
   <Monaco
+    ref="monaco"
     :filename="filename"
     :value="value"
     :readonly="readonly"

src/monaco/Monaco.vue

@@ -169,6 +169,11 @@ onMounted(() => {
 onBeforeUnmount(() => {
   editor.value?.dispose()
 })
+
+defineExpose({
+  getEditorIns: () => editor.value,
+  getMonacoEditor: () => monaco.editor,
+})
 </script>
 
 <template>

src/types.ts

@@ -1,5 +1,7 @@
 import type { Component, ComputedRef, InjectionKey, ToRefs } from 'vue'
 import { Props } from './Repl.vue'
+import type * as monaco from 'monaco-editor-core'
+import type CodeMirror from 'codemirror'
 
 export type EditorMode = 'js' | 'css' | 'ssr'
 export interface EditorProps {
@@ -11,6 +13,16 @@ export interface EditorProps {
 export interface EditorEmits {
   (e: 'change', code: string): void
 }
+
+export interface EditorMethods {
+  getEditorIns<T extends 'monaco' | 'codemirror' = 'monaco'>():
+    | (T extends 'codemirror'
+        ? CodeMirror.Editor
+        : monaco.editor.IStandaloneCodeEditor)
+    | undefined
+  getMonacoEditor?(): typeof monaco.editor | undefined
+}
+
 export type EditorComponentType = Component<EditorProps>
 
 export type OutputModes = 'preview' | 'ssr output' | EditorMode