feat(editor): Use i18n component instead od v-html for localization

* feat(editor): Export i18n instance and bind it to Vue instance

* feat(editor): Audit usage of v-html and replace with alternatives where possible

* 🔀 Fix conflicted element in RunDataTable

* ♻️ Refactor issues elements with the new TitledList component

* 🐛 Fixing unknown node modal dialog content rendering

Co-authored-by: Milorad Filipovic <milorad@n8n.io>

packages/editor-ui/src/components/CommunityPackageInstallModal.vue

@@ -50,7 +50,7 @@
 					<span
 						size="small"
 						:class="[$style.infoText, infoTextErrorMessage ? $style.error : '']"
-						v-html="infoTextErrorMessage"
+						v-text="infoTextErrorMessage"
 					></span>
 				</div>
 				<el-checkbox

packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue

@@ -13,7 +13,7 @@
 			<div :class="$style.descriptionContainer" v-if="this.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE">
 				<n8n-info-tip theme="info" type="note" :bold="false">
 					<template>
-						<span v-html="getModalContent.description"></span>
+						<span v-text="getModalContent.description"></span>
 					</template>
 				</n8n-info-tip>
 			</div>

packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue

@@ -5,7 +5,7 @@
 		</div>
 		<div>
 			<font-awesome-icon icon="exclamation-triangle" />
-			<span v-html="$locale.baseText('executionDetails.readOnly.readOnly')"></span>
+			<span v-text="$locale.baseText('executionDetails.readOnly.readOnly')"></span>
 		</div>
 	</n8n-tooltip>
 </template>
@@ -22,4 +22,4 @@ export default Vue.extend({
 svg {
 	margin-right: 6px;
 }
-</style>
+</style>

packages/editor-ui/src/components/Node.vue

@@ -6,13 +6,13 @@
 				<div v-if="!data.disabled" :class="{'node-info-icon': true, 'shift-icon': shiftOutputCount}">
 					<div v-if="hasIssues" class="node-issues">
 						<n8n-tooltip placement="bottom" >
-							<div slot="content" v-html="nodeIssues"></div>
+							<titled-list slot="content" :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
 							<font-awesome-icon icon="exclamation-triangle" />
 						</n8n-tooltip>
 					</div>
 					<div v-else-if="waiting" class="waiting">
 						<n8n-tooltip placement="bottom">
-							<div slot="content" v-html="waiting"></div>
+							<div slot="content" v-text="waiting"></div>
 							<font-awesome-icon icon="clock" />
 						</n8n-tooltip>
 					</div>
@@ -105,6 +105,7 @@ import {
 } from 'n8n-workflow';
 
 import NodeIcon from '@/components/NodeIcon.vue';
+import TitledList from '@/components/TitledList.vue';
 
 import mixins from 'vue-typed-mixins';
 
@@ -121,6 +122,7 @@ export default mixins(
 ).extend({
 	name: 'Node',
 	components: {
+		TitledList,
 		NodeIcon,
 	},
 	computed: {
@@ -200,14 +202,12 @@ export default mixins(
 				executing: this.isExecuting,
 			};
 		},
-		nodeIssues (): string {
+		nodeIssues (): string[] {
 			if (this.data.issues === undefined) {
-				return '';
+				return [];
 			}
 
-			const nodeIssues = NodeHelpers.nodeIssuesToString(this.data.issues, this.data);
-
-			return `${this.$locale.baseText('node.issues')}:<br />&nbsp;&nbsp;- ` + nodeIssues.join('<br />&nbsp;&nbsp;- ');
+			return NodeHelpers.nodeIssuesToString(this.data.issues, this.data);
 		},
 		nodeDisabledIcon (): string {
 			if (this.data.disabled === false) {

packages/editor-ui/src/components/NodeCredentials.vue

@@ -42,7 +42,7 @@
 
 					<div :class="$style.warning" v-if="issues.length">
 						<n8n-tooltip placement="top" >
-							<div slot="content" v-html="`${$locale.baseText('nodeCredentials.issues')}:<br />&nbsp;&nbsp;- ` + issues.join('<br />&nbsp;&nbsp;- ')"></div>
+							<titled-list slot="content" :title="`${$locale.baseText('nodeCredentials.issues')}:`" :items="issues" />
 							<font-awesome-icon icon="exclamation-triangle" />
 						</n8n-tooltip>
 					</div>
@@ -74,6 +74,8 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
 
+import TitledList from '@/components/TitledList.vue';
+
 import { mapGetters } from "vuex";
 
 import mixins from 'vue-typed-mixins';
@@ -89,6 +91,9 @@ export default mixins(
 		'node', // INodeUi
 		'overrideCredType', // cred type
 	],
+	components: {
+		TitledList,
+	},
 	data () {
 		return {
 			NEW_CREDENTIALS_TEXT: `- ${this.$locale.baseText('nodeCredentials.createNew')} -`,

packages/editor-ui/src/components/NodeSettings.vue

@@ -28,11 +28,14 @@
 			</div>
 			<div v-if="isCommunityNode" :class="$style.descriptionContainer">
 				<div class="mb-l">
-					<span
-						v-html="$locale.baseText('nodeSettings.communityNodeUnknown.description', { interpolate: { packageName: node.type.split('.')[0] } })"
-						@click="onMissingNodeTextClick"
-					>
-					</span>
+					<i18n path="nodeSettings.communityNodeUnknown.description" tag="span" @click="onMissingNodeTextClick">
+						<template #action>
+							<a
+								:href="`https://www.npmjs.com/package/${node.type.split('.')[0]}`"
+								target="_blank"
+							>{{ node.type.split('.')[0] }}</a>
+						</template>
+					</i18n>
 				</div>
 				<n8n-link
 					:to="COMMUNITY_NODES_INSTALLATION_DOCS_URL"
@@ -41,14 +44,15 @@
 					{{ $locale.baseText('nodeSettings.communityNodeUnknown.installLink.text') }}
 				</n8n-link>
 			</div>
-			<span v-else
-				v-html="
-					$locale.baseText('nodeSettings.nodeTypeUnknown.description',
-						{
-							interpolate: { docURL: CUSTOM_NODES_DOCS_URL }
-						})
-					">
-			</span>
+			<i18n v-else path="nodeSettings.nodeTypeUnknown.description" tag="span">
+				<template #action>
+					<a
+						:href="CUSTOM_NODES_DOCS_URL"
+						target="_blank"
+						v-text="$locale.baseText('nodeSettings.nodeTypeUnknown.description.customNode')"
+					/>
+				</template>
+			</i18n>
 		</div>
 		<div class="node-parameters-wrapper" v-if="node && nodeValid">
 			<div v-show="openPanel === 'params'">

packages/editor-ui/src/components/ParameterIssues.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style['parameter-issues']" v-if="issues.length">
 		<n8n-tooltip placement="top" >
-			<div slot="content" v-html="`${$locale.baseText('parameterInput.issues')}:<br />&nbsp;&nbsp;- ` + issues.join('<br />&nbsp;&nbsp;- ')"></div>
+			<titled-list slot="content" :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
 			<font-awesome-icon icon="exclamation-triangle" />
 		</n8n-tooltip>
 	</div>
@@ -9,9 +9,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import TitledList from '@/components/TitledList.vue';
 
 export default Vue.extend({
 	name: 'ParameterIssues',
+	components: {
+		TitledList,
+	},
 	props: [
 		'issues',
 	],

packages/editor-ui/src/components/RunDataTable.vue

@@ -21,10 +21,10 @@
 							:disabled="!mappingEnabled || showHintWithDelay"
 							:open-delay="1000"
 						>
-							<div
-								slot="content"
-								v-html="$locale.baseText('dataMapping.dragColumnToFieldHint')"
-							></div>
+							<div slot="content">
+								<img src='/static/data-mapping-gif.gif'/>
+								{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
+							</div>
 							<Draggable
 								type="mapping"
 								:data="getExpression(column)"
@@ -48,12 +48,11 @@
 										:class="{
 											[$style.header]: true,
 											[$style.draggableHeader]: mappingEnabled,
-											[$style.activeHeader]:
-												(i === activeColumn || forceShowGrip) && mappingEnabled,
+											[$style.activeHeader]: (i === activeColumn || forceShowGrip) && mappingEnabled,
 											[$style.draggingHeader]: isDragging,
 										}"
 									>
-									<span>
+										<span>{{ column || '&nbsp;' }}</span>
 										<n8n-tooltip
 											v-if="mappingEnabled"
 											placement="bottom-start"
@@ -61,25 +60,22 @@
 											:value="i === 0 && showHintWithDelay"
 										>
 											<div
+												v-if="focusedMappableInput"
 												slot="content"
 												v-html="
-													$locale.baseText(
-														focusedMappableInput
-															? 'dataMapping.tableHint'
-															: 'dataMapping.dragColumnToFieldHint',
-														{
-															interpolate: { name: focusedMappableInput },
-														},
-													)
+													$locale.baseText('dataMapping.tableHint', {
+														interpolate: { name: focusedMappableInput },
+													})
 												"
 											></div>
-											<span>{{ column || '&nbsp;' }}</span>
+											<div v-else slot="content">
+												<img src='/static/data-mapping-gif.gif'/>
+												{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
+											</div>
+											<div :class="$style.dragButton">
+												<font-awesome-icon icon="grip-vertical" />
+											</div>
 										</n8n-tooltip>
-										<span v-else>{{ column || '&nbsp;' }}</span>
-									</span>
-										<div :class="$style.dragButton">
-											<font-awesome-icon icon="grip-vertical" />
-										</div>
 									</div>
 								</template>
 							</Draggable>

packages/editor-ui/src/components/TitledList.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="titled-list">
+		<p v-text="title" />
+		<ul>
+			<li v-for="item in items" class="titled-list-item" :key="item" v-text="item" />
+		</ul>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: "TitledList",
+	props: {
+		title: {
+			type: String,
+		},
+		items: {
+			type: Array,
+			default: () => [],
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+.titled-list {
+	display: flex;
+	flex-direction: column;
+
+	.titled-list-item {
+		list-style: none;
+		padding-left: var(--spacing-3xs);
+		&::before {
+			content: "- ";
+		}
+	}
+}
+</style>

packages/editor-ui/src/components/TriggerPanel.vue

@@ -55,7 +55,7 @@
 							{{ header }}
 						</n8n-heading>
 						<n8n-text v-if="subheader">
-							<span v-html="subheader"></span>
+							<span v-text="subheader" />
 						</n8n-text>
 					</div>
 

packages/editor-ui/src/components/WorkflowSettings.vue

@@ -32,7 +32,7 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.timezone') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-html="helpTexts.timezone"></div>
+							<div slot="content" v-text="helpTexts.timezone"></div>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -51,7 +51,7 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-html="helpTexts.saveDataErrorExecution"></div>
+							<div slot="content" v-text="helpTexts.saveDataErrorExecution"></div>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -70,7 +70,7 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-html="helpTexts.saveDataSuccessExecution"></div>
+							<div slot="content" v-text="helpTexts.saveDataSuccessExecution"></div>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -89,7 +89,7 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.saveManualExecutions') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-html="helpTexts.saveManualExecutions"></div>
+							<div slot="content" v-text="helpTexts.saveManualExecutions"></div>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -108,7 +108,7 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.saveExecutionProgress') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-html="helpTexts.saveExecutionProgress"></div>
+							<div slot="content" v-text="helpTexts.saveExecutionProgress"></div>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -127,7 +127,7 @@
 					<el-col :span="10" class="setting-name">
 						{{ $locale.baseText('workflowSettings.timeoutWorkflow') + ":" }}
 						<n8n-tooltip class="setting-info" placement="top" >
-							<div slot="content" v-html="helpTexts.executionTimeoutToggle"></div>
+							<div slot="content" v-text="helpTexts.executionTimeoutToggle"></div>
 							<font-awesome-icon icon="question-circle" />
 						</n8n-tooltip>
 					</el-col>
@@ -142,7 +142,7 @@
 						<el-col :span="10" class="setting-name">
 							{{ $locale.baseText('workflowSettings.timeoutAfter') + ":" }}
 							<n8n-tooltip class="setting-info" placement="top" >
-								<div slot="content" v-html="helpTexts.executionTimeout"></div>
+								<div slot="content" v-text="helpTexts.executionTimeout"></div>
 								<font-awesome-icon icon="question-circle" />
 							</n8n-tooltip>
 						</el-col>

packages/editor-ui/src/main.ts

@@ -19,7 +19,7 @@ import router from './router';
 
 import { runExternalHook } from './components/mixins/externalHooks';
 import { TelemetryPlugin } from './plugins/telemetry';
-import { I18nPlugin } from './plugins/i18n';
+import { I18nPlugin, i18nInstance } from './plugins/i18n';
 
 import { store } from './store';
 
@@ -32,6 +32,7 @@ Vue.use(TelemetryPlugin);
 Vue.use((vue) => I18nPlugin(vue, store));
 
 new Vue({
+	i18n: i18nInstance,
 	router,
 	store,
 	render: h => h(App),

packages/editor-ui/src/plugins/i18n/index.ts

@@ -355,7 +355,7 @@ export class I18nClass {
 	}
 }
 
-const i18nInstance = new VueI18n({
+export const i18nInstance = new VueI18n({
 	locale: 'en',
 	fallbackLocale: 'en',
 	messages: { en: englishBaseText },

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -162,8 +162,8 @@
 	"dataDisplay.needHelp": "Need help?",
 	"dataDisplay.nodeDocumentation": "Node Documentation",
 	"dataDisplay.openDocumentationFor": "Open {nodeTypeDisplayName} documentation",
-	"dataMapping.dragColumnToFieldHint": "<img src='/static/data-mapping-gif.gif'/> Drag onto a field to map column to that field",
-	"dataMapping.dragFromPreviousHint": "Map data from previous nodes to <b>{name}</b> by first clicking this button",
+	"dataMapping.dragColumnToFieldHint": "Drag onto a field to map column to that field",
+	"dataMapping.dragFromPreviousHint": "Map data from previous nodes to <b>{name}</b><br/> by first clicking this button",
 	"dataMapping.success.title": "You just mapped some data!",
 	"dataMapping.success.moreInfo": "Check out our <a href=\"https://docs.n8n.io/data/data-mapping\" target=\"_blank\">docs</a> for more details on mapping data in n8n",
 	"dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/> Drag a column onto <b>{name}</b> to map it",
@@ -495,9 +495,10 @@
 	"nodeSettings.scopes.notice": "<a data-key=\"toggle-expand\">{count} scope</a> available for {activeCredential} credentials | <a data-key=\"toggle-expand\">{count} scopes</a> available for {activeCredential} credentials",
 	"nodeSettings.theNodeIsNotValidAsItsTypeIsUnknown": "The node is not valid as its type ({nodeType}) is unknown",
 	"nodeSettings.communityNodeUnknown.title": "Install this node to use it",
-	"nodeSettings.communityNodeUnknown.description": "This node is not currently installed. It's part of the <a href=\"https://www.npmjs.com/package/{packageName}\" target=\"_blank\"/>{packageName}</a> community package.",
+	"nodeSettings.communityNodeUnknown.description": "This node is not currently installed. It's part of the {action} community package.",
 	"nodeSettings.communityNodeUnknown.installLink.text": "How to install community nodes",
-	"nodeSettings.nodeTypeUnknown.description": "This node is not currently installed. It is either from a newer version of n8n, a <a href=\"{docURL}\" target=\"_blank\"/>custom node</a>, or has an invalid structure",
+	"nodeSettings.nodeTypeUnknown.description": "This node is not currently installed. It is either from a newer version of n8n, a {action}, or has an invalid structure",
+	"nodeSettings.nodeTypeUnknown.description.customNode": "custom node",
 	"nodeSettings.thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters",
 	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
@@ -795,7 +796,8 @@
 	"settings.users.newEmailsToInvite": "New User Email Addresses",
 	"settings.users.noUsersToInvite": "No users to invite",
 	"settings.users.setupMyAccount": "Set up my owner account",
-	"settings.users.setupSMTPToInviteUsers": "Set up SMTP to invite users. <a href=\"https://docs.n8n.io/reference/user-management.html#step-one-smtp\" target=\"_blank\">Instructions</a>",
+	"settings.users.setupSMTPToInviteUsers": "Set up SMTP to invite users. {action}",
+	"settings.users.setupSMTPToInviteUsers.instructions": "Instructions",
 	"settings.users.setupToInviteUsers": "To invite users, set up your own account",
 	"settings.users.setupToInviteUsersInfo": "Invited users won’t be able to see workflows and credentials of other users. <a href=\"https://docs.n8n.io/reference/user-management.html\" target=\"_blank\">More info</a> <br /> <br /> You will need details of an <a href=\"https://docs.n8n.io/reference/user-management.html#step-one-smtp\" target=\"_blank\">SMTP server</a> to complete the setup.",
 	"settings.users.smtpToAddUsersWarning": "Set up SMTP before adding users (so that n8n can send them invitation emails). <a target=\"_blank\" href=\"https://docs.n8n.io/reference/user-management.html#step-one-smtp\">Instructions</a>",
@@ -823,7 +825,9 @@
 	"settings.api.delete.toast": "API Key deleted",
 	"settings.api.view.copy.toast": "API Key copied to clipboard",
 	"settings.api.view.apiPlayground": "API Playground",
-	"settings.api.view.info": "Use your API Key to control n8n programmatically using the <a href=\"https://docs.n8n.io/api\" target=\"_blank\">n8n API</a>. But if you only want to trigger workflows, consider using the <a href=\"https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/\" target=\"_blank\">webhook node</a> instead.",
+	"settings.api.view.info": "Use your API Key to control n8n programmatically using the {apiAction}. But if you only want to trigger workflows, consider using the {webhookAction} instead.",
+	"settings.api.view.info.api": "n8n API",
+	"settings.api.view.info.webhook": "webhook node",
 	"settings.api.view.myKey": "My API Key",
 	"settings.api.view.tryapi": "Try it out using the",
 	"settings.api.view.error": "Could not check if an api key already exists.",

packages/editor-ui/src/views/SettingsApiView.vue

@@ -13,7 +13,22 @@
 			<div v-if="apiKey">
 				<p class="mb-s">
 					<n8n-info-tip :bold="false">
-						<span v-html="$locale.baseText('settings.api.view.info')"></span>
+						<i18n path="settings.api.view.info" tag="span">
+							<template #apiAction>
+								<a
+									href="https://docs.n8n.io/api"
+									target="_blank"
+									v-text="$locale.baseText('settings.api.view.info.api')"
+								/>
+							</template>
+							<template #webhookAction>
+								<a
+									href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/"
+									target="_blank"
+									v-text="$locale.baseText('settings.api.view.info.webhook')"
+								/>
+							</template>
+						</i18n>
 					</n8n-info-tip>
 				</p>
 				<n8n-card class="mb-4xs" :class="$style.card">

packages/editor-ui/src/views/SettingsUsersView.vue

@@ -5,7 +5,15 @@
 				<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
 				<div :class="$style.buttonContainer" v-if="!showUMSetupWarning">
 						<n8n-tooltip :disabled="isSmtpSetup" placement="bottom">
-							<div slot="content" v-html="$locale.baseText('settings.users.setupSMTPToInviteUsers')"></div>
+							<i18n slot="content" path="settings.users.setupSMTPToInviteUsers" tag="span">
+								<template #action>
+									<a
+										href="https://docs.n8n.io/reference/user-management.html#step-one-smtp"
+										target="_blank"
+										v-text="$locale.baseText('settings.users.setupSMTPToInviteUsers.instructions')"
+									/>
+								</template>
+							</i18n>
 							<div>
 								<n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!isSmtpSetup" />
 							</div>