From d9593cbd106b05ebd6e45111f19a0fe289bf879d Mon Sep 17 00:00:00 2001
From: aditorito <as0742004@gmail.com>
Date: Tue, 7 Apr 2026 18:57:26 +0000
Subject: [PATCH 1/6] Added color picker states

---
 frontend/src/components/TextBlockBubbleMenu.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/components/TextBlockBubbleMenu.vue b/frontend/src/components/TextBlockBubbleMenu.vue
index df44b032c..d7dce091a 100644
--- a/frontend/src/components/TextBlockBubbleMenu.vue
+++ b/frontend/src/components/TextBlockBubbleMenu.vue
@@ -155,6 +155,15 @@ const textLink = ref("");
 const openInNewTab = ref(false);
 const linkInput = ref(null) as Ref<typeof Input | null>;
 
+const colorSwatchBtn = ref<HTMLElement | null>(null);
+const colorPickerOpen = ref(false);
+const colorPickerWrapper = ref<HTMLElement | null>(null);
+const colorPickerStyle = ref<Record<string, string>>({
+	position: "fixed",
+	top: "0px",
+	left: "0px",
+});
+
 const editorRef = computed(() => props.editor);
 const isEditableRef = computed(() => props.isEditable);
 

From ee7a8e0ec2e6e04b5f2d5da6dc9c777044695248 Mon Sep 17 00:00:00 2001
From: aditorito <as0742004@gmail.com>
Date: Tue, 7 Apr 2026 19:18:07 +0000
Subject: [PATCH 2/6] removed .focus() and added guard

---
 frontend/src/components/TextBlockBubbleMenu.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/TextBlockBubbleMenu.vue b/frontend/src/components/TextBlockBubbleMenu.vue
index d7dce091a..ac15a611e 100644
--- a/frontend/src/components/TextBlockBubbleMenu.vue
+++ b/frontend/src/components/TextBlockBubbleMenu.vue
@@ -233,16 +233,17 @@ const isEntireTextSelected = () => {
 };
 
 const setTextColor = debounce((color: string | undefined) => {
+	if (!props.editor || props.editor.isDestroyed) return;
 	const colorValue = color as string;
 	if (!colorValue) {
-		props.editor?.chain().focus().setColor(colorValue).run();
+		props.editor.chain().setColor("").run();
 		if (isEntireTextSelected()) {
 			props.block.setStyle("color", "");
 		}
 		return;
 	}
 
-	props.editor?.chain().focus().setColor(colorValue).run();
+	props.editor.chain().setColor(colorValue).run();
 	if (isEntireTextSelected()) {
 		props.block.setStyle("color", colorValue);
 	}

From 44cea815bc0534ba9452e9717e16a9e0012a2503 Mon Sep 17 00:00:00 2001
From: aditorito <as0742004@gmail.com>
Date: Tue, 7 Apr 2026 19:25:32 +0000
Subject: [PATCH 3/6] feat: Outside Click closes the picker and get correct
 viewport

---
 .../src/components/TextBlockBubbleMenu.vue    | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/frontend/src/components/TextBlockBubbleMenu.vue b/frontend/src/components/TextBlockBubbleMenu.vue
index ac15a611e..7219cb816 100644
--- a/frontend/src/components/TextBlockBubbleMenu.vue
+++ b/frontend/src/components/TextBlockBubbleMenu.vue
@@ -174,6 +174,38 @@ const selectedColor = computed(() => {
 	return null;
 });
 
+const toggleColorPicker = () => {
+	if (!colorPickerOpen.value) {
+		const rect = colorSwatchBtn.value?.getBoundingClientRect();
+		if (rect) {
+			colorPickerStyle.value = {
+				position: "fixed",
+				top: `${rect.bottom + 8}px`,
+				left: `${rect.left}px`,
+			};
+		}
+	}
+	colorPickerOpen.value = !colorPickerOpen.value;
+};
+
+const handleOutsideClick = (e: MouseEvent) => {
+    if (
+        colorPickerWrapper.value &&
+        !colorPickerWrapper.value.contains(e.target as Node) &&
+        !colorSwatchBtn.value?.contains(e.target as Node)
+    ) {
+        colorPickerOpen.value = false;
+    }
+};
+
+watch(colorPickerOpen, (open) => {
+    if (open) {
+        document.addEventListener("mousedown", handleOutsideClick);
+    } else {
+        document.removeEventListener("mousedown", handleOutsideClick);
+    }
+});
+
 const enableLinkInput = () => {
 	settingLink.value = true;
 	// check if link is already set on selection

From 551cf3abac9fe54a0133ab3936daa1bcd5a65ece Mon Sep 17 00:00:00 2001
From: aditorito <as0742004@gmail.com>
Date: Tue, 7 Apr 2026 19:27:52 +0000
Subject: [PATCH 4/6] feat:watcher closes it whenever the block stops being
 editable

---
 frontend/src/components/TextBlockBubbleMenu.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/components/TextBlockBubbleMenu.vue b/frontend/src/components/TextBlockBubbleMenu.vue
index 7219cb816..625ddc85c 100644
--- a/frontend/src/components/TextBlockBubbleMenu.vue
+++ b/frontend/src/components/TextBlockBubbleMenu.vue
@@ -206,6 +206,13 @@ watch(colorPickerOpen, (open) => {
     }
 });
 
+watch(
+    () => props.isEditable,
+    (editable) => {
+        if (!editable) colorPickerOpen.value = false;
+    },
+);
+
 const enableLinkInput = () => {
 	settingLink.value = true;
 	// check if link is already set on selection

From 84e622e4853b85eb3ff4278d2bd680a59b98c861 Mon Sep 17 00:00:00 2001
From: aditorito <as0742004@gmail.com>
Date: Tue, 7 Apr 2026 19:46:42 +0000
Subject: [PATCH 5/6] refactor:Updated the component with button over
 colorpicker

---
 .../src/components/TextBlockBubbleMenu.vue    | 63 +++++++++----------
 1 file changed, 29 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/TextBlockBubbleMenu.vue b/frontend/src/components/TextBlockBubbleMenu.vue
index 625ddc85c..b27187359 100644
--- a/frontend/src/components/TextBlockBubbleMenu.vue
+++ b/frontend/src/components/TextBlockBubbleMenu.vue
@@ -91,41 +91,36 @@
 				:class="{ 'bg-surface-gray-3': editor.isActive('link') }">
 				<FeatherIcon class="h-3 w-3" name="link" :stroke-width="2" />
 			</button>
-			<div v-show="!block.isHeader()">
-				<ColorPicker
-					:modelValue="selectedColor"
-					@update:modelValue="setTextColor"
-					:show-input="true"
-					placement="top"
-					:appendTo="overlayElement"
-					popoverClass="!min-w-fit">
-					<template #target="{ togglePopover, isOpen }">
-						<button v-show="!block.isHeader()" class="rounded px-2 py-1 hover:bg-surface-gray-2">
-							<div class="p-1">
-								<div
-									class="h-4 w-4 rounded shadow-sm"
-									@click="
-										() => {
-											togglePopover();
-										}
-									"
-									:style="{
-										background:
-											editor?.isActive('textStyle') && editor?.getAttributes('textStyle').color
-												? editor?.getAttributes('textStyle').color
-												: `url(/assets/builder/images/color-circle.png) center / contain`,
-									}"></div>
-							</div>
-						</button>
-					</template>
-					<template>
-						<Input
-							type="text"
+			<div v-show="!block.isHeader()" class="relative">
+				<button
+					ref="colorSwatchBtn"
+					class="rounded px-2 py-1 hover:bg-surface-gray-2"
+					@click="toggleColorPicker">
+					<div class="p-1">
+						<div
+							class="h-4 w-4 rounded shadow-sm"
+							:style="{
+								background:
+									editor?.isActive('textStyle') && editor?.getAttributes('textStyle').color
+										? editor?.getAttributes('textStyle').color
+										: `url(/assets/builder/images/color-circle.png) center / contain`,
+							}"></div>
+					</div>
+				</button>
+
+				<teleport to="body">
+					<div
+						v-if="colorPickerOpen"
+						ref="colorPickerWrapper"
+						:style="colorPickerStyle"
+						class="fixed z-[9999] rounded-lg bg-surface-white p-3 shadow-lg">
+						<ColorPicker
 							:modelValue="selectedColor"
-							class="!w-32 text-sm"
-							@update:modelValue="setTextColor" />
-					</template>
-				</ColorPicker>
+							@update:modelValue="setTextColor"
+							:show-input="true"
+							render-mode="inline" />
+					</div>
+				</teleport>
 			</div>
 		</div>
 	</bubble-menu>

From d023c4bb4825b89a664586e989b3c047d733dfe0 Mon Sep 17 00:00:00 2001
From: aditorito <as0742004@gmail.com>
Date: Tue, 7 Apr 2026 21:17:41 +0000
Subject: [PATCH 6/6] refactor: minor changes

---
 .../src/components/TextBlockBubbleMenu.vue    | 45 ++++++++-----------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/TextBlockBubbleMenu.vue b/frontend/src/components/TextBlockBubbleMenu.vue
index b27187359..080543095 100644
--- a/frontend/src/components/TextBlockBubbleMenu.vue
+++ b/frontend/src/components/TextBlockBubbleMenu.vue
@@ -78,7 +78,6 @@
 				:class="{ 'bg-surface-gray-3': editor.isActive('strike') }">
 				<StrikeThroughIcon />
 			</button>
-
 			<button
 				v-show="!block.isHeader() && !block.isLink() && !block.isButton()"
 				@click="
@@ -149,7 +148,6 @@ const settingLink = ref(false);
 const textLink = ref("");
 const openInNewTab = ref(false);
 const linkInput = ref(null) as Ref<typeof Input | null>;
-
 const colorSwatchBtn = ref<HTMLElement | null>(null);
 const colorPickerOpen = ref(false);
 const colorPickerWrapper = ref<HTMLElement | null>(null);
@@ -184,33 +182,32 @@ const toggleColorPicker = () => {
 };
 
 const handleOutsideClick = (e: MouseEvent) => {
-    if (
-        colorPickerWrapper.value &&
-        !colorPickerWrapper.value.contains(e.target as Node) &&
-        !colorSwatchBtn.value?.contains(e.target as Node)
-    ) {
-        colorPickerOpen.value = false;
-    }
+	if (
+		colorPickerWrapper.value &&
+		!colorPickerWrapper.value.contains(e.target as Node) &&
+		!colorSwatchBtn.value?.contains(e.target as Node)
+	) {
+		colorPickerOpen.value = false;
+	}
 };
 
 watch(colorPickerOpen, (open) => {
-    if (open) {
-        document.addEventListener("mousedown", handleOutsideClick);
-    } else {
-        document.removeEventListener("mousedown", handleOutsideClick);
-    }
+	if (open) {
+		document.addEventListener("mousedown", handleOutsideClick);
+	} else {
+		document.removeEventListener("mousedown", handleOutsideClick);
+	}
 });
 
 watch(
-    () => props.isEditable,
-    (editable) => {
-        if (!editable) colorPickerOpen.value = false;
-    },
+	() => props.isEditable,
+	(editable) => {
+		if (!editable) colorPickerOpen.value = false;
+	},
 );
 
 const enableLinkInput = () => {
 	settingLink.value = true;
-	// check if link is already set on selection
 	const link = props.editor?.isActive("link") ? props.editor?.getAttributes("link").href : null;
 	textLink.value = link || "";
 	openInNewTab.value = props.editor?.isActive("link")
@@ -251,18 +248,15 @@ const setHeading = (level: 1 | 2 | 3) => {
 	} else {
 		props.block.element = tag;
 	}
-
 	nextTick(() => {
 		props.block.selectBlock();
 	});
 };
 
-// Text color functionality
 const isEntireTextSelected = () => {
 	if (!props.editor) return false;
 	const { from, to } = props.editor.state.selection;
-	const textContent = props.editor.state.doc.textContent;
-	const textLength = textContent.length;
+	const textLength = props.editor.state.doc.textContent.length;
 	return from === 0 && to >= textLength;
 };
 
@@ -276,14 +270,12 @@ const setTextColor = debounce((color: string | undefined) => {
 		}
 		return;
 	}
-
 	props.editor.chain().setColor(colorValue).run();
 	if (isEntireTextSelected()) {
 		props.block.setStyle("color", colorValue);
 	}
 }, 50);
 
-// Keyboard handling
 const handleKeydown = (e: KeyboardEvent) => {
 	if (e.key === "k" && e.metaKey) {
 		const blockWarnings = {
@@ -291,7 +283,6 @@ const handleKeydown = (e: KeyboardEvent) => {
 			isLink: "You cannot add link inside a link block",
 			isButton: "You cannot add link inside a button block",
 		};
-
 		const blockType = Object.entries(blockWarnings).find(([type]) => (props.block as any)[type]());
 		if (blockType) {
 			toast.warning(blockType[1]);
@@ -338,4 +329,4 @@ const bubbleMenuOptions = {
 defineExpose({
 	handleKeydown,
 });
-</script>
+</script>
\ No newline at end of file