Simple editor plugin with markdown field doesnt work

Netlify CMS
1

I have created and successfully registered this editor plugin:

const Example = ({children}) => {
  return (
    <div className="my-6 px-6 pt-5 pb-4 small rounded" style={{background: '#ffffff'}}>
      {children}
    </div>
  );
}

export default {
  id: 'example',
  label: 'Example',
  fields: [{ name: 'text', label: 'Text', widget: 'markdown' }],
  pattern: /----Example----(\S+)----ExampleEnd----/,

  fromBlock: match => {
    console.log(match)
    return { text: match[1] || "" }
  },

  toBlock: obj => {
    console.log(obj)
    return `----Example----${obj.text}----ExampleEnd----`;
  },

  toPreview: obj => {
    console.log(obj)
    return (
      <Example>
        {obj.text}
      </Example>
    )
  },
}

When creating and editing this custom widget in the Netlify CMS, everything works fine as long as I am entering the text in a single line but as soon as I create a new line in the “text” field or even just make some text bold on the same line, it just breaks. This is what the html looks like when its broken:

<p>----Example----<strong>dfdf</strong> dfdfsd----ExampleEnd----</p>

When text is just regular text on the same line, it prints it correctly:

<div><div class="my-6 px-6 pt-5 pb-4 small rounded" style="background:#DCEDC8" data-reactroot="">dfdfsd</div></div>

Is the pattern simply not compatible with markdown/multi line separators or am I missing something here?

2

Hi @yolorob and sorry for the late reply.
Do you mind opening a new bug report for this in the CMS repo?

If you can, please share an example repo as it would make it easier for us to reproduce.