diff --git a/frontend/src/components/Controls/ColorInput.vue b/frontend/src/components/Controls/ColorInput.vue
index 5180c029a..5e9aa6d6b 100644
--- a/frontend/src/components/Controls/ColorInput.vue
+++ b/frontend/src/components/Controls/ColorInput.vue
@@ -4,6 +4,7 @@
 			ref="colorPickerRef"
 			:placement="placement"
 			:offset="popoverOffset"
+			:portal-to="portalTo"
 			@open="events.onFocus"
 			@close="handleClose"
 			:modelValue="resolvedColor"
@@ -164,6 +165,7 @@ const props = withDefaults(
 		showPickerOnMount?: boolean;
 		popoverOffset?: number;
 		autocompleteReferenceElementSelector?: string;
+		portalTo?: string | HTMLElement | boolean;
 	}>(),
 	{
 		modelValue: null,
diff --git a/frontend/src/components/Controls/ColorPicker.vue b/frontend/src/components/Controls/ColorPicker.vue
index 7150dfa02..5fc9f1871 100644
--- a/frontend/src/components/Controls/ColorPicker.vue
+++ b/frontend/src/components/Controls/ColorPicker.vue
@@ -4,6 +4,9 @@
 		v-if="renderMode === 'popover'"
 		:placement="placement"
 		:offset="offset"
+		:portal-to="portalTo"
+		@open="emit('open')"
+		@close="emit('close')"
 		class="!block w-full">
 		<template #target="{ togglePopover, isOpen }">
 			<slot
@@ -21,7 +24,9 @@
 				ref="contentRef"
 				:modelValue="modelValue"
 				:showInput="showInput"
+				:showColorVariableOptions="showColorVariableOptions"
 				renderMode="popover"
+				@mousedown.stop
 				@update:modelValue="emit('update:modelValue', $event)" />
 		</template>
 	</Popover>
@@ -30,7 +35,9 @@
 		ref="contentRef"
 		:modelValue="modelValue"
 		:showInput="showInput"
+		:showColorVariableOptions="showColorVariableOptions"
 		renderMode="inline"
+		@mousedown.stop
 		@update:modelValue="emit('update:modelValue', $event)" />
 </template>
 <script setup lang="ts">
@@ -44,6 +51,7 @@ const props = withDefaults(
 	defineProps<{
 		modelValue?: CSSColorValue | null;
 		showInput?: boolean;
+		showColorVariableOptions?: boolean;
 		placement?:
 			| "bottom-start"
 			| "top-start"
@@ -59,11 +67,12 @@ const props = withDefaults(
 			| "left";
 		renderMode?: "popover" | "inline";
 		offset?: number;
+		portalTo?: string | HTMLElement;
 	}>(),
-	{ modelValue: null, showInput: false, placement: "left-start", renderMode: "popover", offset: 10 },
+	{ modelValue: null, showInput: false, showColorVariableOptions: true, placement: "left-start", renderMode: "popover", offset: 10 },
 );
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:modelValue", "open", "close"]);
 const colorPickerPopover = ref<InstanceType<typeof Popover> | null>(null);
 const contentRef = ref<InstanceType<typeof ColorPickerContent> | null>(null);
 
diff --git a/frontend/src/components/Controls/ColorPickerContent.vue b/frontend/src/components/Controls/ColorPickerContent.vue
index a9eb48dda..3055dc532 100644
--- a/frontend/src/components/Controls/ColorPickerContent.vue
+++ b/frontend/src/components/Controls/ColorPickerContent.vue
@@ -1,53 +1,59 @@
 <template>
 	<div
 		:class="[
-			'color-picker-container flex flex-col gap-2',
-			renderMode === 'inline' ? 'w-full' : 'rounded-lg bg-surface-base p-3 shadow-lg',
+			'color-picker-container flex flex-col gap-1.5',
+			renderMode === 'inline' ? 'w-full' : 'rounded-lg bg-surface-base p-2 shadow-lg w-40',
 		]">
 		<div
 			ref="colorMap"
 			:style="colorMapStyle"
+			class="relative m-auto h-20 w-full rounded-md"
 			@mousedown.prevent="handleSelectorMove"
-			class="relative m-auto h-24 w-full rounded-md"
 			@click.prevent="setColor">
 			<div
-				@mousedown.stop.prevent="handleSelectorMove"
 				:class="selectorClass"
-				:style="colorSelectorStyle"></div>
+				:style="colorSelectorStyle"
+				@mousedown.stop.prevent="handleSelectorMove"></div>
 		</div>
 		<div
 			ref="hueMap"
-			class="relative m-auto h-3 w-full rounded-md"
+			class="relative m-auto h-2.5 w-full rounded-md"
+			:style="hueMapStyle"
 			@click="setHue"
-			@mousedown.prevent="handleHueSelectorMove"
-			:style="hueMapStyle">
-			<div @mousedown="handleHueSelectorMove" :class="hueSelectorClass" :style="hueSelectorStyle"></div>
+			@mousedown.prevent="handleHueSelectorMove">
+			<div :class="hueSelectorClass" :style="hueSelectorStyle" @mousedown="handleHueSelectorMove"></div>
 		</div>
 		<div
 			ref="alphaMap"
-			class="relative m-auto h-3 w-full rounded-md"
+			class="relative m-auto h-2.5 w-full rounded-md"
+			:style="alphaMapStyle"
 			@click="setAlpha"
-			@mousedown.prevent="handleAlphaSelectorMove"
-			:style="alphaMapStyle">
-			<div @mousedown="handleAlphaSelectorMove" :class="hueSelectorClass" :style="alphaSelectorStyle"></div>
+			@mousedown.prevent="handleAlphaSelectorMove">
+			<div :class="hueSelectorClass" :style="alphaSelectorStyle" @mousedown="handleAlphaSelectorMove"></div>
 		</div>
-		<div class="flex flex-wrap gap-1.5">
+		<div class="flex flex-wrap gap-1">
 			<div
 				v-for="color in colors"
 				:key="color"
-				class="h-3.5 w-3.5 cursor-pointer rounded-full shadow-sm"
-				@click="selectColor(color)"
-				:style="{ background: color }"></div>
+				class="h-3 w-3 cursor-pointer rounded-full shadow-sm"
+				:style="{ background: color }"
+				@click="selectColor(color)"></div>
 			<EyeDropperIcon v-if="isSupported" class="text-ink-gray-7" @click="() => open()" />
 		</div>
 		<Autocomplete
 			v-if="showInput"
-			:modelValue="displayValue"
-			class="mt-2 w-full text-sm [&>div>div>input]:text-sm"
+			:model-value="displayValue"
+			class="mt-1 w-full text-sm [&>div>div>input]:text-sm"
 			placeholder="Set Color"
-			:getOptions="getOptions"
-			referenceElementSelector=".color-picker-container"
-			@update:modelValue="handleInputChange" />
+			:get-options="getOptions"
+			reference-element-selector=".color-picker-container"
+			@update:model-value="handleInputChange">
+			<template #prefix>
+				<div
+					class="size-4 shrink-0 rounded border border-outline-gray-2"
+					:style="{ background: currentColor }"></div>
+			</template>
+		</Autocomplete>
 	</div>
 </template>
 <script setup lang="ts">
@@ -104,8 +110,9 @@ const props = withDefaults(
 		modelValue?: CSSColorValue | null;
 		showInput?: boolean;
 		renderMode?: "popover" | "inline";
+		showColorVariableOptions?: boolean;
 	}>(),
-	{ modelValue: null, showInput: false, renderMode: "popover" },
+	{ modelValue: null, showInput: false, renderMode: "popover", showColorVariableOptions: true },
 );
 
 const modelColor = computed(() => {
@@ -122,8 +129,11 @@ const displayValue = computed(() => {
 	return props.modelValue;
 });
 
-const getOptions = async (query: string) =>
-	getColorVariableOptions(query, variables.value, resolveVariableValue, builderStore.canvasDarkMode);
+const getOptions = async (query: string) => {
+	if (props.showColorVariableOptions === false) return [];
+	if (query && !query.trim()) return [];
+	return getColorVariableOptions(query, variables.value, resolveVariableValue, builderStore.canvasDarkMode);
+};
 
 const emit = defineEmits(["update:modelValue"]);
 
@@ -158,7 +168,7 @@ const colorMapStyle = computed(() => ({
 }));
 
 const hueMapStyle = computed(() => ({
-	background: `linear-gradient(90deg, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))`,
+	background: "linear-gradient(90deg, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))",
 }));
 
 const alphaMapStyle = computed(() => ({
diff --git a/frontend/src/components/TextBlockBubbleMenu.vue b/frontend/src/components/TextBlockBubbleMenu.vue
index e7297d708..6853bf87e 100644
--- a/frontend/src/components/TextBlockBubbleMenu.vue
+++ b/frontend/src/components/TextBlockBubbleMenu.vue
@@ -1,139 +1,144 @@
 <template>
 	<bubble-menu
-		ref="menu"
 		:editor="editor"
 		:append-to="overlayElement"
 		:options="{ strategy: 'absolute', placement: 'bottom' }"
+		:get-referenced-virtual-element="getReferencedVirtualElement"
 		:plugin-key="bubbleMenuPluginKey"
+		:should-show="shouldShow"
 		v-show="!canvasProps?.panning && !canvasProps?.scaling"
 		v-if="editor"
-		class="rounded-md border border-outline-gray-3 bg-surface-base p-1 text-lg text-ink-gray-9 shadow-2xl">
+		class="rounded-md border border-outline-gray-3 bg-surface-base p-1 text-lg text-ink-gray-9 shadow-2xl"
+		:class="{ '!border-none !bg-transparent !p-0 !shadow-none': settingColor }">
 		<div
-			v-if="settingLink"
-			class="flex flex-col gap-2 p-1"
-			v-on-click-outside="
-				() => {
-					nextTick(() => {
-						setLink(null, false);
-					});
-				}
-			">
-			<div class="flex">
-				<Input
-					type="text"
-					v-model="textLink"
-					placeholder="https://example.com"
-					class="link-input !w-56 text-sm"
-					@keydown.enter="
-						() => {
-							if (!linkInput) return;
-							const input = linkInput.$el.querySelector('input') as HTMLInputElement;
-							setLink(input.value);
-						}
-					"
-					ref="linkInput" />
-			</div>
-			<Input
-				type="checkbox"
-				:label="'Open in New Tab'"
-				class="text-xs"
-				v-model="openInNewTab"
-				@change="() => setLink(textLink, false)"></Input>
-		</div>
-		<div v-show="!settingLink" class="flex gap-1">
-			<button
-				@click="setHeading(1)"
-				class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
-				:class="{ 'bg-surface-gray-3': block.getElement() === 'h1' }">
-				<code>H1</code>
-			</button>
-			<button
-				@click="setHeading(2)"
-				class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
-				:class="{ 'bg-surface-gray-3': block.getElement() === 'h2' }">
-				<code>H2</code>
-			</button>
-			<button
-				@click="setHeading(3)"
-				class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
-				:class="{ 'bg-surface-gray-3': block.getElement() === 'h3' }">
-				<code>H3</code>
-			</button>
-			<button
-				v-show="!block.isHeader()"
-				@click="editor?.chain().focus().toggleBold().run()"
-				class="rounded px-2 py-1 hover:bg-surface-gray-2"
-				:class="{ 'bg-surface-gray-3': editor.isActive('bold') }">
-				<span class="lucide-bold h-3 w-3" aria-hidden="true" />
-			</button>
-			<button
-				v-show="!block.isHeader()"
-				@click="editor?.chain().focus().toggleItalic().run()"
-				class="rounded px-2 py-1 hover:bg-surface-gray-2"
-				:class="{ 'bg-surface-gray-3': editor.isActive('italic') }">
-				<span class="lucide-italic h-3 w-3" aria-hidden="true" />
-			</button>
-			<button
-				v-show="!block.isHeader()"
-				@click="editor?.chain().focus().toggleStrike().run()"
-				class="rounded px-2 py-1 hover:bg-surface-gray-2"
-				:class="{ 'bg-surface-gray-3': editor.isActive('strike') }">
-				<span class="lucide-strikethrough size-4" />
-			</button>
-
-			<button
-				v-show="!block.isHeader()"
-				@click="editor?.chain().focus().toggleUnderline().run()"
-				class="rounded px-2 py-1 hover:bg-surface-gray-2"
-				:class="{ 'bg-surface-gray-3': editor.isActive('underline') }">
-				<span class="lucide-underline size-4" />
-			</button>
-
-			<button
-				v-show="!block.isHeader() && !block.isLink() && !block.isButton()"
-				@click="
+			class="text-block-bubble-menu flex items-center justify-center"
+			@mouseenter="isHoveringMenu = true"
+			@mouseleave="isHoveringMenu = false"
+			@mousedown="handleMenuMouseDown">
+			<div
+				v-if="settingLink"
+				class="flex flex-col gap-2 p-1"
+				v-on-click-outside="
 					() => {
-						if (!editor) return;
-						enableLinkInput();
+						nextTick(() => {
+							setLink(null, false);
+						});
 					}
-				"
-				class="rounded px-2 py-1 hover:bg-surface-gray-2"
-				:class="{ 'bg-surface-gray-3': editor.isActive('link') }">
-				<span class="lucide-link h-3 w-3" aria-hidden="true" />
-			</button>
-			<div v-show="!block.isHeader()">
-				<ColorPicker
-					:modelValue="selectedColor"
-					@update:modelValue="setTextColor"
-					:show-input="true"
-					placement="top">
-					<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="flex">
+					<Input
+						type="text"
+						v-model="textLink"
+						placeholder="https://example.com"
+						class="link-input !w-56 text-sm"
+						@keydown.enter="
+							() => {
+								if (!linkInput) return;
+								const input = linkInput.$el.querySelector('input') as HTMLInputElement;
+								setLink(input.value);
+							}
+						"
+						ref="linkInput" />
+				</div>
+				<Input
+					type="checkbox"
+					:label="'Open in New Tab'"
+					class="text-xs"
+					v-model="openInNewTab"
+					@change="() => setLink(textLink, false)"></Input>
+			</div>
+			<div v-show="!settingLink" class="flex gap-1">
+				<div v-show="!settingColor" class="flex gap-1">
+					<button
+						@click="setHeading(1)"
+						class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
+						:class="{ 'bg-surface-gray-3': block.getElement() === 'h1' }">
+						<code>H1</code>
+					</button>
+					<button
+						@click="setHeading(2)"
+						class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
+						:class="{ 'bg-surface-gray-3': block.getElement() === 'h2' }">
+						<code>H2</code>
+					</button>
+					<button
+						@click="setHeading(3)"
+						class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
+						:class="{ 'bg-surface-gray-3': block.getElement() === 'h3' }">
+						<code>H3</code>
+					</button>
+					<button
+						v-show="!block.isHeader()"
+						@click="editor?.chain().focus().toggleBold().run()"
+						class="rounded px-2 py-1 hover:bg-surface-gray-2"
+						:class="{ 'bg-surface-gray-3': editor.isActive('bold') }">
+						<span class="lucide-bold h-3 w-3" aria-hidden="true" />
+					</button>
+					<button
+						v-show="!block.isHeader()"
+						@click="editor?.chain().focus().toggleItalic().run()"
+						class="rounded px-2 py-1 hover:bg-surface-gray-2"
+						:class="{ 'bg-surface-gray-3': editor.isActive('italic') }">
+						<span class="lucide-italic h-3 w-3" aria-hidden="true" />
+					</button>
+					<button
+						v-show="!block.isHeader()"
+						@click="editor?.chain().focus().toggleStrike().run()"
+						class="rounded px-2 py-1 hover:bg-surface-gray-2"
+						:class="{ 'bg-surface-gray-3': editor.isActive('strike') }">
+						<span class="lucide-strikethrough size-4" />
+					</button>
+
+					<button
+						v-show="!block.isHeader()"
+						@click="editor?.chain().focus().toggleUnderline().run()"
+						class="rounded px-2 py-1 hover:bg-surface-gray-2"
+						:class="{ 'bg-surface-gray-3': editor.isActive('underline') }">
+						<span class="lucide-underline size-4" />
+					</button>
+
+					<button
+						v-show="!block.isHeader() && !block.isLink() && !block.isButton()"
+						@click="
+							() => {
+								if (!editor) return;
+								enableLinkInput();
+							}
+						"
+						class="rounded px-2 py-1 hover:bg-surface-gray-2"
+						:class="{ 'bg-surface-gray-3': editor.isActive('link') }">
+						<span class="lucide-link h-3 w-3" aria-hidden="true" />
+					</button>
+				</div>
+				<div v-show="!block.isHeader()">
+					<ColorPicker
+						ref="colorPickerRef"
+						:modelValue="selectedColor"
+						:show-input="true"
+						placement="top"
+						:portal-to="false"
+						@mousedown.stop
+						@update:modelValue="setTextColor"
+						@open="settingColor = true"
+						@close="settingColor = false">
+						<template #target="{ togglePopover }">
+							<button
+								class="rounded px-2 py-1 hover:bg-surface-gray-2 transition-all duration-100 overflow-hidden"
+								:class="settingColor ? 'h-0 p-0 m-0 opacity-0' : ''"
+								@click="togglePopover()"
+								@mousedown.prevent>
 								<div
-									class="h-4 w-4 rounded shadow-sm"
-									@click="
-										() => {
-											togglePopover();
-										}
-									"
+									class="h-5 w-5 rounded-full shadow-sm border border-outline-gray-2"
 									: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"
-							:modelValue="selectedColor"
-							class="!w-32 text-sm"
-							@update:modelValue="setTextColor" />
-					</template>
-				</ColorPicker>
+							</button>
+						</template>
+					</ColorPicker>
+				</div>
 			</div>
 		</div>
 	</bubble-menu>
@@ -143,12 +148,13 @@
 import type Block from "@/block";
 import ColorPicker from "@/components/Controls/ColorPicker.vue";
 import Input from "@/components/Controls/Input.vue";
+import { posToDOMRect } from "@tiptap/core";
 import type { Editor } from "@tiptap/vue-3";
 import { BubbleMenu } from "@tiptap/vue-3/menus";
 import { vOnClickOutside } from "@vueuse/components";
 import { debouncedWatch } from "@vueuse/core";
 import { debounce, toast } from "frappe-ui";
-import { computed, nextTick, ref, watch, type Ref } from "vue";
+import { computed, nextTick, ref, watch, onBeforeUnmount, type Ref } from "vue";
 
 const props = defineProps<{
 	block: Block;
@@ -162,6 +168,139 @@ const settingLink = ref(false);
 const textLink = ref("");
 const openInNewTab = ref(false);
 const linkInput = ref(null) as Ref<typeof Input | null>;
+const settingColor = ref(false);
+const colorPickerRef = ref<any>(null);
+const isHoveringMenu = ref(false);
+const isMouseDownInMenu = ref(false);
+
+const handleMouseUp = () => {
+	isMouseDownInMenu.value = false;
+};
+
+const isInteractingWithMenu = () => {
+	const activeEl = document.activeElement;
+	const menuEl = document.querySelector(".text-block-bubble-menu");
+	return !!(menuEl && activeEl && menuEl.contains(activeEl));
+};
+
+const shouldShow = (bubbleMenuProps: any) => {
+	const { editor, from, to } = bubbleMenuProps;
+	if (!editor) return false;
+	const hasSelection = from !== to;
+	if (!hasSelection) return false;
+
+	return editor.isFocused || isHoveringMenu.value || isMouseDownInMenu.value || isInteractingWithMenu() || settingColor.value;
+};
+
+const handleMenuMouseDown = (e: MouseEvent) => {
+	isMouseDownInMenu.value = true;
+	const target = e.target as HTMLElement;
+	if (target.tagName !== "INPUT" && !target.closest("input")) {
+		e.preventDefault();
+	}
+};
+
+const handleOutsideClick = (e: MouseEvent) => {
+	const menuEl = document.querySelector(".text-block-bubble-menu");
+	if (menuEl && !menuEl.contains(e.target as Node)) {
+		colorPickerRef.value?.togglePopover(false);
+		settingColor.value = false;
+	}
+};
+
+let lockedRelativeRect: { left: number; top: number; width: number; height: number } | null = null;
+
+const getSelectionRect = () => {
+	if (!props.editor) return new DOMRect();
+	const { view, state } = props.editor;
+	const { from, to } = state.selection;
+	
+	try {
+		return posToDOMRect(view, from, to);
+	} catch (e) {
+		return new DOMRect();
+	}
+};
+
+const getReferencedVirtualElement = () => {
+	return {
+		getBoundingClientRect: () => {
+			if (settingColor.value && lockedRelativeRect) {
+				const editorEl = props.editor?.view.dom;
+				if (editorEl) {
+					const editorRect = editorEl.getBoundingClientRect();
+					return new DOMRect(
+						editorRect.left + lockedRelativeRect.left,
+						editorRect.top + lockedRelativeRect.top,
+						lockedRelativeRect.width,
+						lockedRelativeRect.height
+					);
+				}
+			}
+			return getSelectionRect();
+		},
+		getClientRects: () => {
+			if (settingColor.value && lockedRelativeRect) {
+				const editorEl = props.editor?.view.dom;
+				if (editorEl) {
+					const editorRect = editorEl.getBoundingClientRect();
+					const rect = new DOMRect(
+						editorRect.left + lockedRelativeRect.left,
+						editorRect.top + lockedRelativeRect.top,
+						lockedRelativeRect.width,
+						lockedRelativeRect.height
+					);
+					return [rect];
+				}
+			}
+			const rect = getSelectionRect();
+			return [rect];
+		},
+		contextElement: props.editor?.view.dom
+	};
+};
+
+watch(settingColor, (isOpen) => {
+	if (isOpen) {
+		const editorEl = props.editor?.view.dom;
+		if (editorEl) {
+			const selectionRect = getSelectionRect();
+			const editorRect = editorEl.getBoundingClientRect();
+			lockedRelativeRect = {
+				left: selectionRect.left - editorRect.left,
+				top: selectionRect.top - editorRect.top,
+				width: selectionRect.width,
+				height: selectionRect.height
+			};
+		}
+		document.addEventListener("mousedown", handleOutsideClick, true);
+		window.addEventListener("mouseup", handleMouseUp);
+	} else {
+		lockedRelativeRect = null;
+		document.removeEventListener("mousedown", handleOutsideClick, true);
+		window.removeEventListener("mouseup", handleMouseUp);
+		isMouseDownInMenu.value = false;
+	}
+	nextTick(() => {
+		props.editor?.view.dispatch(
+			props.editor.state.tr.setMeta(bubbleMenuPluginKey, "updatePosition")
+		);
+	});
+});
+
+watch(settingLink, () => {
+	nextTick(() => {
+		props.editor?.view.dispatch(
+			props.editor.state.tr.setMeta(bubbleMenuPluginKey, "updatePosition")
+		);
+	});
+});
+
+onBeforeUnmount(() => {
+	lockedRelativeRect = null;
+	document.removeEventListener("mousedown", handleOutsideClick, true);
+	window.removeEventListener("mouseup", handleMouseUp);
+});
 
 const editorRef = computed(() => props.editor);
 const bubbleMenuPluginKey = "bubbleMenu";
@@ -269,13 +408,25 @@ const handleKeydown = (e: KeyboardEvent) => {
 	}
 };
 
+let lastSelection = { from: 0, to: 0 };
+
 watch(
 	editorRef,
 	(newEditor) => {
 		if (newEditor) {
+			const { from, to } = newEditor.state.selection;
+			lastSelection = { from, to };
+
 			newEditor.on("selectionUpdate", () => {
-				settingLink.value = false;
-				textLink.value = "";
+				if (settingColor.value) return;
+				if (isHoveringMenu.value || isMouseDownInMenu.value || isInteractingWithMenu()) return;
+				const { from: newFrom, to: newTo } = newEditor.state.selection;
+				if (newFrom !== lastSelection.from || newTo !== lastSelection.to) {
+					settingLink.value = false;
+					textLink.value = "";
+					settingColor.value = false;
+					lastSelection = { from: newFrom, to: newTo };
+				}
 			});
 		}
 	},