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] )