Merge pull request #294 from WordPress/add/tiny-single-react-ui

Add/tiny single react ui as a squashed commit based on PR #275 and #285
WordPress · Mar 29, 2017 · ee44f22 · ee44f22
2 parents df0ea20 + 5fec454
commit ee44f22
Show file tree

Hide file tree

Showing 60 changed files with 2,423 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 build
+.vscode
 *.log
 yarn.lock
diff --git a/docs/tinymce-single-react-ui/.babelrc b/docs/tinymce-single-react-ui/.babelrc
@@ -0,0 +1,14 @@
+{
+	"presets": [
+		[ "es2015", {
+			"modules": false
+		} ],
+		"stage-2"
+	],
+	"plugins": [
+		[ "transform-react-jsx", {
+			"pragma": "createElement"
+		} ],
+		"lodash"
+	]
+}
diff --git a/docs/tinymce-single-react-ui/.editorconfig b/docs/tinymce-single-react-ui/.editorconfig
@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/docs/tinymce-single-react-ui/.eslintignore b/docs/tinymce-single-react-ui/.eslintignore
@@ -0,0 +1 @@
+src/parsers/block/grammar.js
diff --git a/docs/tinymce-single-react-ui/.eslintrc.json b/docs/tinymce-single-react-ui/.eslintrc.json
@@ -0,0 +1,19 @@
+{
+	"root": true,
+	"extends": "wpcalypso/react",
+	"parser": "babel-eslint",
+	"env": {
+		"browser": true,
+		"node": true
+	},
+	"settings": {
+		"react": {
+			"pragma": "createElement"
+		}
+	},
+	"rules": {
+		"camelcase": 0,
+		"max-len": [ 2, { "code": 120 } ],
+		"react/jsx-no-bind": 0
+	}
+}
diff --git a/docs/tinymce-single-react-ui/build/app.js b/docs/tinymce-single-react-ui/build/app.js
diff --git a/docs/tinymce-single-react-ui/index.html b/docs/tinymce-single-react-ui/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>TinyMCE Single in React</title>
+</head>
+<body>
+	<div id="tiny-react"></div>
+	<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i" rel="stylesheet">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>
+	<script src="build/app.js"></script>
+	<script src="../shared/navigation.js"></script>
+</body>
+</html>
diff --git a/docs/tinymce-single-react-ui/package.json b/docs/tinymce-single-react-ui/package.json
@@ -0,0 +1,67 @@
+{
+  "name": "gutenberg",
+  "version": "1.0.0",
+  "description": "Prototyping a new WordPress editor experience",
+  "main": "index.html",
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "cross-env NODE_ENV=production webpack",
+    "clean": "rimraf build",
+    "predev": "npm run clean",
+    "dev": "webpack-dev-server --content-base ./"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Automattic/gutenberg.git"
+  },
+  "keywords": [
+    "WordPress",
+    "editor",
+    "prototype"
+  ],
+  "author": "WordPress Contributors",
+  "license": "GPL-2.0+",
+  "bugs": {
+    "url": "https://github.com/WordPress/gutenberg/issues"
+  },
+  "homepage": "https://github.com/WordPress/gutenberg#readme",
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-transform-react-jsx": "^6.22.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "cross-env": "^3.1.4",
+    "css-loader": "^0.26.1",
+    "enzyme": "^2.7.1",
+    "eslint": "^3.15.0",
+    "eslint-config-wpcalypso": "^0.6.0",
+    "eslint-plugin-react": "^6.9.0",
+    "eslint-plugin-wpcalypso": "^3.0.2",
+    "node-sass": "^4.5.0",
+    "postcss-loader": "^1.2.2",
+    "redux-devtools": "^3.3.2",
+    "rimraf": "^2.5.4",
+    "sass-loader": "^4.1.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "immutable": "^3.8.1",
+    "is-equal-shallow": "^0.1.3",
+    "lodash": "^4.17.4",
+    "react": "^15.4.2",
+    "react-css-modules": "^4.1.0",
+    "react-dom": "^15.4.2",
+    "react-redux": "^5.0.3",
+    "react-textarea-autosize": "^4.0.5",
+    "react-tinymce": "^0.5.1",
+    "redux": "^3.6.0",
+    "redux-actions": "^2.0.1"
+  }
+}
diff --git a/docs/tinymce-single-react-ui/shared b/docs/tinymce-single-react-ui/shared
@@ -0,0 +1 @@
+../shared
diff --git a/docs/tinymce-single-react-ui/src/Turducken.js b/docs/tinymce-single-react-ui/src/Turducken.js
@@ -0,0 +1,82 @@
+import React, { createElement, Component } from 'react'
+import { render } from 'react-dom'
+import * as Icons from './external/dashicons/index'
+import BlockChangeToolbar from './components/toolbar/BlockChangeToolbar'
+import BlockToolbar from './components/toolbar/BlockToolbar'
+import InlineToolbar from './components/toolbar/InlineToolbar'
+import Box from './components/box/Box'
+import TinyMCEReact from './components/tinymce/tinymce-react-ui'
+import {blockList, blockType, blockAlign, getTopLevelBlock} from './utils/tag'
+import actions from './actions/content'
+import '../../shared/post-content'
+import 'assets/stylesheets/main.scss'
+
+let blockOpen  = ( focused, collapsed ) => ( focused )               // block menu shown when focused
+let inlineOpen = ( focused, collapsed ) => ( focused && !collapsed ) // inline if range selection
+
+// get tiny node from the container, and the top level block from the caret node
+let tinyNode = (containerNode) => ((containerNode && containerNode.children.length > 0) ? containerNode.children[0] : null)
+let topLevelBlock = (tinyNode, node) => ((tinyNode && node) ? getTopLevelBlock(tinyNode, node) : null)
+
+// Rect for the Range
+let rangeRect = (range) => {
+	if (range) {
+		return range.getBoundingClientRect();
+	}
+}
+
+let blockMenuPos = (rect) => ( rect ? {position: 'absolute', top: rect.top - 38 + 'px', right: rect.left + 38 + 'px', zIndex: 23 } : {} )
+let insertMenuPos = (rect) => ( rect ? {position: 'absolute', top: rect.top - 38 + 'px', left: rect.left + 38 + 'px'} : {} )
+
+export default function Turducken(props) {
+  let store = props.myStore
+  let state = store.getState()
+  let collapsed = state.collapsed
+  let focused = state.focused
+  let range = state.range
+  let node =  state.node // node of caret or ancestor of range
+  let editorRef = state.editorRef
+  let tiny = tinyNode(editorRef)
+  let topBlock = topLevelBlock(tiny, node)
+  let topRect = rangeRect(topBlock)
+
+  return (
+    <div>
+      <Box rect={topRect}/>
+      <InlineToolbar isOpen={ inlineOpen(focused, collapsed) } myStore={ store }
+        pos={ insertMenuPos(rangeRect(topBlock)) }
+        node={ node }
+        />
+      <BlockToolbar  isOpen={ blockOpen(focused, collapsed) }
+        blockType={ blockType(topBlock) }
+        blockAlign={ blockAlign(topBlock) }
+        pos={ blockMenuPos(rangeRect(topBlock)) }
+        />
+      <TinyMCEReact content={window.content}
+        onSetup={ ( editorRef ) => store.dispatch( actions.setup(editorRef) ) }
+        onNodeChange={ ( collapsed, bookmark, node, event ) => store.dispatch( actions.nodechange( collapsed, bookmark, node, event ) ) }
+        onFocus={ ( collapsed, bookmark, node ) => store.dispatch( actions.focus( collapsed, bookmark, node ) ) }
+        onBlur={ ( collapsed, bookmark, node ) => store.dispatch( actions.blur( collapsed, bookmark, node ) ) }
+        />
+    </div>
+  )
+}
+
+// ////////
+// Anna's style: InlineToolbar appears at the start of the current Range
+let findStartOfRange = (range) => {
+	// make a collapsed range at the start point
+	if (range) {
+		let r = range.cloneRange();
+		r.setEnd(range.startContainer, range.startOffset);
+		return r.getBoundingClientRect();
+	}
+}
+
+let positionNearCursor = (range) => {
+  if (range) {
+    let r = findStartOfRange(range)
+    return { position: 'absolute', left: r.left - 10 + 'px', top: r.top - 48 + window.pageYOffset + 'px' }
+  }
+}
+// ////////
diff --git a/docs/tinymce-single-react-ui/src/actions/content.js b/docs/tinymce-single-react-ui/src/actions/content.js
@@ -0,0 +1,22 @@
+
+export const setup = (editorRef) => ({
+  type: 'SETUP',
+  editorRef
+})
+
+export const nodechange = (collapsed, bookmark, node, event) => ({
+  type: 'NODECHANGE',
+  collapsed, bookmark, node
+})
+
+export const focus = (collapsed, bookmark, node) => ({
+  type: 'FOCUS',
+  collapsed, bookmark, node
+})
+
+export const blur = (collapsed, bookmark, node) => ({
+  type: 'BLUR',
+  collapsed, bookmark, node
+})
+
+export default { setup, nodechange, focus, blur }
diff --git a/docs/tinymce-single-react-ui/src/assets/stylesheets/_animations.scss b/docs/tinymce-single-react-ui/src/assets/stylesheets/_animations.scss
@@ -0,0 +1,15 @@
+@mixin animate_fade {
+	animation: animate_fade 0.2s ease-out;
+	animation-fill-mode: forwards;
+}
+
+@keyframes animate_fade {
+	from {
+		opacity: 0;
+		transform: scale( 0.92 )
+	}
+	to {
+		opacity: 1;
+		transform: scale( 1 )
+	}
+}
diff --git a/docs/tinymce-single-react-ui/src/assets/stylesheets/_variables.scss b/docs/tinymce-single-react-ui/src/assets/stylesheets/_variables.scss
@@ -0,0 +1,33 @@
+$body-bg: #fff;
+
+// Buttons
+$active-bg: #e0e5e9;
+$active-color: #12181e;
+$active-border: #6f7881;
+
+$hover-bg: #f0f2f4;
+$hover-color: #12181e;
+$hover-border: #f0f2f4;
+
+$inactive-bg: #fff;
+$inactive-color: #12181e;
+$inactive-border: #fff;
+
+
+// Toolbar
+$toolbar-bg: #12181e;
+$toolbar-border: #e1e6ea;
+
+
+$inline-toolbar-bg: #12181e;
+
+
+
+
+// Editor blocks
+$block-outline: #e0e4e8;
+$helpers: #88909b;
+
+$block-border: #ccc;
+
+$body-bg: #fff;