reactjs - 使用 Monaco Editor 无法在 DetailsList 中导航

Question

嗨，我正在使用 DetailsList并且我希望能够使用选项卡将我的选择从一列移动到另一列。
但是我在 Github 上遇到了这个问题:
https://github.com/microsoft/fluentui/issues/4690
需要使用箭头键在列表中导航，但不幸的是，我在列表中使用了 Monaco Editor ，而箭头键在编辑器中被阻止...
我想知道是否有办法禁用列表以将 TabIndex 设置为 -1
或者
如果 Monaco 可以在光标位于文本末尾时释放箭头键(如文本框)。

Answer 1

我根据这个理由得到了一些工作:

听听onKeydown Monaco Editor 事件

识别position插入符号

知乎 total of lines

获取 specific line 的字符串

move来自 Monaco Editor 的焦点

知道这些之后，您就可以检查插入符号是否在最后一行的末尾，并在用户按下右箭头键时移动焦点。我还添加了代码来检查插入符号何时位于最开始处，并将焦点移动到左侧的单元格。
这是我最终得到的代码

import * as React from "react";
import "./styles.css";
import { DetailsList, IColumn } from "@fluentui/react";
import MonacoEditor from "react-monaco-editor";

export default function App() {
  const columns: IColumn[] = [
    {
      key: "name",
      minWidth: 50,
      maxWidth: 50,
      name: "Name",
      onRender: (item, index) => (
        <input id={`name-row-${index}`} value={item.name} />
      )
    },
    {
      key: "type",
      minWidth: 200,
      name: "Type",
      onRender: (item, index) => {
        return (
          <MonacoEditor
            editorDidMount={(editor, monaco) => {
              editor.onKeyDown((event) => {
                if (event.code === "ArrowRight") {
                  const { column, lineNumber } = editor.getPosition();
                  const model = editor.getModel();
                  if (lineNumber === model?.getLineCount()) {
                    const lastString = model?.getLineContent(lineNumber);
                    if (column > lastString?.length) {
                      const nextInput = document.getElementById(
                        `default-value-row-${index}`
                      );
                      (nextInput as HTMLInputElement).focus();
                    }
                  }
                }
                if (event.code === "ArrowLeft") {
                  const { column, lineNumber } = editor.getPosition();
                  if (lineNumber === 1 && column === 1) {
                    const previousInput = document.getElementById(
                      `name-row-${index}`
                    );
                    (previousInput as HTMLInputElement).focus();
                  }
                }
              });
            }}
            value={item.type}
          />
        );
      }
    },
    {
      key: "defaultValue",
      minWidth: 100,
      name: "Default Value",
      onRender: (item, index) => (
        <input id={`default-value-row-${index}`} value={item.defaultValue} />
      )
    }
  ];

  const items = [{ name: "name", type: "type", defaultValue: "name" }];

  return <DetailsList columns={columns} items={items} />;
}

你可以看到它在这个代码和盒子中工作 https://codesandbox.io/s/wild-smoke-vy61m?file=/src/App.tsx
monaco-editor 似乎很复杂，可能您必须改进此代码以支持其他交互(例如:我不知道折叠代码时这是否有效)