Author Select

assets/theme.css

@@ -47,6 +47,10 @@
   margin-bottom: 5px;
 }
 
+.liveblog-meta-author {
+  margin-right: 8px;
+}
+
 .liveblog-meta-author-name {
   font-size: 13px;
   margin-left: 8px;

classes/class-wpcom-liveblog-entry.php

@@ -11,7 +11,13 @@ class WPCOM_Liveblog_Entry {
 	 * @var string In case the current entry is an edit (replaces) of
 	 * another entry, we store the other entry's ID in this meta key.
 	 */
-	const replaces_meta_key   = 'liveblog_replaces';
+	const replaces_meta_key = 'liveblog_replaces';
+
+	/**
+	 * @var string If author editing is enabled, we stored contributors
+	 *  in this meta key.
+	 */
+	const contributors_meta_key	= 'liveblog_contributors';
 
 	private $comment;
 	private $type = 'new';
@@ -95,20 +101,21 @@ public function get_timestamp() {
 
 	public function for_json() {
 		$entry_id = $this->replaces ? $this->replaces : $this->get_id();
-		$avatar_size  = apply_filters( 'liveblog_entry_avatar_size', self::default_avatar_size );
 		$css_classes  = implode( ' ', get_comment_class( '', $entry_id, $this->comment->comment_post_ID ) );
+
 		$entry = array(
-			'id'   			=> $entry_id,
-			'type' 			=> $this->get_type(),
-			'html' 			=> $this->render(),
-			'render' 		=> self::render_content( $this->get_content(), $this->comment ),
-			'content' 		=> apply_filters( 'liveblog_before_edit_entry', $this->get_content() ),
-			'css_classes' 	=> $css_classes,
-			'timestamp' 	=> $this->get_timestamp(),
-			'avatar_img' 	=> get_avatar( $this->comment->comment_author_email, $avatar_size ),
-			'author_link' 	=> get_comment_author_link( $entry_id ),
-			'entry_time' 	=> get_comment_date( 'U', $entry_id ),
+			'id'   => $entry_id,
+			'type' => $this->get_type(),
+			'html' => $this->render(),
+			'render' => self::render_content( $this->get_content(), $this->comment ),
+			'content' => apply_filters( 'liveblog_before_edit_entry', $this->get_content() ),
+			'css_classes' => $css_classes,
+			'timestamp' => $this->get_timestamp(),
+			'author' => self::get_user_data_for_json( self::user_object_from_comment_id( $entry_id ) ),
+			'contributors' => self::get_contributors_for_json( $entry_id ),
+			'entry_time' => get_comment_date( 'U', $entry_id ),
 		);
+
 		$entry = apply_filters( 'liveblog_entry_for_json', $entry, $this );
 		return (object) $entry;
 	}
@@ -175,11 +182,20 @@ public static function render_content( $content, $comment = false ) {
 	 * @return WPCOM_Liveblog_Entry|WP_Error The newly inserted entry
 	 */
 	public static function insert( $args ) {
-        $args = apply_filters( 'liveblog_before_insert_entry', $args );
+		$args = apply_filters( 'liveblog_before_insert_entry', $args );
+
+		$args['user'] = self::handle_author_select( $args, false );
+
 		$comment = self::insert_comment( $args );
 		if ( is_wp_error( $comment ) ) {
 			return $comment;
 		}
+
+		if ( isset( $args['contributor_ids'] ) ) {
+			self::add_contributors( $comment->comment_ID, $args['contributor_ids'] );
+		}
+
+
 		do_action( 'liveblog_insert_entry', $comment->comment_ID, $args['post_id'] );
 		$entry = self::from_comment( $comment );
 		return $entry;
@@ -205,6 +221,12 @@ public static function update( $args ) {
 			return $args['user'];
 		}
 
+		$args['user'] = self::handle_author_select( $args, $args['entry_id'] );
+
+		if ( isset( $args['contributor_ids'] ) ) {
+			self::add_contributors( $args['entry_id'], $args['contributor_ids'] );
+		}
+
         $args = apply_filters( 'liveblog_before_update_entry', $args );
 		$comment = self::insert_comment( $args );
 		if ( is_wp_error( $comment ) ) {
@@ -260,6 +282,7 @@ private static function insert_comment( $args ) {
 		if ( is_wp_error( $valid_args ) ) {
 			return $valid_args;
 		}
+
 		$new_comment_id = wp_insert_comment( array(
 			'comment_post_ID'      => $args['post_id'],
 			'comment_content'      => wp_filter_post_kses( $args['content'] ),
@@ -331,6 +354,92 @@ public static function handle_restricted_shortcodes( $args ) {
 		// Return the Original entry arguments with any modifications.
 		return $args;
 	}
+
+	/**
+	 * If author select is enabled return the user using author_id,
+	 * if user not found then set as current user as a fallback.
+	 *
+	 * If a entry_id is supplied we should update it as its the
+	 * original entry which is used for displaying author information.
+	 *
+	 * @param array $args The new Live blog Entry.
+	 * @param int   $entry_id If set we should update the original entry
+	 * @return mixed
+	 */
+	private static function handle_author_select( $args, $entry_id ) {
+		if ( isset( $args['author_id'] ) && $args['author_id'] ) {
+			$user_object = get_userdata( $args['author_id'] );
+			if ( $user_object ) {
+				$args['user'] = $user_object;
+
+				if ( $entry_id ) {
+					wp_update_comment( array(
+						'comment_ID' 		   => $entry_id,
+						'user_id'              => $args['user']->ID,
+						'comment_author'       => $args['user']->display_name,
+						'comment_author_email' => $args['user']->user_email,
+						'comment_author_url'   => $args['user']->user_url,
+					) );
+				}
+			}
+		}
+
+		return $args['user'];
+	}
+
+	/**
+	 * If author select is enabled then we store the contributors
+	 * as comment meta.
+	 *
+	 * @param int $comment_id The comment id for the meta we should update.
+	 * @param array $contributors Array of ids to store as meta.
+	 */
+	private static function add_contributors( $comment_id, $contributors ) {
+		if ( is_array( $contributors ) ) {
+			if ( metadata_exists( 'comment', $comment_id, self::contributors_meta_key ) ) {
+				update_comment_meta( $comment_id, self::contributors_meta_key, $contributors );
+				return;
+			}
+
+			add_comment_meta( $comment_id, self::contributors_meta_key, $contributors, true );
+		}
+	}
+
+	/**
+	 * Returns a list of contributor user objects.
+	 *
+	 * @param int $comment_id The comment id to retrive the metadata.
+	 */
+	private static function get_contributors_for_json( $comment_id ) {
+		$contributors = get_comment_meta( $comment_id, self::contributors_meta_key, true );
+
+		if ( ! $contributors ) {
+			return array();
+		}
+
+		return array_map(function( $contributor ) {
+			return self::get_user_data_for_json( get_userdata( $contributor ) );
+		}, $contributors );
+	}
+
+	/**
+	 * Returns a formatted array of user data.
+	 *
+	 * @param object $user The user object
+	 */
+	private static function get_user_data_for_json( $user ) {
+		if ( is_wp_error( $user ) ) {
+			return array();
+		}
+
+		$avatar_size = apply_filters( 'liveblog_entry_avatar_size', self::default_avatar_size );
+		return array(
+			'id' => $user->ID,
+			'key' => strtolower($user->user_nicename),
+			'name' => $user->display_name,
+			'avatar' => get_avatar( $user->ID, $avatar_size ),
+		);
+	}
 }
 
 WPCOM_Liveblog_Entry::generate_allowed_tags_for_entry();

classes/class-wpcom-liveblog-rest-api.php

@@ -358,9 +358,11 @@ public static function crud_entry( WP_REST_Request $request ) {
 		$json 	 	 = $request->get_json_params();
 
 		$args = array(
-			'post_id'  => self::get_json_param( 'post_id', $json ),
-			'content'  => self::get_json_param( 'content', $json ),
-			'entry_id' => self::get_json_param( 'entry_id', $json ),
+			'post_id'   => self::get_json_param( 'post_id', $json ),
+			'content'   => self::get_json_param( 'content', $json ),
+			'entry_id'  => self::get_json_param( 'entry_id', $json ),
+			'author_id' => self::get_json_param( 'author_id', $json ),
+			'contributor_ids' => self::get_json_param( 'contributor_ids', $json ),
 		);
 
 		self::set_liveblog_vars( $args['post_id'] );
@@ -436,7 +438,7 @@ public static function format_preview_entry( WP_REST_Request $request ) {
 		$post_id 		= $request->get_param( 'post_id' );
 		$json 	 		= $request->get_json_params();
 		$entry_content  = self::get_json_param( 'entry_content', $json );
-		
+
 		self::set_liveblog_vars( $post_id );
 
 		// Get entry preview
@@ -622,8 +624,8 @@ public static function sanitize_numeric( $param, $request, $key ) {
 
 	/**
 	 * Get parameter from JSON
-	 * @param string $param 
-	 * @param array  $json 
+	 * @param string $param
+	 * @param array  $json
 	 * @return mixed
 	 */
 	public static function get_json_param( $param, $json ) {

liveblog.php

@@ -275,6 +275,24 @@ public static function get_post_id() {
 		return self::$post_id;
 	}
 
+	/**
+	 * Get current user
+	 */
+	public static function get_current_user() {
+		if ( ! self::is_liveblog_editable() ) {
+			return false;
+		}
+
+		$user = wp_get_current_user();
+
+		return array(
+			'id' => $user->ID,
+			'key' => strtolower( $user->user_nicename ),
+			'name' => $user->display_name,
+			'avatar' => get_avatar( $user->ID, 20 ),
+		);
+	}
+
 	/**
 	 * This is where a majority of the magic happens.
 	 *
@@ -550,6 +568,8 @@ public static function ajax_crud_entry() {
 		$args['post_id'] = isset( $_POST['post_id'] ) ? intval( $_POST['post_id'] ) : 0;
 		$args['content'] = isset( $_POST['content'] ) ? $_POST['content'] : '';
 		$args['entry_id'] = isset( $_POST['entry_id'] ) ? intval( $_POST['entry_id'] ) : 0;
+		$args['author_id'] = isset( $_POST['author_id'] ) ? intval( $_POST['author_id'] ) : false;
+		$args['contributor_ids'] = isset( $_POST['contributor_ids'] ) ? intval( $_POST['contributor_ids'] ) : false;
 
 		$entry = self::do_crud_entry($crud_action, $args);
 
@@ -952,6 +972,7 @@ public static function enqueue_scripts() {
 				'post_id'                => get_the_ID(),
 				'state'                  => self::get_liveblog_state(),
 				'is_liveblog_editable'   => self::is_liveblog_editable(),
+				'current_user'			 =>	self::get_current_user(),
 				'socketio_enabled'       => WPCOM_Liveblog_Socketio_Loader::is_enabled(),
 
 				'key'                    => self::key,

package.json

@@ -49,6 +49,7 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",
+    "react-select": "^1.1.0",
     "redux": "^3.7.2",
     "redux-devtools-extension": "^2.13.2",
     "redux-observable": "^0.16.0",

src/react/Editor/Editor.js

@@ -238,7 +238,7 @@ class EditorWrapper extends Component {
     const { trigger } = this.state.autocompleteState;
     const config = autocompleteConfig.filter(x => x.trigger === trigger)[0];
     if (!config.template) return item;
-    return parseTemplate(config.template, item);
+    return parseTemplate(config.template, item, '');
   }
 
   /**

src/react/Editor/blocks/blockRenderer.js

@@ -9,7 +9,7 @@ export default (block, editorState) => {
     if (type === 'image') {
       return {
         component: Image,
-        editable: false,
+        editable: true,
       };
     }
     if (type === 'placeholder') {

src/react/components/AuthorSelectOption.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class AuthorSelectOption extends Component {
+  handleMouseDown(event) {
+    const { onSelect, option } = this.props;
+    event.preventDefault();
+    event.stopPropagation();
+    onSelect(option, event);
+  }
+
+  handleMouseEnter(event) {
+    this.props.onFocus(this.props.option, event);
+  }
+
+  handleMouseMove(event) {
+    const { isFocused, onFocus, option } = this.props;
+    if (isFocused) return;
+    onFocus(option, event);
+  }
+
+  render() {
+    const { className, option } = this.props;
+    return (
+      <div
+        className={`${className} liveblog-popover-item`}
+        onMouseDown={this.handleMouseDown.bind(this)}
+        onMouseEnter={this.handleMouseEnter.bind(this)}
+        onMouseMove={this.handleMouseMove.bind(this)}
+      >
+        { option.avatar && <div dangerouslySetInnerHTML={{ __html: option.avatar }} /> }
+        {option.name}
+      </div>
+    );
+  }
+}
+
+AuthorSelectOption.propTypes = {
+  onSelect: PropTypes.func,
+  option: PropTypes.object,
+  onFocus: PropTypes.func,
+  isFocused: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default AuthorSelectOption;

src/react/components/EntryMeta.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { timeAgo, formattedTime } from '../utils/utils';
+
+const EntryMeta = ({ entry }) => (
+  <header className="liveblog-meta">
+    <div className="liveblog-meta-time">
+      <span>{timeAgo(entry.entry_time)}</span>
+      <span>{formattedTime(entry.entry_time)}</span>
+    </div>
+    <div className="liveblog-meta-author">
+      { entry.author.avatar &&
+        <div
+          className="liveblog-meta-authour-avatar"
+          dangerouslySetInnerHTML={{ __html: entry.author.avatar }} />
+      }
+      <span className="liveblog-meta-author-name"
+        dangerouslySetInnerHTML={{ __html: entry.author.name }} />
+    </div>
+    {
+      (entry.contributors && entry.contributors.length > 0) &&
+      <div className="liveblog-meta-contributors">
+        {
+          entry.contributors.map(contributor => (
+            <div className="liveblog-meta-author" key={contributor.id}>
+              { contributor.avatar &&
+                <div
+                  className="liveblog-meta-authour-avatar"
+                  dangerouslySetInnerHTML={{ __html: contributor.avatar }} />
+              }
+              <span className="liveblog-meta-author-name"
+                dangerouslySetInnerHTML={{ __html: contributor.name }} />
+            </div>
+          ))
+        }
+      </div>
+    }
+  </header>
+);
+
+EntryMeta.propTypes = {
+  entry: PropTypes.object,
+  authorEditEnabled: PropTypes.bool,
+};
+
+export default EntryMeta;