Draft.js - How to trim contents

问题

How can I trim whitespace from both ends of contents generated with Draft.js

回答1:

Maybe exist a more elegant solution, but when I faced with the same problem I solved it with this code:

if(typeof String.prototype.trimLeft !== 'function') {
    String.prototype.trimLeft = function() {
        return this.replace(/^\s+/,"");
    }
}

if(typeof String.prototype.trimRight !== 'function') {
    String.prototype.trimRight = function() {
        return this.replace(/\s+$/,"");
    }
}

Here I add trimLeft and trimRight methods for browsers which have not these methods.

trimContent = () => {
  const editorState = this.state.editorState;
  let currentContent = this.state.editorState.getCurrentContent();
  const firstBlock = currentContent.getBlockMap().first();
  const lastBlock = currentContent.getBlockMap().last();
  const firstBlockKey = firstBlock.getKey();
  const lastBlockKey = lastBlock.getKey();
  const firstAndLastBlockIsTheSame = firstBlockKey === lastBlockKey;

  const textStart = firstBlock.getText()
  const trimmedTextStart = textStart.trimLeft();
  const lengthOfTrimmedCharsStart = textStart.length - trimmedTextStart.length;

  let newSelection = new SelectionState({
    anchorKey: firstBlockKey,
    anchorOffset: 0,
    focusKey: firstBlockKey,
    focusOffset: lengthOfTrimmedCharsStart
  });

  currentContent = Modifier.replaceText(
    currentContent,
    newSelection,
    '',
  )

  let newEditorState = EditorState.push(
    editorState,
    currentContent,
  )

  let offset = 0;

  if (firstAndLastBlockIsTheSame) {
    offset = lengthOfTrimmedCharsStart
  }

  const textEnd = lastBlock.getText()
  const trimmedTextEnd = textEnd.trimRight();
  const lengthOfTrimmedCharsEnd = textEnd.length - trimmedTextEnd.length

  newSelection = new SelectionState({
    anchorKey: lastBlockKey,
    anchorOffset: trimmedTextEnd.length - offset,
    focusKey: lastBlockKey,
    focusOffset: textEnd.length - offset
  });

  currentContent = Modifier.replaceText(
    currentContent,
    newSelection,
    '',
  )

  newEditorState = EditorState.push(
    editorState,
    currentContent,
  )

  this._handleChange(newEditorState);
}

trimContent method - here I used Modifier.replaceText util for deleting space characters. Working example - https://jsfiddle.net/p5532ddw/

回答2:

I had a multi-line Draft.js input and I wanted to trim whitespace from both ends of each line.

I adapted Mikhail's solution above and created this function that does this:

const trimEditorState = (currentEditorState) => {
  const currentContent = currentEditorState.getCurrentContent()
  const newContent = currentContent.getBlockMap().reduce((accumulator, block) => {
    const key = block.getKey()
    const text = block.getText()
    const trimmedLeft = text.trimLeft()
    const trimmedRight = text.trimRight()
    const offset = text.length - trimmedLeft.length

    const textToReplaceLeft = new SelectionState({
      anchorKey: key,
      focusKey: key,
      anchorOffset: 0,
      focusOffset: offset
    })

    const leftTrimmedContent = Modifier.replaceText(accumulator, textToReplaceLeft, '')

    const textToReplacRight = new SelectionState({
      anchorKey: key,
      focusKey: key,
      anchorOffset: trimmedRight.length - offset,
      focusOffset: text.length - offset
    })

    return Modifier.replaceText(leftTrimmedContent, textToReplacRight, '')
  }, currentContent)

  return EditorState.push(currentEditorState, newContent, 'remove-range')
}

It's a pure function with no side effects: it takes in your current EditorState and returns the modified, trimmed EditorState. Hope this is helpful to other people out there!

回答3:

Get the raw data, and start hacking

editorRawData = convertToRaw(contentState);
editorRawData.blocks = editorRawData.blocks.filter(el => el.text);
editorRawData.blocks = editorRawData.blocks.map(el => {
    const indexOfFirstChar = el.text.search(/\S/);
    if (indexOfFirstChar > 0) {
        el.text = el.text.slice(indexOfFirstChar, el.text.length);
        el.entityRanges[0].offset = el.entityRanges[0].offset - indexOfFirstChar;
    }
    return el;
});

来源：https://stackoverflow.com/questions/46802855/draft-js-how-to-trim-contents