@embedpdf/plugin-annotation 2.10.1 → 2.11.1

package/dist/vue/index.js

@@ -5,11 +5,11 @@ import { defineComponent, ref, watchEffect, openBlock, createElementBlock, norma
 import { getCounterRotation } from "@embedpdf/utils";
 import { useInteractionHandles, useDoublePressProps, CounterRotate, deepToRaw } from "@embedpdf/utils/vue";
 import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/vue";
-import { boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, getContrastStrokeColor, PdfBlendMode, PdfAnnotationSubtype, blendModeToCss } from "@embedpdf/models";
+import { boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, getContrastStrokeColor, PdfBlendMode, blendModeToCss, PdfAnnotationSubtype } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/vue";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/vue";
 const _hoisted_1$e = ["src"];
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "appearance-image",
   props: {
     appearance: {},
@@ -124,7 +124,7 @@ const _hoisted_2$a = ["width", "height", "stroke"];
 const __default__$f = {
   inheritAttrs: false
 };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...__default__$f,
   __name: "annotation-container",
   props: {
@@ -689,7 +689,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               annotation: childObject.value,
               appearanceActive: apActive.value
             }),
-            ((_a = __props.appearance) == null ? void 0 : _a.normal) ? (openBlock(), createBlock(_sfc_main$G, {
+            ((_a = __props.appearance) == null ? void 0 : _a.normal) ? (openBlock(), createBlock(_sfc_main$N, {
               key: 0,
               appearance: __props.appearance.normal,
               style: normalizeStyle({ display: apActive.value ? "block" : "none" })
@@ -880,7 +880,7 @@ const _hoisted_1$c = {
 };
 const _hoisted_2$9 = ["width", "height", "stroke"];
 const _hoisted_3$9 = ["width", "height", "stroke"];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "group-selection-box",
   props: {
     documentId: {},
@@ -1488,8 +1488,10 @@ function useRegisterRenderers(entries) {
 function createRenderer(entry) {
   return {
     id: entry.id,
-    matches: entry.matches,
-    component: markRaw(entry.component),
+    matches: entry.matches ?? (() => false),
+    component: entry.component ? markRaw(entry.component) : () => null,
+    matchesPreview: entry.matchesPreview,
+    previewContainerStyle: entry.previewContainerStyle ? (props) => entry.previewContainerStyle(props) : void 0,
     vertexConfig: entry.vertexConfig,
     zIndex: entry.zIndex,
     defaultBlendMode: entry.defaultBlendMode,
@@ -1506,7 +1508,7 @@ function createRenderer(entry) {
   };
 }
 const __default__$e = { inheritAttrs: false };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...__default__$e,
   __name: "link-locked",
   props: {
@@ -1541,7 +1543,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "link-preview",
   props: {
     data: {},
@@ -1571,7 +1573,7 @@ const _hoisted_1$b = ["width", "height", "viewBox"];
 const _hoisted_2$8 = ["d", "stroke-width"];
 const _hoisted_3$8 = ["d", "opacity"];
 const __default__$d = { inheritAttrs: false };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...__default__$d,
   __name: "ink",
   props: {
@@ -1655,27 +1657,19 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
-  __name: "ink-renderer",
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
+  __name: "ink-preview",
   props: {
-    annotation: {},
-    currentObject: {},
-    isSelected: { type: Boolean },
-    isEditing: { type: Boolean },
-    scale: {},
-    pageIndex: {},
-    documentId: {},
-    onClick: { type: Function },
-    appearanceActive: { type: Boolean }
+    data: {},
+    bounds: {},
+    scale: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$B, mergeProps(__props.currentObject, {
-        isSelected: __props.isSelected,
-        scale: __props.scale,
-        onClick: __props.onClick,
-        appearanceActive: __props.appearanceActive
-      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+      return openBlock(), createBlock(_sfc_main$I, mergeProps({
+        isSelected: false,
+        scale: __props.scale
+      }, __props.data), null, 16, ["scale"]);
     };
   }
 });
@@ -1685,7 +1679,7 @@ const _hoisted_3$7 = ["x", "y", "width", "height", "stroke-width"];
 const _hoisted_4$6 = ["d", "fill", "opacity"];
 const _hoisted_5$5 = ["x", "y", "width", "height", "fill", "opacity"];
 const __default__$c = { inheritAttrs: false };
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...__default__$c,
   __name: "square",
   props: {
@@ -1810,27 +1804,19 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
-  __name: "square-renderer",
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
+  __name: "square-preview",
   props: {
-    annotation: {},
-    currentObject: {},
-    isSelected: { type: Boolean },
-    isEditing: { type: Boolean },
-    scale: {},
-    pageIndex: {},
-    documentId: {},
-    onClick: { type: Function },
-    appearanceActive: { type: Boolean }
+    data: {},
+    bounds: {},
+    scale: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$z, mergeProps(__props.currentObject, {
-        isSelected: __props.isSelected,
-        scale: __props.scale,
-        onClick: __props.onClick,
-        appearanceActive: __props.appearanceActive
-      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+      return openBlock(), createBlock(_sfc_main$G, mergeProps({
+        isSelected: false,
+        scale: __props.scale
+      }, __props.data), null, 16, ["scale"]);
     };
   }
 });
@@ -1840,7 +1826,7 @@ const _hoisted_3$6 = ["cx", "cy", "rx", "ry", "stroke-width"];
 const _hoisted_4$5 = ["d", "fill", "opacity"];
 const _hoisted_5$4 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
 const __default__$b = { inheritAttrs: false };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...__default__$b,
   __name: "circle",
   props: {
@@ -1967,27 +1953,19 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
-  __name: "circle-renderer",
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  __name: "circle-preview",
   props: {
-    annotation: {},
-    currentObject: {},
-    isSelected: { type: Boolean },
-    isEditing: { type: Boolean },
-    scale: {},
-    pageIndex: {},
-    documentId: {},
-    onClick: { type: Function },
-    appearanceActive: { type: Boolean }
+    data: {},
+    bounds: {},
+    scale: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$x, mergeProps(__props.currentObject, {
-        isSelected: __props.isSelected,
-        scale: __props.scale,
-        onClick: __props.onClick,
-        appearanceActive: __props.appearanceActive
-      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+      return openBlock(), createBlock(_sfc_main$E, mergeProps({
+        isSelected: false,
+        scale: __props.scale
+      }, __props.data), null, 16, ["scale"]);
     };
   }
 });
@@ -1999,7 +1977,7 @@ const _hoisted_5$3 = ["x1", "y1", "x2", "y2", "opacity"];
 const _hoisted_6$2 = ["d", "transform", "stroke", "fill"];
 const _hoisted_7$1 = ["d", "transform", "stroke", "fill"];
 const __default__$a = { inheritAttrs: false };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...__default__$a,
   __name: "line",
   props: {
@@ -2158,27 +2136,19 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  __name: "line-renderer",
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
+  __name: "line-preview",
   props: {
-    annotation: {},
-    currentObject: {},
-    isSelected: { type: Boolean },
-    isEditing: { type: Boolean },
-    scale: {},
-    pageIndex: {},
-    documentId: {},
-    onClick: { type: Function },
-    appearanceActive: { type: Boolean }
+    data: {},
+    bounds: {},
+    scale: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$v, mergeProps(__props.currentObject, {
-        isSelected: __props.isSelected,
-        scale: __props.scale,
-        onClick: __props.onClick,
-        appearanceActive: __props.appearanceActive
-      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+      return openBlock(), createBlock(_sfc_main$C, mergeProps({
+        isSelected: false,
+        scale: __props.scale
+      }, __props.data), null, 16, ["scale"]);
     };
   }
 });
@@ -2190,7 +2160,7 @@ const _hoisted_5$2 = ["d", "opacity"];
 const _hoisted_6$1 = ["d", "transform", "stroke", "fill"];
 const _hoisted_7 = ["d", "transform", "stroke", "fill"];
 const __default__$9 = { inheritAttrs: false };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...__default__$9,
   __name: "polyline",
   props: {
@@ -2363,27 +2333,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  __name: "polyline-renderer",
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
+  __name: "polyline-preview",
   props: {
-    annotation: {},
-    currentObject: {},
-    isSelected: { type: Boolean },
-    isEditing: { type: Boolean },
-    scale: {},
-    pageIndex: {},
-    documentId: {},
-    onClick: { type: Function },
-    appearanceActive: { type: Boolean }
+    data: {},
+    bounds: {},
+    scale: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, mergeProps(__props.currentObject, {
-        isSelected: __props.isSelected,
-        scale: __props.scale,
-        onClick: __props.onClick,
-        appearanceActive: __props.appearanceActive
-      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+      return openBlock(), createBlock(_sfc_main$A, mergeProps({
+        isSelected: false,
+        scale: __props.scale
+      }, __props.data), null, 16, ["scale"]);
     };
   }
 });
@@ -2394,7 +2356,7 @@ const _hoisted_4$2 = ["d", "opacity"];
 const _hoisted_5$1 = ["d"];
 const _hoisted_6 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
 const __default__$8 = { inheritAttrs: false };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...__default__$8,
   __name: "polygon",
   props: {
@@ -2535,6 +2497,164 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  __name: "polygon-preview",
+  props: {
+    data: {},
+    bounds: {},
+    scale: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$y, mergeProps({
+        isSelected: false,
+        scale: __props.scale
+      }, __props.data), null, 16, ["scale"]);
+    };
+  }
+});
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  __name: "free-text-preview",
+  props: {
+    data: {},
+    bounds: {},
+    scale: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const style = computed(() => ({
+      width: "100%",
+      height: "100%",
+      border: `1px dashed ${props.data.fontColor || "#000000"}`,
+      backgroundColor: "transparent"
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle(style.value)
+      }, null, 4);
+    };
+  }
+});
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  __name: "ink-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$I, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  __name: "square-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$G, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  __name: "circle-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$E, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  __name: "line-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$C, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  __name: "polyline-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$A, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "polygon-renderer",
   props: {
@@ -2550,7 +2670,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$r, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$y, mergeProps(__props.currentObject, {
         isSelected: __props.isSelected,
         scale: __props.scale,
         onClick: __props.onClick,
@@ -3486,25 +3606,36 @@ const builtInRenderers = [
   createRenderer({
     id: "ink",
     matches: (a) => a.type === PdfAnnotationSubtype.INK,
-    component: _sfc_main$A,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.INK,
+    component: _sfc_main$v,
+    renderPreview: _sfc_main$H,
+    previewContainerStyle: ({ data }) => ({
+      mixBlendMode: blendModeToCss(data.blendMode ?? PdfBlendMode.Normal)
+    }),
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "square",
     matches: (a) => a.type === PdfAnnotationSubtype.SQUARE,
-    component: _sfc_main$y,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.SQUARE,
+    component: _sfc_main$u,
+    renderPreview: _sfc_main$F,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "circle",
     matches: (a) => a.type === PdfAnnotationSubtype.CIRCLE,
-    component: _sfc_main$w,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.CIRCLE,
+    component: _sfc_main$t,
+    renderPreview: _sfc_main$D,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "line",
     matches: (a) => a.type === PdfAnnotationSubtype.LINE,
-    component: _sfc_main$u,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.LINE,
+    component: _sfc_main$s,
+    renderPreview: _sfc_main$B,
     vertexConfig: {
       extractVertices: (a) => [a.linePoints.start, a.linePoints.end],
       transformAnnotation: (a, v) => ({
@@ -3517,7 +3648,9 @@ const builtInRenderers = [
   createRenderer({
     id: "polyline",
     matches: (a) => a.type === PdfAnnotationSubtype.POLYLINE,
-    component: _sfc_main$s,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.POLYLINE,
+    component: _sfc_main$r,
+    renderPreview: _sfc_main$z,
     vertexConfig: {
       extractVertices: (a) => a.vertices,
       transformAnnotation: (a, vertices) => ({ ...a, vertices })
@@ -3527,7 +3660,9 @@ const builtInRenderers = [
   createRenderer({
     id: "polygon",
     matches: (a) => a.type === PdfAnnotationSubtype.POLYGON,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.POLYGON,
     component: _sfc_main$q,
+    renderPreview: _sfc_main$x,
     vertexConfig: {
       extractVertices: (a) => a.vertices,
       transformAnnotation: (a, vertices) => ({ ...a, vertices })
@@ -3578,7 +3713,9 @@ const builtInRenderers = [
   createRenderer({
     id: "freeText",
     matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.FREETEXT,
     component: _sfc_main$o,
+    renderPreview: _sfc_main$w,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true },
     isDraggable: (toolDraggable, { isEditing }) => toolDraggable && !isEditing,
     onDoubleClick: (id, setEditingId) => setEditingId(id)
@@ -3593,8 +3730,9 @@ const builtInRenderers = [
   createRenderer({
     id: "link",
     matches: (a) => a.type === PdfAnnotationSubtype.LINK,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.LINK,
     component: _sfc_main$j,
-    renderPreview: _sfc_main$C,
+    renderPreview: _sfc_main$J,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: false },
     useAppearanceStream: false,
     selectOverride: (e, annotation, helpers) => {
@@ -3612,7 +3750,7 @@ const builtInRenderers = [
       helpers.selectAnnotation(helpers.pageIndex, annotation.object.id);
     },
     hideSelectionMenu: (a) => !!a.inReplyToId,
-    renderLocked: _sfc_main$D
+    renderLocked: _sfc_main$K
   })
 ];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
@@ -3944,7 +4082,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedAnnotations.value, ({ annotation, renderer, locked }) => {
           var _a;
-          return openBlock(), createBlock(_sfc_main$F, mergeProps({
+          return openBlock(), createBlock(_sfc_main$M, mergeProps({
             key: annotation.object.id,
             trackedAnnotation: annotation,
             isSelected: locked ? false : allSelectedIds.value.includes(annotation.object.id),
@@ -3996,7 +4134,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             } : void 0
           ]), 1040, ["trackedAnnotation", "isSelected", "isEditing", "isMultiSelected", "isDraggable", "isResizable", "lockAspectRatio", "isRotatable", "vertexConfig", "selectionMenu", "onSelect", "onDoubleClick", "zIndex", "blendMode", "style", "appearance"]);
         }), 128)),
-        allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$E, {
+        allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$L, {
           key: 0,
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
@@ -4118,68 +4256,46 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const registry = useRendererRegistry();
-    const customMatch = computed(
-      () => (registry == null ? void 0 : registry.getAll().find((r) => r.id === props.toolId && r.renderPreview)) ?? null
+    const allRenderers = computed(() => {
+      const external = (registry == null ? void 0 : registry.getAll()) ?? [];
+      const externalIds = new Set(external.map((r) => r.id));
+      return [...external, ...builtInRenderers.filter((r) => !externalIds.has(r.id))];
+    });
+    const match = computed(
+      () => allRenderers.value.find((r) => {
+        var _a;
+        return ((_a = r.matchesPreview) == null ? void 0 : _a.call(r, props.preview)) && r.renderPreview;
+      }) ?? allRenderers.value.find((r) => r.id === props.toolId && r.renderPreview) ?? null
     );
     const style = computed(() => {
-      const base = {
+      var _a, _b;
+      return {
         position: "absolute",
         left: `${props.preview.bounds.origin.x * props.scale}px`,
         top: `${props.preview.bounds.origin.y * props.scale}px`,
         width: `${props.preview.bounds.size.width * props.scale}px`,
         height: `${props.preview.bounds.size.height * props.scale}px`,
         pointerEvents: "none",
-        zIndex: 10
+        zIndex: 10,
+        ...(_b = (_a = match.value) == null ? void 0 : _a.previewContainerStyle) == null ? void 0 : _b.call(_a, {
+          data: props.preview.data,
+          bounds: props.preview.bounds,
+          scale: props.scale
+        })
       };
-      if (props.preview.type === PdfAnnotationSubtype.INK) {
-        base.mixBlendMode = blendModeToCss(props.preview.data.blendMode ?? PdfBlendMode.Normal);
-      }
-      return base;
     });
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", {
+      return ((_a = match.value) == null ? void 0 : _a.renderPreview) ? (openBlock(), createElementBlock("div", {
+        key: 0,
         style: normalizeStyle(style.value)
       }, [
-        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$x), mergeProps({
-          key: 0,
-          isSelected: false,
-          scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).SQUARE ? (openBlock(), createBlock(unref(_sfc_main$z), mergeProps({
-          key: 1,
-          isSelected: false,
-          scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYGON ? (openBlock(), createBlock(unref(_sfc_main$r), mergeProps({
-          key: 2,
-          isSelected: false,
-          scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYLINE ? (openBlock(), createBlock(unref(_sfc_main$t), mergeProps({
-          key: 3,
-          isSelected: false,
-          scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$v), mergeProps({
-          key: 4,
-          isSelected: false,
-          scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$B), mergeProps({
-          key: 5,
-          isSelected: false,
-          scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).FREETEXT ? (openBlock(), createElementBlock("div", {
-          key: 6,
-          style: normalizeStyle({
-            width: "100%",
-            height: "100%",
-            border: `1px dashed ${__props.preview.data.fontColor || "#000000"}`,
-            backgroundColor: "transparent"
-          })
-        }, null, 4)) : ((_a = customMatch.value) == null ? void 0 : _a.renderPreview) ? (openBlock(), createBlock(resolveDynamicComponent(customMatch.value.renderPreview), {
-          key: 7,
+        (openBlock(), createBlock(resolveDynamicComponent(match.value.renderPreview), {
           data: __props.preview.data,
           bounds: __props.preview.bounds,
           scale: __props.scale
-        }, null, 8, ["data", "bounds", "scale"])) : createCommentVNode("", true)
-      ], 4);
+        }, null, 8, ["data", "bounds", "scale"]))
+      ], 4)) : createCommentVNode("", true);
     };
   }
 });
@@ -4440,24 +4556,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 const AnnotationPluginPackage = createPluginPackage(AnnotationPluginPackage$1).addWrapper(_sfc_main$1).addUtility(_sfc_main).build();
 export {
-  _sfc_main$F as AnnotationContainer,
+  _sfc_main$M as AnnotationContainer,
   _sfc_main$2 as AnnotationLayer,
   _sfc_main$3 as AnnotationPaintLayer,
   AnnotationPluginPackage,
   _sfc_main$6 as Annotations,
-  _sfc_main$x as Circle,
+  _sfc_main$E as Circle,
   _sfc_main$p as FreeText,
-  _sfc_main$E as GroupSelectionBox,
+  _sfc_main$L as GroupSelectionBox,
   _sfc_main$i as Highlight,
-  _sfc_main$B as Ink,
-  _sfc_main$v as Line,
+  _sfc_main$I as Ink,
+  _sfc_main$C as Line,
   _sfc_main$k as Link,
-  _sfc_main$r as Polygon,
-  _sfc_main$t as Polyline,
+  _sfc_main$y as Polygon,
+  _sfc_main$A as Polyline,
   _sfc_main$4 as PreviewRenderer,
   _sfc_main$n as RenderAnnotation,
   _sfc_main$1 as RendererRegistryProvider,
-  _sfc_main$z as Square,
+  _sfc_main$G as Square,
   _sfc_main$c as Squiggly,
   _sfc_main$m as Stamp,
   _sfc_main$e as Strikeout,