fix error on drop

This commit is contained in:
codetorso 2024-07-25 21:51:58 +05:30
parent c7b98a39b8
commit 3c91c188a4
2 changed files with 26 additions and 51 deletions

View file

@ -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}

View file

@ -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();