I successfully run the editor but when typing there is no code prompt that I want

[william-LK]

Describe the bug

I successfully ran the editor, but there was no code prompt when I entered it, as shown below.
I thought there should be console.log prompts and .push prompts, but there were none.

<div class="jsobject-wrap">
    <span>返回</span>
    <div>
      <div class="jsobject-header">
        <div class="jsobject-header-left">
          <a-input v-model:value="value"></a-input>
        </div>
        <div class="jsobject-header-right">
          <a-select
            class="jsobject-fn-select"
            v-model:value="selectJsObject"
            :options="options"
          ></a-select>
          <a-button class="run" type="primary" @click="runCode">运行</a-button>
        </div>
      </div>
      <div class="jsobject-content">
        <div class="container" ref="container"></div>
        <Codemirror
          v-model="code"
          :style="{ height: '400px' }"
          :autofocus="true"
          :indent-with-tab="true"
          :tab-size="2"
          :extensions="extensions"
        ></Codemirror>
      </div>
    </div>
  </div>

import { ref, onMounted } from 'vue'
import { isFunction } from 'lodash'
import { basicSetup } from 'codemirror'
import { Codemirror } from 'vue-codemirror'
// import { CompletionContext } from '@codemirror/autocomplete'
import {
  javascript,
  // javascriptLanguage,
  // snippets,
} from '@codemirror/lang-javascript'
import { myeval } from '@leyaoyao/libs/utils/compiler'
const value = ref('JsObject')
const selectJsObject = ref('fn1')
const options = ref([])
const code = ref(`export default {
  myVar1: [],
  myVar2: {},
  myFun1: () => {
    //write code here
  },
  myFun2: async () => {
    //use async-await or promises
  }
}`)
let curJsObject = {}
// function myCompletions(context: CompletionContext) {
//   let word = context.matchBefore(/\w*/)
//   if (word.from == word.to && !context.explicit) return null
//   return {
//     from: word.from,
//     options: [
//       ...snippets,
//       { label: 'match', type: 'keyword' },
//       { label: 'hello', type: 'variable', info: '(World)' },
//       { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
//       { label: 'obj.a', type: 'string', detail: 'string' },
//       { label: 'obj.b', type: 'string', detail: 'string' },
//       { label: 'obj.run()', type: 'function', detail: 'function' },
//     ],
//   }
// }
// const jsSnippets = javascriptLanguage.data.of({
//   autocomplete: myCompletions,
// })
const extensions = [javascript(), basicSetup]

const updateResult = () => {
  const runcode =
    `${code.value.replace('export default', 'const module = ')}` + ';module;'
  curJsObject = myeval({ a: 1, b: 3 }, runcode)
}

const runCode = () => {
  updateResult()
  const runValue = curJsObject[selectJsObject.value]
  const runResult = isFunction(runValue) ? runValue() : runValue
  console.log(runResult, '===', selectJsObject.value, curJsObject)
}

const setOptions = () => {
  updateResult()
  const objectAttrs = Object.keys(curJsObject).map((key) => ({
    value: key,
    label: key,
  }))
  options.value = objectAttrs
  selectJsObject.value = objectAttrs[0].value
}

onMounted(() => {
  setOptions()
})

Reproduction

<div class="jsobject-wrap">
    <span>返回</span>
    <div>
      <div class="jsobject-header">
        <div class="jsobject-header-left">
          <a-input v-model:value="value"></a-input>
        </div>
        <div class="jsobject-header-right">
          <a-select
            class="jsobject-fn-select"
            v-model:value="selectJsObject"
            :options="options"
          ></a-select>
          <a-button class="run" type="primary" @click="runCode">运行</a-button>
        </div>
      </div>
      <div class="jsobject-content">
        <div class="container" ref="container"></div>
        <Codemirror
          v-model="code"
          :style="{ height: '400px' }"
          :autofocus="true"
          :indent-with-tab="true"
          :tab-size="2"
          :extensions="extensions"
        ></Codemirror>
      </div>
    </div>
  </div>

import { ref, onMounted } from 'vue'
import { isFunction } from 'lodash'
import { basicSetup } from 'codemirror'
import { Codemirror } from 'vue-codemirror'
// import { CompletionContext } from '@codemirror/autocomplete'
import {
  javascript,
  // javascriptLanguage,
  // snippets,
} from '@codemirror/lang-javascript'
import { myeval } from '@leyaoyao/libs/utils/compiler'
const value = ref('JsObject')
const selectJsObject = ref('fn1')
const options = ref([])
const code = ref(`export default {
  myVar1: [],
  myVar2: {},
  myFun1: () => {
    //write code here
  },
  myFun2: async () => {
    //use async-await or promises
  }
}`)
let curJsObject = {}
// function myCompletions(context: CompletionContext) {
//   let word = context.matchBefore(/\w*/)
//   if (word.from == word.to && !context.explicit) return null
//   return {
//     from: word.from,
//     options: [
//       ...snippets,
//       { label: 'match', type: 'keyword' },
//       { label: 'hello', type: 'variable', info: '(World)' },
//       { label: 'magic', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' },
//       { label: 'obj.a', type: 'string', detail: 'string' },
//       { label: 'obj.b', type: 'string', detail: 'string' },
//       { label: 'obj.run()', type: 'function', detail: 'function' },
//     ],
//   }
// }
// const jsSnippets = javascriptLanguage.data.of({
//   autocomplete: myCompletions,
// })
const extensions = [javascript(), basicSetup]

const updateResult = () => {
  const runcode =
    `${code.value.replace('export default', 'const module = ')}` + ';module;'
  curJsObject = myeval({ a: 1, b: 3 }, runcode)
}

const runCode = () => {
  updateResult()
  const runValue = curJsObject[selectJsObject.value]
  const runResult = isFunction(runValue) ? runValue() : runValue
  console.log(runResult, '===', selectJsObject.value, curJsObject)
}

const setOptions = () => {
  updateResult()
  const objectAttrs = Object.keys(curJsObject).map((key) => ({
    value: key,
    label: key,
  }))
  options.value = objectAttrs
  selectJsObject.value = objectAttrs[0].value
}

onMounted(() => {
  setOptions()
})

System Info

vue

Used Package Manager

npm

Validations

• Read the the documentation in detail.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.