dante2-editor 0.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b78a4eed0a1ef6eeae30783c70c7292b850998e2
+  data.tar.gz: 5ec8a4832a950e7450e99f8bd38b108b8721153b
+SHA512:
+  metadata.gz: f608f000bc57b9e234cfd10f2f2de4e021f8c49267611bf841c636fdc9e63a9ff2a5e78599747cb4eac18dde96efed4addf0a00fc87b439e4d40186b2d63a817
+  data.tar.gz: fa07fc3b9af66474ee8f8fa069cf6c5071b08f06fbed561538bceef8a6106ad3b788c08e18b2cd7187eea6ad7cbc85cfbb4b2944ca5a481d30bb438a2617e6fb

data/.gitignore

@@ -0,0 +1,33 @@
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.vi
+*~
+*.sass-cache
+
+# OS or Editor folders
+.DS_Store
+.cache
+.project
+.settings
+.tmproj
+nbproject
+Thumbs.db
+
+# NPM packages folder.
+node_modules/
+
+# Brunch folder for temporary files.
+tmp/
+/pkg/
+
+# Brunch output folder.
+public/
+
+# Bower stuff.
+bower_components/

data/Gemfile

@@ -0,0 +1,25 @@
+# If you have OpenSSL installed, we recommend updating
+# the following line to use "https"
+source 'http://rubygems.org'
+
+#gem "therubyracer"
+# gem "middleman", "~>3.1.4"
+
+# Live-reloading plugin
+# gem "middleman-livereload", "~> 3.1.0"
+# gem 'middleman-gh-pages'
+# For faster file watcher updates on Windows:
+# gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
+# gem "github-markup"
+# gem "redcarpet"
+gem "sinatra"
+gem 'sinatra-contrib'
+gem "pry"
+gem 'rack-cors', :require => 'rack/cors'
+
+#gemspec
+
+# Cross-templating language block fix for Ruby 1.8
+#platforms :mri_18 do
+#  gem "ruby18_source_location"
+#end

data/Gemfile.lock

@@ -0,0 +1,42 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    backports (3.6.8)
+    coderay (1.1.1)
+    method_source (0.8.2)
+    multi_json (1.12.1)
+    pry (0.10.4)
+      coderay (~> 1.1.0)
+      method_source (~> 0.8.1)
+      slop (~> 3.4)
+    rack (1.6.4)
+    rack-cors (0.4.0)
+    rack-protection (1.5.3)
+      rack
+    rack-test (0.6.3)
+      rack (>= 1.0)
+    sinatra (1.4.7)
+      rack (~> 1.5)
+      rack-protection (~> 1.4)
+      tilt (>= 1.3, < 3)
+    sinatra-contrib (1.4.7)
+      backports (>= 2.0)
+      multi_json
+      rack-protection
+      rack-test
+      sinatra (~> 1.4.0)
+      tilt (>= 1.3, < 3)
+    slop (3.6.0)
+    tilt (2.0.5)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  pry
+  rack-cors
+  sinatra
+  sinatra-contrib
+
+BUNDLED WITH
+   1.10.6

data/README.md

@@ -0,0 +1,107 @@
+# Dante II - The rematch
+
+## just another medium clone built on top of DraftJs
+
+> Dante II is a complete rewrite of [DanteEditor](https://michelson.github.io/Dante). This version is built on top of Facebook's Draft-Js and reaches all Dante's features with a shiny ultra mega super uber maintainable architecture.
+
+See the demo at: [https://michelson.github.io/dante2/](https://michelson.github.io/dante2/)
+
+## Why rewrite a new version of Dante?
+
+The previous version of Dante relies a lot on DOM manipulation which causes a mix of presentation and logic. Even with their modular plugin system this condition suppose an sphagetti model to work with on every feature. The biggest problem with this approach is: if you want to make a change that affects the presentation of your users content, let's say you might want to change the default markup for paragraphs, you'll probably end updating all your content in your database, because dealing with "DOM only" suppose that you are going to save html into database, right ?
+
+
+## A redesign was needed!
+
+Draft-Js handles selection, ranges and markup blocks as a data layer contained in a structure known as editorState, with a clear separation on how rendering, styling and interaction works. So you save content data, not html. That's awesome because you can change the appearance of articles (styles & markup) without database changes.
+
+In Draft every change provided from user input is stacked in this editorState building an history of changes, out of the box. This means that pasting, undo/redo and replace/insert blocks at certain selection points are basically calls to the DraftJs API that updates the editorState without DOM manipulation. Also, all the custom blocks are composed as React components!. So, this version have some dependencies which are included in source. DraftJs, React, Immutable. no Jquery.
+
+**New Features:**
++ Improved undo/redo.
++ Save Content as a data JSON structure.
++ Load Content as a data JSON structure.
++ Handle image blocks on Copy/Paste and Drop.
++ Global storage lock to handle file uploads.
+
+**Features**:
+
++ Image upload for paste html.
++ Image upload for legacy images on existent texts.
++ The medium (+) Tooltip to embed or upload media.
++ Tab navigation.
++ Pluggins are React components
+
+**Embeds**:
+
++ Image Uploader with preview and caption option with a lock system.
++ Embed data for pasted link through OEmbed services.
++ Embed media information for pasted links through OEmbed services.
++ Add or remove tooltip buttons with ease with plugin system.
++ Add custom blocks many with custom options
+
+
+## Usage
+
+The interface to initialize is almost the Dante as the previous version.
+
+
+```javascript
+new Dante({   
+  upload_url: "http://localhost:9292/uploads/new",    
+  store_url: "http://localhost:3333/store.json",    
+  el: "app"  
+ })
+
+```
+
+### Options:
+
+Many configuration options and plugin usage in the documentation page:
+
+See [https://michelson.github.io/dante2/doc.html](https://michelson.github.io/dante2/doc.html)
+
+
+### Installation for development
+
+**node + webpack**
+ 
++ `npm install or yarn install`
+
+
+#### Development: 
+
++ `npm start` or `yarn start`
+
+Then open http://localhost:8080 
+
+
+#### Build
+
++ `npm build` or `yarn build`
+
+#### Upload test server (ruby, optional)
+
+For development purposes we have a server, written in ruby, to handle file uploading
+ 
++ `bundle install`
+
++ `bundle exec rackup`
+
+and open http://localhost:9292
+
+
+### Ruby:
+For rubists you can install this library as a gem file.
+
+Just add the gem as dante2-editor
+
+
+### Open source license
+
+If you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use Dante2 under the terms of the GPLv3.[Read more about Dante2's license](https://michelson.github.io/dante2/license.html).
+
+
+### Alternatives
+
+If you are looking for alternatives you can always use the [MIT licensed Dante (1)](https://michelson.github.io/Dante) or choose along others [medium clones](http://howtox.com/medium-editor-clones-in-js) or check out [many many awesome draft-js based editors](https://github.com/nikgraf/awesome-draft-js)

data/app/assets/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
+    <title>Dante2</title>
+  </head>
+  <body>
+
+    <div id="header">
+      <div class="logo">
+        <div class="menu-buttons">
+          <a class="menu-button" target="_blank" href="https://michelson.github.io/dante2/doc.html">
+            Documentation
+          </a>
+
+          <a class="menu-button" target="_blank" href="https://michelson.github.io/dante2/license.html">
+            License
+          </a>          
+        </div>
+
+
+        <img src=<%= require('images/site/dante-editor-logo.png') %> alt="dante editor" height="21">
+        <span>Dante Editor - 0.2.0 </span>
+
+      </div>
+
+      <a class="github tooltip-left" data-tooltip="Fork me on github" target="_blank" href="https://github.com/michelson/dante2">
+        <img src=<%= require('images/site/github-logo.png') %> alt="Fork me on github" height="28">
+      </a>
+    </div>
+
+    <div class="danteArticle"></div>
+    <div id="app"></div>
+
+    <script type="text/javascript">
+      document.addEventListener('DOMContentLoaded', function(){
+        editor = new Dante(
+          {
+            api_key: "86c28a410a104c8bb58848733c82f840",
+            el: "app",
+            content: window.PocData,
+            debug: true,
+            data_storage: {
+              url: "http://localhost:3333/store.json"
+            }
+          }
+        )
+        editor.render()
+      })
+    </script>
+  </body>
+</html>

data/app/assets/license.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
+    <title>Dante2</title>
+  </head>
+  <body>
+
+
+    <div id="header">
+      <div class="logo">
+        <div class="menu-buttons">
+          <a class="menu-button" target="_blank" href="https://michelson.github.io/dante2/doc.html">
+            Documentation
+          </a>
+
+          <a class="menu-button" target="_blank" href="https://michelson.github.io/dante2/license.html">
+            License
+          </a>          
+        </div>
+
+        <img src='https://michelson.github.io/dante2/images/dante-editor-logo.png' alt="dante editor" height="21">
+        <span>Dante Editor - 0.2.0 </span>
+
+      </div>
+
+      <a class="github tooltip-left" data-tooltip="Fork me on github" target="_blank" href="https://github.com/michelson/dante2">
+        <img src='https://michelson.github.io/dante2/images/github-logo.png' alt="Fork me on github" height="28">
+      </a>
+    </div>
+
+    <div class="danteArticle"></div>
+    <div id="app"></div>
+
+    <script type="text/javascript">
+      document.addEventListener('DOMContentLoaded', function(){
+        editor = new Dante(
+          {
+            el: "app",
+            content: window.PocDataLicense,
+            debug: false,
+            read_only: true
+          }
+        )
+        editor.render()
+      })
+    </script>
+  </body>
+</html>

data/app/assets/options.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
+    <title>Dante2</title>
+    <link rel="stylesheet" type="text/css" href="/application.css">
+    <script src="/vendor.js"></script>
+    <script src="/application.js"></script>
+    <script>require('initialize');</script>
+  </head>
+  <body>
+
+    <div id="header">
+      <div class="logo">
+        <div class="menu-buttons">
+          <a class="menu-button" target="_blank" href="https://michelson.github.io/dante2/doc.html">
+            Documentation
+          </a>
+
+          <a class="menu-button" target="_blank" href="https://michelson.github.io/dante2/license.html">
+            License
+          </a>          
+        </div>
+
+
+        <img src='https://michelson.github.io/dante2/images/dante-editor-logo.png' alt="dante editor" height="21">
+        <span>Dante Editor - 0.2.0 </span>
+
+      </div>
+
+      <a class="github tooltip-left" data-tooltip="Fork me on github" target="_blank" href="https://github.com/michelson/dante2">
+        <img src='https://michelson.github.io/dante2/images/github-logo.png' alt="Fork me on github" height="28">
+      </a>
+    </div>
+
+    <div id="app"></div>
+
+    <script type="text/javascript">
+      document.addEventListener('DOMContentLoaded', function(){
+        editor = new Dante(
+          {
+            upload_url: "http://localhost:9292/uploads/new",
+            el: "app",
+            content: window.Doc,
+            read_only: true
+          }
+        )
+        editor.render()
+        window.dante_editor = editor        
+      })
+    </script>
+
+  </body>
+</html>

data/app/assets/store.json

@@ -0,0 +1 @@
+{"status": "ok"}

data/app/components/App.cjsx

@@ -0,0 +1,1083 @@
+
+React = require('react')
+ReactDOM = require('react-dom')
+Immutable = require('immutable')
+{ Map, fromJS } = require('immutable')
+{
+  convertToRaw
+  convertFromRaw
+  CompositeDecorator
+  getVisibleSelectionRect
+  getDefaultKeyBinding
+  getSelectionOffsetKeyForNode
+  KeyBindingUtil
+  ContentState
+  Editor
+  EditorState
+  Entity
+  RichUtils
+  DefaultDraftBlockRenderMap
+  SelectionState
+  Modifier
+  BlockMapBuilder
+  getSafeBodyFromHTML
+} = require('draft-js')
+
+DraftPasteProcessor = require('draft-js/lib/DraftPasteProcessor')
+
+# {stateToHTML} = require('draft-js-export-html')
+{
+  convertToHTML
+  convertFromHTML
+} = require('draft-convert')
+
+isSoftNewlineEvent = require('draft-js/lib/isSoftNewlineEvent')
+
+{ 
+  addNewBlock
+  resetBlockWithType
+  updateDataOfBlock
+  updateTextOfBlock
+  getCurrentBlock
+  addNewBlockAt
+  updateDataOfBlock
+} = require('../model/index.js')
+
+DanteImagePopover = require('./popovers/image')
+DanteAnchorPopover = require('./popovers/link')
+
+{ 
+  getSelectionRect
+  getSelection
+} = require("../utils/selection.js")
+DanteInlineTooltip = require('./popovers/addButton.cjsx')
+DanteTooltip = require('./popovers/toolTip.cjsx')
+Link = require('./decorators/link.cjsx')
+
+Debug = require('./debug.cjsx')
+findEntities = require('../utils/find_entities.coffee')
+ImageBlock = require('./blocks/image.cjsx')
+EmbedBlock = require('./blocks/embed.cjsx')
+VideoBlock = require('./blocks/video.cjsx')
+PlaceholderBlock = require('./blocks/placeholder.cjsx')
+
+SaveBehavior = require('../utils/save_content.coffee')
+customHTML2Content = require('../utils/html2content.coffee')
+
+class Dante
+  constructor: (options={})->
+    console.log "init editor Dante!"
+    
+    # deep merge on config
+    config = Map(fromJS(@defaultOptions(options)))
+
+    @options = config.mergeDeep(options).toJS()
+    console.log @options
+
+  defaultOptions: (options={})->
+    # default options
+    defaultOptions = {}
+    defaultOptions.el = 'app'
+    defaultOptions.content = ""
+    defaultOptions.read_only = false
+    defaultOptions.spellcheck = false
+    defaultOptions.title_placeholder = "Title"
+    defaultOptions.body_placeholder = "Write your story"
+    # @defaultOptions.api_key = "86c28a410a104c8bb58848733c82f840"
+
+    defaultOptions.widgets = [
+      {
+        title: 'add an image'
+        icon: 'image'
+        type: 'image'
+        block: 'ImageBlock'
+        editable: true
+        renderable: true
+        breakOnContinuous: true
+        wrapper_class: "graf graf--figure"
+        selected_class: "is-selected is-mediaFocused"
+        selectedFn: (block)=>
+          direction = block.getData().toJS().direction
+          switch direction
+            when "left" then "graf--layoutOutsetLeft"
+            when "center" then ""
+            when "wide" then "sectionLayout--fullWidth"
+            when "fill" then "graf--layoutFillWidth"
+            else
+        handleEnterWithoutText: (ctx, block)->
+          editorState = ctx.state.editorState
+          ctx.onChange(addNewBlockAt(editorState, block.getKey()))
+        handleEnterWithText: (ctx, block)->
+          editorState = ctx.state.editorState
+          ctx.onChange(addNewBlockAt(editorState, block.getKey()))
+        widget_options:
+          displayOnInlineTooltip: true
+          insertion: "upload"
+          insert_block: "image"
+        options:
+          upload_url: options.upload_url
+          upload_callback: options.image_upload_callback
+          image_delete_callback: options.image_delete_callback
+          image_caption_placeholder: options.image_caption_placeholder
+      }
+      {
+        icon: 'embed'
+        title: 'insert embed'
+        type: 'embed'
+        block: 'EmbedBlock'
+        editable: true
+        renderable: true
+        breakOnContinuous: true
+        wrapper_class: "graf graf--mixtapeEmbed"
+        selected_class: "is-selected is-mediaFocused"
+        widget_options:
+          displayOnInlineTooltip: true
+          insertion: "placeholder"
+          insert_block: "embed"
+        options:
+          endpoint: "//api.embed.ly/1/extract?key=#{options.api_key}&url="
+          placeholder: 'Paste a link to embed content from another site (e.g. Twitter) and press Enter'
+        handleEnterWithoutText: (ctx, block)->
+          editorState = ctx.state.editorState
+          ctx.onChange(addNewBlockAt(editorState, block.getKey()))
+        handleEnterWithText: (ctx, block)->
+          editorState = ctx.state.editorState
+          ctx.onChange(addNewBlockAt(editorState, block.getKey()))
+      }
+      {
+        icon: 'video'
+        title: 'insert video'
+        editable: true
+        type: 'video'
+        block: 'VideoBlock'
+        renderable: true
+        breakOnContinuous: true
+        wrapper_class: "graf--figure graf--iframe" 
+        selected_class:" is-selected is-mediaFocused"
+        widget_options:
+          displayOnInlineTooltip: true
+          insertion: "placeholder"
+          insert_block: "video"
+        options:
+          endpoint: "//api.embed.ly/1/oembed?key=#{options.api_key}&url="
+          placeholder: 'Paste a YouTube, Vine, Vimeo, or other video link, and press Enter'
+          caption: 'Type caption for embed (optional)'
+
+        handleEnterWithoutText: (ctx, block)->
+          editorState = ctx.state.editorState
+          ctx.onChange(addNewBlockAt(editorState, block.getKey()))
+
+        handleEnterWithText: (ctx, block)->
+          editorState = ctx.state.editorState
+          ctx.onChange(addNewBlockAt(editorState, block.getKey()))
+      }
+      {
+        renderable: true
+        editable: true
+        block: 'PlaceholderBlock'
+        type: 'placeholder'
+        wrapper_class: "is-embedable"
+        selected_class:" is-selected is-mediaFocused"
+        widget_options:
+          displayOnInlineTooltip: false
+        handleEnterWithText: (ctx, block)->
+          editorState = ctx.state.editorState
+          data =
+            provisory_text: block.getText()
+            endpoint: block.getData().get('endpoint')
+            type: block.getData().get('type')
+
+          ctx.onChange(resetBlockWithType(
+            editorState, 
+            data.type, 
+            data)
+          )   
+      }
+    ]
+
+    defaultOptions.tooltips = [
+        {
+          ref: 'insert_tooltip'
+          component: DanteTooltip
+          displayOnSelection: true
+          selectionElements: [
+            "unstyled"
+            "blockquote"
+            "ordered-list"
+            "unordered-list"
+            "unordered-list-item"
+            "ordered-list-item"
+            "code-block"
+            'header-one'
+            'header-two'
+            'header-three'  
+            'header-four'      
+          ]
+          widget_options: 
+            block_types: [
+              # {label: 'p', style: 'unstyled'},
+              {label: 'h2', style: 'header-one', type: "block"},
+              {label: 'h3', style: 'header-two', type: "block"},
+              {label: 'h4', style: 'header-three', type: "block"},
+              {label: 'blockquote', style: 'blockquote', type: "block"},
+              {label: 'insertunorderedlist', style: 'unordered-list-item', type: "block"},
+              {label: 'insertorderedlist', style: 'ordered-list-item', type: "block"},
+              {label: 'code', style: 'code-block', type: "block"}
+              {label: 'bold', style: 'BOLD', type: "inline"},
+              {label: 'italic', style: 'ITALIC', type: "inline"},
+              # {label: 'underline', style: 'UNDERLINE', type: "inline"},
+              # {label: 'monospace', style: 'CODE', type: "inline"},
+              # {label: 'strikethrough', style: 'STRIKETHROUGH', type: "inline"}
+            ]
+        }
+        {
+          ref: 'add_tooltip'
+          component: DanteInlineTooltip
+        }
+        {
+          ref: 'anchor_popover'
+          component: DanteAnchorPopover
+        }
+        {
+          ref: 'image_popover'
+          component: DanteImagePopover
+        }
+      ]
+
+    defaultOptions.xhr = {
+      before_handler: null
+      success_handler: null
+      error_handler: null
+    }
+
+    defaultOptions.data_storage = {
+      url: null
+      method: "POST"
+      success_handler: null
+      failure_handler: null
+      interval: 1500
+    }
+
+    defaultOptions.default_wrappers = [
+      {className: 'graf--p', block: 'unstyled'},
+      {className: 'graf--h2', block: 'header-one'},
+      {className: 'graf--h3', block: 'header-two'},
+      {className: 'graf--h4', block: 'header-three'},
+      {className: 'graf--blockquote', block: 'blockquote'},
+      {className: 'graf--insertunorderedlist', block: 'unordered-list-item'},
+      {className: 'graf--insertorderedlist', block: 'ordered-list-item'},
+      {className: 'graf--code', block: 'code-block'}
+      {className: 'graf--bold', block: 'BOLD'},
+      {className: 'graf--italic', block: 'ITALIC'},
+    ]
+
+    defaultOptions.continuousBlocks = [
+      "unstyled"
+      "blockquote"
+      "ordered-list"
+      "unordered-list"
+      "unordered-list-item"
+      "ordered-list-item"
+      "code-block"
+    ]
+
+    defaultOptions.key_commands = {
+      "alt-shift": [
+        { key: 65, cmd: 'add-new-block'}
+      ],
+      "alt-cmd": [
+        { key: 49, cmd: 'toggle_block:header-one'}
+        { key: 50, cmd: 'toggle_block:header-two'}
+        { key: 53, cmd: 'toggle_block:blockquote'}
+      ],
+      "cmd": [
+        { key: 66, cmd: 'toggle_inline:BOLD'}
+        { key: 73, cmd: 'toggle_inline:ITALIC'}
+        { key: 75, cmd: 'insert:link'}
+      ]
+    }
+
+    defaultOptions.character_convert_mapping = {
+      '> ': "blockquote",
+      '*.': "unordered-list-item",
+      '* ': "unordered-list-item",
+      '- ': "unordered-list-item",
+      '1.': "ordered-list-item",
+      '# ': 'header-one',
+      '##': 'header-two',
+      '==': "unstyled",
+      '` ': "code-block",
+    }
+
+    defaultOptions
+
+  getContent: ->
+    #console.log @options.content
+    #console.log "IS POC DATA?", @options.content is PocData
+    #return PocData if @options.poc
+    #console.log @options.content , PocData
+    #PocData
+    @options.content
+
+  render: ->
+    ReactDOM.render(<DanteEditor content={@getContent()} 
+      config={@options}/>, document.getElementById(@options.el))
+
+class DanteEditor extends React.Component
+  constructor: (props) ->
+    super props
+    #window.main_editor = @
+
+    @decorator = new CompositeDecorator([
+      {
+        strategy: findEntities.bind(null, 'LINK', @),
+        component: Link
+      }
+    ])
+
+    @.blockRenderMap = Map({
+        "image":
+          element: 'figure'
+        "video":
+          element: 'figure'
+        "embed":
+          element: 'div'
+        'unstyled':
+          wrapper: null
+          element: 'div'
+        'paragraph': 
+          wrapper: null
+          element: 'div'
+        'placeholder':
+          wrapper: null
+          element: 'div'
+          
+    }) 
+
+    @extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(@blockRenderMap);
+
+    @state = 
+      editorState: @initializeState()
+      read_only: @props.config.read_only
+      blockRenderMap: @extendedBlockRenderMap
+      locks: 0
+      debug: @props.config.debug
+
+    @widgets  = @props.config.widgets
+    @tooltips = @props.config.tooltips
+
+    @key_commands = @props.config.key_commands
+
+    @continuousBlocks = @props.config.continuousBlocks
+
+    @block_types = @props.config.block_types
+
+    @default_wrappers = @props.config.default_wrappers
+
+    @character_convert_mapping = @props.config.character_convert_mapping
+
+    @save = new SaveBehavior
+      getLocks: @getLocks
+      config: 
+        xhr: @props.config.xhr
+        data_storage: @props.config.data_storage
+      editorState: @state.editorState
+      editorContent: @emitSerializedOutput()
+
+  initializeState: ()=>
+    if @.props.content #and @.props.content.trim() isnt ""
+      @decodeEditorContent(@props.content)    
+    else 
+      EditorState.createEmpty(@decorator)
+
+  refreshSelection: (newEditorState)=>
+    editorState     = @.state.editorState
+    # Setting cursor position after inserting to content
+    s = @.state.editorState.getSelection()
+    c = editorState.getCurrentContent()
+
+    selectionState = SelectionState.createEmpty(s.getAnchorKey())
+    focusOffset = s.getFocusOffset()
+    anchorKey = s.getAnchorKey()
+    # console.log anchorKey, focusOffset
+    selectionState = selectionState.merge({
+      anchorOffset: focusOffset,
+      focusKey: anchorKey,
+      focusOffset: focusOffset,
+    })
+
+    newState = EditorState.forceSelection(newEditorState, selectionState)
+    
+    @onChange(newState)
+  
+  forceRender: (editorState)=>
+    selection       = @.state.editorState.getSelection()
+    content         = editorState.getCurrentContent()
+    newEditorState  = EditorState.createWithContent(content, @decorator)
+
+    @refreshSelection(newEditorState)
+  
+  onChange: (editorState) =>
+    @setPreContent()
+    
+    # console.log "BB", editorState.toJS()
+    @.setState({editorState})
+    #console.log "changed at", editorState.getSelection().getAnchorKey()
+    #console.log "collapsed?", editorState.getSelection().isCollapsed()
+
+    currentBlock = getCurrentBlock(@state.editorState);
+    blockType = currentBlock.getType()
+
+    if (!editorState.getSelection().isCollapsed())
+ 
+      tooltip = @tooltipsWithProp('displayOnSelection')[0] 
+      return unless @tooltipHasSelectionElement(tooltip, blockType)
+
+      @handleTooltipDisplayOn('displayOnSelection')
+    else
+      @handleTooltipDisplayOn('displayOnSelection', false)
+
+    setTimeout ()=>
+      @relocateTooltips()
+    , 0
+    
+    @dispatchChangesToSave()    
+  
+  dispatchChangesToSave: =>
+    clearTimeout @saveTimeout
+    @saveTimeout = setTimeout =>
+      @save.store(@emitSerializedOutput())
+    , 100
+
+  setPreContent: =>
+    content = @emitSerializedOutput()
+    # console.log "SET PRE CONTENT", content
+    @save.editorContent = content
+
+  focus: () =>
+    #@props.refs.richEditor.focus()
+    
+  getEditorState: =>
+    @state.editorState
+
+  emitSerializedOutput: =>
+    #s = @state.editorState.getCurrentContent()
+    
+    raw = convertToRaw( @state.editorState.getCurrentContent() )
+    # console.log raw
+
+    #raw_as_json = JSON.stringify(raw)
+    #console.log raw_as_json
+    #raw_as_json
+    raw
+
+  decodeEditorContent: (raw_as_json)=>
+    # console.log "CONTENT", raw_as_json
+    # new_content = convertFromRaw(JSON.parse(raw_as_json))
+    new_content = convertFromRaw(raw_as_json)
+    editorState = EditorState.createWithContent(new_content, @decorator)
+
+  ## title utils
+  getTextFromEditor: =>
+    c = @.state.editorState.getCurrentContent()
+    out = c.getBlocksAsArray().map (o)=>
+        o.getText()
+      .join("\n")
+    
+    console.log out
+    return out
+
+  emitHTML2: ()->
+
+    html = convertToHTML(
+      entityToHTML: (entity, originalText) => 
+        if entity.type is 'LINK'
+          return "<a href=\"#{entity.data.url}\">#{originalText}</a>"
+        else
+          return originalText
+ 
+    )(@.state.editorState.getCurrentContent())
+    #html = convertToHTML(@.state.editorState.getCurrentContent())
+
+  getLocks: =>
+    @state.locks
+
+  addLock: =>
+    @setState
+      locks: @state.locks +=1
+
+  removeLock: =>
+    #return unless @state.locks < 0
+    @setState
+      locks: @state.locks -=1
+
+  renderableBlocks: =>
+    @widgets.filter (o)->
+      o.renderable
+    .map (o)->
+      o.type
+
+  defaultWrappers: (blockType)=>
+    @default_wrappers.filter (o)=>
+      o.block is blockType
+    .map (o)->
+      o.className
+
+  blockRenderer: (block)=>
+
+    switch block.getType()
+
+      when "atomic"
+
+        entity = block.getEntityAt(0)
+
+        #return null unless entity
+        entity_type = Entity.get(entity).getType()
+
+    if @renderableBlocks().includes(block.getType())
+      return @handleBlockRenderer(block)
+
+    return null;
+
+  handleBlockRenderer: (block)=>
+    dataBlock = @getDataBlock(block)
+    return null unless dataBlock
+
+    read_only = if @state.read_only then false else null
+    editable  = if read_only isnt null then read_only else dataBlock.editable
+    # console.log "blockrender for #{block.getType()} #{editable}"
+    
+    return (
+      component: eval(dataBlock.block)
+      editable: editable
+      props:
+        data: block.getData()
+        getEditorState: @getEditorState
+        setEditorState: @onChange
+        addLock: @addLock
+        removeLock: @removeLock
+        getLocks: @getLocks
+        config: dataBlock.options 
+    )
+    
+    return null
+   
+  blockStyleFn: (block)=>
+    currentBlock = getCurrentBlock(@.state.editorState)
+    is_selected = if currentBlock.getKey() is block.getKey() then "is-selected" else ""
+    
+    if @renderableBlocks().includes(block.getType())
+      return @styleForBlock(block, currentBlock, is_selected)
+    
+    defaultBlockClass = @defaultWrappers(block.getType())
+    if defaultBlockClass.length > 0
+      return "graf #{defaultBlockClass[0]} #{is_selected}"
+    else
+      return "graf nana #{is_selected}"
+
+  getDataBlock: (block)=>
+    @widgets.find (o)=>
+      o.type is block.getType()
+
+  styleForBlock: (block, currentBlock, is_selected)=>
+    dataBlock = @getDataBlock(block)
+
+    return null unless dataBlock
+
+    selectedFn = if dataBlock.selectedFn then dataBlock.selectedFn(block) else null
+    selected_class = if is_selected then dataBlock.selected_class else ''
+    
+    return "#{dataBlock.wrapper_class} #{selected_class} #{selectedFn}"
+
+  handleTooltipDisplayOn: (prop, display=true)->
+    setTimeout =>
+      items = @tooltipsWithProp(prop)
+      items.map (o)=>
+        @refs[o.ref].display(display)
+        @refs[o.ref].relocate()
+    , 20
+
+  handlePasteText: (text, html)=>
+
+    # https://github.com/facebook/draft-js/issues/685
+    ###
+    html = "<p>chao</p>
+    <avv>aaa</avv>
+    <p>oli</p>
+    <img src='x'/>"
+    ###
+
+    # if not html then fallback to default handler
+
+    return @handleTXTPaste(text, html) unless html
+    return @handleHTMLPaste(text, html) if html
+
+  handleTXTPaste: (text, html)=>
+    currentBlock = getCurrentBlock(@state.editorState)
+    
+    editorState = @state.editorState
+
+    switch currentBlock.getType()
+      when "image", "video", "placeholder"
+        newContent = Modifier.replaceText(
+          editorState.getCurrentContent(),
+          new SelectionState({
+            anchorKey: currentBlock.getKey(),
+            anchorOffset: 0,
+            focusKey: currentBlock.getKey(),
+            focusOffset: 2
+          }),
+          text)
+
+        editorState = EditorState.push(
+          editorState,
+          newContent,
+          'replace-text'
+        );
+
+        @onChange(editorState)
+
+        return true
+      else
+        return false
+
+  handleHTMLPaste: (text, html)=>
+
+    currentBlock = getCurrentBlock(@state.editorState)
+
+    # TODO: make this configurable
+    switch currentBlock.getType()
+      when "image", "video", "placeholder"
+        return @handleTXTPaste(text, html)
+      else
+        # keep going
+
+    newContentState = customHTML2Content(html, @extendedBlockRenderMap)
+
+    selection = @state.editorState.getSelection();
+    endKey = selection.getEndKey()
+    
+    content = @state.editorState.getCurrentContent();
+    blocksBefore = content.blockMap.toSeq().takeUntil((v) => (v.key is endKey))
+    blocksAfter = content.blockMap.toSeq().skipUntil((v) => (v.key is endKey)).rest()
+
+    newBlockKey = newContentState.blockMap.first().getKey()
+
+    newBlockMap = blocksBefore.concat(
+        newContentState.blockMap,
+        blocksAfter
+      ).toOrderedMap();
+
+    newContent = content.merge({
+      blockMap: newBlockMap,
+      selectionBefore: selection,
+      selectionAfter: selection.merge({
+      anchorKey: newBlockKey,
+      anchorOffset: 0,
+      focusKey: newBlockKey,
+      focusOffset: 0,
+      isBackward: false,
+      })
+    });
+
+    pushedContentState = EditorState.push(
+      @state.editorState, 
+      newContent, 
+      'insert-fragment'
+    )
+   
+    @onChange(pushedContentState)
+
+    true
+
+  handlePasteImage: (files)=>
+    #TODO: check file types
+    files.map (file)=>
+      opts =  
+        url: URL.createObjectURL(file)
+        file: file
+
+      @onChange(addNewBlock(@state.editorState, 'image', opts))
+
+  handleDroppedFiles: (state, files)=>
+    files.map (file)=>
+      opts =  
+        url: URL.createObjectURL(file)
+        file: file
+
+      @onChange(addNewBlock(@state.editorState, 'image', opts))
+
+  handleUpArrow: (e)=>
+    setTimeout =>
+      @forceRender(@state.editorState)
+    , 10
+
+  handleDownArrow: (e)=>
+    setTimeout =>
+      @forceRender(@state.editorState)
+    , 10
+
+  handleReturn: (e) =>
+    if this.props.handleReturn
+      if this.props.handleReturn()
+        return true;
+
+    editorState = @state.editorState
+    ###
+    #if (isSoftNewlineEvent(e)) {
+    #  this.onChange(RichUtils.insertSoftNewline(editorState));
+    #  return true;
+    #}
+    ###
+    if !e.altKey && !e.metaKey && !e.ctrlKey
+      currentBlock = getCurrentBlock(editorState)
+      blockType = currentBlock.getType()
+      selection = editorState.getSelection()
+
+      config_block = @getDataBlock(currentBlock)
+
+      #if blockType.indexOf('atomic') is 0
+      #  @.onChange(addNewBlockAt(editorState, currentBlock.getKey()))
+      #  return true;
+      
+      if currentBlock.getText().length is 0
+
+        if config_block && config_block.handleEnterWithoutText
+          config_block.handleEnterWithText(@, currentBlock)
+          @closePopOvers()
+          return true 
+
+        #TODO turn this in configurable
+        switch (blockType)
+          when "header-one"
+            @.onChange(resetBlockWithType(editorState, "unstyled"));
+            return true;
+          else
+            return false;
+      
+      if currentBlock.getText().length > 0
+        
+        if blockType is "unstyled"
+          # hack hackety hack
+          # https://github.com/facebook/draft-js/issues/304
+          newContent = Modifier.splitBlock(
+            @state.editorState.getCurrentContent(),
+            @state.editorState.getSelection()
+          )
+
+          newEditorState = EditorState.push(@state.editorState, newContent, 'insert-characters')
+          @.onChange(newEditorState)
+          
+          setTimeout =>
+            #TODO: check is element is in viewport 
+            a = document.getElementsByClassName("is-selected")            
+            pos = a[0].getBoundingClientRect()
+            window.scrollTo(0, pos.top + window.scrollY - 100)
+          , 0
+
+          return true
+        
+        if config_block && config_block.handleEnterWithText
+          config_block.handleEnterWithText(@, currentBlock)
+          @closePopOvers()
+          return true 
+
+        if ( currentBlock.getLength() is selection.getStartOffset())
+          if @continuousBlocks.indexOf(blockType) < 0
+            @.onChange(addNewBlockAt(editorState, currentBlock.getKey()))
+            return true
+
+        return false
+      
+      # selection.isCollapsed() and # should we check collapsed here?
+      if ( currentBlock.getLength() is selection.getStartOffset()) #or (config_block && config_block.breakOnContinuous))
+        # it will match the unstyled for custom blocks
+        if @continuousBlocks.indexOf(blockType) < 0
+          @.onChange(addNewBlockAt(editorState, currentBlock.getKey()))
+          return true
+        return false
+      
+      return false
+    
+    #return false
+
+  # TODO: make this configurable
+  handleBeforeInput: (chars)=>
+    currentBlock = getCurrentBlock(@state.editorState)
+    blockType = currentBlock.getType()
+    selection = @.state.editorState.getSelection()
+    editorState = @state.editorState
+    
+    # close popovers
+    if currentBlock.getText().length isnt 0
+      #@closeInlineButton()
+      @closePopOvers()
+
+    # handle space on link
+    endOffset = selection.getEndOffset()
+    endKey = currentBlock.getEntityAt(endOffset - 1)
+    endEntityType = endKey && Entity.get(endKey).getType()
+    afterEndKey = currentBlock.getEntityAt(endOffset)
+    afterEndEntityType = afterEndKey && Entity.get(afterEndKey).getType()
+    
+    # will insert blank space when link found
+    if (chars is ' ' && endEntityType is 'LINK' && afterEndEntityType isnt 'LINK')
+      newContentState = Modifier.insertText(
+        editorState.getCurrentContent(), 
+        selection,
+        ' '
+      )
+      newEditorState = EditorState.push(editorState, newContentState, 'insert-characters')
+      @.onChange(newEditorState)
+      return true
+
+    # block transform
+    if blockType.indexOf('atomic') is 0
+      return false;
+  
+    blockLength = currentBlock.getLength()
+    if selection.getAnchorOffset() > 1 || blockLength > 1
+      return false
+
+    blockTo = @character_convert_mapping[currentBlock.getText() + chars]
+
+    console.log "BLOCK TO SHOW: #{blockTo}"
+
+    if !blockTo
+      return false
+    
+    @onChange(resetBlockWithType(editorState, blockTo))
+
+    return true
+  
+  # TODO: make this configurable
+  handleKeyCommand: (command)=>
+    editorState = @.state.editorState
+
+    if @.props.handleKeyCommand && @.props.handleKeyCommand(command)
+      return true
+    
+    if command is 'add-new-block'
+      @.onChange(addNewBlock(editorState, 'blockquote'))
+      return true
+
+    block = getCurrentBlock(editorState);
+
+    if command.indexOf('toggle_inline:') is 0
+      newBlockType = command.split(':')[1]
+      currentBlockType = block.getType()
+      @onChange(
+        RichUtils.toggleInlineStyle(editorState, newBlockType)
+      )
+      return true
+
+    if command.indexOf('toggle_block:') is 0
+      newBlockType = command.split(':')[1]
+      currentBlockType = block.getType()
+      
+      @onChange(
+        RichUtils.toggleBlockType(editorState, newBlockType)
+      )
+      return true;
+
+    newState = RichUtils.handleKeyCommand(@state.editorState, command);
+    if newState
+      @.onChange(newState);
+      return true;
+    
+    return false;
+  
+  findCommandKey: (opt, command)=>
+    # console.log "COMMAND find: #{opt} #{command}"
+    @key_commands[opt].find (o)->
+      o.key is command
+
+  KeyBindingFn: (e)=>
+
+    #⌘ + B / Ctrl + B   Bold
+    #⌘ + I / Ctrl + I   Italic
+    #⌘ + K / Ctrl + K   Turn into link
+    #⌘ + Alt + 1 / Ctrl + Alt + 1   Header
+    #⌘ + Alt + 2 / Ctrl + Alt + 2   Sub-Header
+    #⌘ + Alt + 5 / Ctrl + Alt + 5   Quote (Press once for a block quote, again for a pull quote and a third time to turn off quote)
+    
+    # console.log "CTRL #{e.ctrlKey} #{e.which} alt: #{e.altKey} shift #{e.shiftKey}"
+    # console.log('in window::'+ e.ctrlKey+'in mac os'+e.metaKey+'####'+e.META_MASK+'##$&&'+e.CTRL_MASK);
+
+    if (e.altKey)
+      if (e.shiftKey)
+        cmd = @findCommandKey("alt-shift", e.which)
+        return cmd.cmd if cmd
+        
+        return getDefaultKeyBinding(e)
+
+      if e.ctrlKey or e.metaKey
+        cmd = @findCommandKey("alt-cmd", e.which)
+        return cmd.cmd if cmd
+        return getDefaultKeyBinding(e)
+
+    else if e.ctrlKey or e.metaKey
+      cmd = @findCommandKey("cmd", e.which)
+      return cmd.cmd if cmd
+      return getDefaultKeyBinding(e)
+
+    return getDefaultKeyBinding(e)
+
+  # will update block state todo: movo to utils
+  updateBlockData: (block, options)=>
+    data = block.getData()
+    newData = data.merge(options)
+    newState = updateDataOfBlock(@state.editorState, block, newData)
+    # this fixes enter from image caption
+    @forceRender(newState)
+
+  setDirection: (direction_type)=>
+    
+    contentState = @state.editorState.getCurrentContent()
+    selectionState = @state.editorState.getSelection()
+    block = contentState.getBlockForKey(selectionState.anchorKey);
+
+    @updateBlockData(block, {direction: direction_type})
+
+  ## read only utils
+  toggleEditable: =>
+    @closePopOvers()
+
+    @setState
+      read_only: !@state.read_only
+    , @testEmitAndDecode
+
+  closePopOvers: ()=>
+    @tooltips.map (o)=>
+      @refs[o.ref].hide()
+
+  relocateTooltips: ()=>
+    @tooltips.map (o)=>
+      @refs[o.ref].relocate()
+
+  tooltipsWithProp: (prop)=>
+    @tooltips.filter (o)=>
+      o[prop]
+
+  tooltipHasSelectionElement: (tooltip, element)=>
+    tooltip.selectionElements.includes(element)
+
+  #################################
+  # TODO: this methods belongs to popovers/link
+  #################################
+  
+  handleShowPopLinkOver: (e)=>
+    @showPopLinkOver()
+
+  handleHidePopLinkOver: (e)=>
+    @hidePopLinkOver()
+
+  showPopLinkOver: (el)=>
+    # handles popover display 
+    # using anchor or from popover
+
+    # set url first in order to calculate popover width
+    @refs.anchor_popover.setState
+      url: if el then el.href else @refs.anchor_popover.state.url
+
+    parent_el = ReactDOM.findDOMNode(@);
+    coords = @refs.anchor_popover.relocate(
+      el
+    ) if el
+
+    @refs.anchor_popover.setPosition coords if coords
+
+    @refs.anchor_popover.setState
+      show: true
+
+    @isHover = true
+    @cancelHide()
+
+  hidePopLinkOver: ()=>
+    @hideTimeout = setTimeout ()=>
+      @refs.anchor_popover.hide()
+    , 300
+
+  cancelHide: ()->
+    # console.log "Cancel Hide"
+    clearTimeout @hideTimeout
+
+  ###############################
+
+  render: =>
+
+    return (
+      <div id="content" suppressContentEditableWarning={true}>
+
+        <article className="postArticle">
+          <div className="postContent">
+            <div className="notesSource">
+              <div id="editor" 
+                className="postField postField--body">
+
+                <section className="section--first section--last"> 
+                  <div className="section-divider layoutSingleColumn"> 
+                    <hr className="section-divider"/> 
+                  </div> 
+
+                  <div className="section-content"> 
+                    <div ref="richEditor" 
+                      className="section-inner layoutSingleColumn" 
+                      onClick={@.focus}>
+                      <Editor 
+                        blockRendererFn={@.blockRenderer}
+                        editorState={@state.editorState} 
+                        onChange={@onChange}
+                        onUpArrow={@handleUpArrow}
+                        onDownArrow={@handleDownArrow}
+                        handleReturn={@handleReturn}
+                        blockRenderMap={@state.blockRenderMap}
+                        blockStyleFn={@.blockStyleFn}
+                        handlePastedText={@handlePasteText}
+                        handlePastedFiles={@handlePasteImage}
+                        handleDroppedFiles={@handleDroppedFiles}
+                        handleKeyCommand={@.handleKeyCommand}
+                        keyBindingFn={@KeyBindingFn}
+                        handleBeforeInput={@.handleBeforeInput}
+                        readOnly={@state.read_only}
+                        placeholder={@props.config.body_placeholder}
+                        ref="editor"
+                      />
+                    </div> 
+                  </div>
+                </section>
+
+              </div>
+            </div>
+          </div>
+        </article>
+
+        {
+          @tooltips.map (o, i)=>
+            <o.component 
+              ref={o.ref}
+              key={i}
+              editor={@}
+              editorState={@state.editorState}
+              onChange={@onChange}
+              configTooltip={o}
+              widget_options={o.widget_options}
+              
+              showPopLinkOver={@showPopLinkOver} 
+              hidePopLinkOver={@hidePopLinkOver}
+              handleOnMouseOver={@handleShowPopLinkOver}
+              handleOnMouseOut={@handleHidePopLinkOver}
+            />
+        }
+
+        {
+          if @state.debug
+            <Debug locks={@state.locks}
+              editor={@}
+            />
+        }
+
+      </div>
+    ) 
+
+module.exports = Dante