Components: Extract a reusable PostTextEditor componeent

WordPress · Nov 13, 2017 · 0d0caf1 · 0d0caf1
1 parent 7531665
commit 0d0caf1
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 155 deletions.
diff --git a/editor/components/index.js b/editor/components/index.js
@@ -25,6 +25,8 @@ export { default as PostScheduleLabel } from './post-schedule/label';
 export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostTaxonomies } from './post-taxonomies';
+export { default as PostTextEditor } from './post-text-editor';
+export { default as PostTextEditorToolbar } from './post-text-editor/toolbar';
 export { default as PostTrash } from './post-trash';
 export { default as PostVisibility } from './post-visibility';
 export { default as PostVisibilityLabel } from './post-visibility/label';

diff --git a/editor/components/post-text-editor/index.js b/editor/components/post-text-editor/index.js
@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import Textarea from 'react-autosize-textarea';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { getEditedPostContent } from '../../selectors';
+import { editPost, resetBlocks } from '../../actions';
+
+class PostTextEditor extends Component {
+	constructor( props ) {
+		super( ...arguments );
+
+		this.onChange = this.onChange.bind( this );
+		this.onPersist = this.onPersist.bind( this );
+
+		this.state = {
+			initialValue: props.value,
+		};
+	}
+
+	onChange( event ) {
+		this.props.onChange( event.target.value );
+	}
+
+	onPersist( event ) {
+		const { value } = event.target;
+		if ( value !== this.state.initialValue ) {
+			this.props.onPersist( value );
+
+			this.setState( {
+				initialValue: value,
+			} );
+		}
+	}
+
+	render() {
+		const { value } = this.props;
+
+		return (
+			<Textarea
+				autoComplete="off"
+				value={ value }
+				onChange={ this.onChange }
+				onBlur={ this.onPersist }
+				className="editor-post-text-editor"
+			/>
+		);
+	}
+}
+
+export default connect(
+	( state ) => ( {
+		value: getEditedPostContent( state ),
+	} ),
+	{
+		onChange( content ) {
+			return editPost( { content } );
+		},
+		onPersist( content ) {
+			return resetBlocks( parse( content ) );
+		},
+	}
+)( PostTextEditor );
diff --git a/editor/components/post-text-editor/style.scss b/editor/components/post-text-editor/style.scss
@@ -0,0 +1,63 @@
+.editor-post-text-editor {
+	display: block;
+	margin: 0;
+	width: 100%;
+	border: none;
+	outline: none;
+	box-shadow: none;
+	resize: none;
+	overflow: hidden;
+	font-family: $editor-html-font;
+	font-size: $text-editor-font-size;
+	line-height: 150%;
+
+	&:focus {
+		box-shadow: none;
+	}
+}
+
+.editor-post-text-editor__toolbar {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+
+	button {
+		height: 30px;
+		border: none;
+		background: none;
+		padding: 0 8px;
+		margin: 3px 4px;
+		text-align: center;
+		cursor: pointer;
+		font-family: $editor-html-font;
+		color: $dark-gray-500;
+		border: 1px solid transparent;
+
+		&:first-child {
+			margin-left: 0;
+		}
+
+		&:hover,
+		&:focus {
+			outline: none;
+			border: 1px solid $dark-gray-500;
+		}
+	}
+}
+
+.editor-post-text-editor__bold {
+	font-weight: bold;
+}
+
+.editor-post-text-editor__italic {
+	font-style: italic;
+}
+
+.editor-post-text-editor__link {
+	text-decoration: underline;
+	color: $blue-medium-500;
+}
+
+.editor-post-text-editor__del {
+	text-decoration:line-through;
+}
diff --git a/editor/components/post-text-editor/toolbar.js b/editor/components/post-text-editor/toolbar.js
@@ -0,0 +1,21 @@
+function PostTextEditorToolbar() {
+	return (
+		<div className="editor-post-text-editor__toolbar">
+			<button className="editor-post-text-editor__bold">b</button>
+			<button className="editor-post-text-editor__italic">i</button>
+			<button className="editor-post-text-editor__link">link</button>
+			<button>b-quote</button>
+			<button className="editor-post-text-editor__del">del</button>
+			<button>ins</button>
+			<button>img</button>
+			<button>ul</button>
+			<button>ol</button>
+			<button>li</button>
+			<button>code</button>
+			<button>more</button>
+			<button>close tags</button>
+		</div>
+	);
+}
+
+export default PostTextEditorToolbar;
diff --git a/editor/modes/text-editor/index.js b/editor/modes/text-editor/index.js
@@ -1,97 +1,22 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-import Textarea from 'react-autosize-textarea';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { parse } from '@wordpress/blocks';
-
 /**
  * Internal dependencies
  */
 import './style.scss';
+import { PostTextEditor, PostTextEditorToolbar } from '../../components';
 import PostTitle from '../../post-title';
-import { getEditedPostContent } from '../../selectors';
-import { editPost, resetBlocks } from '../../actions';
-
-class TextEditor extends Component {
-	constructor( props ) {
-		super( ...arguments );
 
-		this.onChange = this.onChange.bind( this );
-		this.onPersist = this.onPersist.bind( this );
-
-		this.state = {
-			initialValue: props.value,
-		};
-	}
-
-	onChange( event ) {
-		this.props.onChange( event.target.value );
-	}
-
-	onPersist( event ) {
-		const { value } = event.target;
-		if ( value !== this.state.initialValue ) {
-			this.props.onPersist( value );
-
-			this.setState( {
-				initialValue: value,
-			} );
-		}
-	}
-
-	render() {
-		const { value } = this.props;
-
-		return (
-			<div className="editor-text-editor">
-				<div className="editor-text-editor__formatting">
-					<div className="editor-text-editor__formatting-group">
-						<button className="editor-text-editor__bold">b</button>
-						<button className="editor-text-editor__italic">i</button>
-						<button className="editor-text-editor__link">link</button>
-						<button>b-quote</button>
-						<button className="editor-text-editor__del">del</button>
-						<button>ins</button>
-						<button>img</button>
-						<button>ul</button>
-						<button>ol</button>
-						<button>li</button>
-						<button>code</button>
-						<button>more</button>
-						<button>close tags</button>
-					</div>
-				</div>
-				<div className="editor-text-editor__body">
-					<PostTitle />
-					<Textarea
-						autoComplete="off"
-						value={ value }
-						onChange={ this.onChange }
-						onBlur={ this.onPersist }
-						className="editor-text-editor__textarea"
-					/>
-				</div>
+function TextEditor() {
+	return (
+		<div className="editor-text-editor">
+			<div className="editor-text-editor__formatting">
+				<PostTextEditorToolbar />
+			</div>
+			<div className="editor-text-editor__body">
+				<PostTitle />
+				<PostTextEditor />
 			</div>
-		);
-	}
+		</div>
+	);
 }
 
-export default connect(
-	( state ) => ( {
-		value: getEditedPostContent( state ),
-	} ),
-	{
-		onChange( content ) {
-			return editPost( { content } );
-		},
-		onPersist( content ) {
-			return resetBlocks( parse( content ) );
-		},
-	}
-)( TextEditor );
+export default TextEditor;
diff --git a/editor/modes/text-editor/style.scss b/editor/modes/text-editor/style.scss
@@ -14,29 +14,6 @@
 	flex-direction: row;
 	flex-wrap: wrap;
 
-	button {
-		height: 30px;
-		border: none;
-		background: none;
-		padding: 0 8px;
-		margin: 3px 4px;
-		text-align: center;
-		cursor: pointer;
-		font-family: $editor-html-font;
-		color: $dark-gray-500;
-		border: 1px solid transparent;
-
-		&:first-child {
-			margin-left: 0;
-		}
-
-		&:hover,
-		&:focus {
-			outline: none;
-			border: 1px solid $dark-gray-500;
-		}
-	}
-
 	@include break-small() {
 		left: 0px;
 		right: 0px;
@@ -66,23 +43,6 @@
 	}
 }
 
-.editor-text-editor__formatting .editor-text-editor__bold {
-	font-weight: bold;
-}
-
-.editor-text-editor__formatting .editor-text-editor__italic {
-	font-style: italic;
-}
-
-.editor-text-editor__formatting .editor-text-editor__link {
-	text-decoration: underline;
-	color: $blue-medium-500;
-}
-
-.editor-text-editor__formatting .editor-text-editor__del {
-	text-decoration:line-through;
-}
-
 .editor-text-editor__body {
 	padding-top: 40px;
 
@@ -95,27 +55,6 @@
 	}
 }
 
-.editor-text-editor__textarea {
-	display: block;
-	padding-top: 20px;
-	padding-bottom: 0;
-	margin: 0;
-	width: 100%;
-	border: none;
-	outline: none;
-	box-shadow: none;
-	resize: none;
-	overflow: hidden;
-	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
-	line-height: 150%;
-	transition: padding .2s linear;
-
-	&:focus {
-		box-shadow: none;
-	}
-}
-
 /* Use padding to center text in the textarea, this allows you to click anywhere to focus it */
 .editor-text-editor {
 	padding-left: 20px;
@@ -125,10 +64,15 @@
 		padding-left: calc( 50% - #{ $text-editor-max-width / 2 } );
 		padding-right: calc( 50% - #{ $text-editor-max-width / 2 } );
 	}
-}
 
-.editor-text-editor__formatting-group {
-	width: 100%;
-	max-width: $text-editor-max-width;
-	margin: 0 auto;
+	.editor-post-text-editor {
+		padding-top: 20px;
+		padding-bottom: 0;
+	}
+
+	.editor-post-text-editor__toolbar {
+		width: 100%;
+		max-width: $text-editor-max-width;
+		margin: 0 auto;
+	}
 }
diff --git a/test/e2e/integration/002-adding-blocks.js b/test/e2e/integration/002-adding-blocks.js
@@ -30,7 +30,7 @@ describe( 'Adding blocks', () => {
 		cy.get( 'button' ).contains( 'Switch To Text Mode' ).click();
 
 		// Assertions
-		cy.get( '.editor-text-editor__textarea' )
+		cy.get( '.editor-post-text-editor' )
 			.should( 'contain', 'First Paragraph' )
 			.should( 'contain', 'Second Paragraph' )
 			.should( 'contain', 'Quote block' )