Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

catch internal links and use router #73

Merged
merged 5 commits into from
Sep 18, 2023
Merged

catch internal links and use router #73

merged 5 commits into from
Sep 18, 2023

Conversation

bryantgillespie
Copy link
Member

@bryantgillespie bryantgillespie commented Sep 7, 2023

One issue for the WYSIWYG editor is internal links from resources / blogs etc - right now it would cause a full page reload. This should fix that and also open external links in a new tab.

Notes:

  • Was debating whether this should be on BaseText or BlockRichText in order to keep our base components pure but we're using the WYSIWYG in a few other places like headings and on the Team collection

@netlify
Copy link

netlify bot commented Sep 7, 2023

Deploy Preview for directus-website ready!

Name Link
🔨 Latest commit f0b1e70
🔍 Latest deploy log https://app.netlify.com/sites/directus-website/deploys/65089d4671a1350008b334e0
😎 Deploy Preview https://deploy-preview-73--directus-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@bryantgillespie bryantgillespie marked this pull request as ready for review September 7, 2023 19:42
Comment on lines 27 to 51
onMounted(() => {
if (!contentEl.value) return;

// Intercept all the local links
const anchors = contentEl.value.getElementsByTagName('a');
if (!anchors) return;

Array.from(anchors).forEach((anchor) => {
const url = anchor.getAttribute('href');
if (!url) return;

// Add target blank to external links
if (!url.startsWith(config.public.site.url) && !url.startsWith('/')) {
anchor.setAttribute('target', '_blank');
anchor.setAttribute('rel', 'noopener noreferrer');
return;
} else {
// Add on click event to local links
anchor.addEventListener('click', (e) => {
e.preventDefault();
navigateTo(url);
});
}
});
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is one of those It works but man I wish there was a less hacky way to achieve this

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah me too. Couldn't come up with any "simple" solutions.

Open to suggestions.

I think the proper way would be to use some type of transformer to process the HTML during the build process.

Copy link
Member

@rijkvanzanten rijkvanzanten Sep 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would be the only alternative yeah, but even then we can't really replace it with <nuxt-route> as nuxt wouldn't be able to recognize that 🤔

@rijkvanzanten rijkvanzanten merged commit 631c972 into main Sep 18, 2023
2 checks passed
@rijkvanzanten rijkvanzanten deleted the richtext-links branch September 18, 2023 18:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants