Spaces:
Running
Running
File size: 1,787 Bytes
502f722 c1aa871 502f722 c1aa871 502f722 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import { useReactFlow } from "@xyflow/react";
import { useState } from "react";
import Markdown from "react-markdown";
import type { UpdateOptions } from "./NodeParameter";
export default function NodeWithComment(props: any) {
const reactFlow = useReactFlow();
const [editing, setEditing] = useState(false);
function setComment(newValue: string, opts?: UpdateOptions) {
reactFlow.updateNodeData(props.id, (prevData: any) => ({
...prevData,
params: { text: newValue },
__execution_delay: opts?.delay || 0,
}));
}
function onClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
// Start editing on double-click.
if (e.detail === 2) {
setEditing(true);
}
}
function finishEditing(el: HTMLTextAreaElement) {
setComment(el.value);
setEditing(false);
}
function onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
if (e.key === "Escape") {
finishEditing(e.currentTarget);
}
}
function onInput(el: HTMLTextAreaElement | null) {
if (!el) return;
el.focus();
// Resize the textarea to the content.
el.style.height = "auto";
el.style.height = `${el.scrollHeight}px`;
}
if (editing) {
return (
<textarea
className="comment-editor"
onBlur={(e) => finishEditing(e.currentTarget)}
onKeyDown={onKeyDown}
onInput={(e) => onInput(e.currentTarget)}
ref={(el) => onInput(el)}
defaultValue={props.data.params.text}
onClick={(e) => e.stopPropagation()}
placeholder="Enter workspace comment"
/>
);
}
const text = props.data.params.text || "_double-click to edit_";
return (
<div className="comment-view drag-handle prose" onClick={onClick}>
<Markdown>{text}</Markdown>
</div>
);
}
|