Codemirror v6 动态添加多个光标

Question

移动用户没有 CTRL 键，所以我在项目中尝试做的是用户单击一个按钮（该按钮是在编辑器激活时动态创建的），它会切换一个类，显示 ctrlKey 是否处于活动状态或不（这也恰好会在此函数中切换布尔值。原因是因为 clickAddsSelectionRange 文档要求）并且 Codemirror 还需要 allowMultipleSelections 才能正常工作。

const jsEditor = new EditorView({
  state: EditorState.create({
    extensions: [
      basicSetup, 
      linter(esLint(new eslint.Linter(), config)),
      javascript(),
      EditorView.updateListener.of((v) => {
        if (autoupdate.checked) {
          setTimeout(() => {
            app.updatePreview(autoupdate.checked);
          }, 300);
        }
      }),
    ],
  }),
  parent: document.getElementById('jsEditor'),
  allowMultipleSelections: true,
});
activeEditor = htmlEditor;
let ctrlActive = false;

在 basicSetup 数组中我称之为

clickAddsSelectionRange

。

EditorView.clickAddsSelectionRange.of(evt => ctrlActive),

控制键像这样切换...

if (button.dataset.command === "ctrl") {
  ctrlActive = !ctrlActive; // Toggle ctrlActive variable
  button.classList.toggle('text-blue-500');
}

但是该函数还需要一个鼠标按下事件，我正在尝试像这样模拟......

const handleTouchStart = e => {
  // Prevent default touch behavior
  e.preventDefault();
  // Simulate mouse down event
  const mouseDownEvent = new MouseEvent('mousedown', {
    bubbles: true,
    cancelable: true,
    view: window,
  });
  button.dispatchEvent(mouseDownEvent);
}
const handleTouchEnd = e => {
  // Prevent default touch behavior
  e.preventDefault();
  // Simulate mouse up event
  const mouseUpEvent = new MouseEvent('mouseup', {
    bubbles: true,
    cancelable: true,
    view: window,
  });
  button.dispatchEvent(mouseUpEvent);
  // Optionally, you can also simulate a click event if needed
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window,
  });
  button.dispatchEvent(clickEvent);
}

// Add event listeners for touch events
button.addEventListener('touchstart', handleTouchStart);
button.addEventListener('touchend', handleTouchEnd);

但是我仍然没有设法使用 Codemirror v6 动态添加多个光标，并且不确定我遗漏了什么或做错了什么。当移动用户没有 CTRL 键可按时，如何从按钮类动态添加多个光标到 codemirror？

Answer 1

查看此存储库。当有人更改代码时，它会显示实时光标工具提示。

https://github.com/sahilatahar/Code-Sync