How to add toolbar to each (custom) ParagraphNode?

[nklhtv]

I am trying to use the Node Replacement api to extend ParagraphNode and replace it with my own.
My custom ParagraphNode has custom state props and in createDOM i use appendChild to add additional buttons and ui-controls based on the state.
It seems to work, but when i delete the last character of the text node inside, the entire content of the custom ParagraphNode is replaced with
, including my additional elements.

The way the drag-handle & "+" button are rendered in the playground does not work for me. I need those visible & accessible at all times for each ParagraphNode.

Extending from DecoratorNode might not work well, because i will have to handle the text myself and wont be able to do text transforms.

I am trying to migrate a codebase from platejs to lexical and in platejs such a thing is easy: https://platejs.org/docs/components/comment-toolbar-button

Is this possible in lexical?

[etrepum]

It should be possible with the internal and undocumented getDOMSlot API, but there is no guarantee that API will be stable. Otherwise there has to be a 1:1 correspondence between DOM children and lexical children

[nklhtv]

Interesting, i will try to do something similar to the table node here:

lexical/packages/lexical-table/src/LexicalTableNode.ts

Lines 259 to 280 in 5642c7b

	getDOMSlot(element: HTMLElement): ElementDOMSlot<HTMLTableElement> {
	const tableElement = !isHTMLTableElement(element)
	? element.querySelector('table')
	: element;
	invariant(
	isHTMLTableElement(tableElement),
	'TableNode.getDOMSlot: createDOM() did not return a table',
	);
	return super
	.getDOMSlot(element)
	.withElement(tableElement)
	.withAfter(tableElement.querySelector('colgroup'));
	}
	createDOM(config: EditorConfig, editor?: LexicalEditor): HTMLElement {
	const tableElement = document.createElement('table');
	if (this.__style) {
	tableElement.style.cssText = this.__style;
	}
	const colGroup = document.createElement('colgroup');
	tableElement.appendChild(colGroup);
	setDOMUnmanaged(colGroup);

but i wont be able to depend on experimental API in prod.

[etrepum]

The only issues for production use are that it is not tested for your use case, and that the API can change in any future release without warning. It's used in prod for tables. If you're not comfortable with that, you probably don't want to use lexical for this use case today, because the workarounds are worse (e.g. creating a lexical node for the button and writing all of the command listeners and/or transforms to pretend it isn't there)

[nklhtv]

@etrepum Do you think i could use a similar approach to what you use in the playground to render the drag handle and the "+" button with absolute position, when an element node is hovered, BUT render it for all element nodes at all times?

Update: Just saw that DraggableBlockPlugin is also EXPERIMENTAL

lexical/packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx

Line 450 in 5642c7b

export function DraggableBlockPlugin_EXPERIMENTAL({

[etrepum]

Yes, you could write your own plugin that absolutely positions some elements relative to other elements using a mutation listener