Issue #2311Opened October 6, 2019by gabrielbitencourt0 reactions

[QUESTION] Set href for link component

Question

Hello guys.

Code SnippetTEXT
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)

artfOctober 6, 20190 reactions

@gabrielbitencourt Link Component doesn't have the href property, so add it directly to attributes

if (link) {
	this.model.addAttributes({ href: link.url });
}
gabrielbitencourtOctober 6, 20190 reactions

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

artfOctober 6, 20190 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.