[QUESTION] Is it possible to add info modal on the editor
Question
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.

Answers (3)
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...
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
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}>⨯</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
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2364
[Question] How to add toolbar functionality to the layers panel.
I am trying to add the toolbar to the layers panel and I am not sure how to go about this. Is there any way to accomplish this? toolbar Whe...
Issue #508
If you add a checkbox trait, it does not render correctly in the settings panel unless there is also a text trait
A text trait and a checkbox: Results in: If checkbox only: The checkbox overlaps the label:
Issue #2592
Modal width
Hello, is there a way to set a modal's width, its currently set to 850px by CSS, but I would like to create a dialog with a small amount of...
Issue #394
Text: New div is created every time I hit enter instead of creating a </br>
Hi @artf Is there a reason why when inserting text a new div is created for every break instead of a standard </br> Is it possible to disab...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.