板岩編輯器活動 state 使用示例中的 isBlockActive 始終為假

Question

我通過組合幾個 slates 示例創建了一個編輯器，即https://www.slatejs.org/examples/richtext和https://www.slatejs.org/examples/links

但是，當我為所有塊級節點添加這些活動 state 時，它根本不起作用，這意味着我無法打開和關閉列表項，錨鏈接最終會嵌套等。

損壞的代碼似乎是這些行，在所有示例中來自 isBlockActive function：

const isBlockActive = (editor, format) => {
    const [match] = Editor.nodes(editor, {
        match: n => {
            console.log('n.type', n.type);
            return n.type === format;
        },
    });

    return !!match;
};

無論我的 cursor 位於何處， match始終未定義。

我在當前0.58.1的所有軟件包上運行最新。

下面是我的toggleBlock function 我還從使用 isBlockActive function 來計算切換邏輯的示例中獲取。

const toggleBlock = (editor, format) => {
    const isActive = isBlockActive(editor, format);
    const isList = LIST_TYPES.includes(format);

    Transforms.unwrapNodes(editor, {
        match: n => LIST_TYPES.includes(n.type),
        split: true,
    });

    Transforms.setNodes(editor, {
        type: isActive ? 'paragraph' : isList ? 'list-item' : format,
    });

    if (!isActive && isList) {
        const block = { type: format, children: [] };
        Transforms.wrapNodes(editor, block);
    }
};

以前有沒有人遇到過這個問題，也許代碼庫與示例不同步並且不再推薦Editor.nodes ？

由於示例使用不同的方法，所有內聯格式選項都起作用：

const isMarkActive = (editor, format) => {
    const marks = Editor.marks(editor);
    return marks ? marks[format] === true : false;
};

如果有幫助，這里還有我的工具欄和 renderElement 功能：

<Slate editor={editor} value={value} onChange={handleChange}>
  <div className={styles.toolbar}>
    <MarkButton format="bold" icon="bold" />
    <MarkButton format="italic" icon="italic" />
    <MarkButton format="underline" icon="underline" />
    <MarkButton format="code" icon="code" />
    <BlockButton format="heading-one" icon="h1" />
    <BlockButton format="heading-two" icon="h2" />
    <BlockButton format="heading-three" icon="h3" />
    <BlockButton format="quote" icon="quote-left" />
    <BlockButton format="numbered-list" icon="list-ol" />
    <BlockButton format="bulleted-list" icon="list-ul" />
    <BlockButton format="break" icon="horizontal-rule" />
    <LinkButton />
  </div>
  ...

const Element = ({ attributes, children, element }) => {
    switch (element.type) {
        case 'quote':
            return <blockquote {...attributes}>{children}</blockquote>;
        case 'code':
            return (
                <pre>
                    <code {...attributes}>{children}</code>
                </pre>
            );
        case 'heading-one':
            return <h1 {...attributes}>{children}</h1>;
        case 'heading-two':
            return <h2 {...attributes}>{children}</h2>;
        case 'heading-three':
            return <h3 {...attributes}>{children}</h3>;
        case 'heading-four':
            return <h4 {...attributes}>{children}</h4>;
        case 'heading-five':
            return <h5 {...attributes}>{children}</h5>;
        case 'heading-six':
            return <h6 {...attributes}>{children}</h6>;
        case 'list-item':
            return <li {...attributes}>{children}</li>;
        case 'numbered-list':
            return <ol {...attributes}>{children}</ol>;
        case 'bulleted-list':
            return <ul {...attributes}>{children}</ul>;
        case 'link':
            return (
                <a {...attributes} href={element.url}>
                    {children}
                </a>
            );
        default:
            return <p {...attributes}>{children}</p>;
    }
};

Answer 1

Editor.nodes()返回一個迭代器。

您需要將isBlockActive function 更改為：

const isBlockActive = (editor, format) => {
  const nodes = Editor.nodes(editor, {
    match: n => n.type === format,
  })
  return !!nodes.next().value
}