Stickies

packages/cli/src/InternalHooks.ts

@@ -84,11 +84,18 @@ export class InternalHooksClass implements IInternalHooksClass {
 	async onWorkflowSaved(userId: string, workflow: IWorkflowDb): Promise<void> {
 		const { nodeGraph } = TelemetryHelpers.generateNodesGraph(workflow, this.nodeTypes);
 
+		const notesCount = Object.keys(nodeGraph.notes).length;
+		const overlappingCount = Object.values(nodeGraph.notes).filter(
+			(note) => note.overlapping,
+		).length;
+
 		return this.telemetry.track('User saved workflow', {
 			user_id: userId,
 			workflow_id: workflow.id,
 			node_graph: nodeGraph,
 			node_graph_string: JSON.stringify(nodeGraph),
+			notes_count_overlapping: overlappingCount,
+			notes_count_non_overlapping: notesCount - overlappingCount,
 			version_cli: this.versionCli,
 			num_tags: workflow.tags?.length ?? 0,
 		});

packages/design-system/package.json

@@ -79,6 +79,7 @@
     "vue-loader": "^15.9.7",
     "vue-property-decorator": "^9.1.2",
     "vue-template-compiler": "^2.6.11",
+    "vue-typed-mixins": "^0.2.0",
     "vue2-boring-avatars": "0.3.4",
     "xss": "^1.0.10"
   }

packages/design-system/src/components/N8nButton/Button.vue

@@ -69,7 +69,6 @@ export default {
 			default: false,
 		},
 		icon: {
-			type: String,
 		},
 		round: {
 			type: Boolean,

packages/design-system/src/components/N8nIcon/Icon.vue

@@ -26,7 +26,6 @@ export default {
 	},
 	props: {
 		icon: {
-			type: String,
 			required: true,
 		},
 		size: {

packages/design-system/src/components/N8nIconButton/IconButton.vue

@@ -40,7 +40,6 @@ export default {
 			default: false,
 		},
 		icon: {
-			type: String,
 			required: true,
 		},
 		theme: {

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

@@ -1,6 +1,10 @@
 <template>
 	<div>
-		<div v-if="!loading" ref="editor" :class="$style.markdown" v-html="htmlContent" />
+		<div
+			v-if="!loading"
+			ref="editor"
+			:class="$style[theme]" v-html="htmlContent"
+		/>
 		<div v-else :class="$style.markdown">
 			<div v-for="(block, index) in loadingBlocks"
 				:key="index">
@@ -59,6 +63,9 @@ export default {
 		content: {
 			type: String,
 		},
+		withMultiBreaks: {
+			type: Boolean,
+		},
 		images: {
 			type: Array,
 		},
@@ -75,6 +82,10 @@ export default {
 				return 3;
 			},
 		},
+		theme: {
+			type: String,
+			default: 'markdown',
+		},
 		options: {
 			type: Object,
 			default() {
@@ -106,7 +117,11 @@ export default {
 			}
 
 			const fileIdRegex = new RegExp('fileId:([0-9]+)');
-			const html = this.md.render(escapeMarkdown(this.content));
+			let contentToRender = this.content;
+			if (this.withMultiBreaks) {
+				contentToRender = contentToRender.replaceAll('\n\n', '\n&nbsp;\n');
+			}
+			const html = this.md.render(escapeMarkdown(contentToRender));
 			const safeHtml = xss(html, {
 				onTagAttr: (tag, name, value, isWhiteAttr) => {
 					if (tag === 'img' && name === 'src') {
@@ -214,6 +229,67 @@ export default {
 	}
 }
 
+.sticky {
+	color: var(--color-text-dark);
+
+	h1, h2, h3, h4 {
+		margin-bottom: var(--spacing-2xs);
+		font-weight: var(--font-weight-bold);
+		line-height: var(--font-line-height-loose);
+	}
+
+	h1 {
+		font-size: 36px;
+	}
+
+	h2 {
+		font-size: 24px;
+	}
+
+	h3, h4, h5, h6 {
+		font-size: var(--font-size-m);
+	}
+
+	p {
+		margin-bottom: var(--spacing-2xs);
+		font-size: var(--font-size-s);
+		font-weight: var(--font-weight-regular);
+		line-height: var(--font-line-height-loose);
+	}
+
+	ul, ol {
+		margin-bottom: var(--spacing-2xs);
+		padding-left: var(--spacing-m);
+
+		li {
+			margin-top: 0.25em;
+			font-size: var(--font-size-s);
+			font-weight: var(--font-weight-regular);
+			line-height: var(--font-line-height-regular);
+		}
+	}
+
+	code {
+		background-color: var(--color-background-base);
+		padding: 0 var(--spacing-4xs);
+		color: var(--color-secondary);
+	}
+
+	pre > code,li > code, p > code {
+		color: var(--color-secondary);
+	}
+
+	a {
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	img {
+		object-fit: contain;
+	}
+}
+
 .spacer {
 	margin: var(--spacing-2xl);
 }