Custom widget: Incorrectly eaten value bug

**Describe the bug**
Using a custom registerEditorComponent the browser console shows the following error.

`Sent invalid data to remark. Plugin: HeroBlockmdx. Value: . Data: {"id":"a","type":"4"}
`

However, after having looked at several related issues (currently closed), this only happens when the component is not the very first element in the Markdown block.

So if i put this component as the first block with no leading space, it doesn't error. If i put this component after a return line, or another paragraph of text or another element, it throws this error.

Related issues.
- https://github.com/netlify/netlify-cms/issues/2440 similar issue but with native markdown elements rather than custom component.
- https://github.com/netlify/netlify-cms/issues/3682 Related to another issue with matching, which i'm unsure if is part of the problem or not

**To Reproduce**

Steps to reproduce the behavior.
1. Register a custom editor widget. ((widget embedded below)
2. Click on '+' and add the widget to the markdown
3. Make sure the widget is the first element within the markdown.
4. No error visisble.
5. Add a return line, or place widget after another element.
6. see error.

**Expected behavior**

Custom component should not log this error when its not the first element in the markdown.

**Screenshots**

**Applicable Versions:**

netlify-cms-app 2.13.3
netlify-cms-app.js:143 netlify-cms-core 2.34.0

**CMS configuration**
Standard page template.

**Additional context**

**_HeroEditorComponent.tsx_**
`cms.registerEditorComponent(HeroEditorComponent);`
```
import React from 'react';

export default {
// Internal id of the component
id: "HeroBlockmdx",
// Visible label
label: "Hero Block",
// Fields the user need to fill out when adding an instance of the component
fields: [
{name: 'id', label: 'Asset ID', widget: 'string'},
{name: 'type', label: 'Asset Type', widget: 'string'}],
// Pattern to identify a block as being an instance of this component
// (?:^ the ^ was suggested to help with matching multiple components on the page.
// ...(.?)... Lazy match child elements of the block.
// ms not using g i think helped correctly match when multiple components on the page.
//pattern: /(?:^)(.?)(?:<\/HeroBlock>)/ms,
// See if different pattern from above makes a difference.
pattern: //ms,
// Function to extract data elements from the regexp match
fromBlock: function (match) {
let data = match[0];
console.log("fromBlock(match) : " + data);
const r = RegExp(/(?:^)(.?)(?:<\/HeroBlock>)/ms)
data = r.exec(data);
data = data[1];
data = JSON.parse((decodeURI(data)));
console.log("fromBlock(data) : " + JSON.stringify(data));

// Some validation.
if (data == null) {
data = {id: "none", type: "none"}
} else {
!data.hasOwnProperty("id") ? data.id = "none" : null;
!data.hasOwnProperty("type") ? data.type = "none" : null;
}
console.log("fromBlock() data validated : " + JSON.stringify(data));
return data;
},
// Function to create a text block from an instance of this component
toBlock: function (obj) {
const data = JSON.stringify({
id: obj.id || "none",
type: obj.type || "none",
});
console.log("toBlock() Data:" + JSON.stringify(obj));
return ``
},

// Preview output for this component. Can either be a string or a React component
// (component gives better render performance)
toPreview: function (obj) {
console.log("toPreview: "+JSON.stringify(obj));
return (
//

);
}
}
```

I'm actually trying to solve a bug where i have 2 custom components and if i have multiple components on the page some of the components won't render.

This happens when the following occurs (Where and are using the above duplicated code.)



Component B won't be detected by the markdown and display the custom editor.

Checking the logs showed the only erroring being this incorrectly eaten value issue. So before raising this as a bug i wanted to illiminate the incorectly eaten value issue for custom components.