Как остановить курсор редактора draftJS, перескакивающий в начало текста при наборе текста в React Hooks?

У меня проблема с плагином drafjs, который является редактором, он переходит к началу текста, когда я печатаю в редакторе. Я нашел Как остановить переход курсора DraftJS в начало text? это решение, но оно немного отличается от того, что есть в моем коде, и, кроме того, я сделал компонент с новой функцией React Hooks. Пожалуйста, не могли бы вы помочь мне с этим вопросом.

import {
  EditorState, ContentState, convertToRaw,
} from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'

export default ({ value, onChange }) => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty())

  useEffect(() => {
    setEditorState(
      EditorState.push(
        editorState,
        ContentState.createFromBlockArray(
          htmlToDraft(value || ''),
        ),
      ),
    )
  }, [value])

  return (
    <div className="rich-editor">
      <Editor
        editorState={editorState}
        onEditorStateChange={onEditorStateChange}
        toolbar={{
          options: ['inline'],
          inline: {
            options: ['bold', 'italic', 'underline'],
          },
        }}
      />
    </div>
  )

  function onEditorStateChange(es) {
    setEditorState(es)

    const html = draftToHtml(convertToRaw(es.getCurrentContent()))
    if (value !== html) {
      onChange({ target: { name: 'text', value: html } })
    }
  }
}

Например, введите здесь описание изображения


reactjs react-hooks react-draft-wysiwyg
person Feruza    schedule 16.01.2019    source источник
comment
пожалуйста, не используйте react-draft-wysiwyg, потому что сообщество мало поддерживает.   -  person Jiang YD    schedule 17.01.2019
comment
@JiangYD хорошо, спасибо   -  person Feruza    schedule 17.01.2019

Ответы (1)


arrow_upward
3
arrow_downward

ладно, я как бы сам разобрался. Однако это не лучшее решение. По сути, я конвертирую обновленный текст в тип Html, а затем сравниваю значение с преобразованным darft.js editorState. Вкратце, вот мой код, если он кому-то поможет в будущем

import React, { useEffect, useState } from 'react'
import {
  EditorState, ContentState, convertToRaw,
} from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'

export default ({ value, onChange }) => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty())

  useEffect(() => {
    if (toHtml(editorState) === value) return //added

    setEditorState(
      EditorState.push(
        editorState,
        ContentState.createFromBlockArray(
          htmlToDraft(value || ''),
        ),
      ),
    )
  }, [value])

  return (
    <div className="rich-editor">
      <Editor
        editorState={editorState}
        onEditorStateChange={onEditorStateChange}
        toolbar={{
          options: ['inline'],
          inline: {
            options: ['bold', 'italic', 'underline'],
          },
        }}
      />
    </div>
  )

  function onEditorStateChange(es) {
    setEditorState(es)
    const html = toHtml(es) //added
    if (value !== html) {
      onChange({ target: { name: 'text', value: html } })
    }
  }

  function toHtml(es) {
    return draftToHtml(convertToRaw(es.getCurrentContent())) // added
  }
}
person Feruza    schedule 25.01.2019