光标与选择
如果你想知道用户当前正在编辑哪些区块，可以通过光标位置和选择区域来获取。
文字光标
文字光标是在编辑器中输入时看到的闪烁垂直线。BlockNote 使用 TextCursorPosition 对象为你提供光标所在区块及其邻近区块的信息：
type TextCursorPosition = {
block: Block;
prevBlock: Block | undefined;
nextBlock: Block | undefined;
};block: 当前包含文字光标的区块。如果光标在嵌套区块中，则为最深层级的区块。
prevBlock: 同一层级中光标所在区块的前一个区块。如果光标所在区块是父级的第一个子区块，或编辑器中的第一个区块，则为 undefined。
nextBlock: 同一层级中光标所在区块的后一个区块。如果光标所在区块是父级的最后一个子区块，或编辑器中的最后一个区块，则为 undefined。
获取文字光标位置
你可以使用以下调用获取当前文字光标位置的快照：
getTextCursorPosition(): TextCursorPosition;
// 使用示例
const textCursorPosition = editor.getTextCursorPosition();returns: 当前文字光标位置的快照。
设置文字光标位置
你可以用以下调用将文字光标设置到现有区块的开头或结尾：
setTextCursorPosition(
targetBlock: BlockIdentifier,
placement: "start" | "end" = "start"
): void;
// 使用示例
editor.setTextCursorPosition(targetBlock, placement);targetBlock: 目标区块的标识符，光标将移动到此区块。
placement: 指定光标是放在区块的开始处还是末尾。
若找不到目标区块，则会抛出错误。
选择区域
当你用鼠标或键盘高亮内容时，这称为选择区域。BlockNote 使用 Selection 对象来显示当前选择跨越的区块：
type Selection = {
blocks: Block[];
};blocks: 当前选择跨越的所有区块，包括嵌套区块。
获取选择区域
你可以使用以下调用获取当前选择区域的快照：
getSelection(): Selection | undefined;
// 使用示例
const selection = editor.getSelection();returns: 当前选择的快照，若无选择则返回 undefined。
设置选择区域
你可以通过以下调用将选择区域设置为从一个区块开始到另一个区块结束：
setSelection(startBlock: BlockIdentifier, endBlock: BlockIdentifier): void;
// 使用示例
editor.setSelection(startBlockIdentifier, endBlockIdentifier);startBlock: 选择起始区块的标识符。
endBlock: 选择结束区块的标识符。
startBlock 和 endBlock 两者都必须指向有内容的区块。更新后的选择将从第一个区块的开头到最后一个区块的末尾。
获取选中的区块
下方演示会将当前选择中的区块以 JSON 格式显示在编辑器下方。如果没有激活选择，则显示包含文字光标的区块。
import { Block } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useState } from "react";
import "./styles.css";
export default function App() {
// Stores the selected blocks as an array of Block objects.
const [blocks, setBlocks] = useState<Block[]>([]);
// Creates a new editor instance.
const editor = useCreateBlockNote({
initialContent: [
{
type: "paragraph",
content: "Welcome to this demo!",
},
{
type: "paragraph",
content: "Select different blocks to see the JSON change below",
},
{
type: "paragraph",
},
],
});
// Renders the editor instance.
return (
<div className={"wrapper"}>
<div>BlockNote Editor:</div>
<div className={"item"}>
<BlockNoteView
editor={editor}
onSelectionChange={() => {
const selection = editor.getSelection();
// Get the blocks in the current selection and store on the state. If
// the selection is empty, store the block containing the text cursor
// instead.
if (selection !== undefined) {
setBlocks(selection.blocks);
} else {
setBlocks([editor.getTextCursorPosition().block]);
}
}}
/>
</div>
<div>Selection JSON:</div>
<div className={"item bordered"}>
<pre>
<code>{JSON.stringify(blocks, null, 2)}</code>
</pre>
</div>
</div>
);
}