DEV Community

Discussion on: Building your own Vue rich text component

Collapse
 
richardeschloss profile image
Richard Schloss • Edited

FWIW...I think the switch/case statement can further be reduced if a keyMap is in place:

const keyMap = { // could be in shortcuts.json or config.en.json
  b: 'bold',
  i: 'italic',
  u: 'underline'
}
...

else if (e.ctrlKey && keyMap[e.key.toLowerCase()]) {
  e.preventDefault()
  this.$nextTick(() => exec(keyMap[e.key.toLowerCase()]))  
}

Then, for future additions or keyboard shortcuts, it's just a matter of updating the keyMap while the actual code downstream remains unchanged. This will also add an advantage of internationalization support. So, if say a Spanish locale were used on the person's system, the keyMap could just be swapped out with:

const keyMap = { // could be in config.es.json
  n: 'negrita',
  i: 'itálico',
  s: 'subrayado'
}

So, while "b, i, and u" might make complete sense to English-speakers, "n, i and s" may work better for Spanish speakers (I think?)