diff --git a/src/renderer/components/content-types/ListContent.tsx b/src/renderer/components/content-types/ListContent.tsx
index ef747cdc..bc2a86b0 100644
--- a/src/renderer/components/content-types/ListContent.tsx
+++ b/src/renderer/components/content-types/ListContent.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useImperativeHandle } from 'react'
+import React, { useCallback, useImperativeHandle, useEffect } from 'react'
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'
import uuid from 'uuid'
@@ -6,6 +6,8 @@ import * as ContentTypes from '../../ContentTypes'
import Content, { ContentProps } from '../Content'
import { HypermergeUrl, PushpinUrl } from '../../ShareLink'
import { useDocument } from '../../Hooks'
+import * as ImportData from '../../ImportData'
+
import './ListContent.css'
export type CardId = string & { cardId: true }
@@ -32,7 +34,7 @@ ListContent.maxHeight = 36
/* demo helpers */
-const grid = 8
+const grid = 10
const getItemStyle = (draggableStyle, isDragging) => ({
// some basic styles to make the items look a bit nicer
@@ -41,7 +43,7 @@ const getItemStyle = (draggableStyle, isDragging) => ({
margin: `0 0 ${grid}px 0`,
// change background colour if dragging
- background: isDragging ? 'lightgreen' : 'grey',
+ background: isDragging && 'lightgreen',
// styles we need to apply on draggables
...draggableStyle,
@@ -50,7 +52,8 @@ const getItemStyle = (draggableStyle, isDragging) => ({
const getListStyle = (isDraggingOver) => ({
background: isDraggingOver ? 'lightblue' : 'lightgrey',
padding: grid,
- width: 250,
+ position: 'relative',
+ width: '100%',
})
/* demo helpers end */
@@ -72,6 +75,34 @@ export default function ListContent(props: ContentProps) {
[doc]
)
+ const onPaste = useCallback(
+ (e: ClipboardEvent) => {
+ console.log('onPaste', e)
+ e.preventDefault()
+ e.stopPropagation()
+
+ if (!e.clipboardData) {
+ return
+ }
+
+ ImportData.importDataTransfer(e.clipboardData, (url, importCount) => {
+ console.log('imported', url)
+ changeDoc((doc) => {
+ const id = uuid() as CardId
+ doc.cards.unshift({ id, url })
+ })
+ })
+ },
+ [doc]
+ )
+
+ useEffect(() => {
+ document.addEventListener('paste', onPaste)
+ return () => {
+ document.removeEventListener('paste', onPaste)
+ }
+ }, [onPaste])
+
const onDragEnd = useCallback(
(result) => {
// dropped outside the list
@@ -111,7 +142,7 @@ export default function ListContent(props: ContentProps) {
{...provided.draggableProps}
style={getItemStyle(provided.draggableProps.style, snapshot.isDragging)}
>
-
+
{provided.placeholder}
diff --git a/src/renderer/components/content-types/board/Board.tsx b/src/renderer/components/content-types/board/Board.tsx
index 3860dd84..d86e456c 100644
--- a/src/renderer/components/content-types/board/Board.tsx
+++ b/src/renderer/components/content-types/board/Board.tsx
@@ -12,6 +12,7 @@ import { ContextMenuTrigger } from 'react-contextmenu'
import * as ContentTypes from '../../../ContentTypes'
import * as ImportData from '../../../ImportData'
+import * as UriList from '../../../UriList'
import { PushpinUrl } from '../../../ShareLink'
import { ContentProps } from '../../Content'
import { BoardDoc, BoardDocCard, CardId } from '.'
@@ -271,6 +272,7 @@ const Board: FunctionComponent = (props: ContentProps) => {
.map((c) => cards[c])
.map((c) => ({ ...c, x: c.x - offset.x, y: c.y - offset.y }))
e.clipboardData.setData(MIMETYPE_BOARD_CARD_DATA, JSON.stringify(boardCards))
+ e.clipboardData.setData(UriList.MIME_TYPE, UriList.stringify(boardCards.map((c) => c.url)))
},
[cards, selection]
)