dom.js:656 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

[chen-xiaoxing]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

When I create a new editor in the dialog of the element plus framework and add the hover variable name to prompt the custom text function, an error occurs.

Monaco Editor Playground Code

<template>
  <el-drawer v-model="drawerVisable" title="编辑器" direction="rtl" size="100%">
    <template #default>
      <div class="editor" ref="aceInputRef"></div>
      <div class="editor" ref="aceOutputRef" style="height: 200px;"></div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
// import * as monaco from 'monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
// import 'monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js'; // 折叠
// import "monaco-editor/esm/vs/basic-languages/vb/vb.contribution"; // 代码高亮&提示
// import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js'; // 代码联想提示
// import 'monaco-editor/esm/vs/editor/contrib/tokenization/browser/tokenization.js'; // 代码联想提示
import { MonacoBreakpoint } from 'monaco-breakpoints';

const drawerVisable = ref(false);
const aceInputRef = ref(null);
const aceOutputRef = ref(null);

const xhr = (url) => {
  var req = null;
  return new Promise(function (c, e) {
    req = new XMLHttpRequest();
    req.onreadystatechange = function () {
      if (req._canceled) {
        return;
      }

      if (req.readyState === 4) {
        if (
          (req.status >= 200 && req.status < 300) ||
          req.status === 1223
        ) {
          c(req);
        } else {
          e(req);
        }
        req.onreadystatechange = function () { };
      }
    };

    req.open("GET", url, true);
    req.responseType = "";

    req.send(null);
  }).catch(function () {
    req._canceled = true;
    req.abort();
  });
}
// 配置悬停提示
const setHoverTip = () => {
  monaco.languages.register({ id: "vb" });
  monaco.languages.registerHoverProvider("vb", {
    provideHover: (model, position) => {
      var word = model.getWordAtPosition(position);
      if (!word) {
        return null;
      }


      // 检查鼠标悬停的单词是否为"obj"
      if (model.getValueInRange(new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn)) === "obj") {
        return xhr("./MonacoDialog.vue").then(function (res) {
          console.log(res, 'res');
          return {
            range: new monaco.Range(
              1,
              1,
              1,
              6
            ),
            contents: [
              { value: "**SOURCE**" },
              {
                value:
                  word + "hello world",
              },
            ],
          };
        });
      }
    },
  });

  /* aceInputRef.value.addEventListener('click', e => {
      // 有断点且鼠标点击断点行变量时,才能提示变量值
      if (!breakpoints.value.length && breakpoints.value.includes(inputEditor.getModel().getLinesContent())) return

      const tipEle = document.querySelector('.tip-p');
      if (tipEle) {
          aceInputRef.value.removeChild(tipEle);
      }
      const position = inputEditor.getPosition();
      const dom = document.createElement('p');
      dom.className = "tip-p";
      dom.innerText = `位置：${position} ${inputEditor.getModel().getWordAtPosition({
          lineNumber: position.lineNumber,
          column: position.column
      }).word}`
      aceInputRef.value.appendChild(dom)
  }) */
}
onMounted(() => {
  nextTick(() => {
    const editor = monaco.editor.create(aceInputRef.value, {
      value: `function foo() {
	const obj = {
		name: "xx",
		age: "18"
	}
	return 1;
}
function bar() {
	return 1;
}`,
      language: "vb",
      automaticLayout: true,
      accessibilityPageSize: 1, // 
      acceptSuggestionOnEnter: true, // 有输入提示时，按下enter键是否相当于按住enter键默认补充，默认关闭false
      minimap: {
        enabled: true,
      },
      glyphMargin: true, // 启用图形边距渲染
      folding: true, // 折叠
      theme: "vs",
    })

    setHoverTip();

    const instance = new MonacoBreakpoint({ editor });
    instance.on('breakpointChanged', breakpoints => {
      console.log('breakpointChanged: ', breakpoints); // 获取有断点的行数
      // console.log(editor.getModel().getLinesContent(), '11'); // 获取全部代码以数组形式区分行数
      // console.log(editor.getModel().getLineContent(2), '22'); // 获取第二行代码
    })

    const outputEditor = monaco.editor.create(aceOutputRef.value, {
      value: 'print "dfdfd"',
      automaticLayout: true,
      readOnly: true,
      suggestLineHeight: 10,
      minimap: {
        enabled: false,
      },
      glyphMargin: true, // 启用图形边距渲染
      theme: "vs",
    })

    console.log(outputEditor, 'outputEditor');
  })
})

</script>

<style>
.editor {
  width: 100%;
  height: 500px;
  text-align: left;
}
</style>

Reproduction Steps

No response

Actual (Problematic) Behavior

An error will be reported when adding this function in a new editor on the dialog of the element plus framework.

Expected Behavior

Create a new editor on the dialog of the element plus framework and configure the custom text function when the mouse is placed on the variable to prompt that the configuration can be successful.

Additional Context

"element-plus": "^2.3.0",
"monaco-breakpoints": "^0.1.2",
"monaco-editor": "^0.48.0",
"vue": "^3.2.13"

[chen-xiaoxing]

Sorry, it's not a dialog, it's a drawer

[chen-xiaoxing]

I found out that it was because I introduced it on demand. If I want to introduce it on demand, how do I introduce this custom hover language function?