Restore sanity to the use of contenteditable fields

client/helpers.js

@@ -2,3 +2,7 @@ Handlebars.registerHelper('selected', (current, value) =>
   ({value: value, selected: current === value ? 'selected' : undefined}));
 
 Handlebars.registerHelper('equals', (a, b) => a === b);
+
+Handlebars.registerHelper('editable', (field, value) =>
+  `<div class="value" contenteditable="true" ` +
+       `data-field="${field}">${value}</div>`);

client/index.html

@@ -75,8 +75,7 @@
     {{#each items}}
       <div class="field">
         <label class="control-label">{{label}}</label>
-        <div class="value" contenteditable="true"
-             data-field="{{field}}">{{value}}</div>{{extra}}
+        {{{editable field value}}}{{extra}}
       </div>
     {{/each}}
     <div class="field">

client/lib/analysis.js

@@ -133,11 +133,14 @@ Template.analysis_stage.events({
     // This line is not needed for correctness, so we ignore any errors in it.
     try { window.getSelection().removeAllRanges(); } catch (e) { }
     const target = $(event.target);
+    const field = target.attr('data-field');
     const text = target.text();
-    if (this.path) {
+    if (field === 'character') {
       updateCharacterValue(target, text, this.path);
-    } else {
+    } else if (field === 'radical') {
       updateRadicalValue(target, text);
+    } else {
+      assert(false, `Unexpected editable field: ${field}`);
     }
   },
   'click .value': function(event) {
@@ -170,9 +173,7 @@ Template.analysis_stage.events({
 
 Template.analysis_stage.helpers({
   radical: () => {
-    const result = Session.get('stages.analysis.radical') || '?';
-    $('.analysis_stage .radical .value').text('');
-    return result;
+    return Session.get('stages.analysis.radical') || '?';
   },
   tree: () => {
     return Session.get('stages.analysis.tree');

client/metadata.js

@@ -96,7 +96,6 @@ Template.metadata.events({
     }
     if (value !== glyph.metadata[this.field] &&
         (value || glyph.metadata[this.field])) {
-      $(event.target).text('');
       glyph.metadata[this.field] = value;
       Session.set('editor.glyph', glyph);
     } else {
@@ -128,12 +127,6 @@ Template.metadata.helpers({
       result[0].extra = `; ${variant ? 'variant of ' : ''}` +
                         `Kangxi radical ${index} ${variant ? primary : ''}`;
     }
-    for (let entry of result) {
-      const element = $(`.metadata .field [data-field="${entry.field}"]`);
-      if (element.text() !== entry.value) {
-        element.text('');
-      }
-    }
     return result;
   },
   references() {

client/templates.html

@@ -25,7 +25,7 @@
   {{> decomposition_tree tree}}
   <div class="radical">
     <label class="control-label">Radical:</label>
-    <div class="value" contenteditable="true">{{radical}}</div>
+    {{{editable "radical" radical}}}
   </div>
   <div class="etymology">
     <label class="control-label">Etymology:</label>
@@ -44,7 +44,7 @@
       <option {{selected type "compound"}}>Compound</option>
     </select>
     {{#if (equals type "character")}}
-      <div class="value" contenteditable="true">{{value}}</div> -
+      {{{editable "character" value}}}
       {{#if (equals value "?")}}
         (unknown)
       {{else}}