Как изменить стили в редакторе draftjs? - PullRequest
Новая
       10

Как изменить стили в редакторе draftjs?

0 голосов
/ 06 сентября 2018

Я пытаюсь использовать draftjs и хочу создать собственный компонент блока.

Первый вопрос: я не могу идеально завершить пример создания в документе ( ссылка здесь ).

Когда я нажимаю кнопку с именем «полужирный», редактор теряет фокус, и мой текст не становится более жирным.

Вот мой код: 

import React, { Component } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
import { Paper, Button } from '@material-ui/core';

class ProductComponent extends Component {
  render() {
    const { src } = this.props;

    return (
      <div>{src}</div>
    )
  }
}

export default class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    }
  }


  onChange = (editorState) => this.setState({ editorState });

  onBoldClick = () => {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
  }

  myBlockStyleFn = (contentBlock) => {
    const type = contentBlock.getType();
    if (type === 'product') {
      return {
        component: ProductComponent,
        editable: false,
        props: {
          src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3307626454,3432420457&fm=27&gp=0.jpg',
        },
      }
    }
  }

  render() {
    const {editorState} = this.state;

    return (
      <Paper elevation={0}>
        <Button onClick={this.onBoldClick}>bold</Button>

        <Editor
          blockStyleFn={this.myBlockStyleFn}
          editorState={editorState}
          onChange={this.onChange}
        />
      </Paper>
    );
  }
}
...