use <div> with property 'contenteditable' to accept text input (much simpler)

pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       dope2:
         specifier: git+https://deemz.org/git/joeri/dope2.git
-        version: git+https://deemz.org/git/joeri/dope2.git#a166ebb0d703dc77f3939a35cf4cc186cd0cc1d8
+        version: git+https://deemz.org/git/joeri/dope2.git#3b8548e9af5528069f07ec62519e263511ecc34b
       react:
         specifier: ^19.1.0
         version: 19.1.0
@@ -633,8 +633,8 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
-  dope2@git+https://deemz.org/git/joeri/dope2.git#a166ebb0d703dc77f3939a35cf4cc186cd0cc1d8:
+  dope2@git+https://deemz.org/git/joeri/dope2.git#3b8548e9af5528069f07ec62519e263511ecc34b:
-    resolution: {commit: a166ebb0d703dc77f3939a35cf4cc186cd0cc1d8, repo: https://deemz.org/git/joeri/dope2.git, type: git}
+    resolution: {commit: 3b8548e9af5528069f07ec62519e263511ecc34b, repo: https://deemz.org/git/joeri/dope2.git, type: git}
     version: 0.0.1
 
   dunder-proto@1.0.1:
@@ -1758,7 +1758,7 @@ snapshots:
 
   depd@2.0.0: {}
 
-  dope2@git+https://deemz.org/git/joeri/dope2.git#a166ebb0d703dc77f3939a35cf4cc186cd0cc1d8:
+  dope2@git+https://deemz.org/git/joeri/dope2.git#3b8548e9af5528069f07ec62519e263511ecc34b:
     dependencies:
       functional-red-black-tree: 1.0.1
 

src/App.css

@@ -6,7 +6,7 @@
     "content content content"
     "footer footer footer";
 
-  grid-template-columns: 200px 1fr 200px;
+  grid-template-columns: 100px 1fr 100px;
   grid-template-rows: auto 1fr auto;
   /* grid-gap: 10px; */
 

src/Editor.css

@@ -1,46 +1,87 @@
-.text-block {
+.suggest {
-  display: inline-block;
+  color: #aaa;
-  /* border: solid 1px lightgrey; */
+}
-  /* margin-right: 4px; */
+.suggestions { 
-  /* padding-left: 2px; */
+  position: absolute;
-  /* padding-right: 2px; */
+  border: solid 1px lightgrey;
-  user-select: none;
+  cursor: pointer;
-  cursor: text;
+  max-height: calc(100vh - 48px);
+  overflow: scroll;
 }
-
 .selected {
   background-color: darkseagreen;
   color: white;
 }
 
-.suggest {
+
-  color: #aaa;
+[contenteditable] {
+  outline: 0px solid transparent;
 }
 
 
-.cursor {
+/* TYPES */
-  display: none;
+
+.infix {
+  margin-left: 1px;
+  margin-right: 1px;
 }
 
-div:focus .cursor {
+.type {
-  animation: blink 1s linear infinite;
+  margin:1px;
   display: inline-block;
-  margin-left: -1px;
-  margin-right: -3px;
-  vertical-align: text-bottom;
-  height: 20px;
-  width: 2px;
-  background-color: black;
 }
 
-.suggestions { 
+.functionType {
-  position: absolute;
+  border: solid 1px darkred;
-  border: solid 1px lightgrey;
+  background-color: bisque;
-  cursor: pointer;
+  color:darkred;
 }
 
-@keyframes blink {
+.productType {
-  50% {
+  border: solid 1px darkblue;
-    opacity: 0;
+  background-color: aliceblue;
-  }
+  color:darkblue;
-}
+}
+
+.sumType {
+  border: solid 1px #333;
+  background-color: lightyellow;
+  color:#333
+}
+
+.dictType {
+  border-radius: 5px;
+  border: solid 1px darkblue;
+  background-color: rgb(206, 232, 255);
+  color:darkblue
+}
+
+.setType {
+  border-radius: 5px;
+  padding-left: 2px;
+  padding-right: 2px;
+  border: solid 1px darkblue;
+  background-color: rgb(206, 232, 255);
+  color:darkblue
+}
+
+.listType {
+  padding-left: 2px;
+  padding-right: 2px;
+  border: solid 1px darkblue;
+  background-color: rgb(206, 232, 255);
+  color:darkblue
+}
+
+.iteratorType {
+  border-style: dashed;
+  animation: flickerAnimation 500ms steps(1) normal infinite;
+}
+
+/* Animations */
+
+@keyframes flickerAnimation {
+  0%   { opacity:1; }
+  50%  { opacity:0; }
+  100% { opacity:1; }
+}

src/Editor.tsx

@@ -1,262 +1,138 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
-import {growPrefix, suggest, getType, prettyT} from "dope2";
+import {growPrefix, suggest, getType, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, symbolSetIterator, symbolDictIterator, getSymbol, getHumanReadableName} 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>({
+  return <Block env={env} />;
-    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) => {
+function getCursorPosition() {
-    if (e.shiftKey) {
+  const selection = window.getSelection();
-      return growShrinkSelection(newPos);
+  if (selection) {
-    }
+    const range = selection.getRangeAt(0);
-    // shift not down...
+    const clonedRange = range.cloneRange();
-    // get rid of selection (if there is any) + move cursor
+    return clonedRange.startOffset;
-    updateCursorSelect(newPos, newPos, newPos);
   }
+}
 
-  const keydown = e => {
+function setCursorPosition(elem, pos) {
+  const range = document.createRange();
+  range.selectNode(elem);
+  range.setStart(elem, pos);
+  range.setEnd(elem, pos);
+  const selection = window.getSelection();
+  if (!selection) {
+    console.log('no selection!')
+  }
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+}
+
+function Block({env}) {
+  const [text, setText] = useState("edit me!");
+  const ref = useRef<any>(null);
+  const singleSuggestion = growPrefix(env.name2dyn)(text);
+  const suggestions = suggest(env.name2dyn)(text)(16);
+  const [i, setI] = useState(0);
+  const resetFocus = () => {
+    ref.current?.focus();
+  };
+  useEffect(resetFocus, [ref.current])
+  const onSelect = ([name]) => {
+    setText(name);
+    ref.current.innerText = name;
+    setCursorPosition(ref.current.lastChild, name.length);
+    setI(0);
+  }
+  const onInput = e => {
+    const pos = getCursorPosition();
+    setText(e.target.innerText);
+    setCursorPosition(e.target.lastChild, pos);
+  };
+  const onKeyDown = e => {
     if (e.key === "Tab") {
+      const newText = text + singleSuggestion;
+      setText(newText);
+      ref.current.innerText = newText;
+      setCursorPosition(ref.current.lastChild, newText.length);
       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") {
+    if (e.key === "ArrowDown") {
-      // only type real characters
+      setI((i + 1) % suggestions.length);
-      type(e.key);
+      e.preventDefault();
+      return;
     }
-  }
+    if (e.key === "ArrowUp") {
-
+      setI((i - 1) % suggestions.length);
-  return <div tabIndex={0} onKeyDown={keydown} autoFocus={true}>
+      e.preventDefault();
-    <Block env={env} node={root} i={i} setI={setI}/>
+      return;
-  </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}/> : <></> }
+    if (e.key === "Enter") {
-    {
+      onSelect(suggestions[i]);
-      [...completion].map((char, i) => 
+      e.preventDefault();
-        <span key={i} className="text-block suggest">{char}</span>
+      return;
-      )
     }
+  };
+  return <span>
+    <span ref={ref} contentEditable="plaintext-only" onInput={onInput} tabIndex={0} onKeyDown={onKeyDown} onBlur={() =>{
+      // hacky, but couldn't find another way:
+      setTimeout(resetFocus, 0);
+    }}></span>
+    <Suggestions suggestions={suggestions} onSelect={onSelect} i={i} setI={setI}/>
+    <span className="text-block suggest">{singleSuggestion}</span>
   </span>;
 }
 
-function Cursor({suggestions, i, setI}) {
+function Suggestions({suggestions, onSelect, i, setI}) {
-  return <div className="text-block">
+  return (suggestions.length > 0) ?
-    <div className="cursor"/>
+    <div className="suggestions">
-    {suggestions.length > 0 ?
+      {suggestions.map(([name, dynamic], j) => <div key={`${i}_${name}`} className={i===j?"selected":""} onClick={() => setI(j)} onDoubleClick={() => onSelect(suggestions[i])}>{name} :: <Type type={getType(dynamic)}/></div>)}
-      <div className="suggestions">
+    </div>
-        {suggestions.map(([name, dynamic], j) => <div className={i===j?"selected":""} onClick={() => setI(j)}>{name} :: {prettyT(getType(dynamic))}</div>)}
+    : <></>;
-      </div>
-      : <></>
-    }
-  </div>;
 }
+
+
+function Type({type}) {
+  const symbol = getSymbol(type);
+  switch (symbol) {
+    case symbolFunction:
+      return <BinaryType type={type} cssClass="functionType" infix="&rarr;" prefix="" suffix=""/>;
+    case symbolProduct:
+      return <BinaryType type={type} cssClass="productType" infix="&#10799;" prefix="" suffix=""/>;
+    case symbolSum:
+      return <BinaryType type={type} cssClass="sumType" infix="+" prefix="" suffix=""/>;
+    case symbolDict:
+      return <BinaryType type={type} cssClass="dictType" infix="&rArr;" prefix="{" suffix="}"/>;
+    case symbolSet:
+      return <UnaryType type={type} cssClass="setType" prefix="{" suffix="}" />;
+    case symbolList:
+      return <UnaryType type={type} cssClass="listType" prefix="[" suffix="]" />;
+    case symbolSetIterator:
+      return <UnaryType type={type} cssClass="setType iteratorType" prefix="{*" suffix="}" />;
+    case symbolDictIterator:
+      return <BinaryType type={type} cssClass="dictType iteratorType" infix="*&rArr;" prefix="{" suffix="}"/>;
+  
+      default:
+      return <div className="type">{getHumanReadableName(symbol)}</div>
+  }
+}
+
+function BinaryType({type, cssClass, infix, prefix, suffix}) {
+  return <div className={`type ${cssClass}`}>
+    {prefix}
+    <Type type={type.params[0](type)}/>
+    <span className="infix">{infix}</span>
+    <Type type={type.params[1](type)}/>
+    {suffix}
+  </div>
+}
+
+function UnaryType({type, cssClass, prefix, suffix}) {
+  return <div className={`type ${cssClass}`}>
+    {prefix}
+    <Type type={type.params[0](type)}/>
+    {suffix}
+  </div>
+}