all files / packages/text-input/ TextInput.js

3.28% Statements 2/61
0% Branches 0/12
0% Functions 0/18
3.28% Lines 2/61
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 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179                                                                                                                                                                                                                                                                                                                                                                 
import {
  TextNode, Document, EditorSession, Configurator, platform,
  AbstractEditor, TextPropertyEditor, BasePackage
} from '../../index.es'
 
const {UndoCommand, RedoCommand, SelectAllCommand} = BasePackage
 
// TODO: maybe AbstractEditor is too heavy?
// still we need to do almost the same, so that nothing
// from the parent is leaking through to the children
export default
class TextInput extends AbstractEditor {
 
  constructor(parent, props = {}) {
    super(parent, _createEditorSession(props))
 
    this.doc = this.editorSession.getDocument()
  }
 
  render($$) {
    let el = $$(this._getTagName()).addClass('sc-text-input')
    el.append(
      $$(TextInputEditor, {
        path: ['input', 'content']
      }).ref('input')
        .on('enter', this._onEnter)
        .on('escape', this._onEscape)
    )
    return el
  }
 
  didMount() {
    // set the cursor at the end of the content
    this.refs.input.selectLast()
  }
 
  dispose() {
    super.dispose()
 
    this.doc.dispose()
    this.editorSession.dispose()
  }
 
  // this component manages itself
  shouldRerender() {
    return false
  }
 
  getContent() {
    return this.getDocument().getContent()
  }
 
  _getDocument() {
    return this.context.editorSession.getDocument()
  }
 
  _getTagName() {
    return this.props.tagName || 'div'
  }
 
  _onEnter(event) {
    event.stopPropagation()
    this.el.emit('confirm')
  }
 
  _onEscape(event) {
    event.stopPropagation()
    this.el.emit('cancel')
  }
 
}
 
function _createEditorSession(props) {
  let config = new Configurator()
  config.addNode(TextNode)
  config.addToolGroup('annotations')
  config.addToolGroup('default')
  config.addCommand('undo', UndoCommand)
  config.addCommand('redo', RedoCommand)
  config.addCommand('select-all', SelectAllCommand)
  if (platform.isMac) {
    config.addKeyboardShortcut('cmd+z', { command: 'undo' })
    config.addKeyboardShortcut('cmd+shift+z', { command: 'redo' })
    config.addKeyboardShortcut('cmd+a', { command: 'select-all' })
  } else {
    config.addKeyboardShortcut('ctrl+z', { command: 'undo' })
    config.addKeyboardShortcut('ctrl+shift+z', { command: 'redo' })
    config.addKeyboardShortcut('ctrl+a', { command: 'select-all' })
  }
 
  config.defineSchema({
    name: 'text-input',
    // FIXME: this does not make sense here
    // as we do not have a container model
    defaultTextType: 'text',
    // FIXME: the name 'ArticleClass' is not general enough
    // plus: the configurator does not fail when this is not specified
    ArticleClass: TextInputDocument,
  })
  if (props.package) {
    config.import(props.package)
  }
  let doc = config.createArticle()
  if (props.content) {
    doc.set(['input', 'content'], props.content)
  }
  let editorSession = new EditorSession(doc, {
    configurator: config
  })
  return {
    editorSession
  }
}
 
class TextInputDocument extends Document {
  constructor(...args) {
    super(...args)
 
    this.create({
      type: 'text',
      id: 'input',
      content: ''
    })
  }
  getContentNode() {
    return this.get('input')
  }
  getContent() {
    return this.getContentNode().getText()
  }
}
 
// TODO: would be good if there were some events triggered by
// Surfaces
class TextInputEditor extends TextPropertyEditor {
 
  onKeyDown(event) {
    let handled = false
    if (event.keyCode === 27) {
      handled = true
      this.el.emit('escape')
    }
    if (handled) {
      event.stopPropagation()
      event.preventDefault()
    } else {
      super.onKeyDown(event)
    }
  }
 
  selectLast() {
    const doc = this.getDocument()
    const input = doc.getContentNode()
    this.editorSession.setSelection({
      type: 'property',
      path: input.getTextPath(),
      startOffset: input.getLength(),
      surfaceId: this.id
    })
  }
 
  selectAll() {
    const doc = this.getDocument()
    const input = doc.getContentNode()
    this.editorSession.setSelection({
      type: 'property',
      path: input.getTextPath(),
      startOffset: 0,
      endffset: input.getLength(),
      surfaceId: this.id
    })
  }
 
  _handleEnterKey(...args) {
    super._handleEnterKey(...args)
    this.el.emit('enter')
  }
}