How can I create a custom node that extends an element node

[johnmboardem]

I want to create a custom element node that is a div with a certain height with children elements that can be types in like text and paragraphs. When the contents of the div reaches a certain height I want that text to appear in the next container.
Please could some one point me in the right direction as I cant find where to start and the documents don't seem to explain all the different to json, to dom functions needed in a custom element node. If I could get an explanation on all those functions or some help. I would be much appreciative. Thank you

[Alex-ray]

I was struggling with something similar and this might help solve for a part of your problem.

My problem was that I was trying to replace specific pre-built nodes like ParagraphNode to be extended by a custom ElementNode to accommodate my applications specific use case.

What I figured out is that you can actually update the prototype inheritance programatically.

In my case I updated the pre-built PargraphNode to extend a custom ElementNode I created called BlockElementNode. In BlockElementNode I define any properties/functions that are unique to it and I can be sure that PagraphNode will also have those properties/functions as long as they aren't overwritten by PagraphNode intself, additionally BlockElementNode extends ElementNode so I can ensure existing PagraphNode functionality will work as expected.

Here is an example of how to define a classes prototype programatically.

// Update PagraphNode to extend BlockElementNode instead of ElementNode
// Set the instance properties
Object.setPrototypeOf(ParagraphNode.prototype, BlockElementNode.prototype);
// Hook up the static properties
Object.setPrototypeOf(ParagraphNode, BlockElementNode);

const paragraphNode = $createParagraphNode;
const isElementNode = paragraphNode instanceof ElementNode; // => true
const isBlockElementNode = paragraphNode instanceof BlockElementNode; // => true

Typically updating a classes prototype in JS (and most languages) is bad practice for a number of reasons but the most obvious one is that it's an expensive operation, that being said for this use case it worked perfectly for me.

Thought it might help you or future people who stumbles upon this.