Как украсить текст с помощью модификатора в Draft.js - PullRequest
Новая
       15

Как украсить текст с помощью модификатора в Draft.js

0 голосов
/ 05 июля 2018

Я пытаюсь украсить некоторый текст, но вместо того, чтобы управлять процессом с помощью стратегии регулярных выражений, это должно быть результатом вызова ajax, чтобы указать, какой мир текста нужно декорировать. Можно ли использовать какой-либо метод из библиотеки модификаторов? Моя идея состоит в том, чтобы вызвать что-то внутри метода onChange и изменить состояние редактора. Любая идея будет оценена.

1 Ответ

0 голосов
/ 03 августа 2018

Мое решение использует собственный декоратор и динамическое регулярное выражение, эта комбинация может помочь достичь желаемого эффекта.

Структура кода соответствует этому примеру для оформления твитов в draftjs.

enter image description here

Вы можете заменить строковый массив (var arr = ["one", "two", "three"]) в коде вызовом ajax. 

import React, { Component } from 'react';
import { Editor, EditorState, CompositeDecorator } from 'draft-js';

const styles = {
  handle: {
    color: 'black',
    backgroundColor: '#FF7F7F',
    direction: 'ltr',
    unicodeBidi: 'bidi-override',
  },
};

// arr can be accessed from an ajax call
var arr = ["one", "two", "three"]
const HANDLE_REGEX = new RegExp("(?:[\\s]|^)(" + arr.join("|") + ")(?=[\\s]|$)", 'gi')

function handleStrategy(contentBlock, callback, contentState) {
  findWithRegex(HANDLE_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
      style={styles.handle}      
      data-offset-key={props.offsetKey}
    >
      {props.children}
    </span>
  );
};


class App extends Component {
  constructor(props) {
    super(props);
    const compositeDecorator = new CompositeDecorator([
      {
        strategy: handleStrategy,
        component: HandleSpan,
      }
    ]);
    this.state = {
      editorState: EditorState.createEmpty(compositeDecorator),
    };
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <div className="container-root">
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        placeholder="Write..."
        ref="editor"
        spellCheck={true}
      />
      </div>
    );
  }
}

export default App;
...