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...
ClaudeCode
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 would like to repurpose the color picker used in GrapesJS. I have to use a color picker for some project level settings. These settings are accessible from the GrapesJS editor. I would like to leverage the existing color picker that is used for traits like font colors, etc. I've seen this post about extending a trai...
artf
Currently, the only way is to use this, not public, API. I've started working on a new UI module, to handle similar situations (ability to add/replace GrapesJS UI elements) but unfortunately, I have no idea when it'll be released, as it's...
himedlooff
is there a way to keep the color picker but configure the spectrum options? for example if i wanted to force hex colors i could pass { preferredFormat: "hex" }?
ClaudeCode
Thanks for reporting this, @stljeff1. Great suggestion about How do I repurpose the Spectrum Color Picker?! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system:...
Hi There I am trying to implement an editor where certain sections of the page are editable / droppable etc (i.e a mixed page where some elements are dynamic and others aren't). I am having a lot of success by using the data-gjs attributes to block this behaviour generally on the static elements however I don't seem t...
mrobertshaw
This is immensely helpful. Thank you for responding so quickly and for your fantastic, clever and well designed product which is a massive help to our product.
artf
Hi @mrobertshaw the main element is intended as the editor container and not the wrapper. You have to use this option if you need to edit the wrapper's props:
ClaudeCode
Thanks for reporting this, @mrobertshaw. Great question about *. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listener...
I'm going to say this is both a feature request as I get into some parts of it, but also a bit of an issue. I would say it looks bad to have a project newer than 2015 that's using px for nearly everything. People are using screensizes that are only 768 pixels on the narrowest plane, whether mobile or desktop, to 2160p...
ClaudeCode
Thanks for reporting this, @sadtaco. The issue with FEAT/ISSUE: CSS standards appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating...
Hi :wave: I am trying to load some CSS within the editor as part of the theme, I am able to link stylesheets as part of loading but the problem that I am facing is when loading the styles directly using <style> tag, I am able to view the serialized version via editor.getStyle() but editor.getCss() only contains the pr...
artf
@AadilMehrajBhat First of all, display: 'block' is not a valid CSS value for that property (it should be display: block) and then .d-block is not used anywhere in your template so the result is automatically optimized by removing unused st...
ClaudeCode
Thanks for reporting this, @aadilmehrajbhat. Great question about [HELP WANTED] How to load css that can viewed in code viewer and also exported while saving. The recommended approach with StyleManager is to use the event-driven API. Start...
the 3 issues I'm facing using grapesjs are: -- I can't render a react element inside the canvas: I add a component in the canvas and initiate the component js file in the canvas conf object but it didn't work. -- I can't add a color in the background layers -- when a tag a component to be unremovable it can be removed...
Version 16.10 Are you able to reproduce the bug from the demo? [X] Yes [ ] No What is the expected behavior? That GrapesJS can support dragging & sorting interaction with custom Web Components which do not have the Shadow DOM enabled. Describe the bug Hello, we use GrapesJS extensively and integrate many of our custom...
artf
This bug/request isn't just for StencilJS, but just in general with Web Components and the Shadow DOM. Are there best practices with Grapes and Web Components with enabling or tracking events to mediate these issues? I'm not working with W...
jenter
@artf sure thing, thanks for the quick response. I have imported my custom web component library here in this Fiddle to demonstrate the issue: https://jsfiddle.net/jenter77/5btn2ao7/25/ If you reference my public repo and example "faux-gri...
artf
Hi Jason, I've tried to give a look at what is happening inside the editor and, I'm not sure how the shadow option actually affects this behavior but, the main issue I see is that dynamic <div class="delayed--wrapper"> element. Basically t...
Hi @artf I am trying to add new types of trait Below is my code.It's updating the values in code also but on reload link trait will set to default. Here is my code editor.DomComponents.addType('link', { model: dModel.extend({ defaults: Object.assign({}, dModel.prototype.defaults, { removable: false, traits: [ // strin...
Hi all, I would like to get some guidance about the code I should add/edit in order to change the way panels look. In general, I will need to change all the UI styles, but I want to start with blocks, layers, and style managers. I want to be able to change the layout, colors, etc in order to make it fit my brand image...
Joshmamroud
> @sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about?Well, not code but I can explain my needs quite better with an image...In a few words, I want to go from here: https://img...
Joshmamroud
@sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about?
sircoko
@sircoko Can you provide some code examples of what you have and explain in more detail what you're confused about? Well, not code but I can explain my needs quite better with an image... In a few words, I want to go from here: https://img...
Hi All, More of a general question of if anyone has managed to make the whole canvas (or in fact the wrapper) a Vue element, meaning that you could drag some a custom div like '<timer></timer>' and it renders correctly? I've attempted this, I made the wrapper the vue element (el), and it did work when 'importing' HTML...
adamwpe
Thanks @noogen for your detailed reply. Yh, think you are right and stick with components - I'm not too sure if the ToHtml if the right solution is for me or not, because I don't want to manage two types of system, on rending correctly wit...
noogen
My answer is to best stick with custom scripts. I've done custom components using lodash template here: https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/index.js#L2. A string is expected from thetoHtml method - https:/...