使用draft-js自动将句子的首字母大写

Question

我正在使用Reactjs和draftjs库创建富文本编辑器。我想自动将一个句子的首字母大写。

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} 
        autoCapitalize="sentences"/>
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

我创建的组件在一段时间后不会自动大写。为什么自动大写不起作用？有没有更好的方法可以使它起作用？

Answer 1

我刚刚发现自己与Draft.js处于同一情况：需要实现自动大写，但是发现内置的Draft道具什么也没做，所以我自己制定了方法来实现这一点。

1. 这是我创建的实用程序函数，用于查询Draft.js中光标之前的字符：

   const getCharsPrecedingFocus = (
     contentState: any,
     selectionState: any,
     numberOfChars: number,
   ): string => {
     const currentBlock =
       contentState.getBlockForKey(selectionState.getAnchorKey());
     const currentBlockText = currentBlock.getText();
     const endOfText = selectionState.getEndOffset();
   
     return currentBlockText.slice(
       endOfText - numberOfChars,
       endOfText,
     );
   };
   

2. 现在，我们可以检查新句子开头是否有一个大写字母。将此代码放在handleBeforeInput方法中，该方法作为prop传递：

   const handleBeforeInput = (chars: string, editorState: any) => {
     const NON_CAPITALISED_REGEX = /^(?:\.\s)([a-z])$/;
   
     if (NON_CAPITALISED_REGEX.test(precedingThreeChars)) {
       const autoCapitaliseMatch =
         precedingThreeChars.match(NON_CAPITALISED_REGEX);
       if (autoCapitaliseMatch && autoCapitaliseMatch[1]) {
         const capitalisedChar = autoCapitaliseMatch[1].toUpperCase();
   
         const contentStateWithCapitalisedChar = Modifier.replaceText(
           contentState,
           selectionState.merge({
             anchorOffset: focusOffset - 1,
             focusOffset: focusOffset,
           }),
           capitalisedChar + chars,
         );
   
         EditorState.push(
           editorState,
           contentStateWithCapitalisedChar,
           'insert-characters'
         );
         return 'handled';
       }
     }
   }
   

一些其他说明：

我使用test RegEx方法检查匹配自动大写模式而不是match的字符串，因为这是每次用户按下键时都会调用的操作，并且test应该更快比match大。尽管除非您要处理非常长的文档，否则它可能不会对UX有所帮助。