very simple hacked-together auto-completion demo

src/App.css

@@ -0,0 +1,44 @@
+#root {
+  display: grid;
+
+  grid-template-areas:
+    "header header header"
+    "content content content"
+    "footer footer footer";
+
+  grid-template-columns: 200px 1fr 200px;
+  grid-template-rows: auto 1fr auto;
+  /* grid-gap: 10px; */
+
+  height: 100vh;
+}
+
+header {
+  grid-area: header;
+}
+
+nav {
+  grid-area: nav;
+  margin-left: 0.5rem;
+}
+
+main {
+  grid-area: content;
+}
+
+aside {
+  grid-area: side;
+  margin-right: 0.5rem;
+}
+
+footer {
+  text-align: right;
+  grid-area: footer;
+
+  background-color: dodgerblue;
+  color: white;
+}
+
+footer a {
+  color: white;
+}

src/App.tsx

@@ -0,0 +1,27 @@
+// import { useState } from 'react'
+import './App.css'
+import { Editor } from './Editor'
+
+import {module2Env, ModuleStd} from "dope2";
+
+function App() {
+  const env = module2Env(ModuleStd);
+
+  return (
+    <>
+      <header>
+        {/* Header content */}
+      </header>
+
+      <main>
+        <Editor env={env}></Editor>
+      </main>
+
+      <footer>
+        <a href="https://deemz.org/git/joeri/dope2-webapp">Source code</a>
+      </footer>
+    </>
+  )
+}
+
+export default App

src/Editor.css

@@ -0,0 +1,46 @@
+.text-block {
+  display: inline-block;
+  /* border: solid 1px lightgrey; */
+  /* margin-right: 4px; */
+  /* padding-left: 2px; */
+  /* padding-right: 2px; */
+  user-select: none;
+  cursor: text;
+}
+
+.selected {
+  background-color: darkseagreen;
+  color: white;
+}
+
+.suggest {
+  color: #aaa;
+}
+
+
+.cursor {
+  display: none;
+}
+
+div:focus .cursor {
+  animation: blink 1s linear infinite;
+  display: inline-block;
+  margin-left: -1px;
+  margin-right: -3px;
+  vertical-align: text-bottom;
+  height: 20px;
+  width: 2px;
+  background-color: black;
+}
+
+.suggestions { 
+  position: absolute;
+  border: solid 1px lightgrey;
+  cursor: pointer;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}

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>;
+}

src/fake_node_util.js

@@ -0,0 +1,6 @@
+// In the browser, we don't use the inspect.custom symbol,
+// but it still needs to exist.
+
+export const inspect = {
+  custom: Symbol(),
+};

src/index.css

@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />