Inline editor components?

[stripesfensky]

Hello! I was reading through this issue and the associated Decap issues, and I have an inline Hugo shortcode that I would like to place into my content with the rich text editor. However, I don't see anything that I can use in any documentation or issue to distinguish the component as inline.

The shortcode is only added to my content as a block with clear paragraphs separating the shortcode from the content preceding and following it. Am I missing something with this?

We're trying to prepare for a move from Decap to Sveltia in mid-2026, pending open authoring and editorial workflow, and inline components is something that would help our non-technical users make edits more easily!

For reference, here is the sample code I am using to do this:

CMS.registerEditorComponent({
  id: "wiki-link",
  label: "Wiki Link",
  fields: [{ 
    name: 'title', 
    label: 'Page Title', 
    widget: 'string' 
  }],
  pattern: /{{< wiki-link "(.*?)" >}}/,
  fromBlock: function(match) {
    return {
        title: match[1]
    };
  },
  toBlock: function(data) {
    return `{{< wiki-link "${data.title}" >}}`;
  },
  toPreview: function(data) {
  return ``;
  }
});

[kyoshino]

UI-wise, there is no difference between block and inline. You should still be able to insert the markup inline... Perhaps you have to switch to raw Markdown mode to edit the content.

An inline UI may be feasible but tricky, because the CMS doesn’t know what kind of fields would be provided. I’ll revisit this after 1.0 is out.

[kyoshino]

Actually the Lexical Playground has a good example. Click Insert and select Date, and you’ll get an inline date component. Sveltia CMS could implement a similar one.

[stripesfensky]

Thank you for that — I wasn’t even thinking of having the content show up in the line; only a button hinting that there is a component of a custom type, to be clicked on to show its custom configuration, and saved to collapse back into the paragraph without inserting a line break anywhere.

However, since Lexical seems to provide a possible option to show the content, I am not opposed to a feature like that!

I’ll try using the raw Markdown mode of the editor tomorrow and see if I get the same result. Much appreciated!

[stripesfensky]

Sorry it took me a few more days than anticipated. The insert button is not available when the widget is markdown. However, I did type something then insert the shortcode, then switched to raw text and saw it was inline. I then added additional text after that, switched back to Markdown mode, and saw that there were no blank lines between the text above, the shortcode widget, and the text below.

Is it possible to add custom editor components in when you are in raw text mode?

[kyoshino]

Is it possible to add custom editor components in when you are in raw text mode?

It’s on my todo list. Will work on it after the 1.0 release. Decap CMS also has the same issue for a long time, and we have to deal with it:

• Add markdown toolbar functionality for raw markdown editor decaporg/decap-cms#909
• markdown editor: allow image upload / do not disable "Add Component" button decaporg/decap-cms#4611
• Adding images without rich text editor decaporg/decap-cms#6497