Adding a quote with cite block (#153)

WordPress · Mar 1, 2017 · a7e203b · a7e203b
1 parent 6a86a90
commit a7e203b
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 13 deletions.
diff --git a/tinymce-per-block/index.html b/tinymce-per-block/index.html
@@ -7,7 +7,7 @@
 <body>
 	<div class="editor"></div>
 	<script>
-		window.content = '<!-- wp:heading -->1.0 Is The Loneliest Number<!-- /wp --><!-- wp:quote -->Design is not just what it looks like and feels like. Design is how it works. Steve Jobs<!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp --><!-- wp:text -->A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.<!-- /wp -->\n\n<!-- wp:text -->I like Apple for the opposite reason: <strong>they’re not afraid of getting a rudimentary 1.0 out into the world</strong>.<!-- /wp --><!-- wp:image --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp -->';
+		window.content = '<!-- wp:heading -->1.0 Is The Loneliest Number<!-- /wp --><!-- wp:quote cite:Jobs -->Design is not just what it looks like and feels like. Design is how it works.<!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp --><!-- wp:text -->A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.<!-- /wp -->\n\n<!-- wp:text -->I like Apple for the opposite reason: <strong>they’re not afraid of getting a rudimentary 1.0 out into the world</strong>.<!-- /wp --><!-- wp:image --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp -->';
 	</script>
 
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i">

diff --git a/tinymce-per-block/src/blocks/inline-text-block/form.js b/tinymce-per-block/src/blocks/inline-text-block/form.js
@@ -60,7 +60,9 @@ export default class InlineTextBlockForm extends Component {
 				mergeWithPrevious={ mergeWithPrevious }
 				remove={ remove }
 				onChange={ ( value ) => setChildren( value ) }
-				inline />
+				inline
+				single
+			/>
 		);
 	}
 }
diff --git a/tinymce-per-block/src/blocks/quote-block/_style.scss b/tinymce-per-block/src/blocks/quote-block/_style.scss
@@ -1,4 +1,4 @@
-.quote-block__form {
+.quote-block__content {
 	width: 100%;
 	border: none;
 	font: inherit;
@@ -15,3 +15,23 @@
 		margin: 0;
 	}
 }
+
+.quote-block__cite textarea,
+.quote-block__content .textarea-mirror {
+	width: 100%;
+	border: none;
+	font: inherit;
+	font-family: "Merriweather", serif;
+	font-weight: 300;
+	font-size: 12px;
+	color: $gray-dark-300;
+	font-style: italic;
+	resize: none;
+	border-left: 4px solid black;
+	margin-left: -20px;
+	padding-left: 20px;
+
+	&:focus {
+		outline: 0;
+	}
+}
diff --git a/tinymce-per-block/src/blocks/quote-block/form.js b/tinymce-per-block/src/blocks/quote-block/form.js
@@ -2,20 +2,80 @@
  * External dependencies
  */
 import { createElement, Component } from 'wp-elements';
+import { EditableComponent, EnhancedInputComponent } from 'wp-blocks';
 
-import InlineTextBlockForm from '../inline-text-block/form';
+import { serialize } from 'serializers/block';
 
 export default class QuoteBlockForm extends Component {
-	bindForm = ( ref ) => {
-		this.form = ref;
-		this.focus = ( ...args ) => this.form.focus( ...args );
-		this.merge = ( ...args ) => this.form.merge( ...args );
+	bindContent = ( ref ) => {
+		this.content = ref;
 	};
 
+	bindCite = ( ref ) => {
+		this.cite = ref;
+	};
+
+	focus( position ) {
+		this.content.focus( position );
+	}
+
+	merge = ( block, index ) => {
+		const acceptedBlockTypes = [ 'quote', 'paragraph', 'heading' ];
+		if ( acceptedBlockTypes.indexOf( block.blockType ) === -1 ) {
+			return;
+		}
+
+		const getLeaves = children => {
+			if ( children.length === 1 && children[ 0 ].name === 'p' ) {
+				return getLeaves( children[ 0 ].children );
+			}
+
+			return children;
+		};
+
+		const { block: { children }, remove, setChildren } = this.props;
+		remove( index );
+		setTimeout( () => setChildren( getLeaves( children ).concat( getLeaves( block.children ) ) ) );
+	}
+
+	moveToCite = () => {
+		this.cite.focus( 0 );
+	};
+
+	moveToContent = () => {
+		this.content.focus();
+	}
+
 	render() {
+		const { block, setChildren, setAttributes, moveUp, moveDown, remove, mergeWithPrevious } = this.props;
+		const { children } = block;
+		const cite = block.attrs.cite || '';
+
 		return (
 			<div className="quote-block__form">
-				<InlineTextBlockForm ref={ this.bindForm } { ...this.props } />
+				<div className="quote-block__content">
+					<EditableComponent
+						ref={ this.bindContent }
+						content={ serialize( children ) }
+						moveUp={ moveUp }
+						moveDown={ this.moveToCite }
+						mergeWithPrevious={ mergeWithPrevious }
+						remove={ remove }
+						onChange={ ( value ) => setChildren( value ) }
+						inline
+					/>
+				</div>
+				<div className="quote-block__cite">
+					<EnhancedInputComponent
+						ref={ this.bindCite }
+						moveUp={ this.moveToContent }
+						removePrevious={ this.moveToContent }
+						moveDown={ moveDown }
+						value={ cite }
+						onChange={ ( value ) => setAttributes( { cite: value } ) }
+						placeholder="Enter a cite"
+					/>
+				</div>
 			</div>
 		);
 	}

diff --git a/tinymce-per-block/src/external/wp-blocks/editable/index.js b/tinymce-per-block/src/external/wp-blocks/editable/index.js
@@ -34,7 +34,8 @@ export default class EditableComponent extends Component {
 		onChange: () => {},
 		splitValue: () => {},
 		initialContent: '',
-		inline: false
+		inline: false,
+		single: false,
 	};
 
 	componentDidMount() {
@@ -98,7 +99,7 @@ export default class EditableComponent extends Component {
 				event.preventDefault();
 				this.props.moveDown();
 			}
-		} else if ( event.keyCode === 13 && this.props.inline ) {
+		} else if ( event.keyCode === 13 && this.props.single ) {
 			// Wait for the event to propagate
 			setTimeout( () => {
 				this.editor.selection.getStart();

diff --git a/tinymce-per-block/src/external/wp-blocks/input/index.js b/tinymce-per-block/src/external/wp-blocks/input/index.js
@@ -9,6 +9,7 @@ export default class EnhancedInput extends Component {
 	static defaultProps = {
 		splitValue: () => {},
 		removePrevious: () => {},
+		onChange: () => {},
 		moveUp: () => {},
 		moveDown: () => {}
 	};
@@ -46,6 +47,7 @@ export default class EnhancedInput extends Component {
 			this.input.selectionStart === this.input.selectionEnd &&
 			(	this.input.selectionStart === 0 || ( this.input.selectionStart === 1 && value === ' ' ) )
 		) {
+			event.preventDefault();
 			removePrevious();
 		} else if ( event.keyCode === 38 && this.input.selectionStart === 0 ) {
 			event.preventDefault();
@@ -56,6 +58,10 @@ export default class EnhancedInput extends Component {
 		}
 	};
 
+	onChange = ( event ) => {
+		this.props.onChange( event.target.value );
+	};
+
 	render() {
 		// Keeping splitValue to exclude it from props
 		const ignoredProps = [ 'value', 'splitValue', 'removePrevious', 'moveDown', 'moveUp' ];
@@ -79,7 +85,9 @@ export default class EnhancedInput extends Component {
 					{ ...props }
 					onInput={ this.autogrow }
 					value={ value }
-					onKeyDown={ this.onKeyDown } />
+					onKeyDown={ this.onKeyDown }
+					onChange={ this.onChange }
+				/>
 			</div>
 		);
 	}

diff --git a/tinymce-per-block/src/renderers/block/block-list/block.js b/tinymce-per-block/src/renderers/block/block-list/block.js
@@ -28,7 +28,7 @@ export default class BlockListBlock extends Component {
 	}
 
 	focus = ( position ) => {
-		this.form.focus( position );
+		this.form.focus && this.form.focus( position );
 	};
 
 	merge = ( block, index ) => {