Hi @artf , When I have several elements nested in the Layers panel then some elements names are truncated because the Layer panel's width is not big enough, I know that custom resizable panel can be a solution but adding a title attribute would be enough for the majority of the use cases. A tooltip (title) would be he...
artf
Yeah, why not... would you like to create a PR? :)
Franci5co5aoco
@artf of course, thanks! I'm going to create the PR...
GJSBlock
Thanks for reporting this, @Franci5co5aoco. Great question about FEAT: Add a title attribute to the Layers panel elements. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation...
Version: Latest You can get the version by typing grapesjs.version into the console Are you able to reproduce the bug from the demo?[X] Yes[ ] No What is the expected behavior? Component with empty body should not be populated with default content. What is the current behavior? When we create an empty node and pass it...
artf
You have defined the default content in the component definition, so, an empty one will use that as default. Just move that content from component definition to the paragraph block.
harsh201
@artf Any help here?
harsh201
Thanks @artf! Completely forgot about adding at block level.
Hi, thank you for reviewing my problem. I want to use my own JSEditor to edit htmlγcss and js. 1γFirst, I use getHtml, getCss, getJs to display the code in my JSEditor. And I found that the JS code is compressed. How can I get an Uncompressed code? I use editor.CodeManager.getCode(model, 'js') and it's also a compress...
artf
The script used by components with JS relies on the same code from your source. For example, if you create a plugin and then build it with webpack/babel, then the component will print the result from build. I guess you could create separat...
xinnai
@artf Hi, I'm not sure if you understand my question. I want to edit the js code in my own js editor, first I set the js code from your editor using getJs(), but it looks like this in your demo.html: These code are all compressed. I want a...
artf
autoBeautify is an option passed to CodeMirror but in any case, it might beautify the code but it won't uncompress it as the code itself is stored like that in the component
Version: 0.16.44 Are you able to reproduce the bug from the demo?[x] Yes[ ] No Set editor.Parser.getConfig().keepEmptyTextNodes = true; in the console and then attempt to drag a form into a 2 column plugin. What is the expected behavior? Describe the bug detailed From my observation a keepEmptyTextNodes will throw an...
artf
Well, yeah makes sense, probably we should take the first "valid" element (the one which actually supports matches). But I'm also curious to know your case for the use of keepEmptyTextNodes. A few days ago I was actually thinking about rem...
neilkyoung
@artf A system we use for web page authoring implements this. Although we have now managed to convince them to disable this thanks to your comment above :-D
artf
Great, I'll close this then. Let me know in case there is something wrong/different with that change on your side
Hi! I have tried adding jquery in canvas as well as in index.html I am adding it in canvas like this- canvas = editor.Canvas; const script1 = document.createElement('script'); script1.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; canvas.getDocument().head.appendChild(script1); and in html page I have added it a...
artf
Here you can see how to load dependencies properly https://grapesjs.com/docs/modules/Components-js.html#template-related
GJSBlock
Thanks for reporting this, @RutujaBadbe. The error ReferenceError: $ is not defined occurs when Canvas attempts to access properties before the component lifecycle is fully initialized. This is a common race condition in GrapesJS. Immediat...
Hello, Is the Facebook social media component intended to be used to provide a Facebook link to a business or organizations Facebook page or is it exclusively designed to share something specific to your timeline? It appears to be the latter, even though that seems counter-intuitive to me since many emails simply prov...
artf
I guess you're looking for this https://github.com/artf/grapesjs-mjml
HeyWrecker
Ah, my mistake, then, thank you!
HeyWrecker
As a follow-up, I have confirmed that the Instagram social component does link to the IG profile page. Whereas the Facebook option does not link to the Facebook page.
Hi, Thank you for your work. I get a problem. I want to make a codepen-like view and want to make the grapesjs view to be dragable up and down. But when I drag it the tools go to the wrong position and also the hover highlight elements's position is wrong.I tried splitjs and other split open source code and always got...
Ju99ernaut
You can try running editor.refresh()
xinnai
@Ju99ernaut Thank you very much, you save my day!
GJSBlock
Thanks for reporting this, @xinnai. Great question about gjs-cv-tools in a wrong position when I put grapesjs in a splitpanes. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentat...
Hi, I am building a solution for students to tell their high school experiences as slides built from grapejs editor (similar to canva), and have configured the editor in 'absolute' mode, which works wonderfully. However I can't seem to find a way to move the dropped block in the editor with the arrow keys. I am aware...
artf
No, unfortunately, for such a case, the custom keymap would be the only solution. You should just get the selected component and update its style.
michaelhofer
I have found a working solution for this as follows: The commands are being added as follows: The moveSelectedElements method just does the following: However, when moving the elements with arrow keys, the canvas scrolls as well, which is...
There are lots of click required to make text editable, can we make text field editable on a single Click. I know, Single click can get annoying when dragging around blocks and that's pretty standard already, but in my scenario, i want edit on just single click, if it is possible then plz guide.
Thanks for reporting this, @fahad157. Thanks for sharing your report about Single click text edit. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your GrapesJS versio...
I have a component using the background-url Style Manager property: I would like to reuse this UI that is shown in the Style Manager for a background URL trait that shows up under "Settings": Is it possible to make a Style Manager property behave like a trait and show up in the "Settings" section, or would I have to c...
artf
Unfortunately, it's not yet possible, but there is a plan to add soon a new UI module that should allow the reuse of UI elements
zachsnoek
:+1: Thank you!
GJSBlock
Thanks for reporting this, @zachsnoek. Great question about Creating trait with Style Manager property UI. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your spe...