@checkstack/ui 0.2.4 → 0.3.1

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

@@ -0,0 +1,245 @@
+import { describe, expect, it } from "bun:test";
+
+import {
+  isValidMarkdownTemplatePosition,
+  calculateMarkdownIndentation,
+} from "./markdown-utils";
+
+describe("isValidMarkdownTemplatePosition", () => {
+  describe("valid text positions", () => {
+    it("returns true for plain text", () => {
+      expect(isValidMarkdownTemplatePosition("Hello world")).toBe(true);
+    });
+
+    it("returns true after heading", () => {
+      expect(isValidMarkdownTemplatePosition("# Title\n")).toBe(true);
+    });
+
+    it("returns true in paragraph", () => {
+      expect(isValidMarkdownTemplatePosition("Some text here")).toBe(true);
+    });
+
+    it("returns true after bold text", () => {
+      expect(isValidMarkdownTemplatePosition("**bold** and more")).toBe(true);
+    });
+
+    it("returns true after italic text", () => {
+      expect(isValidMarkdownTemplatePosition("*italic* text")).toBe(true);
+    });
+
+    it("returns true in list item", () => {
+      expect(isValidMarkdownTemplatePosition("- item text")).toBe(true);
+    });
+
+    it("returns true in numbered list item", () => {
+      expect(isValidMarkdownTemplatePosition("1. first item")).toBe(true);
+    });
+
+    it("returns true in blockquote", () => {
+      expect(isValidMarkdownTemplatePosition("> quote text")).toBe(true);
+    });
+  });
+
+  describe("code positions (invalid)", () => {
+    it("returns false inside code block", () => {
+      expect(isValidMarkdownTemplatePosition("```\ncode here")).toBe(false);
+    });
+
+    it("returns false inside inline code", () => {
+      expect(isValidMarkdownTemplatePosition("Here is `some code")).toBe(false);
+    });
+
+    it("returns true after closed code block", () => {
+      expect(isValidMarkdownTemplatePosition("```\ncode\n```\n")).toBe(true);
+    });
+
+    it("returns true after closed inline code", () => {
+      expect(isValidMarkdownTemplatePosition("Here is `code` and more")).toBe(
+        true,
+      );
+    });
+
+    it("returns false in code block with language", () => {
+      expect(isValidMarkdownTemplatePosition("```javascript\nvar x")).toBe(
+        false,
+      );
+    });
+
+    it("returns true after code block with content", () => {
+      expect(isValidMarkdownTemplatePosition("```js\ncode\n```\ntext")).toBe(
+        true,
+      );
+    });
+  });
+
+  describe("edge cases", () => {
+    it("returns true for empty line after heading", () => {
+      expect(isValidMarkdownTemplatePosition("# Heading\n\n")).toBe(true);
+    });
+
+    it("returns true for link text", () => {
+      expect(isValidMarkdownTemplatePosition("[link text")).toBe(true);
+    });
+
+    it("returns true after link", () => {
+      expect(isValidMarkdownTemplatePosition("[text](url) more")).toBe(true);
+    });
+
+    it("returns false for multiple unclosed code blocks", () => {
+      expect(isValidMarkdownTemplatePosition("```\n```\n```\ncode")).toBe(
+        false,
+      );
+    });
+
+    it("returns true for multiple closed code blocks", () => {
+      expect(isValidMarkdownTemplatePosition("```\n```\n```\n```\ntext")).toBe(
+        true,
+      );
+    });
+  });
+});
+
+describe("calculateMarkdownIndentation", () => {
+  const INDENT = 2;
+
+  // ============================================================================
+  // Basic indentation
+  // ============================================================================
+  describe("basic indentation", () => {
+    it("returns 0 for empty string", () => {
+      expect(calculateMarkdownIndentation("", INDENT)).toBe(0);
+    });
+
+    it("returns 0 for simple text", () => {
+      expect(calculateMarkdownIndentation("Hello world", INDENT)).toBe(0);
+    });
+
+    it("returns 0 after heading", () => {
+      expect(calculateMarkdownIndentation("# Heading\n", INDENT)).toBe(0);
+    });
+
+    it("returns 0 after paragraph", () => {
+      expect(calculateMarkdownIndentation("Some text.\n", INDENT)).toBe(0);
+    });
+  });
+
+  // ============================================================================
+  // List indentation
+  // ============================================================================
+  describe("list indentation", () => {
+    it("maintains list indentation after list item", () => {
+      expect(calculateMarkdownIndentation("- item\n", INDENT)).toBe(0);
+    });
+
+    it("maintains nested list indentation", () => {
+      expect(calculateMarkdownIndentation("  - nested item\n", INDENT)).toBe(2);
+    });
+
+    it("handles numbered list", () => {
+      expect(calculateMarkdownIndentation("1. item\n", INDENT)).toBe(0);
+    });
+
+    it("handles deeply nested list", () => {
+      const text = `- item
+  - nested
+    - deep\n`;
+      expect(calculateMarkdownIndentation(text, INDENT)).toBe(4);
+    });
+  });
+
+  // ============================================================================
+  // Template handling
+  // ============================================================================
+  describe("template handling", () => {
+    it("handles templates in text", () => {
+      expect(calculateMarkdownIndentation("Hello {{name}}", INDENT)).toBe(0);
+    });
+
+    it("handles templates in list items", () => {
+      expect(calculateMarkdownIndentation("- {{item}}\n", INDENT)).toBe(0);
+    });
+
+    it("handles templates in headings", () => {
+      expect(calculateMarkdownIndentation("# {{title}}\n", INDENT)).toBe(0);
+    });
+  });
+
+  // ============================================================================
+  // Code block indentation
+  // ============================================================================
+  describe("code block indentation", () => {
+    it("returns 0 after code block start", () => {
+      expect(calculateMarkdownIndentation("```\n", INDENT)).toBe(0);
+    });
+
+    it("returns 0 inside code block", () => {
+      expect(calculateMarkdownIndentation("```\ncode line\n", INDENT)).toBe(0);
+    });
+
+    it("returns 0 after code block end", () => {
+      expect(calculateMarkdownIndentation("```\ncode\n```\n", INDENT)).toBe(0);
+    });
+  });
+
+  // ============================================================================
+  // Edge cases
+  // ============================================================================
+  describe("edge cases", () => {
+    it("handles only newline", () => {
+      expect(calculateMarkdownIndentation("\n", INDENT)).toBe(0);
+    });
+
+    it("handles multiple newlines", () => {
+      expect(calculateMarkdownIndentation("\n\n\n", INDENT)).toBe(0);
+    });
+
+    it("handles blockquote", () => {
+      expect(calculateMarkdownIndentation("> quote\n", INDENT)).toBe(0);
+    });
+
+    it("handles horizontal rule", () => {
+      expect(calculateMarkdownIndentation("---\n", INDENT)).toBe(0);
+    });
+
+    it("handles table row", () => {
+      expect(calculateMarkdownIndentation("| col1 | col2 |\n", INDENT)).toBe(0);
+    });
+  });
+
+  // ============================================================================
+  // Real-world document structures
+  // ============================================================================
+  describe("real-world document structures", () => {
+    it("handles README-style document", () => {
+      const text = `# Project
+
+Some description.
+
+## Features
+
+- Feature 1
+- Feature 2\n`;
+      expect(calculateMarkdownIndentation(text, INDENT)).toBe(0);
+    });
+
+    it("handles nested list structure", () => {
+      const text = `## Tasks
+
+- Task 1
+  - Subtask A
+  - Subtask B\n`;
+      expect(calculateMarkdownIndentation(text, INDENT)).toBe(2);
+    });
+
+    it("handles code example in docs", () => {
+      const text = `## Usage
+
+\`\`\`javascript
+const x = 1;
+\`\`\`
+
+More text\n`;
+      expect(calculateMarkdownIndentation(text, INDENT)).toBe(0);
+    });
+  });
+});

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

@@ -0,0 +1,134 @@
+import { markdown } from "@codemirror/lang-markdown";
+import { Decoration } from "@codemirror/view";
+import type { LanguageSupport, DecorationRange } from "./types";
+
+// Re-export pure utils for backwards compatibility
+export {
+  isValidMarkdownTemplatePosition,
+  calculateMarkdownIndentation,
+} from "./markdown-utils";
+
+// Decoration marks for Markdown syntax highlighting using inline styles
+const mdHeadingMark = Decoration.mark({
+  attributes: { style: "color: hsl(280, 65%, 60%); font-weight: bold" },
+});
+const mdBoldMark = Decoration.mark({
+  attributes: { style: "font-weight: bold" },
+});
+const mdItalicMark = Decoration.mark({
+  attributes: { style: "font-style: italic" },
+});
+const mdCodeMark = Decoration.mark({
+  attributes: {
+    style:
+      "color: hsl(142.1, 76.2%, 36.3%); background: hsla(0, 0%, 50%, 0.1); border-radius: 3px; padding: 0 2px",
+  },
+});
+const mdLinkMark = Decoration.mark({
+  attributes: { style: "color: hsl(217.2, 91.2%, 59.8%)" },
+});
+const templateMark = Decoration.mark({
+  attributes: { style: "color: hsl(190, 70%, 50%); font-weight: 500" },
+});
+
+/**
+ * Build Markdown + template decorations.
+ */
+function buildMarkdownDecorations(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 headings (# ... or ## ... etc.)
+  const headingRegex = /^(#{1,6})\s+.+$/gm;
+  while ((match = headingRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: mdHeadingMark,
+    });
+  }
+
+  // Match bold (**text** or __text__)
+  const boldRegex = /(\*\*|__)(?!\s)(.+?)(?<!\s)\1/g;
+  while ((match = boldRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: mdBoldMark,
+    });
+  }
+
+  // Match italic (*text* or _text_) - but not **
+  const italicRegex = /(?<!\*|\w)(\*|_)(?!\*|\s)(.+?)(?<!\s|\*)\1(?!\*|\w)/g;
+  while ((match = italicRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: mdItalicMark,
+    });
+  }
+
+  // Match inline code (`code`)
+  const codeRegex = /`[^`\n]+`/g;
+  while ((match = codeRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: mdCodeMark,
+    });
+  }
+
+  // Match links [text](url)
+  const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+  while ((match = linkRegex.exec(doc)) !== null) {
+    ranges.push({
+      from: match.index,
+      to: match.index + match[0].length,
+      decoration: mdLinkMark,
+    });
+  }
+
+  // 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 {
+  isValidMarkdownTemplatePosition,
+  calculateMarkdownIndentation,
+} from "./markdown-utils";
+
+/**
+ * Markdown language support for CodeEditor with template expression handling.
+ */
+export const markdownLanguageSupport: LanguageSupport = {
+  extension: markdown(),
+  buildDecorations: buildMarkdownDecorations,
+  isValidTemplatePosition: isValidMarkdownTemplatePosition,
+  calculateIndentation: calculateMarkdownIndentation,
+};

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

@@ -0,0 +1,48 @@
+import type { Extension } from "@codemirror/state";
+import type { Decoration } from "@codemirror/view";
+
+/**
+ * A decoration range to be applied to the document.
+ */
+export interface DecorationRange {
+  from: number;
+  to: number;
+  decoration: Decoration;
+}
+
+/**
+ * Interface for language-specific support in CodeEditor.
+ * Each language (JSON, YAML, etc.) implements this interface to provide
+ * syntax highlighting that works correctly with {{template}} expressions.
+ */
+export interface LanguageSupport {
+  /**
+   * The CodeMirror language extension for this language.
+   * Provides indentation, bracket matching, folding, etc.
+   */
+  extension: Extension;
+
+  /**
+   * Build decoration ranges for syntax highlighting.
+   * This is used to override the Lezer parser's highlighting when templates
+   * are present (since {{}} confuses most language parsers).
+   * @param doc The document text
+   * @returns Array of decoration ranges to apply
+   */
+  buildDecorations: (doc: string) => DecorationRange[];
+
+  /**
+   * Check if the cursor position is valid for template insertion.
+   * @param textBefore The document text before the cursor
+   * @returns true if templates can be inserted at this position
+   */
+  isValidTemplatePosition: (textBefore: string) => boolean;
+
+  /**
+   * Calculate the indentation level for a given line.
+   * This is used to provide correct indentation that won't be confused by templates.
+   * @param textBefore All text before the current line
+   * @returns Number of spaces to indent
+   */
+  calculateIndentation: (textBefore: string, indentUnit: number) => number;
+}

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

@@ -0,0 +1,94 @@
+/**
+ * Pure utility functions for XML 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 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;
+}
+
+/**
+ * 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;
+}