skir-codemirror-plugin 0.9.0

package/src/codemirror/json_completion.ts

@@ -0,0 +1,182 @@
+import { CompletionContext, CompletionResult } from "@codemirror/autocomplete";
+import {
+  JsonObject,
+  JsonValue,
+  RecordDefinition,
+  Segment,
+  StructDefinition,
+  TypeDefinition,
+} from "../json/types";
+import { ensureJsonState, jsonStateField } from "./json_state";
+
+export function jsonCompletion(
+  schema: TypeDefinition,
+): (context: CompletionContext) => CompletionResult | null {
+  // Index record definitions by record id.
+  const idToRecordDef: { [id: string]: RecordDefinition } = {};
+  for (const record of schema.records) {
+    idToRecordDef[record.id] = record;
+  }
+
+  function doCompleteJson(
+    jsonValue: JsonValue,
+    position: number,
+  ): CompletionResult | null {
+    if (!inSegment(position, jsonValue.segment)) {
+      return null;
+    }
+    const { expectedType } = jsonValue;
+    if (!expectedType) {
+      return null;
+    }
+    const actualType =
+      expectedType.kind === "optional" ? expectedType.value : expectedType;
+    void actualType;
+    switch (jsonValue.kind) {
+      case "array": {
+        if (expectedType.kind !== "array") {
+          return null;
+        }
+        for (const element of jsonValue.values) {
+          if (position < element.firstToken.start) {
+            return null; // No need to continue (optimization)
+          }
+          const maybeResult = doCompleteJson(element, position);
+          if (maybeResult) {
+            return maybeResult;
+          }
+        }
+        return null;
+      }
+      case "object": {
+        if (expectedType.kind !== "record") {
+          return null;
+        }
+        const recordDef = idToRecordDef[expectedType.value];
+        if (recordDef.kind === "struct") {
+          for (const key of jsonValue.allKeys) {
+            // First, see if the current position is within the key.
+            const { keySegment } = key;
+            if (inSegment(position, keySegment)) {
+              const missingFieldNames = collectMissingFieldNames(
+                jsonValue,
+                recordDef,
+              );
+              return {
+                from: keySegment.start + 1,
+                to: keySegment.end - 1,
+                options: missingFieldNames.map((name) => ({
+                  label: name,
+                })),
+              };
+            }
+            // Then, check the value.
+            const keyValue = jsonValue.keyValues[key.key];
+            if (keyValue) {
+              const maybeResult = doCompleteJson(keyValue.value, position);
+              if (maybeResult) {
+                return maybeResult;
+              }
+            }
+          }
+        } else {
+          const kindKv = jsonValue.keyValues["kind"];
+          if (
+            kindKv &&
+            inSegment(position, kindKv.value.firstToken) &&
+            kindKv.value.kind === "literal" &&
+            kindKv.value.type === "string"
+          ) {
+            const options = recordDef.variants
+              .filter((v) => v.type)
+              .map((v) => ({
+                label: v.name,
+              }));
+            return {
+              from: kindKv.value.firstToken.start + 1,
+              to: kindKv.value.firstToken.end - 1,
+              options: options,
+            };
+          }
+          const valueKv = jsonValue.keyValues["value"];
+          if (valueKv) {
+            const maybeResult = doCompleteJson(valueKv?.value, position);
+            if (maybeResult) {
+              return maybeResult;
+            }
+          }
+        }
+        return null;
+      }
+      case "literal": {
+        if (expectedType.kind !== "record") {
+          return null;
+        }
+        const recordDef = idToRecordDef[expectedType.value];
+        if (recordDef.kind !== "enum") {
+          return null;
+        }
+        const options = recordDef.variants
+          .filter((v) => !v.type)
+          .map((v) => ({
+            label: v.name,
+          }))
+          .concat({
+            label: "UNKNOWN",
+          });
+        return {
+          from: jsonValue.firstToken.start + 1,
+          to: jsonValue.firstToken.end - 1,
+          options: options,
+        };
+      }
+    }
+  }
+
+  function completeJson(context: CompletionContext): CompletionResult | null {
+    const position = context.pos;
+
+    // Ensure JSON state is up-to-date
+    if (!context.view) {
+      return null;
+    }
+
+    // Check if character before cursor is a quote
+    const charBeforeCursor =
+      position > 0 ? context.state.doc.sliceString(position - 1, position) : "";
+    const shouldEnsureState = context.explicit || charBeforeCursor === '"';
+
+    const jsonState = shouldEnsureState
+      ? ensureJsonState(context.view, schema)
+      : context.state.field(jsonStateField, false);
+
+    if (!jsonState) {
+      return null;
+    }
+    const parseResult = jsonState.parseResult;
+    if (!parseResult.value) {
+      return null;
+    }
+    return doCompleteJson(parseResult.value, position);
+  }
+
+  return completeJson;
+}
+
+function inSegment(position: number, segment: Segment): boolean {
+  return position >= segment.start && position < segment.end;
+}
+
+function collectMissingFieldNames(
+  object: JsonObject,
+  recordDef: StructDefinition,
+): string[] {
+  const result: string[] = [];
+  for (const field of recordDef.fields) {
+    if (object.keyValues[field.name]) {
+      continue;
+    }
+    result.push(field.name);
+  }
+  return result;
+}

package/src/codemirror/json_linter.ts

@@ -0,0 +1,358 @@
+import { Diagnostic } from "@codemirror/lint";
+import { EditorView } from "@codemirror/view";
+import { Hint, JsonError, JsonLiteral, TypeHint } from "../json/types";
+import { ensureJsonState, jsonStateField } from "./json_state";
+
+export function jsonLinter(
+  editable: "editable" | "read-only",
+): (view: EditorView) => Diagnostic[] {
+  function lintJson(view: EditorView): Diagnostic[] {
+    const jsonState = view.state.field(jsonStateField, false);
+    if (!jsonState) {
+      return [];
+    }
+
+    const parseResult = jsonState.parseResult;
+    if (parseResult.errors.length) {
+      return parseResult.errors.map(errorToDiagnostic);
+    }
+
+    if (!jsonState.validationResult) {
+      return [];
+    }
+
+    const { errors, hints } = jsonState.validationResult;
+    return errors
+      .map(errorToDiagnostic)
+      .concat(hints.map((hint) => hintToDiagnostic(hint, editable)));
+  }
+
+  return lintJson;
+}
+
+function errorToDiagnostic(error: JsonError): Diagnostic {
+  return {
+    from: error.segment.start,
+    to: error.segment.end,
+    message: error.message,
+    severity: "error",
+    renderMessage: (): Node => {
+      const wrapper = document.createElement("div");
+      wrapper.className = "cm-diagnostic-wrapper";
+      wrapper.textContent = error.message;
+      return wrapper;
+    },
+  };
+}
+
+function getStringControlRows(
+  view: EditorView,
+  typeHint: TypeHint,
+  value: JsonLiteral,
+  editable: "editable" | "read-only",
+): HTMLDivElement[] {
+  const headerRow = document.createElement("div");
+  headerRow.textContent = typeHint.message as string;
+
+  const jsonCode = value.jsonCode;
+  const parsedValue = JSON.parse(jsonCode) as string;
+
+  const controlsRow = document.createElement("div");
+  controlsRow.className = "cm-diagnostic-controls";
+
+  const label = document.createElement("span");
+  // label.className = "cm-diagnostic-label";
+  label.textContent = "Value:";
+
+  const textarea = document.createElement("textarea");
+  textarea.className = "cm-diagnostic-textarea";
+  textarea.value = parsedValue;
+  textarea.rows = 1;
+  const isReadOnly = editable === "read-only";
+  textarea.readOnly = isReadOnly;
+
+  textarea.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !isReadOnly) {
+      e.preventDefault();
+      const newValue = textarea.value;
+      const newJsonString = JSON.stringify(newValue);
+
+      view.dispatch({
+        changes: {
+          from: typeHint.segment.start,
+          to: typeHint.segment.end,
+          insert: newJsonString,
+        },
+      });
+    }
+  });
+
+  controlsRow.appendChild(label);
+  controlsRow.appendChild(textarea);
+
+  return [headerRow, controlsRow];
+}
+
+function getTimestampControlRows(
+  view: EditorView,
+  typeHint: TypeHint,
+): HTMLDivElement[] {
+  const headerRow = document.createElement("div");
+  headerRow.textContent = typeHint.message as string;
+
+  let unixMillis: number | undefined;
+  {
+    const value = typeHint.valueContext!.value;
+    if (value.kind === "object") {
+      const unixMillisKv = value.keyValues["unix_millis"];
+      if (
+        unixMillisKv &&
+        unixMillisKv.value.kind === "literal" &&
+        unixMillisKv.value.type === "number"
+      ) {
+        unixMillis = JSON.parse(unixMillisKv.value.jsonCode) as number;
+        if (unixMillis < -8640000000000000 || 8640000000000000 < unixMillis) {
+          unixMillis = undefined;
+        }
+      }
+    }
+  }
+
+  // Row 1: unix_millis input
+  const row1 = document.createElement("div");
+  row1.className = "cm-diagnostic-controls";
+
+  const label1 = document.createElement("span");
+  label1.className = "cm-diagnostic-label";
+  label1.textContent = "unix_millis:";
+
+  const field1 = document.createElement("div");
+  field1.className = "cm-timestamp-field";
+
+  const unixMillisInput = document.createElement("input");
+  unixMillisInput.type = "text";
+  unixMillisInput.className = "cm-diagnostic-input";
+  unixMillisInput.value = unixMillis !== undefined ? String(unixMillis) : "";
+
+  const error1 = document.createElement("div");
+  error1.className = "cm-diagnostic-error-message";
+  error1.style.display = "none";
+
+  field1.appendChild(unixMillisInput);
+  field1.appendChild(error1);
+  row1.appendChild(label1);
+  row1.appendChild(field1);
+
+  // Row 2: ISO 8601 date string input
+  const row2 = document.createElement("div");
+  row2.className = "cm-diagnostic-controls";
+
+  const label2 = document.createElement("span");
+  label2.className = "cm-diagnostic-label";
+  label2.textContent = "ISO 8601:";
+
+  const field2 = document.createElement("div");
+  field2.className = "cm-timestamp-field";
+
+  const isoInput = document.createElement("input");
+  isoInput.type = "text";
+  isoInput.className = "cm-diagnostic-input";
+  if (unixMillis !== undefined) {
+    isoInput.value = new Date(unixMillis).toISOString();
+  }
+
+  const error2 = document.createElement("div");
+  error2.className = "cm-diagnostic-error-message";
+  error2.style.display = "none";
+
+  field2.appendChild(isoInput);
+  field2.appendChild(error2);
+  row2.appendChild(label2);
+  row2.appendChild(field2);
+
+  // Row 3: Now button
+  const row3 = document.createElement("div");
+  row3.className = "cm-diagnostic-controls";
+
+  const nowButton = document.createElement("button");
+  nowButton.className = "cm-diagnostic-button";
+  nowButton.textContent = "Now";
+
+  row3.appendChild(nowButton);
+
+  // Helper function to update the editor
+  const updateEditor = (millis: number, formatted: string): void => {
+    const value = typeHint.valueContext!.value;
+
+    // Check if both keys exist in the object
+    if (value.kind === "object") {
+      const unixMillisKv = value.keyValues["unix_millis"];
+      const formattedKv = value.keyValues["formatted"];
+
+      if (unixMillisKv && formattedKv) {
+        // Update both values individually
+        view.dispatch({
+          changes: [
+            {
+              from: unixMillisKv.value.segment.start,
+              to: unixMillisKv.value.segment.end,
+              insert: String(millis),
+            },
+            {
+              from: formattedKv.value.segment.start,
+              to: formattedKv.value.segment.end,
+              insert: JSON.stringify(formatted),
+            },
+          ],
+        });
+
+        return;
+      }
+    }
+
+    // Default behavior: replace the whole object
+    const newJsonString = `{"unix_millis": ${millis}, "formatted": "${formatted}"}`;
+
+    const segment = typeHint.valueContext!.value.segment;
+    view.dispatch({
+      changes: {
+        from: segment.start,
+        to: segment.end,
+        insert: newJsonString,
+      },
+    });
+
+    ensureJsonState(view, (view as any).schema);
+  };
+
+  // Enter key handler for unix_millis input
+  unixMillisInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const value = unixMillisInput.value.trim();
+      const millis = Number(value);
+
+      // Validate
+      if (value === "" || isNaN(millis) || !Number.isInteger(millis)) {
+        error1.textContent = "Must be an integer";
+        error1.style.display = "block";
+        return;
+      }
+
+      if (millis < -8640000000000000 || millis > 8640000000000000) {
+        error1.textContent = "Timestamp out of range";
+        error1.style.display = "block";
+        return;
+      }
+
+      error1.style.display = "none";
+      error2.style.display = "none";
+
+      // Update ISO field and editor
+      const formatted = new Date(millis).toISOString();
+      isoInput.value = formatted;
+      updateEditor(millis, formatted);
+    }
+  });
+
+  // Enter key handler for ISO 8601 input
+  isoInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const value = isoInput.value.trim();
+      const millis = Date.parse(value);
+
+      // Validate
+      if (isNaN(millis)) {
+        error2.textContent = "Invalid ISO 8601 date string";
+        error2.style.display = "block";
+        return;
+      }
+
+      error1.style.display = "none";
+      error2.style.display = "none";
+
+      // Update unix_millis field and editor
+      const formatted = new Date(millis).toISOString();
+      unixMillisInput.value = String(millis);
+      updateEditor(millis, formatted);
+    }
+  });
+
+  // Now button handler
+  nowButton.addEventListener("click", () => {
+    const now = Date.now();
+    const formatted = new Date(now).toISOString();
+
+    unixMillisInput.value = String(now);
+    isoInput.value = formatted;
+    error1.style.display = "none";
+    error2.style.display = "none";
+
+    updateEditor(now, formatted);
+  });
+
+  const controlsRow = document.createElement("div");
+  controlsRow.appendChild(row1);
+  controlsRow.appendChild(row2);
+  controlsRow.appendChild(row3);
+
+  return [headerRow, controlsRow];
+}
+
+function hintToDiagnostic(
+  typeHint: Hint,
+  editable: "editable" | "read-only",
+): Diagnostic {
+  const { message } = typeHint;
+  return {
+    from: typeHint.segment.start,
+    to: typeHint.segment.end,
+    message: "",
+    severity: "info",
+    renderMessage: (view): Node => {
+      const wrapper = document.createElement("div");
+      wrapper.className = "cm-diagnostic-wrapper";
+
+      let rows: HTMLDivElement[];
+      if (
+        (message === "string" || message === "string?") &&
+        typeHint.valueContext &&
+        typeHint.valueContext.value.kind === "literal" &&
+        typeHint.valueContext.value.type === "string"
+      ) {
+        // Render a string editing control for string hints.
+        rows = getStringControlRows(
+          view,
+          typeHint,
+          typeHint.valueContext.value,
+          editable,
+        );
+      } else if (
+        (message === "timestamp" || message === "timestamp?") &&
+        typeHint.valueContext &&
+        typeHint.valueContext.value.kind === "object" &&
+        editable === "editable"
+      ) {
+        // Render a timestamp editing control for timestamp hints.
+        rows = getTimestampControlRows(view, typeHint);
+      } else {
+        // Display the message for non-string types
+        const pieces = typeof message === "string" ? [message] : message;
+        rows = pieces.map((piece) => {
+          const row = document.createElement("div");
+          row.textContent = piece;
+          return row;
+        });
+      }
+
+      for (const row of rows) {
+        row.classList.add("diagnostic-row");
+        wrapper.appendChild(row);
+      }
+
+      return wrapper;
+    },
+    markClass: "",
+  };
+}

package/src/codemirror/json_state.ts

@@ -0,0 +1,170 @@
+import {
+  Extension,
+  StateEffect,
+  StateField,
+  Transaction,
+} from "@codemirror/state";
+import { EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import { parseJsonValue } from "../json/json_parser";
+import { validateSchema } from "../json/schema_validator";
+import type {
+  JsonParseResult,
+  TypeDefinition,
+  ValidationResult,
+} from "../json/types";
+
+export interface JsonState {
+  readonly parseResult: JsonParseResult;
+  readonly validationResult?: ValidationResult;
+  readonly source: string;
+}
+
+const updateJsonState = StateEffect.define<JsonState>();
+
+export const jsonStateField = StateField.define<JsonState | null>({
+  create(): JsonState | null {
+    return null;
+  },
+  update(value, tr): JsonState | null {
+    for (const effect of tr.effects) {
+      if (effect.is(updateJsonState)) {
+        return effect.value;
+      }
+    }
+    return value;
+  },
+});
+
+/**
+ * Ensures the JSON state is up-to-date with the current document.
+ * If the state is stale or missing, triggers an immediate parse and returns the updated state.
+ */
+export function ensureJsonState(
+  view: EditorView,
+  schema: TypeDefinition,
+): JsonState {
+  const currentState = view.state.field(jsonStateField, false);
+  const source = view.state.doc.toString();
+
+  // If the source hasn't changed, return the current state
+  if (currentState && currentState.source === source) {
+    return currentState;
+  }
+
+  // Parse and validate immediately
+  const parseResult = parseJsonValue(source);
+  let validationResult: ValidationResult | undefined;
+  if (parseResult.value) {
+    validationResult = validateSchema(parseResult.value, schema);
+  }
+
+  const newState: JsonState = { parseResult, validationResult, source };
+
+  // Update the state if it's different
+  if (!currentState || currentState !== newState) {
+    view.dispatch({
+      effects: updateJsonState.of(newState),
+    });
+  }
+
+  return newState;
+}
+
+export function debouncedJsonParser(schema: TypeDefinition): Extension[] {
+  return [
+    jsonStateField,
+    ViewPlugin.fromClass(
+      class {
+        timeout: number | null = null;
+        view: EditorView;
+
+        constructor(view: EditorView) {
+          this.view = view;
+          this.scheduleUpdate();
+        }
+
+        update(update: ViewUpdate): void {
+          if (update.docChanged) {
+            const isUndo = update.transactions.some(
+              (tr) =>
+                tr.annotation(Transaction.userEvent) === "undo" ||
+                tr.annotation(Transaction.userEvent) === "redo",
+            );
+            this.scheduleUpdate(isUndo ? "from-undo" : undefined);
+          }
+        }
+
+        scheduleUpdate(fromUndo?: "from-undo"): void {
+          if (this.timeout !== null) {
+            clearTimeout(this.timeout);
+          }
+          this.timeout = window.setTimeout(() => {
+            this.parseJson(fromUndo);
+            this.timeout = null;
+          }, 200);
+        }
+
+        parseJson(fromUndo: "from-undo" | undefined): void {
+          const source = this.view.state.doc.toString();
+          const parseResult = parseJsonValue(source);
+
+          let validationResult: ValidationResult | undefined;
+          if (parseResult.value) {
+            validationResult = validateSchema(parseResult.value, schema);
+          }
+
+          const cursorInsideEdit = (): boolean => {
+            const cursorPos = this.view.state.selection.main.head;
+            return parseResult.edits.some(
+              (edit) =>
+                edit.segment.start <= cursorPos &&
+                cursorPos <= edit.segment.end,
+            );
+          };
+
+          // Apply edits if all these conditions are satisfied:
+          //   - no error
+          //   - the cursor is not inside any of the edited segments, to avoid
+          //       disrupting the user while they're typing
+          //   - the update is not triggered by an undo operation
+          if (
+            !fromUndo &&
+            parseResult.edits.length &&
+            parseResult.errors.length <= 0 &&
+            !cursorInsideEdit()
+          ) {
+            const changes = parseResult.edits.map((edit) => ({
+              from: edit.segment.start,
+              to: edit.segment.end,
+              insert: edit.replacement,
+            }));
+
+            this.view.dispatch({
+              changes,
+              effects: updateJsonState.of({
+                parseResult,
+                validationResult,
+                source,
+              }),
+              scrollIntoView: true,
+            });
+          } else {
+            this.view.dispatch({
+              effects: updateJsonState.of({
+                parseResult,
+                validationResult,
+                source,
+              }),
+            });
+          }
+        }
+
+        destroy(): void {
+          if (this.timeout !== null) {
+            clearTimeout(this.timeout);
+          }
+        }
+      },
+    ),
+  ];
+}