Missing functions inside useMonaco

prd-nhan-ho commented 5 months ago

Screenshot 2024-04-11 at 14 54 40

I console.log the editor property in useMonaco and some functions relating to model handling like setModel,... are not there. Any guess?

imguolao commented 5 months ago

You can read documentation of monaco-editor

The functions exist in the editor instance, not monaco instance.

editor.IStandaloneCodeEditor.setModel(model: ITextModel): void

prd-nhan-ho commented 5 months ago

Screenshot 2024-04-11 at 15 32 34

Correct me if I'm wrong, but I think it is editor instance

You can read documentation of monaco-editor

The functions exist in the editor instance, not monaco instance.
editor.IStandaloneCodeEditor.setModel(model: ITextModel): void

imguolao commented 5 months ago

Please read the documentation carefully, guy.

// The `useMonaco` funtion return a `monaco` instance.
const { monacoRef, unload } = useMonaco()

// Creating an `editor` instance, and the `setModel` function is here.
const editor = monacoRef.value.editor.create(...)

prd-nhan-ho commented 5 months ago

I just find out that the setModel function is inside monacoInstance, not in editorInstance. Here is the console.log result.

Screenshot 2024-04-11 at 16 00 04

imguolao commented 5 months ago

well, I'm glad you found it. Maybe we're having some communication problems.

You can try the following code that copy in a local html file and open it to get the log results.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UMD Example</title>
  <script src="https://unpkg.com/vue@3.3.7/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vue-demi@0.14.6/lib/index.iife.js"></script>
  <script src="https://unpkg.com/@monaco-editor/loader@1.4.0/lib/umd/monaco-loader.js"></script>
  <script src="https://unpkg.com/@guolao/vue-monaco-editor@1.4.0/lib/umd/monaco-vue.js"></script>
  <style>
    html,
    body,
    #app {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- Will render here -->
  </div>
</body>

  <script>
    const { createApp, ref, shallowRef } = Vue
    const { VueMonacoEditor } = monaco_vue

    const app = createApp({
      components: {
        VueMonacoEditor,
      },

      template: `
        <vue-monaco-editor
          @mount="handleMount"
        />
      `,

      setup() {
        const handleMount = (editor, monaco) => {
          // ƒ setModel(te=null){...}
          console.log(editor.setModel)

          // undefined
          console.log(monaco.editor.setModel)
        }

        return {
          handleMount,
        }
      }
    })

    app.mount('#app')
</script>
</html>

imguolao / monaco-vue

Missing functions inside useMonaco #52