Inline custom widgets

[ghostbear]

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.

[doompadee]

Same issue here. I'm trying to integrate custom Hugo shortcodes with the editor, but it currently does not seem possible which makes Netlify less ideal if non tech-savvy writers are involved.

[rudasn]

Anybody had any luck with getting inline custom editor widgets to work?

I'm also looking into using the rel or refrel Hugo shortcode into the Richtext editor to allow users to add links to other parts of the site using the shortcode (as opposed to copy & pasting a URL). Any links created with this widget should be displayed inline (not block) in the Richtext view (as well as the end result, obviously). The widget would allow to select a page to link to, specify the title, and other properties like target).

From my understanding, that would require a way to specify to netlify that the custom widget (let's call it the Hugo Links widget) should be rendered as an inline element in the richtext editor (using a text slate object as opposed to a block).

Then, using a customised version of the existing Object widget we could display the HugoLinks widget inline with the text, click on it to expand/edit the properties, and click again to toggle back to inline.

I just started to look into netlify a couple of days ago so this may not be right approach, so I would greatly appreciate the input of more experienced members. The ability to not easily handle links is kind of a deal breaker, especially for non-technical users.