dante2-editor 0.2.0 → 0.3.1

data/src/components/blocks/image.js

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

data/src/components/blocks/placeholder.js

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

data/src/components/blocks/video.js

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