使用草稿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

我刚刚发现自己与草稿相同的情况。。

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方法中，该方法以道具的方式传递：

   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有所作为。

*编辑：在我在此处发布的原始代码中，我忘了定义precedingThreeChars。只需将其添加到此const precedingThreeChars = getCharsPrecedingFocus(contentState, selectionState, 3);

Answer 2

import { EditorState , Modifier } from "draft-js";
  const Insertcap = (chars, editorState) => {
    const UpdatedState = Modifier.replaceText(
      editorState.getCurrentContent(),
      editorState.getSelection(),
      chars.toUpperCase(),
      editorState.getCurrentInlineStyle()
    );
    setEditorState(
      EditorState.push(editorState, UpdatedState, "insert-characters")
    );
  };
  const getChars = (contentState, selectionState) => {
    const currentBlock = contentState.getBlockForKey(
      selectionState.getAnchorKey()
    );
    const currentBlockText = currentBlock.getText();
    if (currentBlockText.endsWith(". ")) {
      return true;
    }
    if (!currentBlockText) {
      return true;
    }
    return false;
  };
  getChars(editorState.getCurrentContent(), editorState.getSelection());
  const handleBeforeInput = (chars, editorState) => {
    const contentState = editorState.getCurrentContent();
    const selectionState = editorState.getSelection();
    if (getChars(contentState, selectionState)) {
      Insertcap(chars, editorState);
      return "handled";
    }
    return false;
  };

  <Editor
    editorState={editorState}
    onChange={setEditorState}
    handleBeforeInput={(chars, editorState) =>
      handleBeforeInput(chars, editorState)
    }
  />