feat(repl): `getEditorInstance`, `getMonacoEditor` (expose)

[wangcch]

close https://github.com/vuejs/repl/issues/335

Repl methods getEditorInstance: get monaco/codemirror editor instance getMonacoEditor: get editor from monaco-editor-core

export interface EditorMethods {
  getEditorIns<T extends 'monaco' | 'codemirror' = 'monaco'>():
    | (T extends 'codemirror'
        ? CodeMirror.Editor
        : monaco.editor.IStandaloneCodeEditor)
    | undefined
  getMonacoEditor?(): typeof monaco.editor | undefined
}

usage

onMounted(() => {
  const editor = repl.value?.getEditorInstance<'monaco'>()
  const monacoEditor = repl.value?.getMonacoEditor()

  monacoEditor?.defineTheme('my-dark', {
    base: 'vs-dark',
    inherit: true,
    rules: [],
    colors: {
      'editor.background': '#ff0000',
    },
  })

  editor?.updateOptions({
    theme: 'my-dark',
  })
})

<script setup lang="ts">
const repl = useTemplateRef('repl')
</script>

<template>
  <Repl ref="repl" />
</template>

const repl = ref<InstanceType<typeof Repl>>()

[vercel[bot]]

@wangcch is attempting to deploy a commit to the vuejs Team on Vercel.

A member of the Team first needs to authorize it.

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/@vue/repl@364

commit: d0c2d2d