editor component

[joshdmiller]

Overview

Create a component that, when provided a raw Draft content state, will render a read-only (i.e. static) DraftPluginsEditor component. When clicked, it should become an editable and then revert back on blur.

Component Signature

type Props = {
  content: RawDraftObject,

  // Optional lifecycle hooks
  onEditStart: ?() => void,
  onEditEnd: ?() => void,
  onChange: ?( content: DraftObject ) => void,
  readOnly: ?boolean,

  // Props to pass unaltered to DraftPluginsEditor
  plugins: ?Array<DraftPlugin>,
};

Types

type RawDraftObject = {
  entityMap: EntityMap,
  blocks: Array<RawContentBlock>
};

type RawContentBlock = {
  key: string,
  type: DraftBlockType,
  text: string,
  depth: number,
  inlineStyleRanges: Array<any>,
  entityRanges: Array<any>,
};

type DraftPlugin = {
};

Lifecycle

Content

When provided a new content block, it should create a new Editor State and re-render. This should not be a managed component; the content provided is the initial content. This component should manage its own content state (to optimistically save changes and prevent re-rendering).

The Editor State is passed to the rendered component. The DraftPluginsEditor is a managed component.

Editing

The editor is initially rendered read only. On click, it becomes editable and the onEditStart callback is fired.. On blur, it reverts to read-only and fires onEditEnd.

The onChange prop of this component should be on a 3-second delay from the onChange callback of the rendered editor. On unmount, any outstanding save callback should be fired.

Read Only

When passed the read only flag, editing is completely disabled.

Styles

By keyboard command only, this component should allow emphasized text and strong text.

Pasting

To prevent pasting rich text, this component must include a primitive plugin that will handle pasted text. For pasted html, the plugin must strip all markup except emphasis (converting italics), strong (converting bold), and anchors.

Output Structure

<DraftPluginsEditor
  editorState={this.state.editorState}
  onChange={::this.onEditorStateChange}
  plugins={this.props.plugins}
/>

[goshacmd]

By keyboard command only, this component should allow emphasized text and strong text.

But still allow its consumers to bind to other commands (like header/unstyled) right?

[joshdmiller]

@goshakkk Great question. At this time, we won't be making any use of said binding. For all planned uses of the component, we do not want to allow very much rich text (because it will make the final publishing process less predictable).

I may not have mentioned it, but this replaces the functionality of the current editor component. Over the next week or two, the entire src/components/outlines directory will be deleted.

[goshacmd]

The editor is initially rendered read only. On click, it becomes editable and the onEditStart callback is fired..

This also makes it so that after a click, you will still have to click once more to set the cursor. What do you think should be done here?

As an aside, it also looks like the upstream editor component doesn't call onBlur (but does call onFocus)

[joshdmiller]

@goshakkk Yeah, the double-click is a pain. I imagine we will eventually track the mouse click position to set the cursor, but probably not right now. I think providing hinting as to whether we're in read-only or read-write mode will alleviate the confusion, but not the pain. @sethmerrick - thoughts?

As an aside, it also looks like the upstream editor component doesn't call onBlur (but does call onFocus)

Hm...you are correct. We may have to manage this on a parent component, allowing only one to be in editor mode at a time, and tracking exterior clicks revert to read only (thus faking the blur). But let me think about that a little more... (suggestions welcome)

[joshdmiller]

Another PR with a missing footer. Let's make sure we get those in there.

Closed by #61.