Home
Support Forums

Registering Editor Components, issues with text selection

I’ve managed to get my preview to correctly render MDX, so I’m now trying to add a custom button on the editor to quickly add my component.

This seemed pretty straight forward so I just went ahead and changed the example’s code:

    CMS.registerEditorComponent({
      id: "quote-block",
      label: "Quote Block",
      fields: [
        {
          name: "details",
          label: "Details",
          widget: "markdown",
        },
      ],
      pattern: /^<Quote>$\s*?\n(.*?)\n^<\/Quote>$/ms,
      fromBlock: function(match) {
        console.log("fromBlock", match);
        return {
          details: match[1],
        };
      },
      toBlock: function(data) {
        console.log("toBlock", data);
        return `<Quote>\n${data.details}\n</Quote>
        `;
      },
      toPreview: function(data) {
        console.log("toPreview", data);
        return `<Quote>${data.details}</Quote>
        `;
      },
    });

This correctly adds a new button and when I click on it the block appears:

Unfortunately it does have some weird issues.

  1. If I write some text select it and then add my custom block, I would expect that text to be inside my block, instead it’s entirely empty. Then, if I switch to markdown mode I can see the output is also not correct. It’s added two new lines and the string hasn’t been parsed correctly.

  2. If I then switch back to rich text it formats it correctly, but again with the wrong string:

Is there any way to make it function as such:

  1. Select text I want to be inside my block
  2. Select which block I want
  3. View the selected text inside the newly made block

?

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution! Additionally, I am tagging @tomrutgers as he is active with the Netlify CMS and may be able to help you here :slight_smile: