skir-codemirror-plugin 0.9.0

package/README.md

@@ -0,0 +1,126 @@
+# skir-codemirror-plugin
+
+This library provides a CodeMirror-based JSON editor for Skir values.
+It helps users edit Skir request/response payloads in a human-readable JSON form while preserving schema-aware guidance and validation.
+
+Demo: `npx skir-studio-demo`
+
+## What It Provides
+
+- A ready-to-use `createEditorState(...)` factory for CodeMirror.
+- Schema-driven JSON template generation (when no JSON value is provided).
+- JSON validation and lint diagnostics.
+- In-editor hints and completions informed by the Skir type schema.
+- Read-only mode support for response viewing.
+- Built-in theme support:
+	- `tokyo-night`
+	- `tokyo-night-day`
+	- custom theme object
+
+## Install
+
+```sh
+npm install skir-codemirror-plugin
+```
+
+## Public API
+
+The package root exports:
+
+- `createEditorState`
+- `CreateEditorStateParams` (type)
+- `CustomTheme` (type)
+- `Json` (type)
+
+## Usage
+
+```ts
+import { EditorView } from "@codemirror/view";
+import {
+	createEditorState,
+	type CreateEditorStateParams,
+} from "skir-codemirror-plugin";
+
+const params: CreateEditorStateParams = {
+	schema: {
+		type: { kind: "primitive", value: "string" },
+		records: [],
+	},
+	// Optional:
+	// readOnly: true,
+	// json: "hello",
+	// theme: "tokyo-night-day",
+};
+
+const state = createEditorState(params);
+
+new EditorView({
+	state,
+	parent: document.getElementById("editor")!,
+});
+```
+
+## createEditorState Parameters
+
+```ts
+{
+	schema: TypeDefinition,
+	readOnly?: true,
+	json?: Json,
+	theme?: "tokyo-night" | "tokyo-night-day" | CustomTheme,
+}
+```
+
+Behavior:
+
+- `schema` is required and drives validation/completion.
+- If `json` is omitted, a JSON template is generated from the schema.
+- `readOnly: true` enables non-editable mode.
+- `theme` defaults to `tokyo-night`.
+
+## Local Dev Flow
+
+This repository includes a minimal local dev page for previewing the editor state produced by `createEditorState`.
+
+### Run It
+
+```sh
+npm run dev
+```
+
+This does three things:
+
+1. Builds TypeScript sources into `dist/`.
+2. Builds the dev entry point from `dev/main.ts` into `dev-dist/main.js`.
+3. Starts `web-dev-server` and opens `/dev/index.html`.
+
+Dev URL:
+
+```text
+http://localhost:8080/dev/index.html
+```
+
+### Dev Files
+
+- `dev/index.html`: minimal host page containing only `#editor` and module import.
+- `dev/main.ts`: creates `EditorView` with `createEditorState(...)`.
+- `dev-dist/main.js`: generated browser output from `dev/main.ts`.
+
+To try your own schema/JSON inputs, edit `dev/main.ts` and change the `params` object.
+
+### Auto Rebuild and Reload
+
+`npm run dev` watches both:
+
+- `src/**/*.ts` -> rebuilds the library into `dist/`
+- `dev/**/*.ts` -> rebuilds the dev entry into `dev-dist/`
+
+`web-dev-server --watch` reloads the page when served files change.
+
+### Dev-Only Note
+
+This flow is for local development only.
+
+- Dev sources are in `dev/`.
+- Dev compiled output is in `dev-dist/`.
+- Package distribution uses `dist/` as the runtime entrypoint.

package/dist/codemirror/create_editor_state.d.ts

@@ -0,0 +1,20 @@
+import { EditorState, Extension } from "@codemirror/state";
+import type { Json, TypeDefinition } from "../json/types";
+export type CreateEditorStateParams = {
+    schema: TypeDefinition;
+    readOnly?: true;
+    json?: Json;
+    theme?: "tokyo-night" | "tokyo-night-day" | CustomTheme;
+};
+export declare function createEditorState({ schema, readOnly, json, theme, }: CreateEditorStateParams): EditorState;
+export interface CustomTheme {
+    backgroundColor: string;
+    lighterBgColor: string;
+    borderColor: string;
+    foregroundColor: string;
+    accentColor: string;
+    errorColor: string;
+    selectionColor: string;
+    themeExtension?: Extension;
+}
+//# sourceMappingURL=create_editor_state.d.ts.map

package/dist/codemirror/create_editor_state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create_editor_state.d.ts","sourceRoot":"","sources":["../../src/codemirror/create_editor_state.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAM3D,OAAO,KAAK,EAAE,IAAI,EAAoB,cAAc,EAAE,MAAM,eAAe,CAAC;AAO5E,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,aAAa,GAAG,iBAAiB,GAAG,WAAW,CAAC;CACzD,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,KAAK,GACN,EAAE,uBAAuB,GAAG,WAAW,CA8OvC;AAED,MAAM,WAAW,WAAW;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B"}

package/dist/codemirror/create_editor_state.js

@@ -0,0 +1,252 @@
+import { autocompletion, closeBrackets } from "@codemirror/autocomplete";
+import { json as jsonExtension } from "@codemirror/lang-json";
+import { linter, lintGutter } from "@codemirror/lint";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
+import { tokyoNightDay } from "@uiw/codemirror-theme-tokyo-night-day";
+import { basicSetup } from "codemirror";
+import { makeJsonTemplate } from "../json/to_json";
+import { enterKeyHandler } from "./enter_key_handler";
+import { jsonCompletion } from "./json_completion";
+import { jsonLinter } from "./json_linter";
+import { debouncedJsonParser } from "./json_state";
+import { statusBar } from "./status_bar";
+export function createEditorState({ schema, readOnly, json, theme, }) {
+    const idToRecordDef = {};
+    for (const record of schema.records) {
+        idToRecordDef[record.id] = record;
+    }
+    const content = json ?? makeJsonTemplate(schema.type, idToRecordDef);
+    switch (theme) {
+        case undefined:
+        case "tokyo-night": {
+            theme = {
+                backgroundColor: "#1a1b26",
+                lighterBgColor: "#1f2335",
+                borderColor: "#414868",
+                foregroundColor: "#c0caf5",
+                accentColor: "#7aa2f7",
+                errorColor: "#f7768e",
+                selectionColor: "#515c7e40",
+                themeExtension: tokyoNight,
+            };
+            break;
+        }
+        case "tokyo-night-day": {
+            theme = {
+                backgroundColor: "#d5d6db",
+                lighterBgColor: "#e1e2e7",
+                borderColor: "#adb0bb",
+                foregroundColor: "#3760bf",
+                accentColor: "#2e7de9",
+                errorColor: "#f52a65",
+                selectionColor: "#3760bf33",
+                themeExtension: tokyoNightDay,
+            };
+            break;
+        }
+    }
+    return EditorState.create({
+        doc: JSON.stringify(content, null, 2),
+        extensions: [
+            EditorState.readOnly.of(!!readOnly),
+            enterKeyHandler(schema),
+            basicSetup,
+            EditorState.languageData.of(() => [
+                {
+                    closeBrackets: { before: ",]}" },
+                },
+            ]),
+            closeBrackets(),
+            theme.themeExtension ?? [],
+            jsonExtension(),
+            debouncedJsonParser(schema),
+            linter(jsonLinter(readOnly ? "read-only" : "editable")),
+            autocompletion({
+                override: [jsonCompletion(schema)],
+            }),
+            lintGutter(),
+            statusBar(),
+            EditorView.theme({
+                "&": {
+                    fontSize: "14px",
+                    height: "100%",
+                },
+                ".cm-scroller": {
+                    fontFamily: "'JetBrains Mono', monospace",
+                    overflow: "auto",
+                },
+                ".cm-lintRange-info": {
+                    backgroundImage: "none",
+                },
+                ".cm-lintRange-info:hover": {
+                    backgroundColor: theme.selectionColor,
+                },
+                ".cm-lintRange-error": {
+                    backgroundImage: "none",
+                    borderBottom: `3px solid ${theme.errorColor}`,
+                },
+                ".cm-tooltip-hover": {
+                    backgroundColor: theme.lighterBgColor,
+                    border: `1px solid ${theme.borderColor}`,
+                    borderRadius: "4px",
+                    padding: "8px 12px",
+                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.5)",
+                    fontSize: "14px",
+                    lineHeight: "1.4",
+                    color: theme.foregroundColor,
+                },
+                ".cm-tooltip.cm-tooltip-lint": {
+                    backgroundColor: theme.lighterBgColor,
+                    border: `1px solid ${theme.borderColor}`,
+                    borderRadius: "4px",
+                    padding: "8px 12px",
+                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.5)",
+                    fontSize: "14px", // Ensure consistency
+                    color: theme.foregroundColor,
+                },
+                ".cm-tooltip-lint .cm-diagnostic-error": {
+                    fontWeight: "bold",
+                    color: theme.errorColor,
+                },
+                ".cm-status-bar": {
+                    backgroundColor: theme.lighterBgColor,
+                    borderTopColor: theme.borderColor,
+                    color: theme.accentColor,
+                },
+                ".cm-diagnostic-textarea": {
+                    backgroundColor: theme.lighterBgColor,
+                    borderColor: theme.borderColor,
+                    color: theme.foregroundColor,
+                },
+                ".cm-diagnostic-textarea[readonly]": {
+                    backgroundColor: theme.backgroundColor,
+                },
+                ".cm-diagnostic-input": {
+                    backgroundColor: theme.lighterBgColor,
+                    borderColor: theme.borderColor,
+                    color: theme.foregroundColor,
+                },
+                ".cm-diagnostic-button": {
+                    backgroundColor: theme.lighterBgColor,
+                    borderColor: theme.borderColor,
+                    color: theme.foregroundColor,
+                },
+                ".cm-diagnostic-button:hover": {
+                    backgroundColor: theme.borderColor,
+                },
+                ".cm-diagnostic-error-message": {
+                    color: theme.errorColor,
+                },
+                ".diagnostic-row + .diagnostic-row": {
+                    borderTopColor: theme.borderColor,
+                },
+            }),
+            EditorView.baseTheme({
+                ".cm-lint-marker-info": {
+                    display: "none",
+                },
+                ".cm-status-bar": {
+                    display: "flex",
+                    flexDirection: "row-reverse",
+                    justifyContent: "flex-end",
+                    padding: "4px 12px",
+                    borderTop: "1px solid",
+                    fontSize: "12px",
+                    height: "16px",
+                },
+                ".cm-status-bar-link": {
+                    textDecoration: "none",
+                    cursor: "pointer",
+                },
+                ".cm-status-bar-link:hover": {
+                    textDecoration: "underline",
+                },
+                ".cm-status-bar-link:hover ~ .cm-status-bar-link": {
+                    textDecoration: "underline",
+                },
+                ".cm-diagnostic-wrapper": {
+                    fontSize: "12px",
+                    lineHeight: "1.3",
+                    padding: "2px",
+                },
+                ".cm-diagnostic-controls": {
+                    marginTop: "4px",
+                    display: "flex",
+                    gap: "6px",
+                    alignItems: "center",
+                },
+                ".cm-diagnostic-label": {
+                    whiteSpace: "nowrap",
+                    fontWeight: "500",
+                    minWidth: "64px",
+                },
+                ".cm-diagnostic-textarea": {
+                    flex: "1",
+                    padding: "3px 6px",
+                    border: "1px solid",
+                    borderRadius: "3px",
+                    fontSize: "12px",
+                    fontFamily: "'JetBrains Mono', monospace",
+                    resize: "none",
+                    overflow: "auto",
+                    boxSizing: "border-box",
+                },
+                ".cm-diagnostic-textarea[readonly]": {
+                    cursor: "default",
+                },
+                ".cm-diagnostic-input": {
+                    padding: "3px 6px",
+                    border: "1px solid",
+                    borderRadius: "3px",
+                    fontSize: "12px",
+                    fontFamily: "'JetBrains Mono', monospace",
+                    boxSizing: "border-box",
+                    width: "100%",
+                },
+                ".cm-diagnostic-button": {
+                    padding: "3px 12px",
+                    border: "1px solid",
+                    borderRadius: "3px",
+                    fontSize: "12px",
+                    fontFamily: "'JetBrains Mono', monospace",
+                    cursor: "pointer",
+                    boxSizing: "border-box",
+                },
+                ".cm-diagnostic-button:active": {
+                    transform: "translateY(1px)",
+                },
+                ".cm-diagnostic-error-message": {
+                    fontSize: "11px",
+                    marginTop: "2px",
+                    fontWeight: "500",
+                },
+                ".cm-timestamp-field": {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "2px",
+                    flex: "1",
+                },
+                ".cm-tooltip-lint .cm-diagnostic": {
+                    padding: "0",
+                    borderTop: "none",
+                    borderLeft: "none",
+                },
+                ".cm-tooltip-lint .cm-diagnostic-error": {
+                    borderLeft: "none",
+                    fontWeight: "bold",
+                },
+                ".cm-tooltip-lint .cm-diagnostic-info": {
+                    borderLeft: "none",
+                },
+                ".diagnostic-row + .diagnostic-row": {
+                    marginTop: "8px",
+                    paddingTop: "8px",
+                    borderTop: "1px solid",
+                },
+            }),
+        ],
+    });
+}
+//# sourceMappingURL=create_editor_state.js.map

package/dist/codemirror/create_editor_state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create_editor_state.js","sourceRoot":"","sources":["../../src/codemirror/create_editor_state.ts"],"names":[],"mappings":"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","sourcesContent":["import { autocompletion, closeBrackets } from \"@codemirror/autocomplete\";\nimport { json as jsonExtension } from \"@codemirror/lang-json\";\nimport { linter, lintGutter } from \"@codemirror/lint\";\nimport { EditorState, Extension } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { tokyoNight } from \"@uiw/codemirror-theme-tokyo-night\";\nimport { tokyoNightDay } from \"@uiw/codemirror-theme-tokyo-night-day\";\nimport { basicSetup } from \"codemirror\";\nimport { makeJsonTemplate } from \"../json/to_json\";\nimport type { Json, RecordDefinition, TypeDefinition } from \"../json/types\";\nimport { enterKeyHandler } from \"./enter_key_handler\";\nimport { jsonCompletion } from \"./json_completion\";\nimport { jsonLinter } from \"./json_linter\";\nimport { debouncedJsonParser } from \"./json_state\";\nimport { statusBar } from \"./status_bar\";\n\nexport type CreateEditorStateParams = {\n  schema: TypeDefinition;\n  readOnly?: true;\n  json?: Json;\n  theme?: \"tokyo-night\" | \"tokyo-night-day\" | CustomTheme;\n};\n\nexport function createEditorState({\n  schema,\n  readOnly,\n  json,\n  theme,\n}: CreateEditorStateParams): EditorState {\n  const idToRecordDef: { [id: string]: RecordDefinition } = {};\n  for (const record of schema.records) {\n    idToRecordDef[record.id] = record;\n  }\n  const content = json ?? makeJsonTemplate(schema.type, idToRecordDef);\n\n  switch (theme) {\n    case undefined:\n    case \"tokyo-night\": {\n      theme = {\n        backgroundColor: \"#1a1b26\",\n        lighterBgColor: \"#1f2335\",\n        borderColor: \"#414868\",\n        foregroundColor: \"#c0caf5\",\n        accentColor: \"#7aa2f7\",\n        errorColor: \"#f7768e\",\n        selectionColor: \"#515c7e40\",\n        themeExtension: tokyoNight,\n      };\n      break;\n    }\n    case \"tokyo-night-day\": {\n      theme = {\n        backgroundColor: \"#d5d6db\",\n        lighterBgColor: \"#e1e2e7\",\n        borderColor: \"#adb0bb\",\n        foregroundColor: \"#3760bf\",\n        accentColor: \"#2e7de9\",\n        errorColor: \"#f52a65\",\n        selectionColor: \"#3760bf33\",\n        themeExtension: tokyoNightDay,\n      };\n      break;\n    }\n  }\n\n  return EditorState.create({\n    doc: JSON.stringify(content, null, 2),\n    extensions: [\n      EditorState.readOnly.of(!!readOnly),\n      enterKeyHandler(schema),\n      basicSetup,\n      EditorState.languageData.of(() => [\n        {\n          closeBrackets: { before: \",]}\" },\n        },\n      ]),\n      closeBrackets(),\n      theme.themeExtension ?? [],\n      jsonExtension(),\n      debouncedJsonParser(schema),\n      linter(jsonLinter(readOnly ? \"read-only\" : \"editable\")),\n      autocompletion({\n        override: [jsonCompletion(schema)],\n      }),\n      lintGutter(),\n      statusBar(),\n      EditorView.theme({\n        \"&\": {\n          fontSize: \"14px\",\n          height: \"100%\",\n        },\n        \".cm-scroller\": {\n          fontFamily: \"'JetBrains Mono', monospace\",\n          overflow: \"auto\",\n        },\n        \".cm-lintRange-info\": {\n          backgroundImage: \"none\",\n        },\n        \".cm-lintRange-info:hover\": {\n          backgroundColor: theme.selectionColor,\n        },\n        \".cm-lintRange-error\": {\n          backgroundImage: \"none\",\n          borderBottom: `3px solid ${theme.errorColor}`,\n        },\n        \".cm-tooltip-hover\": {\n          backgroundColor: theme.lighterBgColor,\n          border: `1px solid ${theme.borderColor}`,\n          borderRadius: \"4px\",\n          padding: \"8px 12px\",\n          boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.5)\",\n          fontSize: \"14px\",\n          lineHeight: \"1.4\",\n          color: theme.foregroundColor,\n        },\n        \".cm-tooltip.cm-tooltip-lint\": {\n          backgroundColor: theme.lighterBgColor,\n          border: `1px solid ${theme.borderColor}`,\n          borderRadius: \"4px\",\n          padding: \"8px 12px\",\n          boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.5)\",\n          fontSize: \"14px\", // Ensure consistency\n          color: theme.foregroundColor,\n        },\n        \".cm-tooltip-lint .cm-diagnostic-error\": {\n          fontWeight: \"bold\",\n          color: theme.errorColor,\n        },\n        \".cm-status-bar\": {\n          backgroundColor: theme.lighterBgColor,\n          borderTopColor: theme.borderColor,\n          color: theme.accentColor,\n        },\n        \".cm-diagnostic-textarea\": {\n          backgroundColor: theme.lighterBgColor,\n          borderColor: theme.borderColor,\n          color: theme.foregroundColor,\n        },\n        \".cm-diagnostic-textarea[readonly]\": {\n          backgroundColor: theme.backgroundColor,\n        },\n        \".cm-diagnostic-input\": {\n          backgroundColor: theme.lighterBgColor,\n          borderColor: theme.borderColor,\n          color: theme.foregroundColor,\n        },\n        \".cm-diagnostic-button\": {\n          backgroundColor: theme.lighterBgColor,\n          borderColor: theme.borderColor,\n          color: theme.foregroundColor,\n        },\n        \".cm-diagnostic-button:hover\": {\n          backgroundColor: theme.borderColor,\n        },\n        \".cm-diagnostic-error-message\": {\n          color: theme.errorColor,\n        },\n        \".diagnostic-row + .diagnostic-row\": {\n          borderTopColor: theme.borderColor,\n        },\n      }),\n      EditorView.baseTheme({\n        \".cm-lint-marker-info\": {\n          display: \"none\",\n        },\n        \".cm-status-bar\": {\n          display: \"flex\",\n          flexDirection: \"row-reverse\",\n          justifyContent: \"flex-end\",\n          padding: \"4px 12px\",\n          borderTop: \"1px solid\",\n          fontSize: \"12px\",\n          height: \"16px\",\n        },\n        \".cm-status-bar-link\": {\n          textDecoration: \"none\",\n          cursor: \"pointer\",\n        },\n        \".cm-status-bar-link:hover\": {\n          textDecoration: \"underline\",\n        },\n        \".cm-status-bar-link:hover ~ .cm-status-bar-link\": {\n          textDecoration: \"underline\",\n        },\n        \".cm-diagnostic-wrapper\": {\n          fontSize: \"12px\",\n          lineHeight: \"1.3\",\n          padding: \"2px\",\n        },\n        \".cm-diagnostic-controls\": {\n          marginTop: \"4px\",\n          display: \"flex\",\n          gap: \"6px\",\n          alignItems: \"center\",\n        },\n        \".cm-diagnostic-label\": {\n          whiteSpace: \"nowrap\",\n          fontWeight: \"500\",\n          minWidth: \"64px\",\n        },\n        \".cm-diagnostic-textarea\": {\n          flex: \"1\",\n          padding: \"3px 6px\",\n          border: \"1px solid\",\n          borderRadius: \"3px\",\n          fontSize: \"12px\",\n          fontFamily: \"'JetBrains Mono', monospace\",\n          resize: \"none\",\n          overflow: \"auto\",\n          boxSizing: \"border-box\",\n        },\n        \".cm-diagnostic-textarea[readonly]\": {\n          cursor: \"default\",\n        },\n        \".cm-diagnostic-input\": {\n          padding: \"3px 6px\",\n          border: \"1px solid\",\n          borderRadius: \"3px\",\n          fontSize: \"12px\",\n          fontFamily: \"'JetBrains Mono', monospace\",\n          boxSizing: \"border-box\",\n          width: \"100%\",\n        },\n        \".cm-diagnostic-button\": {\n          padding: \"3px 12px\",\n          border: \"1px solid\",\n          borderRadius: \"3px\",\n          fontSize: \"12px\",\n          fontFamily: \"'JetBrains Mono', monospace\",\n          cursor: \"pointer\",\n          boxSizing: \"border-box\",\n        },\n        \".cm-diagnostic-button:active\": {\n          transform: \"translateY(1px)\",\n        },\n        \".cm-diagnostic-error-message\": {\n          fontSize: \"11px\",\n          marginTop: \"2px\",\n          fontWeight: \"500\",\n        },\n        \".cm-timestamp-field\": {\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"2px\",\n          flex: \"1\",\n        },\n        \".cm-tooltip-lint .cm-diagnostic\": {\n          padding: \"0\",\n          borderTop: \"none\",\n          borderLeft: \"none\",\n        },\n        \".cm-tooltip-lint .cm-diagnostic-error\": {\n          borderLeft: \"none\",\n          fontWeight: \"bold\",\n        },\n        \".cm-tooltip-lint .cm-diagnostic-info\": {\n          borderLeft: \"none\",\n        },\n        \".diagnostic-row + .diagnostic-row\": {\n          marginTop: \"8px\",\n          paddingTop: \"8px\",\n          borderTop: \"1px solid\",\n        },\n      }),\n    ],\n  });\n}\n\nexport interface CustomTheme {\n  backgroundColor: string;\n  lighterBgColor: string;\n  borderColor: string;\n  foregroundColor: string;\n  accentColor: string;\n  errorColor: string;\n  selectionColor: string;\n  themeExtension?: Extension;\n}\n"]}

package/dist/codemirror/enter_key_handler.d.ts

@@ -0,0 +1,8 @@
+import { Extension } from "@codemirror/state";
+import { TypeDefinition } from "../json/types";
+/**
+ * Triggered when the Enter key is pressed between 2 consecutive curly braces or
+ * square brackets.
+ */
+export declare function enterKeyHandler(schema: TypeDefinition): Extension;
+//# sourceMappingURL=enter_key_handler.d.ts.map

package/dist/codemirror/enter_key_handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enter_key_handler.d.ts","sourceRoot":"","sources":["../../src/codemirror/enter_key_handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAKL,cAAc,EACf,MAAM,eAAe,CAAC;AAGvB;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,cAAc,GAAG,SAAS,CAmGjE"}

package/dist/codemirror/enter_key_handler.js

@@ -0,0 +1,181 @@
+import { keymap } from "@codemirror/view";
+import { makeJsonTemplate } from "../json/to_json";
+import { ensureJsonState } from "./json_state";
+/**
+ * Triggered when the Enter key is pressed between 2 consecutive curly braces or
+ * square brackets.
+ */
+export function enterKeyHandler(schema) {
+    return keymap.of([
+        {
+            key: "Enter",
+            run: (view) => {
+                const { state } = view;
+                const { selection } = state;
+                const { main } = selection;
+                // Get the current cursor position
+                const cursorPos = main.head;
+                const textAround = state.doc.sliceString(cursorPos - 1, cursorPos + 1);
+                if (textAround !== "{}" && textAround !== "[]") {
+                    return false; // Allow default Enter behavior
+                }
+                // Ensure JSON state is up-to-date
+                const jsonState = ensureJsonState(view, schema);
+                const parseResult = jsonState.parseResult;
+                if (!parseResult.value) {
+                    return false;
+                }
+                const jsonValue = parseResult.value;
+                const idToRecordDef = {};
+                for (const record of schema.records) {
+                    idToRecordDef[record.id] = record;
+                }
+                const type = findTypeByLeftBracketPos(jsonValue, cursorPos - 1, idToRecordDef);
+                if (type === null) {
+                    return false;
+                }
+                let codeToInsert;
+                if (type.kind === "array") {
+                    codeToInsert = JSON.stringify(makeJsonTemplate(type.value.item, idToRecordDef), null, 2);
+                }
+                else if (type.kind === "record") {
+                    const recordDef = idToRecordDef[type.value];
+                    if (recordDef.kind === "struct") {
+                        codeToInsert = JSON.stringify(makeJsonTemplate(type, idToRecordDef), null, 2);
+                        if (codeToInsert === "{}") {
+                            return false;
+                        }
+                        // Remove the curly brackets at the start and end of the string and
+                        // unindent each line.
+                        codeToInsert = codeToInsert
+                            .split("\n")
+                            .slice(1, -1)
+                            .map((line) => line.substring(2))
+                            .join("\n");
+                    }
+                    else {
+                        // Enum
+                        codeToInsert = ['"kind": "",', '"value": {}'].join("\n");
+                    }
+                }
+                else if (type.kind === "timestamp") {
+                    codeToInsert =
+                        '"unix_millis": 0,\n"formatted": "1970-01-01T00:00:00.000Z"';
+                }
+                else {
+                    const _ = type;
+                    throw new Error(_);
+                }
+                // Indent the code to insert based on the current line's indentation
+                const lineIndentation = getLineIndentation(state.doc.toString(), cursorPos - 1);
+                codeToInsert = indent(codeToInsert, "  " + lineIndentation);
+                codeToInsert = `\n${codeToInsert}\n${lineIndentation}`;
+                // Apply the transaction
+                view.dispatch({
+                    changes: {
+                        from: cursorPos,
+                        to: cursorPos,
+                        insert: codeToInsert,
+                    },
+                    // Move cursor to the end of the inserted text
+                    selection: { anchor: cursorPos + codeToInsert.length },
+                });
+                return true; // Prevent default Enter behavior
+            },
+        },
+    ]);
+}
+function findTypeByLeftBracketPos(jsonValue, leftBracketPos, idToRecordDef) {
+    let { expectedType } = jsonValue;
+    if (!expectedType) {
+        return null;
+    }
+    if (expectedType.kind === "optional") {
+        expectedType = expectedType.value;
+    }
+    switch (jsonValue.kind) {
+        case "array": {
+            if (expectedType.kind !== "array") {
+                return null;
+            }
+            if (leftBracketPos === jsonValue.firstToken.start) {
+                // We have a match
+                return expectedType;
+            }
+            // If no match, we can continue searching in the elements.
+            for (const element of jsonValue.values) {
+                if (leftBracketPos < element.firstToken.start) {
+                    return null; // No need to continue (optimization)
+                }
+                const maybeResult = findTypeByLeftBracketPos(element, leftBracketPos, idToRecordDef);
+                if (maybeResult) {
+                    return maybeResult;
+                }
+            }
+            return null;
+        }
+        case "object": {
+            if (expectedType.kind === "primitive" &&
+                expectedType.value === "timestamp" &&
+                leftBracketPos === jsonValue.firstToken.start) {
+                return { kind: "timestamp" };
+            }
+            if (expectedType.kind !== "record") {
+                return null;
+            }
+            if (leftBracketPos === jsonValue.firstToken.start) {
+                // We have a match
+                return expectedType;
+            }
+            // If no match, we can continue searching in the values.
+            const recordDef = idToRecordDef[expectedType.value];
+            if (recordDef.kind === "struct") {
+                for (const keyValue of Object.values(jsonValue.keyValues)) {
+                    const maybeResult = findTypeByLeftBracketPos(keyValue.value, leftBracketPos, idToRecordDef);
+                    if (maybeResult) {
+                        return maybeResult;
+                    }
+                }
+            }
+            else {
+                const valueKv = jsonValue.keyValues["value"];
+                if (valueKv) {
+                    const maybeResult = findTypeByLeftBracketPos(valueKv.value, leftBracketPos, idToRecordDef);
+                    if (maybeResult) {
+                        return maybeResult;
+                    }
+                }
+            }
+            return null;
+        }
+        case "literal": {
+            return null;
+        }
+    }
+}
+/** Returns the indentation at the line containing `position`. */
+function getLineIndentation(text, position) {
+    if (position < 0 || position >= text.length) {
+        return "";
+    }
+    // Find the start of the line containing the position
+    let lineStart = position;
+    while (lineStart > 0 && text[lineStart - 1] !== "\n") {
+        lineStart--;
+    }
+    // Extract indentation (spaces at the beginning of the line)
+    let indentation = "";
+    let i = lineStart;
+    while (i < text.length && text[i] === " ") {
+        indentation += " ";
+        i++;
+    }
+    return indentation;
+}
+function indent(text, indentation) {
+    return text
+        .split("\n")
+        .map((line) => indentation + line)
+        .join("\n");
+}
+//# sourceMappingURL=enter_key_handler.js.map

package/dist/codemirror/enter_key_handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enter_key_handler.js","sourceRoot":"","sources":["../../src/codemirror/enter_key_handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { Extension } from \"@codemirror/state\";\nimport { EditorView, keymap } from \"@codemirror/view\";\nimport { makeJsonTemplate } from \"../json/to_json\";\nimport {\n  ArrayTypeSignature,\n  JsonValue,\n  RecordDefinition,\n  RecordTypeSignature,\n  TypeDefinition,\n} from \"../json/types\";\nimport { ensureJsonState } from \"./json_state\";\n\n/**\n * Triggered when the Enter key is pressed between 2 consecutive curly braces or\n * square brackets.\n */\nexport function enterKeyHandler(schema: TypeDefinition): Extension {\n  return keymap.of([\n    {\n      key: \"Enter\",\n      run: (view: EditorView): boolean => {\n        const { state } = view;\n        const { selection } = state;\n        const { main } = selection;\n\n        // Get the current cursor position\n        const cursorPos = main.head;\n\n        const textAround = state.doc.sliceString(cursorPos - 1, cursorPos + 1);\n        if (textAround !== \"{}\" && textAround !== \"[]\") {\n          return false; // Allow default Enter behavior\n        }\n\n        // Ensure JSON state is up-to-date\n        const jsonState = ensureJsonState(view, schema);\n        const parseResult = jsonState.parseResult;\n        if (!parseResult.value) {\n          return false;\n        }\n        const jsonValue: JsonValue = parseResult.value;\n\n        const idToRecordDef: { [id: string]: RecordDefinition } = {};\n        for (const record of schema.records) {\n          idToRecordDef[record.id] = record;\n        }\n        const type = findTypeByLeftBracketPos(\n          jsonValue,\n          cursorPos - 1,\n          idToRecordDef,\n        );\n        if (type === null) {\n          return false;\n        }\n\n        let codeToInsert: string;\n        if (type.kind === \"array\") {\n          codeToInsert = JSON.stringify(\n            makeJsonTemplate(type.value.item, idToRecordDef),\n            null,\n            2,\n          );\n        } else if (type.kind === \"record\") {\n          const recordDef = idToRecordDef[type.value];\n          if (recordDef.kind === \"struct\") {\n            codeToInsert = JSON.stringify(\n              makeJsonTemplate(type, idToRecordDef),\n              null,\n              2,\n            );\n            if (codeToInsert === \"{}\") {\n              return false;\n            }\n            // Remove the curly brackets at the start and end of the string and\n            // unindent each line.\n            codeToInsert = codeToInsert\n              .split(\"\\n\")\n              .slice(1, -1)\n              .map((line) => line.substring(2))\n              .join(\"\\n\");\n          } else {\n            // Enum\n            codeToInsert = ['\"kind\": \"\",', '\"value\": {}'].join(\"\\n\");\n          }\n        } else if (type.kind === \"timestamp\") {\n          codeToInsert =\n            '\"unix_millis\": 0,\\n\"formatted\": \"1970-01-01T00:00:00.000Z\"';\n        } else {\n          const _: never = type;\n          throw new Error(_);\n        }\n\n        // Indent the code to insert based on the current line's indentation\n        const lineIndentation = getLineIndentation(\n          state.doc.toString(),\n          cursorPos - 1,\n        );\n        codeToInsert = indent(codeToInsert, \"  \" + lineIndentation);\n\n        codeToInsert = `\\n${codeToInsert}\\n${lineIndentation}`;\n\n        // Apply the transaction\n        view.dispatch({\n          changes: {\n            from: cursorPos,\n            to: cursorPos,\n            insert: codeToInsert,\n          },\n          // Move cursor to the end of the inserted text\n          selection: { anchor: cursorPos + codeToInsert.length },\n        });\n\n        return true; // Prevent default Enter behavior\n      },\n    },\n  ]);\n}\n\nfunction findTypeByLeftBracketPos(\n  jsonValue: JsonValue,\n  leftBracketPos: number,\n  idToRecordDef: { [id: string]: RecordDefinition },\n): ArrayTypeSignature | RecordTypeSignature | { kind: \"timestamp\" } | null {\n  let { expectedType } = jsonValue;\n  if (!expectedType) {\n    return null;\n  }\n  if (expectedType.kind === \"optional\") {\n    expectedType = expectedType.value;\n  }\n  switch (jsonValue.kind) {\n    case \"array\": {\n      if (expectedType.kind !== \"array\") {\n        return null;\n      }\n      if (leftBracketPos === jsonValue.firstToken.start) {\n        // We have a match\n        return expectedType;\n      }\n      // If no match, we can continue searching in the elements.\n      for (const element of jsonValue.values) {\n        if (leftBracketPos < element.firstToken.start) {\n          return null; // No need to continue (optimization)\n        }\n        const maybeResult = findTypeByLeftBracketPos(\n          element,\n          leftBracketPos,\n          idToRecordDef,\n        );\n        if (maybeResult) {\n          return maybeResult;\n        }\n      }\n      return null;\n    }\n    case \"object\": {\n      if (\n        expectedType.kind === \"primitive\" &&\n        expectedType.value === \"timestamp\" &&\n        leftBracketPos === jsonValue.firstToken.start\n      ) {\n        return { kind: \"timestamp\" };\n      }\n      if (expectedType.kind !== \"record\") {\n        return null;\n      }\n      if (leftBracketPos === jsonValue.firstToken.start) {\n        // We have a match\n        return expectedType;\n      }\n      // If no match, we can continue searching in the values.\n      const recordDef = idToRecordDef[expectedType.value];\n      if (recordDef.kind === \"struct\") {\n        for (const keyValue of Object.values(jsonValue.keyValues)) {\n          const maybeResult = findTypeByLeftBracketPos(\n            keyValue.value,\n            leftBracketPos,\n            idToRecordDef,\n          );\n          if (maybeResult) {\n            return maybeResult;\n          }\n        }\n      } else {\n        const valueKv = jsonValue.keyValues[\"value\"];\n        if (valueKv) {\n          const maybeResult = findTypeByLeftBracketPos(\n            valueKv.value,\n            leftBracketPos,\n            idToRecordDef,\n          );\n          if (maybeResult) {\n            return maybeResult;\n          }\n        }\n      }\n      return null;\n    }\n    case \"literal\": {\n      return null;\n    }\n  }\n}\n\n/** Returns the indentation at the line containing `position`. */\nfunction getLineIndentation(text: string, position: number): string {\n  if (position < 0 || position >= text.length) {\n    return \"\";\n  }\n\n  // Find the start of the line containing the position\n  let lineStart = position;\n  while (lineStart > 0 && text[lineStart - 1] !== \"\\n\") {\n    lineStart--;\n  }\n\n  // Extract indentation (spaces at the beginning of the line)\n  let indentation = \"\";\n  let i = lineStart;\n  while (i < text.length && text[i] === \" \") {\n    indentation += \" \";\n    i++;\n  }\n\n  return indentation;\n}\n\nfunction indent(text: string, indentation: string): string {\n  return text\n    .split(\"\\n\")\n    .map((line) => indentation + line)\n    .join(\"\\n\");\n}\n"]}

package/dist/codemirror/json_completion.d.ts

@@ -0,0 +1,4 @@
+import { CompletionContext, CompletionResult } from "@codemirror/autocomplete";
+import { TypeDefinition } from "../json/types";
+export declare function jsonCompletion(schema: TypeDefinition): (context: CompletionContext) => CompletionResult | null;
+//# sourceMappingURL=json_completion.d.ts.map