ui: added some placeholder handling and changed search node ui (#166)

* ui: added some placeholder handling and changed search node ui

* ui: focus search node on creation

Author: ArcaTech

lib/com/search.tsx

@@ -29,8 +29,12 @@ export class SearchNode {
     return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
   }
 
+  handlePlaceholder(): any {
+    return 'Enter search value';
+  }
+
   displayName(node: Node): any {
-    return `Search for "${node.name}"`;
+    return node.name;
   }
 
   onAttach(node: Node) {

lib/mod.ts

@@ -75,6 +75,7 @@ export async function setup(document: Document, target: HTMLElement, backend: Ba
       const search = new SearchNode();
       ctx.node.addComponent(search);
       workbench.workspace.setExpanded(ctx.path.head, ctx.node, true);
+      workbench.focus(ctx.path);
     }
   });
 

lib/ui/node/editor.tsx

@@ -1,7 +1,7 @@
 import { objectCall, objectHas } from "../../model/hooks.ts";
 
 export const NodeEditor: m.Component = {
-  view ({attrs: {workbench, path, onkeydown, disallowEmpty, editValue}, state}) {
+  view ({attrs: {workbench, path, onkeydown, disallowEmpty, editValue, placeholder}, state}) {
     const node = path.node;
     let prop = (editValue) ? "value" : "name";
 
@@ -32,7 +32,6 @@ export const NodeEditor: m.Component = {
       }
     }
 
-    let placeholder;
     if (node.raw.Rel === "Fields") {
       placeholder = (editValue) ? "Value" : "Field";
     }

lib/ui/outline.tsx

@@ -38,7 +38,8 @@ export const OutlineNode: m.Component<Attrs, State> = {
       node = handleNode.refTo;
     }
 
-    const expanded = workbench.workspace.getExpanded(path.head, handleNode); 
+    const expanded = workbench.workspace.getExpanded(path.head, handleNode);
+    const placeholder = objectHas(node, "handlePlaceholder") ? objectCall(node, "handlePlaceholder") : '';
 
     const hover = (e) => {
       state.hover = true;
@@ -155,7 +156,8 @@ export const OutlineNode: m.Component<Attrs, State> = {
       if (node.id === workbench.context?.node?.id || state.hover) {
         return true;
       }
-      return node.name.length > 0;
+      if (node.name.length > 0) return true;
+      if (placeholder.length > 0) return true;
     }
 
     return (
@@ -187,7 +189,7 @@ export const OutlineNode: m.Component<Attrs, State> = {
               </div>
             : <div class="flex grow items-start flex-row">
                 {objectHas(node, "beforeEditor") && m(objectCall(node, "beforeEditor"), {node})}
-                <NodeEditor workbench={workbench} path={path} onkeydown={checkCommands} />
+                <NodeEditor workbench={workbench} path={path} onkeydown={checkCommands} placeholder={placeholder} />
                 {objectHas(node, "afterEditor") && m(objectCall(node, "afterEditor"), {node})}
               </div>
           }