Я пытаюсь реализовать реактивный крючок и не могу передать строку, содержащую тег hr, в значение prop.
props.val === '<p>hello</p><h1>'
В онлайн-примерах на самом деле не go используется перо в качестве хука, но я хотел бы попробовать его, используя способ, аналогичный тому, как он настроен сейчас. Есть ли хороший способ реализовать разделитель (hr) в ловушке, как это? Вот что я пробовал до сих пор:
import 'react-quill/dist/quill.snow.css'
import { Grid, LinearProgress } from '@material-ui/core'
import React, { useEffect, useRef, useState } from 'react'
import { Quill } from 'react-quill'
var Embed = Quill.import('blots/block/embed')
class Hr extends Embed {
static create(value) {
return super.create(value)
}
}
Quill.register({
'formats/hr': Hr,
})
export function TextEditor(props) {
const [editor, setEditor] = useState(<LinearProgress />)
let quillRef = null // Quill instance
const [reactQuillRef, setReactQuillRef] = useState(useRef(null)) // ReactQuill component
Hr.blotName = 'hr'
Hr.className = 'hr'
Hr.tagName = 'hr'
var customHrHandler = function() {
// get the position of the cursor
var range = 0
console.log(range)
if (range) {
// insert the <hr> where the cursor is
quillRef.insertEmbed(range, '<hr>', 'null')
}
}
const textEditorModuleSettings = {
toolbar: [
[{ header: [] }],
[
'bold',
'italic',
'underline',
'strike',
{ color: [] },
{ background: [] },
],
[
{ list: 'ordered' },
{ list: 'bullet' },
{ indent: '-1' },
{ indent: '+1' },
],
['link', 'clean'],
[
{
container: '#toolbar',
handlers: {
hr: customHrHandler,
},
},
],
],
}
useEffect(() => {
import('react-quill')
.then(res => {
const Quill = res.default
console.dir(res)
setEditor(
<Quill
className={props.className}
maxLength={props.maxLength || 1500}
modules={props.modules || textEditorModuleSettings}
onChange={props.change}
ref={el => {
setReactQuillRef(el)
}}
theme={props.theme || 'snow'}
value={props.val}
/>
)
})
.catch(console.log)
}, [])
useEffect(() => {
if (!reactQuillRef.current) {
reactQuillRef.current = true
} else {
attachQuillRefs()
}
if (reactQuillRef.editor) {
quillRef = reactQuillRef.getEditor()
//quillRef.insertEmbed(0, 'html', '<hr>')
}
}, [reactQuillRef, quillRef])
return editor
}