dante2-editor 0.3.6 → 0.4.0

data/src/components/{dante.js → core/dante.js}

@@ -1,28 +1,21 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-//import Immutable from 'immutable'
 import { Map, fromJS } from 'immutable'
+import DanteEditor from './editor.js'
+import DanteImagePopover from '../popovers/image'
+import DanteAnchorPopover from '../popovers/link'
+import DanteInlineTooltip from '../popovers/addButton'
+import DanteTooltip from '../popovers/toolTip'
 
-import DanteEditor from './dante_editor.js'
-
-import DanteImagePopover from './popovers/image'
-import DanteAnchorPopover from './popovers/link'
-
-//import { getSelectionRect, getSelection } from "../utils/selection.js"
-import DanteInlineTooltip from './popovers/addButton'
-import DanteTooltip from './popovers/toolTip'
-//import Link from './decorators/link'
-
-//import Debug from './debug'
-//import findEntities from '../utils/find_entities'
-import ImageBlock from './blocks/image'
-import EmbedBlock from './blocks/embed'
-import VideoBlock from './blocks/video'
-import PlaceholderBlock from './blocks/placeholder'
+import ImageBlock from '../blocks/image'
+import EmbedBlock from '../blocks/embed'
+import VideoBlock from '../blocks/video'
+import PlaceholderBlock from '../blocks/placeholder'
 
 import { 
   resetBlockWithType, 
-  addNewBlockAt } from '../model/index.js'
+  addNewBlockAt 
+} from '../../model/index.js'
 
 class Dante {
   constructor(options) {
@@ -50,7 +43,6 @@ class Dante {
     defaultOptions.spellcheck = false
     defaultOptions.title_placeholder = "Title"
     defaultOptions.body_placeholder = "Write your story"
-    // @defaultOptions.api_key = "86c28a410a104c8bb58848733c82f840"
 
     defaultOptions.widgets = [{
       title: 'add an image',
@@ -293,4 +285,4 @@ class Dante {
   }
 }
 
-module.exports = Dante
+export default Dante

data/src/components/{dante_editor.js → core/editor.js}

@@ -7,10 +7,7 @@ import {
   convertToRaw, 
   convertFromRaw, 
   CompositeDecorator, 
-  //getVisibleSelectionRect, 
-  getDefaultKeyBinding, 
-  //getSelectionOffsetKeyForNode, 
-  //KeyBindingUtil, 
+  getDefaultKeyBinding,
   ContentState, 
   Editor, 
   EditorState, 
@@ -18,20 +15,14 @@ import {
   RichUtils, 
   DefaultDraftBlockRenderMap, 
   SelectionState, 
-  Modifier, 
-  //BlockMapBuilder, 
-  //getSafeBodyFromHTML 
+  Modifier
 } from 'draft-js'
 
-//import DraftPasteProcessor from 'draft-js/lib/DraftPasteProcessor'
-
 import { 
   convertToHTML,
   //, convertFromHTML 
 } from 'draft-convert'
 
-//import isSoftNewlineEvent from 'draft-js/lib/isSoftNewlineEvent'
-
 import { 
   addNewBlock, 
   resetBlockWithType, 
@@ -39,26 +30,13 @@ import {
   //updateTextOfBlock, 
   getCurrentBlock, 
   addNewBlockAt 
-} from '../model/index.js'
-
-//import DanteImagePopover from './popovers/image'
-//import DanteAnchorPopover from './popovers/link'
-
-//import { getSelectionRect, getSelection } from "../utils/selection.js"
-//import DanteInlineTooltip from './popovers/addButton'
-//import DanteTooltip from './popovers/toolTip'
-import Link from './decorators/link'
+} from '../../model/index.js'
 
+import Link from '../decorators/link'
 import Debug from './debug'
-import findEntities from '../utils/find_entities'
-
-/*import ImageBlock from './blocks/image'
-import EmbedBlock from './blocks/embed'
-import VideoBlock from './blocks/video'
-import PlaceholderBlock from './blocks/placeholder'*/
-
-import SaveBehavior from '../utils/save_content'
-import customHTML2Content from '../utils/html2content'
+import findEntities from '../../utils/find_entities'
+import SaveBehavior from '../../utils/save_content'
+import customHTML2Content from '../../utils/html2content'
 
 
 class DanteEditor extends React.Component {
@@ -101,6 +79,8 @@ class DanteEditor extends React.Component {
     this.updateBlockData = this.updateBlockData.bind(this)
     this.setDirection = this.setDirection.bind(this)
     this.toggleEditable = this.toggleEditable.bind(this)
+    this.disableEditable = this.disableEditable.bind(this)
+    this.enableEditable = this.enableEditable.bind(this)
     this.closePopOvers = this.closePopOvers.bind(this)
     this.relocateTooltips = this.relocateTooltips.bind(this)
     this.tooltipsWithProp = this.tooltipsWithProp.bind(this)
@@ -110,6 +90,7 @@ class DanteEditor extends React.Component {
     this.showPopLinkOver = this.showPopLinkOver.bind(this)
     this.hidePopLinkOver = this.hidePopLinkOver.bind(this)
     this.render = this.render.bind(this)
+
     this.decorator = new CompositeDecorator([{
       strategy: findEntities.bind(null, 'LINK', this),
       component: Link
@@ -143,7 +124,7 @@ class DanteEditor extends React.Component {
     this.extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(this.blockRenderMap)
 
     this.state = {
-      editorState: this.initializeState(),
+      editorState: EditorState.createWithContent(convertFromRaw(this.props.content)),
       read_only: this.props.config.read_only,
       blockRenderMap: this.extendedBlockRenderMap,
       locks: 0,
@@ -172,6 +153,14 @@ class DanteEditor extends React.Component {
       editorState: this.state.editorState,
       editorContent: this.emitSerializedOutput()
     })
+
+    // TODO: fix this amateur mode
+    // here we add a new contentstate with the decorator in order to get contentState
+    setTimeout(()=>{
+      let newEditorState = EditorState.set(this.decodeEditorContent(this.props.content), {decorator: this.decorator});
+      this.onChange(newEditorState)      
+    }, 0)
+
   }
 
   initializeState() {
@@ -183,6 +172,12 @@ class DanteEditor extends React.Component {
     }
   }
 
+  decodeEditorContent(raw_as_json) {
+    const new_content = convertFromRaw(raw_as_json)
+    let editorState
+    return editorState = EditorState.createWithContent(new_content, this.decorator)
+  }
+
   refreshSelection(newEditorState) {
     const { editorState } = this.state
     // Setting cursor position after inserting to content
@@ -250,7 +245,9 @@ class DanteEditor extends React.Component {
     return this.save.editorContent = content
   }
 
-  focus() {}
+  focus() {
+    //debugger
+  }
   //@props.refs.richEditor.focus()
 
   getEditorState() {
@@ -263,13 +260,6 @@ class DanteEditor extends React.Component {
     return raw
   }
 
-  decodeEditorContent(raw_as_json) {
-    const new_content = convertFromRaw(raw_as_json)
-    let editorState
-
-    return editorState = EditorState.createWithContent(new_content, this.decorator)
-  }
-
   //# title utils
   getTextFromEditor() {
     const c = this.state.editorState.getCurrentContent()
@@ -354,6 +344,9 @@ class DanteEditor extends React.Component {
         getEditorState: this.getEditorState,
         setEditorState: this.onChange,
         addLock: this.addLock,
+        toggleEditable: this.toggleEditable,
+        disableEditable: this.disableEditable,
+        enableEditable: this.enableEditable,
         removeLock: this.removeLock,
         getLocks: this.getLocks,
         config: dataBlock.options
@@ -405,6 +398,7 @@ class DanteEditor extends React.Component {
     
     return setTimeout(() => {
       const items = this.tooltipsWithProp(prop)
+      console.log(items)
       return items.map(o => {
         this.refs[o.ref].display(display)
         return this.refs[o.ref].relocate()
@@ -571,6 +565,7 @@ class DanteEditor extends React.Component {
 
       if (currentBlock.getText().length > 0) {
 
+        /*
         if (blockType === "unstyled") {
           // hack hackety hack
           // https://github.com/facebook/draft-js/issues/304
@@ -590,7 +585,7 @@ class DanteEditor extends React.Component {
           }, 0)
 
           return true
-        }
+        }*/
 
         if (config_block && config_block.handleEnterWithText) {
           config_block.handleEnterWithText(this, currentBlock)
@@ -780,10 +775,22 @@ class DanteEditor extends React.Component {
   //# read only utils
   toggleEditable() {
     this.closePopOvers()
-
     return this.setState({ read_only: !this.state.read_only }, this.testEmitAndDecode)
   }
 
+  disableEditable() {
+    console.log("in !!")
+    this.closePopOvers()
+    return this.setState({ read_only: true }, this.testEmitAndDecode)
+  }
+
+  enableEditable() {
+    this.closePopOvers()
+        console.log("out !!")
+
+    return this.setState({ read_only: false }, this.testEmitAndDecode)
+  }
+
   closePopOvers() {
     return this.tooltips.map(o => {
       return this.refs[o.ref].hide()
@@ -870,7 +877,8 @@ class DanteEditor extends React.Component {
                     <hr className="section-divider" />
                   </div>
                   <div className="section-content">
-                    <div ref="richEditor" className="section-inner layoutSingleColumn"
+                    <div ref="richEditor" 
+                        className="section-inner layoutSingleColumn"
                         onClick={ this.focus }>
                       <Editor
                         blockRendererFn={ this.blockRenderer }
@@ -928,4 +936,4 @@ class DanteEditor extends React.Component {
   }
 }
 
-module.exports = DanteEditor
+export default DanteEditor

data/src/components/decorators/link.js

@@ -46,7 +46,8 @@ export default class Link extends React.Component {
   }
 
   render() {
-    this.data = Entity.get(this.props.entityKey).getData()
+    this.data = this.props.contentState.getEntity(this.props.entityKey).getData()
+    //Entity.get(this.props.entityKey).getData()
 
     return (
       <a

data/src/components/init.js

@@ -0,0 +1,8 @@
+
+import Dante from './core/dante'
+import DanteEditor from './core/editor'
+
+export {
+  Dante, 
+  DanteEditor
+}

data/src/components/popovers/addButton.js

@@ -152,6 +152,11 @@ class DanteInlineTooltip extends React.Component {
     return this.insertImage(fileList[0])
   }
 
+  handleInsertion(e){
+    this.hide()
+    return this.props.onChange(addNewBlock(this.props.editorState, e.type, {}))
+  }
+
   widgets() {
     return this.props.editor.widgets
   }
@@ -164,6 +169,8 @@ class DanteInlineTooltip extends React.Component {
         return this.clickOnFileUpload(e, request_block)
       case "placeholder":
         return this.handlePlaceholder(request_block)
+      case "insertion":
+        return this.handleInsertion(request_block)
       default:
         return console.log(`WRONG TYPE FOR ${ request_block.widget_options.insertion }`)
     }

data/src/components/popovers/toolTip.js

@@ -207,8 +207,9 @@ class DanteTooltip extends React.Component {
       showPopLinkOver: this.props.showPopLinkOver,
       hidePopLinkOver: this.props.hidePopLinkOver
     }
-
+    
     let entityKey = Entity.create('LINK', 'MUTABLE', opts)
+    //contentState.createEntity('LINK', 'MUTABLE', opts)
 
     if (selection.isCollapsed()) {
       console.log("COLLAPSED SKIPPING LINK")
@@ -241,16 +242,17 @@ class DanteTooltip extends React.Component {
     if (this.refs.dante_menu_input) {
       this.refs.dante_menu_input.value = ""
     }
-
+    
     let currentBlock = getCurrentBlock(this.props.editorState)
     let blockType = currentBlock.getType()
     let selection = this.props.editor.state.editorState.getSelection()
+    let contentState = this.props.editorState.getCurrentContent()
     let selectedEntity = null
     let defaultUrl = null
     return currentBlock.findEntityRanges(character => {
       let entityKey = character.getEntity()
       selectedEntity = entityKey
-      return entityKey !== null && Entity.get(entityKey).getType() === 'LINK'
+      return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK'
     }, (start, end) => {
       let selStart = selection.getAnchorOffset()
       let selEnd = selection.getFocusOffset()
@@ -260,7 +262,7 @@ class DanteTooltip extends React.Component {
       }
 
       if (start === selStart && end === selEnd) {
-        defaultUrl = Entity.get(selectedEntity).getData().url
+        defaultUrl = contentState.getEntity(selectedEntity).getData().url
         return this.refs.dante_menu_input.value = defaultUrl
       }
     })
@@ -296,11 +298,14 @@ class DanteTooltip extends React.Component {
                       />
             })
           }
+
           <DanteTooltipLink
             editorState={ this.props.editorState }
             enableLinkMode={ this._enableLinkMode }
           />
-            { this.inlineItems().map( (item, i) => {
+
+
+          { this.inlineItems().map( (item, i) => {
               return  <DanteTooltipItem
                         key={ i }
                         item={ item }
@@ -398,5 +403,10 @@ class DanteTooltipLink extends React.Component {
   }
 }
 
+
+
+
+
+
 export default DanteTooltip
 

data/src/index.js

@@ -1,9 +1,10 @@
 
-import Dante from './components/dante'
-import DanteEditor from './components/dante_editor'
+import {DanteEditor, Dante} from './components/init.js'
 
+window.Dante = Dante
+window.DanteEditor = DanteEditor
 
-module.exports = {
+export {
   Dante, 
   DanteEditor
 }

data/src/styles/custom.css

@@ -0,0 +1,189 @@
+.signature {
+    position: relative;
+    display: table;
+    float: left;
+    margin-bottom: 20px;
+}
+
+.signature img {
+    float: left;
+    margin-right: 30px;
+    margin-bottom: 0!important;
+    height: 100px;
+    width: 100px;
+    border-radius: 50px;
+}
+
+.signature .text {
+    width: 100%;
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.signature .text p {
+    margin-bottom: 0!important;
+}
+
+.dante-clearfix:after {
+  clear:both
+}
+.dante-clearfix:before{
+  display: table;
+  content: " ";
+}
+
+
+
+ .dropdown .btn {
+    color: #BEC2CC;
+    padding: 0 10px;
+    width: auto;
+    font-size: 12px;
+}
+
+.text-toolbar button {
+    position: relative;
+    float: left;
+    height: 40px;
+    width: 40px;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    padding: 0;
+}
+
+
+// dropdown
+
+.dropdown {
+    float: left;
+}
+
+.dropdown, .dropup {
+    position: relative;
+}
+
+.dropdown .btn {
+    color: #BEC2CC;
+    padding: 0 10px;
+    width: auto;
+    font-size: 12px;
+}
+
+.dante-menu-button.visible-overflow{
+  overflow:visible;
+}
+
+.dante-menu-button button {
+    position: relative;
+    float: left;
+    height: 40px;
+    width: 40px;
+    background: transparent !important;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    padding: 0;
+}
+
+.dropdown .dropdown-menu {
+    background: #2A2B32;
+    padding: 0;
+    max-height: 300px;
+    overflow-y: auto;
+    width: auto;
+    min-width: 60px;
+}
+
+.open>.dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+
+.dropdown .dropdown-menu li {
+    border-bottom: 1px solid #383943;
+}
+
+.editor .container .content-edit .text-toolbar .dropdown .dropdown-menu li a {
+    color: #BEC2CC;
+    font-size: 12px;
+    padding: 0 10px;
+    line-height: 30px;
+}
+
+.dropdown-menu>li>a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #fff;
+    white-space: nowrap;
+}
+
+.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
+    color: #fff;
+    background-color: #e6e6e6;
+    border-color: #adadad;
+}
+
+.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
+    background-image: none;
+}
+
+.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
+    color: #fff;
+    background-color: #e6e6e6;
+    border-color: #adadad;
+}
+
+.btn-default {
+    color: #fff;
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.btn {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}

data/src/styles/dante/_icons.scss

@@ -45,11 +45,13 @@
     line-height: 1;
 
     // Better Font Rendering
-     -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 }
 
+.dante-icon-divider:before { content: "\e904"; }
+
 .dante-icon-image-center:before { content: "\e900"; }
 .dante-icon-image-fill:before   { content: "\e901"; }
 .dante-icon-image-left:before   { content: "\e902"; }

data/src/styles/dante.scss

@@ -19,4 +19,6 @@
 
 @import "./dante/debug";
 
+@import "./custom"
+
 //@import "./layout/normalize"

data/src/styles/draft.css

@@ -18,6 +18,11 @@
   position: relative;
 }
 
+// HACK FOR ISSUE  https://github.com/facebook/draft-js/issues/304 , proposal from @bradbumbalough
+.DraftEditor-root {
+  overflow: auto;
+}
+
 /**
  * Zero-opacity background used to allow focus in IE. Otherwise, clicks
  * fall through to the placeholder.

data/src/styles/fonts/dante/dante.svg

@@ -15,4 +15,5 @@
 <glyph unicode="&#xe901;" glyph-name="image-fill" horiz-adv-x="1152" d="M128 128h896v-96h-896v96zM0 896h1152v-672h-1152v672z" />
 <glyph unicode="&#xe902;" glyph-name="image-left" horiz-adv-x="1152" d="M256 128h896v-96h-896v96zM768 320h384v-96h-384v96zM0 704h672v-480h-672v480zM768 512h384v-96h-384v96zM768 704h384v-96h-384v96zM256 896h896v-96h-896v96z" />
 <glyph unicode="&#xe903;" glyph-name="image-wide" horiz-adv-x="1152" d="M128 128h896v-96h-896v96zM0 704h1152v-480h-1152v480zM128 896h896v-96h-896v96z" />
+<glyph unicode="&#xe904;" glyph-name="divider" d="M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z" />
 </font></defs></svg>

data/src/utils/find_entities.js

@@ -5,11 +5,12 @@ const findEntities = (entityType, instance, contentBlock, callback) => {
   return contentBlock.findEntityRanges((function(_this) {
     return function(character) {
       var entityKey, opts, res
+      let contentState = instance.state.editorState.getCurrentContent()
       entityKey = character.getEntity()
-      return (res = entityKey !== null && Entity.get(entityKey).getType() === entityType, res ? (opts = {
+      return (res = entityKey !== null && contentState.getEntity(entityKey).getType() === entityType, res ? (opts = {
         showPopLinkOver: instance.showPopLinkOver,
         hidePopLinkOver: instance.hidePopLinkOver
-      }, Entity.mergeData(entityKey, opts)) : void 0, res)
+      }, contentState.mergeEntityData(entityKey, opts)) : void 0, res)
     }
   })(this), callback)
 }

data/src/utils/html2content.js

@@ -89,11 +89,13 @@ let customHTML2Content = function(HTML, blockRn){
   // use DraftJS converter to do initial conversion. I don't provide DOMBuilder and
   // blockRenderMap arguments here since it should fall back to its default ones, which are fine
   console.log(tempDoc.body.innerHTML)
-  let contentBlocks = convertFromHTML(tempDoc.body.innerHTML,
+  let content = convertFromHTML(tempDoc.body.innerHTML,
         getSafeBodyFromHTML,
         blockRn
   )
 
+  let contentBlocks = content.contentBlocks
+
   // now replace <blockquote /> ContentBlocks with 'atomic' ones
   contentBlocks = contentBlocks.map(function(block){
     let newBlock

data/webpack/base.config.js

@@ -47,10 +47,10 @@ const baseConfig = {
         loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' })
       },
 
-      { test: path.resolve("./src/components/dante_editor.js"), 
+      { test: path.resolve("./src/components/core/dante_editor.js"), 
         loaders: ["expose-loader?DanteEditor", "babel-loader?presets[]=es2015"]},
       
-      { test: path.resolve("./src/components/dante.js"), 
+      { test: path.resolve("./src/components/core/dante.js"), 
         loaders: ["expose-loader?Dante", "babel-loader?presets[]=es2015"]},
 
       {