Custom Editor widget for netlify cms to add shortcode

index.html

	<!-- Bottom Part of the index.html inside amdmin directory. The UI element is in spanish because of the prject I'm working on right now. Also If you use the id "image"you apparently overwrite the default image widget which you can or cannot want -->
  
  <script>
CMS.registerEditorComponent({
  // Internal id of the component
  id: "imagen",
  // Visible label
  label: "Añadir Imagen",
  // Fields the user need to fill out when adding an instance of the component
  fields: [{name: 'id', label: 'Lugar del Imagen', widget: 'image'}],
  // Pattern to identify a block as being an instance of this component
  pattern: /{{< image name="(.+)" >}}/,
  // Function to extract data elements from the regexp match
  fromBlock: function(match) {
    return {
      id: match[1]
    };
  },
  // Preview output for this component. Can either be a string or a React component
  // (component gives better render performance)
  toPreview: function(obj) {
    return (
      '<img src="' + '/images/' + obj.id + '" alt="image"/>'
    );
  },
  // Function to create a text block from an instance of this component
  toBlock: function(obj) {
    return '{{< image name="' + obj.id.substring(8) + '" >}}';
  }
});
	</script>