Пользовательские программируемые виджеты в Draft.js (плагин)

Это никогда не терпит неудачу. Я публикую вопрос и почти сразу же нахожу что-то, что может ответить на мой вопрос. В Draft.js есть так называемые «декораторы», которые в настоящее время задокументированы здесь: https://draftjs.org/docs/advanced-topics-decorators.html

По сути, вы бы создали серию декораторов, используя функции/компоненты. Стратегия берет на себя функцию, составляющая очевидна.

const compositeDecorator = new CompositeDecorator([
  {
    strategy: handleStrategy,
    component: HandleSpan,
  },
  {
    strategy: hashtagStrategy,
    component: HashtagSpan, 
  },
]);

Стратегии могут быть определены с помощью регулярных выражений. Это позволяет вам написать свой собственный синтаксис или использовать синтаксис механизма шаблонов для встраивания виджетов. Стратегии в документации являются довольно хорошим примером:

// Note: these aren't very good regexes, don't use them!
const HANDLE_REGEX = /\@[\w]+/g;
const HASHTAG_REGEX = /\#[\w\u0590-\u05ff]+/g;

function handleStrategy(contentBlock, callback, contentState) {
  findWithRegex(HANDLE_REGEX, contentBlock, callback);
}

function hashtagStrategy(contentBlock, callback, contentState) {
  findWithRegex(HASHTAG_REGEX, contentBlock, callback);
}

function findWithRegex(regex, contentBlock, callback) {
  const text = contentBlock.getText();
  let matchArr, start;
  while ((matchArr = regex.exec(text)) !== null) {
    start = matchArr.index;
    callback(start, start + matchArr[0].length);
  }
}

А вот и компоненты:

const HandleSpan = (props) => {
  return <span {...props} style={styles.handle}>{props.children}</span>;
};

const HashtagSpan = (props) => {
  return <span {...props} style={styles.hashtag}>{props.children}</span>;
};