├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── draft-js-buttons-plugin ├── .gitignore ├── .npmignore ├── package.json ├── src │ ├── components │ │ ├── AddColorButton │ │ │ └── index.js │ │ ├── AddEmbedButton │ │ │ └── index.js │ │ ├── AddEmojiButton │ │ │ └── index.js │ │ ├── AddGifButton │ │ │ └── index.js │ │ ├── AddImageButton │ │ │ └── index.js │ │ └── AddLinkButton │ │ │ └── index.js │ ├── index.js │ └── utils │ │ ├── createImageButton.js │ │ ├── createModalButton.js │ │ └── insertDataBlock.js ├── webpack.config.js └── yarn.lock ├── draft-js-color-picker-plugin ├── .gitignore ├── .npmignore ├── README.md ├── package.json ├── src │ ├── Picker.js │ ├── colors.js │ └── index.js └── yarn.lock ├── draft-js-embed-plugin ├── .gitignore ├── .npmignore ├── README.md ├── package.json ├── postcss.config.js ├── src │ ├── embed │ │ └── index.js │ ├── embedStyles.css │ ├── index.js │ └── modifiers │ │ └── addEmbed.js ├── webpack.config.js └── yarn.lock ├── draft-js-emoji-picker-plugin ├── .gitignore ├── .npmignore ├── README.md ├── package.json ├── src │ ├── Picker.js │ └── index.js └── yarn.lock ├── draft-js-gif-picker-plugin ├── .gitignore ├── .npmignore ├── README.md ├── package.json ├── src │ ├── Picker.js │ └── index.js └── yarn.lock ├── draft-js-link-plugin ├── .gitignore ├── .npmignore ├── README.md ├── package.json ├── postcss.config.js ├── src │ ├── Link │ │ └── index.js │ ├── index.js │ ├── linkStrategy.js │ └── styles.css ├── webpack.config.js └── yarn.lock ├── draft-js-modal-plugin ├── .gitignore ├── .npmignore ├── README.md ├── package.json ├── src │ ├── components │ │ ├── ColorModal │ │ │ └── index.js │ │ ├── EmbedModal │ │ │ ├── Url │ │ │ │ ├── getAudioUrl.js │ │ │ │ └── getVideoUrl.js │ │ │ ├── index.js │ │ │ └── insertDataBlock.js │ │ ├── EmojiModal │ │ │ └── index.js │ │ ├── GifModal │ │ │ ├── index.js │ │ │ └── insertDataBlock.js │ │ └── LinkModal │ │ │ ├── entity.js │ │ │ └── index.js │ └── index.js ├── webpack.config.js └── yarn.lock ├── draft-js-sidebar-plugin ├── .gitignore ├── .npmignore ├── README.md ├── package.json ├── postcss.config.js ├── src │ ├── blockTypeSelectStyles.css │ ├── buttonStyles.css │ ├── components │ │ ├── BlockTypeSelect │ │ │ └── index.js │ │ ├── DefaultBlockTypeSelect │ │ │ └── index.js │ │ ├── Sidebar │ │ │ └── index.js │ │ └── getModalByType │ │ │ └── index.js │ ├── emojiPickerStyles.css │ ├── gifPickerStyles.css │ ├── index.js │ ├── modalStyles.css │ ├── sidebarStyles.css │ └── utils │ │ └── createStore.js ├── webpack.config.js └── yarn.lock ├── draft-js-toolbar-plugin ├── .gitignore ├── .npmignore ├── README.md ├── package.json ├── postcss.config.js ├── src │ ├── buttonStyles.css │ ├── colorPickerStyles.css │ ├── components │ │ ├── Separator │ │ │ └── index.js │ │ ├── Toolbar │ │ │ └── index.js │ │ └── getModalByType │ │ │ └── index.js │ ├── index.js │ ├── modalStyles.css │ ├── separatorStyles.css │ ├── toolbarStyles.css │ └── utils │ │ └── createStore.js ├── webpack.config.js └── yarn.lock ├── example ├── Example.js ├── Mentions.js ├── index.html ├── index.js ├── initialState │ └── raw.js ├── public │ ├── favicon.ico │ ├── index.html │ └── screenshot.gif ├── styles │ ├── draft.css │ ├── example.css │ └── ld.css ├── webpack.config.js └── webpack.config.prod.js ├── package.json ├── scripts └── concatCssFiles.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015", "stage-0"], 3 | "plugins": ["transform-decorators-legacy"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | example/public/bundle.js 4 | example/public/vendor.js 5 | example/public/stats.html 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2016, Globo.com (http://globo.com) 3 | Copyright (c) 2016, vace.nz (http://vace.nz) 4 | Copyright (c) 2016, Nik Graf (https://www.draft-js-plugins.com) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is furnished 11 | to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 17 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS 22 | IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Last Draft draft-js-plugins](http://lastdraft.xyz) 2 | 3 | [![npm version](https://badge.fury.io/js/last-draft.svg)](https://badge.fury.io/js/last-draft) 4 | 5 | [![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) 6 | 7 | ![](https://raw.githubusercontent.com/vacenz/last-draft/master/example/public/screenshot.gif) 8 | 9 | Some cool [draft-js-plugins](https://draft-js-plugins.com) used in the [last draft editor](https://github.com/vacenz/last-draft) 10 | 11 | ## Development 12 | 13 | ``` 14 | yarn install 15 | npm run dev 16 | open http://127.0.0.1:3000 17 | ``` 18 | 19 | ## License 20 | 21 | [MIT](http://isekivacenz.mit-license.org/) 22 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/.gitignore: -------------------------------------------------------------------------------- 1 | lib/* 2 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/.npmignore: -------------------------------------------------------------------------------- 1 | # Dependency directory 2 | node_modules 3 | 4 | # sources 5 | /src/ 6 | webpack.config.js 7 | .babelrc 8 | .gitignore 9 | README.md 10 | CHANGELOG.md 11 | 12 | # NPM debug 13 | npm-debug.log 14 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "draft-js-buttons-plugin", 3 | "version": "1.2.0", 4 | "description": "LastDraft buttons for DraftJS", 5 | "authors": [ 6 | "Benjamin Kniffler (https://github.com/bkniffler)", 7 | "Nik Graf (http://www.nikgraf.com)", 8 | "Steven Iseki (https://github.com/StevenIseki)", 9 | "Marcelo Jorge Vieira (https://github.com/marcelometal)" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/vacenz/last-draft-js-plugins.git" 14 | }, 15 | "main": "lib/index.js", 16 | "keywords": [ 17 | "editor", 18 | "wysiwyg", 19 | "draft", 20 | "react", 21 | "ux", 22 | "components", 23 | "widget", 24 | "react-component" 25 | ], 26 | "scripts": { 27 | "build": "BABEL_ENV=production ../node_modules/.bin/babel --out-dir='lib' src" 28 | }, 29 | "license": "MIT", 30 | "devDependencies": { 31 | "draft-js": "0.10.1", 32 | "react": "15.5.0", 33 | "react-dom": "15.5.0" 34 | }, 35 | "peerDependencies": { 36 | "draft-js": "0.10.1", 37 | "react": "15.5.0", 38 | "react-dom": "15.5.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/components/AddColorButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import createModalButton from '../../utils/createModalButton' 3 | 4 | export default createModalButton({ 5 | children: ( 6 | 7 | 8 | 9 | 10 | ) 11 | }, 'color') 12 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/components/AddEmbedButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import createModalButton from '../../utils/createModalButton' 3 | 4 | export default createModalButton({ 5 | children: ( 6 | 7 | 8 | 9 | ) 10 | }, 'embed') 11 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/components/AddEmojiButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import createModalButton from '../../utils/createModalButton' 3 | 4 | export default createModalButton({ 5 | children: ( 6 | 7 | 8 | 9 | 10 | ) 11 | }, 'emoji') 12 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/components/AddGifButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import createModalButton from '../../utils/createModalButton' 3 | 4 | export default createModalButton({ 5 | children: ( 6 | 7 | 8 | 9 | ) 10 | }, 'gif') 11 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/components/AddImageButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import createImageButton from '../../utils/createImageButton' 3 | 4 | export default createImageButton({ 5 | children: ( 6 | 7 | 8 | 9 | ) 10 | }) 11 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/components/AddLinkButton/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import createModalButton from '../../utils/createModalButton' 3 | 4 | export default createModalButton({ 5 | children: ( 6 | 7 | 8 | 9 | ) 10 | }, 'link') 11 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016, Globo.com (https://github.com/globocom) 3 | * Copyright (c) 2016, vace.nz (https://github.com/vacenz) 4 | * Copyright (c) 2016, Nik Graf (https://www.draft-js-plugins.com) 5 | * 6 | * License: MIT 7 | */ 8 | 9 | import AddColorButton from './components/AddColorButton/' 10 | import AddEmbedButton from './components/AddEmbedButton/' 11 | import AddEmojiButton from './components/AddEmojiButton/' 12 | import AddGifButton from './components/AddGifButton/' 13 | import AddImageButton from './components/AddImageButton/' 14 | import AddLinkButton from './components/AddLinkButton/' 15 | 16 | export { 17 | AddColorButton, 18 | AddEmbedButton, 19 | AddEmojiButton, 20 | AddGifButton, 21 | AddImageButton, 22 | AddLinkButton 23 | } 24 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/utils/createImageButton.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import ReactDOM from 'react-dom' 3 | import insertDataBlock from './insertDataBlock' 4 | 5 | export default ({ children }) => ( 6 | class imageButton extends Component { 7 | 8 | onClick (e) { 9 | e.preventDefault() 10 | ReactDOM.findDOMNode(this.refs.fileInput).click() 11 | } 12 | 13 | inputChange (e) { 14 | const file = e.target.files[0] 15 | const src = window.URL.createObjectURL(file) 16 | const imageData = {src: src, type: 'placeholder'} 17 | this.props.setEditorState(insertDataBlock(this.props.getEditorState(), imageData, 'image')) 18 | } 19 | 20 | preventBubblingUp = (event) => { event.preventDefault() } 21 | 22 | render () { 23 | const { theme } = this.props 24 | return ( 25 |
29 |
44 | 45 | ) 46 | } 47 | } 48 | ) 49 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/utils/createModalButton.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | export default ({ children }, type) => ( 4 | class embedButton extends Component { 5 | 6 | onClick (e) { 7 | e.preventDefault() 8 | this.props.openModal(type) 9 | } 10 | 11 | preventBubblingUp = (event) => { event.preventDefault() } 12 | 13 | render () { 14 | const { theme } = this.props 15 | return ( 16 |
20 |
27 | 28 | ) 29 | } 30 | } 31 | ) 32 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/src/utils/insertDataBlock.js: -------------------------------------------------------------------------------- 1 | import {EditorState, AtomicBlockUtils} from 'draft-js' 2 | 3 | const insertDataBlock = (editorState, data, urlType) => { 4 | const contentState = editorState.getCurrentContent() 5 | const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', data) 6 | const entityKey = contentStateWithEntity.getLastCreatedEntityKey() 7 | const newEditorState = AtomicBlockUtils.insertAtomicBlock( 8 | editorState, 9 | entityKey, 10 | ' ' 11 | ) 12 | return EditorState.forceSelection( 13 | newEditorState, 14 | editorState.getCurrentContent().getSelectionAfter() 15 | ) 16 | } 17 | 18 | export default insertDataBlock 19 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-var */ 2 | var path = require('path') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | var autoprefixer = require('autoprefixer') 5 | 6 | module.exports = { 7 | output: { 8 | publicPath: '/', 9 | libraryTarget: 'commonjs2', // necessary for the babel plugin 10 | path: path.join(__dirname, 'lib-css') // where to place webpack files 11 | }, 12 | module: { 13 | loaders: [ 14 | { 15 | test: /\.css$/, 16 | loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=draftJsToolbar__[local]__[hash:base64:5]!postcss-loader') 17 | } 18 | ] 19 | }, 20 | postcss: [autoprefixer({ browsers: ['> 1%'] })], 21 | plugins: [ 22 | new ExtractTextPlugin(`${path.parse(process.argv[2]).name}.css`) 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /draft-js-buttons-plugin/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@~2.0.3: 6 | version "2.0.5" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 8 | 9 | core-js@^1.0.0: 10 | version "1.2.7" 11 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" 12 | 13 | draft-js@0.10.1: 14 | version "0.10.1" 15 | resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.1.tgz#6f1219d8095729691429ca6fd7a58d2a8be5cb67" 16 | dependencies: 17 | fbjs "^0.8.7" 18 | immutable "~3.7.4" 19 | object-assign "^4.1.0" 20 | 21 | encoding@^0.1.11: 22 | version "0.1.12" 23 | resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" 24 | dependencies: 25 | iconv-lite "~0.4.13" 26 | 27 | fbjs@^0.8.7, fbjs@^0.8.9: 28 | version "0.8.12" 29 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" 30 | dependencies: 31 | core-js "^1.0.0" 32 | isomorphic-fetch "^2.1.1" 33 | loose-envify "^1.0.0" 34 | object-assign "^4.1.0" 35 | promise "^7.1.1" 36 | setimmediate "^1.0.5" 37 | ua-parser-js "^0.7.9" 38 | 39 | iconv-lite@~0.4.13: 40 | version "0.4.18" 41 | resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2" 42 | 43 | immutable@~3.7.4: 44 | version "3.7.6" 45 | resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b" 46 | 47 | is-stream@^1.0.1: 48 | version "1.1.0" 49 | resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" 50 | 51 | isomorphic-fetch@^2.1.1: 52 | version "2.2.1" 53 | resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" 54 | dependencies: 55 | node-fetch "^1.0.1" 56 | whatwg-fetch ">=0.10.0" 57 | 58 | js-tokens@^3.0.0: 59 | version "3.0.1" 60 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7" 61 | 62 | loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: 63 | version "1.3.1" 64 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 65 | dependencies: 66 | js-tokens "^3.0.0" 67 | 68 | node-fetch@^1.0.1: 69 | version "1.7.1" 70 | resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.1.tgz#899cb3d0a3c92f952c47f1b876f4c8aeabd400d5" 71 | dependencies: 72 | encoding "^0.1.11" 73 | is-stream "^1.0.1" 74 | 75 | object-assign@^4.1.0: 76 | version "4.1.1" 77 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 78 | 79 | promise@^7.1.1: 80 | version "7.3.0" 81 | resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.0.tgz#e7feec5aa87a2cbb81acf47d9a3adbd9d4642d7b" 82 | dependencies: 83 | asap "~2.0.3" 84 | 85 | prop-types@15.5.0-alpha.0: 86 | version "15.5.0-alpha.0" 87 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.0-alpha.0.tgz#a342108678256db125eee3d1ae2f889af3531bd7" 88 | dependencies: 89 | fbjs "^0.8.9" 90 | 91 | prop-types@~15.5.0: 92 | version "15.5.10" 93 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" 94 | dependencies: 95 | fbjs "^0.8.9" 96 | loose-envify "^1.3.1" 97 | 98 | react-dom@15.5.0: 99 | version "15.5.0" 100 | resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.0.tgz#86a8d6dcde388473815039de3840706e1f28f697" 101 | dependencies: 102 | fbjs "^0.8.9" 103 | loose-envify "^1.1.0" 104 | object-assign "^4.1.0" 105 | prop-types "~15.5.0" 106 | 107 | react@15.5.0: 108 | version "15.5.0" 109 | resolved "https://registry.yarnpkg.com/react/-/react-15.5.0.tgz#1f8e4b492dcfbf77479eb4fdfc48da425002e505" 110 | dependencies: 111 | fbjs "^0.8.9" 112 | loose-envify "^1.1.0" 113 | object-assign "^4.1.0" 114 | prop-types "15.5.0-alpha.0" 115 | 116 | setimmediate@^1.0.5: 117 | version "1.0.5" 118 | resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" 119 | 120 | ua-parser-js@^0.7.9: 121 | version "0.7.12" 122 | resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" 123 | 124 | whatwg-fetch@>=0.10.0: 125 | version "2.0.3" 126 | resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" 127 | -------------------------------------------------------------------------------- /draft-js-color-picker-plugin/.gitignore: -------------------------------------------------------------------------------- 1 | lib/* 2 | -------------------------------------------------------------------------------- /draft-js-color-picker-plugin/.npmignore: -------------------------------------------------------------------------------- 1 | # Dependency directory 2 | node_modules 3 | 4 | # sources 5 | /src/ 6 | webpack.config.js 7 | .babelrc 8 | .gitignore 9 | README.md 10 | CHANGELOG.md 11 | 12 | # NPM debug 13 | npm-debug.log 14 | -------------------------------------------------------------------------------- /draft-js-color-picker-plugin/README.md: -------------------------------------------------------------------------------- 1 | # DraftJS color picker Plugin 2 | 3 | *This is a plugin for the `draft-js-plugins-editor`.* 4 | 5 | ## Usage 6 | 7 | This is plugin is used in the `draft-js-modal-plugin`.* 8 | 9 | The styleMap `colorStyleMap` should be exported from this plugin and used in the `draft-js-plugins-editor` 10 | 11 | ```js 12 | import {colorStyleMap} from '../draft-js-color-picker-plugin/src/' 13 | 14 | (https://github.com/bkniffler)", 7 | "Nik Graf (http://www.nikgraf.com)", 8 | "Steven Iseki (https://github.com/StevenIseki)", 9 | "Marcelo Jorge Vieira (https://github.com/marcelometal)" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/vacenz/last-draft-js-plugins.git" 14 | }, 15 | "main": "lib/index.js", 16 | "keywords": [ 17 | "editor", 18 | "wysiwyg", 19 | "draft", 20 | "react", 21 | "ux", 22 | "components", 23 | "widget", 24 | "react-component" 25 | ], 26 | "scripts": { 27 | "build": "npm run build:js", 28 | "build:js": "BABEL_DISABLE_CACHE=1 BABEL_ENV=production NODE_ENV=production ../node_modules/.bin/babel --out-dir='lib' src" 29 | }, 30 | "license": "MIT", 31 | "devDependencies": { 32 | "draft-js": "0.10.1", 33 | "react": "15.5.0", 34 | "react-dom": "15.5.0" 35 | }, 36 | "peerDependencies": { 37 | "draft-js": "0.10.1", 38 | "react": "15.5.0", 39 | "react-dom": "15.5.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /draft-js-color-picker-plugin/src/Picker.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import {colors} from './colors' 3 | 4 | export default class extends Component { 5 | handleColorChange (color) { 6 | this.props.onSelected(color) 7 | } 8 | 9 | render () { 10 | const { theme } = this.props 11 | return ( 12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | { 24 | colors.map((c, i) => { 25 | return ( 26 | this.handleColorChange(c)} /> 29 | ) 30 | }) 31 | } 32 |
33 |
34 | ) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /draft-js-color-picker-plugin/src/colors.js: -------------------------------------------------------------------------------- 1 | export const colors = [ 2 | '#191919', '#3B3738', '#161616', '#000000', 3 | '#2B2B2B', '#404040', '#585858', '#191919', 4 | '#C63D0F', '#DE1B1B', '#FF4136', '#B22222', 5 | '#7D1935', '#B71427', '#FF0000', '#E44424', 6 | '#9370DB', '#B10DC9', '#FF69B4', '#FFC0CB', 7 | '#FFD700', '#DAA520', '#D9853B', '#FF851B', 8 | '#FFA500', '#FF9009', '#FF8C00', '#FF7F50', 9 | '#FFF056', '#FFDC00', '#FFE658', '#F3FAB6', 10 | '#005A31', '#A8CD1B', '#CBE32D', '#ADFF2F', 11 | '#3D9970', '#2ECC40', '#00FF00', '#118C4E', 12 | '#228B22', '#E9E581', '#C1E1A6', '#A2AB58', 13 | '#00008B', '#4A96AD', '#6DBDD6', '#67BCDB', 14 | '#191970', '#0074D9', '#7FDBFF', '#39CCCC', 15 | '#AAAAAA', '#DDDDDD', '#DFE2DB', '#ECECEA', 16 | '#FDF3E7', '#FEFBEC', '#F6F6F6', '#FFFFFF', 17 | '#FAEBD7', '#F5F5F5', '#F8F8FF', '#FFFAF0' 18 | ] 19 | -------------------------------------------------------------------------------- /draft-js-color-picker-plugin/src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016, Globo.com (https://github.com/globocom) 3 | * Copyright (c) 2016, vace.nz (https://github.com/vacenz) 4 | * Copyright (c) 2016, Nik Graf (https://www.draft-js-plugins.com) 5 | * 6 | * License: MIT 7 | */ 8 | 9 | import {colors} from './colors' 10 | import Picker from './Picker' 11 | 12 | const styleMap = {} 13 | colors.map((c, i) => { 14 | styleMap[`color-${c.replace('#', '')}`] = { color: c } 15 | }) 16 | 17 | module.exports = { 18 | Picker: Picker, 19 | colorStyleMap: styleMap 20 | } 21 | -------------------------------------------------------------------------------- /draft-js-color-picker-plugin/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@~2.0.3: 6 | version "2.0.5" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" 8 | 9 | core-js@^1.0.0: 10 | version "1.2.7" 11 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" 12 | 13 | draft-js@0.10.1: 14 | version "0.10.1" 15 | resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.1.tgz#6f1219d8095729691429ca6fd7a58d2a8be5cb67" 16 | dependencies: 17 | fbjs "^0.8.7" 18 | immutable "~3.7.4" 19 | object-assign "^4.1.0" 20 | 21 | encoding@^0.1.11: 22 | version "0.1.12" 23 | resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" 24 | dependencies: 25 | iconv-lite "~0.4.13" 26 | 27 | fbjs@^0.8.7, fbjs@^0.8.9: 28 | version "0.8.12" 29 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" 30 | dependencies: 31 | core-js "^1.0.0" 32 | isomorphic-fetch "^2.1.1" 33 | loose-envify "^1.0.0" 34 | object-assign "^4.1.0" 35 | promise "^7.1.1" 36 | setimmediate "^1.0.5" 37 | ua-parser-js "^0.7.9" 38 | 39 | iconv-lite@~0.4.13: 40 | version "0.4.18" 41 | resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2" 42 | 43 | immutable@~3.7.4: 44 | version "3.7.6" 45 | resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b" 46 | 47 | is-stream@^1.0.1: 48 | version "1.1.0" 49 | resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" 50 | 51 | isomorphic-fetch@^2.1.1: 52 | version "2.2.1" 53 | resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" 54 | dependencies: 55 | node-fetch "^1.0.1" 56 | whatwg-fetch ">=0.10.0" 57 | 58 | js-tokens@^3.0.0: 59 | version "3.0.1" 60 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7" 61 | 62 | loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: 63 | version "1.3.1" 64 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 65 | dependencies: 66 | js-tokens "^3.0.0" 67 | 68 | node-fetch@^1.0.1: 69 | version "1.7.1" 70 | resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.1.tgz#899cb3d0a3c92f952c47f1b876f4c8aeabd400d5" 71 | dependencies: 72 | encoding "^0.1.11" 73 | is-stream "^1.0.1" 74 | 75 | object-assign@^4.1.0: 76 | version "4.1.1" 77 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 78 | 79 | promise@^7.1.1: 80 | version "7.3.0" 81 | resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.0.tgz#e7feec5aa87a2cbb81acf47d9a3adbd9d4642d7b" 82 | dependencies: 83 | asap "~2.0.3" 84 | 85 | prop-types@15.5.0-alpha.0: 86 | version "15.5.0-alpha.0" 87 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.0-alpha.0.tgz#a342108678256db125eee3d1ae2f889af3531bd7" 88 | dependencies: 89 | fbjs "^0.8.9" 90 | 91 | prop-types@~15.5.0: 92 | version "15.5.10" 93 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" 94 | dependencies: 95 | fbjs "^0.8.9" 96 | loose-envify "^1.3.1" 97 | 98 | react-dom@15.5.0: 99 | version "15.5.0" 100 | resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.0.tgz#86a8d6dcde388473815039de3840706e1f28f697" 101 | dependencies: 102 | fbjs "^0.8.9" 103 | loose-envify "^1.1.0" 104 | object-assign "^4.1.0" 105 | prop-types "~15.5.0" 106 | 107 | react@15.5.0: 108 | version "15.5.0" 109 | resolved "https://registry.yarnpkg.com/react/-/react-15.5.0.tgz#1f8e4b492dcfbf77479eb4fdfc48da425002e505" 110 | dependencies: 111 | fbjs "^0.8.9" 112 | loose-envify "^1.1.0" 113 | object-assign "^4.1.0" 114 | prop-types "15.5.0-alpha.0" 115 | 116 | setimmediate@^1.0.5: 117 | version "1.0.5" 118 | resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" 119 | 120 | ua-parser-js@^0.7.9: 121 | version "0.7.12" 122 | resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" 123 | 124 | whatwg-fetch@>=0.10.0: 125 | version "2.0.3" 126 | resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" 127 | -------------------------------------------------------------------------------- /draft-js-embed-plugin/.gitignore: -------------------------------------------------------------------------------- 1 | lib/* 2 | -------------------------------------------------------------------------------- /draft-js-embed-plugin/.npmignore: -------------------------------------------------------------------------------- 1 | # Dependency directory 2 | node_modules 3 | 4 | # sources 5 | /src/ 6 | webpack.config.js 7 | .babelrc 8 | .gitignore 9 | README.md 10 | CHANGELOG.md 11 | 12 | # NPM debug 13 | npm-debug.log 14 | -------------------------------------------------------------------------------- /draft-js-embed-plugin/README.md: -------------------------------------------------------------------------------- 1 | # DraftJS embed Plugin 2 | 3 | *This is a plugin for the `draft-js-plugins-editor`.* 4 | 5 | ## Usage 6 | 7 | ```js 8 | import createEmbedPlugin from 'draft-js-embed-plugin' 9 | import 'draft-js-embed-plugin/lib/plugin.css' 10 | const embedPlugin = createEmbedPlugin() 11 | ``` 12 | 13 | ## Importing the default styles 14 | 15 | The plugin ships with a default styling available at this location in the installed package: 16 | `node_modules/draft-js-embed-plugin/lib/plugin.css`. 17 | 18 | ### Webpack Usage 19 | Follow the steps below to import the css file by using Webpack's `style-loader` and `css-loader`. 20 | 21 | 1. Install Webpack loaders: `npm install style-loader css-loader --save-dev` 22 | 2. Add the below section to Webpack config. 23 | 24 | ```js 25 | module: { 26 | loaders: [{ 27 | test: /\.css$/, 28 | loaders: [ 29 | 'style', 'css' 30 | ] 31 | }] 32 | } 33 | ``` 34 | 35 | 3. Add the below import line to your component to tell Webpack to inject the styles. 36 | 37 | ```js 38 | import 'draft-js-embed-plugin/lib/plugin.css'; 39 | ``` 40 | 4. Restart Webpack. 41 | -------------------------------------------------------------------------------- /draft-js-embed-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "draft-js-embed-plugin", 3 | "version": "1.2.0", 4 | "description": "LastDraft embed Plugin for DraftJS", 5 | "authors": [ 6 | "Benjamin Kniffler (https://github.com/bkniffler)", 7 | "Nik Graf (http://www.nikgraf.com)", 8 | "Steven Iseki (https://github.com/StevenIseki)", 9 | "Marcelo Jorge Vieira (https://github.com/marcelometal)" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/vacenz/last-draft-js-plugins.git" 14 | }, 15 | "main": "lib/index.js", 16 | "keywords": [ 17 | "editor", 18 | "wysiwyg", 19 | "draft", 20 | "react", 21 | "ux", 22 | "components", 23 | "widget", 24 | "react-component" 25 | ], 26 | "scripts": { 27 | "build": "npm run build:js && npm run build:css", 28 | "build:js": "babel src --out-dir lib", 29 | "build:css": "webpack --config ./webpack.config.js" 30 | }, 31 | "license": "MIT", 32 | "devDependencies": { 33 | "autoprefixer": "^6.7.6", 34 | "babel-cli": "^6.18.0", 35 | "babel-core": "^6.7.6", 36 | "babel-eslint": "^7.1.1", 37 | "babel-loader": "^6.2.4", 38 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 39 | "babel-plugin-webpack-loaders": "^0.9.0", 40 | "babel-polyfill": "^6.13.0", 41 | "babel-preset-es2015": "^6.6.0", 42 | "babel-preset-react": "^6.5.0", 43 | "babel-preset-stage-0": "^6.5.0", 44 | "babel-register": "^6.7.2", 45 | "babel-runtime": "^6.6.1", 46 | "css-loader": "^0.26.1", 47 | "draft-js": "0.10.1", 48 | "extract-text-webpack-plugin": "^2.0.0", 49 | "postcss-loader": "^1.3.3", 50 | "react": "15.5.0", 51 | "react-dom": "15.5.0", 52 | "style-loader": "^0.13.2", 53 | "webpack": "^2.2.1" 54 | }, 55 | "peerDependencies": { 56 | "draft-js": "0.10.1", 57 | "react": "15.5.0", 58 | "react-dom": "15.5.0" 59 | }, 60 | "dependencies": { 61 | "decorate-component-with-props": "^1.0.2" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /draft-js-embed-plugin/postcss.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable global-require */ 2 | 3 | module.exports = { 4 | plugins: [ 5 | require('autoprefixer')({ browsers: ['> 1%'] }) 6 | ] 7 | }; 8 | -------------------------------------------------------------------------------- /draft-js-embed-plugin/src/embed/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | export default class Embed extends Component { 4 | render () { 5 | const { 6 | block, 7 | theme = {}, 8 | ...otherProps 9 | } = this.props 10 | // leveraging destructuring to omit certain properties from props 11 | const { 12 | blockProps, // eslint-disable-line no-unused-vars 13 | customStyleMap, // eslint-disable-line no-unused-vars 14 | customStyleFn, // eslint-disable-line no-unused-vars 15 | decorator, // eslint-disable-line no-unused-vars 16 | forceSelection, // eslint-disable-line no-unused-vars 17 | offsetKey, // eslint-disable-line no-unused-vars 18 | selection, // eslint-disable-line no-unused-vars 19 | tree, // eslint-disable-line no-unused-vars 20 | contentState, 21 | ...elementProps 22 | } = otherProps 23 | const entity = block.getEntityAt(0); 24 | const { src } = contentState.getEntity(entity).getData(); 25 | return ( 26 |
27 |