@checkstack/ui 0.2.3 → 0.3.0

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

@@ -0,0 +1,245 @@
+import { describe, expect, it } from "bun:test";
+
+import {
+  isValidMarkdownTemplatePosition,
+  calculateMarkdownIndentation,
+} from "./markdown";
+
+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,183 @@
+import { markdown } from "@codemirror/lang-markdown";
+import { Decoration } from "@codemirror/view";
+import type { LanguageSupport, DecorationRange } from "./types";
+
+// 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" },
+});
+
+/**
+ * Check if cursor is in a valid Markdown template position.
+ * Templates can appear almost anywhere in Markdown (text content).
+ * @internal Exported for testing
+ */
+export function isValidMarkdownTemplatePosition(text: string): boolean {
+  // In Markdown, templates are valid almost everywhere except:
+  // - Inside code blocks (``` ... ```)
+  // - Inside inline code (` ... `)
+
+  // Check for unclosed code blocks
+  const codeBlockMatches = text.match(/```/g) || [];
+  if (codeBlockMatches.length % 2 === 1) {
+    return false; // Inside a code block
+  }
+
+  // Check if we're inside inline code on the current line
+  const lastNewline = text.lastIndexOf("\n");
+  const currentLine = text.slice(lastNewline + 1);
+  const backticks = (currentLine.match(/`/g) || []).length;
+
+  // If odd number of backticks, we're inside inline code
+  if (backticks % 2 === 1) {
+    return false;
+  }
+
+  // Valid in all other positions
+  return true;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Calculate indentation for Markdown.
+ * Markdown uses list indentation.
+ * @internal Exported for testing
+ */
+export function calculateMarkdownIndentation(
+  textBefore: string,
+  _indentUnit: number,
+): number {
+  const lines = textBefore.split("\n");
+  if (lines.length === 0) return 0;
+
+  // Find the last non-empty line
+  for (let i = lines.length - 1; 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 is a list item, next line should be indented if continuing
+    if (/^\s*[-*+]\s/.test(line) || /^\s*\d+\.\s/.test(line)) {
+      return leadingSpaces;
+    }
+
+    return leadingSpaces;
+  }
+
+  return 0;
+}
+
+/**
+ * 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;
+}