Grapesjs: [QUESTION] Is it possible to add info modal on the editor

[ColinTenaguillo]

Hi,

I would like to add on the grapejs editor a clickable questionmark we can click so we could give information on what does this specific spec to the user.

It would open a modal with all the information that we could give when we add the property to a sector. Like you do in the webpage demo.

[artf]

Currently, there is no documentation about extending/updating style manager properties (I've just realized few plugins like grapesjs-style-filter and grapesjs-style-gradient but is not enough) and in all honesty, what I've done so far (as public API) it's not that solid, I don't like it. I'd like to reach the same result of customizing traits but we have to wait before reaching this change...

[ColinTenaguillo]

Here what i made today with a bit of modifications :

It's look i wanted now i juste need to find a way to put in the content i want in the modal

[artf]

Great, if you want to share your current solution with others it for sure will be appreciated :)

[ColinTenaguillo]

Hey, how can i publish my branch with my modification for a pull request ?

export default Backbone.View.extend({
  template(model) {
    const pfx = this.pfx;
    return `
      <div class="${pfx}label">
        ${this.templateLabel(model)}
      </div>
      <div class="${this.ppfx}fields">
        ${this.templateInput(model)}
      </div>
      ${this.templateModal(model)}
    `;
  },

  templateLabel(model) {
    const { pfx } = this;
    const icon = model.get("icon") || "";
    const info = model.get("info") || "";
    const name = model.get("name");
    const description = model.get("description");
    const parent = model.parent;
    return `
      <span class="${pfx}icon ${icon}" title="${info}">
        ${name}
      </span>
      ${!parent ? `<b class="${pfx}clear" ${clearProp}>&Cross;</b>` : ""}
      ${
        description !== undefined
          ? `<span class="trigger ${this.ppfx}pn-btn fa fa-question-circle" data-show-info title="${name}"> </span>`
          : ""
      }
    `;
  },

  templateModal(model) {
    const name = model.get("name");
    const description = model.get("description");
    const pfx = "gjs-mdl2-";

    return `
    <div class="${pfx}container">
    <div class="${pfx}dialog gjs-one-bg gjs-two-color">
      <div class="${pfx}header">
        <div class="${pfx}title">${name}</div>
        <span class="${pfx}btn-close" data-close-info>⨯</span>
      </div>
      <div class="${pfx}content">
        <div id="${pfx}c">${description}</div>
        <div style="clear:both"></div>
      </div>
      </div>
    </div>
    `;
  }

This is PropetyView changes i've done
I've also add css for these specific modal based on the css of the modal you use

[artf]

Hey, how can i publish my branch with my modification for a pull request ?

https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork

About the changes, as you were able to edit templateLabel in that case I'd just add the info icon and on click would use Modal API (so without rendering templateModal in all properties)