最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Confusions about matching rules of slate `Editor.nodes()` function - Stack Overflow

programmeradmin4浏览0评论

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!

发布评论

评论列表(0)

  1. 暂无评论