Draftail mention plugin for wagtail

Question

I would like to customise the draftail editor in wagtail in order to have "mentions" functionality (I am using the draft js plugin)

Because my react skills are extremely poor and my knowledge of draftail/draftjs very limited, I am using https://github.com/vixdigital/wagtail-plugin-base as a starting point (without knowing much about what it does) and trying to muddle through the task

I have managed to get it so the mention functionality appears in wagtail. The problem is that it appears in a "sub" editor in the toolbar

enter image description here

How can I avoid creating a sub editor and have it work in the body of the existing editor? Below are the two main JS files in my "wagtail-plugin-base"

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;

Any pointers much appreciated!

Draftail mention plugin for wagtail

0 Answers0