editing example texts now as I see it could look like.

res/main.less

@@ -206,6 +206,33 @@
   margin-top: 0.3em; 
 }
 
+.example-component {
+  .example-component-button {
+    padding-left: 0.3em;
+    padding-right: 0.3em;
+    cursor: pointer;
+
+    ._hoverable();
+  }
+
+  .example-component-headword {
+    color: @navy;
+  }
+
+  .example-component-collocate {
+    color: @teal;
+  }
+
+  .example-component-other {
+    color: @olive;
+  }
+
+  .example-component-none {
+    color: @gray;
+  }
+}
+
+
 // if modal on full screen, it gets too small
 @media (min-width: 60em) {
   .modal > article {

src/message/__init__.py

@@ -1,10 +1,10 @@
 from message.simple_messages import NoReset, Reset, ModalNotOkClose, ClickMessage, DataChgClickMessage, KeyboardPress
 from message.translation_edit import EditTranslation, MoveRight, MoveLeft, BinTranslation
-from message.show_messages import ShowEntryLabelsEdit, ShowEditTranslation, ShowSenseLabelEdit, ShowSenseDefinitionEdit, ShowCommentEdit, ShowAddTranslation, ShowExampleEdit, ShowExampleTranslationEdit, ShowVariantsEdit, ShowRelatedEntriesEdit
-from message.simple_edits import EditSenseLabel, EditSenseDefinition, EditComment, AddSenseLabel, AddSense, EditExample, AddExampleTranslation, EditExampleTranslation, DoChosenExamples, AddToLabelList, AddToGenericList, EditVariants, EditRelatedEntries, EditEntryLabels
+from message.show_messages import ShowEntryLabelsEdit, ShowEditTranslation, ShowSenseLabelEdit, ShowSenseDefinitionEdit, ShowCommentEdit, ShowAddTranslation, ShowExampleEdit, ShowVariantsEdit, ShowRelatedEntriesEdit
+from message.simple_edits import EditSenseLabel, EditSenseDefinition, EditComment, AddSenseLabel, AddSense, AddExampleTranslation, DoChosenExamples, AddToLabelList, AddToGenericList, EditVariants, EditRelatedEntries, EditEntryLabels
 from message.show_menu import ShowTranslationMenu, ShowSenseMenu, ShowExampleMenu
 from message.sense_edit import SenseMoveUp, SenseMoveDown, SenseBin
-from message.example_edit import ExampleMoveUp, ExampleMoveDown, ExampleBin
+from message.example_edit import ExampleMoveUp, ExampleMoveDown, ExampleBin, ExampleRoleChange, ExampleComponentAdd, ExampleComponentRemove, EditExampleText
 from message.delete_messages import DeleteComment, DeleteVariants, DeleteRelatedEntries, DeleteEntryLabels
 
 from message.message import msg

src/message/example_edit.py

@@ -1,6 +1,8 @@
+from browser import document
+from message.simple_messages import DataChgClickMessage, ClickMessage, NoReset
+from message.message import Message
+from model.example import Example, ComponentLexeme
 
-from message.simple_messages import DataChgClickMessage
-from model import Example
 
 
 def _get_example_idx(example, model):
@@ -42,3 +44,41 @@ class ExampleBin(DataChgClickMessage):
         assert(idx >= 0)
         sense.examples.splice(idx, 1)
 
+
+class EditExampleText(Message):
+    def update_model(self, model):
+        example = self.get_arg(0, Example)
+        example.overwrite_with_copy()
+        
+        idx = 0
+        for txt in document.getElementsByClassName("example-component-text"):
+            example.components[idx].text = txt.value
+            idx += 1
+    
+
+class ExampleRoleChange(NoReset):
+    def update_model(self, model):
+        example = self.get_arg(0, Example)
+        component_num = self.get_arg(1, int)
+        component_new_role = self.get_arg(2, str)
+        
+        if component_new_role == "none":
+            component_new_role = None
+        
+        example.copy().components[component_num].role = component_new_role
+        
+class ExampleComponentAdd(NoReset):
+    def update_model(self, model):
+        example = self.get_arg(0, Example)
+        component_num = self.get_arg(1, int)
+        
+        new_component = ComponentLexeme.new_empty()
+        example.copy().components.insert(component_num + 1, new_component)
+
+
+class ExampleComponentRemove(NoReset):
+    def update_model(self, model):
+        example = self.get_arg(0, Example)
+        component_num = self.get_arg(1, int)
+        
+        example.copy().components.splice(component_num, 1)

src/message/simple_edits.py

@@ -39,12 +39,6 @@ class AddToLabelList(NoReset):
         return False
 
 
-class EditExampleTranslation(QuestionMessage):
-    def update_model(self, model):
-        example = self.get_arg(0, Example)
-        example.text = self.new_text
-    
-    
 class AddSense(Message):
     def update_model(self, model):
         sense = Sense.new_empty()

src/model/example.py

@@ -36,7 +36,8 @@ class Example(Editable):
             inner_xml = example_xml.querySelector("multiwordExample") 
             self.inner = MultiwordExample(inner_xml)
             
-        self.components = [ComponentLexeme(el) for el in inner_xml.childNodes]
+        all_components = [ComponentLexeme(el) for el in inner_xml.childNodes]
+        self.components = [comp for comp in all_components if comp.isValid()]
     
         
     def export(self, doc):
@@ -112,7 +113,7 @@ class MultiwordExample:
         return self.cluster if self.cluster_valid else None 
 
 
-class ComponentLexeme:
+class ComponentLexeme(Editable):
     def __init__(self, xml):
         self.other_attributes = {}
         
@@ -127,6 +128,11 @@ class ComponentLexeme:
                 if xml.hasAttribute(oth_attr):
                     self.other_attributes[oth_attr] = xml.getAttribute(oth_attr)
         
+        self.text = self.text.strip()
+    
+    def isValid(self):
+        return len(self.text) > 0
+    
     def export(self, doc):
         if self.role is None:
             return doc.createTextNode(self.text)

src/view/modals.py

@@ -37,8 +37,40 @@ def edit_sense_label(sense):
     
 
 def edit_example(example):
-    content = question("Edit example", example.text())
-    return modal_template(content, "Edit Example", message.EditExampleTranslation(example))
+    example_original = example
+    example = example_original.copy()
+    
+    def role_msg(idx, role):
+        return message.msg(message.ExampleRoleChange(example_original, idx, role))
+    
+    divs = []
+    buttons_right = lambda idx: [
+        h("span.example-component-button.example-component-headword", 
+          {"on": {"click": role_msg(idx, "headword")}}, "■"),
+        h("span.example-component-button.example-component-collocate",
+          {"on": {"click": role_msg(idx, "collocate")}}, "■"),
+        h("span.example-component-button.example-component-other",
+          {"on": {"click": role_msg(idx, "other")}}, "■"),
+        h("span.example-component-button.example-component-none",
+          {"on": {"click": role_msg(idx, "none")}}, "■"),
+        h("span.example-component-button",
+          {"on": {"click": message.msg(message.ExampleComponentAdd(example_original, idx))}}, "+"),
+        h("span.example-component-button",
+          {"on": {"click": message.msg(message.ExampleComponentRemove(example_original, idx))}}, "-")]
+    
+    for idx, component in enumerate(example.components):
+        role_txt = component.role if component.role is not None else "none"
+        color_class = ".example-component-" + role_txt
+        
+        left = [h("span" + color_class, {}, role_txt)]
+        middle = [h("input.example-component-text", {"props": {"type": "text", "value": component.text}}, "")]
+        
+        divs.append(h("div.flex.five.example-component", {}, [
+            h("div.one-fifth", {}, left), 
+            h("div.three-fifth", {}, middle), 
+            h("div.one-fifth", {}, buttons_right(idx))]))
+                
+    return modal_template(divs, "Edit Example", message.EditExampleText(example_original))
 
 
 def edit_variants(entry):