Floating

浮动 UI 组件和钩子的 API 参考。

特性

  • 跟随光标位置的虚拟浮动元素
  • 在文本选择时出现的浮动工具栏
  • 基于 Floating UI 构建
  • 可自定义的定位和行为
  • 在滚动和调整大小时自动更新

安装

npm install @udecode/plate-floating

API Hooks

useVirtualFloating

创建一个带有受控虚拟元素的浮动元素，通常用于跟随光标位置。

Parameters

Collapse all

    虚拟浮动元素的选项。

Returns

Collapse all

    应用于浮动元素的样式对象。

    虚拟元素的引用。

    用于浮动 UI 定位的引用。

    手动更新定位的函数。

useFloatingToolbar

创建一个浮动工具栏，当在编辑器中选择文本时出现。

Parameters

Collapse all

    浮动工具栏的状态选项。

Returns

Collapse all

    用于检测工具栏外部点击的引用。

    工具栏是否应该隐藏。

    要传递给工具栏元素的属性。

    要附加到工具栏元素的引用。

API

getBoundingClientRect

获取编辑器中位置或位置数组的边界客户端矩形。

Parameters

Collapse all

    编辑器实例。

    要获取边界矩形的位置。如果未提供，则使用当前编辑器选择。

Returns

Collapse all

    所有指定位置的合并边界客户端矩形，如果未找到有效矩形则为 undefined。

getDOMSelectionBoundingClientRect

获取当前 DOM 选择的边界客户端矩形。

Returns

Collapse all

    DOM 选择的边界客户端矩形。如果不存在选择，则返回位于 (0,0) 的零大小矩形。

getRangeBoundingClientRect

获取特定 Slate 范围的边界客户端矩形。

Parameters

Collapse all

    编辑器实例。

    要获取边界矩形的 Slate 范围。

Returns

Collapse all

    范围的边界客户端矩形。如果范围为 null 或无效，则返回位于 (0,0) 的零大小矩形。

getSelectionBoundingClientRect

获取当前编辑器选择的边界客户端矩形。

Parameters

Collapse all

    编辑器实例。

Returns

Collapse all

    选择的边界客户端矩形。如果选择未展开，则返回位于 (0,0) 的零大小矩形。

cnResizable