term: complete support for IME & CJK rendering

this fixes #75 and #47, two bugs originated long long ago.

1. Added support for IME events `compositionstart` `compositionupdate` and `compositionend`.
2. Refactored some code to receive input events from a hidden textarea just as how `xterm.js` now does. This removes the need to set `contentEditable` on the body in order to receive IME compistion events, and also guides the IME input box correctly following the cursor.
3. Fixed CJK rendering. Forces "forceWidth" mode with double width on those known CJK ranges in Unicode. Corrected the placeholder logic of the force width mode. Note that some rare halfwidth CJK characters will still not render correctly without `force-unicode-width` enabled. If you see any issue, please enable the `--force-unicode-width` option.
4. Miscallaneous fixes for some problems after introducing the above change

Tested on Firefox Nightly 62 on Linux and Chromium 67 on Linux, with `fcitx` as input method.

butterfly/sass/_layout.sass

@@ -93,5 +93,20 @@ body
         padding: .5em
         font-size: .75em
 
+  #input-view
+    position: fixed
+    z-index: 100
+    padding: 0
+    margin: 0
+    text-decoration: underline
+
+  #input-helper
+    position: fixed
+    z-index: -100
+    opacity: 0
+    white-space: nowrap
+    overflow: hidden
+    resize: none
+
 .terminal
   outline: none

butterfly/static/main.css

@@ -2861,6 +2861,19 @@ body {
         display: block;
         padding: .5em;
         font-size: .75em; }
+  body #input-view {
+    position: fixed;
+    z-index: 100;
+    padding: 0;
+    margin: 0;
+    text-decoration: underline; }
+  body #input-helper {
+    position: fixed;
+    z-index: -100;
+    opacity: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none; }
 
 .terminal {
   outline: none; }

butterfly/templates/index.html

@@ -18,6 +18,10 @@
         data-force-unicode-width="{{ 'yes' if options.force_unicode_width else 'no' }}"
         data-root-path="{{ options.uri_root_path }}"
         data-session-token={{ session }}>
+    <textarea id="input-helper">
+    </textarea>
+    <div id="input-view" class="hidden">
+    </div>
     <div id="popup" class="hidden">
     </div>
     <script src="{{ static_url('html-sanitizer.js') }}"></script>

coffees/ext/clipboard.coffee

@@ -16,6 +16,7 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 addEventListener 'copy', copy = (e) ->
+  document.getElementsByTagName('body')[0].contentEditable = false
   butterfly.bell "copied"
   e.clipboardData.clearData()
   sel = getSelection().toString().replace(
@@ -35,6 +36,7 @@ addEventListener 'copy', copy = (e) ->
 
 
 addEventListener 'paste', (e) ->
+  document.getElementsByTagName('body')[0].contentEditable = false
   butterfly.bell "pasted"
   data = e.clipboardData.getData 'text/plain'
   data = data.replace(/\r\n/g, '\n').replace(/\n/g, '\r')