Open shinonomeiro opened 5 years ago
@shinonomeiro I am a lot shorter on time these days as when I started this project. Codemirror & React APIs are moving to quickly for me to keep atop of for the day-to-day. I am looking for a co-maintainer of this project. Please contact me directly if you are interested. Thank you for understanding.
@scniro that's occuring because react-code-mirror2 stores the props on construct and never updates them. (https://github.com/scniro/react-codemirror2/blob/cc3a47d0707b060bf1a1e42ccb258b9b7c0882fd/src/index.tsx#L124)
A quick fix would be to change the internal prop instance everytime it updates.
A better fix would be to rebind/unbind any listener that changed when props changed.
@shinonomeiro the other alternative is to use a class component instead of a function compnent.
That's because you would then this.state.text
instead of the hook value text
. Because the reference to this
is permanent for the component, even if the event is not bound again, when text
is a new reference everytimes.
Hello, and thanks for this useful package.
I've noticed a minor issue that I believe to be a bug, regarding the way CodeMirror's native events (e.g.
onBlur
,onCopy
, etc.) are being invoked.Given the sample code below:
I'm not using the event object
_e
from the callback as itstarget.value
returns any highlighted text at the time of theblur
event or an empty string otherwise, which does not suit my needs (and is also a slightly strange behavior IMO, but we're getting off-topic).You would expect
handleBlur
above to print the entire updated text after a few inputs, which are persisted to the component's state, but it's apparently not the case astext
from insidehandleBlur
still points for some reason to the initial value given during the component's initialization, i.e.'Initial text'
.Digging into the wrapper's code, the
wire
method on theShared
object seems to be at fault, most likely referring to a "wrong"this
. As a quick fix I tried replacingthis.shared.wire(this.props);
withthis.shared.wire.call(_this, this.props);
(incomponentDidMount
https://github.com/scniro/react-codemirror2/blob/6.0.0/index.js#L532) giving itControlled
instead ofShared
asthis
and it does seem to work, but I have no much clue as to why. Besides, there is a lot ofthis
and_this
juggling around which is fairly confusing.Could somebody please look into this and possibly provide a more elegant fix? Thanks in advance.