Hi guys, this issue is an overview of what is it, what is done, what to do and nice-to-have to complete the Designer Mode feature.Preface So let's start by describing what is it and what is the goal of this feature. The Designer mode should allow the user to drag components freely around the canvas, without HTML fixed...
artf
Quick update, from the https://github.com/artf/grapesjs/releases/tag/v0.15.3 you can start using these new Drag Mode APIconfig.dragMode - The initial configuration for the global drag modeeditor.setDragMode - change the global drag mode of...
artf
@simplecommerce When clicking on device modes, if using absolute positioning, would create the styles only for that mode, it would make it easier to build responsive pages, as you could toggle between the device modes and position your ele...
artf
@sunhillbd yes, but probably it's my fault for not being totally clear about the point. Basically, what you see in the demo is an example of mixing static position with absolute one, when you click on the drag icon you detach the component...
I have an input trait, I want to change the 2 attributes (name and type) on the selected input element, on canvas is appropriate, but in the final html(editor.getHtml()) it doesn't work, I've read https://grapesjs.com/docs/modules/Components.html#define-new-component but I didn't find a solution, Thank's
artf
You should change the model and not the view element this.model.setAttributes({ 'data-attr': 'value' })
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.
Hi, I am trying to understand how I can achieve the following.Create a component with a default content as children.Create a block to add that component to the canvas.Edit the component children to anything else and save the HTML result.Reload the component in the editor later on and continue editing. My issue is the...
artf
@simplecommerce a working example of a custom component with default children (it uses local storage) https://jsfiddle.net/t5yw48cs/ Try to review the way you store/load templates, maybe the issue is there https://grapesjs.com/docs/modules...
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.
I'm trying to implement an attr binding on one of my components using Knockout.js. It works perfectly fine otherwise but the same implementation does not work in a grapesjs-preset-webpage format. What could the issue be?
artf
Sorry @sakshigarg9 but this question is out of scope of this issue tracker
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.
Hi all We're working on a newsletter app and are using grapesjs as the email editor with the newsletter preset plguin and some custom changes. We store the HTMLs in our database and I noticed that some templates take a very long time to load with the editor.setComponents method. I tried to load the templates in the de...
artf
This shows you how to find issues with performances https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
artf
Hi @iggolob can you provide an example of a template and exact steps to reproduce the issue (talking about the fact is slower when you select a component)?
iggolob
Hi @artf The news letter demo page can be used to reproduce the issue ( https://grapesjs.com/demo-newsletter-editor.html ). As a template you can use the preset HTML set for the demo page. Just copy the HTML from Export template option. No...
Hey, I have a component which has a JS attached to it. Everything is created using the JS. When I drag and drop my block for the first time, the JS runs fine and everything works nice. When I load an existing template, it seems the JS is not running. The JS creates some DOM elements like a DIV and CANVAS but they are...
artf
Hi Arthur, are you able to create a demo of the issue?Other problem: the data-gjs-type is changed to default instead of keeping my custom component type name when the template is loaded. It seems the isComponent method is not called when I...
ayazhussein
I'm having the same issue. When I drop a Component with a script, it works but after I refresh, it doesn't You can test it out grapesjs-component-countdown, after you refresh, the digits don't show up. this is my config ( it is used in an...
no-response[bot]
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...
Have the same issue like in 1408. You said that JSON should be imported instead of the HTML. Can you tell me please how to import JSON template? I can't find the solution. On 'storage:store' I fetch an object: { assets: "", components: "", css: "", html: "", styles: "" } Then I run command: let emailTemplateStr = edit...
yrbn
Sorry, I found the solution when was reading my own question))) components and styles are strings. For those, who is searching for solution: editor.setComponents(JSON.parse(value.components)); editor.setStyle(JSON.parse(value.styles));
anish2690
@artf if I use <strong>text </strong> importer template will fail and convert text element into box sample template to reproduce the issue. #1906
svalenciano81
Sorry, I found the solution when was reading my own question))) components and styles are strings. For those, who is searching for solution:editor.setComponents(JSON.parse(value.components));editor.setStyle(JSON.parse(value.styles)); what...
Hey, Trying to get GrapesJs work for a project I'm currently working on. But is there a way to disable the built-in components that convert div & span into editable components (or change the isComponent so I can add a class/data flag). Because I don't want all div's & span's editable only the ones I say need to be edi...
simplecommerce
@JoeriAben did you try this? https://grapesjs.com/docs/modules/Components.html#improvement-over-addtype
artf
Create a custom text-editable component by extending the text one. Then extend the text component by setting editable to false. Now in your template use data-gjs-type="text-editable"
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.
OS: Windows 10 x64 Browser: Chrome 72.0.3626.121 x64 GrapesJS: v0.14.55 Hello, I have some custom components (bootstrap tabs) in a plugin, for some reason some of the components of the plugin are not being detected by GrapesJS when loading it from the container elements, and others via dragging and dropping into the e...
artf
As you see, its type is div... this is why it never reaches the other type... look why and where that type is declared
kaoz70
Alright, that was the issue! I thought that the 'div' type was a default one set by GrapesJS. Thanks for all the help!
For example, I have a parent component and this parent component has 4 child components. Here with trait functionality, I want to move the 3rd child component to 1st position likewise. I am able to move a component from any position to last by removing it from the existing position using component.remove() and adding...
artf
Use at, as an index, in options, eg. component.append(comp, { at: 0 }) will place the comp as a first element
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.