Auto-populate groups based on highlighted entries

Editor.js

@@ -60,15 +60,15 @@ class Editor extends List {
     return this.getEntries(type).length > limits[0];
   }
 
-  addNodeAfter() {
+  addNodeAfter(...rest) {
     if (this.mayAdd(EditorNode)) {
-      EditorNode.addAfter(this.container_, this.getSelected());
+      EditorNode.addAfter(this.container_, this.getSelected(), ...rest);
     }
   }
 
-  addNodeBefore() {
+  addNodeBefore(...rest) {
     if (this.mayAdd(EditorNode)) {
-      EditorNode.addBefore(this.container_, this.getSelected());
+      EditorNode.addBefore(this.container_, this.getSelected(), ...rest);
     }
   }
 
@@ -104,13 +104,15 @@ class Editor extends List {
 
   addGroupAfter() {
     if (this.mayAdd(EditorGroup)) {
-      EditorGroup.addAfter(this.container_, this.getSelected());
+      EditorGroup.addAfter(this.container_, this.getSelected(),
+                           this.queryEntries('.highlight', EditorNode));
     }
   }
 
   addGroupBefore() {
     if (this.mayAdd(EditorGroup)) {
-      EditorGroup.addBefore(this.container_, this.getSelected());
+      EditorGroup.addBefore(this.container_, this.getSelected(),
+                            this.queryEntries('.highlight', EditorNode));
     }
   }
 

EditorEntryBase.js

@@ -47,14 +47,14 @@ class EditorEntryBase extends ListenUtils {
   afterDomAdd() {
   }
 
-  static addBefore(container, elem) {
-    let entry = new this();
+  static addBefore(container, elem, ...rest) {
+    let entry = new this(...rest);
     container.insertBefore(entry.getElement(), elem);
     entry.afterDomAdd();
   }
 
-  static addAfter(container, elem) {
-    let entry = new this();
+  static addAfter(container, elem, ...rest) {
+    let entry = new this(...rest);
     container.insertBefore(entry.getElement(), elem ? elem.nextSibling : null);
     entry.afterDomAdd();
   }

EditorGroup.js

@@ -1,5 +1,5 @@
 class EditorGroup extends EditorEntryBase {
-  constructor() {
+  constructor(entries) {
     super();
 
     this.elem_.innerText = '□';
@@ -10,7 +10,13 @@ class EditorGroup extends EditorEntryBase {
       [EditorNode,  [1, Number.POSITIVE_INFINITY]],
       [EditorLabel, [0, 1]],
     ]);
-    this.nodes_.addNodeAfter();
+    if (entries && entries.length) {
+      for (let entry of entries) {
+        this.nodes_.addNodeAfter(entry.getLabel());
+      }
+    } else {
+      this.nodes_.addNodeAfter();
+    }
     this.elem_.appendChild(nodeList);
   }
 

EditorNode.js

@@ -1,5 +1,5 @@
 class EditorNode extends EditorEntryBase {
-  constructor() {
+  constructor(label) {
     super();
 
     this.elem_.classList.add('node');
@@ -10,6 +10,10 @@ class EditorNode extends EditorEntryBase {
     this.listen(this.input_, 'keydown', (e) => this.onInputKeyDown(e));
     this.listen(this.input_, 'input', (e) => this.onInput());
     this.elem_.appendChild(this.input_);
+
+    if (label) {
+      this.setLabel(label);
+    }
   }
 
   afterDomAdd() {

List.js

@@ -14,6 +14,20 @@ class List {
     return ret;
   }
 
+  queryEntries(query, type) {
+    let ret = [];
+    for (let elem of this.container_.querySelectorAll(query)) {
+      if (!elem.xArchObj) {
+        continue;
+      }
+      if (type && !(elem.xArchObj instanceof type)) {
+        continue;
+      }
+      ret.push(elem.xArchObj);
+    }
+    return ret;
+  }
+
   getSelected() {
     let iter = document.activeElement;
     while (iter) {