Add links. "Remove link" button

packages/frontend-2/components/common/tiptap/TextEditor.vue

@@ -1,7 +1,20 @@
 <template>
   <div
-    :class="['text-editor flex flex-col', !!readonly ? 'text-editor--read-only' : '']"
+    :class="[
+      'text-editor flex flex-col relative',
+      !!readonly ? 'text-editor--read-only' : ''
+    ]"
   >
+    <FormButton
+      v-if="unlinkVisible"
+      size="sm"
+      class="absolute top-1 right-1 z-10"
+      color="outline"
+      @click="onUnlink"
+    >
+      Remove link
+    </FormButton>
+
     <EditorContent
       ref="editorContentRef"
       class="simple-scrollbar flex flex-1"
@@ -27,6 +40,7 @@ import type { Nullable } from '@speckle/shared'
 // import { userProfileRoute } from '~~/lib/common/helpers/route'
 import { onKeyDown } from '@vueuse/core'
 import { noop } from 'lodash-es'
+import { FormButton } from '@speckle/ui-components'
 
 const emit = defineEmits<{
   (e: 'update:modelValue', val: JSONContent): void
@@ -50,6 +64,7 @@ const props = defineProps<{
 }>()
 
 const editorContentRef = ref(null as Nullable<HTMLElement>)
+const unlinkVisible = ref(false)
 
 const isMultiLine = computed(() => !!props.schemaOptions?.multiLine)
 const isEditable = computed(() => !props.disabled && !props.readonly)
@@ -81,6 +96,19 @@ const onEnter = () => {
   emit('submit', { data: getData() })
 }
 const onKeyDownHandler = (e: KeyboardEvent) => emit('keydown', e)
+
+const updateUnlinkVisible = () => {
+  unlinkVisible.value = !props.readonly && editor.isActive('link')
+}
+
+const onUnlink = () => {
+  editor.chain().extendMarkRange('link').unsetLink().focus().run()
+  updateUnlinkVisible()
+}
+
+editor.on('selectionUpdate', updateUnlinkVisible)
+editor.on('transaction', updateUnlinkVisible)
+
 const onEditorContentClick = (e: MouseEvent) => {
   const closestSelectorTarget = (e.target as HTMLElement).closest(
     '.editor-mention'
@@ -174,6 +202,11 @@ onBeforeUnmount(() => {
     box-decoration-break: clone;
     @apply text-foreground text-body-2xs font-semibold;
   }
+
+  /* Render link marks visibly while editing */
+  & a {
+    @apply border-b border-outline-3 hover:border-outline-5;
+  }
 }
 
 .text-editor {

packages/frontend-2/lib/common/helpers/tiptap.ts

@@ -258,7 +258,7 @@ export function getEditorExtensions(
       // Open on click would be too annoying during editing
       openOnClick: false,
       // Autolink off cause otherwise it's impossible to end the link
-      autolink: false
+      autolink: true
     }),
     EditorInstanceStateStorage.configure({ projectId, test: new Date().toISOString() }),
     getMentionExtension(),