useCommittableValue Function

Custom React hook that provides to commit or cancel value changes by editor using Enter or Escape keys.

Example usage:

function MyValueEditor({ initialValue, ...editorProps }: Props) {
  const { value, onChange, onKeyDown, commit, cancel } = useCommittableValue({
    initialValue,
    onCommit: (newValue) => {
      // commit new value
    }
    onCancel: () => {
      // restore to initial value or close editor
    }
  })

  return <div onKeyDown={onKeydown}>
    <Editor
      {...editorProps}
      value={value}
      onChange={onChange}
      commit={commit}
      cancel={cancel}
    />
  </div>
}

useCommittableValue(__namedParameters: UseCommittableValueProps): { cancel: () => void, commit: () => void, onChange: (newValue?: Value) => void, onKeydown: (e: React.KeyboardEvent<Element>) => void, value: undefined | Value }

Returns - { cancel: () => void, commit: () => void, onChange: (newValue?: Value) => void, onKeydown: (e: React.KeyboardEvent<Element>) => void, value: undefined | Value }

Defined in

• ui/components-react/src/components-react/new-editors/UseCommittableValue.tsx Line 51