Chrome: Adding the post external link component

editor/modes/text-editor/index.js

@@ -9,6 +9,7 @@ import Textarea from 'react-autosize-textarea';
  */
 import './style.scss';
 import PostTitle from '../../post-title';
+import PostExternalLink from '../../post-external-link';
 import { getBlocks } from '../../selectors';
 
 function TextEditor( { blocks, onChange } ) {
@@ -32,6 +33,7 @@ function TextEditor( { blocks, onChange } ) {
 				</div>
 			</header>
 			<div className="editor-text-editor__body">
+				<PostExternalLink />
 				<PostTitle />
 				<Textarea
 					autoComplete="off"

editor/modes/text-editor/style.scss

@@ -106,6 +106,7 @@
 
 /* Use padding to center text in the textarea, this allows you to click anywhere to focus it */
 .editor-text-editor {
+	position: relative;
 	padding-left: 20px;
 	padding-right: 20px;
 

editor/modes/visual-editor/index.js

@@ -10,6 +10,7 @@ import './style.scss';
 import Inserter from '../../inserter';
 import VisualEditorBlockList from './block-list';
 import PostTitle from '../../post-title';
+import PostExternalLink from '../../post-external-link';
 
 export default function VisualEditor() {
 	return (
@@ -18,6 +19,7 @@ export default function VisualEditor() {
 			aria-label={ __( 'Visual Editor' ) }
 			className="editor-visual-editor"
 		>
+			<PostExternalLink />
 			<PostTitle />
 			<VisualEditorBlockList />
 			<Inserter position="top right" />

editor/modes/visual-editor/style.scss

@@ -1,4 +1,5 @@
 .editor-visual-editor {
+	position: relative;
 	margin: 0 auto;
 	padding: 50px 10px;	/* Floating up/down arrows invisible */
 

editor/post-external-link/index.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+import { IconButton } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { getCurrentPost } from '../selectors';
+
+function PostExternalLink( { link } ) {
+	if ( ! link ) {
+		return null;
+	}
+
+	return (
+		<IconButton
+			className="editor-post-external-link"
+			href={ link }
+			target="_blank"
+			icon="external"
+			title={ __( 'View Post' ) }
+		/>
+	);
+}
+
+export default connect(
+	( state ) => ( {
+		link: getCurrentPost( state ).link,
+	} )
+)( PostExternalLink );

editor/post-external-link/style.scss

@@ -0,0 +1,10 @@
+.editor-post-external-link {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	color: $dark-gray-100;
+
+	.editor-text-editor & {
+		top: 47px;
+	}
+}