@checkstack/ui 0.2.3 → 0.3.0

package/src/components/CodeEditor/languageSupport/enterBehavior.ts

@@ -0,0 +1,35 @@
+/**
+ * Utilities for CodeEditor Enter key behavior.
+ * Extracted for testability.
+ */
+
+/**
+ * Check if the cursor position is between matching brackets or tags.
+ * Used to determine if Enter should "split" the brackets/tags.
+ *
+ * @param textBefore - Text before the cursor position
+ * @param textAfter - Text after the cursor position
+ * @returns true if cursor is between matching brackets/tags
+ *
+ * @example
+ * // Returns true for:
+ * // {|} - cursor between curly braces
+ * // [|] - cursor between square brackets
+ * // <tag>|</tag> - cursor between opening and closing tags
+ */
+export function isBetweenBrackets(
+  textBefore: string,
+  textAfter: string,
+): boolean {
+  const charBefore = textBefore.slice(-1);
+  const charAfter = textAfter.charAt(0);
+
+  return (
+    // Curly braces: {|}
+    (charBefore === "{" && charAfter === "}") ||
+    // Square brackets: [|]
+    (charBefore === "[" && charAfter === "]") ||
+    // XML/HTML tags: <tag>|</tag>
+    (charBefore === ">" && charAfter === "<" && textAfter.startsWith("</"))
+  );
+}

package/src/components/CodeEditor/languageSupport/index.ts

@@ -0,0 +1,22 @@
+export type { LanguageSupport, DecorationRange } from "./types";
+export {
+  jsonLanguageSupport,
+  isValidJsonTemplatePosition,
+  calculateJsonIndentation,
+} from "./json";
+export {
+  yamlLanguageSupport,
+  isValidYamlTemplatePosition,
+  calculateYamlIndentation,
+} from "./yaml";
+export {
+  xmlLanguageSupport,
+  isValidXmlTemplatePosition,
+  calculateXmlIndentation,
+} from "./xml";
+export {
+  markdownLanguageSupport,
+  isValidMarkdownTemplatePosition,
+  calculateMarkdownIndentation,
+} from "./markdown";
+export { isBetweenBrackets } from "./enterBehavior";

package/src/components/CodeEditor/languageSupport/json.test.ts

@@ -0,0 +1,271 @@
+import { describe, expect, it } from "bun:test";
+
+import { isValidJsonTemplatePosition, calculateJsonIndentation } from "./json";
+
+describe("isValidJsonTemplatePosition", () => {
+  describe("string values (inside quotes)", () => {
+    it("returns true when inside a string value after colon", () => {
+      // Cursor at: {"name": "hello|
+      expect(isValidJsonTemplatePosition('{"name": "hello')).toBe(true);
+    });
+
+    it("returns true when at start of string value", () => {
+      // Cursor at: {"name": "|
+      expect(isValidJsonTemplatePosition('{"name": "')).toBe(true);
+    });
+
+    it("returns true for nested object string values", () => {
+      // Cursor at: {"user": {"name": "test|
+      expect(isValidJsonTemplatePosition('{"user": {"name": "test')).toBe(true);
+    });
+
+    it("returns true for string with escaped quotes", () => {
+      // Cursor at: {"msg": "say \"hello|
+      expect(isValidJsonTemplatePosition('{"msg": "say \\"hello')).toBe(true);
+    });
+
+    it("returns true when cursor is in middle of string value", () => {
+      // Cursor at: {"name": "hel|lo"
+      expect(isValidJsonTemplatePosition('{"name": "hel')).toBe(true);
+    });
+  });
+
+  describe("bare number value positions (outside quotes)", () => {
+    it("returns true for bare value position after colon", () => {
+      // Cursor at: {"count": |
+      // This is what the autocomplete will check (text BEFORE the {{ starts)
+      expect(isValidJsonTemplatePosition('{"count": ')).toBe(true);
+    });
+
+    it("returns true with auto-closed brackets (text before first {)", () => {
+      // When user types { in value position, editor auto-inserts }
+      // But the autocomplete checks text BEFORE the {{ pattern
+      // So it would check: {"count":
+      expect(isValidJsonTemplatePosition('{"count": ')).toBe(true);
+    });
+
+    it("returns false when {{ already typed (looks like objects to parser)", () => {
+      // This function itself returns false for {{ because it looks like objects
+      // BUT the autocomplete logic uses textBeforeTemplate which excludes {{
+      expect(isValidJsonTemplatePosition('{"count": {{')).toBe(false);
+    });
+
+    it("returns true for nested object bare value", () => {
+      // Cursor at: {"data": {"count": |
+      expect(isValidJsonTemplatePosition('{"data": {"count": ')).toBe(true);
+    });
+  });
+
+  describe("array element positions", () => {
+    it("returns true at start of array", () => {
+      // Cursor at: [|
+      expect(isValidJsonTemplatePosition("[")).toBe(true);
+    });
+
+    it("returns true inside array string element", () => {
+      // Cursor at: ["hello|
+      expect(isValidJsonTemplatePosition('["hello')).toBe(true);
+    });
+
+    it("returns true for bare array element position", () => {
+      // Cursor at: [|
+      expect(isValidJsonTemplatePosition("[ ")).toBe(true);
+    });
+
+    it("returns true after comma in array (value position)", () => {
+      // Cursor at: [1, |
+      expect(isValidJsonTemplatePosition("[1, ")).toBe(true);
+    });
+
+    it("returns true in nested array", () => {
+      // Cursor at: [[|
+      expect(isValidJsonTemplatePosition("[[")).toBe(true);
+    });
+
+    it("returns true for array in object value", () => {
+      // Cursor at: {"items": [|
+      expect(isValidJsonTemplatePosition('{"items": [')).toBe(true);
+    });
+  });
+
+  describe("invalid positions (keys and structural)", () => {
+    it("returns false at start of object (key position)", () => {
+      // Cursor at: {|
+      expect(isValidJsonTemplatePosition("{")).toBe(false);
+    });
+
+    it("returns false for property key position", () => {
+      // Cursor at: {"|
+      expect(isValidJsonTemplatePosition('{"')).toBe(true); // Inside quotes counts
+    });
+
+    it("returns false after comma in object (key position)", () => {
+      // Cursor at: {"a": 1, |
+      expect(isValidJsonTemplatePosition('{"a": 1, ')).toBe(false);
+    });
+
+    it("returns false after closing brace", () => {
+      // Cursor at: {"a": 1}|
+      expect(isValidJsonTemplatePosition('{"a": 1}')).toBe(false);
+    });
+
+    it("returns false after closing bracket", () => {
+      // Cursor at: [1, 2]|
+      expect(isValidJsonTemplatePosition("[1, 2]")).toBe(false);
+    });
+
+    it("returns false for empty string", () => {
+      expect(isValidJsonTemplatePosition("")).toBe(false);
+    });
+
+    it("returns false for just whitespace", () => {
+      expect(isValidJsonTemplatePosition("   ")).toBe(false);
+    });
+  });
+
+  describe("complex nested structures", () => {
+    it("handles deeply nested objects correctly", () => {
+      // Valid: inside string value in nested structure
+      expect(isValidJsonTemplatePosition('{"a": {"b": {"c": "test')).toBe(true);
+    });
+
+    it("handles mixed arrays and objects", () => {
+      // Valid: inside array that's a value
+      expect(isValidJsonTemplatePosition('{"items": [{"name": "test')).toBe(
+        true,
+      );
+    });
+
+    it("handles array of objects - key position after comma", () => {
+      // Invalid: after comma inside object (key position)
+      expect(isValidJsonTemplatePosition('[{"a": 1}, {"')).toBe(true); // Inside quotes
+    });
+
+    it("handles array of objects - after object close", () => {
+      // This is after the comma in array, which IS a value position
+      expect(isValidJsonTemplatePosition('[{"a": 1}, ')).toBe(true);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("handles colon inside string correctly", () => {
+      // The colon is inside the string, not a separator
+      expect(isValidJsonTemplatePosition('{"url": "http:')).toBe(true);
+    });
+
+    it("handles multiple colons", () => {
+      expect(isValidJsonTemplatePosition('{"a": 1, "b": ')).toBe(true);
+    });
+
+    it("handles string value followed by comma correctly", () => {
+      // After the comma in an object, we're in key position
+      expect(isValidJsonTemplatePosition('{"a": "1", ')).toBe(false);
+    });
+
+    it("handles incomplete structures", () => {
+      expect(isValidJsonTemplatePosition('{"a')).toBe(true); // Inside key string
+    });
+  });
+});
+
+describe("calculateJsonIndentation", () => {
+  const INDENT_UNIT = 2;
+
+  describe("basic indentation", () => {
+    it("returns 0 for empty string", () => {
+      expect(calculateJsonIndentation("", INDENT_UNIT)).toBe(0);
+    });
+
+    it("returns indentUnit after opening brace", () => {
+      expect(calculateJsonIndentation("{", INDENT_UNIT)).toBe(INDENT_UNIT);
+    });
+
+    it("returns indentUnit after opening bracket", () => {
+      expect(calculateJsonIndentation("[", INDENT_UNIT)).toBe(INDENT_UNIT);
+    });
+
+    it("returns 0 after closed object", () => {
+      expect(calculateJsonIndentation("{}", INDENT_UNIT)).toBe(0);
+    });
+
+    it("returns 0 after closed array", () => {
+      expect(calculateJsonIndentation("[]", INDENT_UNIT)).toBe(0);
+    });
+  });
+
+  describe("nested structures", () => {
+    it("returns 2 * indentUnit for nested object", () => {
+      expect(calculateJsonIndentation('{"a": {', INDENT_UNIT)).toBe(
+        2 * INDENT_UNIT,
+      );
+    });
+
+    it("returns 2 * indentUnit for nested array", () => {
+      expect(calculateJsonIndentation('{"items": [', INDENT_UNIT)).toBe(
+        2 * INDENT_UNIT,
+      );
+    });
+
+    it("calculates correct depth for complex nesting", () => {
+      // {"a": {"b": [{"c":
+      expect(calculateJsonIndentation('{"a": {"b": [{"c": ', INDENT_UNIT)).toBe(
+        4 * INDENT_UNIT,
+      );
+    });
+  });
+
+  describe("template handling (regression tests)", () => {
+    it("ignores {{ template opening braces", () => {
+      // Template {{ should NOT increase depth
+      expect(calculateJsonIndentation('{"foo": {{', INDENT_UNIT)).toBe(
+        INDENT_UNIT,
+      );
+    });
+
+    it("ignores }} template closing braces", () => {
+      // Template }} should NOT decrease depth
+      expect(
+        calculateJsonIndentation('{"foo": {{payload.title}}', INDENT_UNIT),
+      ).toBe(INDENT_UNIT);
+    });
+
+    it("maintains correct indentation after template value", () => {
+      // After a complete template, depth should still be 1 (inside the object)
+      expect(
+        calculateJsonIndentation('{"foo": {{payload.title}},\n', INDENT_UNIT),
+      ).toBe(INDENT_UNIT);
+    });
+
+    it("handles template followed by more properties", () => {
+      // Cursor after template value, ready for next property
+      const text = `{
+  "foo": "bar",
+  "bar": {{payload.title}},
+`;
+      expect(calculateJsonIndentation(text, INDENT_UNIT)).toBe(INDENT_UNIT);
+    });
+
+    it("handles multiple templates in same object", () => {
+      const text = `{
+  "a": {{payload.a}},
+  "b": {{payload.b}},
+`;
+      expect(calculateJsonIndentation(text, INDENT_UNIT)).toBe(INDENT_UNIT);
+    });
+  });
+
+  describe("string handling", () => {
+    it("ignores braces inside strings", () => {
+      // Braces inside strings should not affect depth
+      expect(calculateJsonIndentation('{"msg": "hello {"', INDENT_UNIT)).toBe(
+        INDENT_UNIT,
+      );
+    });
+
+    it("ignores template-like patterns inside strings", () => {
+      expect(
+        calculateJsonIndentation('{"msg": "use {{var}}"', INDENT_UNIT),
+      ).toBe(INDENT_UNIT);
+    });
+  });
+});

package/src/components/CodeEditor/languageSupport/json.ts

@@ -0,0 +1,240 @@
+import { json } from "@codemirror/lang-json";
+import { Decoration } from "@codemirror/view";
+import type { LanguageSupport, DecorationRange } from "./types";
+
+// Decoration marks for JSON syntax highlighting using inline styles
+// (higher specificity than Lezer parser's CSS classes)
+const jsonStringMark = Decoration.mark({
+  attributes: { style: "color: hsl(142.1, 76.2%, 36.3%)" },
+});
+const jsonPropertyMark = Decoration.mark({
+  attributes: { style: "color: hsl(280, 65%, 60%)" },
+});
+const jsonNumberMark = Decoration.mark({
+  attributes: { style: "color: hsl(217.2, 91.2%, 59.8%)" },
+});
+const jsonKeywordMark = Decoration.mark({
+  attributes: { style: "color: hsl(280, 65%, 60%)" },
+});
+const templateMark = Decoration.mark({
+  attributes: { style: "color: hsl(190, 70%, 50%); font-weight: 500" },
+});
+
+/**
+ * Check if cursor is in a valid JSON template position.
+ * Returns true if:
+ * 1. Inside a string value (for string templates like "{{payload.name}}")
+ * 2. In a value position after a colon but outside quotes (for number templates like {{payload.count}})
+ * 3. Inside an array element position
+ *
+ * @internal Exported for testing
+ */
+export function isValidJsonTemplatePosition(text: string): boolean {
+  let insideString = false;
+  let inValuePosition = false;
+  // Stack to track object/array nesting: 'o' for object, 'a' for array
+  const nestingStack: ("o" | "a")[] = [];
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    const prevChar = i > 0 ? text[i - 1] : "";
+
+    if (char === '"' && prevChar !== "\\") {
+      insideString = !insideString;
+    } else if (!insideString) {
+      switch (char) {
+        case ":": {
+          inValuePosition = true;
+          break;
+        }
+        case ",": {
+          // After comma: in arrays we stay in value position, in objects we go to key position
+          const currentContext = nestingStack.at(-1);
+          inValuePosition = currentContext === "a";
+          break;
+        }
+        case "{": {
+          // Start of object - next is a key position, not a value
+          nestingStack.push("o");
+          inValuePosition = false;
+          break;
+        }
+        case "[": {
+          // Start of array - next is a value position
+          nestingStack.push("a");
+          inValuePosition = true;
+          break;
+        }
+        case "}": {
+          nestingStack.pop();
+          inValuePosition = false;
+          break;
+        }
+        case "]": {
+          nestingStack.pop();
+          inValuePosition = false;
+          break;
+        }
+      }
+    }
+  }
+
+  // Valid if inside a string OR in a value position (for bare number templates)
+  return insideString || inValuePosition;
+}
+
+/**
+ * Build comprehensive JSON + template decorations.
+ * This uses regex-based matching to apply consistent syntax highlighting
+ * that won't be confused by template expressions.
+ */
+function buildJsonDecorations(doc: string): DecorationRange[] {
+  const ranges: DecorationRange[] = [];
+
+  // Match templates first (highest priority)
+  const templateRegex = /\{\{[\w.[\]]*\}\}/g;
+  let match;
+  while ((match = templateRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: templateMark,
+    });
+  }
+
+  // Match property names: "key":
+  const propertyRegex = /"([^"\\]|\\.)*"\s*:/g;
+  while ((match = propertyRegex.exec(doc)) !== null) {
+    // Only highlight the string part, not the colon
+    const colonPos = match[0].lastIndexOf(":");
+    ranges.push({
+      from: match.index,
+      to: match.index + colonPos,
+      decoration: jsonPropertyMark,
+    });
+  }
+
+  // Match string values (strings NOT followed by colon)
+  const stringRegex = /"([^"\\]|\\.)*"/g;
+  while ((match = stringRegex.exec(doc)) !== null) {
+    // Check if this is a property (followed by :) - skip if so
+    const afterMatch = doc.slice(match.index + match[0].length).match(/^\s*:/);
+    if (!afterMatch) {
+      ranges.push({
+        from: match.index,
+        to: match.index + match[0].length,
+        decoration: jsonStringMark,
+      });
+    }
+  }
+
+  // Match numbers
+  const numberRegex = /-?\d+\.?\d*(?:[eE][+-]?\d+)?/g;
+  while ((match = numberRegex.exec(doc)) !== null) {
+    // Make sure it's not inside a string or template
+    const before = doc.slice(0, match.index);
+    const inString = (before.match(/"/g) || []).length % 2 === 1;
+    const inTemplate =
+      before.lastIndexOf("{{") > before.lastIndexOf("}}") &&
+      before.includes("{{");
+    if (!inString && !inTemplate) {
+      ranges.push({
+        from: match.index,
+        to: match.index + match[0].length,
+        decoration: jsonNumberMark,
+      });
+    }
+  }
+
+  // Match keywords: true, false, null
+  const keywordRegex = /\b(true|false|null)\b/g;
+  while ((match = keywordRegex.exec(doc)) !== null) {
+    const before = doc.slice(0, match.index);
+    const inString = (before.match(/"/g) || []).length % 2 === 1;
+    if (!inString) {
+      ranges.push({
+        from: match.index,
+        to: match.index + match[0].length,
+        decoration: jsonKeywordMark,
+      });
+    }
+  }
+
+  // Sort by position (must be in order for RangeSetBuilder)
+  ranges.sort((a, b) => a.from - b.from || a.to - b.to);
+
+  // Remove overlaps (templates take priority since they're added first)
+  const filtered: DecorationRange[] = [];
+  for (const range of ranges) {
+    const overlaps = filtered.some(
+      (existing) =>
+        (range.from >= existing.from && range.from < existing.to) ||
+        (range.to > existing.from && range.to <= existing.to),
+    );
+    if (!overlaps) {
+      filtered.push(range);
+    }
+  }
+
+  return filtered;
+}
+
+/**
+ * Calculate indentation for JSON, properly handling template expressions.
+ * Counts structural { and [ while ignoring {{ template braces.
+ * @internal Exported for testing
+ */
+export function calculateJsonIndentation(
+  textBefore: string,
+  indentUnit: number,
+): number {
+  let depth = 0;
+  let insideString = false;
+  let i = 0;
+
+  while (i < textBefore.length) {
+    const char = textBefore[i];
+    const nextChar = i < textBefore.length - 1 ? textBefore[i + 1] : "";
+    const prevChar = i > 0 ? textBefore[i - 1] : "";
+
+    // Handle string boundaries
+    if (char === '"' && prevChar !== "\\") {
+      insideString = !insideString;
+      i++;
+      continue;
+    }
+
+    if (!insideString) {
+      // Skip template braces {{ and }}
+      if (char === "{" && nextChar === "{") {
+        i += 2;
+        continue;
+      }
+      if (char === "}" && nextChar === "}") {
+        i += 2;
+        continue;
+      }
+
+      // Count structural braces
+      if (char === "{" || char === "[") {
+        depth++;
+      } else if (char === "}" || char === "]") {
+        depth = Math.max(0, depth - 1);
+      }
+    }
+
+    i++;
+  }
+
+  return depth * indentUnit;
+}
+
+/**
+ * JSON language support for CodeEditor with template expression handling.
+ */
+export const jsonLanguageSupport: LanguageSupport = {
+  extension: json(),
+  buildDecorations: buildJsonDecorations,
+  isValidTemplatePosition: isValidJsonTemplatePosition,
+  calculateIndentation: calculateJsonIndentation,
+};