Slate.js prevent block deletion

user_342870 0
Viewed 176

Which way I can prevent user to remove specific block from slate.js editor (or inform user that block will be deleted) my goal is protect information from accidental removal. Thanks in advance.

slate.js
1 Answers

I was looking for something similar.

One way that I found was - by preventing default deleteForward and deleteBackward invocation when inside that node.

For example I have a front-matter node that contains meta-information about the document and I'd like the user to edit it but never remove from the tree.

text node is editable and this is the schema

{
    type: 'front-matter',
    children: [{ text: 'Welcome to the document' }],
}

And this is the plugin

export const withFrontmatter = (editor: Editor) => {
    const { deleteForward } = editor;

    editor.deleteForward = (unit: TextUnit) => {
        const [frontmatter] = Editor.nodes(editor, {
            match: (node) =>
                !Editor.isEditor(node) && Element.isElement(node) &&
                node.type === 'front-matter'
        });

        if (
            !!frontmatter &&
            Element.isElement(frontmatter[0]) &&
            Editor.isEmpty(editor, frontmatter[0])
        ) {
            return;
        }

        deleteForward(unit);
    };

    return editor;
};

Identical logic for deleteBackward and you have an un-deletable node.

Editor.isEmpty(editor, frontmatter[0]) checks if the inner text fragment is empty.

user_92352390
Related