Add placeholder functionality to Editable component

blocks/editable/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { last, isEqual, capitalize, omitBy, forEach, merge } from 'lodash';
+import { isEqual, capitalize, omitBy, forEach, merge, drop, pick, compact } from 'lodash';
 import { nodeListToReact } from 'dom-react';
 import { Fill } from 'react-slot-fill';
 import 'element-closest';
@@ -18,6 +18,7 @@ import Toolbar from 'components/toolbar';
 import './style.scss';
 import FormatToolbar from './format-toolbar';
 import TinyMCE from './tinymce';
+import { rangeToState, stateToRange } from './range';
 
 const KEYCODE_BACKSPACE = 8;
 
@@ -62,55 +63,90 @@ function createElement( type, props, ...children ) {
 }
 
 export default class Editable extends wp.element.Component {
- constructor() {
+ constructor( props ) {
  super( ...arguments );
 
  this.onInit = this.onInit.bind( this );
  this.onSetup = this.onSetup.bind( this );
- this.onChange = this.onChange.bind( this );
+ this.onSelectionChange = this.onSelectionChange.bind( this );
  this.onNewBlock = this.onNewBlock.bind( this );
  this.onFocus = this.onFocus.bind( this );
  this.onNodeChange = this.onNodeChange.bind( this );
  this.onKeyDown = this.onKeyDown.bind( this );
  this.changeFormats = this.changeFormats.bind( this );
+ this.onDeativate = this.onDeativate.bind( this );
+
  this.state = {
  formats: {},
- alignment: null,
- bookmark: null
+ alignment: null
  };
+
+ this.change = false;
+ this.content = props.value;
+ this.selection = props.selection;
  }
 
  onSetup( editor ) {
  this.editor = editor;
  editor.on( 'init', this.onInit );
- editor.on( 'focusout', this.onChange );
  editor.on( 'NewBlock', this.onNewBlock );
- editor.on( 'focusin', this.onFocus );
  editor.on( 'nodechange', this.onNodeChange );
  editor.on( 'keydown', this.onKeyDown );
+ editor.on( 'focus', this.onFocus );
+ editor.on( 'deactivate', this.onDeativate );
+ editor.on( 'selectionChange', this.onSelectionChange );
  }
 
  onInit() {
- this.updateFocus();
+ this.maybeFocus();
  }
 
  onFocus() {
  if ( ! this.props.onFocus ) {
  return;
  }
 
- // TODO: We need a way to save the focus position ( bookmark maybe )
- this.props.onFocus();
+ this.props.onFocus( this.selection );
+ }
+
+ onDeativate() {
+ this.props.onChange( this.content );
  }
 
  onChange() {
- if ( ! this.editor.isDirty() ) {
+ this.change = true;
+ }
+
+ isActive() {
+ return document.activeElement === this.editor.getBody();
+ }
+
+ shouldChange( prevContent ) {
+ return this.isEmpty( prevContent ) !== this.isEmpty( this.content );
+ }
+
+ onSelectionChange() {
+ // We must check this because selectionChange is a global event.
+ if ( ! this.isActive() ) {
  return;
  }
 
- this.savedContent = this.getContent();
- this.editor.save();
- this.props.onChange( this.savedContent );
+ // Make sure text nodes are normalized before passing the content and selection.
+ // Normalized means that text nodes are merged were possible.
+ if ( this.change ) {
+ this.editor.getBody().normalize();
+ }
+
+ const prevContent = this.content;
+
+ this.content = this.getContent();
+ this.selection = this.getSelection();
+
+ if ( this.change || this.shouldChange( prevContent ) ) {
+ this.change = false;
+ this.props.onFocus( this.selection );
+ this.props.onChange( this.content );
+ }
  }
 
  getRelativePosition( node ) {
@@ -139,27 +175,12 @@ export default class Editable extends wp.element.Component {
  }
 
  isStartOfEditor() {
- const range = this.editor.selection.getRng();
- if ( range.startOffset !== 0 || ! range.collapsed ) {
- return false;
- }
- const start = range.startContainer;
- const body = this.editor.getBody();
- let element = start;
- while ( element !== body ) {
- const child = element;
- element = element.parentNode;
- if ( element.firstChild !== child ) {
- return false;
- }
- }
- return true;
+ return this.selection.collapsed && ! compact( this.selection.start ).length;
  }
 
  onKeyDown( event ) {
  if ( this.props.onMerge && event.keyCode === KEYCODE_BACKSPACE && this.isStartOfEditor() ) {
- this.onChange();
- this.props.onMerge( this.editor.getContent() );
+ this.props.onMerge( this.content );
  event.preventDefault();
  event.stopImmediatePropagation();
  }
@@ -170,46 +191,23 @@ export default class Editable extends wp.element.Component {
  return;
  }
 
- // Getting the content before and after the cursor
- const childNodes = Array.from( this.editor.getBody().childNodes );
- let selectedChild = this.editor.selection.getStart();
- while ( childNodes.indexOf( selectedChild ) === -1 && selectedChild.parentNode ) {
- selectedChild = selectedChild.parentNode;
- }
- const splitIndex = childNodes.indexOf( selectedChild );
- if ( splitIndex === -1 ) {
+ if ( this.content.length < 2 ) {
  return;
  }
- const beforeNodes = childNodes.slice( 0, splitIndex );
- const lastNodeBeforeCursor = last( beforeNodes );
- // Avoid splitting on single enter
- if (
- ! lastNodeBeforeCursor ||
- beforeNodes.length < 2 ||
- !! lastNodeBeforeCursor.textContent
- ) {
+
+ if ( ! this.selection.collapsed || ! this.selection.start.length ) {
  return;
  }
 
- const before = beforeNodes.slice( 0, beforeNodes.length - 1 );
-
- // Removing empty nodes from the beginning of the "after"
- // avoids empty paragraphs at the beginning of newly created blocks.
- const after = childNodes.slice( splitIndex ).reduce( ( memo, node ) => {
- if ( ! memo.length && ! node.textContent ) {
- return memo;
- }
-
- memo.push( node );
- return memo;
- }, [] );
+ const index = this.selection.start[ 0 ];
 
- // Splitting into two blocks
- this.setContent( this.props.value );
+ if ( compact( drop( this.selection.start ) ).length ) {
+ return;
+ }
 
  this.props.onSplit(
- nodeListToReact( before, createElement ),
- nodeListToReact( after, createElement )
+ this.content.slice( 0, index ),
+ this.content.slice( index )
  );
  }
 
@@ -225,66 +223,74 @@ export default class Editable extends wp.element.Component {
  const alignment = alignments.length > 0 ? alignmentMap[ alignments[ 0 ] ] : null;
 
  const focusPosition = this.getRelativePosition( element );
- const bookmark = this.editor.selection.getBookmark( 2, true );
- this.setState( { alignment, bookmark, formats, focusPosition } );
+ this.setState( { alignment, formats, focusPosition } );
  }
 
- updateContent() {
- const bookmark = this.editor.selection.getBookmark( 2, true );
- this.savedContent = this.props.value;
- this.setContent( this.savedContent );
- this.editor.selection.moveToBookmark( bookmark );
- // Saving the editor on updates avoid unecessary onChanges calls
- // These calls can make the focus jump
-
- this.editor.save();
+ getSelection() {
+ return rangeToState( this.editor.selection.getRng(), this.editor.getBody() );
  }
 
- setContent( content ) {
- if ( ! content ) {
- content = '';
+ setSelection( state ) {
+ const rootNode = this.editor.getBody();
+ const range = stateToRange( state, rootNode );
+ const currentRange = this.editor.selection.getRng();
+ const propsToCompare = [
+ 'startOffset', 'endOffset',
+ 'startContainer', 'endContainer'
+ ];
+
+ if ( ! range ) {
+ return;
  }
 
- content = wp.element.renderToString( content );
- this.editor.setContent( content, { format: 'raw' } );
+ if ( ! isEqual( pick( currentRange, propsToCompare ), pick( range, propsToCompare ) ) ) {
+ this.editor.selection.lastFocusBookmark = null;
+ this.editor.selection.setRng( range );
+ } else if ( document.activeElement !== rootNode ) {
+ this.editor.focus();
+ }
+ }
+
+ setContent( content ) {
+ this.content = content || [];
+ this.editor.setContent( wp.element.renderToString( this.content ) );
  }
 
  getContent() {
  return nodeListToReact( this.editor.getBody().childNodes || [], createElement );
  }
 
- updateFocus() {
+ maybeFocus() {
  const { focus } = this.props;
+
  if ( focus ) {
  this.editor.focus();
  // Offset = -1 means we should focus the end of the editable
  if ( focus.offset === -1 ) {
  this.editor.selection.select( this.editor.getBody(), true );
  this.editor.selection.collapse( false );
+ this.selection = this.getSelection();
  }
  } else {
  this.editor.getBody().blur();
  }
  }
 
- componentWillUnmount() {
- this.onChange();
- }
-
  componentDidUpdate( prevProps ) {
  if ( this.props.focus !== prevProps.focus ) {
- this.updateFocus();
+ this.maybeFocus();
+ }
+
+ if ( this.props.tagName !== prevProps.tagName ) {
+ this.setSelection( this.selection );
  }
 
- // The savedContent var allows us to avoid updating the content right after an onChange call
- if (
- this.props.tagName === prevProps.tagName &&
- this.props.value !== prevProps.value &&
- this.props.value !== this.savedContent &&
- ! isEqual( this.props.value, prevProps.value ) &&
- ! isEqual( this.props.value, this.savedContent )
- ) {
- this.updateContent();
+ if ( this.props.onChange && ! isEqual( this.props.value, prevProps.value ) ) {
+ this.setContent( this.props.value );
+
+ if ( this.props.focus ) {
+ this.setSelection( this.selection );
+ }
  }
  }
 
@@ -293,9 +299,7 @@ export default class Editable extends wp.element.Component {
  }
 
  changeFormats( formats ) {
- if ( this.state.bookmark ) {
- this.editor.selection.moveToBookmark( this.state.bookmark );
- }
+ this.editor.focus();
 
  forEach( formats, ( formatValue, format ) => {
  if ( format === 'link' ) {
@@ -321,8 +325,6 @@ export default class Editable extends wp.element.Component {
  this.setState( {
  formats: merge( {}, this.state.formats, formats )
  } );
-
- this.editor.setDirty( true );
  }
 
  isAlignmentActive( align ) {
@@ -339,6 +341,10 @@ export default class Editable extends wp.element.Component {
  }
  }
 
+ isEmpty( content ) {
+ return ! content || ! content.length;
+ }
+
  render() {
  const {
  tagName,
@@ -349,7 +355,8 @@ export default class Editable extends wp.element.Component {
  showAlignments = false,
  inlineToolbar = false,
  inline,
- formattingControls
+ formattingControls,
+ placeholder
  } = this.props;
 
  // Generating a key that includes `tagName` ensures that if the tag
@@ -397,6 +404,8 @@ export default class Editable extends wp.element.Component {
  settings={ {
  forced_root_block: inline ? false : 'p'
  } }
+ isEmpty={ this.isEmpty( value ) }
+ placeholder={ placeholder }
  key={ key } />
  </div>
  );