@checkstack/ui 0.2.4 → 0.3.1

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

@@ -0,0 +1,239 @@
+import { describe, expect, it } from "bun:test";
+
+import {
+  isValidXmlTemplatePosition,
+  calculateXmlIndentation,
+} from "./xml-utils";
+
+describe("isValidXmlTemplatePosition", () => {
+  describe("text content positions", () => {
+    it("returns true in text between tags", () => {
+      expect(isValidXmlTemplatePosition("<tag>hello")).toBe(true);
+    });
+
+    it("returns true after opening tag on new line", () => {
+      expect(isValidXmlTemplatePosition("<tag>\n  ")).toBe(true);
+    });
+
+    it("returns true in text with existing template", () => {
+      expect(isValidXmlTemplatePosition("<tag>hello {{name}}")).toBe(true);
+    });
+
+    it("returns true in empty text position", () => {
+      expect(isValidXmlTemplatePosition("<tag>")).toBe(true);
+    });
+  });
+
+  describe("attribute value positions", () => {
+    it("returns true inside double-quoted attribute value", () => {
+      expect(isValidXmlTemplatePosition('<tag attr="')).toBe(true);
+    });
+
+    it("returns true inside single-quoted attribute value", () => {
+      expect(isValidXmlTemplatePosition("<tag attr='")).toBe(true);
+    });
+
+    it("returns true in middle of attribute value", () => {
+      expect(isValidXmlTemplatePosition('<tag attr="hello')).toBe(true);
+    });
+
+    it("returns true in attribute with template", () => {
+      expect(isValidXmlTemplatePosition('<tag attr="{{name}}')).toBe(true);
+    });
+  });
+
+  describe("invalid positions", () => {
+    it("returns false inside tag name", () => {
+      expect(isValidXmlTemplatePosition("<ta")).toBe(false);
+    });
+
+    it("returns false for empty string", () => {
+      expect(isValidXmlTemplatePosition("")).toBe(false);
+    });
+
+    it("returns false in attribute name position", () => {
+      expect(isValidXmlTemplatePosition("<tag at")).toBe(false);
+    });
+
+    it("returns false right after opening bracket", () => {
+      expect(isValidXmlTemplatePosition("<")).toBe(false);
+    });
+  });
+
+  describe("complex nested structures", () => {
+    it("returns true in nested tag text content", () => {
+      expect(isValidXmlTemplatePosition("<root><child>text")).toBe(true);
+    });
+
+    it("returns true in deeply nested text", () => {
+      expect(isValidXmlTemplatePosition("<a><b><c>")).toBe(true);
+    });
+
+    it("returns true after self-closing tag", () => {
+      expect(isValidXmlTemplatePosition("<root><self/>text")).toBe(true);
+    });
+  });
+});
+
+describe("calculateXmlIndentation", () => {
+  const INDENT = 2;
+
+  // ============================================================================
+  // Basic tag indentation
+  // ============================================================================
+  describe("basic tag indentation", () => {
+    it("returns 0 for empty document", () => {
+      expect(calculateXmlIndentation("", INDENT)).toBe(0);
+    });
+
+    it("indents after opening tag (new line)", () => {
+      // User typed "<root>" and pressed Enter
+      expect(calculateXmlIndentation("<root>\n", INDENT)).toBe(INDENT);
+    });
+
+    it("indents when inside an unclosed opening tag", () => {
+      // After an opening tag, depth is 1 even on same line
+      expect(calculateXmlIndentation("<root>", INDENT)).toBe(INDENT);
+    });
+
+    it("returns 0 after self-closing tag", () => {
+      expect(calculateXmlIndentation("<self/>\n", INDENT)).toBe(0);
+    });
+
+    it("returns 0 after closing tag", () => {
+      expect(calculateXmlIndentation("</root>\n", INDENT)).toBe(0);
+    });
+
+    it("returns 0 after complete open-close on same line", () => {
+      expect(calculateXmlIndentation("<tag></tag>\n", INDENT)).toBe(0);
+    });
+  });
+
+  // ============================================================================
+  // Nested structure indentation
+  // ============================================================================
+  describe("nested structure indentation", () => {
+    it("indents to level 2 after nested opening tag", () => {
+      const text = `<root>
+  <child>\n`;
+      expect(calculateXmlIndentation(text, INDENT)).toBe(2 * INDENT);
+    });
+
+    it("maintains level 1 after nested closing tag", () => {
+      const text = `<root>
+  <child></child>\n`;
+      expect(calculateXmlIndentation(text, INDENT)).toBe(INDENT);
+    });
+
+    it("indents to level 3 for deep nesting", () => {
+      const text = `<root>
+  <a>
+    <b>\n`;
+      expect(calculateXmlIndentation(text, INDENT)).toBe(3 * INDENT);
+    });
+
+    it("handles mixed self-closing and regular tags", () => {
+      const text = `<root>
+  <self/>
+  <child>\n`;
+      expect(calculateXmlIndentation(text, INDENT)).toBe(2 * INDENT);
+    });
+  });
+
+  // ============================================================================
+  // Template handling (no interference with structure)
+  // ============================================================================
+  describe("template handling", () => {
+    it("counts depth correctly with template in text content", () => {
+      // Template doesn't affect tag depth counting
+      expect(calculateXmlIndentation("<tag>{{value}}", INDENT)).toBe(INDENT);
+    });
+
+    it("indents after tag even with template content", () => {
+      expect(calculateXmlIndentation("<tag>\n  {{value}}\n", INDENT)).toBe(
+        INDENT,
+      );
+    });
+
+    it("handles template in attribute value", () => {
+      expect(calculateXmlIndentation('<tag attr="{{value}}">\n', INDENT)).toBe(
+        INDENT,
+      );
+    });
+
+    it("handles multiple templates", () => {
+      const text = `<root>
+  <a>{{val1}}</a>
+  <b>{{val2}}</b>\n`;
+      expect(calculateXmlIndentation(text, INDENT)).toBe(INDENT);
+    });
+  });
+
+  // ============================================================================
+  // Edge cases
+  // ============================================================================
+  describe("edge cases", () => {
+    it("handles only newline", () => {
+      expect(calculateXmlIndentation("\n", INDENT)).toBe(0);
+    });
+
+    it("handles multiple newlines", () => {
+      expect(calculateXmlIndentation("\n\n\n", INDENT)).toBe(0);
+    });
+
+    it("handles XML declaration", () => {
+      expect(calculateXmlIndentation('<?xml version="1.0"?>\n', INDENT)).toBe(
+        0,
+      );
+    });
+
+    it("handles tag with attributes", () => {
+      expect(calculateXmlIndentation('<tag attr="value">\n', INDENT)).toBe(
+        INDENT,
+      );
+    });
+
+    it("handles tag with multiple attributes", () => {
+      expect(calculateXmlIndentation('<tag a="1" b="2" c="3">\n', INDENT)).toBe(
+        INDENT,
+      );
+    });
+
+    it("handles CDATA section (counts parent tag)", () => {
+      // CDATA is inside an unclosed tag
+      expect(calculateXmlIndentation("<tag><![CDATA[", INDENT)).toBe(INDENT);
+    });
+
+    it("handles comments", () => {
+      expect(calculateXmlIndentation("<!-- comment -->\n", INDENT)).toBe(0);
+    });
+  });
+
+  // ============================================================================
+  // Real-world document structures
+  // ============================================================================
+  describe("real-world document structures", () => {
+    it("indents HTML-like structure", () => {
+      const text = `<html>
+  <head>
+    <title>Test</title>
+  </head>
+  <body>\n`;
+      expect(calculateXmlIndentation(text, INDENT)).toBe(2 * INDENT);
+    });
+
+    it("handles configuration-style XML", () => {
+      const text = `<config>
+  <database>
+    <host>\n`;
+      expect(calculateXmlIndentation(text, INDENT)).toBe(3 * INDENT);
+    });
+
+    it("handles SOAP-style envelope", () => {
+      const text = `<soap:Envelope>
+  <soap:Body>
+    <Request>\n`;
+      expect(calculateXmlIndentation(text, INDENT)).toBe(3 * INDENT);
+    });
+  });
+});

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

@@ -0,0 +1,116 @@
+import { xml } from "@codemirror/lang-xml";
+import { Decoration } from "@codemirror/view";
+import type { LanguageSupport, DecorationRange } from "./types";
+
+// Re-export pure utils for backwards compatibility
+export {
+  isValidXmlTemplatePosition,
+  calculateXmlIndentation,
+} from "./xml-utils";
+
+// Decoration marks for XML syntax highlighting using inline styles
+const xmlTagMark = Decoration.mark({
+  attributes: { style: "color: hsl(280, 65%, 60%)" },
+});
+const xmlAttrNameMark = Decoration.mark({
+  attributes: { style: "color: hsl(190, 70%, 50%)" },
+});
+const xmlAttrValueMark = Decoration.mark({
+  attributes: { style: "color: hsl(142.1, 76.2%, 36.3%)" },
+});
+const templateMark = Decoration.mark({
+  attributes: { style: "color: hsl(190, 70%, 50%); font-weight: 500" },
+});
+
+/**
+ * Build XML + template decorations.
+ */
+function buildXmlDecorations(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 XML tags (opening and closing)
+  const tagRegex = /<\/?[\w:-]+/g;
+  while ((match = tagRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: xmlTagMark,
+    });
+  }
+
+  // Match closing > and />
+  const closeTagRegex = /\/?>/g;
+  while ((match = closeTagRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: xmlTagMark,
+    });
+  }
+
+  // Match attribute names
+  const attrNameRegex = /\s([\w:-]+)=/g;
+  while ((match = attrNameRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index + 1, // Skip leading space
+      to: match.index + 1 + match[1].length,
+      decoration: xmlAttrNameMark,
+    });
+  }
+
+  // Match attribute values (quoted strings after =)
+  const attrValueRegex = /=(["'])(?:(?!\1)[^\\]|\\.)*\1/g;
+  while ((match = attrValueRegex.exec(doc)) !== null) {
+    // Skip the = but include the quotes
+    ranges.push({
+      from: match.index + 1,
+      to: match.index + match[0].length,
+      decoration: xmlAttrValueMark,
+    });
+  }
+
+  // Sort by position
+  ranges.sort((a, b) => a.from - b.from || a.to - b.to);
+
+  // Remove overlaps (templates take priority)
+  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;
+}
+
+// Import the pure utils for use in the language support object
+import {
+  isValidXmlTemplatePosition,
+  calculateXmlIndentation,
+} from "./xml-utils";
+
+/**
+ * XML language support for CodeEditor with template expression handling.
+ */
+export const xmlLanguageSupport: LanguageSupport = {
+  extension: xml(),
+  buildDecorations: buildXmlDecorations,
+  isValidTemplatePosition: isValidXmlTemplatePosition,
+  calculateIndentation: calculateXmlIndentation,
+};

package/src/components/CodeEditor/languageSupport/yaml-utils.ts

@@ -0,0 +1,101 @@
+/**
+ * Pure utility functions for YAML parsing that don't depend on CodeMirror.
+ * These are extracted to allow testing without triggering CodeMirror's module loading.
+ */
+
+/**
+ * Check if cursor is in a valid YAML template position.
+ * In YAML, templates can appear as values after "key: ".
+ * @internal Exported for testing
+ */
+export function isValidYamlTemplatePosition(text: string): boolean {
+  // Find the current line
+  const lastNewline = text.lastIndexOf("\n");
+  const currentLine = text.slice(lastNewline + 1);
+
+  // Valid positions in YAML:
+  // 1. After a colon and space (value position): "key: |"
+  // 2. Inside a quoted string: 'key: "hello|'
+  // 3. In a list item position: "- |"
+
+  // Check if we're inside a quoted string
+  const singleQuotes = (currentLine.match(/'/g) || []).length;
+  const doubleQuotes = (currentLine.match(/"/g) || []).length;
+  if (singleQuotes % 2 === 1 || doubleQuotes % 2 === 1) {
+    return true;
+  }
+
+  // Check if we're after "key: " (value position)
+  const colonMatch = currentLine.match(/^\s*[\w-]+:\s+/);
+  if (colonMatch) {
+    return true;
+  }
+
+  // Check if we're in a list item position "- "
+  const listMatch = currentLine.match(/^\s*-\s+/);
+  if (listMatch) {
+    return true;
+  }
+
+  // Check if we're after ": " anywhere in the line
+  if (currentLine.includes(": ")) {
+    const afterColon = currentLine.split(": ").slice(1).join(": ");
+    // If we're in the value part (after colon)
+    if (afterColon.length > 0 || currentLine.endsWith(": ")) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Calculate indentation for YAML, properly handling template expressions.
+ * YAML uses indentation-based structure.
+ * @internal Exported for testing
+ */
+export function calculateYamlIndentation(
+  textBefore: string,
+  indentUnit: number,
+): number {
+  const lines = textBefore.split("\n");
+  if (lines.length === 0) return 0;
+
+  // Get the last line (the one we're currently on after Enter)
+  const currentLine = lines.at(-1);
+
+  // If current line is empty or whitespace, look at previous line
+  if (currentLine?.trim().length === 0 && lines.length > 1) {
+    // Find the last non-empty line
+    for (let i = lines.length - 2; i >= 0; i--) {
+      const line = lines[i];
+      if (line.trim().length === 0) continue;
+
+      // Count leading spaces
+      const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
+
+      // If line ends with ":" it's a key that starts a new block
+      if (line.trimEnd().endsWith(":")) {
+        return leadingSpaces + indentUnit;
+      }
+
+      // If line starts with "- " it's a list item
+      if (line.trim().startsWith("-")) {
+        return leadingSpaces + indentUnit;
+      }
+
+      // Otherwise, maintain current indentation
+      return leadingSpaces;
+    }
+  }
+
+  // For non-empty current line, find previous non-empty for context
+  for (let i = lines.length - 1; i >= 0; i--) {
+    const line = lines[i];
+    if (line.trim().length === 0) continue;
+    const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
+    return leadingSpaces;
+  }
+
+  return 0;
+}

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

@@ -0,0 +1,203 @@
+import { describe, expect, it } from "bun:test";
+
+import {
+  isValidYamlTemplatePosition,
+  calculateYamlIndentation,
+} from "./yaml-utils";
+
+describe("isValidYamlTemplatePosition", () => {
+  describe("value positions", () => {
+    it("returns true after 'key: '", () => {
+      expect(isValidYamlTemplatePosition("name: ")).toBe(true);
+    });
+
+    it("returns true after 'key: ' with existing value", () => {
+      expect(isValidYamlTemplatePosition("name: hello")).toBe(true);
+    });
+
+    it("returns true in list item position", () => {
+      expect(isValidYamlTemplatePosition("- ")).toBe(true);
+    });
+
+    it("returns true inside double-quoted string", () => {
+      expect(isValidYamlTemplatePosition('name: "hello')).toBe(true);
+    });
+
+    it("returns true inside single-quoted string", () => {
+      expect(isValidYamlTemplatePosition("name: 'hello")).toBe(true);
+    });
+  });
+
+  describe("invalid positions", () => {
+    it("returns false for key position", () => {
+      expect(isValidYamlTemplatePosition("name")).toBe(false);
+    });
+
+    it("returns false for empty string", () => {
+      expect(isValidYamlTemplatePosition("")).toBe(false);
+    });
+  });
+});
+
+describe("calculateYamlIndentation", () => {
+  const INDENT = 2;
+
+  // ============================================================================
+  // Basic YAML key:value patterns
+  // ============================================================================
+  describe("basic key:value indentation", () => {
+    it("returns 0 for empty document", () => {
+      expect(calculateYamlIndentation("", INDENT)).toBe(0);
+    });
+
+    it("indents after key ending with colon (new line)", () => {
+      // User typed "test:" and pressed Enter
+      // textBefore = "test:\n" (cursor at start of empty new line)
+      expect(calculateYamlIndentation("test:\n", INDENT)).toBe(INDENT);
+    });
+
+    it("indents after key with trailing whitespace", () => {
+      expect(calculateYamlIndentation("test:   \n", INDENT)).toBe(INDENT);
+    });
+
+    it("maintains 0 indent for same-line content after key", () => {
+      // User is typing on the line "test:" without pressing Enter
+      expect(calculateYamlIndentation("test:", INDENT)).toBe(0);
+    });
+
+    it("maintains 0 indent for key:value on same line", () => {
+      expect(calculateYamlIndentation("test: value", INDENT)).toBe(0);
+    });
+  });
+
+  // ============================================================================
+  // Nested object indentation
+  // ============================================================================
+  describe("nested object indentation", () => {
+    it("indents to level 2 after nested key", () => {
+      const text = `parent:
+  child:\n`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(2 * INDENT);
+    });
+
+    it("maintains level 1 after nested key:value", () => {
+      const text = `parent:
+  child: value\n`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(INDENT);
+    });
+
+    it("indents to level 3 for deep nesting", () => {
+      const text = `level1:
+  level2:
+    level3:\n`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(3 * INDENT);
+    });
+
+    it("returns to level 1 after deep nesting with value", () => {
+      const text = `level1:
+  level2:
+    level3: value\n`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(2 * INDENT);
+    });
+  });
+
+  // ============================================================================
+  // List item indentation
+  // ============================================================================
+  describe("list item indentation", () => {
+    it("indents after list item", () => {
+      expect(calculateYamlIndentation("- item\n", INDENT)).toBe(INDENT);
+    });
+
+    it("indents after list item with nested key", () => {
+      const text = `items:
+  - name: test\n`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(2 * INDENT);
+    });
+
+    it("indents after empty list marker", () => {
+      expect(calculateYamlIndentation("-\n", INDENT)).toBe(INDENT);
+    });
+
+    it("handles list with object items", () => {
+      const text = `items:
+  - name: test
+    value: 123\n`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(2 * INDENT);
+    });
+  });
+
+  // ============================================================================
+  // Template handling (no interference with structure)
+  // ============================================================================
+  describe("template handling", () => {
+    it("maintains indentation with template value on same line", () => {
+      expect(calculateYamlIndentation("name: {{value}}", INDENT)).toBe(0);
+    });
+
+    it("indents after key even when value contains template", () => {
+      expect(calculateYamlIndentation("name: {{value}}\n", INDENT)).toBe(0);
+    });
+
+    it("maintains nesting with template in nested value", () => {
+      const text = `parent:
+  child: {{value}}\n`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(INDENT);
+    });
+
+    it("indents after key with template but ending with colon", () => {
+      const text = `parent:
+  child:\n`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(2 * INDENT);
+    });
+  });
+
+  // ============================================================================
+  // Multi-line string handling
+  // ============================================================================
+  describe("multi-line scenarios", () => {
+    it("maintains current indent after blank line", () => {
+      const text = `parent:
+  child: value
+
+`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(INDENT);
+    });
+
+    it("handles multiple blank lines", () => {
+      const text = `parent:
+  child: value
+
+
+`;
+      expect(calculateYamlIndentation(text, INDENT)).toBe(INDENT);
+    });
+  });
+
+  // ============================================================================
+  // Edge cases
+  // ============================================================================
+  describe("edge cases", () => {
+    it("handles only newline", () => {
+      expect(calculateYamlIndentation("\n", INDENT)).toBe(0);
+    });
+
+    it("handles multiple newlines only", () => {
+      expect(calculateYamlIndentation("\n\n\n", INDENT)).toBe(0);
+    });
+
+    it("handles colon in string value", () => {
+      expect(
+        calculateYamlIndentation('url: "http://example.com"\n', INDENT),
+      ).toBe(0);
+    });
+
+    it("handles key with numbers", () => {
+      expect(calculateYamlIndentation("key123:\n", INDENT)).toBe(INDENT);
+    });
+
+    it("handles key with hyphens", () => {
+      expect(calculateYamlIndentation("my-key:\n", INDENT)).toBe(INDENT);
+    });
+  });
+});