very simple hacked-together auto-completion demo

src/Editor.tsx

@@ -0,0 +1,262 @@
+import { useState } from "react";
+import {growPrefix, suggest, getType, prettyT} from "dope2";
+
+import "./Editor.css";
+
+interface NodeState {
+  text: string;
+  children: NodeState[];
+  cursor: CursorState;
+  selection: SelectState;
+}
+
+interface SelectState {
+  from: number;
+  to: number;
+}
+
+interface CursorState {
+  mode: "text" | "child" | "none";
+  pos: number;
+}
+
+export function Editor({env}) {
+  const [root, setRoot] = useState<NodeState>({
+    text: "comp",
+    children: [],
+    selection: {
+      from: 4,
+      to: 4,
+    },
+    cursor: {
+      mode: "text",
+      pos: 4,
+    },
+  });
+  const [i, setI] = useState(0);
+
+  const type = char => {
+    const newPos = root.selection.from + char.length;
+    setRoot({
+      text: root.text.slice(0, root.selection.from)+char+root.text.slice(root.selection.to),
+      children: root.children,
+      selection: {
+        from: newPos,
+        to: newPos,
+      },
+      cursor: {
+        mode: root.cursor.mode,
+        pos: newPos,
+      },
+    });
+  }
+
+  const isSelection = root.selection.from !== root.selection.to;
+
+  const growShrinkSelection = (newPos) => {
+    let selectFrom, selectTo;
+    if (root.cursor.pos === root.selection.to) {
+      // grow/shrink selectTo
+      selectFrom = root.selection.from;
+      selectTo = newPos;
+    }
+    else if (root.cursor.pos === root.selection.from) {
+      // grow/shrink selectFrom
+      selectFrom = newPos;
+      selectTo = root.selection.to;
+    }
+    else {
+      throw new Error("did not expect this")
+    }
+    if (selectFrom > selectTo) {
+      [selectFrom, selectTo] = [selectTo, selectFrom]; // swap
+    }
+    console.log({newPos, selectFrom, selectTo});
+    setRoot({
+      text: root.text,
+      children: root.children,
+      cursor: {
+        mode: root.cursor.mode,
+        pos: newPos,
+      },
+      selection: {
+        from: selectFrom,
+        to: selectTo,
+      },
+    });
+  }
+
+  const updateCursorSelect = (newPos, selectFrom, selectTo) => {
+    setRoot({
+      text: root.text,
+      children: root.children,
+      cursor: {
+        mode: root.cursor.mode,
+        pos: newPos,
+      },
+      selection: {
+        from: selectFrom,
+        to: selectTo,
+      },
+    });
+  }
+
+  const handleArrow = (e) => {
+    let newPos = e.key === "ArrowLeft"
+      ? Math.max(0, root.cursor.pos-1)                 // to the left
+      : Math.min(root.cursor.pos+1, root.text.length); // to the right
+    if (e.shiftKey) {
+      return growShrinkSelection(newPos);
+    }
+    // shift not down...
+    let selectTo, selectFrom;
+    if (isSelection) {
+      // get rid of selection + move cursor
+      if (e.key === "ArrowLeft") {
+        selectTo = selectFrom = newPos = root.selection.from;
+      }
+      else {
+        selectTo = selectFrom = newPos = root.selection.to;
+      }
+    }
+    else {
+      // just move cursor
+      selectFrom = selectTo = newPos;
+    }
+    updateCursorSelect(newPos, selectFrom, selectTo);
+}
+
+  const handleJump = (e, newPos) => {
+    if (e.shiftKey) {
+      return growShrinkSelection(newPos);
+    }
+    // shift not down...
+    // get rid of selection (if there is any) + move cursor
+    updateCursorSelect(newPos, newPos, newPos);
+  }
+
+  const keydown = e => {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const newText = root.text + growPrefix(env.name2dyn)(root.text)
+      return setRoot({
+        text: newText,
+        cursor: {
+          mode: root.cursor.mode,
+          pos: newText.length,
+        },
+        selection: { from: newText.length, to: newText.length },
+        children: root.children,
+      });
+    }
+    // console.log(e);
+    if (e.key === "ArrowRight") {
+      return handleArrow(e);
+    }
+    else if (e.key === "ArrowLeft") {
+      return handleArrow(e);
+    }
+    else if (e.key === "ArrowDown") {
+      setI((i+1));
+    }
+    else if (e.key === "ArrowUp") {
+      setI((i-1));
+    }
+    else if (e.key === "Backspace") {
+      if (isSelection) {
+        type('');
+      }
+      else {
+        const newPos = Math.max(0, root.cursor.pos-1);
+        setRoot({
+          text: root.text.slice(0, root.cursor.pos-1)+root.text.slice(root.cursor.pos),
+          children: root.children,
+          selection: {
+            from: newPos,
+            to: newPos,
+          },
+          cursor: {
+            mode: root.cursor.mode,
+            pos: newPos,
+          }
+        });
+      }
+    }
+    else if (e.key === "Delete") {
+      if (isSelection) {
+        type('');
+      }
+      else {
+        setRoot({
+          text: root.text.slice(0, root.cursor.pos)+root.text.slice(root.cursor.pos+1),
+          children: root.children,
+          cursor: {
+            mode: root.cursor.mode,
+            pos: root.cursor.pos,
+          },
+          selection: {
+            from: root.cursor.pos,
+            to: root.cursor.pos,
+          },
+        });
+      }
+    }
+    else if (e.key === "Home") {
+      return handleJump(e, 0);
+    }
+    else if (e.key === "End") {
+      return handleJump(e, root.text.length);
+    }
+    else if (e.key === "Enter") {
+      return;
+    }
+    else if (!e.metaKey && !e.altKey && !e.ctrlKey && e.key !== "Shift") {
+      // only type real characters
+      type(e.key);
+    }
+  }
+
+  return <div tabIndex={0} onKeyDown={keydown} autoFocus={true}>
+    <Block env={env} node={root} i={i} setI={setI}/>
+  </div>;
+}
+
+interface BlockProperties {
+  node: NodeState;
+  env: any;
+  i: number;
+  setI: any;
+}
+
+function Block(props: BlockProperties) {
+  const {node, env, i, setI} = props;
+  const {selection, cursor, text} = node;
+  const completion = growPrefix(env.name2dyn)(text);
+  const suggestions = suggest(env.name2dyn)(text)(10);
+  return <span>{
+    [...text].map((char,i) =>
+      <span key={i} className={["text-block"].concat((i >= selection.from && i < selection.to) ? ["selected"] : []).join(' ')}>
+        { (i === cursor.pos) ? <Cursor suggestions={suggestions} i={i}/> : <></> }
+        {char}
+      </span>)
+    }
+    { (cursor.pos === text.length) ? <Cursor suggestions={suggestions} i={i} setI={setI}/> : <></> }
+    {
+      [...completion].map((char, i) => 
+        <span key={i} className="text-block suggest">{char}</span>
+      )
+    }
+  </span>;
+}
+
+function Cursor({suggestions, i, setI}) {
+  return <div className="text-block">
+    <div className="cursor"/>
+    {suggestions.length > 0 ?
+      <div className="suggestions">
+        {suggestions.map(([name, dynamic], j) => <div className={i===j?"selected":""} onClick={() => setI(j)}>{name} :: {prettyT(getType(dynamic))}</div>)}
+      </div>
+      : <></>
+    }
+  </div>;
+}