diff options
| -rw-r--r-- | apps/web/components/canvas/custom_nodes/textcard.tsx | 19 | ||||
| -rw-r--r-- | apps/web/lib/ExternalDroppedContent.ts | 58 |
2 files changed, 26 insertions, 51 deletions
diff --git a/apps/web/components/canvas/custom_nodes/textcard.tsx b/apps/web/components/canvas/custom_nodes/textcard.tsx index e778eabb..db881fb4 100644 --- a/apps/web/components/canvas/custom_nodes/textcard.tsx +++ b/apps/web/components/canvas/custom_nodes/textcard.tsx @@ -31,24 +31,13 @@ export class textCardUtil extends BaseBoxShapeUtil<ITextCardShape> { return ( <HTMLContainer onPointerDown={isEditing ? stopEventPropagation : undefined} - className="flex h-full w-full items-center justify-center" - style={{ - pointerEvents: isEditing ? "all" : "none", - }} + className={`flex h-full w-full items-center justify-center ${isEditing ? "pointer-events-auto" : "pointer-events-none"}`} > <div - className="overflow-hidden" - style={{ - height: s.props.h, - width: s.props.w, - pointerEvents: "all", - background: "#232c2f", - borderRadius: "16px", - border: "2px solid #374151", - padding: "8px 14px", - }} + className={`overflow-hidden bg-[#232c2f] pointer-events-auto rounded-md border-2 border-[#374151] py-2 px-4 + h-[${s.props.h}]px w-[${s.props.w}]px`} > - <h2 style={{ color: "#95A0AB" }}>{s.props.type}</h2> + <h2 className="text-[#95A0AB]">{s.props.type}</h2> {isEditing ? ( <input value={s.props.content} diff --git a/apps/web/lib/ExternalDroppedContent.ts b/apps/web/lib/ExternalDroppedContent.ts index 75ca8b6f..c1f35b36 100644 --- a/apps/web/lib/ExternalDroppedContent.ts +++ b/apps/web/lib/ExternalDroppedContent.ts @@ -160,10 +160,11 @@ function formatTextToRatio(text: string): { height: number; width: number } { } type CardData = { - type: string; title: string; + type: string; + source: string; content: string; - url: string; + numChunks: string; }; type DroppedData = CardData | string | { imageUrl: string }; @@ -183,47 +184,32 @@ export function handleExternalDroppedContent({ const processedURL = processURL(droppedData); if (processedURL) { createEmbedsFromUrl({ editor, url: processedURL }); - return; } else { - const { height, width } = formatTextToRatio(droppedData); - editor.createShape({ - type: "Textcard", - x: position.x - width / 2, - y: position.y - height / 2, - props: { - content: "", - extrainfo: droppedData, - type: "note", - w: 300, - h: 200, - }, - }); + createTextCard(editor, position, droppedData, "String Content"); } } else if ("imageUrl" in droppedData) { + // Handle image URL (implementation not provided in original code) } else { - const { content, title, url, type } = droppedData; - const processedURL = processURL(url); - if (processedURL) { - createEmbedsFromUrl({ editor, url: processedURL }); - return; - } - const { height, width } = formatTextToRatio(content); - - editor.createShape({ - type: "Textcard", - x: position.x - 250, - y: position.y - 150, - props: { - type, - content: title, - extrainfo: content, - w: height, - h: width, - }, - }); + const { content, title, source, type } = droppedData; + const processedURL = processURL(source); + // if (processedURL) { + // createEmbedsFromUrl({ editor, url: processedURL }); + // } else { + // } + createTextCard(editor, position, title, type, content); } } +function createTextCard(editor: Editor, position: { x: number; y: number }, content: string, type: string, extraInfo: string = "") { + const { height, width } = formatTextToRatio(content); + editor.createShape({ + type: "Textcard", + x: position.x - width / 2, + y: position.y - height / 2, + props: { content, type, extrainfo: extraInfo, h: 200, w: 400 }, + }); +} + function centerSelectionAroundPoint(editor: Editor, position: VecLike) { // Re-position shapes so that the center of the group is at the provided point const viewportPageBounds = editor.getViewportPageBounds(); |