Hi!

I'm experiencing some issues with creating custom widgets that are inline with the text, like this

Lorem ipsum dolor sit amet, <Navigation item="more"/> consectetur adipiscing elit.

I'm expecting this to show a selector that writers can use to select a navigation item when using rich text, but none is shown and the preview text is also not shown.

This works fine when they are on their own, like this

Lorem ipsum dolor sit amet,

<Navigation item="more"/>

consectetur adipiscing elit.

This shows a selector that the writers can use to select a navigation item when using rich text

So is it possible to even get it to show custom widgets when they are inline, like bold or italic? Or am I trying to do something that is not possible to do with custom widgets currently?

Image showing the issue:

CMS.registerEditorComponent({
	id: "navigation",
	label: "Navigation",
	fields: [
		{
			name: "item",
			label: "Item",
			widget: "select",
			options: Object.keys(itemMap).map(key => {
				return { label: itemMap[key].text, value: key }
			}),
			required: true
		},
	],
	pattern: /<Navigation item="([a-zA-Z\-_]+)"\/>/,
	fromBlock: function(match) {
		return {
			item: match[1] || 'library',
		};
	},
	toBlock: function(obj) {
		return `<Navigation item="${obj.item || 'library'}"/>`;
	},
	toPreview: function(obj) {	
		return `<p>${obj.item || 'library'}<p/>`
	},
});

This code is the code for the custom widget. It gives a warning on all items that are inline for example Sent invalid data to remark. Plugin: navigation. Value: <Navigation item="more"/>. Data: {"item":"more"}. I have tried looking for a solution but I have not found one.