Hi. When I try to generate a newsletter template out of an existing HTML code with some VML wrapping <style> tags, the existing styling classes are processed well although any mentioning of such VML is removed from the Editor. Can you please give a hint of a possible workaround? Is that even possible to have VML code...
GJSBlock
Thanks for reporting this, @DMSlam. Great question about Is there a way to keep VML code in CSS to keep some of the styles away from Outlook?. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the...
Hi guys instead of styling in the init in this way... it's possibile to use a scss file in canvas? canvas { style:['FILE.SCSS'] } or simple make it cleaner with a single init css? Thank you! myComponent.append(<style> body { background: rgb(204,204,204); } .footer { position: absolute; bottom: 5mm; width: auto; left:...
artf
You can use canvasCSS option if you don't want to use files.
devtechk
Thank you very much! This config file is gonna help me a lot!
GJSBlock
Thanks for reporting this, @devtechk. Great question about canvas style css. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on()...
I want to customize the ui of Grapesjs but the js and css files are minified.Please tell me how can I do this? I just want to keep some specific blocks like images,text etc in my interface.
echobinod
Sass is used to generate the minified css files. You can change the style variables from here: src/styles/scss/
Thanks for reporting this, @SyedHashimShah. Great question about How I can customize the UI of Grapesjs?. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your spec...
Hi, How can I add buildProps to properties list such that when an option is selected, the properties of that option will be displayed An example of what I am trying to achieve on the flex property.
Ju99ernaut
I believe you can move the build props out of the properties list and still achieve what you're trying, the built in flex box related properties only show when a component has display: flex. It's also important to note that buildProps are...
server102
Thank you. I tried it but the grid properties are not working. Might have to implement it manually but am not sure on how best to approach the problem.
Ju99ernaut
There's no buildProps for grid properties so you'll have to build those from scratch, unfortunately docs don't have much info on custom properties probably you'll have to piece things together from the API reference https://grapesjs.com/do...
I have a list of categories, and I want to mark some with a different style depending on if they are required or not. so ideally i could add a class to the div with class 'gjs-title' so that it says 'gjs-title required-field' this.editor.BlockManager.getCategories(); returns an array of all my block-categories, but my...
artf
Hi @eikerd by checking the code, at the moment, I don't see any other way of customizing block category DOMs if not doing something on your own with the DOM (once blocks are rendered). I'll probably add the view to the category model in th...
GJSBlock
Thanks for reporting this, @eikerd. Great question about Blockmanager: adding custom class gjs-block-category / gjs-title DIVs. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS docum...
Much grateful to you for this library. Background: I am building an editor where I intend to define most of the components from an existing set of Vuejs components which I have developed earlier and use in my applications. Most of these are UI based simple and complex components. For example, I have simple vuejs compo...
Ju99ernaut
I'm not sure if such hooks exist per component but you can try to take advantage to the toHtml property of a component. It's already been discussed elsewhere so you search it in the issues as there are quite a few.
artf
Yeap, you can define your components with a custom toHTML/toJSON function (in model), in order to customize their output
GJSBlock
Thanks for reporting this, @sudiptochoudhury. The issue with Is there a event per component before save which the component can listen to? appears to be a race condition or state management timing problem. This typically happens when compo...
Version: 0.16.41 Are you able to reproduce the bug from the demo? [X] Yes [ ] No What is the expected behavior? 1) Copy selected parent component (container) to the clipboard. 2) Paste selected parent component (container) from the clipboard (into the same page or an other page). 3) All components keep ID styles and i...
artf
That because you've updated original commands with your versions (incorrectly). Indeed, if I remove your plugin from the demo everything works as expected. Please check the original copy and paste command, you should clone components befor...
artf
Just check the original commands https://github.com/artf/grapesjs/blob/dev/src/commands/view/CopyComponent.js https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js
bgrand-ch
@artf Thanks for your answer. A link or an example or more explanations please? 😅
Is there a way of adding shortcut keys and add-ons for the built in Codemirror editor? I especially want a commenting hot key. There are various plugins that use the Grapesjs editor, incl. https://github.com/artf/grapesjs/issues/324#issuecomment-330571539 and the custom html code plugins https://github.com/Ju99ernaut/...
abulka
I finally got the Grapesjs bundled commentRange to work - it must be invoked directly cm.commentRange not via cm.execCommand. Furthermore, it takes parameters. Thus I was able to get some commenting working, as long as you select the area...
artf
Yeah, I think it's not a problem exposing it in CodeMirrorEditor.js
GJSBlock
Thanks for reporting this, @abulka. Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date. For you right now: Run npm audit fix to see available patches Check for a newer GrapesJS...
What are you trying to add to GrapesJS? I try to styling GrapesJS and positioning its elements (panels, buttons, canvas, etc.), it's annoying to override all style elements. Describe your feature request A renderless GrapesJS.Append a specific GrapesJS element (panels, buttons, canvas, etc.) into any container in the...
GJSBlock
Thanks for reporting this, @bgrand-ch. Great suggestion about FEAT: Renderless! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approaches: List...
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...