Support custom attachments which behave like files

[adamdebono]

When inserting images or other files, they behave as a block-level element in the editor. They are inserted at the root level of the DOM tree, and when dragged around can only be placed between other content blocks.

Custom attachments do not behave like this, as they are treated as inline elements. A user can freely drag these around, placing them anywhere in the editor including inside paragraphs, lists or tables.

For my use case, I have a Rails app which allows the insertion of custom attachments representing ActiveRecord models. When displayed to users, these attachments are displayed full width, and don't wrap with text.

I am currently able to workaround this by manually creating and inserting the attachments at the root level, and have patched the nodes to disable drag and drop. I would like to re-enable drag and drop, otherwise moving the attachments means deleting and reinserting it. I have custom UI which allows a user to select the attachment model, which then calls this function:

function insertAttachment(type, said, content) {
  this.editor.update(() => {
    const node = CustomActionTextAttachmentNode({ sgid, contentType: type, innerHtml: content })
    $insertNodeToNearestRoot(node)
  })
}