> It's been over 4 years...<br> > Now react-editor is BACK with fully TS & REACT-HOOKS integrated
npm install react-editor> It's been over 4 years...
> Now react-editor is BACK with fully TS & REACT-HOOKS integrated
- [x] Rich-text Editor with TS & React-hooks
- [ ] Polyfill workaround with React < 16.8
- [x] Placeholder via CSS
- [x] Methods: focus(), insertHTML(s), insertText(s)
- [x] Auto saveRange, restoreRange, moveToEnd
- [x] Usage of value/onChange, defaultValue/onChange
- [x] In-web-image, File handleDrop
- [ ] processHTML, processText wip
- [x] 1.x Legacy: https://github.com/fritx/react-editor/tree/1.x
- [x] 2.0-alpha Demo: https://fritx.github.io/react-editor
``sh`
npm i -S react-editor
`tsx
import { Editor } from 'react-editor'
let [value, setValue] = useState('')
let ref = useRef()
ref.focus()
ref.insertText('foo')
ref.insertHTML('
')
value = 'set content'
placeholder="Type message to send..."
className={styles.editor}
value={value}
onChange={setValue}
/>
`
#### Props
` export interface EditorRefAttrs { for umd / \ ` ReactDOM.render( for react < 16.8 we need hooks polyfill workaround ` for react-editor legacy version ` --- This project was bootstrapped with create-react-library & react-ts-demo.tsx
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
onBlur?: (e: React.FocusEvent
onDrop?: (e: React.DragEvent
onPaste?: (e: React.ClipboardEvent
onChange?: (value: string) => void;
[restProp: string]: any; // onto
}
focus: () => void;
insertHTML: (html: string) => void;
insertText: (text: string) => void;
}
`
`js
// myapp.js
let React = window.React;
let ReactDOM = window.ReactDOM;
let { Editor } = window.ReactEditor;
`tsx`
// todosh``
npm i -S react-editor@1.x