Непоследовательное поведение перемещения изображения в quilljs с реагированием

Question

Я столкнулся с проблемой при создании текстового редактора с поддержкой тегов на основе изображений. Необходимо перемещать эти теги свободно в тексте, что делает этот вопрос непрактичным.

В основном, когда я начинаю перетаскивать изображение, а затем отбрасываю его в нужное место, может произойти один из двух результатов: A) он работает по назначению и B) изображение отбрасывается до конца/начала предложения. Вы можете увидеть поведение в прикрепленном gif. Resulting behavior

Я использую комбинацию реакции и машинописного текста для создания страницы с вставленным в компонент компонентом.

// TextEditor/index.tsx 
 
import * as React from 'react'; 
 
import * as Quill from 'quill'; 
 

 
import { TextEditorState, TextEditorProps } from '../@types'; 
 
import { generateDelta } from '../@utils/generateDelta'; 
 

 
const formats = [ 
 
    'image' 
 
]; 
 

 
class TextEditor extends React.Component<TextEditorProps, TextEditorState> { 
 
    constructor(props: TextEditorProps) { 
 
    super(props); 
 
    this.state = { 
 
     Editor: undefined 
 
    } 
 
    } 
 

 
    componentDidMount() { 
 
    const self = this; 
 
    this.setState({Editor: new Quill('#editor-container', {formats: formats, debug: 'warn'})}); 
 
    
 
    } 
 

 
    changeText(text: string) { 
 
    if(typeof(this.state.Editor) !== 'undefined') { 
 
     this.state.Editor.setContents(generateDelta(text), 'api'); 
 
    } 
 
    } 
 

 
    render() { 
 
    return (
 
     <div id="editor-container"></div> 
 
    ); 
 
    } 
 
} 
 

 
export default TextEditor;

И использование этого компонента в другом компоненте просто

// editor.tsx 
 
import TextEditor from '../QuillEditor/TextEditor'; 
 

 
... 
 

 
onUpdate(text: string) { 
 
    this.refs.targetEditor.changeText(text); 
 
} 
 

 
... 
 
render() { 
 
    return (
 
    ... 
 
    <TextEditor 
 
     ref={'targetEditor'} 
 
    /> 
 
    ... 
 
) 
 
}

Я попытался изменить текстовый редактор просто contentEditable ДИВ и который работал безупречно, так что это не должно быть из-за некоторого css gl зуд.

У кого-нибудь есть представление о том, что может быть причиной этого?

EDIT 6 февраля: я обнаружил, что эта проблема проявляется только в Chrome, так как IE и MS края не столкнулись с этой проблемой. Я попытался отключить все расширения, но проблема все еще существует. Частный режим также не помог.

Answer 1

После нескольких дней исследований я выяснил, что вызывает проблему.

Комбинация Quill и React не будет работать из-за того, что React «ворует» события ввода, создавая теневую DOM. В основном, поскольку он пытается обработать мой вход в контентный div, созданный Quill, он вызывает некоторые действия, которые не срабатывают, что приводит к странному поведению. И поскольку Quill пытается сделать это сам, вне React DOM.

Это я доказал в моем простом проекте тестирования, где добавление простого тега ввода в любом месте страницы разбило редактор Quill.

Возможным решением было бы использовать реактивное перо или какой-либо другой компонентный контейнер, однако мне не удалось его успешно работать или написать самостоятельно, что будет включать Quill to React в совместимом с DOM образом.