feat: add braft-editor

source/braft-editor/.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@babel/env", {
+        "targets": {
+          "browsers": [
+            "last 2 versions",
+            "not IE <= 10"
+          ]
+        },
+        "modules": false
+      }
+    ],
+    "@babel/react"
+  ],
+  "plugins": [
+    "@babel/transform-runtime",
+    "@babel/proposal-class-properties"
+  ]
+}

source/braft-editor/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+example

source/braft-editor/.eslintrc

@@ -0,0 +1,49 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["airbnb", "prettier", "prettier/react"],
+  "globals": {
+    "_": false
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "indent": [
+      "error",
+      2,
+      {
+        "ArrayExpression": "first"
+      }
+    ],
+    "comma-dangle": 0,
+    "max-len": 0,
+    "jsx-quotes": [2, "prefer-double"],
+    "quotes": [
+      2,
+      "double",
+      {
+        "avoidEscape": true
+      }
+    ],
+    "arrow-parens": ["error", "always"],
+    "no-plusplus": [
+      "error",
+      {
+        "allowForLoopAfterthoughts": true
+      }
+    ],
+    "eol-last": ["error", "always"],
+    "class-methods-use-this": 0,
+    "function-paren-newline": 0,
+    "react/prefer-stateless-function": 0,
+    "react/forbid-prop-types": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "react/sort-comp": 0,
+    "prefer-destructuring": 0,
+    "react/require-default-props": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/extensions": 0,
+    "import/no-unresolved": 0
+  }
+}

source/braft-editor/.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/jsx-uses-react": [1],
+        "react/jsx-uses-vars": [2],
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "never"
+        ]
+    }
+};

source/braft-editor/.gitattributes

@@ -0,0 +1,2 @@
+braft.css diff=nodiff
+braft.js  diff=nodiff

source/braft-editor/.gitignore

@@ -0,0 +1,42 @@
+static
+
+node_modules
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log*
+*.rej
+*.swo
+*.swp
+*.zip
+*.vi
+*~
+*.sass-cache
+/example/server/temp/*
+
+# OS or Editor folders
+.DS_Store
+._*
+Thumbs.db
+.cache
+.project
+.settings
+.tmproj
+*.esproj
+nbproject
+*.sublime-project
+*.sublime-workspace
+
+# Files
+
+# Komodo
+*.komodoproject
+.komodotools
+
+# Folders to ignore
+.hg
+.svn
+.CVS
+.idea
+git-m

source/braft-editor/.npmignore

@@ -0,0 +1,8 @@
+/example
+/src
+/node_modules
+.babelrc
+.gitignore
+webpack.config.base.js
+webpack.config.js
+webpack.config.prod.js

source/braft-editor/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "all",
+  "arrowParens": "always"
+}

source/braft-editor/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Margox (http://margox.cn)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

source/braft-editor/README.md

@@ -0,0 +1,100 @@
+# Braft Editor
+
+#### 一个基于draft-js的Web富文本编辑器，适用于React框架，兼容主流现代浏览器。
+##### 注意，项目当前版本为2.0，如果你使用的是1.x.x版本，请参阅[旧版本文档](https://github.com/margox/braft-editor/blob/old-master/README.md)
+
+
+交流反馈请加QQ群：725634541
+
+## 特性
+- 完善的文本内容编辑功能
+- 诸多开放的编辑接口，良好的可扩展性
+- 允许插入图片、音视频等多媒体内容
+- 允许自定义多媒体内容的上传接口
+- 允许设置图片的左右浮动（即文字绕排功能）
+- 允许设置编辑器可用的颜色列表、字号以及字体
+- 允许自定义需要展示的控制按钮和展示顺序
+- 允许增加额外的自定义按钮
+- 多语言支持（目前已支持简体中文、繁体中文和英文）
+- ...更多特性开发中
+
+## 更新记录
+- 2018-09-06 v2.0.5
+  - 打包字体文件，免除额外的loader配置
+- 2018-09-05 v2.0.4
+  - 修复defaultValue中包含图片时，鼠标移入图片导致报错的问题
+- 2018-09-04 v2.0.3
+  - 修复代码块中按Tab导致报错的问题
+  - 修复控件文字提示被遮挡的问题
+- 2018-09-04 v2.0.1
+  - 图片工具栏自定义控件增加render属性
+- 2018-09-03 v2.0.0
+  - v2.0.0船新版本发布，几需体验3分钟，你就会爱上杰个编辑器
+
+## 安装
+```bash
+# 使用yarn安装
+yarn add braft-editor
+# 使用npm安装
+npm install braft-editor --save
+```
+## 使用
+
+编辑器支持**value**和**onChange**属性，这类似于React中原生的input组件。通常情况下，可以用典型的**受控组件**的形式来使用本编辑器：
+
+```jsx
+import React from 'react'
+// 引入编辑器以及EditorState子模块
+import BraftEditor, { EditorState } from 'braft-editor'
+// 引入编辑器样式
+import 'braft-editor/dist/index.css'
+
+export default class EditorDemo extends React.Component {
+
+  state = {
+      editorState: null
+  }
+
+  async componentDidMount () {
+    // 假设此处从服务端获取html格式的编辑器内容
+    const htmlContent = await fetchEditorContent()
+    // 使用EditorState.createFrom将html字符串转换为编辑器需要的editorState数据
+    this.setState({
+      editorState: EditorState.createFrom(htmlContent)
+    })
+  }
+
+  submitContent = async () => {
+    // 在编辑器获得焦点时按下ctrl+s会执行此方法
+    // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
+    const htmlContent = this.state.editorState.toHTML()
+    const result = await saveEditorContent(htmlContent)
+  }
+
+  handleEditorChange = (editorState) => {
+    this.setState({ editorState })
+  }
+
+  render () {
+
+    const { editorState } = this.state
+    return (
+      <div className="my-component">
+        <BraftEditor
+          value={editorState}
+          onChange={this.handleEditorChange}
+          onSave={this.submitContent}
+        />
+      </div>
+    )
+
+  }
+
+}
+```
+
+当然本编辑器也支持**defaultValue**属性，因此你也可以将本编辑器作为一个**非受控组件**来使用。
+
+-------
+
+## 更多介绍请查看[详细文档](https://www.yuque.com/margox/be/lzwpnr#zrs7hr)

source/braft-editor/build/webpack.base.js

@@ -0,0 +1,65 @@
+var path = require('path')
+  , fs = require('fs')
+  , ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = {
+  module: {
+    //加载器配置
+    rules: [
+      { 
+        test: /\.(scss|css)$/,
+        use: ExtractTextPlugin.extract([
+          // 'style-loader',
+          'css-loader',
+          'sass-loader'
+        ])
+      }, {
+        test: /\.(js|jsx)$/,
+        exclude: [
+          /node_modules/,
+          /dist/
+        ],
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              ...JSON.parse(fs.readFileSync(path.resolve(__dirname, '../.babelrc'))),
+            },
+          },
+          'eslint-loader'
+        ]
+      }, {
+        test: /\.(png|svg)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192,
+              name: '[name]_[hash:6].[ext]'
+            }
+          }
+        ]
+      }, {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 20000,
+              name: '[name].[ext]',
+              publicPath: './'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  resolve: {
+    modules: [path.resolve(__dirname, '../src'), 'node_modules'],
+    alias: {
+      'react': path.join(__dirname, '../node_modules', 'react'),
+      'scssinc': path.join(__dirname, '../src/assets/scss/_inc.scss')
+    },
+    extensions: ['.js', '.jsx']
+  }
+}

source/braft-editor/build/webpack.development.js

@@ -0,0 +1,29 @@
+var merge = require('webpack-merge')
+  , path = require('path')
+  , ExtractTextPlugin = require('extract-text-webpack-plugin')
+  , HtmlWebpackPlugin = require('html-webpack-plugin')
+  , baseConfigs = require('./webpack.base')
+
+module.exports = merge(baseConfigs, {
+  mode: 'development',
+  devtool: 'source-map',
+  entry: {
+    index : './example/index.jsx'
+  },
+  output: {
+    path: path.join(__dirname, './dist'),
+    filename: '[name].js'
+  },
+  plugins: [
+    new ExtractTextPlugin('index.css'),
+    new HtmlWebpackPlugin({
+      template: './example/index.html'
+    })
+  ],
+  devServer: {
+    stats: { chunks:false },
+    contentBase: './example',
+    port: 5998,
+    hot: true
+  }
+})

source/braft-editor/build/webpack.production.js

@@ -0,0 +1,49 @@
+var merge = require('webpack-merge')
+  , ExtractTextPlugin = require('extract-text-webpack-plugin')
+  , OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+  , path = require('path')
+  , baseConfigs = require('./webpack.base')
+
+module.exports = merge(baseConfigs, {
+  mode: 'production',
+  devtool: 'source-map',
+  context: path.join(__dirname, '../src'),
+  entry: {
+    index: './index.jsx'
+  },
+  output: {
+    path: path.join(__dirname, '../dist'),
+    filename: 'index.js',
+    publicPath: '/',
+    libraryTarget: 'umd'
+  },
+  externals: {
+    'react': 'react',
+    'react-dom': 'react-dom',
+    'draft-js': 'draft-js',
+    'draft-convert': 'draft-convert',
+    'draftjs-utils': 'draftjs-utils',
+    'braft-finder': 'braft-finder',
+    'braft-utils': 'braft-utils',
+    'braft-convert': 'braft-convert',
+    'immutable': 'immutable'
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new ExtractTextPlugin('index.css'),
+    new OptimizeCssAssetsPlugin({
+      assetNameRegExp: /.css$/,
+      cssProcessor: require('cssnano'),
+      sourceMap: true,
+      cssProcessorOptions: {
+        discardComments: {
+          removeAll: true
+        },
+        zindex: false,
+        safe: true
+      }
+    }),
+  ]
+})

source/braft-editor/example/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Demo</title>
+<style>
+html,body{
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: Helvetica;
+  background-color: #fff;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+#root{
+  position: relative;
+}
+.demo{
+  height: 100%;
+}
+.preview-button,
+.modal-button{
+  width: auto;
+  padding: 0 10px !important;
+  font-size: 14px !important;
+}
+</style>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>

source/braft-editor/example/index.jsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import BraftEditor, { EditorState } from '../dist'
+import { ContentUtils } from 'braft-utils'
+import '../dist/index.css'
+
+class Demo extends React.Component {
+
+  constructor(props) {
+
+    super(props)
+    this.state = {
+      editorState: EditorState.createFrom()
+    }
+    this.editorInstance = null
+
+  }
+
+  handleChange = (editorState) => {
+    this.setState({ editorState })
+  }
+
+  insertText = (text) => {
+    this.setState({
+        editorState: ContentUtils.insertText(this.state.editorState, text)
+    })
+  }
+
+  uploadFn = (param) => {
+
+    const xhr = new XMLHttpRequest
+    const fd = new FormData()
+
+    const successFn = () => {
+      param.success({
+        url: JSON.parse(xhr.responseText)[0].url,
+        meta: {
+          controls: true,
+          loop: true,
+          autoPlay: false,
+        }
+      })
+    }
+
+    const progressFn = (event) => {
+      param.progress(event.loaded / event.total * 100)
+    }
+
+    const errorFn = () => {
+      param.error({
+        msg: "unable to upload."
+      })
+    }
+
+    xhr.upload.addEventListener("progress", progressFn, false)
+    xhr.addEventListener("load", successFn, false)
+    xhr.addEventListener("error", errorFn, false)
+    xhr.addEventListener("abort", errorFn, false)
+
+    fd.append("file", param.file)
+    xhr.open("POST", "http://localhost:9090", true)
+    xhr.send(fd)
+
+  }
+
+  hooks = {
+    'change-block-type': console.log,
+    'insert-emoji': (fontSize) => {
+      return '123'
+    },
+    'insert-medias': console.log,
+    'exec-editor-command': console.log,
+    'select-medias': console.log,
+    'remove-medias': (medias) => {
+      return [medias[0]]
+    },
+    'deselect-medias': console.log,
+    'toggle-link': () => {
+      return {
+        href: 'http://www.baidu.com',
+        target: '_blank'
+      }
+    }
+  }
+
+  render() {
+
+    const controls = BraftEditor.defaultProps.controls.map(item => {
+      return item === 'bold' ? {
+        key: 'bold', // 使用key来指定控件类型
+        title: '加粗选中文字哦', // 自定义控件title
+        text: '点我加粗', // 使用自定义文案来代替默认图标(B)，此处也可传入jsx
+      } : item
+    })
+
+    const extendControls = [
+      {
+        key: 'insert-123',
+        type: 'button',
+        text: 'Insert 123',
+        onClick: () => {
+          this.insertText('123')
+        }
+      }
+    ]
+
+    return (
+      <div>
+        <div className="demo" id="demo">
+          <BraftEditor
+            hooks={this.hooks}
+            controls={controls}
+            extendControls={extendControls}
+            media={{
+              // uploadFn: this.uploadFn
+            }}
+            onChange={this.handleChange}
+            defaultValue={this.state.editorState}
+          />
+        </div>
+      </div>
+    )
+
+  }
+
+}
+
+ReactDOM.render(<Demo />, document.querySelector('#root'))

source/braft-editor/example/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "formidable": "^1.2.1"
+  }
+}

source/braft-editor/example/server/index.js

@@ -0,0 +1,107 @@
+const http = require('http')
+const fs = require('fs')
+const path = require('path')
+const url = require('url')
+const formidable = require('formidable')
+
+const mimeTypes = {
+  'jpeg': 'image/jpeg',
+  'jpg': 'image/jpeg',
+  'png': 'image/png',
+  'svg': 'image/svg',
+  'gif': 'image/gif',
+  'mp4': 'video/mp4',
+  'mp3': 'audio/mp3'
+}
+
+const port = 9090
+const fileSaveDir = path.join(__dirname, 'temp')
+
+const uploadServer = (req, res) => {
+
+  !fs.existsSync(fileSaveDir) && fs.mkdirSync(fileSaveDir)
+  let responseData = []
+
+  const form = new formidable.IncomingForm()
+  form.uploadDir = fileSaveDir
+  form.type = true
+  form.keepExtensions = true
+
+  form.parse(req, function(err, fields, files){
+
+    if(!err) {
+
+      Object.keys(files).forEach(function(key){
+
+        const file = files[key]
+        const filename = path.basename(file.path)
+
+        // 塞入响应数据中
+        responseData.push({
+          type: file.type,
+          name: filename,
+          url: 'http://localhost:' + port + '/temp/' + filename,
+          size: file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + 'MB' : ~~(file.size / 1024) + 'KB'
+        })
+
+      })
+    } else {
+      // console.warn(err)
+    }
+
+    res.setHeader('Access-Control-Allow-Origin', '*')
+    res.writeHead(200)
+    res.end(JSON.stringify(responseData))
+
+  })
+
+}
+
+const staticServer = (req, res) => {
+
+  var uri = url.parse(req.url).pathname
+  var filename = path.join(process.cwd(), unescape(uri))
+  var stats
+
+  try {
+    stats = fs.lstatSync(filename) // throws if path doesn't exist
+  } catch (e) {
+    res.writeHead(404, {'Content-Type': 'text/plain'})
+    res.write('404 Not Found\n')
+    res.end()
+    return
+  }
+
+  if (stats.isFile()) {
+    // path exists, is a file
+    var mimeType = mimeTypes[path.extname(filename).split('.').reverse()[0]]
+    res.writeHead(200, {'Content-Type': mimeType} )
+    var fileStream = fs.createReadStream(filename)
+    fileStream.pipe(res)
+  } else if (stats.isDirectory()) {
+    // path exists, is a directory
+    res.writeHead(200, {'Content-Type': 'text/plain'})
+    res.write('Index of '+uri+'\n')
+    res.write('TODO, show index?\n')
+    res.end()
+  } else {
+    // Symbolic link, other?
+    // TODO: follow symlinks?  security?
+    res.writeHead(500, {'Content-Type': 'text/plain'})
+    res.write('500 Internal server error\n')
+    res.end()
+  }
+
+}
+
+const server = http.createServer((req, res) => {
+
+  if (req.method.toLowerCase() === 'get') {
+    staticServer(req, res)
+  } else {
+    uploadServer(req, res)
+  }
+
+})
+
+server.listen(port)

source/braft-editor/example/yarn.lock

@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+formidable@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.2.1.tgz#70fb7ca0290ee6ff961090415f4b3df3d2082659"

source/braft-editor/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "braft-editor",
+  "version": "2.0.5",
+  "description": "Rich Text Editor Based On Draft.js",
+  "main": "dist/index.js",
+  "author": "Margox",
+  "scripts": {
+    "start": "webpack-dev-server --config ./build/webpack.development.js -d --history-api-fallback --no-inline --progress --colors",
+    "build": "rm -rf dist/ && NODE_ENV=production webpack --config ./build/webpack.production.js --progress --colors",
+    "lint": "node_modules/eslint/bin/eslint.js .",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": "https://github.com/margox/braft",
+  "keywords": [
+    "braft",
+    "draft",
+    "draft-js",
+    "rich",
+    "text",
+    "editor",
+    "rich-text-editor",
+    "wysiwyg"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^9.0.0",
+    "babel-loader": "^8.0.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "css-loader": "^0.28.11",
+    "eslint": "^5.4.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-loader": "^2.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^4.0.0",
+    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "extract-text-webpack-plugin": "next",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "next",
+    "node-sass": "^4.9.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-hot-loader": "^4.3.3",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.5",
+    "webpack-merge": "^4.1.3"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "braft-convert": "^2.0.2",
+    "braft-finder": "^0.0.9",
+    "braft-utils": "^0.0.16",
+    "draft-convert": "^2.0.0",
+    "draft-js": "^0.10.3",
+    "draftjs-utils": "^0.9.4"
+  },
+  "peerDependencies": {
+    "braft-convert": "^1.9.7",
+    "react": "^15.0.2|| ^16.0.0-rc || ^16.0.0",
+    "react-dom": "^15.0.2|| ^16.0.0-rc || ^16.0.0"
+  }
+}

source/braft-editor/src/assets/scss/_base.scss

@@ -0,0 +1,3 @@
+@import 'inc';
+@import 'icons';
+@import 'braft';

source/braft-editor/src/assets/scss/_braft.scss

@@ -0,0 +1,245 @@
+@import '~scssinc';
+
+.bf-content{
+  height: 500px;
+  overflow: auto;
+  font-size: 16px;
+  img{
+    user-select: none;
+  }
+  *{
+    line-height: initial;
+  }
+}
+
+.bf-container{
+  position: relative;
+  height: 100%;
+  padding: 0;
+
+  &.disabled{
+    pointer-events: none;
+    opacity: .7;
+    filter: grayscale(70%);
+  }
+
+  .input-group{
+    display: block;
+    input{
+      box-sizing: border-box;
+      width: 100%;
+      height: 36px;
+      padding: 0 15px;
+      font-size: 14px;
+    }
+  }
+
+  .pull-left{
+    float: left;
+  }
+  .pull-right{
+    float: right;
+  }
+
+  button{
+    &.ghost,
+    &.default,
+    &.primary{
+      height: 32px;
+      padding: 0 20px;
+      color: #fff;
+      font-size: 12px;
+    }
+    &.default{
+      background-color: rgba(#fff, .15);
+      border: none;
+      &:hover{
+        background-color: rgba(#fff, .1);
+      }
+    }
+    &.ghost{
+      background-color: transparent;
+      border: none;
+      box-shadow: inset 0 0 0 .5px rgba(#fff, .5);
+      &:hover{
+        box-shadow: inset 0 0 0 .5px rgba(#fff, .7);
+      }
+    }
+    &.primary{
+      background-color: $COLOR_ACTIVE;
+      border: none;
+      color: #fff;
+      &:hover{
+        background-color: $COLOR_ACTIVE - 20;
+      }
+    }
+  }
+  .public-DraftEditorPlaceholder-root{
+    top: 15px;
+    left: 15px;
+    font-size: 16px;
+    pointer-events: none;
+  }
+  .DraftEditor-editorContainer{
+    box-sizing: border-box;
+    border: none;
+  }
+  .DraftEditor-root,
+  .public-DraftEditor-content{
+    height: 100%;
+  }
+  .public-DraftEditor-content{
+    box-sizing: border-box;
+    padding: 15px;
+    word-wrap: break-word;
+    word-break: break-all;
+    .braft-link{
+      color: #4078c0;
+    }
+    blockquote{
+      margin: 0 0 10px 0;
+      padding: 15px 20px;
+      background-color: #f1f2f3;
+      border-left: solid 5px #ccc;
+      color: #666;
+      font-style: italic;
+    }
+    pre{
+      max-width: 100%;
+      max-height: 100%;
+      margin: 0 0 10px 0;
+      padding: 15px;
+      overflow: auto;
+      background-color: #f1f2f3;
+      border-radius: 3px;
+      color: #666;
+      font-family: monospace;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 16px;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      pre{
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+  .bfa-left {
+    text-align: left;
+    .public-DraftStyleDefault-ltr{
+      text-align: left;
+    }
+  }
+  .bfa-right {
+    text-align: right;
+    .public-DraftStyleDefault-ltr{
+      text-align: right;
+    }
+  }
+  .bfa-center {
+    text-align: center;
+    .public-DraftStyleDefault-ltr{
+      text-align: center;
+    }
+  }
+  .bfa-justify {
+    text-align: justify;
+    .public-DraftStyleDefault-ltr{
+      text-align: justify;
+    }
+  }
+  .bfa-left,
+  .bfa-right,
+  .bfa-center,
+  .bfa-justify{
+    & > div{
+      display: inline-block;
+    }
+  }
+  .bff-left{
+    position: relative;
+    z-index: 1;
+    float: left;
+    margin: 0 10px 0 0;
+  }
+  .bff-right{
+    position: relative;
+    z-index: 1;
+    float: right;
+    margin: 0 0 0 10px;
+  }
+
+  .bf-media{
+    position: relative;
+  }
+
+  .bf-image{
+    position: relative;
+    img{
+      display: inline-block;
+      max-width: 100%;
+      height: auto;
+      font-size: 0;
+      resize: both;
+      outline-offset: 1px;
+      &:hover{
+        outline: solid 1px $COLOR_ACTIVE;
+      }
+    }
+  }
+
+  .bf-media-toolbar{
+    position: absolute;
+    z-index: 3;
+    bottom: 15px;
+    left: 50%;
+    width: auto;
+    background-color: $COLOR_DARK;
+    border-radius: 2px;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    transform: translateX(-50%);
+    box-shadow: 0 5px 15px rgba(#000, .2);
+    user-select: none;
+    &::before,
+    .bf-media-toolbar-arrow{
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      display: block;
+      border: solid 5px transparent;
+      border-top-color: $COLOR_DARK;
+      content: '';
+      transform: translateX(-5px);
+    }
+    a{
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      color: rgba(#fff, .5);
+      font-family: 'braft-icons';
+      font-size: 18px;
+      font-weight: normal;
+      line-height: 40px;
+      text-align: center;
+      text-decoration: none;
+      text-transform: uppercase;
+      cursor: pointer;
+      &:hover{
+        color: #fff;
+      }
+      &:first-child{
+        border-radius: 2px 0 0 2px;
+      }
+      &:last-child{
+        border-radius: 0 2px 2px 0;
+      }
+      &.active{
+        color: $COLOR_ACTIVE;
+      }
+    }
+  }
+
+}

source/braft-editor/src/assets/scss/_config.scss

@@ -0,0 +1,4 @@
+$COLOR_GRAY: #6a6f7b;
+$COLOR_ACTIVE: #3498db;
+$COLOR_DANGER: #e74c3c;
+$COLOR_DARK: #21242a;

source/braft-editor/src/assets/scss/_icons.scss

@@ -0,0 +1,236 @@
+$eotPath: '../icons/icons.eot';
+$ttfPath: '../icons/icons.ttf';
+
+@font-face {
+  font-family: 'braft-icons';
+  src: url($eotPath);
+  src: url($ttfPath) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.bf-container,
+.bf-modal-root{
+
+  [class^="bfi-"], [class*=" bfi-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'braft-icons' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .bfi-format_clear:before {
+    content: "\e239";
+  }
+  .bfi-hr:before {
+    content: "\e925";
+  }
+  .bfi-colorize:before {
+    content: "\e3b8";
+  }
+  .bfi-crop_free:before {
+    content: "\e3c2";
+  }
+  .bfi-pause:before {
+    content: "\e034";
+  }
+  .bfi-play_arrow:before {
+    content: "\e037";
+  }
+  .bfi-bin:before {
+    content: "\e9ac";
+  }
+  .bfi-replay:before {
+    content: "\e042";
+  }
+  .bfi-tune:before {
+    content: "\e429";
+  }
+  .bfi-close:before {
+    content: "\e913";
+  }
+  .bfi-align-center:before {
+    content: "\e028";
+  }
+  .bfi-align-justify:before {
+    content: "\e026";
+  }
+  .bfi-align-left:before {
+    content: "\e027";
+  }
+  .bfi-align-right:before {
+    content: "\e029";
+  }
+  .bfi-image-right:before {
+    content: "\e914";
+  }
+  .bfi-image-left:before {
+    content: "\e91e";
+  }
+  .bfi-music:before {
+    content: "\e90e";
+  }
+  .bfi-camera:before {
+    content: "\e911";
+  }
+  .bfi-copy:before {
+    content: "\e92c";
+  }
+  .bfi-file-text:before {
+    content: "\e926";
+  }
+  .bfi-film:before {
+    content: "\e91c";
+  }
+  .bfi-github:before {
+    content: "\eab0";
+  }
+  .bfi-ltr:before {
+    content: "\ea74";
+  }
+  .bfi-page-break:before {
+    content: "\ea68";
+  }
+  .bfi-pagebreak:before {
+    content: "\ea6e";
+  }
+  .bfi-paint-format:before {
+    content: "\e90c";
+  }
+  .bfi-paste:before {
+    content: "\e92d";
+  }
+  .bfi-pilcrow:before {
+    content: "\ea73";
+  }
+  .bfi-pushpin:before {
+    content: "\e946";
+  }
+  .bfi-redo:before {
+    content: "\e968";
+  }
+  .bfi-rtl:before {
+    content: "\ea75";
+  }
+  .bfi-spinner:before {
+    content: "\e980";
+  }
+  .bfi-subscript:before {
+    content: "\ea6c";
+  }
+  .bfi-superscript:before {
+    content: "\ea6b";
+  }
+  .bfi-undo:before {
+    content: "\e967";
+  }
+  .bfi-media:before {
+    content: "\e90f";
+  }
+  .bfi-add:before {
+    content: "\e918";
+  }
+  .bfi-bold:before {
+    content: "\e904";
+  }
+  .bfi-code:before {
+    content: "\e903";
+  }
+  .bfi-done:before {
+    content: "\e912";
+  }
+  .bfi-drop-down:before {
+    content: "\e906";
+  }
+  .bfi-drop-up:before {
+    content: "\e909";
+  }
+  .bfi-emoji:before {
+    content: "\e91b";
+  }
+  .bfi-font-size:before {
+    content: "\e920";
+  }
+  .bfi-fullscreen:before {
+    content: "\e910";
+  }
+  .bfi-fullscreen-exit:before {
+    content: "\e90d";
+  }
+  .bfi-help:before {
+    content: "\e902";
+  }
+  .bfi-indent-decrease:before {
+    content: "\e92f";
+  }
+  .bfi-indent-increase:before {
+    content: "\e92e";
+  }
+  .bfi-info:before {
+    content: "\e901";
+  }
+  .bfi-italic:before {
+    content: "\e924";
+  }
+  .bfi-link:before {
+    content: "\e91a";
+  }
+  .bfi-link-off:before {
+    content: "\e919";
+  }
+  .bfi-list:before {
+    content: "\e923";
+  }
+  .bfi-list-numbered:before {
+    content: "\e922";
+  }
+  .bfi-menu:before {
+    content: "\e908";
+  }
+  .bfi-more-horiz:before {
+    content: "\e90b";
+  }
+  .bfi-more-vert:before {
+    content: "\e90a";
+  }
+  .bfi-not-disturb:before {
+    content: "\e907";
+  }
+  .bfi-print:before {
+    content: "\e915";
+  }
+  .bfi-quote:before {
+    content: "\e921";
+  }
+  .bfi-search:before {
+    content: "\e916";
+  }
+  .bfi-settingsx:before {
+    content: "\e917";
+  }
+  .bfi-share:before {
+    content: "\e905";
+  }
+  .bfi-share-square:before {
+    content: "\e900";
+  }
+  .bfi-strikethrough:before {
+    content: "\e91f";
+  }
+  .bfi-text-color .path1:before {
+    content: "\e930";
+    opacity: 0.36;
+  }
+  .bfi-text-color .path2:before {
+    content: "\e931";
+    margin-left: -1em;
+  }
+  .bfi-underlined:before {
+    content: "\e91d";
+  }
+}

source/braft-editor/src/assets/scss/_inc.scss

@@ -0,0 +1 @@
+@import 'config';

source/braft-editor/src/components/business/ControlBar/index.jsx

@@ -0,0 +1,341 @@
+import './style.scss'
+import React from 'react'
+import getEditorControls from 'configs/controls'
+import LinkEditor from 'components/business/LinkEditor'
+import HeadingPicker from 'components/business/Headings'
+import TextColorPicker from 'components/business/TextColor'
+import FontSizePicker from 'components/business/FontSize'
+import LineHeightPicker from 'components/business/LineHeight'
+import FontFamilyPicker from 'components/business/FontFamily'
+import TextAlign from 'components/business/TextAlign'
+import EmojiPicker from 'components/business/EmojiPicker'
+import LetterSpacingPicker from 'components/business/LetterSpacing'
+import TextIndentPicker from 'components/business/TextIndent'
+import DropDown from 'components/common/DropDown'
+import { ContentUtils } from 'braft-utils'
+import { showModal } from 'components/common/Modal'
+
+const commandHookMap = {
+  'inline-style': 'toggle-inline-style',
+  'block-type': 'change-block-type',
+  'editor-method': 'exec-editor-command'
+}
+
+export default class ControlBar extends React.Component {
+
+  mediaLibiraryModal = null
+  extendedModals = {}
+
+  componentDidUpdate () {
+
+    const { controls, language } = this.props
+
+    controls.forEach(item => {
+      if (item.type === 'modal') {
+        if (item.modal && item.modal.id && this.extendedModals[item.modal.id]) {
+          this.extendedModals[item.modal.id].update({ ...item.modal, language })
+        }
+      }
+    })
+
+  }
+
+  getControlItemClassName (data) {
+
+    let className = 'control-item button'
+    let { type, command } = data
+
+    if (type === 'inline-style' && ContentUtils.selectionHasInlineStyle(this.props.editorState, command)) {
+      className += ' active'
+    } else if (type === 'block-type' && ContentUtils.getSelectionBlockType(this.props.editorState) === command) {
+      className += ' active'
+    }
+
+    return className
+
+  }
+
+  applyControl (command, type) {
+
+    const hookReturns = this.props.hooks(commandHookMap[type] || type, command)(command)
+
+    if (hookReturns === false) {
+      return false
+    }
+
+    if (typeof hookReturns === 'string') {
+      command = hookReturns
+    }
+
+    if (type === 'inline-style') {
+      this.props.editor.setValue(ContentUtils.toggleSelectionInlineStyle(this.props.editorState, command))
+    } else if (type === 'block-type') {
+      this.props.editor.setValue(ContentUtils.toggleSelectionBlockType(this.props.editorState, command))
+    } else if (type === 'editor-method') {
+      this.props.editor[command] && this.props.editor[command]()
+    }
+
+    this.props.editor.requestFocus()
+
+  }
+
+  openBraftFinder = () => {
+
+    if (!this.props.braftFinder || !this.props.braftFinder.ReactComponent) {
+      return false
+    }
+
+    if (this.props.hooks('open-braft-finder')() === false) {
+      return false
+    }
+
+    const mediaProps = this.props.media
+    const MediaLibrary = this.props.braftFinder.ReactComponent
+
+    this.mediaLibiraryModal = showModal({
+      title: this.props.language.controls.mediaLibirary,
+      language: this.props.language,
+      width: 640,
+      showFooter: false,
+      children: (
+        <MediaLibrary
+          onCancel={this.closeBraftFinder}
+          onInsert={this.insertMedias}
+          onChange={mediaProps.onChange}
+          externals={mediaProps.externals}
+          onBeforeSelect={this.bindBraftFinderHook('select-medias')}
+          onBeforeDeselect={this.bindBraftFinderHook('deselect-medias')}
+          onBeforeRemove={this.bindBraftFinderHook('remove-medias')}
+          onBeforeInsert={this.bindBraftFinderHook('insert-medias')}
+          onFileSelect={this.bindBraftFinderHook('select-files')}
+        />
+      )
+    })
+
+  }
+
+  bindBraftFinderHook = (hookName) => (...params) => {
+    return this.props.hooks(hookName, params[0])(...params)
+  }
+
+  insertMedias = (medias) => {
+
+    this.props.editor.setValue(ContentUtils.insertMedias(this.props.editorState, medias))
+    this.props.editor.requestFocus()
+    this.props.media.onInsert && this.props.media.onInsert(medias)
+    this.closeBraftFinder()
+
+  }
+
+  closeBraftFinder = () => {
+
+    this.props.media.onCancel && this.props.media.onCancel()
+    this.mediaLibiraryModal && this.mediaLibiraryModal.close()
+
+  }
+
+  render() {
+
+    const { editor, editorState, controls, media, extendControls, language, hooks, colors, fontSizes, fontFamilies, emojis, containerNode, lineHeights, letterSpacings, textAligns, textBackgroundColor, textIndents} = this.props
+    const currentBlockType = ContentUtils.getSelectionBlockType(editorState)
+    const editorControls = getEditorControls(language)
+    const commonProps = { editor, editorState, language, containerNode, hooks }
+    const renderedControls = []
+
+    return (
+      <div className='bf-controlbar'>
+        {
+          [
+            ...controls,
+            ...extendControls
+          ].map((item, index) => {
+            let itemKey = typeof item === 'string' ? item : item.key
+            if (typeof itemKey !== 'string') {
+              return null
+            }
+            if (renderedControls.indexOf(itemKey) > -1) {
+              return null
+            }
+            if (itemKey.toLowerCase() === 'separator') {
+              return <span key={index} className='separator-line'></span>
+            }
+            let controlItem = editorControls.find((subItem) => {
+              return subItem.key.toLowerCase() === itemKey.toLowerCase()
+            })
+            if (typeof item !== 'string') {
+              controlItem = { ...controlItem, ...item }
+            }
+            if (!controlItem) {
+              return null
+            }
+            renderedControls.push(itemKey)
+            if (controlItem.type === 'headings') {
+              return <HeadingPicker
+                key={index}
+                current={currentBlockType}
+                onChange={(command) => this.applyControl(command, 'block-type')}
+                {...commonProps}
+              />
+            } else if (controlItem.type === 'text-color') {
+              return <TextColorPicker
+                key={index}
+                colors={colors}
+                enableBackgroundColor={textBackgroundColor}
+                {...commonProps}
+              />
+            } else if (controlItem.type === 'font-size') {
+              return <FontSizePicker
+                key={index}
+                fontSizes={fontSizes}
+                defaultCaption={controlItem.title}
+                {...commonProps}
+              />
+            } else if (controlItem.type === 'line-height') {
+              return <LineHeightPicker
+                key={index}
+                lineHeights={lineHeights}
+                defaultCaption={controlItem.title}
+                {...commonProps}
+              />
+            } else if (controlItem.type === 'letter-spacing') {
+              return <LetterSpacingPicker
+                key={index}
+                letterSpacings={letterSpacings}
+                defaultCaption={controlItem.title}
+                {...commonProps}
+              />
+            } else if (controlItem.type === 'text-indent') {
+              return <TextIndentPicker
+                key={index}
+                textIndents={textIndents}
+                defaultCaption={controlItem.title}
+                {...commonProps}
+              />
+            } else if (controlItem.type === 'font-family') {
+              return <FontFamilyPicker
+                key={index}
+                fontFamilies={fontFamilies}
+                defaultCaption={controlItem.title}
+                {...commonProps}
+              />
+            } else if (controlItem.type === 'emoji') {
+              return <EmojiPicker
+                key={index}
+                emojis={emojis}
+                defaultCaption={controlItem.text}
+                {...commonProps}
+              />
+            } else if (controlItem.type === 'link') {
+              return <LinkEditor
+                key={index}
+                {...commonProps}
+              />
+            } else if (controlItem.type === 'text-align') {
+              return (
+                <TextAlign
+                  key={index}
+                  textAligns={textAligns}
+                  {...commonProps}
+                />
+              )
+            } else if (controlItem.type === 'media') {
+              if (!media.image && !media.video && !media.audio) {
+                return null
+              }
+              return (
+                <button
+                  type='button'
+                  key={index}
+                  data-title={controlItem.title}
+                  className='control-item media button'
+                  onClick={this.openBraftFinder}
+                >
+                  {controlItem.text}
+                </button>
+              )
+            } else if (controlItem.type === 'dropdown') {
+              return (
+                <DropDown
+                  key={index}
+                  className={'control-item extend-control-item dropdown ' + controlItem.className}
+                  caption={controlItem.text}
+                  htmlCaption={controlItem.html}
+                  showArrow={controlItem.showArrow}
+                  containerNode={controlItem.containerNode}
+                  title={controlItem.title}
+                  arrowActive={controlItem.arrowActive}
+                  autoHide={controlItem.autoHide}
+                  disabled={controlItem.disabled}
+                  ref={controlItem.ref}
+                >
+                  {controlItem.component}
+                </DropDown>
+              )
+            } else if (controlItem.type === 'modal') {
+              return (
+                <button
+                  type='button'
+                  key={index}
+                  data-title={controlItem.title}
+                  className={'control-item extend-control-item button ' + controlItem.className}
+                  dangerouslySetInnerHTML={controlItem.html ? { __html: controlItem.html } : null}
+                  onClick={(event) => {
+                    if (controlItem.modal && controlItem.modal.id) {
+                      if (this.extendedModals[controlItem.modal.id]) {
+                        this.extendedModals[controlItem.modal.id].active = true
+                        this.extendedModals[controlItem.modal.id].update({ ...controlItem.modal, language })
+                      } else {
+                        this.extendedModals[controlItem.modal.id] = showModal({ ...controlItem.modal, language })
+                        controlItem.modal.onCreate && controlItem.modal.onCreate(this.extendedModals[controlItem.modal.id])
+                      }
+                    }
+                    controlItem.onClick && controlItem.onClick(event)
+                  }}
+                >
+                  {!controlItem.html ? controlItem.text : null}
+                </button>
+              )
+            } else if (controlItem.type === 'component') {
+              return (
+                <div
+                  key={index}
+                  className={'control-item component-wrapper ' + controlItem.className}
+                >{controlItem.component}</div>
+              )
+            } else if (controlItem.type === 'button') {
+              return (
+                <button
+                  type='button'
+                  key={index}
+                  data-title={controlItem.title}
+                  className={'control-item button ' + controlItem.className}
+                  dangerouslySetInnerHTML={controlItem.html ? { __html: controlItem.html } : null}
+                  onClick={(event) => controlItem.onClick && controlItem.onClick(event)}
+                >
+                  {!controlItem.html ? controlItem.text : null}
+                </button>
+              )
+            } else {
+              return (
+                <button
+                  type='button'
+                  key={index}
+                  data-title={controlItem.title}
+                  className={this.getControlItemClassName({
+                    type: controlItem.type,
+                    command: controlItem.command
+                  })}
+                  onClick={() => this.applyControl(controlItem.command, controlItem.type)}
+                >
+                  {controlItem.text}
+                </button>
+              )
+            }
+          })
+        }
+      </div>
+    )
+
+  }
+
+}

source/braft-editor/src/components/business/ControlBar/style.scss

@@ -0,0 +1,151 @@
+@import '~scssinc';
+
+.bf-controlbar{
+  margin: 0;
+  padding: 0 5px;
+  box-shadow: inset 0 -1px 0 0 rgba(#000, .2);
+  &::after{
+    display: block;
+    content: '';
+    clear: both;
+  }
+
+  button{
+    padding: 0;
+    outline: none;
+    &[disabled]{
+      pointer-events: none;
+      opacity: .3;
+    }
+  }
+
+  [data-title] {
+    position: relative;
+    &::before,
+    &::after{
+      position: absolute;
+      z-index: 10;
+      top: 100%;
+      left: 50%;
+      pointer-events: none;
+      opacity: 0;
+      transform: translateX(-50%) translateY(-5px);
+      transition: opacity .3s, transform .3s;
+    }
+    &::before{
+      margin-top: 3px;
+      border: 5px solid transparent;
+      border-bottom-color: $COLOR_DARK;
+      content: '';
+    }
+    &::after{
+      margin-top: 12px;
+      padding: 5px;
+      background-color: $COLOR_DARK;
+      border-radius: 2px;
+      box-shadow: 0 5px 15px rgba(#000, .2);
+      color: #fff;
+      font-size: 12px;
+      line-height: 16px;
+      white-space: nowrap;
+      content: attr(data-title);
+    }
+    &:hover{
+      &::before,
+      &::after{
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+    }
+  }
+
+  input {
+    outline: none;
+  }
+
+  .separator-line{
+    display: block;
+    float: left;
+    height: 26px;
+    width: 1px;
+    margin: 10px;
+    box-shadow: inset -1px 0 0 0 rgba(#000, .1);
+    &+.control-item-group,
+    &+.control-item{
+      margin-left: 0;
+    }
+    &+.separator-line,
+    &.last-child,
+    &.first-child{
+      display: none;
+    }
+  }
+
+  .control-item-group{
+    float: left;
+    height: 36px;
+    margin: 5px 0 5px 3px;
+    &:first-child{
+      margin-left: 0;
+    }
+    & > .control-item{
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  .dropdown-handler{
+    border-radius: 2px;
+  }
+
+  .control-item{
+    display: block;
+    float: left;
+    height: 36px;
+    margin: 5px 0 5px 3px;
+    border-radius: 2px;
+    cursor: pointer;
+    &.component-wrapper{
+      cursor: default;
+    }
+    &:first-child{
+      margin-left: 0;
+    }
+    &.button{
+      box-sizing: border-box;
+      min-width: 36px;
+      padding: 0 8px;
+      background-color: transparent;
+      border: none;
+      color: $COLOR_GRAY;
+      font-size: 14px;
+      &:hover{
+        background-color: rgba(#000, .05);
+      }
+      &.active{
+        color: $COLOR_ACTIVE;
+      }
+      i::before{
+        display: block;
+        height: 36px;
+        font-size: 18px;
+        line-height: 36px;
+      }
+      .bfi-undo,
+      .bfi-redo{
+        &::before{
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .dropdown{
+    .control-item{
+      width: 100%;
+      float: none;
+      margin: 0;
+    }
+  }
+
+}

source/braft-editor/src/components/business/EmojiPicker/index.jsx

@@ -0,0 +1,50 @@
+import './style.scss'
+import React from 'react'
+import DropDown from 'components/common/DropDown'
+import { ContentUtils } from 'braft-utils'
+
+const insertEmoji = (event, props) => {
+
+  let emoji = event.currentTarget.dataset.emoji
+  const hookReturns = props.hooks('insert-emoji', emoji)(emoji)
+
+  if (hookReturns === false) {
+    return false
+  }
+
+  if (typeof hookReturns === 'string') {
+    emoji = hookReturns
+  }
+
+  props.editor.setValue(ContentUtils.insertText(props.editorState, emoji))
+  props.editor.requestFocus()
+
+}
+
+export default (props) => {
+
+  return (
+    <DropDown
+      caption={props.defaultCaption}
+      showArrow={false}
+      containerNode={props.containerNode}
+      title={props.language.controls.emoji}
+      className={'control-item dropdown bf-emoji-dropdown'}
+    >
+      <div className='bf-emojis-wrap'>
+        <ul className='bf-emojis'>
+          {props.emojis.map((item, index) => {
+            return (
+              <li
+                key={index}
+                data-emoji={item}
+                onClick={(event) => insertEmoji(event, props)}
+              >{item}</li>
+            )
+          })}
+        </ul>
+      </div>
+    </DropDown>
+  )
+
+}

source/braft-editor/src/components/business/EmojiPicker/style.scss

@@ -0,0 +1,56 @@
+@import '~scssinc';
+
+.bf-emojis-wrap{
+  position: relative;
+  width: 210px;
+  height: 220px;
+  overflow: hidden;
+  &::before,
+  &::after{
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    left: 0;
+    height: 30px;
+    border-radius: 2px;
+    content: '';
+    pointer-events: none;
+  }
+  &::before{
+    top: 0;
+    background-image: linear-gradient(to top, rgba($COLOR_DARK, 0), rgba($COLOR_DARK, 1));
+  }
+  &::after{
+    bottom: 0;
+    background-image: linear-gradient(rgba($COLOR_DARK, 0), rgba($COLOR_DARK, 1));
+  }
+}
+.bf-emojis{
+  box-sizing: content-box;
+  width: 200px;
+  height: 195px;
+  list-style: none;
+  margin: 0;
+  padding: 15px 15px 20px 15px;
+  overflow: auto;
+  li{
+    display: block;
+    float: left;
+    width: 30px;
+    height: 30px;
+    margin: 0;
+    padding: 0;
+    color: #fff;
+    border-radius: 2px;
+    font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    transition: transform .2s;
+    &:hover{
+      transform: scale(1.5);
+    }
+  }
+}

source/braft-editor/src/components/business/FontFamily/index.jsx

@@ -0,0 +1,63 @@
+import './style.scss'
+import React from 'react'
+import DropDown from 'components/common/DropDown'
+import { ContentUtils } from 'braft-utils'
+
+const toggleFontFamily = (event, props) => {
+
+  let fontFamilyName = event.currentTarget.dataset.name
+  const hookReturns = props.hooks('toggle-font-family', fontFamilyName)(fontFamilyName, props.fontFamilies)
+
+  if (hookReturns === false) {
+    return false
+  }
+
+  if (typeof hookReturns === 'string') {
+    fontFamilyName = hookReturns
+  }
+
+  props.editor.setValue(ContentUtils.toggleSelectionFontFamily(props.editorState, fontFamilyName, props.fontFamilies))
+  props.editor.requestFocus()
+
+}
+
+export default (props) => {
+
+  let caption = null
+  let currentIndex = null
+
+  props.fontFamilies.find((item, index) => {
+    if (ContentUtils.selectionHasInlineStyle(props.editorState, 'FONTFAMILY-' + item.name)) {
+      caption = item.name
+      currentIndex = index
+      return true
+    }
+    return false
+  })
+
+  return (
+    <DropDown
+      caption={caption || props.defaultCaption}
+      containerNode={props.containerNode}
+      title={props.language.controls.fontFamily}
+      arrowActive={currentIndex === 0}
+      className={'control-item dropdown font-family-dropdown'}
+    >
+      <ul className='menu'>
+        {props.fontFamilies.map((item, index) => {
+          return (
+            <li
+              key={index}
+              className={'menu-item ' + (index === currentIndex ? 'active' : '')}
+              data-name={item.name}
+              onClick={(event) => toggleFontFamily(event, props)}
+            >
+              <span style={{fontFamily: item.family}}>{item.name}</span>
+            </li>
+          )
+        })}
+      </ul>
+    </DropDown>
+  )
+
+}

source/braft-editor/src/components/business/FontFamily/style.scss

@@ -0,0 +1,9 @@
+.font-family-dropdown{
+  min-width: 120px;
+  .dropdown-content{
+    width: 180px;
+  }
+  .menu-item{
+    padding: 12px 15px;
+  }
+}

source/braft-editor/src/components/business/FontSize/index.jsx

@@ -0,0 +1,60 @@
+import './style.scss'
+import React from 'react'
+import DropDown from 'components/common/DropDown'
+import { ContentUtils } from 'braft-utils'
+
+const toggleFontSize = (event, props) => {
+
+  let fontSize = event.currentTarget.dataset.size
+  const hookReturns = props.hooks('toggle-font-size', fontSize)(fontSize)
+
+  if (hookReturns === false) {
+    return false
+  }
+
+  if (!isNaN(fontSize)) {
+    fontSize = hookReturns
+  }
+
+  props.editor.setValue(ContentUtils.toggleSelectionFontSize(props.editorState, fontSize, props.fontSizes))
+  props.editor.requestFocus()
+
+}
+
+export default (props) => {
+
+  let caption = null
+  let currentFontSize = null
+
+  props.fontSizes.find((item) => {
+    if (ContentUtils.selectionHasInlineStyle(props.editorState, 'FONTSIZE-' + item)) {
+      caption = item + 'px'
+      currentFontSize = item
+      return true
+    }
+    return false
+  })
+
+  return (
+    <DropDown
+      caption={caption || props.defaultCaption}
+      containerNode={props.containerNode}
+      title={props.language.controls.fontSize}
+      className={'control-item dropdown bf-font-size-dropdown'}
+    >
+      <ul className='bf-font-sizes'>
+        {props.fontSizes.map((item, index) => {
+          return (
+            <li
+              key={index}
+              className={item === currentFontSize ? 'active' : null}
+              data-size={item}
+              onClick={(event) => toggleFontSize(event, props)}
+            >{item + 'px'}</li>
+          )
+        })}
+      </ul>
+    </DropDown>
+  )
+
+}

source/braft-editor/src/components/business/FontSize/style.scss

@@ -0,0 +1,34 @@
+@import '~scssinc';
+
+.bf-font-size-dropdown{
+  min-width: 95px;
+}
+.bf-font-sizes{
+  box-sizing: content-box;
+  width: 210px;
+  list-style: none;
+  margin: 0;
+  padding: 5px;
+  overflow: hidden;
+  li{
+    display: block;
+    float: left;
+    width: 60px;
+    height: 30px;
+    background-color: rgba(#fff, .1);
+    border-radius: 2px;
+    margin: 5px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 30px;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+    &:hover{
+      background-color: rgba(#fff, .2);
+    }
+    &.active{
+      background-color: $COLOR_ACTIVE;
+    }
+  }
+}

source/braft-editor/src/components/business/Headings/index.jsx

@@ -0,0 +1,39 @@
+import './style.scss'
+import React from 'react'
+import { getHeadings } from 'configs/maps'
+import DropDown from 'components/common/DropDown'
+
+export default (props) => {
+
+  const headings = getHeadings(props.language)
+  const currentHeadingIndex = headings.findIndex((item) => item.command === props.current)
+  const caption = headings[currentHeadingIndex] ? headings[currentHeadingIndex].title : props.language.controls.normal
+
+  return (
+    <DropDown
+      caption={caption}
+      containerNode={props.containerNode}
+      title={props.language.controls.headings}
+      arrowActive={currentHeadingIndex === 0}
+      className={'control-item dropdown headings-dropdown'}
+    >
+      <ul className='menu'>
+        {
+          headings.map((item, index) => {
+            let isActive = props.current === item.command
+            return (
+              <li
+                key={index}
+                className={'menu-item' + (isActive ? ' active' : '')}
+                onClick={() => props.onChange(item.command, item.type)}
+              >
+                {item.text}
+              </li>
+            )
+          })
+        }
+      </ul>
+    </DropDown>
+  )
+
+}

source/braft-editor/src/components/business/Headings/style.scss

@@ -0,0 +1,35 @@
+.headings-dropdown{
+  min-width: 110px;
+  .menu{
+    width: 200px;
+    overflow: hidden;
+    .menu-item {
+      padding: 15px 20px;
+      text-align: left;
+      line-height: initial;
+      h1,h2,h3,h4,h5,h6{
+        margin: 0;
+        padding: 0;
+        color: inherit;
+      }
+      h1{
+        font-size: 28px;
+      }
+      h2{
+        font-size: 24px;
+      }
+      h3{
+        font-size: 20px;
+      }
+      h4{
+        font-size: 16px;
+      }
+      h5{
+        font-size: 14px;
+      }
+      h6{
+        font-size: 12px;
+      }
+    }
+  }
+}

source/braft-editor/src/components/business/LetterSpacing/index.jsx

@@ -0,0 +1,60 @@
+import './style.scss'
+import React from 'react'
+import DropDown from 'components/common/DropDown'
+import { ContentUtils } from 'braft-utils'
+
+const toggleLetterSpacing = (event, props) => {
+
+  let letterSpacing = event.currentTarget.dataset.size
+  const hookReturns = props.hooks('toggle-letter-spacing', letterSpacing)(letterSpacing)
+
+  if (hookReturns === false) {
+    return false
+  }
+
+  if (!isNaN(hookReturns)) {
+    letterSpacing = hookReturns
+  }
+
+  props.editor.setValue(ContentUtils.toggleSelectionLetterSpacing(props.editorState, letterSpacing, props.letterSpacings))
+  props.editor.requestFocus()
+
+}
+
+export default (props) => {
+
+  let caption = null
+  let currentLetterSpacing = null
+
+  props.letterSpacings.find((item) => {
+    if (ContentUtils.selectionHasInlineStyle(props.editorState, 'LETTERSPACING-' + item)) {
+      caption = item
+      currentLetterSpacing = item
+      return true
+    }
+    return false
+  })
+
+  return (
+    <DropDown
+      caption={caption || props.defaultCaption}
+      containerNode={props.containerNode}
+      title={props.language.controls.letterSpacing}
+      className={'control-item dropdown bf-letter-spacing-dropdown'}
+    >
+      <ul className='bf-letter-spacings'>
+        {props.letterSpacings.map((item, index) => {
+          return (
+            <li
+              key={index}
+              className={item === currentLetterSpacing ? 'active' : null}
+              data-size={item}
+              onClick={(event) => toggleLetterSpacing(event, props)}
+            >{item}</li>
+          )
+        })}
+      </ul>
+    </DropDown>
+  )
+
+}

source/braft-editor/src/components/business/LetterSpacing/style.scss

@@ -0,0 +1,34 @@
+@import '~scssinc';
+
+.bf-letter-spacing-dropdown{
+  min-width: 95px;
+}
+.bf-letter-spacings{
+  box-sizing: content-box;
+  width: 210px;
+  list-style: none;
+  margin: 0;
+  padding: 5px;
+  overflow: hidden;
+  li{
+    display: block;
+    float: left;
+    width: 60px;
+    height: 30px;
+    background-color: rgba(#fff, .1);
+    border-radius: 2px;
+    margin: 5px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 30px;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+    &:hover{
+      background-color: rgba(#fff, .2);
+    }
+    &.active{
+      background-color: $COLOR_ACTIVE;
+    }
+  }
+}

source/braft-editor/src/components/business/LineHeight/index.jsx

@@ -0,0 +1,60 @@
+import './style.scss'
+import React from 'react'
+import DropDown from 'components/common/DropDown'
+import { ContentUtils } from 'braft-utils'
+
+const toggleLineHeight = (event, props) => {
+
+  let lineHeight = event.currentTarget.dataset.size
+  const hookReturns = props.hooks('toggle-line-height', lineHeight)(lineHeight)
+
+  if (hookReturns === false) {
+    return false
+  }
+
+  if (!isNaN(hookReturns)) {
+    lineHeight = hookReturns
+  }
+
+  props.editor.setValue(ContentUtils.toggleSelectionLineHeight(props.editorState, lineHeight, props.lineHeights))
+  props.editor.requestFocus()
+
+}
+
+export default (props) => {
+
+  let caption = null
+  let currentLineHeight = null
+
+  props.lineHeights.find((item) => {
+    if (ContentUtils.selectionHasInlineStyle(props.editorState, 'LINEHEIGHT-' + item)) {
+      caption = item
+      currentLineHeight = item
+      return true
+    }
+    return false
+  })
+
+  return (
+    <DropDown
+      caption={caption || props.defaultCaption}
+      containerNode={props.containerNode}
+      title={props.language.controls.lineHeight}
+      className={'control-item dropdown bf-line-height-dropdown'}
+    >
+      <ul className='bf-line-heights'>
+        {props.lineHeights.map((item, index) => {
+          return (
+            <li
+              key={index}
+              className={item === currentLineHeight ? 'active' : null}
+              data-size={item}
+              onClick={(event) => toggleLineHeight(event, props)}
+            >{item}</li>
+          )
+        })}
+      </ul>
+    </DropDown>
+  )
+
+}

source/braft-editor/src/components/business/LineHeight/style.scss

@@ -0,0 +1,34 @@
+@import '~scssinc';
+
+.bf-line-height-dropdown{
+  min-width: 95px;
+}
+.bf-line-heights{
+  box-sizing: content-box;
+  width: 210px;
+  list-style: none;
+  margin: 0;
+  padding: 5px;
+  overflow: hidden;
+  li{
+    display: block;
+    float: left;
+    width: 60px;
+    height: 30px;
+    background-color: rgba(#fff, .1);
+    border-radius: 2px;
+    margin: 5px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 30px;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+    &:hover{
+      background-color: rgba(#fff, .2);
+    }
+    &.active{
+      background-color: $COLOR_ACTIVE;
+    }
+  }
+}

source/braft-editor/src/components/business/LinkEditor/index.jsx

@@ -0,0 +1,136 @@
+import './style.scss'
+import React from 'react'
+import Switch from 'components/common/Switch'
+import DropDown from 'components/common/DropDown'
+import { ContentUtils } from 'braft-utils'
+
+export default class LinkEditor extends React.Component {
+
+  state = {
+    href: '',
+    target: ''
+  }
+
+  dropDownComponent = null
+
+  componentWillReceiveProps (next) {
+
+    const { href, target } = ContentUtils.getSelectionEntityData(next.editorState, 'LINK')
+    this.setState({
+      href: href || '',
+      target: target || ''
+    })
+
+  }
+
+  render () {
+
+    const { href, target } = this.state
+    const caption = <i className='bfi-link'></i>
+    const textSelected = !ContentUtils.isSelectionCollapsed(this.props.editorState) && ContentUtils.getSelectionBlockType(this.props.editorState) !== 'atomic'
+
+    return (
+      <div className='control-item-group'>
+        <DropDown
+          caption={caption}
+          title={this.props.language.controls.link}
+          autoHide={false}
+          containerNode={this.props.containerNode}
+          showArrow={false}
+          disabled={!textSelected}
+          ref={(instance) => this.dropDownComponent = instance}
+          className={'control-item dropdown link-editor-dropdown'}
+        >
+          <div className='bf-link-editor'>
+            <div className='input-group'>
+              <input
+                type='text'
+                value={href}
+                spellCheck={false}
+                placeholder={this.props.language.linkEditor.inputPlaceHolder}
+                onKeyDown={this.handeKeyDown}
+                onChange={this.inputLink}
+              />
+            </div>
+            <div className='switch-group'>
+              <Switch
+                active={target === '_blank'}
+                onClick={this.setTarget}
+              />
+              <label>{this.props.language.linkEditor.openInNewWindow}</label>
+            </div>
+            <div className='buttons'>
+              <a onClick={this.handleUnlink} className='primary pull-left' href='javascript:void(0);'>
+                <i className='bfi-close'></i>
+                <span>{this.props.language.linkEditor.removeLink}</span>
+              </a>
+              <button type='button' onClick={this.handleConfirm} className='primary pull-right'>{this.props.language.base.confirm}</button>
+              <button type='button' onClick={this.handleCancel} className='default pull-right'>{this.props.language.base.cancel}</button>
+            </div>
+          </div>
+        </DropDown>
+        <button
+          type='button'
+          data-title={this.props.language.controls.unlink}
+          className='control-item button'
+          onClick={this.handleUnlink}
+          disabled={!textSelected || !href}
+        >
+          <i className='bfi-link-off'></i>
+        </button>
+      </div>
+    )
+
+  }
+
+  handeKeyDown = (e) => {
+    if (e.keyCode === 13) {
+      this.handleConfirm()
+      e.preventDefault()
+      return false
+    }
+  }
+
+  inputLink = (e) => {
+    this.setState({
+      href: e.currentTarget.value
+    })
+  }
+
+  setTarget = () => {
+    this.setState({
+      target: this.state.target === '_blank' ? '' : '_blank'
+    })
+  }
+
+  handleCancel = () => {
+    this.dropDownComponent.hide()
+  }
+
+  handleUnlink = () => {
+    this.dropDownComponent.hide()
+    this.props.editor.setValue(ContentUtils.toggleSelectionLink(this.props.editorState, false))
+  }
+
+  handleConfirm = () => {
+
+    let { href, target } = this.state
+    const hookReturns = this.props.hooks('toggle-link', { href, target })({ href, target })
+
+    this.dropDownComponent.hide()
+    this.props.editor.requestFocus()
+
+    if (hookReturns === false) {
+      return false
+    }
+
+    if (hookReturns) {
+      typeof hookReturns.href === 'string' && (href = hookReturns.href)
+      typeof hookReturns.target === 'string' && (target = hookReturns.target)
+    }
+
+    this.props.editor.setValue(ContentUtils.toggleSelectionLink(this.props.editorState, href, target))
+
+  }
+
+}

source/braft-editor/src/components/business/LinkEditor/style.scss

@@ -0,0 +1,70 @@
+@import '~scssinc';
+
+.bf-link-editor{
+  width: 360px;
+  padding-top: 25px;
+  .input-group{
+    margin: 0 15px;
+    input{
+      background-color: rgba(#fff, .07);
+      border: none;
+      border-radius: 2px;
+      box-shadow: inset 0 0 0 1px rgba(#fff, .1);
+      color: #fff;
+      font-weight: bold;
+      &:hover{
+        box-shadow: inset 0 0 0 1px rgba($COLOR_ACTIVE, .5);
+      }
+      &:focus{
+        box-shadow: inset 0 0 0 1px rgba($COLOR_ACTIVE, 1);
+      }
+    }
+  }
+
+  .switch-group{
+    height: 20px;
+    margin: 15px;
+    .bf-switch{
+      float: left;
+    }
+    label{
+      float: left;
+      margin-left: 15px;
+      color: #999;
+      font-size: 12px;
+      line-height: 20px;      
+    }
+  }
+
+  .buttons{
+    box-sizing: content-box;
+    height: 32px;
+    margin-top: 20px;
+    padding: 15px;
+    overflow: hidden;
+    box-shadow: inset 0 1px 0 0 rgba(#fff, .1);
+    a{
+      color: #999;
+      font-size: 12px;
+      line-height: 32px;
+      &:hover{
+        color: $COLOR_DANGER;
+      }
+      i{
+        margin-right: 5px;
+        font-size: 16px;
+      }
+      i, span{
+        display: block;
+        float: left;
+        line-height: 32px;
+      }
+    }
+    button{
+      margin-left: 10px;
+      border-radius: 2px;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+}

source/braft-editor/src/components/business/TextAlign/index.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { ContentUtils } from 'braft-utils'
+
+export default class TextAlign extends React.Component {
+
+  state = {
+    currentAlignment: undefined
+  }
+
+  componentWillReceiveProps (next) {
+    this.setState({
+      currentAlignment: ContentUtils.getSelectionBlockData(next.editorState, 'textAlign')
+    })
+  }
+
+  setAlignment = (event) => {
+
+    let { alignment } = event.currentTarget.dataset
+    const hookReturns = this.props.hooks('toggle-text-alignment', alignment)(alignment)
+
+    if (this.props.textAligns.indexOf(hookReturns) > -1) {
+      alignment = hookReturns
+    }
+
+    this.props.editor.setValue(ContentUtils.toggleSelectionAlignment(this.props.editorState, alignment))
+    this.props.editor.requestFocus()
+
+  }
+
+  render () {
+
+    const textAlignmentTitles = [
+      this.props.language.controls.alignLeft,
+      this.props.language.controls.alignCenter,
+      this.props.language.controls.alignRight,
+      this.props.language.controls.alignJustify
+    ]
+
+    return (
+      <div className='control-item-group'>
+        {
+          this.props.textAligns.map((item, index) => {
+            return (
+              <button
+                type='button'
+                key={index}
+                data-title={textAlignmentTitles[index]}
+                data-alignment={item}
+                className={'control-item button ' + (item === this.state.currentAlignment ? 'active' : null)}
+                onClick={this.setAlignment}
+              >
+                <i className={'bfi-align-' + item}></i>
+              </button>
+            )
+          })
+        }
+      </div>
+    )
+
+  }
+
+}

source/braft-editor/src/components/business/TextColor/index.jsx

@@ -0,0 +1,114 @@
+import './style.scss'
+import React from 'react'
+import DropDown from 'components/common/DropDown'
+import ColorPicker from 'components/common/ColorPicker'
+import { BaseUtils, ContentUtils } from 'braft-utils'
+
+export default class TextColor extends React.Component {
+
+  state = {
+    colorType: 'color'
+  }
+
+  dropDownComponentId = 'BRAFT-DROPDOWN-' + BaseUtils.UniqueIndex()
+
+  render () {
+
+    let captionStyle = {}
+    let currentColor = null
+    let { colorType } = this.state
+
+    this.props.colors.forEach((color) => {
+      let color_id = color.replace('#', '')
+      if (ContentUtils.selectionHasInlineStyle(this.props.editorState, 'COLOR-' + color_id)) {
+        captionStyle.color = color
+        colorType === 'color' && (currentColor = color)
+      }
+
+      if (ContentUtils.selectionHasInlineStyle(this.props.editorState, 'BGCOLOR-' + color_id)) {
+        captionStyle.backgroundColor = color
+        colorType === 'background-color' && (currentColor = color)
+      }
+
+    })
+
+    const caption = (
+      <i style={captionStyle} className='bfi-text-color'>
+        <span className='path1'></span>
+        <span className='path2'></span>
+      </i>
+    )
+
+    return (
+      <DropDown
+        caption={caption}
+        title={this.props.language.controls.color}
+        showArrow={false}
+        containerNode={this.props.containerNode}
+        componentId={this.dropDownComponentId}
+        ref={(instance) => this.dropDownComponent = instance}
+        className={'control-item dropdown text-color-dropdown'}
+      >
+        <div className='bf-text-color-picker-wrap'>
+          <div className='bf-color-switch-buttons' style={this.props.enableBackgroundColor ? {} : {display: 'none'}}>
+            <button
+              type='button'
+              data-type='color'
+              data-keep-active={true}
+              data-braft-component-id={this.dropDownComponentId}
+              className={colorType === 'color' ? 'active' : ''}
+              onClick={this.switchColorType}
+            >{this.props.language.controls.textColor}</button>
+            <button
+              type='button'
+              data-type='background-color'
+              data-keep-active={true}
+              data-braft-component-id={this.dropDownComponentId}
+              className={colorType === 'background-color' ? 'active' : ''}
+              onClick={this.switchColorType}
+            >{this.props.language.controls.backgroundColor}</button>
+          </div>
+          <ColorPicker
+            width={200}
+            language={this.props.language}
+            current={currentColor}
+            disableAlpha={true}
+            colors={this.props.colors}
+            onChange={this.toggleColor}
+          />
+        </div>
+      </DropDown>
+    )
+
+  }
+
+  switchColorType = ({ currentTarget }) => {
+    this.setState({
+      colorType: currentTarget.dataset.type
+    })
+  }
+
+  toggleColor = (color) => {
+
+    const hookReturns = this.props.hooks(`toggle-text-${this.state.colorType}`, color)(color)
+
+    if (hookReturns === false) {
+      return false
+    }
+
+    if (typeof hookReturns === 'string') {
+      color =  hookReturns
+    }
+
+    if (this.state.colorType === 'color') {
+      this.props.editor.setValue(ContentUtils.toggleSelectionColor(this.props.editorState, color, this.props.colors))
+    } else {
+      this.props.editor.setValue(ContentUtils.toggleSelectionBackgroundColor(this.props.editorState, color, this.props.colors))
+    }
+
+    this.dropDownComponent.hide()
+    this.props.editor.requestFocus()
+
+  }
+
+}

source/braft-editor/src/components/business/TextColor/style.scss

@@ -0,0 +1,38 @@
+@import '~scssinc';
+
+.text-color-dropdown .dropdown-handler {
+  span{
+    width: 36px;
+    padding: 0;
+    overflow: hidden;
+    border-radius: 2px;
+  }
+}
+
+.bf-text-color-picker-wrap{
+  margin: 10px;
+  overflow: hidden;
+}
+
+.bf-color-switch-buttons{
+  height: 30px;
+  margin: 10px;
+  overflow: hidden;
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px $COLOR_ACTIVE;
+  button{
+    float: left;
+    width: 50%;
+    height: 30px;
+    background-color: transparent;
+    border: none;
+    color: #fff;
+    font-size: 12px;
+    font-weight: normal;
+    text-transform: uppercase;
+    cursor: pointer;
+    &.active{
+      background-color: $COLOR_ACTIVE;
+    }
+  }
+}

source/braft-editor/src/components/business/TextIndent/index.jsx

@@ -0,0 +1,60 @@
+import './style.scss'
+import React from 'react'
+import DropDown from 'components/common/DropDown'
+import { ContentUtils } from 'braft-utils'
+
+const toggleTextIndent = (event, props) => {
+
+  let textIndent = event.currentTarget.dataset.size
+  const hookReturns = props.hooks('toggle-text-indent', textIndent)(textIndent)
+
+  if (hookReturns === false) {
+    return false
+  }
+
+  if (!isNaN(hookReturns)) {
+    textIndent = hookReturns
+  }
+
+  props.editor.setValue(ContentUtils.toggleSelectionIndent(props.editorState, textIndent, props.textIndents))
+  props.editor.requestFocus()
+
+}
+
+export default (props) => {
+
+  let caption = null
+  let currentIndent = null
+
+  props.textIndents.find((item) => {
+    if (ContentUtils.selectionHasInlineStyle(props.editorState, 'INDENT-' + item)) {
+      caption = item
+      currentIndent = item
+      return true
+    }
+    return false
+  })
+
+  return (
+    <DropDown
+      caption={caption || props.defaultCaption}
+      containerNode={props.containerNode}
+      title={props.language.controls.textIndent}
+      className={'control-item dropdown bf-indent-dropdown'}
+    >
+      <ul className='bf-text-indents'>
+        {props.textIndents.map((item, index) => {
+          return (
+            <li
+              key={index}
+              className={item === currentIndent ? 'active' : null}
+              data-size={item}
+              onClick={(event) => toggleTextIndent(event, props)}
+            >{item}</li>
+          )
+        })}
+      </ul>
+    </DropDown>
+  )
+
+}

source/braft-editor/src/components/business/TextIndent/style.scss

@@ -0,0 +1,34 @@
+@import '~scssinc';
+
+.bf-text-indent-dropdown{
+  min-width: 95px;
+}
+.bf-text-indents{
+  box-sizing: content-box;
+  width: 210px;
+  list-style: none;
+  margin: 0;
+  padding: 5px;
+  overflow: hidden;
+  li{
+    display: block;
+    float: left;
+    width: 60px;
+    height: 30px;
+    background-color: rgba(#fff, .1);
+    border-radius: 2px;
+    margin: 5px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 30px;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+    &:hover{
+      background-color: rgba(#fff, .2);
+    }
+    &.active{
+      background-color: $COLOR_ACTIVE;
+    }
+  }
+}

source/braft-editor/src/components/common/ColorPicker/index.jsx

@@ -0,0 +1,29 @@
+import './style.scss'
+import React from 'react'
+
+export default (props) => {
+
+  const { current, colors } = props
+
+  return (
+    <div className='bf-colors-wrap'>
+      <ul className='bf-colors'>
+        {colors.map((item, index) => {
+          let className = item === current ? 'color-item active' : 'color-item'
+          return (
+            <li
+              key={index}
+              title={item}
+              className={className}
+              style={{color: item}}
+              data-color={item.replace('#', '')}
+              onClick={(e) => props.onChange(e.currentTarget.dataset.color)}
+            >
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+
+}

source/braft-editor/src/components/common/ColorPicker/style.scss

@@ -0,0 +1,30 @@
+@import '~scssinc';
+
+.bf-colors{
+  box-sizing: content-box;
+  list-style: none;
+  width: 240px;
+  margin: 0;
+  padding: 5px;
+  overflow: hidden;
+  li{
+    box-sizing: content-box;
+    display: block;
+    float: left;
+    width: 24px;
+    height: 24px;
+    margin: 5px;
+    padding: 0;
+    background-color: currentColor;
+    border: 3px solid transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform .2s;
+    &:hover{
+      transform: scale(1.3);
+    }
+    &.active{
+      box-shadow: 0 0 0 2px $COLOR_ACTIVE;
+    }
+  }
+}

source/braft-editor/src/components/common/DropDown/index.jsx

@@ -0,0 +1,170 @@
+import './style.scss'
+import React from 'react'
+import ResponsiveHelper from 'helpers/responsive'
+import { BaseUtils } from 'braft-utils'
+
+export default class DropDown extends React.Component {
+
+  alive = false
+  responsiveResolveId = null
+  dropDownHandlerElement = null
+  dropDownContentElement = null
+  componentId = this.props.componentId || ('BRAFT-DROPDOWN-' + BaseUtils.UniqueIndex())
+  state = {
+    active: false,
+    offset: 0,
+    maxHeight: 100
+  }
+
+  componentDidMount () {
+
+    this.alive = true
+
+    document.body.addEventListener('click', (event) => {
+      this.registerClickEvent(event)
+    })
+
+    this.responsiveResolveId = ResponsiveHelper.resolve(() => {
+      this.fixDropDownPosition()
+    })
+
+  }
+
+  componentWillReceiveProps (next) {
+
+    if (!this.props.disabled && next.disabled) {
+      this.hide()
+    }
+
+  }
+
+  componentDidUpdate (prevState) {
+
+    if (!prevState.active && this.state.active) {
+      this.fixDropDownPosition()
+    }
+
+  }
+
+  componentWillUnmount () {
+
+    document.body.removeEventListener('click', (event) => {
+      this.registerClickEvent(event)
+    })
+
+    this.alive = false
+    ResponsiveHelper.unresolve(this.responsiveResolveId)
+
+  }
+
+  render () {
+
+    let { active, offset, maxHeight } = this.state
+    let { caption, htmlCaption, title, disabled, showArrow, arrowActive, className, children } = this.props
+
+    disabled && (active = false)
+
+    return (
+      <div
+        id={this.componentId}
+        className={'bf-dropdown ' + (active ? 'active ' : '') + (disabled ? 'disabled ' : '') + className}
+      >
+        {htmlCaption ? (
+          <button
+            type='button'
+            className='dropdown-handler'
+            data-title={title}
+            data-braft-component-id={this.componentId}
+            dangerouslySetInnerHTML={htmlCaption ? {__html: htmlCaption} : null}
+            ref={(instance) => this.dropDownHandlerElement = instance}
+          ></button>
+        ) : (
+          <button
+            type='button'
+            className='dropdown-handler'
+            data-title={title}
+            data-braft-component-id={this.componentId}
+            ref={(instance) => this.dropDownHandlerElement = instance}
+          >
+            <span>{caption}</span>
+            {showArrow !== false ? <i className='bfi-drop-down'></i> : null}
+          </button>
+        )}
+        <div
+          className='dropdown-content'
+          style={{marginLeft: offset }}
+          ref={(instance) => this.dropDownContentElement = instance}
+        >
+          <i
+            style={{marginLeft: offset * -1}}
+            className={'dropdown-arrow' + (arrowActive ? ' active' : '')}
+          ></i>
+          <div
+            className='dropdown-content-inner'
+            style={{ maxHeight }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+
+  }
+
+  fixDropDownPosition () {
+
+    const viewRect = this.props.containerNode.getBoundingClientRect()
+    const editorContentRect = this.props.containerNode.querySelector('.bf-content').getBoundingClientRect()
+    const handlerRect = this.dropDownHandlerElement.getBoundingClientRect()
+    const contentRect = this.dropDownContentElement.getBoundingClientRect()
+
+    const maxHeight = editorContentRect.height + (editorContentRect.top - (handlerRect.top + handlerRect.height)) - 30
+
+    let offset = 0
+    let right = handlerRect.right - handlerRect.width / 2 + contentRect.width / 2
+    let left = handlerRect.left + handlerRect.width / 2 - contentRect.width / 2
+
+    right = viewRect.right - right
+    left = left - viewRect.left
+
+    if (right < 10) {
+      offset = right - 10
+    } else if (left < 10) {
+      offset = left * -1 + 10
+    }
+
+    if (offset !== this.state.offset || maxHeight !== this.state.maxHeight) {
+      this.setState({ offset, maxHeight })
+    }
+
+  }
+
+  registerClickEvent (event) {
+
+    let { autoHide } = this.props
+    let active = false
+
+    if (event.target.dataset.braftComponentId === this.componentId) {
+      active = event.target.dataset.keepActive ? true : !this.state.active
+    } else if (autoHide === false) {
+      active = this.state.active
+    }
+
+    this.alive && this.setState({ active })
+
+  }
+
+  show () {
+    this.setState({
+      active: true
+    })
+  }
+
+  hide () {
+    this.setState({
+      active: false
+    })
+  }
+
+
+}

source/braft-editor/src/components/common/DropDown/style.scss

@@ -0,0 +1,135 @@
+@import '~scssinc';
+
+.bf-dropdown{
+  position: relative;
+  width: auto;
+  height: 36px;
+  margin: 0;
+  &.disabled{
+    pointer-events: none;
+    opacity: .3;
+  }
+  .dropdown-content{
+    box-sizing: content-box;
+    position: absolute;
+    z-index: 10;
+    top: 100%;
+    left: 50%;
+    visibility: hidden;
+    float: left;
+    width: auto;
+    min-width: 100%;
+    margin-top: 9px;
+    background-color: rgba($COLOR_DARK, 1);
+    border-radius: 2px;
+    box-shadow: 0 5px 15px rgba(#000, .2);
+    opacity: 0;
+    cursor: default;
+    transform: translate(-50%, 20px);
+    transition: .2s;
+    ::-webkit-scrollbar-track{
+      background-color: transparent;
+    }
+    ::-webkit-scrollbar{
+      width: 4px;
+      background-color: transparent;
+      border-radius: 2px;
+    }
+    ::-webkit-scrollbar-thumb{
+      background-color: rgba(#fff, .3);
+      border-radius: 2px;
+    }
+    .dropdown-arrow{
+      position: absolute;
+      top: -10px;
+      left: 50%;
+      border: solid 5px transparent;
+      border-bottom-color: rgba($COLOR_DARK, 1);
+      transform: translateX(-50%);
+      transition: margin .2s;
+      &.active{
+        border-bottom-color: $COLOR_ACTIVE;
+      }
+    }
+    .menu{
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      border-radius: 2px;
+    }
+    .menu-item{
+      display: block;
+      list-style: none;
+      margin: 0;
+      font-size: 16px;
+      cursor: pointer;
+      &:hover{
+        background-color: rgba(#000, .1);
+      }
+      &.active{
+        background-color: $COLOR_ACTIVE;
+        color: #fff;
+      }
+      &:not(.active){
+        color: rgba(#fff, .6);
+        box-shadow: inset 0 -1px 0 0 rgba(#fff, .1);
+      }
+    }
+  }
+  .dropdown-content-inner{
+    overflow: auto;
+  }
+  .dropdown-handler{
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 36px;
+    background-color: transparent;
+    border: none;
+    color: $COLOR_GRAY;
+    cursor: pointer;
+    &:hover{
+      background-color: rgba(#000, .05);
+    }
+    *{
+      display: inline;
+      padding: 0;
+      font-size: inherit;
+      font-weight: normal;
+    }
+    > span{
+      float: left;
+      padding: 0 10px;
+      font-size: 14px;
+      line-height: 36px;
+      pointer-events: none;
+      i{
+        display: block;
+        height: 36px;
+        font-size: 16px;
+        line-height: 36px;
+        text-align: center;
+      }
+    }
+    .bfi-drop-down{
+      float: right;
+      width: 30px;
+      height: 36px;
+      font-size: 16px;
+      line-height: 36px;
+      text-align: center;
+      pointer-events: none;
+    }
+  }
+  &.active{
+    .dropdown-handler{
+      background-color: rgba(#000, .05);
+    }
+    .dropdown-content{
+      visibility: visible;
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+  }
+}

source/braft-editor/src/components/common/Modal/index.jsx

@@ -0,0 +1,170 @@
+import './style.scss'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { BaseUtils } from 'braft-utils'
+
+export default class Modal extends React.Component {
+
+  constructor (props) {
+
+    super(props)
+    this.active = false
+    this.componentId = 'BRAFT-MODAL-' + BaseUtils.UniqueIndex()
+
+  }
+
+  static defaultProps = {
+    showFooter: true
+  }
+
+  componentDidMount () {
+
+    if (this.props.visible) {
+      this.active = true
+      this.renderComponent(this.props)
+    }
+
+  }
+
+  componentWillReceiveProps (next) {
+
+    if (this.props.visible && !next.visible) {
+      this.unrenderComponent()
+    } else if (this.props.visible || next.visible) {
+      this.active = true
+      this.renderComponent(next)
+    }
+
+  }
+
+  render () {
+    return null
+  }
+
+  handleTransitionEnd = () => {
+
+    if (!this.rootElement || !this.rootElement.classList) {
+      return false
+    }
+
+    if (!this.rootElement.classList.contains('active')) {
+      ReactDOM.unmountComponentAtNode(this.rootElement) && this.rootElement.parentNode.removeChild(this.rootElement)
+    }
+
+  }
+
+  unrenderComponent () {
+    this.active = false
+    this.activeId && window.clearImmediate(this.activeId)
+    if (this.rootElement && this.rootElement.classList) {
+      this.rootElement.classList.remove('active')
+    }
+  }
+
+  renderComponent (props) {
+
+    if (!this.active) {
+      return false
+    }
+
+    let { title, className, width, height, children, confirmable, showFooter, showCancel, showConfirm, showClose, cancelText, confirmText, bottomText, language } = props
+
+    typeof showCancel === 'undefined' && (showCancel = true)
+    typeof showClose === 'undefined' && (showClose = true)
+    typeof showConfirm === 'undefined' && (showConfirm = true)
+
+    const childComponent = (
+      <div className={'bf-modal ' + (className || '')}>
+        <div className='bf-modal-mask'></div>
+        <div onTransitionEnd={this.handleTransitionEnd} style={{width, height}} className='bf-modal-content'>
+          <div className='bf-modal-header'>
+            <h3 className='bf-modal-caption'>{title}</h3>
+            {showClose && <button type='button' onClick={this.close} className='bf-modal-close-button'><i className='bf-icon-close'></i></button>}
+          </div>
+          <div className='bf-modal-body'>{children}</div>
+          {showFooter ? (
+            <div className='bf-modal-footer'>
+              <div className='bf-modal-addon-text'>{bottomText}</div>
+              <div className='bf-modal-buttons'>
+                {showCancel && <button type='button' onClick={this.handleCancel} className='bf-modal-cancel'>{cancelText || language.base.cancel}</button>}
+                {showConfirm && <button type='button' onClick={this.handleConfirm} className={'bf-modal-confirm ' + (!confirmable ? 'disabled' : '')}>{confirmText || language.base.confirm}</button>}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    )
+
+    this.rootElement = document.querySelector('#' + this.componentId)
+
+    if (!this.rootElement) {
+      this.rootElement = document.createElement('div')
+      this.rootElement.id = this.componentId
+      this.rootElement.className = 'bf-modal-root'
+      document.body.appendChild(this.rootElement)
+    }
+
+    ReactDOM.render(childComponent, this.rootElement)
+
+    this.activeId = window.setImmediate(() => {
+      this.rootElement.classList.add('active')
+    })
+
+  }
+
+  handleCancel = () => {
+    this.props.closeOnCancel && this.close()
+    this.props.onCancel && this.props.onCancel()
+  }
+
+  handleConfirm = () => {
+    this.props.closeOnConfirm && this.close()
+    this.props.onConfirm && this.props.onConfirm()
+  }
+
+  close = () => {
+    this.unrenderComponent()
+    this.props.onClose && this.props.onClose()
+  }
+
+}
+
+export const showModal = (props) => {
+
+  const hostNode = document.createElement('div')
+  hostNode.style.display = 'none'
+  document.body.appendChild(hostNode)
+
+  const close = () => {
+    ReactDOM.unmountComponentAtNode(hostNode) && hostNode.parentNode.removeChild(hostNode)
+  }
+
+  const onConfirm = () => {
+    close()
+    props.onConfirm && props.onConfirm()
+  }
+
+  const onCancel = () => {
+    close()
+    props.onCancel && props.onCancel()
+  }
+
+  const onClose = () => {
+    close()
+    props.onClose && props.onClose()
+  }
+
+  const extProps = {
+    onConfirm, onCancel, onClose,
+    visible: true,
+    closeOnConfirm: true,
+    closeOnCancel: true
+  }
+
+  const modalInstance = ReactDOM.render(<Modal { ...props } { ...extProps }/>, hostNode)
+  modalInstance.destroy = close
+  modalInstance.update = modalInstance.renderComponent
+
+  return modalInstance
+
+}

source/braft-editor/src/components/common/Modal/style.scss

@@ -0,0 +1,119 @@
+@import '~scssinc';
+
+.bf-modal{
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  button{
+    outline: none;
+  }
+}
+.bf-modal-mask{
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(#000, .1);
+  opacity: 0;
+  transition: opacity .2s;
+}
+.bf-modal-content{
+  position: absolute;
+  z-index: 2;
+  top: 45%;
+  left: 50%;
+  max-width: 95%;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 15px 30px rgba(#000, .1);
+  opacity: 0;
+  transform: translate(-50%, -40%);
+  transition: transform .2s, opacity .2s;
+}
+.bf-modal-header{
+  height: 50px;
+}
+.bf-modal-caption{
+  float: left;
+  margin: 0;
+  padding: 0 15px;
+  color: rgba(#999, 1);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 50px;
+}
+.bf-modal-close-button{
+  float: right;
+  width: 50px;
+  height: 50px;
+  background-color: transparent;
+  border: none;
+  color: #ccc;
+  font-size: 18px;
+  cursor: pointer;
+  &:hover{
+    color: $COLOR_DANGER;
+  }
+}
+.bf-modal-body{
+  overflow: auto;
+}
+.bf-modal-footer{
+  min-height: 15px;
+  padding: 0 15px;
+  overflow: hidden;
+}
+.bf-modal-addon-text{
+  float: left;
+  color: #999;
+  font-size: 12px;
+  line-height: 60px;
+}
+.bf-modal-buttons{
+  float: right;
+}
+.bf-modal-cancel,
+.bf-modal-confirm{
+  height: 36px;
+  margin: 12px 0 12px 15px;
+  padding: 0 30px;
+  border: none;
+  border-radius: 2px;
+  font-size: 12px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.bf-modal-cancel{
+  background-color: #e8e9ea;
+  color: #999;
+  &:hover{
+    background-color: #d8d9da;
+  }
+}
+.bf-modal-confirm{
+  background-color: $COLOR_ACTIVE;
+  color: #fff;
+  &:hover{
+    background-color: $COLOR_ACTIVE - 20;
+  }
+  &.disabled{
+    opacity: .3;
+    pointer-events: none;
+    filter: grayscale(.4);
+  }
+}
+
+.bf-modal-root.active{
+  .bf-modal-mask{
+    opacity: 1;
+  }
+  .bf-modal-content{
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}

source/braft-editor/src/components/common/StaticContainer/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default class extends React.Component {
+
+  shouldComponentUpdate () {
+    return false
+  }
+
+  render () {
+    return <div>{this.props.children}</div>
+  }
+
+}

source/braft-editor/src/components/common/Switch/index.jsx

@@ -0,0 +1,12 @@
+import './style.scss'
+import React from 'react'
+
+export default (props) => {
+
+  const { active, onClick, className } = props
+
+  return (
+    <div onClick={() => onClick()} className={'bf-switch ' + className + (active ? ' active' : '')}></div>
+  )
+
+}

source/braft-editor/src/components/common/Switch/style.scss

@@ -0,0 +1,28 @@
+@import '~scssinc';
+
+.bf-switch{
+  position: relative;
+  width: 40px;
+  height: 20px;
+  background-color: rgba(#fff, .15);
+  border-radius: 10px;
+  transition: background .3s;
+  &.active{
+    background-color: $COLOR_ACTIVE;
+    &::before{
+      left: 20px;
+    }
+  }
+  &::before{
+    position: absolute;
+    left: 0;
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: #eee;
+    content: '';
+    transform: scale(1.2);
+    transition: .3s;
+  }
+}

source/braft-editor/src/configs/controls.js

@@ -0,0 +1,188 @@
+import React from 'react'
+
+export default (lang) => [
+  {
+    key: 'undo',
+    title: lang.controls.undo,
+    text: <i className="bfi-undo"></i>,
+    type: 'editor-method',
+    command: 'undo'
+  }, {
+    key: 'redo',
+    title: lang.controls.redo,
+    text: <i className="bfi-redo"></i>,
+    type: 'editor-method',
+    command: 'redo'
+  }, {
+    key: 'remove-styles',
+    title: lang.controls.removeStyles,
+    text: <i className="bfi-format_clear"></i>,
+    type: 'editor-method',
+    command: 'removeSelectionInlineStyles'
+  }, {
+    key: 'hr',
+    title: lang.controls.hr,
+    text: <i className="bfi-hr"></i>,
+    type: 'editor-method',
+    command: 'insertHorizontalLine'
+  }, {
+    key: 'bold',
+    title: lang.controls.bold,
+    text: <i className="bfi-bold"></i>,
+    type: 'inline-style',
+    command: 'bold'
+  },{
+    key: 'italic',
+    title: lang.controls.italic,
+    text: <i className="bfi-italic"></i>,
+    type: 'inline-style',
+    command: 'italic'
+  }, {
+    key: 'underline',
+    title: lang.controls.underline,
+    text: <i className="bfi-underlined"></i>,
+    type: 'inline-style',
+    command: 'underline'
+  }, {
+    key: 'strike-through',
+    title: lang.controls.strikeThrough,
+    text: <i className="bfi-strikethrough"></i>,
+    type: 'inline-style',
+    command: 'strikethrough',
+  }, {
+    key: 'superscript',
+    title: lang.controls.superScript,
+    text: <i className="bfi-superscript"></i>,
+    type: 'inline-style',
+    command: 'superscript'
+  }, {
+    key: 'subscript',
+    title: lang.controls.subScript,
+    text: <i className="bfi-subscript"></i>,
+    type: 'inline-style',
+    command: 'subscript'
+  }, {
+    key: 'headings',
+    title: lang.controls.headings,
+    type: 'headings',
+  }, {
+    key: 'blockquote',
+    title: lang.controls.blockQuote,
+    text: <i className="bfi-quote"></i>,
+    type: 'block-type',
+    command: 'blockquote',
+  }, {
+    key: 'code',
+    title: lang.controls.code,
+    text: <i className="bfi-code"></i>,
+    type: 'block-type',
+    command: 'code-block'
+  }, {
+    key: 'list-ul',
+    title: lang.controls.unorderedList,
+    text: <i className="bfi-list"></i>,
+    type: 'block-type',
+    command: 'unordered-list-item'
+  }, {
+    key: 'list-ol',
+    title: lang.controls.orderedList,
+    text: <i className="bfi-list-numbered"></i>,
+    type: 'block-type',
+    command: 'ordered-list-item'
+  }, {
+    key: 'link',
+    title: lang.controls.link,
+    type: 'link'
+  }, {
+    key: 'text-color',
+    title: lang.controls.color,
+    type: 'text-color'
+  }, {
+    key: 'line-height',
+    title: lang.controls.lineHeight, 
+    type: 'line-height'
+  }, {
+    key: 'letter-spacing',
+    title: lang.controls.letterSpacing,
+    type: 'letter-spacing'
+  }, {
+    key: 'text-indent',
+    title: lang.controls.textIndent,
+    type: 'text-indent'
+  },{
+    key: 'font-size',
+    title: lang.controls.fontSize,
+    type: 'font-size'
+  }, {
+    key: 'font-family',
+    title: lang.controls.fontFamily,
+    type: 'font-family'
+  }, {
+    key: 'text-align',
+    title: lang.controls.textAlign,
+    type: 'text-align'
+  }, {
+    key: 'media',
+    title: lang.controls.media,
+    text: <i className="bfi-media"></i>,
+    type: 'media'
+  }, {
+    key: 'emoji',
+    title: lang.controls.emoji,
+    text: <i className="bfi-emoji"></i>,
+    type: 'emoji'
+  }, {
+    key: 'clear',
+    title: lang.controls.clear,
+    text: lang.controls.clear,
+    type: 'editor-method',
+    command: 'clearEditorContent'
+  }, {
+    key: 'modal',
+    type: 'modal',
+  }, {
+    key: 'button',
+    type: 'button',
+  }, {
+    key: 'dropdown',
+    type: 'dropdown',
+  }, {
+    key: 'component',
+    type: 'component',
+  }
+]
+
+export const imageControlItems = {
+  'float-left': {
+    text: <span data-float="left">&#xe91e;</span>,
+    command: 'setImageFloat|left'
+  },
+  'float-right': {
+    text: <span data-float="right">&#xe914;</span>,
+    command: 'setImageFloat|right'
+  },
+  'align-left': {
+    text: <span data-align="left">&#xe027;</span>,
+    command: 'setImageAlignment|left'
+  },
+  'align-center': {
+    text: <span data-align="center">&#xe028;</span>,
+    command: 'setImageAlignment|center'
+  },
+  'align-right': {
+    text: <span data-align="right">&#xe029;</span>,
+    command: 'setImageAlignment|right'
+  },
+  'size': {
+    text: <span>&#xe3c2;</span>,
+    command: 'toggleSizeEditor'
+  },
+  'link': {
+    text: <span>&#xe91a;</span>,
+    command: 'toggleLinkEditor'
+  },
+  'remove': {
+    text: <span>&#xe9ac;</span>,
+    command: 'removeImage'
+  }
+}

source/braft-editor/src/configs/keybindings.js

@@ -0,0 +1,18 @@
+import { getDefaultKeyBinding, KeyBindingUtil } from 'draft-js'
+
+// TODO
+// 允许自定义的快捷键设置
+
+export default (customKeyBindingFn) => (event) => {
+
+  if (event.keyCode === 83 && (KeyBindingUtil.hasCommandModifier(event) || KeyBindingUtil.isCtrlKeyCommand(event))) {
+    return 'braft-save'
+  }
+
+  if (customKeyBindingFn) {
+    return customKeyBindingFn(event) || getDefaultKeyBinding(event)
+  }
+
+  return getDefaultKeyBinding(event)
+
+}

source/braft-editor/src/configs/maps.js

@@ -0,0 +1,58 @@
+import React from 'react'
+
+export const getHeadings = (lang) => [
+  {
+    key: 'header-one',
+    title: lang.controls.header + ' 1',
+    text: <h1>{lang.controls.header} 1</h1>,
+    type: 'block-type',
+    command: 'header-one'
+  }, {
+    key: 'header-two',
+    title: lang.controls.header + ' 2',
+    text: <h2>{lang.controls.header} 2</h2>,
+    type: 'block-type',
+    command: 'header-two'
+  }, {
+    key: 'header-three',
+    title: lang.controls.header + ' 3',
+    text: <h3>{lang.controls.header} 3</h3>,
+    type: 'block-type',
+    command: 'header-three'
+  }, {
+    key: 'header-four',
+    title: lang.controls.header + ' 4',
+    text: <h4>{lang.controls.header} 4</h4>,
+    type: 'block-type',
+    command: 'header-four'
+  }, {
+    key: 'header-five',
+    title: lang.controls.header + ' 5',
+    text: <h5>{lang.controls.header} 5</h5>,
+    type: 'block-type',
+    command: 'header-five'
+  }, {
+    key: 'header-six',
+    title: lang.controls.header + ' 6',
+    text: <h6>{lang.controls.header} 6</h6>,
+    type: 'block-type',
+    command: 'header-six'
+  }, {
+    key: 'unstyled',
+    title: lang.controls.normal,
+    text: lang.controls.normal,
+    type: 'block-type',
+    command: 'unstyled'
+  }
+]
+
+export const blocks = {
+  'header-one': 'h1',
+  'header-two': 'h2',
+  'header-three': 'h3',
+  'header-four': 'h4',
+  'header-fiv': 'h5',
+  'header-six': 'h6',
+  'unstyled': 'p',
+  'blockquote': 'blockquote'
+}

source/braft-editor/src/configs/props.js

@@ -0,0 +1,113 @@
+export default {
+  language: 'zh',
+  controls: [
+    'undo', 'redo', 'separator',
+    'font-size', 'line-height', 'letter-spacing', 'separator',
+    'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
+    'superscript', 'subscript', 'remove-styles', 'emoji', 'text-align', 'separator',
+    'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
+    'link', 'split', 'hr', 'separator',
+    'media', 'separator',
+    'clear'
+  ],
+  excludeControls: [],
+  extendControls: [],
+  extendAtomics: [],
+  componentBelowControlBar: null,
+  media: {
+    pasteImage: true,
+    image: true,
+    video: true,
+    audio: true,
+    uploadFn: null,
+    validateFn: null,
+    onBeforeDeselect: null,
+    onDeselect: null,
+    onBeforeSelect: null,
+    onSelect: null,
+    onBeforeRemove: null,
+    onRemove: null,
+    onCancel: null,
+    onFileSelect: null,
+    onBeforeInsert: null,
+    onInsert: null,
+    onChange: null,
+    externals: {
+      audio: true,
+      video: true,
+      image: true,
+      embed: true
+    },
+  },
+  imageControls: [
+    'float-left', 'float-right',
+    'align-left', 'align-center', 'align-right',
+    'link', 'size', 'remove'
+  ],
+  colors: [
+    '#000000', '#333333', '#666666', '#999999', '#cccccc', '#ffffff',
+    '#61a951', '#16a085', '#07a9fe', '#003ba5', '#8e44ad', '#f32784',
+    '#c0392b', '#d35400', '#f39c12', '#fdda00', '#7f8c8d', '#2c3e50'
+  ],
+  tabIndents: 2,
+  textAligns: ['left', 'center', 'right', 'justify'],
+  textBackgroundColor: true,
+  letterSpacings: [0, 1, 2, 3, 4, 5, 6],
+  textIndents: [0, 14, 21, 28],
+  lineHeights: [1, 1.2, 1.5, 1.75, 2, 2.5, 3, 4],
+  fontSizes: [
+    12, 14, 16, 18, 20, 24,
+    28, 30, 32, 36, 40, 48,
+    56, 64, 72, 96, 120, 144
+  ],
+  fontFamilies: [{
+    name: 'Araial',
+    family: 'Arial, Helvetica, sans-serif'
+  }, {
+    name: 'Georgia',
+    family: 'Georgia, serif'
+  }, {
+    name: 'Impact',
+    family: 'Impact, serif'
+  }, {
+    name: 'Monospace',
+    family: '"Courier New", Courier, monospace'
+  }, {
+    name: 'Tahoma',
+    family: 'tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif'
+  }],
+  emojis: [
+    '🤣', '🙌', '💚', '💛', '👏', '😉', '💯',
+    '💕', '💞', '💘', '💙', '💝', '🖤', '💜',
+    '❤️', '😍', '😻', '💓', '💗', '😋', '😇',
+    '😂', '😹', '😘', '💖', '😁', '😀', '🤞',
+    '😲', '😄', '😊', '👍', '😌', '😃', '😅',
+    '✌️', '🤗', '💋', '😗', '😽', '😚', '🤠',
+    '😙', '😺', '👄', '😸', '😏', '😼', '👌',
+    '😎', '😆', '😛', '🙏', '🤝', '🙂', '🤑',
+    '😝', '😐', '😑', '🤤', '😤', '🙃', '🤡',
+    '😶', '😪', '😴', '😵', '😓', '👊', '😦',
+    '😷', '🤐', '😜', '🤓', '👻', '😥', '🙄',
+    '🤔', '🤒', '🙁', '😔', '😯', '☹️', '☠️',
+    '😰', '😩', '😖', '😕', '😒', '😣', '😢',
+    '😮', '😿', '🤧', '😫', '🤥', '😞', '😬',
+    '👎', '💀', '😳', '😨', '🤕', '🤢', '😱',
+    '😭', '😠', '😈', '😧', '💔', '😟', '🙀',
+    '💩', '👿', '😡', '😾', '🖕'
+  ],
+  stripPastedStyles: false,
+  className: '',
+  style: {},
+  controlBarClassName: '',
+  controlBarStyle: {},
+  contentClassName: '',
+  contentStyle: {},
+  draftProps: {},
+  hooks: {},
+  onChange: null,
+  onFocus: null,
+  onBlur: null,
+  onTab: null,
+  onDelete: null,
+  onSave: null
+}

source/braft-editor/src/editor/index.jsx

@@ -0,0 +1,381 @@
+import 'draft-js/dist/Draft.css'
+import 'assets/scss/_base.scss'
+import React from 'react'
+import languages from 'languages'
+import BraftFinder from 'braft-finder'
+import { ColorUtils, ContentUtils } from 'braft-utils'
+import { CompositeDecorator, DefaultDraftBlockRenderMap, Editor } from 'draft-js'
+import getKeyBindingFn from 'configs/keybindings'
+import defaultProps from 'configs/props'
+import { getBlockRendererFn, customBlockRenderMap, getBlockStyleFn, getCustomStyleMap, decorators } from 'renderers'
+import ControlBar from 'components/business/ControlBar'
+
+const buildHooks= (hooks) => (hookName, defaultReturns = {}) => {
+  return hooks[hookName] || (() => defaultReturns)
+}
+
+export const editorDecorators = new CompositeDecorator(decorators)
+
+export default class BraftEditor extends React.Component {
+
+  static defaultProps = defaultProps
+
+  constructor (props) {
+
+    super(props)
+
+    this.isFocused = false
+    this.keyBindingFn = getKeyBindingFn(props.customKeyBindingFn)
+    this.blockStyleFn = getBlockStyleFn(props.blockStyleFn)
+    this.blockRenderMap = DefaultDraftBlockRenderMap.merge(customBlockRenderMap)
+
+    if (props.blockRenderMapFn) {
+      this.blockRenderMap = props.blockRenderMapFn(this.blockRenderMap)
+    }
+
+    this.braftFinder = null
+    const defaultEditorState = ContentUtils.isEditorState(props.defaultValue) ? props.defaultValue : ContentUtils.createEmptyEditorState(editorDecorators)
+
+    this.state = {
+      containerNode: null,
+      tempColors: [],
+      editorState: defaultEditorState,
+      draftProps: {}
+    }
+
+  }
+
+  componentWillMount () {
+
+    const { controls, extendControls } = this.props
+
+    if ([...controls, ...extendControls].find(item => item === 'media' || item.key === 'media')) {
+      this.braftFinder = new BraftFinder({
+        language: this.props.language,
+        uploader: this.props.media.uploadFn,
+        validator: this.props.media.validateFn
+      })
+      this.forceUpdate()
+    }
+
+  }
+
+  componentDidMount () {
+
+    const { value: editorState } = this.props
+
+    if (ContentUtils.isEditorState(editorState)) {
+      this.setState({ editorState })
+    } else if (editorState) {
+      // console.warn('')
+    }
+
+  }
+
+  componentWillReceiveProps (nextProps) {
+
+    const { value: editorState } = nextProps
+
+    if (ContentUtils.isEditorState(editorState)) {
+      this.setState({ editorState })
+    } else if (editorState) {
+      // console.warn('')
+    }
+
+  }
+
+  onChange = (editorState) => {
+    this.setState({ editorState }, () => {
+      this.props.onChange && this.props.onChange(editorState)
+    })
+  }
+
+  getDraftInstance = () => {
+    return this.draftInstance
+  }
+
+  getFinderInstance = () => {
+    return this.braftFinder
+  }
+
+  getValue = () => {
+    return this.state.editorState
+  }
+
+  setValue = (editorState) => {
+    return this.onChange(editorState)
+  }
+
+  forceRender = () => {
+    return this.setValue(ContentUtils.createEditorState(this.state.editorState.getCurrentContent(), editorDecorators))
+  }
+
+  onTab = (event) => {
+
+    if (ContentUtils.getSelectionBlockType(this.state.editorState) === 'code-block') {
+      this.setValue(ContentUtils.insertText(this.state.editorState, ' '.repeat(this.props.tabIndents)))
+      event.preventDefault()
+      return false
+    }
+
+    this.props.onTab && this.props.onTab(event)
+
+  }
+
+  onFocus = () => {
+    this.isFocused = true
+    this.props.onFocus && this.props.onFocus()
+  }
+
+  onBlur = () => {
+    this.isFocused = false
+    this.props.onBlur && this.props.onBlur()
+  }
+
+  requestFocus = () => {
+    setTimeout(() => this.draftInstance.focus(), 0)
+  }
+
+  handleKeyCommand = (command) => {
+
+    if (command === 'braft-save') {
+      this.props.onSave && this.props.onSave()
+      return 'handled'
+    }
+
+    const nextEditorState = ContentUtils.handleKeyCommand(this.state.editorState, command)
+
+    if (nextEditorState) {
+      this.setValue(nextEditorState)
+      return 'handled'
+    }
+
+    return 'not-handled'
+
+  }
+
+  handleReturn = (event) => {
+
+    const currentBlock = ContentUtils.getSelectionBlock(this.state.editorState)
+    const currentBlockType = currentBlock.getType()
+
+    if (currentBlockType === 'unordered-list-item' || currentBlockType === 'ordered-list-item') {
+
+      if (currentBlock.getLength() === 0) {
+        this.setValue(ContentUtils.toggleSelectionBlockType(this.state.editorState, 'unstyled'))
+        return 'handled'
+      }
+
+      return 'not-handled'
+
+    } else if (currentBlockType === 'code-block') {
+
+      if (
+        event.which === 13 && (
+          event.getModifierState('Shift') ||
+          event.getModifierState('Alt') ||
+          event.getModifierState('Control')
+        )) {
+        this.setValue(ContentUtils.toggleSelectionBlockType(this.state.editorState, 'unstyled'))
+        return 'handled'
+      }
+
+      return 'not-handled'
+
+    } else {
+
+      const nextEditorState = ContentUtils.handleNewLine(this.state.editorState, event)
+
+      if (nextEditorState) {
+        this.setValue(nextEditorState)
+        return 'handled'
+      }
+
+      return 'not-handled'
+
+    }
+
+  }
+
+  handleDrop = (selectionState, dataTransfer) => {
+
+    if (window && window.__BRAFT_DRAGING__IMAGE__) {
+
+      let editorState = ContentUtils.removeBlock(this.state.editorState, window.__BRAFT_DRAGING__IMAGE__.block, selectionState)
+      editorState = ContentUtils.insertMedias(editorState, [window.__BRAFT_DRAGING__IMAGE__.mediaData])
+
+      window.__BRAFT_DRAGING__IMAGE__ = null
+
+      this.setDraftProps({ readOnly: false })
+      this.setValue(editorState)
+
+      return 'handled'
+
+    } else if (!dataTransfer || !dataTransfer.getText()) {
+      return 'handled'
+    }
+
+    return 'not-handled'
+
+  }
+
+  handleDroppedFiles = (selectionState, files) => {
+    return this.resolveFiles(files)
+  }
+
+  handlePastedFiles = (files) => {
+    return this.resolveFiles(files)
+  }
+
+  handlePastedText = (text, htmlString) => {
+
+    if (!htmlString || this.props.stripPastedStyles) {
+      return false
+    }
+
+    const tempColors = ColorUtils.detectColorsFromHTMLString(htmlString)
+
+    this.setState({
+      tempColors: [...this.state.tempColors, ...tempColors].filter(item => this.props.colors.indexOf(item) === -1).filter((item, index, array) => array.indexOf(item) === index)
+    }, () => {
+      this.setValue(ContentUtils.insertHTML(this.state.editorState, htmlString))
+    })
+
+    return true
+
+  }
+
+  resolveFiles = (files) => {
+
+    if (files[0] && files[0].type.indexOf('image') > -1 && this.props.media && this.props.media.pasteImage) {
+
+      this.braftFinder.uploadImage(files[0], image => {
+        this.setValue(ContentUtils.insertMedias(this.state.editorState, [image]))
+      })
+  
+      return 'handled'
+
+    }
+
+    return 'not-handled'
+
+  }
+
+  undo = () => {
+    this.setValue(ContentUtils.undo(this.state.editorState))
+  }
+
+  redo = () => {
+    this.setValue(ContentUtils.redo(this.state.editorState))
+  }
+
+  removeSelectionInlineStyles = () => {
+    this.setValue(ContentUtils.removeSelectionInlineStyles(this.state.editorState))
+  }
+
+  insertHorizontalLine = () => {
+    this.setValue(ContentUtils.insertHorizontalLine(this.state.editorState))
+  }
+
+  clearEditorContent = () => {
+    this.setValue(ContentUtils.clear(this.state.editorState))
+  }
+
+  render () {
+
+    let {
+      controls, excludeControls, extendControls, disabled, media, language, colors, hooks,
+      fontSizes, fontFamilies, emojis, placeholder, imageControls, lineHeights, letterSpacings, textIndents, textAligns, textBackgroundColor,
+      extendAtomics, className, style, controlBarClassName, controlBarStyle, contentClassName, contentStyle, stripPastedStyles, componentBelowControlBar
+    } = this.props
+
+    hooks = buildHooks(hooks)
+    controls = controls.filter(item => excludeControls.indexOf(item) === -1)
+    language = languages[language] || languages[defaultProps.language]
+
+    const externalMedias = media && media.externals ? {
+      ...defaultProps.media.externals,
+      ...media.externals
+    } : defaultProps.media.externals
+
+    media = { ...defaultProps.media, ...media, externalMedias }
+
+    if (!media.uploadFn) {
+      media.video = false
+      media.audio = false
+    }
+
+    const controlBarProps = {
+      editor: this,
+      editorState: this.state.editorState,
+      braftFinder: this.braftFinder,
+      ref: instance => this.controlBarInstance = instance,
+      containerNode: this.state.containerNode,
+      className: controlBarClassName,
+      style: controlBarStyle, hooks,
+      colors: [...colors, ...this.state.tempColors],
+      media, controls, language, extendControls, fontSizes, fontFamilies,
+      emojis, lineHeights, letterSpacings, textIndents, textAligns, textBackgroundColor
+    }
+
+    const blockRendererFn = getBlockRendererFn({
+      editor: this, hooks,
+      editorState: this.state.editorState,
+      containerNode: this.state.containerNode,
+      imageControls, language, extendAtomics
+    }, this.props.blockRendererFn)
+
+    const customStyleMap = getCustomStyleMap({
+      colors: [...colors, ...this.state.tempColors],
+      fontSizes, fontFamilies, lineHeights, letterSpacings, textIndents
+    }, this.props.customStyleMap)
+
+    const draftProps = {
+      ref: instance => { this.draftInstance = instance },
+      editorState: this.state.editorState,
+      handleKeyCommand: this.handleKeyCommand,
+      handleReturn: this.handleReturn,
+      handleDrop: this.handleDrop,
+      handleDroppedFiles: this.handleDroppedFiles,
+      handlePastedText: this.handlePastedText,
+      handlePastedFiles: this.handlePastedFiles,
+      onChange: this.onChange,
+      onTab: this.onTab,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      readOnly: disabled,
+      blockRenderMap: this.blockRenderMap,
+      blockStyleFn: this.blockStyleFn,
+      keyBindingFn: this.keyBindingFn,
+      customStyleMap, blockRendererFn,
+      placeholder, stripPastedStyles,
+      ...this.props.draftProps,
+      ...this.state.draftProps
+    }
+
+    return (
+      <div ref={this.setEditorContainerNode} className={`bf-container ${className} ${(disabled ? 'disabled' : '')}`} style={style}>
+        <ControlBar {...controlBarProps} />
+        {componentBelowControlBar}
+        <div className={`bf-content ${contentClassName}`} style={contentStyle}>
+          <Editor {...draftProps} />
+        </div>
+      </div>
+    )
+
+  }
+
+  setDraftProps (draftProps) {
+    this.setState({
+      draftProps: {
+        ...this.state.draftProps,
+        ...draftProps
+      }
+    })
+  }
+
+  setEditorContainerNode = (containerNode) => {
+    this.setState({ containerNode }, this.forceRender)
+  }
+
+}

source/braft-editor/src/helpers/Responsive.js

@@ -0,0 +1,35 @@
+import { BaseUtils } from 'braft-utils'
+
+let resizeEventHandlers = []
+let responsiveHelperInited = false
+let debouce = false
+
+export default {
+
+  resolve (eventHandler) {
+    let id = BaseUtils.UniqueIndex()
+    resizeEventHandlers.push({ id, eventHandler })
+    return id
+  },
+
+  unresolve (id) {
+    resizeEventHandlers = resizeEventHandlers.filter(item => item.id !== id)
+  }
+
+}
+
+if (!responsiveHelperInited) {
+
+  window.addEventListener('resize', (event) => {
+    clearTimeout(debouce)
+    debouce = setTimeout(() => {
+      resizeEventHandlers.map((item) => {
+        typeof item.eventHandler === 'function' && item.eventHandler(event)
+      })
+      debouce = false
+    }, 100)
+  })
+
+  responsiveHelperInited = true
+
+}

source/braft-editor/src/index.jsx

@@ -0,0 +1,70 @@
+import BraftEditor, { editorDecorators } from './editor'
+import { EditorState } from 'draft-js'
+import { convertRawToEditorState, convertHTMLToEditorState, convertEditorStateToRaw, convertEditorStateToHTML } from 'braft-convert'
+
+// 为EditorState对象增加toHTML原型方法，用于将editorState转换成HTML字符串
+EditorState.prototype.toHTML = function () {
+  return convertEditorStateToHTML(this)
+}
+
+// 为EditorState对象增加toRAW原型方法，用于将editorState转换成RAW JSON对象或RAW JSON字符串
+EditorState.prototype.toRAW = function (noStringify) {
+  return noStringify ? convertEditorStateToRaw(this) : JSON.stringify(convertEditorStateToRaw(this))
+}
+
+// 为EditorState对象增加新的静态方法，用于从raw或者html内容创建ediorState
+EditorState.createFrom = (content, options) => {
+
+  if (typeof content === 'object' && content && content.blocks && content.entityMap) {
+    return convertRawToEditorState(content, editorDecorators)
+  } else if (typeof content === 'string') {
+    try {
+      return EditorState.createFrom(JSON.parse(content), options)
+    } catch (error) {
+      return convertHTMLToEditorState(content, editorDecorators, options)
+    }
+  } else {
+    return EditorState.createEmpty(editorDecorators)
+  }
+
+}
+
+export default BraftEditor
+export { EditorState, editorDecorators }
+
+// 2.0.0开发计划
+// [ ]完善各模块文档说明
+// [√]添加更多钩子（插入链接、切换样式等）
+// [√]优化内置的图片伪上传功能，用base64代替blob
+// [√]支持自定义图片工具栏按钮
+// [√]支持通过属性扩展customStyleMap, blockStyleFn, keyBindingFn, blockRendererFn, blockRenderMap等
+// [√]允许完全设置控制栏的按钮（['media', { key: 'blod', text: 'xxx' }）
+// [√]允许在工具栏和内容区域直接插入自定义的组件[componentBelowControlBar]
+// [√]支持定义DropDown组件的样式
+// [√]media.validateFn支持异步函数
+// [√]优化音视频在编辑器内的预览体验
+// [√]标准化代码，引入ESLint
+// ---------------------------
+// 优化全选会选择上传中的项目的问题
+// 支持param.success时设置媒体文件的更多属性（尺寸等）
+
+// 2.1.0版本开发计划
+// [ ]美化UI，包括图标和界面风格
+// [ ]优化控件title提示
+
+// 2.2.0版本开发计划
+// [ ]允许自定义快捷键
+// [ ]优化图片param.success，支持传入link等
+// [ ]简化上传配置流程
+// [ ]支持draftjs插件机制
+// [ ]支持媒体库组件的更多个性化配置（placeholder等）
+// [ ]支持非媒体类附件
+// [ ]优化HTML格式无法存储媒体名称的问题 
+// [ ]完成font-size等样式的全量支持
+
+// 2.3.0版本开发计划
+// [ ]优化换行与空格
+// [ ]支持自定义Atomic组件
+// [ ]图片裁切等简单的编辑功能
+// [ ]代码块交互强化
+// [ ]初级表格功能

source/braft-editor/src/languages/en.js

@@ -0,0 +1,70 @@
+export default {
+  base: {
+    remove: 'Remove',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    inert: 'Insert',
+    width: 'Width',
+    height: 'Height'
+  },
+  controls: {
+    clear: 'Clear',
+    undo: 'Undo',
+    redo: 'Redo',
+    fontSize: 'Font Size',
+    color: 'Color',
+    textColor: 'Text',
+    tempColors: 'Temp Colors',
+    backgroundColor: 'Background',
+    bold: 'Bold',
+    lineHeight:'Line Height',
+    letterSpacing:'Letter Spacing',
+    textIndent:'Indent at both ends',
+    italic: 'Italic',
+    underline: 'Underline',
+    strikeThrough: 'Strike Through',
+    fontFamily: 'Font Family',
+    textAlign: 'Text Alignment',
+    alignLeft: 'Left Alignment',
+    alignCenter: 'Center Alignment',
+    alignRight: 'Right Alignment',
+    alignJustify: 'Justify Alignment',
+    floatLeft: 'Left Float',
+    floatRight: 'Right Float',
+    superScript: 'Super Script',
+    subScript: 'Sub Script',
+    removeStyles: 'Remove Styles',
+    headings: 'Headings',
+    header: 'Header',
+    normal: 'Normal',
+    orderedList: 'Ordered List',
+    unorderedList: 'Unordered List',
+    blockQuote: 'Quote',
+    code: 'Code',
+    link: 'Link',
+    unlink: 'Unlink',
+    hr: 'Horizontal Line',
+    media: 'Media',
+    mediaLibirary: 'Media Libirary',
+    emoji: 'Emoji'
+  },
+  linkEditor: {
+    inputPlaceHolder: 'Input link URL',
+    inputWithEnterPlaceHolder: 'Input link URL and press Enter',
+    openInNewWindow: 'Open in new window',
+    removeLink: 'Remove Link'
+  },
+  audioPlayer: {
+    title: 'Play Audio'
+  },
+  videoPlayer: {
+    title: 'Play Video',
+    embedTitle: 'Embed Media'
+  },
+  media: {
+    image: 'Image',
+    video: 'Video',
+    audio: 'Audio',
+    embed: 'Embed'
+  }
+}

source/braft-editor/src/languages/index.js

@@ -0,0 +1,9 @@
+import en from './en'
+import zh from './zh'
+import zhHant from './zh-hant'
+
+export default {
+  'en': en,
+  'zh': zh,
+  'zh-hant': zhHant
+}

source/braft-editor/src/languages/zh-hant.js

@@ -0,0 +1,71 @@
+export default {
+  base: {
+    remove: '刪除',
+    cancel: '取消',
+    confirm: '確定',
+    inert: '插入',
+    width: '宽度',
+    height: '高度'
+  },
+  controls: {
+    clear: '清除内容',
+    undo: '撤銷',
+    redo: '重做',
+    fontSize: '字號',
+    color: '顏色',
+    textColor: '文字顏色',
+    backgroundColor: '背景顏色',
+    tempColors: '臨時顏色',
+    bold: '加粗',
+    lineHeight: '行高',
+    letterSpacing: '字間距',
+    textIndent: '兩端縮進',
+    border: '邊框',
+    italic: '斜體',
+    underline: '下劃線',
+    strikeThrough: '刪除線',
+    fontFamily: '字體',
+    textAlign: '文本對齊',
+    alignLeft: '居左',
+    alignCenter: '居中',
+    alignRight: '居右',
+    alignJustify: '兩端對齊',
+    floatLeft: '左浮動',
+    floatRight: '右浮動',
+    superScript: '上標',
+    subScript: '下標',
+    removeStyles: '清除样式',
+    headings: '標題',
+    header: '標題',
+    normal: '常規',
+    orderedList: '有序列表',
+    unorderedList: '無序列表',
+    blockQuote: '引用',
+    code: '代碼',
+    link: '鏈接',
+    unlink: '清除鏈接',
+    hr: '水平线',
+    media: '媒體',
+    mediaLibirary: '媒體库',
+    emoji: '小表情'
+  },
+  linkEditor: {
+    inputPlaceHolder: '輸入鏈接地址',
+    inputWithEnterPlaceHolder: '輸入鏈接地址並回車',
+    openInNewWindow: '在新窗口打開',
+    removeLink: '移除鏈接'
+  },
+  audioPlayer: {
+    title: '播放音頻文件'
+  },
+  videoPlayer: {
+    title: '播放視頻文件',
+    embedTitle: '嵌入式媒體'
+  },
+  media: {
+    image: '圖像',
+    video: '視頻',
+    audio: '音頻',
+    embed: '嵌入式媒體'
+  }
+}

source/braft-editor/src/languages/zh.js

@@ -0,0 +1,71 @@
+export default {
+  base: {
+    remove: '删除',
+    cancel: '取消',
+    confirm: '确定',
+    inert: '插入',
+    width: '宽度',
+    height: '高度'
+  },
+  controls: {
+    clear: '清除内容',
+    undo: '撤销',
+    redo: '重做',
+    fontSize: '字号',
+    lineHeight: '行高',
+    letterSpacing: '字间距',
+    textIndent: '两端缩进',
+    border: '边框',
+    color: '颜色',
+    textColor: '文字颜色',
+    backgroundColor: '背景颜色',
+    tempColors: '临时颜色',
+    bold: '加粗',
+    italic: '斜体',
+    underline: '下划线',
+    strikeThrough: '删除线',
+    fontFamily: '字体',
+    textAlign: '文本对齐',
+    alignLeft: '居左',
+    alignCenter: '居中',
+    alignRight: '居右',
+    alignJustify: '两端',
+    floatLeft: '左浮动',
+    floatRight: '右浮动',
+    superScript: '上标',
+    subScript: '下标',
+    removeStyles: '清除样式',
+    headings: '标题',
+    header: '标题',
+    normal: '常规',
+    orderedList: '有序列表',
+    unorderedList: '无序列表',
+    blockQuote: '引用',
+    code: '代码',
+    link: '链接',
+    unlink: '清除链接',
+    hr: '水平线',
+    media: '媒体',
+    mediaLibirary: '媒体库',
+    emoji: '小表情'
+  },
+  linkEditor: {
+    inputPlaceHolder: '输入链接地址',
+    inputWithEnterPlaceHolder: '输入链接地址并回车',
+    openInNewWindow: '在新窗口打开',
+    removeLink: '移除链接'
+  },
+  audioPlayer: {
+    title: '播放音频文件'
+  },
+  videoPlayer: {
+    title: '播放视频文件',
+    embedTitle: '嵌入式媒体'
+  },
+  media: {
+    image: '图像',
+    video: '视频',
+    audio: '音频',
+    embed: '嵌入式媒体'
+  }
+}

source/braft-editor/src/renderers/atomics/Audio/index.jsx

@@ -0,0 +1,53 @@
+import './style.scss'
+import React from 'react'
+import StaticContainer from 'components/common/StaticContainer'
+import { ContentUtils } from 'braft-utils'
+
+export default class Audio extends React.Component {
+
+  state = {
+    toolbarVisible: false,
+  }
+
+  render () {
+
+    const { toolbarVisible } = this.state
+    const { mediaData } = this.props
+    const { src, url } = mediaData
+
+    return (
+      <div
+        className='bf-audio'
+        onMouseOver={this.showToolbar}
+        onMouseLeave={this.hideToolbar}
+      >
+        <StaticContainer>
+          <audio controls src={src || url}/>
+        </StaticContainer>
+        {toolbarVisible ? (
+          <div className='bf-media-toolbar'>
+            <a onClick={this.removeAudio}>&#xe9ac;</a>
+          </div>
+        ) : null}
+      </div>
+    )
+
+  }
+
+  removeAudio = () => {
+    this.props.editor.setValue(ContentUtils.removeBlock(this.props.editorState, this.props.block))
+  }
+
+  showToolbar = () => {
+    this.setState({
+      toolbarVisible: true
+    })
+  }
+
+  hideToolbar = () => {
+    this.setState({
+      toolbarVisible: false
+    })
+  }
+
+}

source/braft-editor/src/renderers/atomics/Audio/style.scss

@@ -0,0 +1,12 @@
+@import '~scssinc';
+
+.bf-audio{
+  position: relative;
+  display: block;
+  margin: 10px 0;
+  background-color: #f1f2f3;
+  audio{
+    display: block;
+    width: 100%;
+  }
+}

source/braft-editor/src/renderers/atomics/Embed/index.jsx

@@ -0,0 +1,53 @@
+import './style.scss'
+import React from 'react'
+import StaticContainer from 'components/common/StaticContainer'
+import { ContentUtils } from 'braft-utils'
+
+export default class Embed extends React.Component {
+
+  state = {
+    toolbarVisible: false,
+  }
+
+  render () {
+
+    const { toolbarVisible } = this.state
+    const { mediaData } = this.props
+    const { src, url } = mediaData
+
+    return (
+      <div
+        className='bf-embed'
+        onMouseOver={this.showToolbar}
+        onMouseLeave={this.hideToolbar}
+      >
+        <StaticContainer>
+          <div className='bf-embed-player' dangerouslySetInnerHTML={{ __html: src || url}}></div>
+        </StaticContainer>
+        {toolbarVisible ? (
+          <div className='bf-media-toolbar'>
+            <a onClick={this.removeEmbed}>&#xe9ac;</a>
+          </div>
+        ) : null}
+      </div>
+    )
+
+  }
+
+  removeEmbed = () => {
+    this.props.editor.setValue(ContentUtils.removeBlock(this.props.editorState, this.props.block))
+  }
+
+  showToolbar = () => {
+    this.setState({
+      toolbarVisible: true
+    })
+  }
+
+  hideToolbar = () => {
+    this.setState({
+      toolbarVisible: false
+    })
+  }
+
+}

source/braft-editor/src/renderers/atomics/Embed/style.scss

@@ -0,0 +1,13 @@
+@import '~scssinc';
+
+.bf-embed{
+  position: relative;
+  display: block;
+  margin: 10px 0;
+  overflow: hidden;
+  background-color: #f1f2f3;
+  iframe, embed{
+    width: 100%;
+    margin: 0 auto;
+  }
+}

source/braft-editor/src/renderers/atomics/HorizontalLine/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ContentUtils } from 'braft-utils'
+import './style.scss'
+
+export default class HorizontalLine extends React.Component {
+
+  render () {
+
+    return (
+      <div className='bf-hr'>
+        <div className='bf-media-toolbar'>
+          <a onClick={this.removeHorizontalLine}>&#xe9ac;</a>
+        </div>
+      </div>
+    )
+
+  }
+
+  removeHorizontalLine = () => {
+    this.props.editor.setValue(ContentUtils.removeBlock(this.props.editorState, this.props.block))
+  }
+
+}

source/braft-editor/src/renderers/atomics/HorizontalLine/style.scss

@@ -0,0 +1,26 @@
+@import '~scssinc';
+
+.bf-hr{
+  position: relative;
+  box-sizing: content-box;
+  height: 15px;
+  padding-top: 15px;
+  text-align: center;
+  &::before{
+    display: block;
+    height: 1px;
+    background-color: rgba(#000, .1);
+    content: '';
+  }
+  &:hover {
+    &::before {
+      background-color: rgba(#000, .3);
+    }
+    .bf-media-toolbar{
+      display: block;
+    }
+  }
+  .bf-media-toolbar{
+    display: none;
+  }
+}

source/braft-editor/src/renderers/atomics/Image/index.jsx

@@ -0,0 +1,324 @@
+import './style.scss'
+import React from 'react'
+import { ContentUtils } from 'braft-utils'
+import Switch from 'components/common/Switch'
+import { imageControlItems } from 'configs/controls'
+
+export default class Image extends React.Component {
+
+  state = {
+    toolbarVisible: false,
+    toolbarOffset: 0,
+    linkEditorVisible: false,
+    sizeEditorVisible: false,
+    tempLink: null,
+    tempWidth: null,
+    tempHeight: null
+  }
+
+  render () {
+
+    const { mediaData, language, imageControls } = this.props
+    const { toolbarVisible, toolbarOffset, linkEditorVisible, sizeEditorVisible } = this.state
+    const blockData = this.props.block.getData()
+
+    let float = blockData.get('float')
+    let alignment = blockData.get('alignment')
+    let { src, url, link, link_target, width, height } = mediaData
+    let imageStyles = {}
+    let clearFix = false
+
+    if (float) {
+      alignment = null
+    } else if (alignment === 'left') {
+      imageStyles.float = 'left'
+      clearFix = true
+    } else if (alignment === 'right') {
+      imageStyles.float = 'right'
+      clearFix = true
+    } else if (alignment === 'center') {
+      imageStyles.textAlign = 'center'
+    } else {
+      imageStyles.float = 'left'
+      clearFix = true
+    }
+
+    const renderedControlItems = imageControls.map((item, index) => {
+
+      if (typeof item === 'string' && imageControlItems[item]) {
+        return (
+          <a className={item === 'link' && link ? 'active' : ''} key={index} href='javascript:void(0);' onClick={() => this.executeCommand(imageControlItems[item].command)}>
+            {imageControlItems[item].text}
+          </a>
+        )
+      } else if (item && item.onClick && (item.render || item.text)) {
+        return (
+          <a key={index} href='javascript:void(0);' onClick={() => this.executeCommand(item.onClick)}>
+            {item.render ? item.render(mediaData) : item.text}
+          </a>
+        )
+      } else {
+        return null
+      }
+
+    })
+
+    return (
+      <div className='bf-media'>
+        <div
+          style={imageStyles}
+          draggable={true}
+          onMouseEnter={this.showToolbar}
+          onMouseMove={this.showToolbar}
+          onMouseLeave={this.hideToolbar}
+          onDragStart={this.handleDragStart}
+          onDragEnd={this.handleDragEnd}
+          ref={instance => this.mediaEmbederInstance = instance}
+          className='bf-image'
+        >
+          {toolbarVisible ? (
+            <div
+              style={{marginLeft: toolbarOffset}}
+              ref={instance => this.toolbarElement = instance}
+              data-float={float}
+              data-align={alignment}
+              className='bf-media-toolbar'
+            >
+              {linkEditorVisible ? (
+                <div className='bf-image-link-editor'>
+                  <div className='editor-input-group'>
+                    <input type='text' placeholder={language.linkEditor.inputWithEnterPlaceHolder} onKeyDown={this.handleLinkInputKeyDown} onChange={this.setImageLink} defaultValue={link}/>
+                    <button type='button' onClick={this.confirmImageLink}>{language.base.confirm}</button>
+                  </div>
+                  <div className='switch-group'>
+                    <Switch
+                      active={link_target === '_blank'}
+                      onClick={() => this.setImageLinkTarget(link_target)}
+                    />
+                    <label>{language.linkEditor.openInNewWindow}</label>
+                  </div>
+                </div>
+              ) : null}
+              {sizeEditorVisible ? (
+                <div className='bf-image-size-editor'>
+                  <div className='editor-input-group'>
+                    <input type='text' placeholder={language.base.width} onKeyDown={this.handleSizeInputKeyDown} onChange={this.setImageWidth} defaultValue={width}/>
+                    <input type='text' placeholder={language.base.height} onKeyDown={this.handleSizeInputKeyDown} onChange={this.setImageHeight} defaultValue={height}/>
+                    <button type='button' onClick={this.confirmImageSize}>{language.base.confirm}</button>
+                  </div>
+                </div>
+              ) : null}
+              {renderedControlItems}
+              <i style={{marginLeft: toolbarOffset * -1}} className='bf-media-toolbar-arrow'></i>
+            </div>
+          ) : null}
+          <img
+            ref={instance => this.imageElement = instance}
+            src={src || url} style={{width, height}} width={width} height={height}
+          />
+        </div>
+        {clearFix && <div className='clearfix' style={{clear:'both',height:0,lineHeight:0,float:'none'}}></div>}
+      </div>
+    )
+
+  }
+
+  calcToolbarOffset () {
+
+    if (!this.props.containerNode) {
+      return 0
+    }
+
+    const viewRect = this.props.containerNode.getBoundingClientRect()
+    const toolbarRect = this.toolbarElement.getBoundingClientRect()
+    const imageRect = this.imageElement.getBoundingClientRect()
+
+    const right = viewRect.right - (imageRect.right - imageRect.width / 2 + toolbarRect.width / 2)
+    const left = (imageRect.left + imageRect.width / 2 - toolbarRect.width / 2) - viewRect.left
+
+    if (right < 10) {
+      return right - 10
+    } else if (left < 10) {
+      return left * -1 + 10
+    } else {
+      return 0
+    }
+
+  }
+
+  handleDragStart = () => {
+
+    window.__BRAFT_DRAGING__IMAGE__ = {
+      block: this.props.block,
+      mediaData: {
+        type: 'IMAGE',
+        ...this.props.mediaData
+      }
+    }
+
+    this.setState({
+      toolbarVisible: false
+    }, () => {
+      this.props.editor.setDraftProps({ readOnly: false })
+    })
+
+    return true
+
+  }
+
+  handleDragEnd = () => {
+
+    window.__BRAFT_DRAGING__IMAGE__ = null
+    return false
+
+  }
+
+  executeCommand = (command) => {
+    if (typeof command === 'string') {
+      const [method, param] = command.split('|')
+      this[method] && this[method](param)
+    } else if (typeof command === 'function') {
+      command(this.props.block, this.props.editorState)
+    }
+  }
+
+  removeImage = () => {
+    this.props.editor.setValue(ContentUtils.removeBlock(this.props.editorState, this.props.block))
+    this.props.editor.setDraftProps({ readOnly: false })
+  }
+
+  toggleLinkEditor = () => {
+    this.setState({
+      linkEditorVisible: !this.state.linkEditorVisible,
+      sizeEditorVisible: false
+    })
+  }
+
+  toggleSizeEditor = () => {
+    this.setState({
+      linkEditorVisible: false,
+      sizeEditorVisible: !this.state.sizeEditorVisible
+    })
+  }
+
+  handleLinkInputKeyDown = (e) => {
+
+    if (e.keyCode === 13) {
+      this.confirmImageLink()
+    } else {
+      return
+    }
+
+  }
+
+  setImageLink = (e) => {
+    this.setState({ tempLink: e.currentTarget.value })
+    return
+  }
+
+  setImageLinkTarget (link_target) {
+
+    link_target = link_target === '_blank' ? '' : '_blank'
+    this.props.editor.setValue(ContentUtils.setMediaData(this.props.editorState, this.props.entityKey, { link_target }))
+    window.setImmediate(this.props.editor.forceRender)
+
+  }
+
+  confirmImageLink = () => {
+
+    const { tempLink: link } = this.state
+
+    if (link !== null) {
+      this.props.editor.setValue(ContentUtils.setMediaData(this.props.editorState, this.props.entityKey, { link }))
+      window.setImmediate(this.props.editor.forceRender)
+    }
+
+  }
+
+  handleSizeInputKeyDown = (e) => {
+    if (e.keyCode === 13) {
+      this.confirmImageSize()
+    } else {
+      return
+    }
+  }
+
+  setImageWidth = ({ currentTarget }) => {
+
+    let { value } = currentTarget
+
+    value && !isNaN(value) && (value = value + 'px')
+
+    this.setState({
+      tempWidth: value
+    })
+
+    return
+
+  }
+
+  setImageHeight = ({ currentTarget }) => {
+
+    let { value } = currentTarget
+
+    value && !isNaN(value) && (value = value + 'px')
+
+    this.setState({
+      tempHeight: value
+    })
+
+    return
+
+  }
+
+  confirmImageSize = () => {
+
+    const { tempWidth: width, tempHeight: height } = this.state
+    const newImageSize = {}
+
+    width !== null && (newImageSize.width = width)
+    height !== null && (newImageSize.height = height)
+
+    this.props.editor.setValue(ContentUtils.setMediaData(this.props.editorState, this.props.entityKey, newImageSize))
+    window.setImmediate(this.props.editor.forceRender)
+
+  }
+
+  setImageFloat = (float) => {
+    this.props.editor.setValue(ContentUtils.setMediaPosition(this.props.editorState, this.props.block, { float }))
+    this.props.editor.setDraftProps({ readOnly: false })
+  }
+
+  setImageAlignment = (alignment) => {
+    this.props.editor.setValue(ContentUtils.setMediaPosition(this.props.editorState, this.props.block, { alignment }))
+    this.props.editor.setDraftProps({ readOnly: false })
+  }
+
+  showToolbar = (event) => {
+
+    event.preventDefault()
+
+    if (!this.state.toolbarVisible) {
+      this.setState({
+        toolbarVisible: true
+      }, () => {
+        this.props.editor.setDraftProps({ readOnly: true })
+        this.setState({ toolbarOffset: this.calcToolbarOffset() })
+      })
+    }
+
+  }
+
+  hideToolbar = (event) => {
+
+    event.preventDefault()
+
+    this.setState({
+      toolbarVisible: false
+    }, () => {
+      this.props.editor.setDraftProps({ readOnly: false })
+    })
+
+  }
+
+}

source/braft-editor/src/renderers/atomics/Image/style.scss

@@ -0,0 +1,89 @@
+@import '~scssinc';
+.bf-image-size-editor,
+.bf-image-link-editor{
+  padding-bottom: 1px;
+  overflow: hidden;
+  border-radius: 2px 2px 0 0;
+  box-shadow: inset 0 -1px 0 0 rgba(#fff, .1);
+  .editor-input-group{
+    width: 300px;
+    margin: 8px 10px;
+    overflow: hidden;
+  }
+  input{
+    display: block;
+    float: left;
+    box-sizing: content-box;
+    height: 32px;
+    margin: 0 5px 0 0;
+    padding: 0 10px;
+    background-color: rgba(#fff, .1);
+    border: none;
+    border-radius: 2px;
+    outline: none;
+    box-shadow: inset 0 0 0 1px rgba(#fff, .1);
+    color: #fff;
+    font-weight: bold;
+    &:hover{
+      box-shadow: inset 0 0 0 1px rgba($COLOR_ACTIVE, .5);
+    }
+    &:focus{
+      box-shadow: inset 0 0 0 1px rgba($COLOR_ACTIVE, 1);
+    }
+  }
+  button{
+    float: left;
+    width: 60px;
+    height: 32px;
+    margin: 0;
+    padding: 0 20px;
+    background-color: $COLOR_ACTIVE;
+    border: none;
+    color: #fff;
+    font-size: 12px;
+    border-radius: 2px;
+    cursor: pointer;
+    &:hover{
+      background-color: $COLOR_ACTIVE - 20;
+    }
+  }
+}
+.bf-image-size-editor{
+  input{
+    width: 95px;      
+  }
+}
+.bf-image-link-editor{
+  input{
+    width: 215px;
+  }
+  .switch-group{
+    height: 20px;
+    margin: 10px 10px;
+    .bf-switch{
+      float: left;
+    }
+    label{
+      float: left;
+      margin-left: 15px;
+      color: #999;
+      font-size: 12px;
+      line-height: 20px;      
+    }
+  }
+}
+
+.bf-image{
+  .bf-media-toolbar{
+    &::before{
+      visibility: hidden;
+    }
+    &[data-float="left"] [data-float="left"],
+    &[data-float="right"] [data-float="right"],
+    &[data-align="left"] [data-align="left"],
+    &[data-align="center"] [data-align="center"],
+    &[data-align="right"] [data-align="right"] {
+      color: $COLOR_ACTIVE;
+    }
+  }
+}

source/braft-editor/src/renderers/atomics/Video/index.jsx

@@ -0,0 +1,53 @@
+import './style.scss'
+import React from 'react'
+import StaticContainer from 'components/common/StaticContainer'
+import { ContentUtils } from 'braft-utils'
+
+export default class Video extends React.Component {
+
+  state = {
+    toolbarVisible: false,
+  }
+
+  render () {
+
+    const { toolbarVisible } = this.state
+    const { mediaData } = this.props
+    const { src, url, meta } = mediaData
+
+    return (
+      <div
+        className='bf-video'
+        onMouseOver={this.showToolbar}
+        onMouseLeave={this.hideToolbar}
+      >
+        <StaticContainer>
+          <video controls src={src || url} poster={meta.poster}/>
+        </StaticContainer>
+        {toolbarVisible ? (
+          <div className='bf-embed-toolbar'>
+            <a onClick={this.removeVideo}>&#xe9ac;</a>
+          </div>
+        ) : null}
+      </div>
+    )
+
+  }
+
+  removeVideo = () => {
+    this.props.editor.setValue(ContentUtils.removeBlock(this.props.editorState, this.props.block))
+  }
+
+  showToolbar = () => {
+    this.setState({
+      toolbarVisible: true
+    })
+  }
+
+  hideToolbar = () => {
+    this.setState({
+      toolbarVisible: false
+    })
+  }
+
+}

source/braft-editor/src/renderers/atomics/Video/style.scss

@@ -0,0 +1,16 @@
+@import '~scssinc';
+
+.bf-video{
+  position: relative;
+  display: block;
+  height: 480px;
+  margin: 10px 0;
+  overflow: hidden;
+  video{
+    display: block;
+    width: 100%;
+    height: 480px;
+    background-color: #000;
+    object-fit: contain;
+  }
+}

source/braft-editor/src/renderers/decorators/Link/index.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+function handleStrategy (contentBlock, callback, contentState) {
+
+  contentBlock.findEntityRanges((character) => {
+    const entityKey = character.getEntity()
+    return (
+      entityKey !== null &&
+      contentState.getEntity(entityKey).getType() === 'LINK'
+    )
+  }, callback)
+
+}
+
+const Link = (props) => {
+
+  const { children, entityKey, contentState } = props
+  const { href, target } = contentState.getEntity(entityKey).getData()
+
+  return (
+    <span className='bf-link-wrap'>
+      <a onClick={(event) => viewLink(event, href)} className='bf-link' href={href} target={target}>{children}</a>
+    </span>
+  )
+
+}
+
+const viewLink = (event, link) => {
+  if (event.getModifierState('Shift')) {
+    const tempLink = document.createElement('a')
+    tempLink.href = link
+    tempLink.target = '_blank'
+    tempLink.click()
+  }
+}
+
+export default {
+  strategy: handleStrategy,
+  component: Link
+}

source/braft-editor/src/renderers/decorators/index.js

@@ -0,0 +1,3 @@
+import Link from './Link'
+
+export default [Link]

source/braft-editor/src/renderers/index.js

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Map } from 'immutable'
+import { DefaultDraftBlockRenderMap } from 'draft-js'
+import Image from './atomics/Image'
+import Video from './atomics/Video'
+import Audio from './atomics/Audio'
+import Embed from './atomics/Embed'
+import HorizontalLine from './atomics/HorizontalLine'
+import _getBlockStyleFn from './styles/blockStyles'
+import _getCustomStyleMap from './styles/inlineStyles'
+import _decorators from './decorators'
+
+const getAtomicBlockComponent = (block, superProps) => (props) => {
+
+  const entityKey = props.block.getEntityAt(0)
+
+  if (!entityKey) {
+    return null
+  }
+
+  const entity = props.contentState.getEntity(entityKey)
+  const mediaData = entity.getData()
+  const mediaType = entity.getType()
+  const mediaProps = {
+    ...superProps,
+    block, mediaData, entityKey
+  }
+
+  if (mediaType === 'IMAGE') {
+    return <Image { ...mediaProps } />
+  } else if (mediaType === 'AUDIO') {
+    return <Audio { ...mediaProps } />
+  } else if (mediaType === 'VIDEO') {
+    return <Video { ...mediaProps } />
+  } else if (mediaType === 'EMBED') {
+    return <Embed { ...mediaProps } />
+  } else if (mediaType === 'HR') {
+    return <HorizontalLine { ...mediaProps } />
+  }
+
+  if (superProps.extendAtomics) {
+    const atomics = superProps.extendAtomics
+    for (let i = 0; i < atomics.length; i++) {
+      if (mediaType === atomics[i].type) {
+        const Component = atomics[i].component
+        return <Component {...mediaProps} />
+      }
+    }
+  }
+
+  return null
+
+}
+
+export const getBlockRendererFn = (props, customBlockRendererFn) => (block) => {
+
+  let blockRenderer = null
+
+  if (block.getType() === 'atomic') {
+
+    blockRenderer = {
+      component: getAtomicBlockComponent(block, props),
+      editable: false
+    }
+
+  } else if (customBlockRendererFn) {
+    blockRenderer = customBlockRendererFn(block) || null
+  }
+
+  return blockRenderer
+
+}
+
+export const customBlockRenderMap = Map({
+  'atomic': {
+    element: ''
+  },
+  'code-block': {
+    element: 'code',
+    wrapper: DefaultDraftBlockRenderMap.get('code-block').wrapper
+  }
+})
+
+export const getBlockStyleFn = _getBlockStyleFn
+export const getCustomStyleMap = _getCustomStyleMap
+export const decorators = _decorators

source/braft-editor/src/renderers/styles/blockStyles.js

@@ -0,0 +1,22 @@
+export default (customBlockStyleFn) => (block) => {
+
+  const blockAlignment = block.getData() && block.getData().get('textAlign')
+  const blockFloat = block.getData() && block.getData().get('float')
+
+  let result = ''
+
+  if (blockAlignment) {
+    result = `bfa-${blockAlignment}`
+  }
+
+  if (blockFloat) {
+    result += ` bff-${blockFloat}`
+  }
+
+  if (customBlockStyleFn) {
+    result += customBlockStyleFn(block)
+  }
+
+  return result
+
+}

source/braft-editor/src/renderers/styles/inlineStyles.js

@@ -0,0 +1,59 @@
+export default (props, customStyles = {}) => {
+
+  const colorStyles = {}
+  const bgColorStyles = {}
+  const fontSizeStyles = {}
+  const fontFamilyStyles = {}
+  const lineHeightStyles = {}
+  const letterSpacingtStyles = {}
+  const indentStyles = {}
+
+  props.colors.forEach((color) => {
+    let color_id = color.replace('#', '').toUpperCase()
+    colorStyles['COLOR-' + color_id] = { color }
+    bgColorStyles['BGCOLOR-' + color_id] = { backgroundColor: color }
+  })
+
+  props.fontSizes.forEach((fontSize) => {
+    fontSizeStyles['FONTSIZE-' + fontSize] = { fontSize: fontSize }
+  })
+
+  props.fontFamilies.forEach((fontFamily) => {
+    fontFamilyStyles['FONTFAMILY-' + fontFamily.name.toUpperCase()] = {
+      fontFamily: fontFamily.family
+    }
+  })
+
+  props.lineHeights.forEach((lineHeight) => {
+    lineHeightStyles['LINEHEIGHT-' + lineHeight] = { lineHeight: lineHeight }
+  })
+
+  props.letterSpacings.forEach((letterSpacing) => {
+    letterSpacingtStyles['LETTERSPACING-' + letterSpacing] = { letterSpacing: letterSpacing }
+  })
+  props.textIndents.forEach((indent) => {
+    indentStyles['INDENT-' + indent] = { paddingLeft: indent, paddingRight: indent}
+  })
+  
+  return {
+    'SUPERSCRIPT': {
+      position: 'relative',
+      top: '-8px',
+      fontSize: '11px'
+    },
+    'SUBSCRIPT': {
+      position: 'relative',
+      bottom: '-8px',
+      fontSize: '11px'
+    },
+    ...colorStyles,
+    ...bgColorStyles,
+    ...fontSizeStyles,
+    ...fontFamilyStyles,
+    ...lineHeightStyles,
+    ...letterSpacingtStyles,
+    ...indentStyles,
+    ...customStyles
+  }
+
+}