Как я могу получить <hr>, чтобы быть распознанным в реактивном игле? - PullRequest
Новая
       8

Как я могу получить <hr>, чтобы быть распознанным в реактивном игле?

0 голосов
/ 18 апреля 2020

Я пытаюсь реализовать реактивный крючок и не могу передать строку, содержащую тег 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

}

...