nodes-ui-flow / src /nodes /TextFlowNode.jsx
markitzeroo
Deploy updated nodes UI flow
1dd9186
import { memo } from 'react';
import NodeShell from '../components/NodeShell.jsx';
import { NodeDraftTextarea } from '../components/NodeDraftField.jsx';
import { useWorkflow } from '../context/WorkflowContext.jsx';
import { getNodeAccent } from '../lib/nodeRegistry.js';
function TextFlowNode({ id, data, selected, type }) {
const { getNodeHandles, patchNodeData, presets, savePreset } = useWorkflow();
const handles = getNodeHandles(type, data);
const runtime = data.runtime || {};
const presetOptions = [...presets.default, ...presets.custom];
const textareaHeight = Math.max((data.height || 210) - 104, 148);
const editorText = data.text ?? '';
const applyPreset = (presetId, event) => {
const preset = presetOptions.find((item) => item.id === presetId);
if (!preset) {
return;
}
patchNodeData(id, { text: preset.text });
if (event) {
event.target.value = '';
}
};
const handleSavePreset = async () => {
const name = window.prompt('Preset name:');
if (!name) {
return;
}
await savePreset(name, editorText);
};
return (
<NodeShell
nodeId={id}
title={data.title}
accent={getNodeAccent(type)}
selected={selected}
status={runtime.status}
inputs={handles.inputs}
outputs={handles.outputs}
>
<div className="field-stack">
<div className="field-row">
<select
className="nodrag node-input"
defaultValue=""
onChange={(event) => applyPreset(event.target.value, event)}
>
<option value="">Выбрать</option>
{presets.default.length > 0 ? <option disabled>Базовые пресеты</option> : null}
{presets.default.map((preset) => (
<option key={preset.id} value={preset.id}>
{preset.name}
</option>
))}
{presets.custom.length > 0 ? <option disabled>Пользовательские пресеты</option> : null}
{presets.custom.map((preset) => (
<option key={preset.id} value={preset.id}>
{preset.name}
</option>
))}
</select>
<button type="button" className="nodrag node-button" onClick={handleSavePreset}>
Сохранить
</button>
</div>
<NodeDraftTextarea
className="nodrag nowheel node-textarea node-textarea--inline is-editing"
value={editorText}
style={{ minHeight: `${textareaHeight}px` }}
onCommit={(value) => patchNodeData(id, { text: value })}
/>
{runtime.error ? <div className="node-error">{runtime.error}</div> : null}
</div>
</NodeShell>
);
}
export default memo(TextFlowNode);