From c0aa67b8f0cf646c130b431718274cf86b423514 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Mon, 11 Nov 2024 07:02:26 -0500
Subject: [PATCH] fix(editor): Prevent deleting a sticky note while editing
 (no-changelog) (#11576)

---
 packages/editor-ui/src/components/Sticky.vue  | 11 ++++++--
 .../render-types/CanvasNodeStickyNote.test.ts | 26 +++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index 12ee2dfa89..bac0e07696 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -62,6 +62,7 @@ const isTouchActive = ref<boolean>(false);
 const forceActions = ref(false);
 const isColorPopoverVisible = ref(false);
 const stickOptions = ref<HTMLElement>();
+const isEditing = ref(false);
 
 const setForceActions = (value: boolean) => {
 	forceActions.value = value;
@@ -147,8 +148,13 @@ const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
 
 const showActions = computed(
 	() =>
-		!(props.hideActions || props.isReadOnly || workflowRunning.value || isResizing.value) ||
-		forceActions.value,
+		!(
+			props.hideActions ||
+			isEditing.value ||
+			props.isReadOnly ||
+			workflowRunning.value ||
+			isResizing.value
+		) || forceActions.value,
 );
 
 onMounted(() => {
@@ -187,6 +193,7 @@ const changeColor = (index: number) => {
 };
 
 const onEdit = (edit: boolean) => {
+	isEditing.value = edit;
 	if (edit && !props.isActive && node.value) {
 		ndvStore.activeNodeName = node.value.name;
 	} else if (props.isActive && !edit) {
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.test.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.test.ts
index e56b3cef63..e9d48541ff 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.test.ts
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.test.ts
@@ -3,6 +3,7 @@ import { createComponentRenderer } from '@/__tests__/render';
 import { createCanvasNodeProvide } from '@/__tests__/data';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
+import { fireEvent } from '@testing-library/vue';
 
 const renderComponent = createComponentRenderer(CanvasNodeStickyNote);
 
@@ -42,4 +43,29 @@ describe('CanvasNodeStickyNote', () => {
 
 		expect(resizeControls).toHaveLength(0);
 	});
+
+	it('should disable sticky options when in edit mode', async () => {
+		const { container } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide({
+						id: 'sticky',
+						readOnly: false,
+					}),
+				},
+			},
+		});
+
+		const stickyTextarea = container.querySelector('.sticky-textarea');
+
+		if (!stickyTextarea) return;
+
+		await fireEvent.dblClick(stickyTextarea);
+
+		const stickyOptions = container.querySelector('.sticky-options');
+
+		if (!stickyOptions) return;
+
+		expect(getComputedStyle(stickyOptions).display).toBe('none');
+	});
 });