Активное состояние редактора Slate всегда ложно с использованием isBlockActive из примеров - PullRequest
Новая
       33

Активное состояние редактора Slate всегда ложно с использованием isBlockActive из примеров

0 голосов
/ 26 мая 2020

Я создал редактор, составив пару примеров сланцев вместе, а именно https://www.slatejs.org/examples/richtext и https://www.slatejs.org/examples/links

Однако, когда я добавил их, состояние для всех узлов уровня блока, это вообще не работает, то есть я не могу включать и выключать элементы списка, якорные ссылки в конечном итоге становятся вложенными et c.

Неисправный код выглядит следующим образом строки, поступающие из функции isBlockActive во всех примерах: 

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

    return !!match;
};

match всегда не определено, независимо от того, где находится мой курсор.

Я использую последнюю версию для всех пакетов в настоящее время 0.58.1.

Ниже моя функция toggleBlock, которую я также взял из примеров, в которых используется функция isBlockActive для работы с логом переключения c. 

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);
    }
};

Кто-нибудь сталкивался с эта проблема раньше, возможно, кодовая база не синхронизирована c с примерами, а Editor.nodes больше не рекомендуется?

Все параметры встроенного форматирования работают, поскольку в примере используется другой подход: 

const isMarkActive = (editor, format) => {
    const marks = Editor.marks(editor);
    return marks ? marks[format] === true : false;
};
* 102 9 * Также вот моя панель инструментов и функции 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}
); case 'heading-one': возврат {children} ; case 'заголовок-два': возврат {children} ; case 'заголовок-три': возврат {children} ; case 'заголовок-четыре': возврат {children} ; case 'heading-five': возврат {children} ; case 'заголовок-шесть': возврат {children} ; case 'list-item': возврат {children} ; case 'нумерованный-список': возврат {children} ; case 'bulleted-list': возврат {children} ; case 'ссылка': return ( {children} ); по умолчанию: возврат {children} ; }};

1 Ответ

1 голос
/ 07 августа 2020

Editor.nodes() возвращает итератор.

Вам нужно будет изменить функцию isBlockActive на: 

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