feat: Text component with Markdown (GFM), UIW editor, and UX fixes #70
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| // Local controlled textarea with debounced upstream updates to preserve caret | ||
| function TextareaParam({ | ||
| id, | ||
| value, | ||
| placeholder, | ||
| rows, | ||
| onChange, | ||
| }: { | ||
| id: string | ||
| value: string | ||
| placeholder?: string | ||
| rows?: number | ||
| onChange: (val: string) => void | ||
| }) { | ||
| const [text, setText] = useState<string>(value ?? '') | ||
| const timerRef = useRef<number | null>(null) | ||
|
|
||
| // Sync when external value changes (e.g., selecting a different node) | ||
| useEffect(() => { | ||
| setText(value ?? '') | ||
| }, [value, id]) | ||
|
|
||
| // Debounce upstream updates to avoid re-renders stealing caret | ||
| useEffect(() => { | ||
| if (timerRef.current) { | ||
| clearTimeout(timerRef.current) | ||
| } | ||
| timerRef.current = window.setTimeout(() => { | ||
| onChange(text) | ||
| }, 250) | ||
| return () => { | ||
| if (timerRef.current) { | ||
| clearTimeout(timerRef.current) | ||
| } | ||
| } | ||
| }, [text, onChange]) |
There was a problem hiding this comment.
The new TextareaParam debounces updates with useEffect and includes onChange in the dependency array. In ConfigPanel the onChange handler is created inline for every render, so the effect runs again after each update, schedules a new timeout, and calls onChange even when the text has not changed. That call updates the node (handleUpdateNode always mutates state), which re-renders ConfigPanel, creating another fresh handler and repeating the cycle every 250 ms. With no user input the textarea keeps firing updates, continuously marking the workflow dirty and re-rendering the canvas. Consider memoising the handler or reading it from a ref so that the effect only runs when the text actually changes.
Useful? React with 👍 / 👎.
LuD1161
force-pushed
the
text_component_issue_66
branch
from
8b9879f to
278aaa1
Compare
Render Markdown with react-markdown + remark-gfm + rehype-sanitize Enable Tailwind typography for preview Interactive task checkboxes persist to node parameters Fix caret jumping in sidebar via debounced updates Frontend API flattens backend graph.nodes/edges Add worker Text Block tests and component skeleton (no ports)
Add @uiw/react-md-editor + markdown preview (GFM) Render editor for content parameter only Keep debounced textarea for other textarea parameters
Use ^5.1.5 to match upstream and fix install
… editors - Stop event propagation so React Flow doesn’t swallow checkbox clicks\n- Add nodrag/nowheel + draggable=false on inputs\n- Debounce UIW MDEditor and textarea sync; resync only when external value differs
- Use onClick with preventDefault+stopPropagation instead of onChange\n- Stop React Flow drag/selection from interfering\n- Keeps state stable even when moving pointer outside the node
- Use pointer capture and toggle on pointerup (with preventDefault)\n- Stop propagation in capture/bubble phases to avoid React Flow interference\n- Prevent native checkbox default to avoid double-toggles
LuD1161
force-pushed
the
text_component_issue_66
branch
from
c1fe8f4 to
4b3be1e
Compare
Summary
Why
Resolves #66 : non-executing Text component for annotations with Markdown support.
Testing
Click on checkboxes in the node preview to toggle; content updates persist.
Notes