dante2-editor 0.2.0

data/app/components/popovers/image.cjsx

@@ -0,0 +1,160 @@
+
+React = require('react')
+ReactDOM = require('react-dom')
+
+{
+  Entity
+  RichUtils
+  AtomicBlockUtils
+  EditorState
+} = require('draft-js')
+
+{ 
+  getSelectionRect
+  getSelection
+} = require("../../utils/selection.js")
+
+{ 
+  getCurrentBlock
+  getNode
+} = require('../../model/index.js')
+
+
+class DanteImagePopover extends React.Component
+
+  constructor: (props) ->
+    super props
+
+    @state = 
+      position: 
+        top: 0
+        left:0
+      show: false
+      scaled: false
+      buttons: [
+        {type: "left" }
+        {type: "center" }
+        {type: "fill" }
+        {type: "wide" }
+      ]
+
+  display: (b)=>
+    if b then @show() else @hide()
+
+  show: =>
+    @setState
+      show: true
+
+  hide: =>
+    @setState
+      show: false
+
+  setPosition: (coords)->
+    @setState
+      position: coords
+
+  _toggleScaled: (ev)=>
+    if @state.scaled then @collapse() else @scale()
+
+  scale: =>
+    @setState
+      scaled: true
+
+  collapse: =>
+    @setState
+      scaled: false
+  
+  relocate: ()=>
+    editorState = @props.editorState
+    
+    if editorState.getSelection().isCollapsed()
+
+      currentBlock = getCurrentBlock(editorState)
+      blockType = currentBlock.getType()
+      
+      contentState = editorState.getCurrentContent()
+      selectionState = editorState.getSelection()
+
+      block = contentState.getBlockForKey(selectionState.anchorKey)
+
+      nativeSelection = getSelection(window)
+      if !nativeSelection.rangeCount
+        return;
+
+      node = getNode()
+
+      selectionBoundary = getSelectionRect(nativeSelection)
+      coords = selectionBoundary
+      
+      parent = ReactDOM.findDOMNode(@props.editor);
+      parentBoundary = parent.getBoundingClientRect();
+
+      @display(blockType is "image")
+
+      if blockType is "image"
+        selectionBoundary = node.anchorNode.parentNode.parentNode.parentNode.getBoundingClientRect()
+        el = @refs.image_popover
+        padd   = el.offsetWidth / 2
+        @setPosition
+          top: selectionBoundary.top - parentBoundary.top + 60
+          left: selectionBoundary.left + (selectionBoundary.width / 2) - padd
+
+    else
+      @hide()
+
+  componentWillReceiveProps: (newProps)=>
+    @collapse()
+
+  getStyle: ->
+    return {} if !@state.position
+    
+  handleClick: (item)=>
+    @props.editor.setDirection(item.type)
+
+  render: ->
+    return (
+
+      <div ref="image_popover" 
+          className="dante-popover popover--Aligntooltip popover--top popover--animated #{'is-active' if @state.show}" 
+          style={{top: @state.position.top, left: @state.position.left}}>
+
+        <div className='popover-inner'>
+
+          <ul className='dante-menu-buttons'>
+
+            {
+              @state.buttons.map (item, i)=>
+                <DanteImagePopoverItem
+                  item={item}
+                  handleClick={@handleClick}
+                  key={i}
+                />
+            }
+
+          </ul>
+
+        </div>
+
+        <div className='popover-arrow'>
+        </div>
+      </div>
+
+    )
+
+class DanteImagePopoverItem extends React.Component
+
+  handleClick: (e)=>
+    e.preventDefault()
+    @props.handleClick(@props.item)
+
+  render: =>
+    return (
+      <li
+        className="dante-menu-button align-#{@props.item.type}"
+        onMouseDown={@handleClick}>
+        <span className="tooltip-icon dante-icon-image-#{@props.item.type}"></span>
+      </li>
+    )
+
+module.exports = DanteImagePopover
+

data/app/components/popovers/link.cjsx

@@ -0,0 +1,87 @@
+
+React = require('react')
+ReactDOM = require('react-dom')
+
+{ 
+  getCurrentBlock
+} = require('../../model/index.js')
+
+class DanteAnchorPopover extends React.Component
+
+  constructor: (props) ->
+
+    super props
+    @state = 
+      position: 
+        top: 0
+        left:0
+      show: false
+      url: ""
+
+
+  display: (b)=>
+    if b then @show() else @hide()
+
+  show: =>
+    @setState
+      show: true
+
+  hide: =>
+    @setState
+      show: false
+
+  setPosition: (coords)->
+    @setState
+      position: coords
+  
+  relocate: (node=null)=>
+    return unless node
+    
+    editorState = @props.editorState
+    currentBlock = getCurrentBlock(editorState)
+    blockType = currentBlock.getType()
+    
+    contentState = editorState.getCurrentContent()
+    selectionState = editorState.getSelection()
+
+    selectionBoundary = node.getBoundingClientRect()
+    coords = selectionBoundary 
+
+    el = @refs.dante_popover
+    padd   = el.offsetWidth / 2
+
+    parent = ReactDOM.findDOMNode(@props.editor);
+    parentBoundary = parent.getBoundingClientRect()
+  
+    {
+      top: selectionBoundary.top - parentBoundary.top + 160
+      left: selectionBoundary.left + (selectionBoundary.width/2) - (padd)
+    }
+
+
+  render: =>
+    position = @state.position
+    style = {
+              left: position.left, 
+              top: position.top, 
+              visibility: "#{if @state.show then 'visible' else 'hidden'}"
+            }
+    return (
+      <div
+        ref="dante_popover"
+        className='dante-popover popover--tooltip popover--Linktooltip popover--bottom is-active'
+        style={style}
+        onMouseOver={@props.handleOnMouseOver}
+        onMouseOut={@props.handleOnMouseOut}
+        >
+        <div className='popover-inner'>
+          <a href={@props.url} target='_blank'>
+            {@state.url}
+          </a>
+        </div>
+        <div className='popover-arrow'>
+        </div>
+      </div>
+    )
+
+module.exports = DanteAnchorPopover

data/app/components/popovers/toolTip.cjsx

@@ -0,0 +1,326 @@
+React = require('react')
+ReactDOM = require('react-dom')
+
+{
+  convertToRaw,
+  CompositeDecorator,
+  getVisibleSelectionRect,
+  getDefaultKeyBinding, 
+  getSelectionOffsetKeyForNode,
+  KeyBindingUtil,
+  ContentState,
+  Editor,
+  EditorState,
+  Entity,
+  RichUtils
+} = require('draft-js')
+
+{ 
+  getSelectionRect
+  getSelection
+} = require("../../utils/selection.js")
+
+{ 
+  getCurrentBlock
+} = require('../../model/index.js')
+
+
+class DanteTooltip extends React.Component
+
+  constructor: (props) ->
+    super props
+    @getVisibleSelectionRect = getVisibleSelectionRect
+    @state = 
+      link_mode: false
+      show: false
+      position: {}
+
+  _clickInlineHandler: (ev, style)=>
+    ev.preventDefault()
+
+    @props.onChange(
+      RichUtils.toggleInlineStyle(@props.editorState, style)
+    )
+
+    setTimeout ()=>
+      @relocate()
+    , 0
+
+  display: (b)=>
+    if b then @show() else @hide()
+
+  show: =>
+    @setState
+      show: true
+
+  hide: =>
+    @setState
+      link_mode: false
+      show: false
+
+  setPosition: (coords)->
+    @setState
+      position: coords
+  
+
+  isDescendant: (parent, child)->
+    node = child.parentNode
+    while node != null
+       if (node is parent)
+           return true
+       node = node.parentNode
+    return false
+
+  relocate: ()=>
+
+    currentBlock = getCurrentBlock(@props.editorState);
+    blockType    = currentBlock.getType()
+    # display tooltip only for unstyled
+
+    if @.props.configTooltip.selectionElements.indexOf(blockType) < 0
+      @hide()
+      return
+
+    return if @state.link_mode
+    return if !@state.show
+
+
+    el = @refs.dante_menu 
+    padd   = el.offsetWidth / 2
+
+    nativeSelection = getSelection(window);
+    if !nativeSelection.rangeCount
+      return
+    
+    selectionBoundary = getSelectionRect(nativeSelection);
+
+    parent = ReactDOM.findDOMNode(@props.editor);
+    parentBoundary = parent.getBoundingClientRect();
+
+    # hide if selected node is not in editor
+    if !@isDescendant(parent, nativeSelection.anchorNode)
+      @hide()
+      return
+
+
+    top    = selectionBoundary.top - parentBoundary.top - -90 - 5
+    left   = selectionBoundary.left + (selectionBoundary.width / 2) - padd
+
+    if !top or !left
+      return
+
+    # console.log "SET SHOW FOR TOOLTIP INSERT MENU"
+    @setState
+      show: true
+      position: 
+        left: left
+        top: top
+
+  _clickBlockHandler: (ev, style)=>
+    ev.preventDefault()
+
+    @props.onChange(
+      RichUtils.toggleBlockType(@props.editorState, style)
+    )
+
+    setTimeout ()=>
+      @relocate()
+    , 0
+
+  displayLinkMode: =>
+    if @state.link_mode then "dante-menu--linkmode" else ""
+
+  displayActiveMenu: =>
+    if @state.show then "dante-menu--active" else ""
+
+  _enableLinkMode: (ev)=>
+    ev.preventDefault()
+    @setState
+      link_mode: true
+
+  _disableLinkMode: (ev)=>
+    ev.preventDefault()
+    @setState
+      link_mode: false
+      url: ""
+
+  hideMenu: ->
+    @hide()
+
+  handleInputEnter: (e)=>    
+    if (e.which is 13)
+      return @confirmLink(e)
+
+  confirmLink: (e)=>
+    e.preventDefault()
+    editorState = @.props.editorState
+    urlValue = e.currentTarget.value
+    contentState = editorState.getCurrentContent()
+    selection = editorState.getSelection()
+
+    opts = {
+      url: urlValue
+      showPopLinkOver: @props.showPopLinkOver 
+      hidePopLinkOver: @props.hidePopLinkOver
+    }
+
+    entityKey = Entity.create('LINK', 'MUTABLE', opts);
+
+    if selection.isCollapsed()
+      console.log "COLLAPSED SKIPPING LINK"
+      return
+
+    @props.onChange(
+      RichUtils.toggleLink(
+        editorState,
+        selection,
+        entityKey
+      )
+    )
+  
+    @_disableLinkMode(e)
+
+  getPosition: ->
+    pos = @state.position
+    pos
+
+  inlineItems: =>
+    @props.widget_options.block_types.filter (o)=>
+      o.type is "inline"
+
+  blockItems: =>
+    @props.widget_options.block_types.filter (o)=>
+      o.type is "block"
+
+  getDefaultValue: =>
+    @refs.dante_menu_input.value = "" if @refs.dante_menu_input
+
+    currentBlock = getCurrentBlock(@props.editorState);
+    blockType    = currentBlock.getType()
+    selection    = @props.editor.state.editorState.getSelection()
+    selectedEntity = null
+    defaultUrl = null
+    currentBlock.findEntityRanges (character) =>
+      entityKey = character.getEntity()
+      selectedEntity = entityKey
+      return entityKey isnt null && Entity.get(entityKey).getType() is 'LINK'
+    , (start, end) =>
+      selStart = selection.getAnchorOffset()
+      selEnd = selection.getFocusOffset()
+      if selection.getIsBackward() 
+        selStart = selection.getFocusOffset()
+        selEnd = selection.getAnchorOffset()
+      
+      if start is selStart && end is selEnd
+        defaultUrl = Entity.get(selectedEntity).getData().url
+        @refs.dante_menu_input.value = defaultUrl
+
+  render: ->
+    return (
+      <div id="dante-menu" 
+        ref="dante_menu"
+        className="dante-menu #{@displayActiveMenu()} #{@displayLinkMode()}" 
+        style={@getPosition()}>
+        
+        <div className="dante-menu-linkinput">
+          <input className="dante-menu-input" 
+            ref="dante_menu_input"
+            placeholder="Paste or type a link" 
+            onKeyPress={@handleInputEnter}
+            defaultValue={@getDefaultValue()}
+          />
+
+          <div className="dante-menu-button" 
+            onMouseDown={@_disableLinkMode}>
+            x
+          </div>
+        </div>
+
+        <ul className="dante-menu-buttons">
+          {
+            @blockItems().map (item, i)=>
+              <DanteTooltipItem 
+                key={i}
+                item={item}
+                handleClick={@_clickBlockHandler}
+                editorState={@props.editorState}
+                type={"block"}
+                currentStyle={@props.editorState.getCurrentInlineStyle}
+              />
+          }
+          {
+            <DanteTooltipLink 
+              editorState={@props.editorState}
+              enableLinkMode={@_enableLinkMode}
+            />
+          }
+          {
+            @inlineItems().map (item, i)=>
+              <DanteTooltipItem 
+                key={i}
+                item={item}
+                type={"inline"}
+                editorState={@props.editorState}
+                handleClick={@_clickInlineHandler}
+              />
+          }
+        </ul>
+      </div>
+    )
+
+class DanteTooltipItem extends React.Component
+
+  handleClick: (ev)=>
+    @props.handleClick(ev, @props.item.style)
+
+  activeClass: =>
+    if @isActive() then "active" else ""
+
+  isActive: =>
+    if @props.type is "block"
+      @activeClassBlock()
+    else
+      @activeClassInline()
+
+  activeClassInline: =>
+    return unless @props.editorState
+    #console.log @props.item
+    @props.editorState.getCurrentInlineStyle().has(@props.item.style)
+
+  activeClassBlock: =>
+    #console.log "EDITOR STATE", @props.editorState
+    return unless @props.editorState
+    selection = @props.editorState.getSelection()
+    blockType = @props.editorState
+                .getCurrentContent()
+                .getBlockForKey(selection.getStartKey())
+                .getType()
+    @props.item.style is blockType
+
+  render: =>
+    return (
+      <li className="dante-menu-button #{@activeClass()}" 
+        onMouseDown={@handleClick}>
+        <i className="dante-icon dante-icon-#{@props.item.label}" 
+          data-action="bold"></i>
+      </li>
+    )
+
+class DanteTooltipLink extends React.Component
+
+  promptForLink: (ev)=>
+    selection = @props.editorState.getSelection()
+    if (!selection.isCollapsed())
+      @props.enableLinkMode(ev)
+
+  render: ->
+    return (
+      <li className="dante-menu-button" 
+        onMouseDown={@.promptForLink}>
+        <i className="dante-icon icon-createlink" 
+        data-action="createlink">link</i>
+      </li>
+    )
+
+
+module.exports = DanteTooltip