How to insert image (or update a component) from modal

[craigfairhurst]

Hi

I am currently opening a modal using editor.Modal.open({title: 'Stock Photos', content: 'Loading..' }); and then updating the modal with a custom UI, when the UI is interacted with a simple click of an image should send the user back to the editor from the modal. This can be done in a number of ways, eg:

• Storing element upon component create hook and then using $('iframe').contents().find('img#' + element)[0].src = this.src;
• editor.addComponents('<div><img src="https://path/image" /><span title="foo">Hello world!!!</span></div>');
• etc

The first causes GrapeJS to loose modifications as soon as the canvas is interacted with, the second only adds a component at the end of the canvas, not at the pointer. A more obvious way would be to use script in editor.Components.addType but that can't access code external to the canvas (and more importantly, the code creating the modal)

Can anyone relate to this issue, what should I be doing?

[craigfairhurst8]

Found this #3200 (comment)

I think it could help some others fwiw.

[craigfairhurst]

OK so this faces the same problem; global vars are not of any use inside the editor iframe.

[craigfairhurst]

Here is a codepen: https://codepen.io/Craig-Fairhurst/pen/KKrYWYp

When you add a Stock Photo (I'm using company logo here) and then later move that Stock Photo, it causes the changes made by vanilla JavaScript to be lost. I want to essentially do what happens in the Codepen, with GrapesJS using components instead of manually updating the JavaScript via vanilla code. See below for that code.

function imageClick() {
    alert('you clicked an image in custom ui');
 
    $('iframe').contents().find('img#' + element)[0].src = 'https://www.youds.com/images/logo.png'
   editor.Modal.close();
    ..
}

You can see, it works, but as soon as the image is dragged around, the image src value is lost.

The problem is, when you access script from the addType declaration, you don't get access to editor - so I can't close my modal or read input from it. Hence using vanilla JavaScript causes changes to be lost when you later alter the canvas.

I feel there is scope for this by passing parameters(?) which I will look at next.

[craigfairhurst8]

Hi

I’m thinking something as simple as editor.getSelected().append(‘<div>... may work here. I found it in the middle of some getting started guide. Great work but perhaps common use cases should be more easily available. Would love to contribute.

[craigfairhurst]

OK, so you get access to the component when creating the data type via the init method, simply storing the this reference when in the view's init function for use later worked for me.

var canvasElement;
editor.Components.addType('dataTable', {
		model: {
			defaults: {
				script,
				tagName: 'table',
				id: 'dataTable',
			}
		},
		view: {
			init() {
				console.log('Local hook: view.init');
				canvasElement = this;
				editor.Modal.open({
					title: 'Data Table', // string | HTMLElement
					content: 'Loading..', // string | HTMLElement
				});
				loadDataTable();
			},
			onRender() {
			
			},
		}
	});

And then when closing the modal, you can access via this:
canvasElement.model.append('<table>' + document.getElementById('dataTableOutput').innerHTML + '</table>');

[artf]

You can actually simply select the dropped component (eg. using the block.select property in your block defintion) and on custom UI update editing the selected component editor.getSelected().append(...

[craigfairhurst8]

Made sense. Thank you!