如何让 <hr> 在 React 羽毛笔中被识别？

Question

我正在尝试实现一个 React quill hook，但无法将包含 hr 标签的字符串传递到 value 属性中。

props.val === '<p>hello</p><h1>'

网上的示例并没有真正涉及使用 quill 作为钩子，但我想使用类似于现在设置的方式来尝试它。有没有一种好方法可以像这样在钩子中实现分隔符（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

}

Answer 1

一些相对但不完全是答案： https://quilljs.com/guides/cloning-medium-with-parchment/#dividers

我尝试过，它有助于将

---

渲染为空行，不完全是粗体分隔线，但比根本不渲染要好。