Problems trying to load and save

[gordon-matt]

I recently found GrapesJS and it looks fantastic. I'm currently attempting to integrate the MJML editor into my app and stuck at trying to save and load my templates. I have spent quite some time going through various documentation (such as this: API Storage Manager) and some issues in the main repo related to remote storage, but I am still a bit stuck and would appreciate some assistance. My JS is as follows:

<script type="text/javascript">
        var editor = grapesjs.init({
            fromElement: 1,
            container: '#gjs',
            plugins: ['gjs-mjml'],
            pluginsOpts: {
                'gjs-mjml': {/* ...options */ }
            },
            storageManager: {
                //id: '',
                type: 'remote',
                stepsBeforeSave: 2,
                autosave: true,
                autoload: true,
                urlStore: '/email-templates/save/@Model.Id/@WorkContext.CurrentCultureCode',
                urlLoad: '/email-templates/load/@Model.Id',
                contentTypeJson: true,
            }
        });
    </script>

I have the following class for receiving storage attributes:

public class GrapesJSStorageData
{
    [JsonProperty("gjs-assets")]
    public string Assets { get; set; }

    [JsonProperty("gjs-css")]
    public string Css { get; set; }

    [JsonProperty("gjs-styles")]
    public string Styles { get; set; }

    [JsonProperty("gjs-html")]
    public string Html { get; set; }

    [JsonProperty("gjs-components")]
    public string Components{ get; set; }
}

NOTE: I didn't find those attribute names in your documentation, but rather from observing what GrapesJS posts to the server (it would be better if it was documented, and if it is already documented, then somewhere easier to find).

And the following are my Save and Load methods in my controller (I am using ASP.NET Core):

[Route("load/{id}")]
public async Task<IActionResult> Load(Guid id)
{
    // TODO: Not sure of correct response.. but this is here temporarily to prevent error when editor starts
    return Json(new
    {
        keys = new[] { "item1", "item2" },
        clb = ""
    });
}

[HttpPost]
[Route("save/{id}/{cultureCode?}")]
public async Task<IActionResult> Save(Guid id, string cultureCode, [FromBody] GrapesJSStorageData data)
{
    //TODO: My implementation of saving in DB

    // TODO: Not sure of correct response
    return Ok();
}

Basically I just need to know what to respond with from server to client. Can you provide the JSON format for me, please? And also an example of what to do on the client side (if anything) once it has been received.

Any help would be much appreciated. Thanks.

[gordon-matt]

I have made a little progress by implementing my code as follows:

[Route("load/{id}/{cultureCode?}")]
public async Task<IActionResult> Load(Guid id, string cultureCode)
{
    var model = await emailTemplateVersionRepository.Value.FindOneAsync(x =>
        x.EmailTemplateId == id &&
        x.CultureCode == cultureCode);

    if (!string.IsNullOrEmpty(model.Data))
    {
        var data = model.Data.JsonDeserialize<GrapesJsStorageData>();
        return Json(data);
    }
    else
    {
        return Json(new GrapesJsStorageData());
    }
}

[HttpPost]
[Route("save/{id}/{cultureCode?}")]
public async Task<IActionResult> Save(Guid id, string cultureCode, [FromBody] GrapesJsStorageData data)
{
    var entity = await emailTemplateVersionRepository.Value.FindOneAsync(x =>
        x.EmailTemplateId == id &&
        x.CultureCode == cultureCode);

    entity.Data = data.ToJson();

    await emailTemplateVersionRepository.Value.UpdateAsync(entity);

    // TODO: Not sure of correct response
    return Ok();
}

So it's definitely saving and loading fine. But there is still an issue with not knowing what response there should be for the save action, and just returning Ok() (which is an HTTP 200 response) throws an error - something along the lines of "error at line 1, column 1, etc...".. which seems to point to the fact that it expects some sort of JSON response. Could someone please tell me what exactly that should be? I've tried looking in the grapesjs source code, but not having much luck with that so far, so any help would be much appreciated.

[gordon-matt]

It seems that simply returning an empty JSON response works just fine. In my case, the following:

return Json(new { });

This is somewhat odd though, as why is any response required at all in that case? Surely just returning an HTTP 200 should do the trick if it's just a "fire and forget". However, another alternative might be to actually expect a response - something like the following:

{
    success: true/false
    message: 'This would be further details in the case of an error when saving.. or if everything is fine, then a custom success message or just blank'
}

In this way, the user can be informed if there was a problem when saving the template. What do you think?

[artf]

https://github.com/artf/grapesjs/issues/759#issuecomment-357953544