[QUESTION] Set href for link component
Question
Hello guys.
I'm trying to modify the native link component, so far I have a modal that opens on the dblclick event and the user may choose between some pre defined links. The problem is, when I have the chosen link I'm not able to set it to the component.
It works fine when I type the link in the Trait Manager.
Here's the code I tried:
domc.addType('link', {
view: {
events: {
dblclick: 'linkModalPicker',
},
async linkModalPicker(ev: MouseEvent) {
ev.preventDefault();
const ref = modal.open(LinkModalComponent, {
width: '70%',
height: '70%'
});
const link = await ref.afterClosed().pipe(first()).toPromise();
if (link) {
this.model.set('href', link.url);
}
}
}
});
I did something similar, but for the images component, and it worked with this code:
domc.addType('image', {
view: {
events: {
dblclick: 'imagesModalPicker',
},
async imagesModalPicker(ev: MouseEvent) {
ev.preventDefault();
const ref = modal.open(ImagesModalComponent, {
width: '70%',
height: '70%'
});
const img: Item = await ref.afterClosed().pipe(first()).toPromise();
if (img) {
this.model.set('src', img.url);
}
}
},
});
But for some reason it's not setting the href in the anchor tag.
Thanks!Answers (3)
@gabrielbitencourt Link Component doesn't have the href property, so add it directly to attributes
if (link) {
this.model.addAttributes({ href: link.url });
}
thank you for the response @artf
I tried that but it didn't work either, I could see (in the trait manager) that the href had been set using model.addAttributes({ href: link.url }) but it did not persist when I deselected and selected the component again, neither in the resulting editor.getHtml() the anchor tag had href empty.
I think this could be related to some bugs I've read here like #1290
Thanks
but it did not persist when I deselected and selected the component again
maybe because you're still reading from this.model.get('href')...
btw I can't help you more than this without a reproducible demo
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2129
[Question] how to append a button inside default modal and catch it's click event
I want a form inside a modal (using the default modal ), on click of the submit button make an ajax call. I have created a new component wh...
Issue #4196
BUG: Ids gets changed while trying to set components on the canvas using json
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link no link Desc...
Issue #4083
BUG: Set root does not work
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Safari 15.0Reproducible demo link https://js...
Issue #2388
[Question] - How to import styles from <link> to be rendered when dragging block to canvas
My situation: I'm slowly importing some of my custom made UI components in ReactJS to GrapesJS. Now, I am able to render the component prop...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.