Skip to content

/ getting-started-with-draft-js-plugins

Permalink
Browse files

emoji plugin

  • Loading branch information
Julian Krispel-Samsel
Julian Krispel-Samsel committed Jun 17, 2017
1 parent 937bd5b commit 934e413d57a89f5ec049872b2a33af854f38e4e2
Unified Split
Showing with 121 additions and 20 deletions.
  1. +3 −1 package.json
  2. +14 −4 src/App.js
  3. +104 −15 yarn.lock
4 package.json
View file
@@ -3,7 +3,9 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"draft-js-plugins-editor": "^2.0.0-beta1",
"draft-js": "^0.10.1",
"draft-js-emoji-plugin": "2.0.0-rc2",
"draft-js-plugins-editor": "2.0.0-rc2",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
18 src/App.js
View file
@@ -1,6 +1,12 @@
import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createEmojiPlugin from 'draft-js-emoji-plugin';
import 'draft-js-emoji-plugin/lib/plugin.css'

const emojiPlugin = createEmojiPlugin();

const { EmojiSuggestions } = emojiPlugin;

class App extends Component {
constructor(props) {
@@ -18,10 +24,14 @@ class App extends Component {

render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
/>
<div>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={[emojiPlugin]}
/>
<EmojiSuggestions />
</div>
);
}
}
119 yarn.lock
View file
@@ -54,6 +54,10 @@ acorn@^5.0.0, acorn@^5.0.1:
version "5.0.3"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"

add-px-to-style@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"

address@1.0.1, address@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/address/-/address-1.0.1.tgz#363f5d3f2be26d0655d8afd5a9562e4fc2194537"
@@ -1810,6 +1814,14 @@ dom-converter@~0.1:
dependencies:
utila "~0.3"

dom-css@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
dependencies:
add-px-to-style "1.0.0"
prefix-style "2.0.1"
to-camel-case "1.0.0"

dom-serializer@0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -1864,19 +1876,32 @@ dotenv@4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"

draft-js-plugins-editor@^2.0.0-beta1:
version "2.0.0-beta1"
resolved "https://registry.yarnpkg.com/draft-js-plugins-editor/-/draft-js-plugins-editor-2.0.0-beta1.tgz#184e0c3579bffeb4b18b8b65a172ffdfce110d04"
draft-js-emoji-plugin@2.0.0-rc2:
version "2.0.0-rc2"
resolved "https://registry.yarnpkg.com/draft-js-emoji-plugin/-/draft-js-emoji-plugin-2.0.0-rc2.tgz#58bb56f31d80a64e3b679082dac131171ef418f7"
dependencies:
decorate-component-with-props "^1.0.2"
emojione "^2.2.7"
find-with-regex "^1.0.2"
immutable "~3.7.4"
lodash.keys "^4.2.0"
prop-types "^15.5.8"
react-custom-scrollbars "^4.1.1"
react-icons "^2.2.3"
to-style "^1.3.3"
union-class-names "^1.0.0"

draft-js-plugins-editor@2.0.0-rc2:
version "2.0.0-rc2"
resolved "https://registry.yarnpkg.com/draft-js-plugins-editor/-/draft-js-plugins-editor-2.0.0-rc2.tgz#521eb415882a1f670c03a00581247e752291218c"
dependencies:
decorate-component-with-props "^1.0.2"
draft-js ">=0.7.0"
find-with-regex "^1.0.2"
immutable ">=3.8.1"
react ">=15.1.0"
react-dom ">=15.1.0"
immutable "~3.7.4"
prop-types "^15.5.8"
union-class-names "^1.0.0"

draft-js@>=0.7.0:
draft-js@^0.10.1:
version "0.10.1"
resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.1.tgz#6f1219d8095729691429ca6fd7a58d2a8be5cb67"
dependencies:
@@ -1924,6 +1949,10 @@ emoji-regex@^6.1.0:
version "6.4.2"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.4.2.tgz#a30b6fee353d406d96cfb9fa765bdc82897eff6e"

emojione@^2.2.7:
version "2.2.7"
resolved "https://registry.yarnpkg.com/emojione/-/emojione-2.2.7.tgz#46457cf6b9b2f8da13ae8a2e4e547de06ee15e96"

emojis-list@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -2897,10 +2926,6 @@ ignore@^3.2.0:
version "3.3.3"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"

immutable@>=3.8.1:
version "3.8.1"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"

immutable@~3.7.4:
version "3.7.6"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
@@ -3737,6 +3762,10 @@ lodash.defaults@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"

lodash.keys@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-4.2.0.tgz#a08602ac12e4fb83f91fc1fb7a360a4d9ba35205"

lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -4342,6 +4371,10 @@ performance-now@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"

performance-now@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"

pify@^2.0.0, pify@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -4664,6 +4697,10 @@ postcss@^6.0.1, postcss@^6.x:
source-map "^0.5.6"
supports-color "^3.2.3"

prefix-style@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"

prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -4716,7 +4753,13 @@ promise@7.1.1, promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.10:
prop-types@15.5.8:
version "15.5.8"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
dependencies:
fbjs "^0.8.9"

prop-types@^15.5.10, prop-types@^15.5.8:
version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
dependencies:
@@ -4787,6 +4830,12 @@ querystringify@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"

raf@^3.1.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27"
dependencies:
performance-now "^2.1.0"

randomatic@^1.1.3:
version "1.1.7"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -4813,6 +4862,14 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"

react-custom-scrollbars@^4.1.1:
version "4.1.2"
resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.1.2.tgz#0e60c4a46c4a61f9e4994a7663e2b9cbbc5187a3"
dependencies:
dom-css "^2.0.0"
prop-types "^15.5.10"
raf "^3.1.0"

react-dev-utils@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-3.0.0.tgz#3677f37718ba0cae892ba9c01fe54d1622e6ef7c"
@@ -4835,7 +4892,7 @@ react-dev-utils@^3.0.0:
strip-ansi "3.0.1"
text-table "0.2.0"

react-dom@>=15.1.0, react-dom@^15.6.1:
react-dom@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
dependencies:
@@ -4855,6 +4912,18 @@ react-error-overlay@^1.0.7:
settle-promise "1.0.0"
source-map "0.5.6"

react-icon-base@2.0.7:
version "2.0.7"
resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.0.7.tgz#0bd18736bd6ce79ca6d69ce8387a07fb8d4ceffe"
dependencies:
prop-types "15.5.8"

react-icons@^2.2.3:
version "2.2.5"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.5.tgz#f942501c21a4cc0456ce2bbee5032c93f6051dcf"
dependencies:
react-icon-base "2.0.7"

react-scripts@1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.7.tgz#fe1436dda03bb45465c76d097cfea4f32eb7cbbb"
@@ -4898,7 +4967,7 @@ react-scripts@1.0.7:
optionalDependencies:
fsevents "1.0.17"

react@>=15.1.0, react@^15.6.1:
react@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
dependencies:
@@ -5718,10 +5787,30 @@ to-arraybuffer@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"

to-camel-case@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
dependencies:
to-space-case "^1.0.0"

to-fast-properties@^1.0.1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"

to-no-case@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"

to-space-case@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
dependencies:
to-no-case "^1.0.0"

to-style@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/to-style/-/to-style-1.3.3.tgz#63a2b70a6f4a7d4fdc2ed57a0be4e7235cb6699c"

toposort@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.3.tgz#f02cd8a74bd8be2fc0e98611c3bacb95a171869c"

0 comments on commit 934e413

Please sign in to comment.
You can’t perform that action at this time.