dante2-editor 0.2.0

data/app/components/blocks/embed.cjsx

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

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

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