closes #299 and closes #295

lib/com/description.tsx

@@ -0,0 +1,53 @@
+import { component } from "../model/components.ts";
+import { Node } from "../model/mod.ts";
+import { objectManaged } from "../model/hooks.ts";
+
+@component
+export class Description {
+  text: string;
+
+  constructor() {
+    this.text = "";
+  }
+
+  editor() {
+    return DescriptionEditor;
+  }
+
+  static initialize(workbench: Workbench) {
+    workbench.commands.registerCommand({
+      id: "add-description",
+      title: "Add Description",
+      when: (ctx: Context) => {
+        if (!ctx.node) return false;
+        if (ctx.path.previous && objectManaged(ctx.path.previous)) return false;
+        if (ctx.node.hasComponent(Description)) return false;
+        return true;
+      },
+      action: (ctx: Context, name: string) => {
+        const desc = new Description();
+        ctx.node.addComponent(desc);
+        ctx.node.changed();
+      }
+    });
+  }
+}
+
+const DescriptionEditor = {
+  view({attrs: {node}}) {
+    const oninput = (e) => {
+      const desc = node.getComponent(Description);
+      desc.text = e.target.value;
+      node.changed();
+    }
+    const onblur = (e) => {
+      const desc = node.getComponent(Description);
+      if (desc.text === "") {
+        node.removeComponent(Description);
+      }
+      node.changed();
+    }
+
+    return <input class="node-description" placeholder="Add Description" type="text" value={node.getComponent(Description).text} onblur={onblur} oninput={oninput} />
+  }
+}

lib/mod.ts

@@ -27,6 +27,7 @@ import { Clock } from "./com/clock.tsx";
 import { Tag } from "./com/tag.tsx";
 import { Template } from "./com/template.tsx";
 import { Document } from "./com/document.tsx";
+import { Description } from "./com/description.tsx";
 import { objectManaged } from "./model/hooks.ts";
 
 export { BrowserBackend, SearchIndex_MiniSearch } from "./backend/browser.ts";
@@ -61,6 +62,7 @@ export async function setup(document: Document, target: HTMLElement, backend: Ba
     Tag,
     Template,
     SmartNode,
+    Description,
   ].forEach(com => {
     if (com.initialize) {
       com.initialize(workbench);
@@ -240,6 +242,7 @@ export async function setup(document: Document, target: HTMLElement, backend: Ba
     title: "Add checkbox",
     when: (ctx: Context) => {
       if (!ctx.node) return false;
+      if (ctx.node.hasComponent(Checkbox)) return false;
       if (ctx.node.raw.Rel === "Fields") return false;
       if (ctx.node.parent && ctx.node.parent.hasComponent(Document)) return false;
       return true;

lib/ui/node/editor.tsx

@@ -1,5 +1,6 @@
 import { objectCall, objectHas } from "../../model/hooks.ts";
 import { Document } from "../../com/document.tsx";
+import { Description } from "../../com/description.tsx";
 
 export const NodeEditor: m.Component = {
   view ({attrs: {workbench, path, onkeydown, oninput, disallowEmpty, editValue, placeholder}, state}) {
@@ -45,7 +46,16 @@ export const NodeEditor: m.Component = {
     if (node.parent && node.parent.hasComponent(Document) && window.Editor) {
       editor = CodeMirrorEditor;
     }
-    return m(editor, {id, getter, setter, display, onkeydown, onfocus, oninput, placeholder, workbench, path});
+    let desc = undefined;
+    if (node.hasComponent(Description)) {
+      desc = node.getComponent(Description);
+    }
+    return (
+      <div class="node-editor flex flex-col">
+        {m(editor, {id, getter, setter, display, onkeydown, onfocus, oninput, placeholder, workbench, path})}    
+        {(desc) ? m(desc.editor(), {node}) :null}
+      </div>
+    )
   }
 }
 

web/static/app/main.css

@@ -230,13 +230,21 @@ with their icon for Safari only*/
 
 /*------------NODES------------*/
 /*keep max line length from getting too long for readibility*/
-.text-editor {
+.node-editor {
   width: 100%;
   margin-bottom: var(--2);
 }
 .text-editor textarea, .panel-back-parent {
   max-width: 768px;
 }
+.node-description {
+  padding: 0;
+  color: var(--color-text-secondary);
+  line-height: 150%;
+  font-size: 13px;
+  border: 0;
+  outline: 0;
+}
 /*todo: check unused textarea styles in panel.tsx*/
 .text-editor > textarea, .text-editor > span {
   outline: none;
@@ -249,7 +257,7 @@ with their icon for Safari only*/
   line-height: var(--body-line-height);
   border: none;
 }
-.title-node textarea, .title-node > .text-editor > span {
+.title-node .text-editor > textarea, .title-node .text-editor > span {
   font-size: var(--6);
   font-weight: var(--weight-bold);
 }