I'm building a custom textarea component and want it to behave like the built in text component such that editing the textnode on the grapesjs canvas updates the textnode found in .components. And I want the component exported as HTML correctly e.g. <textarea>MY user edited TEXTNODE CONTENT</textarea>. At the moment,...
artf
Hi @abulka, as the editing is happening in the view, you should update the component model once the view is updated. So it should work with something like this
GJSBlock
Thanks for reporting this, @abulka. The issue with how to make textnode editing update component content? appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM mod...
Version: Reproduced in codepen below using 0.16.34 (returned from https://unpkg.com/grapesjs) and 0.16.22 in a Preact project Describe the bug detailed A custom GrapesJS component calls its view's "onRender" function when the component is rendered to the canvas. Per the documentation: I would expect this to be called...
GJSBlock
Thanks for reporting this, @Dmurl5. The issue with Custom component view onRender is called early appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modificatio...
Hey @artf, I am taking javascript input from the user. I need to add this javascript inside the template HTML but it gets sanitized. Is there a way that I can turn off the sanitization? (I don't have an issue with the problems you mentioned in #3245 ) or can you add a property in the editor like allowSanitization: fal...
theSC0RP
I tried adding the script to the iframe in which the canvas renders by adding a <script> tag at the end of the body of the iframe. This works to some extent. The problem here is that when I need to update the js inside the script I will ne...
artf
Can you provide a reproducible demo of your issue, please?
theSC0RP
Thanks for the reply @artf. I was doing a mistake while updating the iframe so now my problem is solved! Just another question, is there any built-in method to refresh the iframe?
Hi, We are encountering an issue - color of property name such as "Width" is blue when dragging a new component to canvas, but we don't modify its value. Grapesjs is powerful, and very helpful to us. However, we are new to grapesjs, and have spent much time on this issue with no progress. Would you please tell us the...
artf
Hi @luziye9 for sure you're using a block/component with a custom style property on it... Anyway, if you're opening a BUG issue, you have to follow the template (grapesjs version, reproducible demo, etc.). So, for now, I'm closing this as...
GJSBlock
Thanks for reporting this, @luziye9. Great question about How does the property color changes to blue when value changed?. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation fo...
I was fiddling with ways that you could change the style of elements inside the canvas and i noticed that by using the color-picker trait to set the inline style color property of the element (not the inline style tag that you get through the getCS() ), that style property was completely gone when getHtml() was used.I...
artf
Hi @DodoTrip the reason is that with inline CSS you can't define styles with states (eg. :hover) and media queries, so I've always seen it as a useless limitation instead of a feature. Despite that, you can still use that option if you don...
ThetripGr
Hi @artf and thank you, for your reply. Mind giving me an example on how it is done right now or should avoidInlineStyle make it work easily?
artf
Honestly, I've stopped using avoidInlineStyle a long time ago, but I guess it should work π
I write html strings as blocks, and need to introduce a lot of external scripts and styles, but I tried all the methods, when I drag the block to the canvas, the script does not take effect, but styles can be loaded,I hope to get helpγLoad by appendchildinit load by canvas:{scripts:[...]} who can help me?
harsh201
@sizhousama I am loading scripts/stylesheets via canvas while initializing grapesjs editor and it works for me. More details can be found here. Hope it helps!
sizhousama
The console shows loaded
GJSBlock
Thanks for reporting this, @sizhousama. Great question about [Question]: How to load external javascript,i tried all methods,Useless. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS...
Hi, I have the following issue: I need an event type editor.on ("sorter: drag: end") which is thrown in all these cases: (detect what element and where I'm dropping it) 1- let it hear when you drag and drop an element from the blockManager and drop it on the canvas. 2- let it hear when you drag an already componentize...
bgrand-ch
Hello, For future questions or technical issues, which aren't bugs, GitHub's Discussions tab is the place to be. Don't forget to close this issue if it is resolved or write a new detailed message in Discussions -> Q&A category (and close t...
GJSBlock
Thanks for reporting this, @matiasmasciotta. Great question about DRAG AND DROP COMPONENTS:. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Lo...
I've been playing with GrapesJS and trying to integrate it into a Symfony 5 project. In particular I want to be able to edit templates in the editor based on Bootstrap 4 and other components like FontAwesome Pro and custom blocks based on these. I use Symfony's Webpack-Encore bundle to generate the scripts and style f...
ianef
That's a real shame. I didn't say anything about fetching from another site, what I wanted to do was keep it consistent with the rest of the project. Oh well, I'll keep looking elsewhere for an editor that integrates better with the curren...
artf
Hi Ian, if you need to load HTML content from a URL I can only suggest fetching it server-side and initialize the editor with that content (loading external resources in the browser would mostly hit the cross-origin issue), so, for how bro...
GJSBlock
Thanks for reporting this, @ianef. Great suggestion about FEAT: Create the canvas from a URL! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative ap...
I manually add a new node into a rendered component. The visual result is OK, but impossible to save, because my style isn't with the auto-generated GrapesJS ID. To manually resolve this poblem, I double-click on the component to enter to it and I click outside in the canvas body. Then, the GrapesJS ID and data-gjs-ty...
bgrand-ch
Optimized TextEditor.vue file: But the problem persist:βοΈ span node replaces the previous content of selection, with font-family and color styles.β span node isn't recognized by GrapesJS, because there isn't GrapesJS auto-generated styles...
bgrand-ch
βΉοΈ Don't works directly with HTML, works only with JSON. Component = JSON node (html element + GrapesJS data) Sources:https://grapesjs.com/docs/modules/Components.htmlhttps://grapesjs.com/docs/api/component.html
GJSBlock
Thanks for reporting this, @bgrand-ch. Great question about How to refresh/re-render after new node added?. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your spe...
Hi @artf, Thank you very much for this great framework. I want to contribute to grapesjs. However, I am stupid about using webpack and babel. When I tried to build grapesjs, I am taking some errors. Errors: How can I fix this error? Thanks.
longdoan7421
@Swindler36 That error is that it can not found eslint. Did you run npm install?
fzerman
@longdoan7421 I fixed this error. Thanks. I want to ask two new questions about webpack and babel.I can use webpack and babel separately. However. I could not integrate them. How can I do this? How can I build grapesjs without test by usin...
GJSBlock
Thanks for reporting this, @fzerman. The issue with Question: Build grapesjs with npm appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap,...