Create new node as new paragraph

1 
{
        attrs: {type: {default: 'condition-block'}, value: {default: {}}, id: {default: ''} },
        content: 'block+',
        inline: true,
        group: "inline",
        draggable: true,
        toDOM: (node) => {
        const block = document.createElement("p");
        block.insertAdjacentHTML('afterbegin', `
            <span>Condition block ${counter++}</span>
            <button class="close-btn">X</button>
        `)
        block.addEventListener('mousedown', (e) => this.onClick(e));

        block.classList.add('variable-block');
         return  block;
        },
        parseDOM: [{
            tag: "p[data-type='condition-block']",
        }]
    }
    }

command i use to insert new node:

const attrs = {type: 'condition-block', value: {}, id: Date.now()};
    const { state, dispatch } = this.editor.view;
    dispatch(state.tr.replaceSelectionWith(schema.nodes.conditionBlock.create(attrs)))

the issue is if the selection inside a block(h1…6, p) it will create the new p block inside the current selected node. how can i add the new node as ENTER typing behavior. i want the new node to be create as new paragraph.

picc
picc862×1164 77.1 KB

2

It’s a bit suspicious that this block container has group: "inline". Is that intentional?

The default enter binding will create the new block at the same level as the block the cursor was inside of. You can bind another command to enter, with higher precedence than the default ones, to customize its behavior—when it detects that it’s in a condition block, it could split the whole condition block or something, depending on what the desired behavior is.

3

if i remove the group field the block wont append. i did understand what the group field stands for.

is there helper function that i can use or i should implement it?

i need to create the node as new block right after the current selected block(node).

should it be something similar to createParagraphNear?

4

i tried to the command

splitBlock(state, dispatch);
dispatch(editor.view.state.tr.replaceSelectionWith(schema.nodes.conditionBlock.create(conditionAttrs)).scrollIntoView());

will create

<h1>hello</h1>
<p>
<p class=variavle-block>Condition block</p> //new custom node
<br>
</p>

i want the outcome

<h1>hello</h1>
<p class=variavle-block>Condition block</p> //new custom node

is it possible ?