reference editor component

[joshdmiller]

Overview

Create an editor component that wraps the Editor component (#57), providing management of plugins related to character and element references.

Component Props

type Props = {
  // Suggestion callbacks
  onSearchChange: ?( value: string ) => void,
  searchSuggestions: Array<Suggestion>,

  // Props to pass unaltered to Editor
  content: RawDraftObject,
  onEditStart: ?() => void,
  onEditEnd: ?() => void,
  onChange: ?( content: DraftObject ) => void,
  readOnly: ?boolean,
};

type Suggestion = {
  type: SuggestionType,
  _id: string,
  name: string,
  link: string,
  avatar: string,
};

type SuggestionType = 'character' | 'element';

Lifecycle

The component manages an instance of the DraftJS mention plugin, triggered by @.

The component receives suggestions, as well as a callback, via props. The callback is fired when the completion string changes. In the parent component, this is used to filter and provide new suggestions.

The component also manages the undo plugin and linkify plugin.

Style

The character and element mentions/references should reflect the uxpin design, rather than the default mention styles.

The suggestions should render a material list item with an avatar and the name of the character or title of the element.

Changelog

• 201609212354PST(joshdmiller): revised to combine characters and elements into a single suggestion list

[goshacmd]

The character and element mentions should reflect the uxpin design, rather than the default mention styles.

This refers to the blue/green text color after inserted, the suggestions popup still stays the same, correct?

[sethmerrick]

Correct. The text should be blue hyperlink for characters and green hyperlink for elements, as in the uxpin design, with the popup styling staying the same, using either the Character Avatar or Element Cover Image; or placeholders if those images do not exist for a given entity.