Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions src/components/NcRichText/NcRichText.vue
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,7 @@ import { RouterLink } from 'vue-router'
import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
import NcReferenceList from './NcReferenceList.vue'
import NcRichTextCopyButton from './NcRichTextCopyButton.vue'
import NcRichTextExternalLink from './NcRichTextExternalLink.vue'
import { createElementId } from '../../utils/createElementId.ts'
import { getRoute, parseUrl, remarkAutolink } from './autolink.ts'
import { remarkPlaceholder } from './remarkPlaceholder.ts'
Expand Down Expand Up @@ -532,11 +533,9 @@ export default {
return entry
}
const { component, props } = entry
// do not override class of NcLink
const componentClass = component.name === 'NcLink' ? undefined : 'rich-text--component'
return h(component, {
...props,
class: componentClass,
class: 'rich-text--component',
})
})
}
Expand Down Expand Up @@ -632,6 +631,7 @@ export default {
if (String(type) === 'a') {
const route = getRoute(this.$router, props.href)
if (route) {
// Resolved link to this app; render RouterLink
delete props.href
delete props.target

Expand All @@ -640,6 +640,18 @@ export default {
to: route,
}, { default: () => children })
}

const isAbsoluteURL = /^https?:\/\//.test(props.href)
if (isAbsoluteURL) {
// External link; render normally, open in the new tab
props.href = props.href.trim()
return h(NcRichTextExternalLink, props, children)
} else {
// Unresolved relative link that does not belong to this app; render only children
delete props.href
delete props.target
return h('span', props, children)
}
}
return h(type, props, children)
}
Expand Down Expand Up @@ -684,13 +696,6 @@ export default {
.rich-text--fallback, .rich-text-component {
display: inline;
}

.rich-text--external-link {
text-decoration: underline;
&:after {
content: ' ↗';
}
}
}

/* Markdown styles */
Expand Down
41 changes: 41 additions & 0 deletions src/components/NcRichText/NcRichTextExternalLink.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!--
- SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->

<script setup lang="ts">
const { href, decorateExternal = false } = defineProps<{
/** Link attribute to render */
href: string
/** Whether to add the appended arrow decoration */
decorateExternal?: boolean
}>()
</script>

<template>
<a
:href="href"
rel="noopener noreferrer"
target="_blank"
:class="[$style.externalLink, {
[$style.externalLink_decorated]: decorateExternal,
}]">
<slot name="default">
{{ href }}
</slot>
Comment thread
Antreesy marked this conversation as resolved.
</a>
</template>

<style module lang="scss">
.externalLink {
text-decoration: underline;
}

.externalLink_decorated::after {
content: ' ↗';
}
</style>

<docs>
An internal component
</docs>
22 changes: 2 additions & 20 deletions src/components/NcRichText/autolink.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,10 @@ import type { Router } from 'vue-router'
import { getBaseUrl, getRootUrl } from '@nextcloud/router'
import { u } from 'unist-builder'
import { SKIP, visitParents } from 'unist-util-visit-parents'
import { defineComponent, h } from 'vue'
import NcRichTextExternalLink from './NcRichTextExternalLink.vue'
import { logger } from '../../utils/logger.ts'
import { URL_PATTERN_AUTOLINK } from './helpers.js'

const NcLink = defineComponent({
name: 'NcLink',
props: {
href: {
type: String,
required: true,
},
},
render() {
return h('a', {
href: this.href,
rel: 'noopener noreferrer',
target: '_blank',
class: 'rich-text--external-link',
}, [this.href.trim()])
},
})

/**
*
* @param root0
Expand Down Expand Up @@ -99,7 +81,7 @@ export function parseUrl(text: string) {
textAfter = lastChar
}
list.push(textBefore)
list.push({ component: NcLink, props: { href } })
list.push({ component: NcRichTextExternalLink, props: { href: href.trim(), decorateExternal: true } })
if (textAfter) {
list.push(textAfter)
}
Expand Down
Loading