Chrome: Adding the Permalink popup

components/clipboard-button/index.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import Clipboard from 'clipboard';
+import classnames from 'classnames';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { findDOMNode, Component } from 'element';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from '../';
+
+class ClipboardButton extends Component {
+	componentDidMount() {
+		const { text, onCopy = noop } = this.props;
+		const button = findDOMNode( this.button );
+		this.clipboard = new Clipboard( button, {
+			text: () => text,
+		} );
+		this.clipboard.on( 'success', onCopy );
+	}
+
+	componentWillUnmount() {
+		this.clipboard.destroy();
+		delete this.clipboard;
+	}
+
+	render() {
+		const { className, children } = this.props;
+		const classes = classnames( 'components-clipboard-button', className );
+
+		return (
+			<Button
+				ref={ ref => this.button = ref }
+				className={ classes }
+			>
+				{ children }
+			</Button>
+		);
+	}
+}
+
+export default ClipboardButton;

components/index.js

@@ -1,4 +1,5 @@
 export { default as Button } from './button';
+export { default as ClipboardButton } from './clipboard-button';
 export { default as Dashicon } from './dashicon';
 export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';

editor/actions.js

@@ -14,6 +14,12 @@ export function deselectBlock( uid ) {
 	};
 }
 
+export function clearSelectedBlock() {
+	return {
+		type: 'CLEAR_SELECTED_BLOCK',
+	};
+}
+
 export function replaceBlocks( uids, blocks ) {
 	return {
 		type: 'REPLACE_BLOCKS',

editor/header/index.js

@@ -17,6 +17,7 @@ import ModeSwitcher from './mode-switcher';
 import SavedState from './saved-state';
 import Tools from './tools';
 import { getSelectedBlocks } from '../selectors';
+import { clearSelectedBlock } from '../actions';
 
 function Header( { selectedBlocks, onRemove, onDeselect } ) {
 	const count = selectedBlocks.length;
@@ -62,9 +63,7 @@ export default connect(
 		selectedBlocks: getSelectedBlocks( state ),
 	} ),
 	( dispatch ) => ( {
-		onDeselect: () => dispatch( {
-			type: 'CLEAR_SELECTED_BLOCK',
-		} ),
+		onDeselect: () => dispatch( clearSelectedBlock() ),
 		onRemove: ( uids ) => dispatch( {
 			type: 'REMOVE_BLOCKS',
 			uids,

editor/modes/visual-editor/block.js

@@ -23,6 +23,7 @@ import {
 	focusBlock,
 	mergeBlocks,
 	insertBlock,
+	clearSelectedBlock,
 } from '../../actions';
 import {
 	getPreviousBlock,
@@ -329,7 +330,7 @@ export default connect(
 			} );
 		},
 		onDeselect() {
-			dispatch( { type: 'CLEAR_SELECTED_BLOCK' } );
+			dispatch( clearSelectedBlock() );
 		},
 		onStartTyping() {
 			dispatch( {

editor/modes/visual-editor/index.js

@@ -16,6 +16,7 @@ import './style.scss';
 import Inserter from '../../inserter';
 import VisualEditorBlockList from './block-list';
 import PostTitle from '../../post-title';
+import { clearSelectedBlock } from '../../actions';
 
 class VisualEditor extends Component {
 	constructor() {
@@ -56,9 +57,5 @@ class VisualEditor extends Component {
 
 export default connect(
 	undefined,
-	( dispatch ) => ( {
-		clearSelectedBlock() {
-			dispatch( { type: 'CLEAR_SELECTED_BLOCK' } );
-		},
-	} )
+	{ clearSelectedBlock }
 )( VisualEditor );

editor/post-permalink/index.js

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+import { __ } from 'i18n';
+import { Dashicon, ClipboardButton, Button } from 'components';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import { getEditedPostAttribute } from '../selectors';
+
+class PostPermalink extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			showCopyConfirmation: false,
+		};
+		this.onCopy = this.onCopy.bind( this );
+	}
+
+	componentWillUnmout() {
+		clearTimeout( this.dismissCopyConfirmation );
+	}
+
+	onCopy() {
+		this.setState( {
+			showCopyConfirmation: true,
+		} );
+
+		clearTimeout( this.dismissCopyConfirmation );
+		this.dismissCopyConfirmation = setTimeout( () => {
+			this.setState( {
+				showCopyConfirmation: false,
+			} );
+		}, 4000 );
+	}
+
+	render() {
+		const { link } = this.props;
+		if ( ! link ) {
+			return null;
+		}
+
+		return (
+			<div className="editor-post-permalink">
+				<Dashicon icon="admin-links" />
+				<span className="editor-post-permalink__label">{ __( 'Permalink:' ) }</span>
+				<Button className="editor-post-permalink__link" href={ link } target="_blank">
+					{ link }
+				</Button>
+				<ClipboardButton className="button" text={ link } onCopy={ this.onCopy }>
+					{ this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy' ) }
+				</ClipboardButton>
+			</div>
+		);
+	}
+}
+
+export default connect(
+	( state ) => {
+		return {
+			link: getEditedPostAttribute( state, 'link' ),
+		};
+	}
+)( PostPermalink );
+

editor/post-permalink/style.scss

@@ -0,0 +1,31 @@
+.editor-post-permalink {
+	display: inline-flex;
+	align-items: center;
+	position: absolute;
+	top: -36px;
+	left: 15px;
+	box-shadow: $shadow-popover;
+	border: 1px solid $light-gray-500;
+	background: $white;
+	padding: 5px;
+	font-family: $default-font;
+	font-size: 13px;
+}
+
+.editor-post-permalink__label {
+	margin: 0 10px;
+}
+
+.editor-post-permalink__link {
+	color: $dark-gray-200;
+	text-decoration: underline;
+	margin-right: 10px;
+	width: 300px;
+	overflow: hidden;
+	position: relative;
+	white-space: nowrap;
+
+	&:after {
+		@include long-content-fade( $size: 20% );
+	}
+}

editor/post-title/index.js

@@ -3,47 +3,111 @@
  */
 import { connect } from 'react-redux';
 import Textarea from 'react-autosize-textarea';
+import clickOutside from 'react-click-outside';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
+import { Component } from 'element';
 import { ENTER } from 'utils/keycodes';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import { getEditedPostTitle } from '../selectors';
-import { editPost } from '../actions';
+import { editPost, clearSelectedBlock } from '../actions';
+import PostPermalink from '../post-permalink';
 
 /**
  * Constants
  */
 const REGEXP_NEWLINES = /[\r\n]+/g;
 
-function PostTitle( { title, onUpdate } ) {
-	const onChange = ( event ) => {
+class PostTitle extends Component {
+	constructor() {
+		super( ...arguments );
+		this.bindTextarea = this.bindTextarea.bind( this );
+		this.onChange = this.onChange.bind( this );
+		this.onSelect = this.onSelect.bind( this );
+		this.onUnselect = this.onUnselect.bind( this );
+		this.onSelectionChange = this.onSelectionChange.bind( this );
+		this.state = {
+			isSelected: false,
+		};
+	}
+
+	componentDidMount() {
+		document.addEventListener( 'selectionchange', this.onSelectionChange );
+	}
+
+	componentWillUnmount() {
+		document.removeEventListener( 'selectionchange', this.onSelectionChange );
+	}
+
+	bindTextarea( ref ) {
+		this.textareaContainer = ref;
+	}
+
+	onSelectionChange() {
+		const textarea = this.textareaContainer.textarea;
+		if (
+			document.activeElement === textarea &&
+			textarea.selectionStart !== textarea.selectionEnd
+		) {
+			this.onSelect();
+		}
+	}
+
+	onChange( event ) {
 		const newTitle = event.target.value.replace( REGEXP_NEWLINES, ' ' );
-		onUpdate( newTitle );
-	};
+		this.props.onUpdate( newTitle );
+	}
+
+	onSelect() {
+		this.setState( { isSelected: true } );
+		this.props.clearSelectedBlock();
+	}
+
+	onUnselect() {
+		this.setState( { isSelected: false } );
+	}
+
+	handleClickOutside() {
+		this.setState( { isSelected: false } );
+	}
 
-	const onKeyDown = ( event ) => {
+	onKeyDown( event ) {
 		if ( event.keyCode === ENTER ) {
 			event.preventDefault();
 		}
-	};
-
-	return (
-		<h1 className="editor-post-title">
-			<Textarea
-				className="editor-post-title__input"
-				value={ title }
-				onChange={ onChange }
-				placeholder={ wp.i18n.__( 'Enter title here' ) }
-				onKeyDown={ onKeyDown }
-			/>
-		</h1>
-	);
+	}
+
+	render() {
+		const { title } = this.props;
+		const { isSelected } = this.state;
+		const className = classnames( 'editor-post-title', { 'is-selected': isSelected } );
+
+		return (
+			<div className={ className }>
+				{ isSelected && <PostPermalink /> }
+				<h1>
+					<Textarea
+						ref={ this.bindTextarea }
+						className="editor-post-title__input"
+						value={ title }
+						onChange={ this.onChange }
+						placeholder={ wp.i18n.__( 'Enter title here' ) }
+						onFocus={ this.onSelect }
+						onClick={ this.onSelect }
+						onKeyDown={ this.onKeyDown }
+						onKeyPress={ this.onUnselect }
+					/>
+				</h1>
+			</div>
+		);
+	}
 }
 
 export default connect(
@@ -55,6 +119,9 @@ export default connect(
 			onUpdate( title ) {
 				dispatch( editPost( { title } ) );
 			},
+			clearSelectedBlock() {
+				dispatch( clearSelectedBlock() );
+			},
 		};
 	}
-)( PostTitle );
+)( clickOutside( PostTitle ) );