From 284de5d6c7af901ee11ecda4c80b3998fd6b5657 Mon Sep 17 00:00:00 2001 From: oleg Date: Thu, 11 Apr 2024 10:57:45 +0200 Subject: [PATCH] fix(editor): Open links from embedded chat in new tab (#9121) Signed-off-by: Oleg Ivaniv --- packages/@n8n/chat/package.json | 6 +++-- packages/@n8n/chat/src/components/Message.vue | 18 ++++++++++++- pnpm-lock.yaml | 26 ++++++++++++------- 3 files changed, 38 insertions(+), 12 deletions(-) diff --git a/packages/@n8n/chat/package.json b/packages/@n8n/chat/package.json index 284c2838bf3a2..90b57f35d352e 100644 --- a/packages/@n8n/chat/package.json +++ b/packages/@n8n/chat/package.json @@ -40,13 +40,15 @@ }, "dependencies": { "highlight.js": "^11.8.0", + "markdown-it-link-attributes": "^4.0.1", "uuid": "^8.3.2", "vue": "^3.3.4", - "vue-markdown-render": "^2.0.1" + "vue-markdown-render": "^2.1.1" }, "devDependencies": { - "@n8n/storybook": "workspace:*", "@iconify-json/mdi": "^1.1.54", + "@n8n/storybook": "workspace:*", + "@types/markdown-it": "^12.2.3", "shelljs": "^0.8.5", "unbuild": "^2.0.0", "unplugin-icons": "^0.17.0", diff --git a/packages/@n8n/chat/src/components/Message.vue b/packages/@n8n/chat/src/components/Message.vue index 6110315102d71..a39b7c6b4ec1c 100644 --- a/packages/@n8n/chat/src/components/Message.vue +++ b/packages/@n8n/chat/src/components/Message.vue @@ -4,6 +4,8 @@ import type { PropType } from 'vue'; import { computed, toRefs } from 'vue'; import VueMarkdown from 'vue-markdown-render'; import hljs from 'highlight.js/lib/core'; +import markdownLink from 'markdown-it-link-attributes'; +import type MarkdownIt from 'markdown-it'; import type { ChatMessage } from '@n8n/chat/types'; const props = defineProps({ @@ -26,6 +28,15 @@ const classes = computed(() => { }; }); +const linksNewTabPlugin = (vueMarkdownItInstance: MarkdownIt) => { + vueMarkdownItInstance.use(markdownLink, { + attrs: { + target: '_blank', + rel: 'noopener', + }, + }); +}; + const markdownOptions = { highlight(str: string, lang: string) { if (lang && hljs.getLanguage(lang)) { @@ -41,7 +52,12 @@ const markdownOptions = { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c1b47fc9d8acb..c329d7ffb6d94 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -143,6 +143,9 @@ importers: highlight.js: specifier: ^11.8.0 version: 11.9.0 + markdown-it-link-attributes: + specifier: ^4.0.1 + version: 4.0.1 uuid: specifier: ^8.3.2 version: 8.3.2 @@ -150,8 +153,8 @@ importers: specifier: ^3.3.4 version: 3.3.4 vue-markdown-render: - specifier: ^2.0.1 - version: 2.0.1 + specifier: ^2.1.1 + version: 2.1.1(vue@3.3.4) devDependencies: '@iconify-json/mdi': specifier: ^1.1.54 @@ -159,6 +162,9 @@ importers: '@n8n/storybook': specifier: workspace:* version: link:../storybook + '@types/markdown-it': + specifier: ^12.2.3 + version: 12.2.3 shelljs: specifier: ^0.8.5 version: 0.8.5 @@ -26000,13 +26006,6 @@ packages: vue: 3.4.21(typescript@5.4.2) dev: false - /vue-markdown-render@2.0.1: - resolution: {integrity: sha512-/UBCu0OrZ9zzEDtiZVwlV/CQ+CgcwViServGis3TRXSVc6+6lJxcaOcD43vRoQzYfPa9r9WDt0Q7GyupOmpEWA==} - dependencies: - markdown-it: 12.3.2 - vue: 3.3.4 - dev: false - /vue-markdown-render@2.0.1(typescript@5.4.2): resolution: {integrity: sha512-/UBCu0OrZ9zzEDtiZVwlV/CQ+CgcwViServGis3TRXSVc6+6lJxcaOcD43vRoQzYfPa9r9WDt0Q7GyupOmpEWA==} dependencies: @@ -26016,6 +26015,15 @@ packages: - typescript dev: false + /vue-markdown-render@2.1.1(vue@3.3.4): + resolution: {integrity: sha512-szuJVbCwgIpVsggd8IHGB2lLo8BH8Ojd+wakaOTASNxdYcccKxoMcvDqUsLoGwgKDY8yJf0U/+ppffEYxsEHkA==} + peerDependencies: + vue: ^3.3.4 + dependencies: + markdown-it: 12.3.2 + vue: 3.3.4 + dev: false + /vue-router@4.2.2(vue@3.4.21): resolution: {integrity: sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==} peerDependencies: