Editor component previews break when editor converts URLs into links

[crgeary]

- Do you want to request a feature or report a bug?

BUG

- What is the current behavior?

Editor components that contain URLs (and mailto:, tel:) links do not render previews correctly. An image has been included below as an example.

- If the current behavior is a bug, please provide the steps to reproduce.

Add the following editor component, and try to add a Hugo button shortcode that contains a URL and it should prevent the preview from rendering correctly. Screenshot above.

Example shortcode: {{% button href="https://google.com" %}}

CMS.registerEditorComponent({
    id: "button",
    label: "Button",
    fields: [{name: 'href', label: 'Hyperlink'}],
    pattern: /^{{\%\s?button href=\"(.*)\"\s?\%}}/,
    fromBlock: function (match) {
        return {
            href: match[1]
        };
    },
    toBlock: function (obj) {
        return '{{% button href="' + obj.href + '" %}}';
    },
    toPreview: function (obj) {
        return (
            'Link: ' + obj.href
        );
    }
});

Alternatively, clone chrisgeary92/netlify-cms-editor-issue, update the repo in config.yml and try it out.

- What is the expected behavior?

Expecting the toPreview function to be shown in the preview.

Input:

{{% button href="/test/" %}}
{{% button href="https://google.com" %}}
{{% button href="mailto:someone@example.com" %}}

Expected output:

Link: /test/
Link: https://google.com
Link: mailto:someone@example.com

[erquhart]

@chrisgeary92 odd, looks like it needs to be an html string to work properly. Also, I believe the url's are either being escaped or parsed differently.

This should all be resolved when #254 is merged.

[crgeary]

Awesome, thanks for the quick response! 👍

[erquhart]

This should now be resolved as of 0.5.0.