Conversation
|
Avoid changing copy, the title styling change is nice but i really need to see placeholders filled |
|
The new landing title for example is really bad, i dont want to argue copy at the same time as design |
|
(noticing improvements, a bit happier ;) |
|
This PR has been automatically marked as stale because it has had no recent activity. It will be closed if no further activity occurs. |
|
unstale |
| useEffect(() => { | ||
| if (!containerRef.current) return | ||
|
|
||
| const startState = EditorState.create({ | ||
| doc: code, | ||
| extensions: [ | ||
| basicSetup, | ||
| javascript({ typescript: true, jsx: true }), | ||
| darkTheme, | ||
| syntaxHighlighting(githubDarkHighlightStyle), | ||
| EditorView.updateListener.of((update) => { | ||
| if (update.docChanged) { | ||
| onChange(update.state.doc.toString()) | ||
| } | ||
| }), | ||
| ], | ||
| }) | ||
|
|
||
| const view = new EditorView({ | ||
| state: startState, | ||
| parent: containerRef.current, | ||
| }) | ||
|
|
||
| viewRef.current = view | ||
|
|
||
| return () => { | ||
| view.destroy() | ||
| } | ||
| }, []) |
There was a problem hiding this comment.
Critical stale closure bug: The onChange callback is captured in the closure when the editor is initialized (line 87), but the effect has an empty dependency array (line 103). If the parent component re-renders and passes a new onChange function, the editor will continue using the old captured onChange, causing updates to be sent to stale/incorrect handlers.
This will break when:
- State updates don't reflect in the parent
- The parent component re-renders with new state
- Multiple instances share stale callbacks
Fix: Use a ref to always access the latest onChange:
const onChangeRef = useRef(onChange)
const viewRef = useRef<EditorView | null>(null)
useEffect(() => {
onChangeRef.current = onChange
}, [onChange])
useEffect(() => {
if (!containerRef.current) return
const startState = EditorState.create({
doc: code,
extensions: [
basicSetup,
javascript({ typescript: true, jsx: true }),
darkTheme,
syntaxHighlighting(githubDarkHighlightStyle),
EditorView.updateListener.of((update) => {
if (update.docChanged) {
onChangeRef.current(update.state.doc.toString())
}
}),
],
})
// ...
}, [])Spotted by Graphite
Is this helpful? React 👍 or 👎 to let us know.
|
This PR has been automatically marked as stale because it has had no recent activity. It will be closed if no further activity occurs. |
|
This PR was closed because it has been inactive for 1 day since being marked as stale. |
No description provided.