@atlaskit/pragmatic-drag-and-drop-docs/constellation/05-core-package/00-adapters/01-text-selection/about.mdx

This package holds the documentation for Pragmatic drag and drop in one place. It is not intended to be consumed directly by consumers. The package is used by other tools for sharing examples

---
order: 0
title: Text selection adapter
description: Listen and respond to the dragging of text selections in a document
---

import SectionMessage from '@atlaskit/section-message';

The text selection adapter allows you to listen and respond to text selections being dragged around
in a `window`. Text selection is seperate from the
[element adapter](/components/pragmatic-drag-and-drop/core-package/adapters/element) as text
selections are not based on elements, but rather, whatever text the user has wanted to select.

The text selection adapter consists of the following pieces:

- `dropTargetForTextSelection`: marking an element as a valid
  [drop target](/components/pragmatic-drag-and-drop/core-package/drop-targets) for text selection
  drag operations
- `monitorForTextSelection`: create a
  [monitor](/components/pragmatic-drag-and-drop/core-package/monitors) to listen to text selection
  drag operations anywhere
- `type`s: all types for this adapter

<SectionMessage>

It is likely that some
[top level utilities](/components/pragmatic-drag-and-drop/core-package/utilities) will be helpful
for your experience as well

</SectionMessage>

## Drop targets for text selection

A [drop target](/components/pragmatic-drag-and-drop/core-package/drop-targets) for text selection
drag operations.

The default `dropEffect` for this type of drop target is `"copy"` as generally you will be copying
dragged text. However, if that is not the case for your drop target, then please update it's drop
effect through `getDropEffect()`.

```ts
import { dropTargetForTextSelection } from '@atlaskit/pragmatic-drag-and-drop/text-selection/adapter';

const cleanup = dropTargetForTextSelection({
  element: myElement,
  onDragStart: () => console.log('text started dragging in me');
});
```

## Monitors for text selection

A [monitor](/components/pragmatic-drag-and-drop/core-package/monitors) for text selection drag
operations.

```ts
import { monitorForTextSelection } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

const cleanup = monitorForTextSelection({
  onDragStart: () => console.log('Dragging an element');
});
```

## Types

Generally you won't need to explicitly use our provided types, but we expose a number of TypeScript
types if you would like to use them.

All [events](/components/pragmatic-drag-and-drop/core-package/events) on drop targets and monitors
are given the following base payload:

```ts
type TextSelectionEventBasePayload = {
	location: DragLocationHistory;
	source: TextSelectionDragPayload;
};

type TextSelectionDragPayload = {
	/**
	 * The `Text` node that is the user started the drag from.
	 * Note: the `Text` node does not include all text being dragged.
	 * Use the `plain` or `html` properties to get the full selection
	 */
	target: Text;
	/** The plain text of the selection */
	plain: string;
	/** the HTML of the selection */
	HTML: string;
};
```

For all the arguments for all events, you can use our event map type:

```ts
type TextSelectionEventPayloadMap = {
	onDragStart: TextSelectionEventBasePayload;
	// .. the rest of the events
};
```

Drop targets are given a little bit more information in each event:

```ts
type TextSelectionDropTargetEventBasePayload = TextSelectionEventBasePayload & {
	/**
	 * A convenance pointer to this drop targets values
	 */
	self: DropTargetRecord;
};
```

For all arguments for all events on drop targets, you can use our event map type:

```ts
type TextSelectionDropTargetEventPayloadMap = {
	onDragStart: TextSelectionDropTargetEventBasePayload;
	// .. the rest of the events
};
```

Drop target feedback functions (`canDrop`, `getData`, `getDropEffect`, `getIsSticky`) are given the
following:

```ts
type TextSelectionDropTargetGetFeedbackArgs = {
	/**
	 * The users _current_ input
	 */
	input: Input;
	/**
	 * The data associated with the entity being dragged
	 */
	source: TextSelectionDragPayload;
	/**
	 * This drop target's element
	 */
	element: Element;
};
```

The monitor feedback function (`canMonitor`), is given the following:

```ts
type TextSelectionMonitorGetFeedbackArgs = {
	/**
	 * The users `initial` drag location
	 */
	initial: DragLocation;
	/**
	 * The data associated with the entity being dragged
	 */
	source: TextSelectionDragPayload;
};
```

You can get these type from the text selection adapter import:

```ts
import type {
  // Payload for the text selection being dragged
  TextSelectionDragPayload
  // Base events
  TextSelectionEventBasePayload
  TextSelectionEventPayloadMap,
  // Drop target events
  TextSelectionDropTargetEventBasePayload,
  TextSelectionDropTargetEventPayloadMap,
  // Feedback types
  TextSelectionDropTargetGetFeedbackArgs,
  TextSelectionMonitorGetFeedbackArgs,
} from '@atlaskit/pragmatic-drag-and-drop/text-selection/adapter';
```

There are also some types (eg `DropTargetLocation`) that can be used for all adapters which can be
found on our [top level utilities page](/components/pragmatic-drag-and-drop/core-package/utilities)