reactjs - 摩纳哥编辑器无法在 DetailsList 中导航

Question

嗨，我正在使用DetailsList，我希望能够使用选项卡将我的选择从列移动到列。但是我在 Github 上遇到了这个问题： https ://github.com/microsoft/fluentui/issues/4690

需要使用箭头键在列表中导航，但不幸的是我在列表中使用了 Monaco 编辑器，并且箭头键在编辑器内被阻止...

我想知道是否有办法禁用列表以将 TabIndex 设置为 -1

或者

如果 Monaco 可以在光标位于文本末尾时释放箭头键（如文本框）。

Answer 1

按照这个原理，我得到了一些工作：

1. 在 monaco 编辑器上收听onKeydown事件
2. 确定插入符号的位置
3. 知道总行数
4. 获取特定行的字符串
5. 将焦点从摩纳哥编辑器移开

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

这是我最终得到的代码

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 似乎很复杂，可能您必须改进此代码以支持其他交互（例如：我不知道折叠代码时这是否有效）