Tab characters in text input (fix #160)

client/RenderObjects.coffee

@@ -153,7 +153,6 @@ export class RenderObjects
             .replace ///#{cursorRE}///, (match) ->
               out.push match
               ''
-            .replace /\u00a0/g, ' '  # undo dom.escape
             math.formula = dom.unescape math.formula
             out.push math.prefix if math.prefix?
             out.push "$MATH#{i}$"

client/lib/dom.coffee

@@ -156,8 +156,11 @@ export escape = (text) ->
   .replace /</g, '&lt;'
   .replace />/g, '&gt;'
   .replace /[ ]/g, '\u00a0'
+  .replace /\t/g, '\u2003' # em-space
 export unescape = (text) ->
   text
+  .replace /\u2003/g, '\t'
+  .replace /\u00a0/g, ' '
   .replace /&gt;/g, '>'
   .replace /&lt;/g, '<'
   .replace /&amp;/g, '&'

client/tools/modes.coffee

@@ -397,12 +397,23 @@ defineTool
     input = document.getElementById 'textInput'
     dom.listen input,
       keydown: (e) =>
+        if e.key == 'Tab'  # insert tab symbol instead of going to next element
+          e.preventDefault()
+          unless document.execCommand 'insertText', false, '\t'
+            ## Firefox doesn't support execCommand 'insertText' in textarea.
+            ## [https://bugzilla.mozilla.org/show_bug.cgi?id=1220696]
+            ## Simulate the effect, but mess up the undo stack.
+            pos = input.selectionStart
+            input.value = input.value[...pos] + '\t' +
+                          input.value[input.selectionEnd..]
+            input.selectionStart = input.selectionEnd = pos + 1
+          onInput()
         e.stopPropagation() # avoid hotkeys
         e.target.blur() if e.key == 'Escape'
         @updateTextCursor e
       click: => @updateTextCursor()
       paste: => @updateTextCursor()
-      input: (e) ->
+      input: onInput = (e) ->
         return unless pointers.text?
         text = input.value
         if text != (oldText = Objects.findOne(pointers.text).text)

doc/README.md

@@ -333,6 +333,10 @@ To write multiple lines of text, add manual line breaks via the
 within math mode: any math within `$`s renders on a single line,
 even if it contains newlines.
 
+You can use the <kbd>Tab</key> key to enter tab characters, which currently
+render as large spaces (without any magic alignment).  If you want to cycle
+to the next element via keyboard navigation, use <kbd>Escape</kbd> first.
+
 When you're done typing in a text object, press the <kbd>Escape</kbd> key.
 This won't deselect the object, but it will defocus the text entry field,
 allowing you to press other keyboard shortcuts to use other tools.