输入时光标向左跳直到 2 个字符后

Question

我在 TextArea 中使用 Draft-js-plugin-editor。当我开始输入时，光标会跳到左边直到 2 个字符之后。例如，当输入“Information”时，这将输入为“formationnI”。它的类型为 I，然后是 n（从右到左），然后是 formation，从左到右。我在网上尝试了一些建议，但还没有解决。代码在下面。请问有什么想法吗？

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)

Answer 1

我会在onEditorChange 中处理这个问题，如下所示：

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

现在我看不到您在哪里定义 EditorState，或您的 onChange 函数的全部范围

看看这个issue