@atlaskit/pragmatic-drag-and-drop-docs/constellation/05-core-package/00-adapters/02-external/HTML.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: 3
title: HTML
description: Helpers to make working with native HTML data easier
---

## `containsHTML`

Useful to know whether text data (`"text/html"`) is being dragged. Keep in mind that multiple pieces
of native data can be dragged at once.

```ts
import { containsHTML } from '@atlaskit/pragmatic-drag-and-drop/external/html';

dropTargetForExternal({
	element: myElement,
	canDrop: containsHTML,
});

monitorForExternal({
	canMonitor: containsHTML,
});
```

## `getHTML`

A helper to extract text data (`"text/html"`) from drop data. Get text will return `null` when there
is no html data.

```ts
import { getHTML } from '@atlaskit/pragmatic-drag-and-drop/external/html';

dropTargetForExternal({
	element: myElement,
	onDrop({ source }) {
		const html: string | null = getHTML({ source });
	},
});

monitorForExternal({
	onDrop({ source }) {
		const html: string | null = getHTML({ source });
	},
});
```