@checkstack/ui 0.2.4 → 0.3.0

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

@@ -0,0 +1,236 @@
+import { describe, expect, it } from "bun:test";
+
+import { isValidXmlTemplatePosition, calculateXmlIndentation } from "./xml";
+
+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,194 @@
+import { xml } from "@codemirror/lang-xml";
+import { Decoration } from "@codemirror/view";
+import type { LanguageSupport, DecorationRange } from "./types";
+
+// 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" },
+});
+
+/**
+ * Check if cursor is in a valid XML template position.
+ * Templates can appear in:
+ * 1. Text content between tags: <tag>|</tag>
+ * 2. Attribute values: <tag attr="|">
+ * @internal Exported for testing
+ */
+export function isValidXmlTemplatePosition(text: string): boolean {
+  // Check if we're inside an attribute value (inside quotes after =)
+  let inTag = false;
+  let inAttrValue = false;
+  let quoteChar = "";
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+
+    if (!inTag && char === "<" && text[i + 1] !== "/") {
+      inTag = true;
+      inAttrValue = false;
+    } else if (inTag && char === ">") {
+      inTag = false;
+      inAttrValue = false;
+    } else if (inTag && !inAttrValue && char === "=") {
+      // Next should be a quote
+      const nextChar = text[i + 1];
+      if (nextChar === '"' || nextChar === "'") {
+        quoteChar = nextChar;
+        inAttrValue = true;
+        i++; // Skip the quote
+      }
+    } else if (inAttrValue && char === quoteChar) {
+      inAttrValue = false;
+      quoteChar = "";
+    }
+  }
+
+  // Valid if inside attribute value
+  if (inAttrValue) {
+    return true;
+  }
+
+  // Valid if between tags (text content position)
+  // Check if we're after a closing > and not inside an opening <
+  const lastOpenTag = text.lastIndexOf("<");
+  const lastCloseTag = text.lastIndexOf(">");
+
+  // If last > is after last <, we're in text content
+  if (lastCloseTag > lastOpenTag) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Calculate indentation for XML, properly handling template expressions.
+ * @internal Exported for testing
+ */
+export function calculateXmlIndentation(
+  textBefore: string,
+  indentUnit: number,
+): number {
+  let depth = 0;
+
+  // Match all opening and closing tags
+  const tagRegex = /<\/?[\w:-]+[^>]*\/?>/g;
+  let match;
+
+  while ((match = tagRegex.exec(textBefore)) !== null) {
+    const tag = match[0];
+
+    // Self-closing tag: <tag />
+    if (tag.endsWith("/>")) {
+      // No depth change
+      continue;
+    }
+
+    // Closing tag: </tag>
+    if (tag.startsWith("</")) {
+      depth = Math.max(0, depth - 1);
+      continue;
+    }
+
+    // Opening tag: <tag> or <tag attr="value">
+    depth++;
+  }
+
+  return depth * indentUnit;
+}
+
+/**
+ * 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.test.ts

@@ -0,0 +1,200 @@
+import { describe, expect, it } from "bun:test";
+
+import { isValidYamlTemplatePosition, calculateYamlIndentation } from "./yaml";
+
+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);
+    });
+  });
+});