reactjs - 使用 Monaco 编辑器无法在详细信息列表中导航

Question

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

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

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

或

当光标位于文本末尾(如文本框)时，Monaco 是否可以释放箭头键。

Answer 1

按照这个理由，我得到了一些东西:

1. 听onKeydown Monaco Editor 事件
2. 识别 position插入符
3. 知道total of lines
4. 获取 specific line 的字符串
5. 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} />;
}

你可以看到它在这个codesandbox https://codesandbox.io/s/wild-smoke-vy61m?file=/src/App.tsx中工作

monaco-editor 似乎相当复杂，可能您必须改进此代码以支持其他交互(例如:我不知道这在代码折叠时是否有效)