Grapesjs: Thanks and Question(s)

[integrateddigital]

@artf ,

Thank you very much for grapesjs, it is beyond great, it is fantastic.
I'm struggling on 3 things, that are probably trivial for you, I've read all questions in the Issues and couldnt find it (with the exception of the upload question)... I would be grateful any help ..

1) What precisely is the the guideline to add new icons to new/custom blocks ? From what I have understood following the logic, there is a font before: 'letter with graph' , from the awesome icon font. Is the idea then that one adds new icons by editing the font ? I tried fontforge but was unable, so I wonder is this the right way before I go down the font rabbit hole ?

2) I've noticed a difference in the demos, where one has the 'New Block' button, which is great, I was able to add that button to my custom version, but somehow is not invoking the code, .. maybe I'm overwriting the method or not calling the right command, .. it seems to match the tutorial on your wiki (thanks for the wiki!) .. please, what is the right way to map and invoke that button ? Or is that a functionality(new block) that you decided not to have ? It's nice because you can quickly create a block that fits uneven angles.

3) How would I go about (roughly) on replacing the filestack plugin with google's filepicker - the functionality that I like is the web search, it is very handy to be able to get images from the web from searches directly from the Canvas; the filestack plugin works great, but it is too costly, I wish to overwrite that for image uploading on the image block as well as on the style manager's background-pictures-layers ( they seem to be calling different routines?!) ..
Whilst I dont expect anyone to fully give me the solution, I would be grateful
if someone could point me on a direction that would help on the 3 thingies above.

Thanks for this great library, and thanks in advance for any help,
txs,
Sergio

[artf]

thanks @integrateddigital glad to hear you like the tool.

1. Honestly, in the last period, I thought about it and came to the conclusion that is much more easier to manage icons directly with SVG and the last plugin (grapesjs-plugin-forms) is the result. You don't have to include extra files, SVG are extra lightweight and you have more control over customization. Here is the example
   of the icon taken from forms plugin:

editor.BlockManager.add('input', {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z"></path>
        <polygon class="gjs-block-svg-path" points="4 10 5 10 5 14 4 14"></polygon>
      </svg>
      <div class="gjs-block-label">${c.labelInputName}</div>`,
      category: 'Forms',
      content: '<input class="input"/>',
    });

I've just added to svg elements few class helpers for the color and size customization

1. I don't get about what 'New Block' button you're talking about and what do you mean "is not invoking the code"? You don't see the content in the editor? Can you post the snippet of the code?

2. Honestly, I didn't know about the google's filepicker, would be cool to have also its own plugin but unfortunately, I busy with other stuff right now.
   Anyway, all the code for the picker is here https://github.com/artf/grapesjs-plugin-filestack/blob/master/src/main.js just 100 lines of code, I don't think is hard to read. The important parts are:

Intercept when the asset manager is called and attach the button for the picker

 editor.on('run:open-assets', () => {
 ...
btnEl = document.createElement('button');
...
assetsBody.insertBefore(btnEl, assetsHeader);
});

The button has a click handler for opening the picker

btnEl.onclick = () => {
   fsClient.pick({/* OPTIONS */}) // <-- Filepicker init
  .then((objs) => {  // <-- Filepicker callback
          const blob = objs.filesUploaded;
          const blobs = blob instanceof Array ? blob : [blob];
          let assets = addAssets(blobs);  // <-- Call my helper
        });
      };

The helper (might be similar for other pickers)

const addAssets = (files) => {
    const urls = files.map((file) => {
        file.src = file.url;
        return file;
    });
    return editor.AssetManager.add(urls);  // <-- GrapesJS's API
  };

[integrateddigital]

Hi Artur ( @artf ),

Thanks for the detailed explanation !

1.Perfect, thanks !

1. I've attached a picture of the button and the code ... sorry for not explaining well, the command name is 'create-comp' ( legend Create Element ) ... I tried removing the hello world, but nothing happens when button clicked, not sure how to trigger the actual routine .... any help would be great.
2. Oh, ok, Thanks ! I will try to create a new plugin, .. if I succeed, I will share :-)

Also, I meant to ask, does the builder work on any mobile device ? ( I've tried Android, iOS.. ).

again, thanks for your kind answers,
best,
s

[artf]

yeah, I've removed that button from the default list but the command is still there, so you don't have to overwrite it, just add a button with the command

var newButton = editor.Panels.addButton('myPanelID', {
    id: 'create-comp',
    className: 'fa fa-pencil-square-o',
    command: 'create-comp',  // <-- the ID of the command
    attributes: { title : 'Create element' },
    stopDefaultCommand: 1,
});

About mobile device, currently, I don't plan any kind of support

[integrateddigital]

Thanks @artf, that worked ( I had that, but I had a command.add later on that was preventing...)

As per mobile, if one were to work on it, where would one start ? :-)

[artf]

I'd definitely start from designing the interface, honestly I hardly believe is possible to create a builder which is work also on mobile, I mean you can reduce/remove a lot of stuff and just let the text editing (maybe moving some block), but not sure if it worth it.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.