[WIP] Refactor command input

.gitattributes

@@ -1 +1,3 @@
-* text=auto eol=lf
+* text=auto eol=lf
+src/types/schemas/command.d.ts linguist-generated
+src/types/schemas/commandList.d.ts linguist-generated

.vscode/settings.json

@@ -13,6 +13,12 @@
   "[json]": {
     "editor.defaultFormatter": "oxc.oxc-vscode"
   },
+  "json.schemas": [
+    {
+      "fileMatch": ["*.commands.json"],
+      "url": "./src/types/schemas/commandList.schema.json"
+    }
+  ],
   "nixEnvSelector.nixFile": "${workspaceFolder}/flake.nix",
   "nixEnvSelector.useFlakes": true
 }

package.json

@@ -118,6 +118,7 @@
     "buffer": "^6.0.3",
     "cloudflared": "^0.7.1",
     "jsdom": "^29.0.0",
+    "json-schema-to-typescript": "^15.0.4",
     "knip": "5.85.0",
     "oxfmt": "^0.45.0",
     "oxlint": "^1.60.0",

scripts/generateDTSFromJSONSchema.js

@@ -0,0 +1,25 @@
+import { compileFromFile } from 'json-schema-to-typescript';
+import * as fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const projectRoot = dirname(__dirname);
+const schemasDir = join(projectRoot, 'src/types/schemas');
+
+const commandSchemaPath = join(schemasDir, 'command.schema.json');
+const commandDtsPath = join(schemasDir, 'command.d.ts');
+const commandListSchemaPath = join(schemasDir, 'commandList.schema.json');
+const commandListDtsPath = join(schemasDir, 'commandList.d.ts');
+
+const compileOptions = {
+  cwd: schemasDir,
+};
+
+compileFromFile(commandSchemaPath, compileOptions).then((ts) =>
+  fs.writeFileSync(commandDtsPath, ts)
+);
+
+compileFromFile(commandListSchemaPath, compileOptions).then((ts) =>
+  fs.writeFileSync(commandListDtsPath, ts)
+);

src/app/components/editor/Elements.tsx

@@ -10,6 +10,8 @@ import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { nicknamesAtom } from '$state/nicknames';
 import { BlockType } from './types';
 import { getBeginCommand } from './utils';
+import { SlateInputForCommand } from '$plugins/commandHandling/slateInput';
+import { getFromCommandRegistry } from '$plugins/commandHandling/commandRegistry';
 import type { CommandElement, EmoticonElement, LinkElement, MentionElement } from './slate';
 
 // Put this at the start and end of an inline component to work around this Chromium bug:
@@ -56,19 +58,15 @@ function RenderCommandElement({
   const selected = useSelected();
   const focused = useFocused();
   const editor = useSlate();
-
+  
   return (
-    <span
-      {...attributes}
-      className={css.Command({
+    <SlateInputForCommand
+      commandNameClassName={css.Command({
         focus: selected && focused,
         active: getBeginCommand(editor) === element.command,
       })}
-      contentEditable={false}
-    >
-      {`/${element.command}`}
-      {children}
-    </span>
+      command={getFromCommandRegistry(element.command)}
+    />
   );
 }