Extra line break and problems with deleting node created by NodeView

1

I have a schema defined like this:

const nodes = {
    doc: {
       content: 'section*'
    },

    section: {
        attrs: {
            id: {}
        },
        content: 'sectionHeader sectionContent',
    },

    sectionHeader: {
        selectable: false,
        defining: true,
        isolating: true,
        attrs: {
          id: {default: null},
          sectionId: {default: null},
          text: {default: null},
          dueDate: {default: null},
          index: {default: null}
        }
    },

    sectionContent: {
        selectable: false,
        defining: true,
        isolating: true,
        content: "(paragraph | heading | componentWrapper | list)*",
        attrs: {
            id: {default: null},
            collapsed: {default: false}
        },
        parseDOM: [{tag: "div"}],
        toDOM: node => ["div", {id: node.attrs.id, style: (node.attrs.collapsed ? 'display: none;' : 'display: block;' )}, 0]
    },

   componentWrapper: {
        defining: true,
        selectable: false,
        isolating: true,
        attrs: {
            id: {default: null}
        },
        content: "component",
        parseDOM: [{
            tag: "div",
            getAttrs: dom => ({ id: dom.getAttribute('id') })
        }],
        toDOM: node => ["div", {id: node.attrs.id, class: "component-wrapper"}, 0]
    },

    task:  {
        group: "component",
        inline: true,
        defining: true,
        selectable: false,
        isolating: true,
        attrs: { 
            id: {default: null},
            assigneeId: {default: null},
            description: {default: ''},
            isDone: {default: false},
            createdBy: {default: null},
            createdAt: {default: null},
            dueDate: {default: null},
            completedBy: {default: null},
            completedAt: {default: null}
        }
    },
... other components
}

But for some reason when I add a component to the document an extra line break is added:

image.png1582×966 94.8 KB

If the user puts the cursor on that line break and tries to type something nothing happens.

Is there a way to prevent that line break from being created ?

Another problem is that I am not able to delete the componentWrapper node. I try it like this:

const deleteTransaction = this.currentCanvasState.tr.delete(nodeAndPos.pos, nodeAndPos.pos + 1);
this.dispatchTransactionToCanvas(deleteTransaction);

but the delete transaction has a ReplaceStep which replaces the componentWrapper with a copy of the componentWrapper.

I assume this is a problem with my schema definition but I was not able to figure out what the problem is.

2

Your task is declared to be inline, but renders as a block element in the DOM. That’s why the <br> is visible – having inline content marks your compontentWrapper element as a textblock, which means that a trailing <br> is rendered when it’s empty or ends in a non-text node. This isn’t part of the document, it’s just there to make browsers behave properly.

You componentWrapper node is bigger than one token, so delete(nodeAndPos.pos, nodeAndPos.pos + 1) doesn’t cover it. Maybe try nodeAndPos.pos + nodeAndPos.node.nodeSize?

3

That was it, thanks!

4

Another thing, I removed the componentWrapper node and this is how my schema looks like now:

const nodes = {
    doc: {
       content: 'section*'
    },

    section: {
        attrs: {
            id: {}
        },
        content: 'sectionHeader sectionContent',
    },

    sectionHeader: {
        selectable: false,
        defining: true,
        isolating: true,
        attrs: {
          id: {default: null},
          sectionId: {default: null},
          text: {default: null},
          dueDate: {default: null},
          index: {default: null}
        }
    },

    sectionContent: {
        selectable: false,
        defining: true,
        isolating: true,
        content: "(paragraph | heading | component | list)*",
        attrs: {
            id: {default: null},
            collapsed: {default: false}
        },
        parseDOM: [{tag: "div"}],
        toDOM: node => ["div", {id: node.attrs.id, style: (node.attrs.collapsed ? 'display: none;' : 'display: block;' )}, 0]
    },

    task:  {
        group: "component",
        inline: true,
        defining: true,
        selectable: false,
        isolating: true,
        attrs: { 
            id: {default: null},
            assigneeId: {default: null},
            description: {default: ''},
            isDone: {default: false},
            createdBy: {default: null},
            createdAt: {default: null},
            dueDate: {default: null},
            completedBy: {default: null},
            completedAt: {default: null}
        }
    },
... other components
}

Before, I was able to add a component to the place where the cursor is by executing this code:

const taskNode = canvasSchema.nodes.task.create(taskNodeData);
const transaction = this.currentCanvasState.tr.replaceSelectionWith(taskNode);  
this.dispatchTransactionToCanvas(transaction);

But this is not working anymore, any idea why ?

5

I found the problem, it was because the task was marked as ‘defining’