response-rte (Rich Text Editor): как реализовать встроенный стиль для пользовательских компонентов? - PullRequest
Новая
       11

response-rte (Rich Text Editor): как реализовать встроенный стиль для пользовательских компонентов?

1 голос
/ 28 марта 2019

react-rte - текстовый редактор, основанный на draft-js.Моя цель состоит в том, чтобы настроить компоненты панели инструментов, например, с помощью компонентов взаимодействия с материалом.Читая документы по реакции, я думаю, что есть два крючка для стиля:

  1. toolbarConfig для CSS ( ссылка );и
  2. customControls для полностью переопределяющих компонентов (, как видно из демонстрации ).

Я считаю, что мой сценарий использования требует customControls, но изпредоставленная демоверсия (см. ниже) Я не могу понять, как подключить пользовательские компоненты обратно в функциональность rte.Например, если я отображаю пользовательский компонент кнопки для BOLD, как эта кнопка получает функциональность по умолчанию, которая бы использовалась для кнопки по умолчанию, предоставляемой демонстрационной программой toolbarConfig?

с помощью customControls : 

<RichTextEditor
  value={value}
  onChange={this._onChange}
  className="react-rte-demo"
  placeholder="Tell a story"
  toolbarClassName="demo-toolbar"
  editorClassName="demo-editor"
  readOnly={this.state.readOnly}
  customControls={[
    // eslint-disable-next-line no-unused-vars
    (setValue, getValue, editorState) => {
      let choices = new Map([
        ['1', {label: '1'}],
        ['2', {label: '2'}],
        ['3', {label: '3'}],
      ]);
      return (
        <ButtonGroup key={1}>
          <Dropdown
            choices={choices}
            selectedKey={getValue('my-control-name')}
            onChange={(value) => setValue('my-control-name', value)}
          />
        </ButtonGroup>
      );
    },
    <ButtonGroup key={2}>
      <IconButton
        label="Remove Link"
        iconName="remove-link"
        focusOnClick={false}
        onClick={() => console.log('You pressed a button')}
      />
    </ButtonGroup>,
  ]}
/>

моя недопустимая на данный момент реализация: 

<RichTextEditor
  value={this.state.value}
  onChange={this.onChange}
  customControls={rteCustomControls}
/>

...

const inlineStyleButtonControls = [
  { label: "format_bold", style: "BOLD", component: FormatBoldIcon },
  { label: "format_italic", style: "ITALIC", component: FormatItalicIcon },
  {
    label: "format_underlined",
    style: "UNDERLINE",
    component: FormatUnderlinedIcon,
  },
];

const rteCustomControls = [
  (setValue, getValue, editorState) => {
    return inlineStyleButtonControls.map((button, i) => (
      <IconButton
        key={i}
        color="inherit"
        aria-label={button.label}
        selectedKey={getValue(button.style)}
        onClick={value => setValue(button.style, value)}
      >
        <button.component />
      </IconButton>
    ));
  },
];
...