feat(editor): Improve n8n welcome experience (#3289)

* ✨ Injecting a welcome sticky note if a corresponding flag has been received from backend

* 🔒 Allowing resources from `/static` route to be displayed in markown component.

* ✨ Implemented image width control via markdown URLs

* 💄Updating quickstart video thumbnail images.

* 🔨 Updated new workflow action name and quickstart sticky name

* ✨ Added quickstart menu item in the Help menu

* 🔨 Moving quickstart video thumbnail to the translation file.

* 🔒 Limiting http static resource requests in markdown img tags only to image files.

* 🔒 Adding more file types to supported image list in markown component.

* 👌 Extracting quickstart note name to constant.

* 🐘 add DB migration sqlite

* ⚡️ add logic for onboarding flow flag

* 🐘 add postgres migration for user settings

* 🐘 add mysql migration for user settings

* ✨ Injecting a welcome sticky note if a corresponding flag has been received from backend

* 🔒 Allowing resources from `/static` route to be displayed in markown component.

* ✨ Implemented image width control via markdown URLs

* 💄Updating quickstart video thumbnail images.

* 🔨 Updated new workflow action name and quickstart sticky name

* ✨ Added quickstart menu item in the Help menu

* 🔨 Moving quickstart video thumbnail to the translation file.

* 🔒 Limiting http static resource requests in markdown img tags only to image files.

* 🔒 Adding more file types to supported image list in markown component.

* 👌 Extracting quickstart note name to constant.

* 📈 Added telemetry events to quickstart sticky note.

* ⚡ Disable sticky node type from showing in expression editor

* 🔨 Improving welcome video link detecton when triggering telemetry events

* 👌Moved sticky links click handling logic outside of the design system, removed user and instance id from telemetry events.

* 👌Improving sticky note link telemetry tracking.

* 🔨 Refactoring markdown component click event logic.

* 🔨 Moving bits of clicked link detection logic to Markdown component.

* 💄Fixing code spacing.

* remove transpileonly option

* update package lock

* 💄Changing the default route to `/workflow`, updating welcome sticky content.

* remove hardcoded

* 🐛 Fixing the onboarding threshold logic so sticky notes are skipped when counting nodes.

* 👕 Fixing linting errors.

Co-authored-by: Milorad Filipović <milorad.filipovic19@gmail.com>
Co-authored-by: Milorad Filipović <miloradfilipovic19@gmail.com>
Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>
Co-authored-by: Milorad Filipović <milorad@n8n.io>

packages/design-system/src/components/N8nMarkdown/Markdown.vue

@@ -4,6 +4,7 @@
 			v-if="!loading"
 			ref="editor"
 			:class="$style[theme]" v-html="htmlContent"
+			@click="onClick"
 		/>
 		<div v-else :class="$style.markdown">
 			<div v-for="(block, index) in loadingBlocks"
@@ -117,6 +118,7 @@ export default {
 			}
 
 			const fileIdRegex = new RegExp('fileId:([0-9]+)');
+			const imageFilesRegex = /\.(jpeg|jpg|gif|png|webp|bmp|tif|tiff|apng|svg|avif)$/;
 			let contentToRender = this.content;
 			if (this.withMultiBreaks) {
 				contentToRender = contentToRender.replaceAll('\n\n', '\n&nbsp;\n');
@@ -129,7 +131,10 @@ export default {
 							const id = value.split('fileId:')[1];
 							return `src=${xss.friendlyAttrValue(imageUrls[id])}` || '';
 						}
-						if (!value.startsWith('https://')) {
+						// Only allow http requests to supported image files from the `static` directory
+						const isImageFile = value.split('#')[0].match(/\.(jpeg|jpg|gif|png|webp)$/) !== null;
+						const isStaticImageFile = isImageFile && value.startsWith('/static/');
+						if (!value.startsWith('https://') && !isStaticImageFile) {
 							return '';
 						}
 					}
@@ -154,6 +159,22 @@ export default {
 				.use(markdownTasklists, this.options.tasklists),
 		};
 	},
+	methods: {
+		onClick(event) {
+			let clickedLink = null;
+
+			if(event.target instanceof HTMLAnchorElement) {
+				clickedLink = event.target;
+			}
+			if(event.target.matches('a *')) {
+				const parentLink = event.target.closest('a');
+				if(parentLink) {
+					clickedLink = parentLink;
+				}
+			}
+			this.$emit('markdown-click', clickedLink, event);
+		}
+	}
 };
 </script>
 
@@ -287,6 +308,10 @@ export default {
 
 	img {
 		object-fit: contain;
+
+		&[src*="#full-width"] {
+			width: 100%;
+		}
 	}
 }