Best practice to edit a link with an icon? (and not the icon)

[GalinhaLX]

Hi

I would like to display a social icon (instagram), and be able to edit it's link (instagram profile for example)

Is there a best practice for it with mavo?

Should I use svg icons, or can it work with font icons?

I saw the usecase from @LeaVerou here

and from @DmitrySharabin code here

but I was not able to allow , only the modification of link, and not the icon itself

[GalinhaLX]

ok, in fact it works with STABLE mavo

<link rel="stylesheet" href="https://get.mavo.io/stable/mavo.min.css">
<script src="https://get.mavo.io/stable/mavo.es5.min.js"></script>

but not with

  <!--=============== MAVO ===============-->
     <link rel="stylesheet" href="https://get.mavo.io/mavo.css">
     <script src="https://get.mavo.io/mavo.js" async></script>

[DmitrySharabin]

Hey,

If I get what you are talking about correctly, you stumbled across this issue: #764. And you are right: it's a regression. And we are aware of it. It should be fixed in the next release. Sorry about that.

For now, you can use a workaround suggested by Lea here: https://projects.verou.me/homesearch/

// Workaround for Mavo bug #764
document.addEventListener("click", evt => {
	if (evt.target.hasAttribute("property") && evt.target.closest('[mv-mode="edit"] a')) {
		evt.preventDefault();
	}
});

[GalinhaLX]

Thanks @DmitrySharabin

Simple question to clarify what version I should use:
What's the difference between

option 1

<link rel="stylesheet" href="https://get.mavo.io/stable/mavo.min.css">
<script src="https://get.mavo.io/stable/mavo.es5.min.js"></script>

and

option 2 (doesn't work in this case)

     <link rel="stylesheet" href="https://get.mavo.io/mavo.css">
     <script src="https://get.mavo.io/mavo.js" async></script>

I tought option 1 was the minified version of option 2. They are not produced at the same time?

[DmitrySharabin]

They are not produced at the same time?

They are. All the following URLs point to the dev version of Mavo (the one with the bug):
https://get.mavo.io/mavo.js
https://get.mavo.io/mavo.min.js
https://get.mavo.io/mavo.es5.js
https://get.mavo.io/mavo.es5.min.js

And these are for the stable version (mind /stable/ in URLs):
https://get.mavo.io/stable/mavo.js
https://get.mavo.io/stable/mavo.min.js
https://get.mavo.io/stable/mavo.es5.js
https://get.mavo.io/stable/mavo.es5.min.js

If you need something stable, well, use the stable version. :) If you are not using something like mv-list/mv-list-item in your app, you are good to go.

[GalinhaLX]

Thanks for clarification

I created a codepen

Worked with stable version, but I'm not able to edit partial link :(, the way it's mentioned on documentation

I'm I missing something, or is this a bug?

[DmitrySharabin]

Hey there. 👋🏻

I've just remembered of one question we had on Gitter and the corresponding thread. I believe it correlates with your question, and you might find it useful.