We have a NodeView for images that displays an form on click. I made a helper function to create NodeViews for React components. This form renders correctly, however when I try to click on one of the inputs it does not focus correctly. After several clicks it appears to focus on the input, but typing then gets caught by prosemirror and overwrites the image.
Animation
ImageNodeView.ts
This is a simplified representation of the form in the gif.
export const ImageNodeView = reactNodeView(
class Image extends React.Component {
onChange = () => { /* ... */ }
render() {
const { node } = this.props
return (
<div>
<input type="text" name="alt" value={node.attrs.alt} onChange={this.onChange} />
<img src={node.attrs.src} />
</div>
)
}
}
)
reactNodeView.ts
import { render, unmountComponentAtNode } from 'react-dom';
export interface Props {
view: EditorView
node: Node
getPos(): number
decorations: Decoration[]
}
export function reactNodeView(Component: any) {
const renderComponent = (props: any, dom: any) => render(<Component {...props} />, dom)
return (node: Node, view: EditorView, getPos: () => number, decorations: Decoration[]): NodeView => {
let dom = document.createElement("div")
renderComponent({ node, view, decorations, getPos }, dom)
return {
dom,
update(node, decorations) {
renderComponent({ node, view, decorations, getPos }, dom)
return true
},
destroy() {
unmountComponentAtNode(dom)
},
}
}
}