diff --git a/app/globals.css b/app/globals.css
index 2145c5b7..24130b0a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -338,7 +338,7 @@ pre.shiki {
   @apply box-decoration-clone;
 }
 
-.selected .selection-highlight {
+.selection-highlight {
   background-color: Highlight;
   @apply py-[1.5px];
 }
diff --git a/components/Blocks/TextBlock/plugins.ts b/components/Blocks/TextBlock/plugins.ts
index c78fb953..256ab470 100644
--- a/components/Blocks/TextBlock/plugins.ts
+++ b/components/Blocks/TextBlock/plugins.ts
@@ -1,11 +1,19 @@
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { Plugin } from "prosemirror-state";
+
 export const highlightSelectionPlugin = new Plugin({
   state: {
     init(_, { doc }) {
       return DecorationSet.empty;
     },
     apply(tr, oldDecorations, oldState, newState) {
+      // Skip selection-only changes to avoid DOM mutations that break
+      // native selection handle dragging. On blur, we force an update
+      // so the highlight is visible when focus moves to the toolbar.
+      if (!tr.docChanged && !tr.getMeta("updateSelectionHighlight")) {
+        return oldDecorations;
+      }
+
       let decorations = [];
 
       // Check if there's a selection
@@ -20,6 +28,14 @@ export const highlightSelectionPlugin = new Plugin({
     },
   },
   props: {
+    handleDOMEvents: {
+      blur(view) {
+        view.dispatch(
+          view.state.tr.setMeta("updateSelectionHighlight", true),
+        );
+        return false;
+      },
+    },
     decorations(state) {
       return this.getState(state);
     },