how to add custom className and Custom Tag in react-quill using react-hooks ?
import React from 'react' import ReactQuill,{Quill} from 'react-quill' import 'quill/dist/quill.snow.css'
function MyEditor() {
class ShadowBlot {
static create(value) {
let node = super.create();
node.setAttribute('className','Shadow')
return node;
}
}
ShadowBlot.blotName = 'shadow';
ShadowBlot.tagName = 'span';
ShadowBlot.className = 'shadow';
const [value,SetValue] = React.useState('')
const EditorRef = React.useRef()
const formats = ['shadow']
const addShadow = (e) => {
e.preventDefault()
let Editor = EditorRef.current.getEditor()
let range = Editor.getSelection()
range = range ? range : 0
// *******
}
return (
<div>
<h1>Example03</h1>
<button onClick={e => addShadow(e)}>Shadow Class</button>
<ReactQuill
ref={EditorRef}
value={value}
onChange={(e) => SetValue(e)}
formats={formats}
/>
<p>{value}</p>
</div>
)
}
export default MyEditor