Fixed Vue AnnotationContainer component where mixBlendMode style was incorrectly applied to the selection menu.

Author: bobsingor

.changeset/fix-vue-annotation-mixblendmode-inheritance.md

@@ -0,0 +1,5 @@
+---
+'@embedpdf/plugin-annotation': patch
+---
+
+Fixed Vue `AnnotationContainer` component where `mixBlendMode` style was incorrectly applied to the selection menu. The style now only applies to the annotation content div, matching the behavior of React and Svelte implementations. This was caused by Vue's attribute inheritance passing the style to the root element which wrapped both the annotation and the selection menu.

packages/plugin-annotation/src/vue/components/annotation-container.vue

@@ -1,6 +1,6 @@
 <template>
-  <div data-no-interaction>
-    <div v-bind="{ ...dragProps, ...doubleProps }" :style="containerStyle">
+  <div data-no-interaction :style="{ display: 'contents' }">
+    <div v-bind="{ ...dragProps, ...doubleProps }" :style="mergedContainerStyle">
       <slot :annotation="currentObject"></slot>
 
       <template v-if="isSelected && isResizable">
@@ -53,6 +53,13 @@
   </div>
 </template>
 
+<script lang="ts">
+// Disable attribute inheritance so style doesn't fall through to root element
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script setup lang="ts" generic="T extends PdfAnnotationObject">
 import { ref, computed, watch, useSlots, toRaw, shallowRef, VNode } from 'vue';
 import { PdfAnnotationObject, Rect } from '@embedpdf/models';
@@ -88,6 +95,7 @@ const props = withDefaults(
     onSelect: (event: TouchEvent | MouseEvent) => void;
     zIndex?: number;
     selectionOutlineColor?: string;
+    style?: Record<string, string | number>;
   }>(),
   {
     lockAspectRatio: false,
@@ -260,6 +268,12 @@ const containerStyle = computed(() => ({
   zIndex: props.zIndex,
 }));
 
+// Merge container style with passed style prop (for mixBlendMode, etc.)
+const mergedContainerStyle = computed(() => ({
+  ...containerStyle.value,
+  ...(props.style ?? {}),
+}));
+
 // Add useSlots to access slot information
 const slots = useSlots();
 </script>