dante2-editor 0.2.0 → 0.3.1

data/src/components/debug.js

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

data/src/components/decorators/link.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Entity } from 'draft-js'
+
+export default class Link extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this._validateLink = this._validateLink.bind(this)
+    this._checkProtocol = this._checkProtocol.bind(this)
+    this._showPopLinkOver = this._showPopLinkOver.bind(this)
+    this._hidePopLinkOver = this._hidePopLinkOver.bind(this)
+    this.isHover = false
+  }
+
+  _validateLink() {
+    const 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() {
+    return console.log("xcvd")
+  }
+
+  _showPopLinkOver(e) {
+    if (!this.data.showPopLinkOver) {
+      return
+    }
+    return this.data.showPopLinkOver(this.refs.link)
+  }
+
+  _hidePopLinkOver(e) {
+    if (!this.data.hidePopLinkOver) {
+      return
+    }
+    return this.data.hidePopLinkOver()
+  }
+
+  render() {
+    this.data = Entity.get(this.props.entityKey).getData()
+
+    return (
+      <a
+        ref="link"
+        href={ this.data.url }
+        className="markup--anchor"
+        onMouseOver={ this._showPopLinkOver }
+        onMouseOut={ this._hidePopLinkOver }
+      >
+        { this.props.children }
+      </a>
+    )
+  }
+}
+

data/src/components/popovers/addButton.js

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

data/src/components/popovers/image.js

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