SlateJS：仅在活动块上方显示浮动工具栏

Question

我正在创建一个 SlateJS editor using @udecode/slate-plugins。我让大部分编辑器都在工作，但是，我正在尝试为 table 块创建一个工具栏，当它是 selected/active.

时，它应该在 table 上方可见

工具栏当前在 table 上方正确显示，但是，当我在编辑器中插入多个 table 时，当其中一个 tables 是 selected/active.

如何让工具栏仅在活动 table 上可见而在其余部分隐藏？

Table块代码

const Table = ({
  attributes,
  children,
  className,
  nodeProps
}: StyledElementProps) => {
  const editor = useTSlate();

  const isActive = someNode(editor, { match: { type: ELEMENT_TABLE } });

  return (
    <table {...attributes} className={className} {...nodeProps}>
      <Tippy
        interactive={true}
        arrow={false}
        visible={isActive}
        onClickOutside={(instance) => instance.hide()}
        content={
          <div style={{ display: "flex", flexDirection: "row" }}>
            <ToolbarTable
              icon={<CgExtensionRemove />}
              transform={deleteTable}
              tooltip={{ content: "Delete Table" }}
            />
            <ToolbarTable
              icon={<AiOutlineInsertRowBelow />}
              transform={addRow}
              tooltip={{ content: "Insert Row" }}
            />
            <ToolbarTable
              icon={<AiOutlineDeleteRow />}
              transform={deleteRow}
              tooltip={{ content: "Delete Row" }}
            />
            <ToolbarTable
              icon={<AiOutlineInsertRowRight />}
              transform={addColumn}
              tooltip={{ content: "Insert Column" }}
            />
            <ToolbarTable
              icon={<AiOutlineDeleteColumn />}
              transform={deleteColumn}
              tooltip={{ content: "Delete Column" }}
            />
          </div>
        }
      >
        <tbody>{children}</tbody>
      </Tippy>
    </table>
  );
};

Answer 1

通过获取当前选择并检查 table 块是否包含该选择来解决它。

const [isActive, setIsActive] = useState(false);
const domSelection = window.getSelection();

useEffect(() => {
    setIsActive(
        !!(
            someNode(editor, { match: { type: ELEMENT_TABLE } }) &&
            domSelection &&
            attributes.ref.current &&
            attributes.ref.current.contains(domSelection.anchorNode)
        )
    );
}, [attributes, domSelection, editor]);

SlateJS：仅在活动块上方显示浮动工具栏

SlateJS: show floating toolbar above active block only

reactjs

slatejs