import { Editor } from 'react-editor'

let [value, setValue] = useState('')
let ref = useRef()

ref.focus()
ref.insertText('foo')
ref.insertHTML('<img src="https://foo.bar/baz.png">')
value = 'set content'

<Editor
  ref={ref}
  placeholder="Type message to send..."
  className={styles.editor}
  value={value}
  onChange={setValue}
/>

export interface EditorProps {
  value?: string;
  defaultValue?: string;
  className?: string;
  placeholder?: string;
  allowInWebDrop?: boolean;
  processHTML?: (html: string) => string;
  processText?: (text: string) => string;
  onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
  onPaste?: (e: React.ClipboardEvent<HTMLDivElement>) => void;
  onChange?: (value: string) => void;
  [restProp: string]: any; // onto <div>
}

export interface EditorRefAttrs {
  focus: () => void;
  insertHTML: (html: string) => void;
  insertText: (text: string) => void;
}

// todo