Refactor components

Implement context mechanism to pass default attributes to descendant
components.

ui/long-text-component.js

@@ -3,54 +3,54 @@
 import m from "mithril";
 import * as overlay from "./overlay";
 
-const component = {
-  view: vnode => {
-    const text = vnode.attrs.text;
-    const element = vnode.attrs.element || "span";
+export default function component() {
+  return {
+    view: vnode => {
+      const text = vnode.attrs.text;
+      const element = vnode.attrs.element || "span";
 
-    function overflowed(_vnode) {
-      if (_vnode.dom.classList.contains("long-text-overflowed")) return;
-      _vnode.dom.classList.add("long-text-overflowed");
-      _vnode.dom.onclick = e => {
-        overlay.open(() => {
-          return m("textarea.long-text", {
-            value: text,
-            cols: 80,
-            rows: 24,
-            readonly: "",
-            oncreate: vnode2 => {
-              vnode2.dom.focus();
-              vnode2.dom.select();
-            }
+      function overflowed(_vnode) {
+        if (_vnode.dom.classList.contains("long-text-overflowed")) return;
+        _vnode.dom.classList.add("long-text-overflowed");
+        _vnode.dom.onclick = e => {
+          overlay.open(() => {
+            return m("textarea.long-text", {
+              value: text,
+              cols: 80,
+              rows: 24,
+              readonly: "",
+              oncreate: vnode2 => {
+                vnode2.dom.focus();
+                vnode2.dom.select();
+              }
+            });
           });
-        });
-        // prevent index page selection
-        e.stopPropagation();
-        m.redraw();
-      };
+          // prevent index page selection
+          e.stopPropagation();
+          m.redraw();
+        };
+      }
+
+      return m(
+        element,
+        {
+          oncreate: vnode2 => {
+            if (vnode2.dom.clientWidth !== vnode2.dom.scrollWidth)
+              overflowed(vnode2);
+          },
+          onupdate: vnode2 => {
+            if (vnode2.dom.clientWidth === vnode2.dom.scrollWidth) {
+              vnode2.dom.classList.remove("long-text-overflowed");
+              vnode2.dom.onclick = null;
+            } else {
+              overflowed(vnode2);
+            }
+          },
+          class: "long-text",
+          title: text
+        },
+        text
+      );
     }
-
-    return m(
-      element,
-      {
-        oncreate: vnode2 => {
-          if (vnode2.dom.clientWidth !== vnode2.dom.scrollWidth)
-            overflowed(vnode2);
-        },
-        onupdate: vnode2 => {
-          if (vnode2.dom.clientWidth === vnode2.dom.scrollWidth) {
-            vnode2.dom.classList.remove("long-text-overflowed");
-            vnode2.dom.onclick = null;
-          } else {
-            overflowed(vnode2);
-          }
-        },
-        class: "long-text",
-        title: text
-      },
-      text
-    );
-  }
-};
-
-export default component;
+  };
+}