optimizing for keyboard-shortcut helper display

index.js

@@ -8,11 +8,21 @@ var React = require('react')
 var extend = require('./util/extend')
 var keyHandlers = require('./key-handlers')
 
-var keys = require('./views/tree/keys')
+var defaultKeys = flattenKeySections(require('./views/tree/keys'))
 var KeyManager = require('./key-manager')
 var TreeView = require('./views/tree')
 var MainStore = require('./stores/main')
 
+function flattenKeySections(keys) {
+  var ret = {}
+  for (var name in keys) {
+    for (var sub in keys[name]) {
+      ret[sub] = keys[name][sub]
+    }
+  }
+  return ret
+}
+
 var Db = require('./db')
 
 module.exports = {
@@ -39,11 +49,11 @@ function quickstart(el, options, done) {
 
   initStore(options.plugins, options.storeOptions, (err, store) => {
     if (err) return done(err)
-    var keys = new KeyManager()
-    keys.attach(store)
-    initView(el, store, keys, options.plugins, options.viewOptions, (storeView) => {
-      keys.listen(window)
-      done && done(err, store, keys, storeView)
+    var keyManager = new KeyManager()
+    keyManager.attach(store)
+    initView(el, store, keyManager, options.plugins, options.viewOptions, (storeView) => {
+      keyManager.listen(window)
+      done && done(err, store, keyManager, storeView)
     })
   })
 }
@@ -73,7 +83,7 @@ function initStore(plugins, options, done) {
 function viewConfig(store, plugins, options) {
   options = extend({
     root: null,
-    defaultKeys: keys,
+    defaultKeys: defaultKeys,
   }, options)
 
   var storeView = store.registerView(options.root)
@@ -90,13 +100,13 @@ function viewConfig(store, plugins, options) {
   }
 }
 
-function initView(el, store, keys, plugins, options, done) {
+function initView(el, store, keyManager, plugins, options, done) {
   options = extend({
     View: TreeView,
   }, options)
 
   var config = viewConfig(store, plugins, options)
-  keys.addView(config.view.id, config.keys)
+  keyManager.addView(config.view.id, config.keys)
 
   React.renderComponent(options.View(config.props), el, function () {
     done(config.view)

key-manager.js

@@ -44,6 +44,9 @@ KeyManager.prototype = {
     return this.keys.remove(lid)
   },
 
+  disable: function () {this.keys.disable()},
+  enable: function () {this.keys.enable()},
+
   addKeys: function (config) {
     if (this.keys) return this.keys.add(config)
     this.keys = keys(config)

lib/context-menu.js

@@ -60,6 +60,7 @@ var MenuItem = React.createClass({
     return <div className={cx({
       'ContextMenu_item': true,
       'ContextMenu_item-selected': this.props.selected,
+      'ContextMenu_item-disabled': this.props.config.disabled,
       'ContextMenu_item-parent': this.props.config.children && this.props.config.children.length,
     })}>
       <div className='ContextMenu_item_title'

lib/context-menu.less

@@ -15,6 +15,11 @@
       white-space: nowrap;
     }
 
+    &-disabled > &_title {
+      cursor: default;
+      color: #888;
+    }
+
     &-selected > &_title {
         background-color: #cef;
     }
@@ -50,7 +55,6 @@
     left: 100%;
     top: 0;
     margin-left: 3px;
-    width: 200px;
   }
 }
 

lib/keys.js

@@ -11,6 +11,8 @@ var KEYS = {
   32: 'space',
   33: 'page-up',
   34: 'page-down',
+  35: 'end',
+  36: 'home',
   37: 'left',
   38: 'up',
   39: 'right',
@@ -25,6 +27,13 @@ var KEYS = {
   221: ']'
 }
 
+/** TODO
+var SHIFT_KEYS = {
+  '?': '/',
+  'D': 'd',
+}
+*/
+
 function keyName(code) {
   if (code <= 90 && code >= 65) {
     return String.fromCharCode(code + 32)
@@ -44,6 +53,11 @@ function makeLayer(config) {
     parts = key.split(',')
     for (var i=0;i<parts.length;i++) {
       part = parts[i].trim()
+      /** TODO
+      if (SHIFT_KEYS[part]) {
+        part = 'shift+' + SHIFT_KEYS[part]
+      }
+      */
       if (window.DEBUG_KEYS && layer.kmap[part]) {
         console.log('Overrifing key:', part)
       }
@@ -52,6 +66,11 @@ function makeLayer(config) {
         seq = part.split(/\s+/g)
         var n = ''
         for (var j=0; j<seq.length-1; j++) {
+          /** TODO
+          if (SHIFT_KEYS[seq[j]]) {
+            seq[j] = 'shift+' + SHIFT_KEYS[seq[j]]
+          }
+          */
           n += seq[j]
           layer.prefixes[n] = true
           n += ' '
@@ -81,6 +100,7 @@ function keys(config) {
   var kmap = {}
     , prefixes = {}
     , cur_prefix = null
+    , disabled = false
 
     , layer_ids = []
     , layers = {}
@@ -143,6 +163,7 @@ function keys(config) {
   }
 
   function handler(e, prefix) {
+    if (disabled) return
     var key = modKeyName(e)
     if (window.DEBUG_KEYS) {
       console.log(key)
@@ -161,6 +182,8 @@ function keys(config) {
   handler.remove = removeLayer
   handler.add = addLayer
   handler.add(config)
+  handler.disable = function () {disabled = true}
+  handler.enable = function () {disabled = false}
   return handler
 }
 

plugins/clipboard/index.js

@@ -2,6 +2,8 @@
 var movement = require('../../util/movement')
 
 module.exports = {
+  title: 'Clipboard',
+
   keys: {
     'remove': {}, // not using this
     'cut': {
@@ -32,6 +34,10 @@ module.exports = {
     }, {
       title: 'Paste after',
       action: 'paste',
+      disabled: !store._globals.clipboard,
+    }, {
+      title: 'Cut node(s)',
+      action: 'cut',
     }]
   },
 

plugins/collapse/index.js

@@ -1,5 +1,7 @@
 
 module.exports =  {
+  title: 'Collapser',
+
   store: require('./store'),
   node: require('./node'),
   keys: require('./keys'),

plugins/image/index.js

@@ -69,6 +69,8 @@ var ImageEditor = React.createClass({
 })
 
 module.exports = {
+  title: 'Image Node',
+
   types: {
     image: {
       title: 'Image',

plugins/image/index.less

@@ -18,6 +18,14 @@
 
 .treed_body-type-image img {
   max-width: 100%;
+  box-shadow: 0px 2px 7px #555;
+  margin-top: 5px;
+}
+
+.treed_body-type-image .treed_body_rendered {
+  font-size: 90%;
+  padding-top: 2px;
+  color: #333;
 }
 
 .ImageBase {

plugins/lists/index.js

@@ -1,5 +1,7 @@
 
 module.exports = {
+  title: 'List Item Nodes',
+
   types: {
     list: {
       shortcut: 'l',

plugins/rebase/index.js

@@ -2,6 +2,8 @@
 var Breadcrumb = require('./breadcrumb')
 
 module.exports = {
+  title: 'Rebase',
+
   store: require('./store'),
   node: require('./node'),
   keys: require('./keys'),

plugins/rebase/keys.js

@@ -1,14 +1,17 @@
 
 module.exports = {
   'rebase': {
-    description: 'zoom to the current node',
+    title: 'rebase to active node',
+    description: 'zoom to the active node',
     normal: 'g d',
   },
   'rebase up': {
+    title: 'rebase up a level',
     description: "zoom to the current root's parent",
     normal: 'g u',
   },
   'rebase root': {
+    title: 'rebase to document root',
     description: 'zoom to the document root',
     normal: 'g r',
   },

plugins/todo/index.js

@@ -3,6 +3,8 @@ var React = require('react/addons')
 var cx = React.addons.classSet
 
 module.exports = {
+  title: 'To-Do Items',
+
   types: {
     todo: {
       shortcut: 't',

plugins/types/index.js

@@ -12,6 +12,8 @@ function cap(text) {
 }
 
 module.exports = {
+  title: 'Type Switcher',
+
   keys: function (plugins) {
     var keys = {}
     plugins.forEach((plugin) => {
@@ -29,19 +31,20 @@ module.exports = {
   },
 
   contextMenu: function (node, store) {
+    if (!node) return
     var items = []
       , plugins = store.parent.allPlugins
     plugins.forEach((plugin) => {
       if (!plugin.types) return
       for (var name in plugin.types) {
-        if (name === node.type) continue;
         var type = plugin.types[name]
         var sh = type.shortcut || type
         items.push({
           title: 'Set type ' + (type.title || name),
           shortcut: 't ' + sh,
           icon: type.icon,
-          action: 'type' + cap(name)
+          action: 'type' + cap(name),
+          disabled: name === node.type,
         })
       }
     })

plugins/undo/index.js

@@ -1,5 +1,7 @@
 
 module.exports = {
+  title: 'Undo/Redo',
+
   keys: {
     'undo': {
       normal: 'u, ctrl+z',

stores/actions.js

@@ -103,7 +103,7 @@ module.exports = {
     var up = movement.up(this.view.active, this.view.root, this.db.nodes)
     if (!up) return false
     this.setActive(up)
-    return true
+    return
   },
 
   pageUp: function () {
@@ -115,7 +115,7 @@ module.exports = {
       curr = up
     }
     this.setActive(curr)
-    return true
+    return
   },
 
   pageDown: function () {
@@ -127,15 +127,15 @@ module.exports = {
       curr = down
     }
     this.setActive(curr)
-    return true
+    return
   },
 
   goDown: function (editStart) {
     var down = movement.down(this.view.active, this.view.root, this.db.nodes)
     if (!down) return false
     this.setActive(down)
     if (editStart) this.view.editPos = 'start'
-    return true
+    return
   },
 
   goLeft: function () {
@@ -250,6 +250,9 @@ module.exports = {
   },
 
   joinDown: function (id) {
+    if (!arguments.length && this.view.mode === 'visual') {
+      return this.joinMany()
+    }
     id = id || this.view.active
     if (id === this.view.root) return
     var next = movement.down(id, this.view.root, this.db.nodes)
@@ -305,6 +308,9 @@ module.exports = {
   },
 
   indent: function (id) {
+    if (!arguments.length && this.view.mode === 'visual') {
+      return this.indentMany()
+    }
     id = id || this.view.active
     var pos = movement.indent(id, this.view.root, this.db.nodes)
     if (!pos) return
@@ -351,6 +357,9 @@ module.exports = {
   },
 
   dedent: function (id) {
+    if (!arguments.length && this.view.mode === 'visual') {
+      return this.dedentMany()
+    }
     id = id || this.view.active
     var pos = movement.dedent(id, this.view.root, this.db.nodes)
     if (!pos) return

views/body/simple.js

@@ -31,7 +31,7 @@ var SimpleBody = React.createClass({
     renderer: PT.func,
     node: PT.object,
     isActive: PT.bool,
-    editState: PT.string,
+    editState: PT.oneOfType([PT.string, PT.bool]),
     actions: PT.object,
     store: PT.object,
   },
@@ -85,8 +85,10 @@ var SimpleBody = React.createClass({
   },
 
   _onContextMennu: function (e) {
+    this.props.actions.setActive(this.props.node.id)
     this.props.actions.showContextMenu(e.clientX, e.clientY, this.props.node.id)
     e.preventDefault()
+    e.stopPropagation()
   },
 
   componentDidMount: function () {