Блог

Я хотел бы настроить редактор черновика в wagtail, чтобы иметь функциональность «упоминания» (я использую плагин draft js)

Поскольку мои навыки реагирования крайне низки, а мои знания о draftail / draftjs очень ограничены, я использую https://github.com/vixdigital/wagtail-plugin-base в качестве отправной точки (не зная много о том, что он делает) и пытаясь разобраться в задаче

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

введите описание изображения здесь

Как я могу избежать создания дополнительного редактора и заставить его работать в теле существующего редактора? Ниже приведены два основных JS-файла в моей «базе плагинов wagtail»

index.js

 import AutoComplete from './AutoComplete/AutoComplete.js';

window.draftail.registerControl(AutoComplete)
  

AutoComplete.js

 import React, { Component } from '../../node_modules/react';
import createMentionPlugin, { defaultSuggestionsFilter } from '../../node_modules/draft-js-mention-plugin';
import editorStyles from './editorStyles.css';
import { mentions } from './mentions'

import { DraftailEditor, BLOCK_TYPE, INLINE_STYLE, createEditorState } from "draftail"


const mentionPlugin = createMentionPlugin();

const AutoComplete = class SimpleMentionEditor extends Component {

  state = {
    editorState: createEditorState,
    suggestions: mentions,
  };

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

  onSearchChange = ({ value }) => {
    this.setState({
      suggestions: defaultSuggestionsFilter(value, mentions),
    });
  };

  onAddMention = () => {
    // get the mention object selected
  }

  focus = () => {
    this.editor.focus();
  };

  render() {
    const { MentionSuggestions } = mentionPlugin

    return (
      <div>
        <DraftailEditor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={[mentionPlugin]}
          ref={(element) => { this.editor = element; }}
        />
        <MentionSuggestions
          onSearchChange={this.onSearchChange}
          suggestions={this.state.suggestions}
          onAddMention={this.onAddMention}
        />
      </div>
    );
  }
}
export default AutoComplete;
  

Любые указания высоко ценятся!