very simple hacked-together auto-completion demo
This commit is contained in:
commit
d05d9125c9
21 changed files with 3158 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
54
README.md
Normal file
54
README.md
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default tseslint.config({
|
||||||
|
extends: [
|
||||||
|
// Remove ...tseslint.configs.recommended and replace with this
|
||||||
|
...tseslint.configs.recommendedTypeChecked,
|
||||||
|
// Alternatively, use this for stricter rules
|
||||||
|
...tseslint.configs.strictTypeChecked,
|
||||||
|
// Optionally, add this for stylistic rules
|
||||||
|
...tseslint.configs.stylisticTypeChecked,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
// other options...
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import reactX from 'eslint-plugin-react-x'
|
||||||
|
import reactDom from 'eslint-plugin-react-dom'
|
||||||
|
|
||||||
|
export default tseslint.config({
|
||||||
|
plugins: {
|
||||||
|
// Add the react-x and react-dom plugins
|
||||||
|
'react-x': reactX,
|
||||||
|
'react-dom': reactDom,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
// other rules...
|
||||||
|
// Enable its recommended typescript rules
|
||||||
|
...reactX.configs['recommended-typescript'].rules,
|
||||||
|
...reactDom.configs.recommended.rules,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
61
flake.lock
generated
Normal file
61
flake.lock
generated
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
{
|
||||||
|
"nodes": {
|
||||||
|
"flake-utils": {
|
||||||
|
"inputs": {
|
||||||
|
"systems": "systems"
|
||||||
|
},
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1731533236,
|
||||||
|
"narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "flake-utils",
|
||||||
|
"rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "flake-utils",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nixpkgs": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1746663147,
|
||||||
|
"narHash": "sha256-Ua0drDHawlzNqJnclTJGf87dBmaO/tn7iZ+TCkTRpRc=",
|
||||||
|
"owner": "nixos",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"rev": "dda3dcd3fe03e991015e9a74b22d35950f264a54",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "nixos",
|
||||||
|
"ref": "nixos-unstable",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": {
|
||||||
|
"inputs": {
|
||||||
|
"flake-utils": "flake-utils",
|
||||||
|
"nixpkgs": "nixpkgs"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"systems": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1681028828,
|
||||||
|
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
|
||||||
|
"owner": "nix-systems",
|
||||||
|
"repo": "default",
|
||||||
|
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "nix-systems",
|
||||||
|
"repo": "default",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "root",
|
||||||
|
"version": 7
|
||||||
|
}
|
||||||
21
flake.nix
Normal file
21
flake.nix
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
inputs = {
|
||||||
|
nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
|
||||||
|
flake-utils.url = "github:numtide/flake-utils";
|
||||||
|
};
|
||||||
|
|
||||||
|
outputs = { self, nixpkgs, flake-utils }:
|
||||||
|
flake-utils.lib.eachDefaultSystem (system:
|
||||||
|
let
|
||||||
|
pkgs = nixpkgs.legacyPackages.${system};
|
||||||
|
in
|
||||||
|
rec {
|
||||||
|
devShells.default = pkgs.mkShellNoCC {
|
||||||
|
packages = with pkgs; [
|
||||||
|
nodejs_latest
|
||||||
|
pnpm
|
||||||
|
];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/syringe.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>DOPE2</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
package.json
Normal file
30
package.json
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"name": "dope2-webapp",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"dope2": "git+https://deemz.org/git/joeri/dope2.git",
|
||||||
|
"react": "^19.1.0",
|
||||||
|
"react-dom": "^19.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.26.0",
|
||||||
|
"@types/react": "^19.1.3",
|
||||||
|
"@types/react-dom": "^19.1.3",
|
||||||
|
"@vitejs/plugin-react-swc": "^3.9.0",
|
||||||
|
"eslint": "^9.26.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.20",
|
||||||
|
"globals": "^16.1.0",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"typescript-eslint": "^8.32.0",
|
||||||
|
"vite": "^6.3.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
2418
pnpm-lock.yaml
generated
Normal file
2418
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
29
public/syringe.svg
Normal file
29
public/syringe.svg
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 512 512" xml:space="preserve">
|
||||||
|
<rect x="105.794" y="194.793" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 633.7699 218.036)" style="fill:#D5E2E8;" width="331.869" height="90.966"/>
|
||||||
|
<g>
|
||||||
|
|
||||||
|
<rect x="380.574" y="86.95" transform="matrix(0.7071 -0.7071 0.7071 0.7071 47.5193 319.6091)" style="fill:#3CC4DC;" width="57.977" height="30.988"/>
|
||||||
|
|
||||||
|
<rect x="425.076" y="2.457" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 804.1049 -193.2126)" style="fill:#3CC4DC;" width="33.983" height="134.944"/>
|
||||||
|
</g>
|
||||||
|
<path d="M509.013,98.41L413.591,2.987C411.677,1.075,409.084,0,406.379,0s-5.298,1.075-7.212,2.987L375.135,27.02
|
||||||
|
c-3.983,3.983-3.983,10.441,0,14.424l29.543,29.543l-26.572,26.572l-13.993-13.993c-3.984-3.982-10.44-3.982-14.425,0
|
||||||
|
L115.02,318.235c-3.983,3.983-3.983,10.441,0,14.425l24.948,24.948L25.606,471.97c-3.983,3.983-3.983,10.441,0,14.425
|
||||||
|
c1.992,1.992,4.602,2.987,7.212,2.987c2.61,0,5.22-0.995,7.212-2.987l114.363-114.363l24.948,24.948
|
||||||
|
c1.992,1.991,4.602,2.987,7.212,2.987s5.22-0.996,7.212-2.987l234.668-234.668c3.983-3.983,3.983-10.441,0-14.425l-13.993-13.993
|
||||||
|
l26.572-26.572l29.544,29.544c1.913,1.912,4.507,2.987,7.212,2.987s5.298-1.075,7.212-2.987l24.032-24.032
|
||||||
|
C512.996,108.85,512.996,102.393,509.013,98.41z M406.798,155.1L186.553,375.344l-49.898-49.898l19.504-19.504l10.105,10.105
|
||||||
|
c1.992,1.992,4.602,2.987,7.212,2.987c2.61,0,5.22-0.995,7.212-2.987c3.983-3.983,3.983-10.441,0-14.425l-10.105-10.105
|
||||||
|
l16.677-16.677l10.105,10.105c1.992,1.992,4.602,2.987,7.212,2.987s5.22-0.995,7.212-2.987c3.983-3.983,3.983-10.441,0-14.425
|
||||||
|
l-10.105-10.105l16.677-16.677l10.105,10.105c1.992,1.992,4.602,2.987,7.212,2.987c2.61,0,5.22-0.995,7.212-2.987
|
||||||
|
c3.983-3.983,3.983-10.441,0-14.425l-10.105-10.105l16.677-16.677l10.105,10.105c1.992,1.992,4.602,2.987,7.212,2.987
|
||||||
|
c2.61,0,5.22-0.995,7.212-2.987c3.983-3.983,3.983-10.441,0-14.425l-10.105-10.105l16.676-16.677l10.105,10.105
|
||||||
|
c1.992,1.992,4.602,2.987,7.212,2.987c2.61,0,5.22-0.995,7.212-2.987c3.983-3.983,3.983-10.441,0-14.425l-10.105-10.105
|
||||||
|
l61.914-61.914L406.798,155.1z M400.018,119.471l-7.488-7.488l26.572-26.572l7.488,7.488L400.018,119.471z M396.77,34.232
|
||||||
|
l9.609-9.609l80.999,80.999l-9.609,9.609L396.77,34.232z"/>
|
||||||
|
<path d="M5.108,492.469l-2.12,2.12c-3.983,3.983-3.983,10.441,0,14.425C4.979,511.005,7.589,512,10.199,512s5.22-0.995,7.212-2.987
|
||||||
|
l2.12-2.12c3.983-3.983,3.983-10.441,0-14.425C15.547,488.486,9.091,488.486,5.108,492.469z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
44
src/App.css
Normal file
44
src/App.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
27
src/App.tsx
Normal file
27
src/App.tsx
Normal file
|
|
@ -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
|
||||||
46
src/Editor.css
Normal file
46
src/Editor.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
262
src/Editor.tsx
Normal file
262
src/Editor.tsx
Normal file
|
|
@ -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>;
|
||||||
|
}
|
||||||
6
src/fake_node_util.js
Normal file
6
src/fake_node_util.js
Normal file
|
|
@ -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(),
|
||||||
|
};
|
||||||
3
src/index.css
Normal file
3
src/index.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
|
|
@ -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>,
|
||||||
|
)
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
30
tsconfig.app.json
Normal file
30
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
// i love implicit 'any'
|
||||||
|
"noImplicitAny": false,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
28
tsconfig.node.json
Normal file
28
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
// i love implicit 'any'
|
||||||
|
"noImplicitAny": false,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
16
vite.config.ts
Normal file
16
vite.config.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react-swc'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
],
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
// polyfills
|
||||||
|
"node:util": './src/fake_node_util.js',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue