For example, a custom component is used by some existing published pages. When the component is modified, maybe the style is adjusted, or the content property of it is completely changed, I want to notice those pages to update, and when I preview those pages, they should be rendered with the latest component. Is it po...
artf
If the property you've changed was stored, obviously when you load the component back its properties are going on top of the component definition. So, the only solution would be to avoid storing those properties
How to make audio component work properly (selectable,editable) like other components (image).
artf
Good question, the audio element is quite particular so it'd definitely require a custom component, probably following the ComponentVideo (and its custom view) For sure you could add it by yourself but I think it might be good handling it...
mohd7469
@artf can you give an easy snippet that shows a normal working demo of audio element cuz I tried to define custom component type for audio element but it does not seems to work and it is either not selectable or editable
Hi all. Thanks for creating and maintaining this amazing project. 🙏 Bug Description I have a block that inserts a script as specified here: https://grapesjs.com/docs/modules/Components-js.html#basic-scripts When I drag the block to the canvas, the component will indeed have the script attached to itself. However, whe...
dosponsor
Can you please provide the solution for this issue.
artf
Thanks for the report @Sparragus The problem here is when you use a function for the script inside Blocks. When the editor tries to store the JSON the structure is serialized but the function is not serializable so for that component an em...
Hi Artf, I have been trying to do this for the whole day and it is not working. I could not find any example or no solution came up in my search. Here is relevant portion of my code in the "components.js" of custom plugin: I am getting a compilation error that "Formio" is not defined no-undef. Note that the script I a...
megarg
$ node -v v10.15.3 $ npx node-sass -v node-sass 4.12.0 (Wrapper) [JavaScript] libsass 3.5.4 (Sass Compiler) [C/C++] OS is: Windows 10
artf
You can't use Formio if it's not yet defined, I guess you use the code below to load it but as loading a script is an asynchrones operation you have to wait it, so the script.onload part you've commenetd in necesssary...
megarg
Hi Artf Thanks for your response. The basic problem is that "script.onload" event does not fire on Chrome. I also tried "eventListener" but that also does not fire on chrome for script. It fires for "window" but does not fire for "script"....
First of all, Amazing project thumbs up to everybody involved. I have a couple of questions:How can I iterate over all of the components and change their content on the canvas. I would like to implement a find and replace function that will replace a specific string in all of the Elements inside the canvas. Is there a...
Amir2828
Ok I Managed to solve the 1st problem. I used get components and recursively iterated on the tree. When I finished I used the DomComponents.render() Still looking for some direction regarding the 2nd question
Amir2828
Ok I think I also managed to figure out the 2nd question. I injected to the Canvas JQuery script which made the Accordions and Sliders Behave as expected.
Amitkumar85533
Hi @Amir2828 , Can you tell me about the accordion? Can you give a small example?
I wrote a simple div block like so blockManager.add('simple-div', { label: 'Container', content: '"<!––<div class="simple-div"></div> ––>"', category: 'Basic', attributes: { title: 'Simple Box', class: 'fa fa-square' } }); But it is NOT responsive whatsoever. This is how it is: 1.I set it's width 100% on desktop 2.I s...
alikabeer32
@alikabeer32 I'm facing the same issue. If you solved this issue. Can you please share the solution here. Thanks @umerrinayat I don't remember what I did but try the following: You need to define the css class and add a unique id to it ```...
umerrinayat
@alikabeer32 I'm facing the same issue. If you solved this issue. Can you please share the solution here. Thanks
I want to remove the components programmatically, the following is my code snippet. After the components have been removed, then undo the delete actions (Ctrl + Z), do the multiple selections with the shift key will get the error Uncaught TypeError: Cannot read property 'indexOf' of undefined. My question is: How to r...
zhangyanwei
I've tried calling setSelected method before removing components, it works! Here is the updated code:
zhangyanwei
@joselin-bizmatesph I haven't been touching it for 3 years, but I guess it's similar to the case I had encountered. From the snapshot you posted, seems you removed the wrong components and you might need to double check the rowspan and the...
bizmatesph-joselin-macayanan
@zhangyanwei I encountered the same issue, I have some issues when I try to merge the cell from bottom to top. Have you already fixed the issue?
Hi! First, I'd like to say thanks to @artf for building such a slick library. I just started using it in my project and it was super easy to get set up. I'm building a React app using grapesjs with the grapesjs-preset-webpage plugin. I've been trying mimic building a webpage like the one in the demo, and I noticed tha...
artf
Thanks @kwayebopp BTW the Box label is used for the default component, nothing special (at the moment of writing Box was more pleasant than Div)
I have done a lot of research but still could not add a custom component. I tried the example in official docs (to modify behavior of "input" element and it is working fine). https://grapesjs.com/docs/modules/Components.html#define-new-component But the above example is for modifying existing component ("input"). I am...
artf
First of all, use the improved API. The isComponent is triggered only if you need to parse an HTML string, if you pass the component object (eg. { type: 'input2', }) the parsing is not necessary. You don't see anything in the canvas becaus...
Hi @artf I can change the style of outline of a hovered component with .gjs-cv-canvas .gjs-highlighter { ...... } How can I change the outline style of a selected component? I cannot apply the style using '.gjs-comp-selected' Also, how can I change the style of the component type/name label of hovered/selected compone...
artf
Only selected component style is inside the canvas, so you have to use canvasCss option https://github.com/artf/grapesjs/blob/8915ae417bed25a4834b34d8f0ecc08f0e03fd64/src/editor/config/config.js#L74-L78 for the rest, you can use simple CSS...