dante2-editor 0.2.0

data/app/components/blocks/video.cjsx

@@ -0,0 +1,75 @@
+
+React = require('react')
+ReactDOM = require('react-dom')
+
+{
+  Entity,
+  RichUtils
+  AtomicBlockUtils
+  EditorBlock
+} = require('draft-js')
+
+{ updateDataOfBlock } = require('../../model/index.js')
+
+axios = require("axios")
+
+class VideoBlock extends React.Component
+  constructor: (props) ->
+    super props
+    #api_key = "86c28a410a104c8bb58848733c82f840"
+    
+    @state = 
+      embed_data: @defaultData()
+
+  defaultData: ->
+    existing_data = @.props.block.getData().toJS()
+    existing_data.embed_data || {}
+
+  # will update block state
+  updateData: =>
+    blockProps = @.props.blockProps
+    block = @.props.block
+    getEditorState = @props.blockProps.getEditorState
+    setEditorState = @props.blockProps.setEditorState
+    data = block.getData();
+    newData = data.merge(@state)
+    setEditorState(updateDataOfBlock(getEditorState(), block, newData))
+
+  dataForUpdate: =>
+    @.props.blockProps.data.toJS()
+
+  componentDidMount: ->
+
+    return unless @.props.blockProps.data
+    # ensure data isnt already loaded
+    return unless @dataForUpdate().endpoint or @dataForUpdate().provisory_text
+
+    axios
+      method: 'get'
+      url: "#{@.dataForUpdate().endpoint}#{@.dataForUpdate().provisory_text}&scheme=https"
+    .then (result)=>
+      @setState
+        embed_data: result.data #JSON.parse(data.responseText)
+      , @updateData    
+    .catch (error)=>
+      console.log("TODO: error")
+
+  classForImage: ->
+    if @state.embed_data.thumbnail_url then "" else "mixtapeImage--empty u-ignoreBlock"
+
+  render: ->
+    return(
+      <figure
+        className='graf--figure graf--iframe graf--first' tabIndex='0'>
+        <div className='iframeContainer' dangerouslySetInnerHTML={__html: @state.embed_data.html}>
+        </div>
+        <figcaption
+          className='imageCaption'>
+            <EditorBlock {...@props} 
+              className="imageCaption"
+            />
+        </figcaption>
+      </figure>
+    )
+
+module.exports = VideoBlock

data/app/components/debug.cjsx

@@ -0,0 +1,96 @@
+React = require('react')
+
+class Debug extends React.Component
+
+  constructor: (options={})->
+    @state = 
+      output: ""
+      display: "none"
+
+  handleToggleReadOnly: (e)=>
+    e.preventDefault()
+    @props.editor.toggleEditable()
+    return false
+
+  handleTestEmitAndDecode: (e)=>
+    e.preventDefault()
+    @.testEmitAndDecode()
+
+  handleTestEmitTEXT: (e)=>
+    e.preventDefault()
+    @.testEmitTEXT()
+
+  testEmitAndDecode: (e)=>
+    raw_as_json = @props.editor.emitSerializedOutput()
+    @props.editor.setState
+      editorState: @props.editor.decodeEditorContent(raw_as_json)
+    , @logState(JSON.stringify(raw_as_json))
+    false
+
+  testEmitTEXT: ()=>
+    text = @props.editor.getTextFromEditor()
+    @logState(text)
+
+  logState: (raw)=>
+    @setState
+      output: raw
+    , @open
+
+  toggleDisplay: (e)=>
+    e.preventDefault()
+    d = if @state.display is "block" then "none" else @state.display
+    @setState
+      display: d
+
+  open: =>
+    @setState
+      display: "block"
+
+  render: =>
+    return (
+
+      <div>
+        <div className="debugControls">
+          <ul>
+            <li>LOCKS: {@props.editor.state.locks}</li>
+            <li>
+              <a href="#" onClick={@handleToggleReadOnly}>
+                EDITABLE: {if @props.editor.state.read_only then 'NO' else 'YES'}
+              </a>
+            </li>
+            <li>
+              <a href="#" onClick={@handleTestEmitTEXT}>
+                EDITOR TEXT
+              </a>
+            </li>
+            
+            <li>
+              <a href="#" onClick={@handleTestEmitAndDecode}>
+                EDITOR STATE
+              </a>
+            </li>
+
+          </ul>
+        </div>
+
+        <div className="debugZone" style={display: @state.display}>
+          <a href="#" 
+            className="dante-debug-close close"
+            onClick={@toggleDisplay}
+          />
+
+          <div className="debugOutput">
+            <h2>EDITOR OUTPUT</h2>
+            {
+              if @state.output.length > 0
+                <pre>
+                  {@state.output}
+                </pre>
+            }
+          </div>
+        </div>
+      </div>
+    )
+
+
+module.exports = Debug

data/app/components/decorators/link.cjsx

@@ -0,0 +1,61 @@
+React = require('react')
+{Entity} = require('draft-js')
+
+###
+Link = (props) ->
+  data = Entity.get(props.entityKey).getData();
+  console.log props
+  #onMouseOver={@props.showPopLinkOver}>
+  #onMouseOut={@props.hidePopLinkOver}>
+  return (
+    <a href={data.url} className="markup--anchor">
+      {props.children}
+    </a>
+  );
+###
+
+class Link extends React.Component
+
+  constructor: (props) ->
+    super props
+    @isHover = false
+
+  _validateLink: ()=>
+    pattern = new RegExp('^(https?:\/\/)?'+ # protocol
+      '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ # domain name
+      '((\d{1,3}\.){3}\d{1,3}))'+ # OR ip (v4) address
+      '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ # port and path
+      '(\?[;&a-z\d%_.~+=-]*)?'+ # query string
+      '(\#[-a-z\d_]*)?$','i') # fragment locater
+    if !pattern.test(str)
+      alert("Please enter a valid URL.")
+      return false
+    else
+      return true
+
+  _checkProtocol: ()=>
+    console.log "xcvd"
+
+
+  _showPopLinkOver: (e)=>
+    return unless @data.showPopLinkOver
+    @data.showPopLinkOver(@refs.link)
+
+  _hidePopLinkOver: (e)=>
+    return unless @data.hidePopLinkOver
+    @data.hidePopLinkOver()
+
+  render: ->
+    @data = Entity.get(@props.entityKey).getData();
+
+    return (
+      <a ref="link" 
+        href={@data.url} 
+        className="markup--anchor"
+        onMouseOver={@_showPopLinkOver}
+        onMouseOut={@_hidePopLinkOver}>
+        {@props.children}
+      </a>
+    );  
+
+module.exports = Link

data/app/components/popovers/addButton.cjsx

@@ -0,0 +1,247 @@
+React = require('react')
+ReactDOM = require('react-dom')
+
+{
+  Entity
+  RichUtils
+  AtomicBlockUtils
+  EditorState
+} = require('draft-js')
+
+{ 
+  addNewBlock
+  resetBlockWithType
+  updateDataOfBlock
+  getCurrentBlock
+  getNode
+} = require('../../model/index.js')
+
+{ 
+  getSelectionRect
+  getSelection
+} = require("../../utils/selection.js")
+
+class DanteInlineTooltip extends React.Component
+
+  constructor: (props) ->
+    super props
+
+    @state = 
+      position: {top: 0, left:0}
+      show: false
+      scaled: false
+
+  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
+
+  componentWillReceiveProps: (newProps)=>
+    @collapse()
+
+  activeClass: ->
+    #if @props.show then "is-active" else ""
+    if @isActive() then "is-active" else ""
+
+  isActive: ->
+    @state.show 
+
+  scaledClass: ->
+    if @state.scaled then "is-scaled" else ""
+
+  scaledWidth: ->
+    if @state.scaled then "124" else "0"   
+
+  clickOnFileUpload: => 
+    @.refs.fileInput.click()
+    @collapse()
+    @hide()
+
+  handlePlaceholder: (input)=>
+    opts =
+      type: input.widget_options.insert_block
+      placeholder: input.options.placeholder
+      endpoint: input.options.endpoint
+
+    @props.onChange(resetBlockWithType(@props.editorState, 'placeholder', opts));
+
+  insertImage: (file) =>
+    opts =  
+      url: URL.createObjectURL(file)
+      file: file
+
+    @props.onChange(addNewBlock(@props.editorState, 'image', opts));
+
+  handleFileInput: (e)=>
+    fileList = e.target.files
+    # TODO: support multiple file uploads
+    ###
+    Object.keys(fileList).forEach (o)=>
+      @.insertImage(fileList[0])
+    ###
+    @.insertImage(fileList[0])
+
+  widgets: =>
+    @.props.editor.widgets
+
+  clickHandler: (e, type)=>
+    request_block = @widgets().find (o)-> 
+      o.icon is type 
+
+    switch request_block.widget_options.insertion
+      when "upload" 
+        @clickOnFileUpload(e, request_block)
+      when "placeholder" 
+        @handlePlaceholder(request_block)
+      else 
+        console.log "WRONG TYPE FOR #{request_block.widget_options.insertion}"
+
+  getItems: ->
+    @widgets().filter (o)=>
+      o.widget_options.displayOnInlineTooltip
+  
+  isDescendant: (parent, child)->
+    node = child.parentNode
+    while node != null
+       if (node is parent)
+           return true
+       node = node.parentNode
+    return 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 #utils.getSelectionDimensions(node)
+      
+      parent = ReactDOM.findDOMNode(@props.editor);
+      parentBoundary = parent.getBoundingClientRect();
+
+      # hide if selected node is not in editor
+      # debugger
+      #console.log @isDescendant(parent, nativeSelection.anchorNode)
+
+      if !@isDescendant(parent, nativeSelection.anchorNode)
+        @hide()
+        return
+
+      # checkeamos si esta vacio
+      @display block.getText().length is 0 and blockType is "unstyled"
+      @setPosition
+        top: coords.top + window.scrollY
+        left: coords.left + window.scrollX - 60
+
+      ###
+      @refs.image_popover.display(blockType is "image")
+
+      if blockType is "image"
+        selectionBoundary = node.anchorNode.parentNode.parentNode.parentNode.getBoundingClientRect()
+        #el = document.querySelector("#dante_image_popover")
+        el = @refs.image_popover.refs.image_popover
+        padd   = el.offsetWidth / 2
+        @refs.image_popover.setPosition
+          top: selectionBoundary.top - parentBoundary.top + 60
+          left: selectionBoundary.left + (selectionBoundary.width / 2) - padd
+
+        
+        #@setState
+        #  image_popover_position: 
+        #    top: selectionBoundary.top - parentBoundary.top + 60
+        #    left: selectionBoundary.left + (selectionBoundary.width / 2) - padd
+        #
+      ###
+
+    else
+      @hide()
+
+  render: ->
+    return (
+
+      <div className="inlineTooltip #{@activeClass()} #{@scaledClass()}" 
+        style={@state.position}>
+        
+        <button className="inlineTooltip-button control" 
+          title="Close Menu" 
+          data-action="inline-menu"
+          onClick={@_toggleScaled}
+        > 
+          <span className="tooltip-icon dante-icon-plus"></span> 
+        </button> 
+        
+        <div className="inlineTooltip-menu" style={{width: "#{@scaledWidth()}px"}}> 
+          
+          {
+            @getItems().map (item, i)=>
+              <InlineTooltipItem
+                item={item}
+                key={i}
+                clickHandler={@clickHandler}
+              />
+          }
+
+          <input type="file" 
+            style={{display: 'none'}}
+            ref="fileInput" 
+            multiple="multiple"
+            onChange={@.handleFileInput}
+          />
+
+        </div>
+
+      </div>
+
+    )
+
+class InlineTooltipItem extends React.Component
+
+  clickHandler: (e)=>
+    e.preventDefault()
+    @props.clickHandler(e, @props.item.icon)
+
+  render: ->
+    return (
+      <button className="inlineTooltip-button scale" 
+        title={@props.title} onMouseDown={@clickHandler}> 
+        <span className="tooltip-icon dante-icon-#{@props.item.icon}">
+        </span> 
+      </button>
+    )
+
+module.exports = DanteInlineTooltip