add html handling in native types (#2949)

* add html handling in native types

* add release strategy

* add documentation

.yarn/versions/88ed6e63.yml

@@ -0,0 +1,5 @@
+releases:
+  react-dnd-documentation: patch
+  react-dnd-examples-decorators: patch
+  react-dnd-examples-hooks: patch
+  react-dnd-html5-backend: patch

packages/backend-html5/src/HTML5BackendImpl.ts

@@ -649,6 +649,7 @@ export class HTML5BackendImpl implements Backend {
 		this.dropTargetIds = []
 
 		if (this.isDraggingNativeItem()) {
+			e.preventDefault();
 			this.currentNativeSource?.loadDataTransfer(e.dataTransfer)
 		}
 

packages/backend-html5/src/NativeDragSources/nativeTypesConfig.ts

@@ -25,6 +25,12 @@ export const nativeTypesConfig: {
 		},
 		matchesTypes: ['Files'],
 	},
+	[NativeTypes.HTML]: {
+		exposeProperties: {
+			html: (dataTransfer: DataTransfer, matchesTypes: string[]): string => getDataFromDataTransfer(dataTransfer, matchesTypes, ''),
+		},
+		matchesTypes: ['Html', 'text/html'],
+	},
 	[NativeTypes.URL]: {
 		exposeProperties: {
 			urls: (dataTransfer: DataTransfer, matchesTypes: string[]): string[] =>

packages/backend-html5/src/NativeTypes.ts

@@ -1,3 +1,4 @@
 export const FILE = '__NATIVE_FILE__'
 export const URL = '__NATIVE_URL__'
 export const TEXT = '__NATIVE_TEXT__'
+export const HTML = '__NATIVE_HTML__'

packages/docsite/markdown/examples/other/native-html.md

@@ -0,0 +1,10 @@
+---
+path: '/examples/other/native-html'
+title: 'Native Html'
+---
+
+Example demonstrating drag and drop of native html.
+Works great for dragging images from another tab or iframe.
+
+<view-source name="06-other/native-html" component="other-native-html">
+</view-source>

packages/docsite/src/constants.ts

@@ -234,6 +234,10 @@ export const ExamplePages: PageGroup[] = [
 				location: '/examples/other/native-files',
 				title: 'Native Files',
 			},
+			OTHER_HTML_FILES: {
+				location: '/examples/other/native-html',
+				title: 'Native Html',
+			},
 		},
 	},
 	{

packages/examples-hooks/src/06-other/native-html/Container.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { useState, useCallback } from 'react'
+import { DropTargetMonitor } from 'react-dnd'
+import { TargetBox } from './TargetBox'
+import { HTMLContent } from './HTMLContent'
+
+export const Container: React.FC = () => {
+	const [droppedHTML, setDroppedHTML] = useState<string>('')
+
+	const handleHTMLDrop = useCallback(
+		(item: any, monitor: DropTargetMonitor) => {
+			if (monitor) {
+				const html = monitor.getItem().html
+				setDroppedHTML(html)
+			}
+		}, 
+		[],
+	)	
+
+	return (
+		<>
+			<iframe srcDoc={`<img src='https://react-dnd.github.io/react-dnd/favicon-32x32.png' />`} />
+			<TargetBox onDrop={handleHTMLDrop} />
+			<HTMLContent html={droppedHTML} />	
+		</>
+	)
+}

packages/examples-hooks/src/06-other/native-html/HTMLContent.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export interface HTMLContentProps {
+	html: string
+}
+
+export const HTMLContent: React.FC<HTMLContentProps> = ({ html }) => {
+	if (html.length === 0) {
+		return <div>Nothing to display</div>
+	}
+
+	return <div>
+		{html}
+	</div>
+}

packages/examples-hooks/src/06-other/native-html/TargetBox.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { NativeTypes } from 'react-dnd-html5-backend'
+import { useDrop, DropTargetMonitor } from 'react-dnd'
+
+const style: React.CSSProperties = {
+	border: '1px solid gray',
+	height: '15rem',
+	width: '15rem',
+	padding: '2rem',
+	textAlign: 'center',
+}
+
+export interface TargetBoxProps {
+	onDrop: (props: TargetBoxProps, monitor: DropTargetMonitor) => void
+}
+
+export const TargetBox: React.FC<TargetBoxProps> = (props) => {
+	const { onDrop } = props
+	const [{ canDrop, isOver }, drop] = useDrop({
+		accept: [NativeTypes.HTML],
+		drop(item, monitor) {
+			if (onDrop) {
+				onDrop(props, monitor)
+			}
+		},
+		collect: (monitor) => ({
+			isOver: monitor.isOver(),
+			canDrop: monitor.canDrop(),
+		}),
+	})
+
+	const isActive = canDrop && isOver
+	return (
+		<div ref={drop} style={style}>
+			{isActive ? 'Release to drop' : 'Drag HTML here'}
+		</div>
+	)
+}

packages/examples-hooks/src/06-other/native-html/index.ts

@@ -0,0 +1 @@
+export { Container as default } from './Container'

packages/examples-hooks/src/index.ts

@@ -15,6 +15,7 @@ import sortableStressTest from './04-sortable/stress-test'
 import customizeDropEffects from './05-customize/drop-effects'
 import customizeHandlesAndPreviews from './05-customize/handles-and-previews'
 import otherNativeFiles from './06-other/native-files'
+import otherNativeHtml from './06-other/native-html'
 import dragSourceRerender from './07-regression/drag-source-rerender'
 import remountWithCorrectProps from './07-regression/remount-with-correct-props'
 import otherChainedConnectors from './07-regression/chained-connectors'
@@ -41,6 +42,7 @@ export const componentIndex: {
 	'other-drag-source-rerender': dragSourceRerender,
 	'other-remount-with-correct-props': remountWithCorrectProps,
 	'other-native-files': otherNativeFiles,
+	'other-native-html': otherNativeHtml,
 	'other-chained-connectors': otherChainedConnectors,
 	'other-previews-memory-leak': otherPreviewsMemoryLeak,
 }