Custom blocks do not rerender on editor.isEditable change

Aberta
#2,134 4 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react, typescript
Domínio
frontend

Direção de pesquisa

Start with the createReactBlockSpec custom block and the BlockNoteView editable toggle shown in the reproduction. Review fixes #2121 and #2106 to identify why the block does not react to editor.isEditable changes. Done means toggling the button changes the custom block content between "editable" and "readonly" without interacting with the block.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

bug:P2

Describe the bug
In version 0.41.1 custom blocks directly reacted to changes to editor.isEditable and have rerendered.
But at the latest main version they don't (until they are interacted with which forces a rerender).
I suspect this is due to the fix (#2121) for (#2106).

To Reproduce
block-spec:

export const createTestBlock = createReactBlockSpec(
    {
        type: 'test',
        propSchema: {
        },
        content: 'none',
    },
    {
        render: (props) => {
            return (
                <div>{props.editor.isEditable ? 'editable' : 'readonly'}</div>
            );
        },
    }
);

editor:

export function Test() {
    const [readonly, setReadonly] = useState(false);
    const editor = useCreateBlockNote({
        schema: BlockNoteSchema.create({
            blockSpecs: {
                test: createTestBlock(),
            },
        }),
        initialContent: [
            {
                type: "test",
            },
        ],
    });

    return <div>
        <button onClick={() => setReadonly(r => !r)}>toggle</button>
        <BlockNoteView editor={editor} editable={!readonly} />
    </div>;
}

Toggling the readonly button does not change block's content to readonly

Misc

  • Node version:
  • Package manager:
  • Browser:
  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖
Linguagem predominante
TypeScript
Estrelas
10.2k
Forks
772
Merge médio
3d 11h
PRs com merge (30d)
17

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TypeCellOS/BlockNote

Todas as issues de TypeCellOS/BlockNote

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.