Курсор перемещается влево при вводе до двух символов - PullRequest
Новая
       73

Курсор перемещается влево при вводе до двух символов

0 голосов
/ 05 августа 2020

Я использую draft- js -plugin-editor в TextArea. Когда я начинаю печатать, курсор перемещается влево до тех пор, пока не пройдут 2 символа. Например, при вводе «Информация» это будет выглядеть как «формация». Он вводится как I, затем n (справа налево), затем формация слева направо. Я попробовал несколько предложений в Интернете, но пока не исправил. Код здесь ниже. Мысли, пожалуйста? 

import PropTypes from 'prop-types'
import cx from 'classnames'
import Editor from 'draft-js-plugins-editor'
import { EditorState } from 'draft-js'
import { convertToHTML, convertFromHTML } from 'draft-convert'
import { compose, lifecycle, setDisplayName, withHandlers, withStateHandlers } from 'recompose'
import { getUpdatedTotalLength } from 'utilities/richText'

import getTextEditorToolbarAndPlugins from './getTextEditorToolbarAndPlugins'
import styles from './TextEditor.css'

const exceedsMaxLength = (editorState, text, maxLength) =>
  maxLength && getUpdatedTotalLength(editorState, text) > maxLength

const onBeforeInput = ({ maxLength }) => (text, editorState) => {
  if (exceedsMaxLength(editorState, text, maxLength)) {
    return 'handled'
  }
  return 'not handled'
}

const onPastedText = ({ maxLength }) => (text, _, editorState) => {
  if (exceedsMaxLength(editorState, text, maxLength)) {
    const updatedLength = getUpdatedTotalLength(editorState, text)
    /* eslint-disable no-alert */
    alert(
      `Pasted content would exceed maximum length for field.
Maximum length for this field is ${maxLength} characters.
Pasted content would cause length to be ${updatedLength}.`
    )
    /* eslint-enable no-alert */
    return 'handled'
  }
  return 'not handled'
}

function componentWillReceiveProps(nextProps) {
  const { props } = this
  if (props.value === '<p></p>' && props.value !== nextProps.value) {
    nextProps.updateEditorState(
      EditorState.createWithContent(convertFromHTML(nextProps.value || ''))
    )
  }
}

const enhance = compose(
  setDisplayName('TextEditor'),
  withStateHandlers(
    ({ additionalPlugins = {}, value }) => {
      const {
        TextEditorToolbar,
        toolbarPlugins,
      } = getTextEditorToolbarAndPlugins()

      const { plugins = [], PluginComponent } = additionalPlugins

      return {
        TextEditorToolbar,
        toolbarPlugins,
        editorState: EditorState.createWithContent(
          convertFromHTML(value || '')
        ),
        plugins: [...toolbarPlugins, ...plugins],
        PluginComponent,
      }
    },
    {
      updateEditorState: () => editorState => ({ editorState }),
    }
  ),
  withHandlers({
    handleBeforeInput: onBeforeInput,
    handlePastedText: onPastedText,
    onEditorChange: ({
      onChange = () => {},
      updateEditorState,
    }) => editorState => {
      updateEditorState(editorState)
      onChange(convertToHTML(editorState.getCurrentContent()))
    },
  }),
  lifecycle({ componentWillReceiveProps })
)

const TextEditor = ({
  className,
  editorState,
  error,
  handleBeforeInput,
  handlePastedText,
  limitedToolbar,
  narrow,
  onEditorChange,
  plugins,
  PluginComponent,
  TextEditorToolbar,
}) => (
  <div>
    <div
      className={cx(
        styles.textEditor,
        { [styles.error]: error, [styles.narrow]: narrow },
        className
      )}
    >
      <TextEditorToolbar limited={limitedToolbar} />
      <Editor
        editorState={editorState}
        handleBeforeInput={handleBeforeInput}
        handlePastedText={handlePastedText}
        onChange={onEditorChange}
        plugins={plugins}
        spellCheck
      />
    </div>
    {PluginComponent && <PluginComponent editorState={editorState} />}
    {error && <div className={styles.errorText}>{error}</div>}
  </div>
)

TextEditor.propTypes = {
  className: PropTypes.string,
  error: PropTypes.string,
  editorState: PropTypes.object.isRequired,
  limitedToolbar: PropTypes.bool,
  narrow: PropTypes.bool,
  handleBeforeInput: PropTypes.func.isRequired,
  handlePastedText: PropTypes.func.isRequired,
  onEditorChange: PropTypes.func.isRequired,
  TextEditorToolbar: PropTypes.func.isRequired,
  plugins: PropTypes.array.isRequired,
  PluginComponent: PropTypes.func,
}

export default enhance(TextEditor)

1 Ответ

0 голосов
/ 05 августа 2020

Я бы обработал это в onEditorChange, примерно так: 

const handleChange = (newState) => {
  this.setState({
    editorState: EditorState.moveFocusToEnd(newState)
  })
}

Теперь я не вижу, где вы определяете свой EditorState или полную степень своей onChange функции

Взгляните на этот выпуск

...