-
-
Notifications
You must be signed in to change notification settings - Fork 603
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ace editor only binds commands on mount #684
Comments
I bumped into this issue and got around it by getting the value from the So in your case you would change the const handleSubmit = (editor) => {
const text = editor.getValue();
window.alert("You submitted the text: " + text);
}; |
Thanks for workaround! That is a decent temporary solution, but it still doesn't solve the root problem. You shouldn't be forced to pass the entire editor object to the parent. The Ace Editor component shouldn't only bind your commands on mounting. If you change the commands being passed in, it should update the component with your updated commands. |
Current workaround in function components is to use |
@fms-cat how did you get this working? Using the following example I tried, it doesn't seem to work as a solution? function Example() {
function save() { ... }
const ref = useRef(save)
return (
<AceEditor commands={[
{
name: 'save',
bindKey: {
win: 'Ctrl-enter',
mac: 'Cmd-enter',
},
exec: () => ref.current(),
},
]}/>
)
} |
Until this is fixed, here's more code for two workarounds discussed above editor.getValue() [cleaner workaround]// `onSave` shouldn't have to pass the content
// back up the chain since onChange already did that,
// hence calling this a workaround.
function Example({ content, onChange, onSave }) {
return (
<AceEditor
content={content}
onChange={c => onChange(c)}
commands={[{
name: 'save',
bindKey: { win: 'Ctrl-enter', mac: 'Cmd-enter' },
exec: editor => onSave(editor.getValue()),
}]}
/>
);
} useReffunction Example({ content, onChange, onSave }) {
const editor = useRef(null)
return (
<AceEditor
ref={editor}
content={content}
onChange={c => onChange(c)}
commands={[{
name: 'save',
bindKey: { win: 'Ctrl-enter', mac: 'Cmd-enter' },
exec: () => onSave(editor.current.props.value),
}]}
/>
);
} |
Do you have any updates 👀 ? |
Problem
If you pass a prop function to react-ace, it will only bind the function at the AceEditor mount. If your function prop changes, it won't use your new changed function, only the one passed in upon the first mount.
Detail the problem here, including any possible solutions.
Sample code to reproduce your issue
(Ignore the error)
References
Progress on: #
The text was updated successfully, but these errors were encountered: