Add reactive docs plugin (#3)

reactive-docs/.babelrc

@@ -0,0 +1,10 @@
+{
+	"presets": [
+		"@wordpress/babel-preset-default"
+	],
+	"plugins": [
+		[ "@babel/plugin-transform-react-jsx", {
+			"pragma": "wp.element.createElement"
+		} ]
+	]
+}

reactive-docs/assets/engine.js

@@ -0,0 +1,6 @@
+( function( wp ) {
+	function doTheMagic() {
+		console.log( 'do the magic', document.getElementsByClassName( 'reactivedocs-input' ) );
+	}
+	wp.domReady( doTheMagic );
+} )( window.wp );

reactive-docs/assets/reactive-docs.css

@@ -0,0 +1,7 @@
+.reactivedocs-input {
+	border-bottom: 1px dashed blue;
+}
+
+.reactivedocs-output {
+	border-bottom: 1px dashed orange;
+}

reactive-docs/editor.js

@@ -0,0 +1,102 @@
+( function( wp ) {
+	// Dependencies
+	const { RichTextToolbarButton } = wp.editor;
+	const { Component, Fragment } = wp.element;
+	const { registerFormatType, applyFormat, removeFormat } = wp.richText;
+	const { IconButton, Popover } = wp.components;
+
+	// Constants
+	const inputFormat = 'reactivedocs/input';
+	const DEFAULT_INPUT_NAME = 'defaultInputName';
+
+	class InputNamePopover extends Component {
+		constructor() {
+			super( ...arguments );
+			this.state = {
+				inputName: DEFAULT_INPUT_NAME,
+			};
+			this.updateInternalState = this.updateInternalState.bind( this );
+			this.updateParent = this.updateParent.bind( this );
+		}
+
+		updateInternalState( event ) {
+			this.setState( { inputName: event.target.value } );
+		}
+
+		updateParent() {
+			this.props.onUpdateInputName( this.state.inputName );
+		}
+
+		render() {
+			const { inputName } = this.state;
+			return (
+				<Popover>
+				<input value={ inputName } onChange={ this.updateInternalState } />
+				<IconButton icon="editor-break" onClick={ this.updateParent } />
+				</Popover>
+			);
+		}
+	}
+
+	class EditComponent extends Component {
+		constructor() {
+			super( ...arguments );
+			this.onToggleInput = this.onToggleInput.bind( this );
+			this.onRegisterInput = this.onRegisterInput.bind( this );
+			this.state = {
+				showInputPopover: false,
+			};
+		}
+
+		onToggleInput() {
+			const { isActive, onChange, value } = this.props;
+			if ( isActive ) {
+				onChange( removeFormat( value, inputFormat ) );
+			} else {
+				this.setState( { showInputPopover: true } );
+			}
+		}
+
+		onRegisterInput( inputName ) {
+			const { onChange, value } = this.props;
+			onChange(
+				applyFormat( value, {
+					type: inputFormat,
+					attributes: {
+						inputname: inputName,
+					},
+				} )
+			);
+			this.setState( { showInputPopover: false } );
+		}
+
+		render() {
+			const { isActive } = this.props;
+			const { showInputPopover } = this.state;
+
+			return (
+				<Fragment>
+					<RichTextToolbarButton
+						icon="edit"
+						isActive={ isActive }
+						title="Edit"
+						onClick={ this.onToggleInput }
+					/>
+					{ showInputPopover ? (
+						<InputNamePopover onUpdateInputName={ this.onRegisterInput } />
+					) : null }
+				</Fragment>
+			);
+		}
+	}
+
+	registerFormatType( inputFormat, {
+		title: 'Edit',
+		tagName: 'span',
+		attributes: {
+			inputname: 'data-reactivedocs-input',
+		},
+		className: 'reactivedocs-input',
+		edit: EditComponent,
+	} );
+})( window.wp );

reactive-docs/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "reactive-docs",
+  "version": "1.0.0",
+  "description": "Reactive Docs for WordPress",
+  "main": "editor.js",
+  "scripts": {
+    "dev": "webpack --watch",
+    "build": "cross-env NODE_ENV=production webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/WordPress/gutenberg.git"
+  },
+  "author": "",
+  "license": "GPL-2.0+",
+  "bugs": {
+    "url": "https://github.com/nosolosw/understanding-gutenberg/issues"
+  },
+  "homepage": "https://github.com/nosolosw/understanding-gutenberg#readme",
+  "devDependencies": {
+    "@babel/core": "7.2.2",
+    "@babel/plugin-transform-react-jsx": "7.3.0",
+    "@wordpress/babel-preset-default": "3.0.2",
+    "babel-loader": "8.0.5",
+    "cross-env": "5.2.0",
+    "webpack": "4.29.3",
+    "webpack-cli": "3.2.3"
+  }
+}

reactive-docs/reactive-docs.php

@@ -0,0 +1,37 @@
+<?php
+
+/**
+ * Plugin Name: Reactive Docs
+ * Plugin URI: https://github.com/nosolosw/understanding-gutenberg
+ * Description: Reactive Docs for WordPress
+ * Version: 0.0.1
+ */
+
+function reactivedocs_plugin_script_register() {
+	wp_register_script(
+		'reactivedocs-gutenberg-js',
+		plugins_url( 'assets/editor.js', __FILE__ ),
+		array( 'wp-editor', 'wp-element', 'wp-rich-text' )
+	);
+	wp_register_script(
+		'reactivedocs-engine-js',
+		plugins_url( 'assets/engine.js', __FILE__ ),
+		array( 'wp-dom-ready' )
+	);
+	wp_register_style(
+		'reactivedocs-css',
+		plugins_url( 'assets/reactive-docs.css', __FILE__ )
+	);
+}
+add_action( 'init', 'reactivedocs_plugin_script_register' );
+
+function reactivedocs_plugin_enqueue_assets_editor() {
+	wp_enqueue_script( 'reactivedocs-gutenberg-js' );
+}
+add_action( 'enqueue_block_editor_assets', 'reactivedocs_plugin_enqueue_assets_editor' );
+
+function reactivedocs_plugin_enqueue_assets_editor_and_frontend() {
+	wp_enqueue_style( 'reactivedocs-css' );
+	wp_enqueue_script( 'reactivedocs-engine-js' );
+}
+add_action( 'enqueue_block_assets', 'reactivedocs_plugin_enqueue_assets_editor_and_frontend' );

reactive-docs/webpack.config.js

@@ -0,0 +1,19 @@
+const NODE_ENV = process.env.NODE_ENV || 'development';
+
+module.exports = {
+	mode: NODE_ENV,
+	entry: './editor.js',
+	output: {
+		path: __dirname,
+		filename: './assets/editor.js',
+	},
+	module: {
+		rules: [
+			{
+				test: /.js$/,
+				exclude: /node_modules/,
+				loader: 'babel-loader',
+			},
+		],
+	},
+};