Add new line after an inserted div

Question

I have created a plugin that inserts a <div> container into the the editor. But when I add it, there doesn't seem to be a way for me to move the cursor below the div into a new line, when it's the last added element.

Here's the code for the plugin:

editor.ui.registry.addButton('focusframe', {
    text: '<i class="mdi mdi-square-outline mdi-24px"></i>',
    tooltip: "Frame",
    onAction: (_) => {
        const html = `
        <div class="focus-frame">
        <p>Sample text</p>
        </div>`
        editor.insertContent(html)
    },
})

I tried solving it by just adding an empty <p> tag after the <div> within the plugin, but if the inserted block is the last element of the content, I don't want the empty

there. I could instruct the customer to remove the <p>, but I believe there's a better way. I just need to find it.

Preferably I'd like to press the down arrow on my keyboard, while the caret is on the last position within the div (at the end of the last line), after which it will create a new <p> where the cursor will move to.

Add new line after an inserted div

0 Answers0