Dragtail упоминание плагин для трясогузки - PullRequest
Новая
       28

Dragtail упоминание плагин для трясогузки

0 голосов
/ 12 марта 2019

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

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

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

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

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

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;

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

...