Markdown Gutenberg block for Jetpack

.jshintignore

@@ -3,6 +3,7 @@ _inc/jquery.spin.js
 _inc/postmessage.js
 _inc/spin.js
 modules/custom-css/custom-css/js/codemirror.min.js
+modules/markdown/assets/js/**/*.js
 modules/shortcodes/js/jmpress.js
 modules/shortcodes/js/jquery.cycle.min.js
 modules/theme-tools/responsive-videos/responsive-videos.min.js

modules/markdown.php

@@ -12,18 +12,23 @@
  * Additional Search Queries: md, markdown
  */
 
-include dirname( __FILE__ ) . '/markdown/easy-markdown.php';
+if ( function_exists( 'register_block_type' ) ) {
+	include dirname( __FILE__ ) . '/markdown/class-jetpack-markdown-block.php';
+} else {
+	include dirname( __FILE__ ) . '/markdown/easy-markdown.php';
 
-/**
- * Remove checkbox set in modules/markdown/easy-markdown.php.
- * We don't just remove the register_setting call there because the checkbox is
- * needed on WordPress.com, where the file is sync'ed verbatim.
- */
-function jetpack_markdown_posting_always_on() {
-	// why oh why isn't there a remove_settings_field?
-	global $wp_settings_fields;
-	if ( isset( $wp_settings_fields['writing']['default'][ WPCom_Markdown::POST_OPTION ] ) ) {
-		unset( $wp_settings_fields['writing']['default'][ WPCom_Markdown::POST_OPTION ] );
+	/**
+	 * Remove checkbox set in modules/markdown/easy-markdown.php.
+	 * We don't just remove the register_setting call there because the checkbox is
+	 * needed on WordPress.com, where the file is sync'ed verbatim.
+	 */
+	function jetpack_markdown_posting_always_on() {
+		// why oh why isn't there a remove_settings_field?
+		global $wp_settings_fields;
+		if ( isset( $wp_settings_fields['writing']['default'][ WPCom_Markdown::POST_OPTION ] ) ) {
+			unset( $wp_settings_fields['writing']['default'][ WPCom_Markdown::POST_OPTION ] );
+		}
 	}
+	add_action( 'admin_init', 'jetpack_markdown_posting_always_on', 11 );
 }
-add_action( 'admin_init', 'jetpack_markdown_posting_always_on', 11 );
+

modules/markdown/assets/css/jetpack-markdown-block.css

@@ -0,0 +1,13 @@
+
+.wp-block-jetpack-markdown-block-placeholder {
+	opacity: 0.5;
+	pointer-events: none;
+}
+.wp-block-jetpack-markdown-block-live-preview p {
+	min-height: 1.8em;
+	white-space: pre-wrap;
+}
+.wp-block-jetpack-markdown-block__live-preview__token {
+	/* $dark-gray-300 from Gutenberg _colors.scss */
+	color: #6c7781;
+}

modules/markdown/assets/js/components/markdown-renderer.jsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import markdownConverter from '../utils/markdown-converter';
+
+const {
+	RawHTML
+} = window.wp.element;
+
+const MarkdownRenderer = function( props ) {
+	const { className, source } = props;
+
+	let content = '';
+
+	if ( source ) {
+		// converts the markdown source to HTML
+		content = markdownConverter.render( source );
+	}
+	return <RawHTML className={ className }>{ content }</RawHTML>;
+};
+
+export default MarkdownRenderer;

modules/markdown/assets/js/jetpack-markdown-block-editor.jsx

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import MarkdownRenderer from './components/markdown-renderer';
+
+const { __ } = window.wp.i18n;
+
+const {
+	ButtonGroup
+} = window.wp.components;
+
+const {
+	BlockControls,
+	PlainText
+} = window.wp.editor;
+
+const {
+	Component
+} = window.wp.element;
+
+const PANEL_EDITOR = 'editor';
+const PANEL_PREVIEW = 'preview';
+
+class JetpackMarkdownBlockEditor extends Component {
+
+	constructor() {
+		super( ...arguments );
+
+		this.updateSource = this.updateSource.bind( this );
+		this.showEditor = this.showEditor.bind( this );
+		this.showPreview = this.showPreview.bind( this );
+		this.isEmpty = this.isEmpty.bind( this );
+
+		this.state = {
+			activePanel: PANEL_EDITOR
+		};
+	}
+
+	isEmpty() {
+		const source = this.props.attributes.source;
+		return ! source || source.trim() === '';
+	}
+
+	updateSource( source ) {
+		this.props.setAttributes( { source } );
+	}
+
+	showEditor() {
+		this.setState( { activePanel: 'editor' } );
+	}
+
+	showPreview() {
+		this.setState( { activePanel: 'preview' } );
+	}
+
+	render() {
+		const { attributes, className, isSelected } = this.props;
+
+		if ( ! isSelected && this.isEmpty() ) {
+			return (
+				<p className={ `${ className }__placeholder` }>
+					{ __( 'Write your _Markdown_ **here**...' ) }
+				</p>
+			);
+		}
+
+		// Renders the editor panel or the preview panel based on component's state
+		const editorOrPreviewPanel = function() {
+			const source = attributes.source;
+
+			switch ( this.state.activePanel ) {
+				case PANEL_EDITOR:
+					return <PlainText
+						className={ `${ className }__editor` }
+						onChange={ this.updateSource }
+						aria-label={ __( 'Markdown' ) }
+						value={ attributes.source }
+					/>;
+
+				case PANEL_PREVIEW:
+					return <MarkdownRenderer
+						className={ `${ className }__preview` }
+						source={ source }
+					/>;
+			}
+		};
+
+		// Manages css classes for each panel based on component's state
+		const classesForPanel = function( panelName ) {
+			return classNames( {
+				'components-tab-button': true,
+				'is-active': this.state.activePanel === panelName,
+				[ `${ className }__${ panelName }-button` ]: true
+			} );
+		};
+
+		return (
+			<div>
+				<BlockControls >
+					<ButtonGroup>
+						<button
+							className={ classesForPanel.call( this, 'editor' ) }
+							onClick={ this.showEditor }
+						>
+							<span>{ __( 'Markdown' ) }</span>
+						</button>
+						<button
+							className={ classesForPanel.call( this, 'preview' ) }
+							onClick={ this.showPreview }
+						>
+							<span>{ __( 'Preview' ) }</span>
+						</button>
+					</ButtonGroup>
+				</BlockControls>
+				{ ( editorOrPreviewPanel.call( this ) ) }
+			</div>
+		);
+	}
+
+}
+export default JetpackMarkdownBlockEditor;

modules/markdown/assets/js/jetpack-markdown-block-save.jsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import MarkdownPreview from './components/markdown-renderer';
+
+function JetpackMarkdownBlockSave( { attributes, className } ) {
+	return <MarkdownPreview
+		className={ `${ className }-renderer` }
+		source={ attributes.source }
+	/>;
+}
+
+export default JetpackMarkdownBlockSave;

modules/markdown/assets/js/jetpack-markdown-block.jsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import JetpackMarkdownBlockEditor from './jetpack-markdown-block-editor';
+import JetpackMarkdownBlockSave from './jetpack-markdown-block-save';
+
+const { __ } = window.wp.i18n;
+
+const {
+	registerBlockType,
+} = window.wp.blocks;
+
+registerBlockType( 'jetpack/markdown-block', {
+
+	title: __( 'Markdown' ),
+
+	description: [
+		__( 'Write your content in plain-text Markdown syntax.' ),
+		(
+		<p>
+			<a href="https://en.support.wordpress.com/markdown-quick-reference/">
+			Support Reference
+			</a>
+		</p>
+		)
+	],
+
+	icon: <svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="dashicon"
+			width="20"
+			height="20"
+			viewBox="0 0 208 128"
+			stroke="currentColor"
+		>
+			<rect
+				width="198"
+				height="118"
+				x="5"
+				y="5"
+				ry="10"
+				stroke-width="10"
+				fill="none"
+			/>
+			<path d="M30 98v-68h20l20 25 20-25h20v68h-20v-39l-20 25-20-25v39zM155 98l-30-33h20v-35h20v35h20z" />
+		</svg>,
+
+	category: 'formatting',
+
+	attributes: {
+		//The Markdown source is saved in the block content comments delimiter
+		source: { type: 'string' }
+	},
+
+	edit: JetpackMarkdownBlockEditor,
+
+	save: JetpackMarkdownBlockSave,
+
+} );

modules/markdown/assets/js/utils/markdown-converter.js

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import MarkdownIt from 'markdown-it';
+
+const markdownItFull = new MarkdownIt();
+
+const MarkdownConverter = {
+
+	render( source ) {
+		return markdownItFull.render( source );
+	}
+
+};
+
+export default MarkdownConverter;

modules/markdown/assets/test/components/test-markdown-renderer.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import React, { createElement } from 'react';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
+
+Enzyme.configure( { adapter: new Adapter() } );
+
+const __ = ( literal ) => {
+	return literal;
+};
+
+global.window.wp = {
+	element: {
+		RawHTML: function( { children } ) {
+			return createElement( 'div', {
+				dangerouslySetInnerHTML: { __html: children },
+			} );
+		}
+	},
+	i18n: {
+		__: __
+	},
+};
+
+/**
+ * Internal dependencies
+ */
+const MarkdownRenderer = require( '../../js/components/markdown-renderer' );
+
+const markdownSource = 'This is *Markdown* __source__.';
+const markdownHTML = `<div><p>This is <em>Markdown</em> <strong>source</strong>.</p>
+</div>`;
+
+describe( 'MarkdownRenderer', () => {
+	it( 'renders HTML from Markdown source', () => {
+		const markdownRenderer = shallow( <MarkdownRenderer source={ markdownSource } /> );
+		expect( markdownRenderer.html() ).to.equal( markdownHTML );
+	} );
+} );