dante2-editor 0.2.0 → 0.3.1

data/app/components/blocks/embed.cjsx

@@ -1,109 +0,0 @@
-
-React = require('react')
-ReactDOM = require('react-dom')
-
-{
-  Entity,
-  RichUtils
-  AtomicBlockUtils
-  EditorBlock
-} = require('draft-js')
-
-axios = require("axios")
-
-{ updateDataOfBlock } = require('../../model/index.js')
-
-class EmbedBlock extends React.Component
-  constructor: (props) ->
-    super props
-    #api_key = "86c28a410a104c8bb58848733c82f840"
-
-    @state = 
-      embed_data: @defaultData()
-      error: ""
-
-  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
-    # unless @dataForUpdate().endpoint or @dataForUpdate().provisory_text
-      
-    unless @dataForUpdate().endpoint or @dataForUpdate().provisory_text
-      #debugger
-      return
-
-    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)=>
-      
-      @setState
-        error: error.response.data.error_message
-      console.log("TODO: error")
-      
-  classForImage: ->
-    if @state.embed_data.images then "" else "mixtapeImage--empty u-ignoreBlock"
-    #if @state.embed_data.thumbnail_url then "" else "mixtapeImage--empty u-ignoreBlock"
-
-  picture: ->
-    if @state.embed_data.images and @state.embed_data.images.length > 0 then @state.embed_data.images[0].url else ""
-
-  render: ->
-    #block = @.props;
-    #foo = @.props.blockProps;
-    #data = Entity.get(block.block.getEntityAt(0)).getData();
-    console.log "ERROR", @state.error
-    return(
-      <span>
-        {
-          if @picture()
-            <a target='_blank'
-              className="js-mixtapeImage mixtapeImage #{@classForImage()}"
-              href={@state.embed_data.url} 
-              style={{backgroundImage: "url('#{@picture()}')"}}>
-            </a>
-        }
-
-        {
-          if @state.error
-            <h2>{@state.error}</h2>
-        }
-        
-        <a className='markup--anchor markup--mixtapeEmbed-anchor' 
-          target='_blank' href={@state.embed_data.url}>
-          <strong className='markup--strong markup--mixtapeEmbed-strong'>
-            {@state.embed_data.title}
-          </strong>
-          <em className='markup--em markup--mixtapeEmbed-em'>
-            {@state.embed_data.description}
-          </em>
-        </a>
-        {@state.embed_data.provider_url}
-      </span>
-    )
-
-module.exports = EmbedBlock

data/app/components/blocks/image.cjsx

@@ -1,316 +0,0 @@
-React = require('react')
-ReactDOM = require('react-dom')
-
-{
-  Entity,
-  RichUtils
-  AtomicBlockUtils
-  EditorBlock
-  EditorState
-} = require('draft-js')
-
-axios = require("axios")
-
-{ updateDataOfBlock } = require('../../model/index.js')
-
-
-class ImageBlock extends React.Component
-
-  constructor: (props) ->
-    super props
-
-    existing_data = @.props.block.getData().toJS()
-
-    @config = @props.blockProps.config
-    @file = @props.blockProps.data.get('file')
-    @state =
-      loading: false 
-      selected: false
-      loading_progress: 0
-      enabled: false
-      caption: @defaultPlaceholder()
-      direction: existing_data.direction || "center"
-      width: 0
-      height: 0
-      file: null
-      url: @blockPropsSrc() || @defaultUrl(existing_data)
-      aspect_ratio: @defaultAspectRatio(existing_data)
-
-  blockPropsSrc: ()=>
-    # console.log @.props.blockProps.data.src
-    @.props.blockProps.data.src
-    ###
-    debugger
-    block = @.props;
-    entity = block.block.getEntityAt(0)
-    if entity
-      data = Entity.get(entity).getData().src
-    else
-      null
-    ###
-
-  defaultUrl: (data)=>
-    return data.url if data.url
-
-    if data.url
-      if data.file then URL.createObjectURL(data.file) else data.url
-    else
-      @props.blockProps.data.src
-
-  defaultPlaceholder: ->
-    @props.blockProps.config.image_caption_placeholder
-
-  defaultAspectRatio: (data)=>
-    if data.aspect_ratio
-      width: data.aspect_ratio['width']
-      height: data.aspect_ratio['height']
-      ratio: data.aspect_ratio['ratio'] 
-    else
-      width:  0
-      height: 0
-      ratio: 100
-
-  getAspectRatio: (w, h)->
-    maxWidth = 1000
-    maxHeight = 1000
-    ratio = 0
-    width = w # Current image width
-    height = h # Current image height
-
-    # Check if the current width is larger than the max
-    if width > maxWidth
-      ratio = maxWidth / width # get ratio for scaling image
-      height = height * ratio # Reset height to match scaled image
-      width = width * ratio # Reset width to match scaled image
-
-    # Check if current height is larger than max
-    else if height > maxHeight
-      ratio = maxHeight / height # get ratio for scaling image
-      width = width * ratio # Reset width to match scaled image
-      height = height * ratio # Reset height to match scaled image
-
-    fill_ratio = height / width * 100
-    result = { width: width, height: height, ratio: fill_ratio }
-    # console.log result
-    result
-
-  # 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).merge(forceUpload: false)
-    setEditorState(updateDataOfBlock(getEditorState(), block, newData))
-
-  replaceImg: =>
-    @img = new Image();
-    @img.src = this.refs.image_tag.src
-    @setState 
-      url: @img.src
-    self = @
-    # exit only when not blob and not forceUload
-    return if !@img.src.includes("blob:") and !@props.block.data.get("forceUpload")
-    @img.onload = ()=>
-      @setState
-        width: @img.width
-        height: @img.height
-        aspect_ratio: self.getAspectRatio(@img.width, @img.height)
-      
-      @handleUpload()
-
-  startLoader: =>
-    @setState
-      loading: true
-
-  stopLoader: =>
-    @setState
-      loading: false
-
-  handleUpload: =>
-    @startLoader()
-    @props.blockProps.addLock()
-    @updateData()
-    @uploadFile()
-
-  componentDidMount: ->
-    @replaceImg()
-
-  aspectRatio: =>
-    maxWidth: "#{@state.aspect_ratio.width}"
-    maxHeight: "#{@state.aspect_ratio.height}"
-    ratio: "#{@state.aspect_ratio.height}"
-
-  updateDataSelection: =>
-    getEditorState = @props.blockProps.getEditorState
-    setEditorState = @props.blockProps.setEditorState
-    newselection = getEditorState().getSelection().merge(
-      anchorKey: @.props.block.getKey()
-      focusKey: @.props.block.getKey()
-    )
-
-    setEditorState(
-      EditorState.forceSelection(getEditorState(), newselection)
-    )
-  
-  handleGrafFigureSelectImg: (e)=>
-    e.preventDefault()
-    @setState
-      selected: true
-    , @updateDataSelection
-
-    #main_editor.onChange(main_editor.state.editorState)
-
-  coords: ->
-    maxWidth: "#{@state.aspect_ratio.width}px"
-    maxHeight: "#{@state.aspect_ratio.height}px"
-
-  getBase64Image: (img) ->
-    canvas = document.createElement("canvas")
-    canvas.width = img.width
-    canvas.height = img.height
-    ctx = canvas.getContext("2d")
-    ctx.drawImage img, 0, 0
-    dataURL = canvas.toDataURL("image/png")
-
-    return dataURL
-
-  formatData: ->
-    formData = new FormData()
-    if @file
-      #file = @.props.blockProps.data.get('file')
-
-      formData.append('file', @file)
-      return formData
-    else
-      formData.append('url',
-        @.props.blockProps.data.get("url")
-      )
-      return formData
-
-  getUploadUrl: =>
-    url = @config.upload_url
-    if typeof(url) is "function" then url() else url
-
-    
-  uploadFile: =>
-    # console.log "FORM DATA:" , @formatData()
-    axios
-      method: 'post'
-      url: @getUploadUrl()
-      data: @formatData()
-      onUploadProgress: (e)=>
-        @updateProgressBar(e)
-    .then (result)=> 
-      @uploadCompleted(result.data)
-      @props.blockProps.removeLock()
-      @stopLoader()
-      @file = null
-
-      if @config.upload_callback
-        @config.upload_callback(response, @)
-
-    .catch (error)=>
-      @props.blockProps.removeLock()
-      @stopLoader()
-
-      console.log("ERROR: got error uploading file #{error}")
-      if @config.upload_error_callback
-        @config.upload_error_callback(error, @)
-
-    handleUp = (json_response)=>
-      @uploadCompleted json_response, n
-
-  uploadCompleted: (json)=>
-    @setState
-      url: json.url
-    , @updateData
-
-  updateProgressBar: (e)=>
-    complete = @state.loading_progress
-    if (e.lengthComputable)
-      complete = e.loaded / e.total * 100
-      complete = complete ? complete : 0
-      @setState
-        loading_progress: complete
-      console.log "complete: #{complete}"
-
-  placeHolderEnabled: =>
-    @state.enabled or @.props.block.getText()
-
-  placeholderText: =>
-    return "" if @placeHolderEnabled()
-    "Write caption for image (optional)"
-
-  handleFocus: (e)=>
-    # console.log "focus on placeholder"
-    setTimeout =>
-      @setState
-        enabled: true
-    , 0
-
-  render: =>
-
-    return (
-      <div ref="image_tag2" 
-          suppressContentEditableWarning={true}>
-        <div
-          className="aspectRatioPlaceholder is-locked" 
-          style={@coords()} 
-          onClick={@handleGrafFigureSelectImg}>
-          <div style={{paddingBottom: "#{@state.aspect_ratio.ratio}%" }}} className='aspect-ratio-fill'>
-          </div>
-          <img src={@state.url}
-            ref="image_tag"
-            height={@state.aspect_ratio.height}
-            width={@state.aspect_ratio.width}
-            className='graf-image'
-          />
-          <Loader 
-            toggle={@state.loading}
-            progress={@state.loading_progress}
-          />
-        </div>
-        <figcaption className='imageCaption'
-          onMouseDown={@handleFocus}>
-
-          {
-            if !@state.enabled
-              <span className="danteDefaultPlaceholder">
-                {@placeholderText()}
-              </span>
-          }
-           
-          <EditorBlock {...@props} 
-            editable=true
-            className="imageCaption"
-          />
-        </figcaption>
-      </div>
-    )
-
-class Loader extends React.Component
-
-  render: ->
-    return (
-      <div>
-        { if @props.toggle
-          <div className="image-upoader-loader">
-            <p>
-              {
-                if @props.progress is 100
-                  "processing image..."
-                else
-                  <span>
-                    <span>loading</span>
-                    {Math.round @props.progress}
-                  </span>
-              }
-            </p>
-          </div>
-        }
-      </div>
-    )
-    
-module.exports = ImageBlock

data/app/components/blocks/placeholder.cjsx

@@ -1,60 +0,0 @@
-
-React = require('react')
-ReactDOM = require('react-dom')
-
-{
-  Entity,
-  RichUtils
-  AtomicBlockUtils
-  EditorBlock
-} = require('draft-js')
-
-#utils = require("../../utils/utils")
-
-
-class PlaceholderBlock extends React.Component
-  constructor: (props) ->
-    super props
-    @state =
-      enabled: false
-      data: @.props.blockProps.data.toJS()
-
-  placeholderText: =>
-    return "" if @state.enabled
-    @.props.blockProps.data.toJS().placeholder || @placeholderFromProps() || @defaultText()
-    #if @.props.blockProps.data then @.props.blockProps.data.placeholder else @defaultText()
-
-
-  placeholderFromProps: =>
-    @.props.block.toJS().placeholder
-
-  defaultText: =>
-    "write something "
-
-  componentDidMount: ->
-
-  handleFocus: (e)=>
-    # console.log "focus on placeholder"
-    setTimeout =>
-      @setState
-        enabled: true
-    , 0
-
-  classForDefault: =>
-    if !@state.enabled then "defaultValue defaultValue--root" else ""
-
-  render: ->
-    return(
-      <span className={@classForDefault()}
-        onMouseDown={@handleFocus}>
-        
-        {@placeholderText()}
-
-        <EditorBlock {...@props} 
-          className="imageCaption"
-          placeholder="escrive alalal"
-        />
-      </span>
-    )
-
-module.exports = PlaceholderBlock

data/app/components/blocks/video.cjsx

@@ -1,75 +0,0 @@
-
-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

@@ -1,96 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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