-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
tiny-single-react-ui: squashed commit rebased on the new gutenberg, b…
…ased on PR #275
- Loading branch information
Showing
58 changed files
with
2,381 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "presets": [ | ||
| [ "es2015", { | ||
| "modules": false | ||
| } ], | ||
| "stage-2" | ||
| ], | ||
| "plugins": [ | ||
| [ "transform-react-jsx", { | ||
| "pragma": "createElement" | ||
| } ], | ||
| "lodash" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| src/parsers/block/grammar.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| // Place your settings in this file to overwrite default and user settings. | ||
| { | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| ../shared |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 TinyMCEReact from './components/tinymce/tinymce-react-ui' | ||
| import {blockList, blockType, blockAlign, getTopLevelBlock} from './utils/tag' | ||
| import '../../shared/post-content' | ||
| import 'assets/stylesheets/main.scss' | ||
|
|
||
| let blockOpen = (collapsed) => (collapsed !== null && collapsed) // block if caret | ||
| let inlineOpen = (collapsed) => (collapsed !== null && !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 at the start of the 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(); | ||
| } | ||
| } | ||
|
|
||
| // Rect for the Range | ||
| let rangeRect = (range) => { | ||
| if (range) { | ||
| return range.getBoundingClientRect(); | ||
| } | ||
| } | ||
|
|
||
| export default function Turducken(props) { | ||
| let store = props.store | ||
| let collapsed = store.getState().get('collapsed') | ||
| let range = store.getState().get('range') | ||
| let node = store.getState().get('node') // node of caret or ancestor of range | ||
| let editorRef = store.getState().get('editorRef') | ||
| let tiny = tinyNode(editorRef) | ||
| let topBlock = topLevelBlock(tiny, node) | ||
| let topRect = rangeRect(topBlock) | ||
|
|
||
| return ( | ||
| <div> | ||
| { topRect && topRect.width && | ||
| <div> | ||
| <div style={ {position: 'absolute', top: topRect.top + 'px', | ||
| width: topRect.width + 'px', | ||
| height: '2px', background: '#ccc' } }></div> | ||
|
|
||
| <div style={ {position: 'absolute', top: topRect.height + topRect.top + 'px', width: topRect.width + 'px', height: '2px', background: '#ccc' } }></div> | ||
|
|
||
| <div style={ {position: 'absolute', top: topRect.top + 'px', width: '2px', height: topRect.height + 'px', background: '#ccc' } }></div> | ||
|
|
||
| <div style={ {position: 'absolute', top: topRect.top + 'px', width: '2px', height: topRect.height + 'px', left: topRect.width + topRect.left + 'px', background: '#ccc' } }></div> | ||
|
|
||
| </div> | ||
| } | ||
| <div> | ||
| <InlineToolbar isOpen={ inlineOpen(collapsed) } | ||
| rangeRect={ findStartOfRange(range) } | ||
| pageYOffset={ window.pageYOffset } | ||
| node={ node } | ||
| /> | ||
| <BlockToolbar isOpen={ blockOpen(collapsed) } | ||
| blockType={ blockType(topBlock) } | ||
| blockAlign={ blockAlign(topBlock) } | ||
| blockRect={ rangeRect(topBlock) } | ||
| /> | ||
| </div> | ||
| <TinyMCEReact content={window.content} | ||
| onSetup={ ( editorRef ) => store.dispatch( { type: 'SETUP', val: editorRef } ) } | ||
| onFocus={ ( collapsed, bookmark, node ) => store.dispatch( { type: 'FOCUS', val: [collapsed, bookmark, node] } ) } | ||
| onBlur={ ( collapsed, bookmark, node ) => store.dispatch( { type: 'BLUR', val: [collapsed, bookmark, node] } ) } | ||
| onNodeChange={ ( collapsed, bookmark, node, event ) => store.dispatch( { type: 'NODECHANGE', val: [collapsed, bookmark, node, event] } ) } | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
15 changes: 15 additions & 0 deletions
15
tinymce-single-react-ui/src/assets/stylesheets/_animations.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ) | ||
| } | ||
| } |
33 changes: 33 additions & 0 deletions
33
tinymce-single-react-ui/src/assets/stylesheets/_variables.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
|
|
||
|
|
||
|
|
||
| $body-bg: #fff; |
Oops, something went wrong.