all files / ui/ InlineNodeComponent.js

82.98% Statements 39/47
86.21% Branches 25/29
50% Functions 3/6
84.09% Lines 37/44
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114            34× 34×   34× 34×           34×   34×   27×     34× 34×           34×   34×           34× 28×         34× 34×       34×                                                           43× 43×   19× 11× 11× 11×         16× 16×                  
import { isEqual } from '../util'
import AbstractIsolatedNodeComponent from './AbstractIsolatedNodeComponent'
 
class InlineNodeComponent extends AbstractIsolatedNodeComponent {
 
  render($$) {
    let node = this.props.node
    let ContentClass = this.ContentClass
 
    let el = $$('span')
    el.addClass(this.getClassNames())
      .addClass('sc-inline-node')
      .addClass('sm-'+this.props.node.type)
      .attr("data-id", node.id)
      .attr('data-inline', '1')
 
    let disabled = this.isDisabled()
 
    if (this.state.mode) {
      el.addClass('sm-'+this.state.mode)
    } else {
      el.addClass('sm-not-selected')
    }
 
    Eif (!ContentClass.noStyle) {
      el.addClass('sm-default-style')
    }
 
    // shadowing handlers of the parent surface
    // TODO: extract this into a helper so that we can reuse it anywhere where we want
    // to prevent propagation to the parent surface
    el.on('keydown', this.onKeydown)
 
    el.append(
      this.renderContent($$, node)
        .ref('content')
        .addClass('se-content')
    )
 
    if (disabled) {
      el.addClass('sm-disabled')
         .attr('contenteditable', false)
         .on('click', this.onClick)
    }
 
    el.attr('draggable', true)
    return el
  }
 
  isDisabled() {
    return !this.state.mode || ['co-selected', 'cursor'].indexOf(this.state.mode) > -1;
  }
 
  getClassNames() {
    return ''
  }
 
  onClick(event) {
    if (!this._shouldConsumeEvent(event)) return
    this.selectNode()
  }
 
  selectNode() {
    // console.log('IsolatedNodeComponent: selecting node.');
    let editorSession = this.context.editorSession
    let surface = this.context.surface
    let node = this.props.node
    editorSession.setSelection({
      type: 'property',
      path: node.start.path,
      startOffset: node.start.offset,
      endOffset: node.end.offset,
      containerId: surface.getContainerId(),
      surfaceId: surface.id
    })
  }
 
  // TODO: this is almost the same as in InlineNodeComponent
  // We should try to consolidate this
  _deriveStateFromSelectionState(selState) {
    let surface = this._getSurface(selState)
    if (!surface) return null
    // detect cases where this node is selected or co-selected by inspecting the selection
    if (surface === this.context.surface) {
      let sel = selState.getSelection()
      let node = this.props.node
      if (sel.isPropertySelection() && !sel.isCollapsed() && isEqual(sel.path, node.path)) {
        let nodeSel = node.getSelection()
        if(nodeSel.equals(sel)) {
          return { mode: 'selected' }
        }
        Eif (sel.contains(nodeSel)) {
          return { mode: 'co-selected' }
        }
      }
    }
    let isolatedNodeComponent = surface.context.isolatedNodeComponent
    if (!isolatedNodeComponent) return null
    if (isolatedNodeComponent === this) {
      return { mode: 'focused' }
    }
    let isolatedNodes = this._getIsolatedNodes(selState)
    if (isolatedNodes.indexOf(this) > -1) {
      return { mode: 'co-focused' }
    }
    return null
  }
 
}
 
InlineNodeComponent.prototype._isInlineNodeComponent = true
 
export default InlineNodeComponent