|
|
|
@ -45,22 +45,6 @@ function DeleteIcon() { |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
function ToolbarDivider() { |
|
|
|
return <span className="h-9 w-px bg-neutral-600/70" aria-hidden="true" />; |
|
|
|
} |
|
|
|
|
|
|
|
function StaticToolbarItem({ label, children }: { label: string; children: React.ReactNode }) { |
|
|
|
return ( |
|
|
|
<span |
|
|
|
aria-label={label} |
|
|
|
title={label} |
|
|
|
className="flex h-10 min-w-10 items-center justify-center rounded-md px-2 text-neutral-300" |
|
|
|
> |
|
|
|
{children} |
|
|
|
</span> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) { |
|
|
|
const { t } = useI18n(); |
|
|
|
const nodeData = data; |
|
|
|
@ -200,61 +184,12 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) { |
|
|
|
|
|
|
|
{isEditing && ( |
|
|
|
<div |
|
|
|
className="nodrag nopan absolute left-1/2 -top-[132px] z-[10002] flex -translate-x-1/2 items-center gap-3 rounded-xl border border-neutral-600/70 bg-neutral-800 px-5 py-3 text-xl text-neutral-300 shadow-2xl shadow-black/40" |
|
|
|
className="nodrag nopan absolute left-1/2 -top-[132px] z-[10002] flex -translate-x-1/2 items-center rounded-xl border border-neutral-600/70 bg-neutral-800 px-4 py-3 text-xl text-neutral-300 shadow-2xl shadow-black/40" |
|
|
|
onMouseDown={(e) => { |
|
|
|
e.preventDefault(); |
|
|
|
e.stopPropagation(); |
|
|
|
}} |
|
|
|
> |
|
|
|
<StaticToolbarItem label={t("prompt.bodyStyle")}> |
|
|
|
<span className="flex items-center gap-2 whitespace-nowrap"> |
|
|
|
{t("prompt.bodyStyle")} |
|
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> |
|
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m6 9 6 6 6-6" /> |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
</StaticToolbarItem> |
|
|
|
<ToolbarDivider /> |
|
|
|
<StaticToolbarItem label={t("prompt.alignText")}> |
|
|
|
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}> |
|
|
|
<path strokeLinecap="round" d="M5 7h14M5 12h10M5 17h14" /> |
|
|
|
</svg> |
|
|
|
</StaticToolbarItem> |
|
|
|
<StaticToolbarItem label={t("prompt.numberedList")}> |
|
|
|
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}> |
|
|
|
<path strokeLinecap="round" d="M10 6h9M10 12h9M10 18h9" /> |
|
|
|
<path strokeLinecap="round" d="M5 6h.01M4 12h2M4 18h2" /> |
|
|
|
</svg> |
|
|
|
</StaticToolbarItem> |
|
|
|
<ToolbarDivider /> |
|
|
|
<StaticToolbarItem label={t("prompt.bold")}> |
|
|
|
<span className="text-2xl font-semibold leading-none">B</span> |
|
|
|
</StaticToolbarItem> |
|
|
|
<StaticToolbarItem label={t("prompt.italic")}> |
|
|
|
<span className="text-2xl italic leading-none">I</span> |
|
|
|
</StaticToolbarItem> |
|
|
|
<StaticToolbarItem label={t("prompt.strikethrough")}> |
|
|
|
<span className="text-2xl leading-none line-through">S</span> |
|
|
|
</StaticToolbarItem> |
|
|
|
<StaticToolbarItem label={t("prompt.link")}> |
|
|
|
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}> |
|
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1" /> |
|
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1" /> |
|
|
|
</svg> |
|
|
|
</StaticToolbarItem> |
|
|
|
<ToolbarDivider /> |
|
|
|
<StaticToolbarItem label={t("prompt.table")}> |
|
|
|
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}> |
|
|
|
<rect x="4" y="4" width="16" height="16" rx="1.5" /> |
|
|
|
<path d="M4 10h16M10 4v16" /> |
|
|
|
</svg> |
|
|
|
</StaticToolbarItem> |
|
|
|
<ToolbarDivider /> |
|
|
|
<StaticToolbarItem label={t("prompt.expandEditor")}> |
|
|
|
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}> |
|
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7" /> |
|
|
|
</svg> |
|
|
|
</StaticToolbarItem> |
|
|
|
<button |
|
|
|
type="button" |
|
|
|
onClick={handleDelete} |
|
|
|
|