Feature: 'image by URL' editor component

[tomsabin]

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

Feature

- What is the current behavior?

- What is the proposed behavior?

• an alternative to uploading an image to Netlify CMS, by referencing an external image instead.

This is partially possible by registering another editor component (see below), but this new editor component gets in conflict with the existing image editor component (as it's using the same pattern match). However, this component calls the toBlock function correctly when first added into the rich editor block, but after changing context, the text is matched to the existing image component.

CMS.registerEditorComponent({
  id: 'image_by_url',
  label: 'Image by URL',
  fields: [
    {name: 'url', label: 'Image URL', widget: 'string'},
    {name: 'alt', label: 'Alternative text', widget: 'string'}
  ],
  pattern: /^!\[(.*)\]\((.*)\)$/,
  fromBlock: function(match) {
    // Netlify CMS doesn't seem to execute this function
    return {
      image: match[2],
      alt: match[1]
    };
  },
  toBlock: function(obj) {
    var url = obj.url || '';
    var alt = obj.alt || '';
    return '![' + alt + '](' + url + ')';
  },
  toPreview: function(obj) {
    // Netlify CMS doesn't seem to execute this function
    var url = obj.url || '';
    var alt = obj.alt || '';
    return '<img src="' + obj.url + '" alt="' + obj.alt + '" />';
  }
});

[erquhart]

I think we'd take a PR to update the current image widget with this.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.