I feel very confused about the matching rules of Editor.nodes()
. This is my demo about slate in react project, and the UI is simple, only a "toggle bold" button can make text bold. The screenshot is as follows:
My logic of Editor.nodes()
to match bold block is located in file src\tools\CustomCommand.js
, and the snippet is as follows:
isBoldMarkActive(editor) {
const matchList = Editor.nodes(editor, {
match: (node) => {
const retValue = node.bold === true;
console.log(
`isBoldMarkActive, node: ${JSON.stringify(node)}, ` +
`ret value: ${retValue}`
);
return retValue;
},
universal: true,
});
const matchArray = [...matchList];
console.log(
`isBoldMarkActive, matchList: ${JSON.stringify(matchArray)}, ` +
`len: ${matchArray.length}`
);
return !!matchArray[0];
}
the "Toggle Bold" button onclick function also located in file src\tools\CustomCommand.js
, the content is:
toggleBoldMark(editor) {
const isActive = isBoldMarkActive(editor);
console.log(`[toggleBoldMark isActive: ${isActive}`);
Transforms.setNodes(
editor,
{ bold: isActive ? null : true },
{
match: (node) => Text.isText(node),
split: true,
}
);
},
I can understand: the return value is true when I only select word "is" and click "Toggle Bold" button.
Confusion 1: Why the return value is false, and nothing matched when I select "this is" and click "Toggle Bold" button? as we know the word "is" was bold originally:
Confusion 2: Why the return value is still false, even if one block is matched when I select "is editable" and click "Toggle Bold" button? the word "is" was bold originally:
Thanks for any light you may be able to shed on my confused brain!