boing

Author: juliankrispel

demo/client/components/DemoEditor/index.js

@@ -45,14 +45,15 @@ export default class DemoEditor extends Component {
   };
 
   focus = () => {
+    console.log("damnit");
     this.editor.focus();
   };
 
   render() {
     const { editorState } = this.state;
     return (
       <div className={styles.root}>
-        <div className={styles.editor}>
+        <div className={styles.editor} onClick={this.focus}>
           <Editor
             editorState={editorState}
             onChange={this.onChange}

package.json

@@ -65,6 +65,7 @@
     "flow-bin": "^0.36.0",
     "history": "^2.0.0",
     "husky": "^0.14.3",
+    "jest": "^21.1.0",
     "jsdom": "^9.8.3",
     "lint-staged": "^4.2.1",
     "mocha": "^3.2.0",
@@ -81,30 +82,33 @@
     "react-dom": "^15.4.1",
     "react-github-corner": "^2.0.0",
     "react-github-fork-ribbon": "^0.4.4",
+    "react-test-renderer": "^16.2.0",
     "rimraf": "^2.5.4",
     "sinon": "^1.17.6",
     "static-site-generator-webpack-plugin": "^3.1.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.3",
     "webpack-dev-middleware": "^1.8.4",
-    "webpack-hot-middleware": "^2.13.2",
-    "jest": "^21.1.0",
-    "react-test-renderer": "^16.2.0"
+    "webpack-hot-middleware": "^2.13.2"
   },
   "peerDependencies": {
     "draft-js-plugins-editor": "~2.0.0-rc.1 || 2.0.0-rc2 || 2.0.0-rc1 || 2.0.0-beta12",
     "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "react-dom": "^15.0.0",
+    "react-modal": "3.x",
+    "react-portal": "^4.1.4"
   },
   "contributors": [
     "Atsushi Nagase <a@ngs.io>"
   ],
   "dependencies": {
     "decorate-component-with-props": "^1.0.2",
-    "draft-js": "~0.10.1",
+    "draft-js": "^0.10.4",
     "draft-js-checkable-list-item": "^2.0.5",
     "draft-js-prism-plugin": "^0.1.1",
-    "immutable": "~3.7.4"
+    "immutable": "~3.7.4",
+    "react-modal": "^3.3.2",
+    "react-popover": "^0.4.0"
   }
 }

src/components/Code/index.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from "react";
 import { Map } from "immutable";
 import { EditorState, EditorBlock, Modifier } from "draft-js";
+import Modal from "react-modal";
 
 const languages = {
   bash: "Bash",
@@ -22,11 +23,22 @@ const languages = {
   swift: "Swift",
 };
 
+const hidden = {};
+
 class CodeBlock extends PureComponent {
+  state = {
+    isOpen: false,
+  };
+
   onChange = ev => {
     ev.preventDefault();
+    ev.stopPropagation();
     const blockKey = this.props.block.getKey();
-    const { getEditorState, setEditorState } = this.props.blockProps;
+    const {
+      getEditorState,
+      setEditorState,
+      getEditorRef,
+    } = this.props.blockProps;
     const editorState = getEditorState();
     const selection = editorState.getSelection();
     const language = ev.currentTarget.value;
@@ -40,12 +52,19 @@ class CodeBlock extends PureComponent {
       "change-block-data"
     );
 
-    // setTimeout(() => {
-    //   setEditorState(EditorState.forceSelection(
-    //     newEditorState,
-    //     content.getSelectionAfter()
-    //   ))
-    // }, 3000)
+    setTimeout(() => {
+      setEditorState(
+        EditorState.forceSelection(newEditorState, content.getSelectionAfter())
+      );
+    }, 2);
+  };
+
+  cancelClicks = event => event.preventDefault();
+
+  preventBubbling = event => event.stopPropagation();
+
+  wat = () => {
+    console.log("yo wtf");
   };
 
   render() {
@@ -54,8 +73,13 @@ class CodeBlock extends PureComponent {
     return (
       <div>
         <EditorBlock {...this.props} />
-        <div contentEditable={false}>
-          <select value={language} onChange={this.onChange}>
+        <div>
+          <select
+            contentEditable={false}
+            onClick={this.preventBubbling}
+            value={language}
+            onChange={this.onChange}
+          >
             {Object.keys(this.props.languages).map(lang => (
               <option key={lang} value={lang}>
                 {this.props.languages[lang]}

src/index.js

@@ -126,7 +126,7 @@ const createMarkdownPlugin = (config = {}) => {
       return null;
     },
 
-    blockRendererFn(block, { setEditorState, getEditorState }) {
+    blockRendererFn(block, { setEditorState, getEditorState, getEditorRef }) {
       switch (block.getType()) {
         case CHECKABLE_LIST_ITEM: {
           return {
@@ -144,6 +144,7 @@ const createMarkdownPlugin = (config = {}) => {
           return {
             component: CodeBlock,
             props: {
+              getEditorRef,
               setEditorState,
               language: block.getData().get("language"),
               getEditorState,

yarn.lock

@@ -1546,6 +1546,14 @@ create-error-class@^3.0.0:
   dependencies:
     capture-stack-trace "^1.0.0"
 
+create-react-class@^15.5.3:
+  version "15.6.3"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 create-react-class@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
@@ -1653,6 +1661,12 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
+css-vendor@^0.3.1:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa"
+  dependencies:
+    is-in-browser "^1.0.2"
+
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -1922,7 +1936,15 @@ draft-js-prism@ngs/draft-js-prism#6edb31c3805dd1de3fb897cc27fced6bac1bafbb:
     immutable "*"
     prismjs "^1.5.0"
 
-draft-js@~0.10.0, draft-js@~0.10.1:
+draft-js@^0.10.4:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742"
+  dependencies:
+    fbjs "^0.8.15"
+    immutable "~3.7.4"
+    object-assign "^4.1.0"
+
+draft-js@~0.10.0:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.2.tgz#b722613cb306cfee910f9de1789f2cc3023772e7"
   dependencies:
@@ -2323,6 +2345,10 @@ execa@^0.8.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -2435,7 +2461,7 @@ fbjs@^0.8.12:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
+fbjs@^0.8.15, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -3174,6 +3200,10 @@ is-glob@^4.0.0:
   dependencies:
     is-extglob "^2.1.1"
 
+is-in-browser@^1.0.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+
 is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
   version "2.16.1"
   resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.1.tgz#5a846777e2c2620d1e69104e5d3a03b1f6088f11"
@@ -3949,6 +3979,12 @@ lodash.create@3.1.1:
     lodash._basecreate "^3.0.0"
     lodash._isiterateecall "^3.0.0"
 
+lodash.debounce@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-3.1.1.tgz#812211c378a94cc29d5aa4e3346cf0bfce3a7df5"
+  dependencies:
+    lodash._getnative "^3.0.0"
+
 lodash.defaults@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"
@@ -4020,6 +4056,12 @@ lodash.some@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
 
+lodash.throttle@^3.0.3:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-3.0.4.tgz#bc4f471fb328e4d6fdc6df2b3d3caf113f0f89c9"
+  dependencies:
+    lodash.debounce "^3.0.0"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -5255,6 +5297,10 @@ react-deep-force-update@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.1.tgz#bcd31478027b64b3339f108921ab520b4313dc2c"
 
+react-dom-factories@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0"
+
 react-dom@^15.4.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
@@ -5272,6 +5318,25 @@ react-github-fork-ribbon@^0.4.4:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/react-github-fork-ribbon/-/react-github-fork-ribbon-0.4.5.tgz#2d3586bfde368a19aef7b4a46471e0839c9bc010"
 
+react-modal@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.3.2.tgz#b13da9490653a7c76bc0e9600323eb1079c620e7"
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.5.10"
+    warning "^3.0.0"
+
+react-popover@^0.4.0:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/react-popover/-/react-popover-0.4.18.tgz#c8a5aacdddf5a883068368ea1f589dfd3bdd4943"
+  dependencies:
+    create-react-class "^15.5.3"
+    css-vendor "^0.3.1"
+    debug "^2.6.8"
+    lodash.throttle "^3.0.3"
+    prop-types "^15.5.10"
+    react-dom-factories "^1.0.0"
+
 react-proxy@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
@@ -5298,7 +5363,7 @@ react-transform-hmr@^1.0.3:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
-react@*, react@^15.4.1:
+react@*:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
   dependencies:
@@ -5308,6 +5373,16 @@ react@*, react@^15.4.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react@^15.4.1:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
+  dependencies:
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -6400,6 +6475,12 @@ warning@^2.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"