EmbedPDF
DocsVuePluginsSelection

Selection Plugin

The Selection Plugin enables users to select text within the PDF document, just like on a standard webpage. It provides the <SelectionLayer /> to visually highlight the selected text and a rich API to get the selected content.

Installation

This plugin depends on the Interaction Manager plugin. You must install both packages.

npm install @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager

Registration

Import SelectionPluginPackage and its InteractionManager dependency, and add them to the plugins array. The Selection plugin should be registered after its dependency.

import { createPluginRegistration } from '@embedpdf/core'
// ... other imports
import { InteractionManagerPluginPackage } from '@embedpdf/plugin-interaction-manager/vue'
import { SelectionPluginPackage } from '@embedpdf/plugin-selection/vue'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(DocumentManagerPluginPackage, { /* ... */ }),
 
  // Register dependency first
  createPluginRegistration(InteractionManagerPluginPackage),
 
  // Register the selection plugin
  createPluginRegistration(SelectionPluginPackage),
]

Usage

The plugin has two main parts: the <SelectionLayer /> component for the UI, and the useSelectionCapability composable for interacting with the selection data.

1. Displaying the Selection

To show the highlighted text, place the <SelectionLayer /> component inside the default slot of your <Scroller />. For text selection to work correctly, it must be a child of the PagePointerProvider.

Both components require the documentId to link to the correct document state.

<script setup lang="ts">
import { PagePointerProvider } from '@embedpdf/plugin-interaction-manager/vue';
import { SelectionLayer } from '@embedpdf/plugin-selection/vue';
</script>
<template>
  <Scroller :document-id="activeDocumentId">
    <template #default="{ page }">
      <PagePointerProvider :document-id="activeDocumentId" :page-index="page.pageIndex">
        <RenderLayer :document-id="activeDocumentId" :page-index="page.pageIndex" />
        <SelectionLayer :document-id="activeDocumentId" :page-index="page.pageIndex" />
      </PagePointerProvider>
    </template>
  </Scroller>
</template>

2. Interacting with the Selection

The useSelectionCapability composable allows you to work with the selected text. You need to scope the capability to the specific document using .forDocument(id).

You can use the onSelectionChange event to know when a selection exists, which is useful for enabling or disabling UI elements like a “Copy” button.

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useSelectionCapability, type SelectionRangeX } from '@embedpdf/plugin-selection/vue';
 
const props = defineProps<{ documentId: string }>();
const { provides: selectionCapability } = useSelectionCapability();
const hasSelection = ref(false);
 
onMounted(() => {
  if (!selectionCapability.value) return;
  const selection = selectionCapability.value.forDocument(props.documentId);
  
  return selection.onSelectionChange((sel: SelectionRangeX | null) => {
    hasSelection.value = !!sel;
  });
});
 
const handleCopy = () => {
  selectionCapability.value?.forDocument(props.documentId).copyToClipboard();
};
</script>
 
<template>
  <button @click="handleCopy" :disabled="!hasSelection">Copy</button>
</template>

3. Adding a Selection Menu

You can display a contextual menu near the selected text—perfect for a “Copy” button that appears inline. Use the selection-menu scoped slot on <SelectionLayer />. The placement prop provides hints about whether to position the menu above or below the selection.

<script setup lang="ts">
import { SelectionLayer, useSelectionCapability } from '@embedpdf/plugin-selection/vue';
 
const props = defineProps<{ documentId: string }>();
const { provides: selectionCapability } = useSelectionCapability();
 
const handleCopy = () => {
  const scope = selectionCapability.value?.forDocument(props.documentId);
  scope?.copyToClipboard();
  scope?.clear(); // Clear selection after copying
};
</script>
 
<template>
  <SelectionLayer :document-id="documentId" :page-index="page.pageIndex">
    <template #selection-menu="{ rect, menuWrapperProps, placement }">
      <div v-bind="menuWrapperProps">
        <div 
          :style="{ 
            position: 'absolute', 
            top: placement.suggestTop ? '-48px' : `${rect.size.height + 8}px`, 
            pointerEvents: 'auto', 
            cursor: 'default' 
          }"
        >
          <button @click="handleCopy">Copy</button>
        </div>
      </div>
    </template>
  </SelectionLayer>
</template>

The menuWrapperProps must be bound to your wrapper element—it handles proper positioning relative to page rotation.

Live Example

Try selecting text in the viewer below. A contextual “Copy” menu will appear near your selection, and the toolbar’s “Copy Text” button will become active. This demonstrates both the selection-menu scoped slot and the useSelectionCapability composable.

API Reference

Configuration (SelectionPluginConfig)

OptionTypeDescription
menuHeightnumberThe approximate height of the selection menu in pixels. Used to determine whether to show the menu above or below the selection.
Default: 40

Component: <SelectionLayer />

The component that renders the blue rectangles over the selected text.

PropTypeDescription
documentIdstring(Required) The ID of the document.
pageIndexnumber(Required) The index of the page this layer is on.
backgroundstring(Optional) The color of the selection highlight.
Default: 'rgba(33,150,243)'

Scoped Slot: selection-menu

PropTypeDescription
rectRectThe bounding box of the selection.
menuWrapperPropsobjectVue props to bind to your menu’s wrapper element for positioning.
placementobjectAn object with suggestTop: boolean to help position the menu above or below the selection.

Composable: useSelectionCapability()

Connects your component to the selection plugin’s API.

Returns

PropertyTypeDescription
providesRef<SelectionCapability | null>The selection API object.

SelectionCapability Methods

MethodDescription
forDocument(id)Returns a SelectionScope for the specified document ID.

SelectionScope Methods (Returned by forDocument)

MethodDescription
copyToClipboard()Triggers the process to copy the currently selected text to the user’s clipboard.
clear()Clears the current selection.
getSelectedText()Returns a Task<string[]> that resolves with the selected text content. Each string in the array is a line.
getFormattedSelection()Returns an array of objects describing the selection on each page, including its bounding box and the individual highlight rectangles.
onSelectionChangeAn event hook that fires when the text selection is created, updated, or cleared.
onEndSelectionAn event hook that fires when the user finishes selecting text (on mouse up). This is ideal for fetching the selected text content.
Last updated on December 5, 2025
AnnotationZoom

Need Help?

Join our community for support, discussions, and to contribute to EmbedPDF's development.

GitHub DiscussionsDiscord CommunitySupport Development