@keboola/design 1.0.0

package/src/components/CodeEditor/activeQueryHighlight.test.ts

@@ -0,0 +1,178 @@
+import { ChangeSet, EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+import {
+  activeQueryHighlight,
+  findActiveQueryRange,
+  mapBoundariesThroughChanges,
+} from './activeQueryHighlight';
+
+describe('findActiveQueryRange', () => {
+  it('returns null for empty boundaries', () => {
+    expect(findActiveQueryRange('SELECT 1;', 0, [])).toBeNull();
+  });
+
+  it('finds single query', () => {
+    const doc = 'SELECT 1;';
+    const boundaries = [{ from: 0, to: 9 }];
+    expect(findActiveQueryRange(doc, 4, boundaries)).toEqual({ from: 0, to: 9 });
+  });
+
+  it('finds first query when cursor is in it', () => {
+    // splitSqlQueries returns segments that join back to the original doc
+    const doc = 'SELECT 1;\nSELECT 2;';
+    const boundaries = [
+      { from: 0, to: 10 },
+      { from: 10, to: 20 },
+    ];
+    expect(findActiveQueryRange(doc, 4, boundaries)).toEqual({ from: 0, to: 9 });
+  });
+
+  it('finds second query when cursor is in it', () => {
+    const doc = 'SELECT 1;\nSELECT 2;';
+    const boundaries = [
+      { from: 0, to: 10 },
+      { from: 10, to: 20 },
+    ];
+    expect(findActiveQueryRange(doc, 14, boundaries)).toEqual({ from: 10, to: 20 });
+  });
+
+  it('trims leading whitespace from query range', () => {
+    const doc = 'SELECT 1;\n  SELECT 2;';
+    const boundaries = [
+      { from: 0, to: 10 },
+      { from: 10, to: 21 },
+    ];
+    expect(findActiveQueryRange(doc, 15, boundaries)).toEqual({ from: 12, to: 21 });
+  });
+
+  it('trims trailing whitespace from query range', () => {
+    const doc = 'SELECT 1;  \nSELECT 2;';
+    const boundaries = [
+      { from: 0, to: 12 },
+      { from: 12, to: 22 },
+    ];
+    expect(findActiveQueryRange(doc, 4, boundaries)).toEqual({ from: 0, to: 9 });
+  });
+
+  it('uses last query when cursor is past all boundaries', () => {
+    const doc = 'SELECT 1;\nSELECT 2;';
+    const boundaries = [
+      { from: 0, to: 10 },
+      { from: 10, to: 20 },
+    ];
+    expect(findActiveQueryRange(doc, 25, boundaries)).toEqual({ from: 10, to: 20 });
+  });
+
+  it('returns null for whitespace-only query', () => {
+    const doc = '   \n  ';
+    const boundaries = [{ from: 0, to: 6 }];
+    expect(findActiveQueryRange(doc, 2, boundaries)).toBeNull();
+  });
+
+  it('handles cursor at query boundary (on semicolon)', () => {
+    const doc = 'SELECT 1;\nSELECT 2;';
+    const boundaries = [
+      { from: 0, to: 10 },
+      { from: 10, to: 20 },
+    ];
+    // Cursor at position 10 (the newline after first semicolon) — belongs to first query
+    expect(findActiveQueryRange(doc, 10, boundaries)).toEqual({ from: 0, to: 9 });
+  });
+
+  it('handles cursor at position 0', () => {
+    const doc = 'SELECT 1;';
+    const boundaries = [{ from: 0, to: 9 }];
+    expect(findActiveQueryRange(doc, 0, boundaries)).toEqual({ from: 0, to: 9 });
+  });
+
+  it('handles multi-line query', () => {
+    const doc = 'SELECT\n  *\nFROM\n  users;';
+    const boundaries = [{ from: 0, to: 24 }];
+    expect(findActiveQueryRange(doc, 12, boundaries)).toEqual({ from: 0, to: 24 });
+  });
+});
+
+describe('mapBoundariesThroughChanges', () => {
+  it('maps boundaries through an insertion', () => {
+    // doc: "SELECT 1;" (length 9) -> insert "A" at position 0 -> "ASELECT 1;" (length 10)
+    const changes = ChangeSet.of({ from: 0, to: 0, insert: 'A' }, 9);
+    const boundaries = [{ from: 0, to: 9 }];
+    expect(mapBoundariesThroughChanges(boundaries, changes)).toEqual([{ from: 0, to: 10 }]);
+  });
+
+  it('maps boundaries through a deletion', () => {
+    // doc: "SELECT 1;" (length 9) -> delete last char -> "SELECT 1" (length 8)
+    const changes = ChangeSet.of({ from: 8, to: 9, insert: '' }, 9);
+    const boundaries = [{ from: 0, to: 9 }];
+    expect(mapBoundariesThroughChanges(boundaries, changes)).toEqual([{ from: 0, to: 8 }]);
+  });
+
+  it('clamps stale boundaries past changeset length (regression for RangeError)', () => {
+    // Cached boundaries are based on a longer doc (length 20) than the changeset's
+    // pre-change length (length 10). Without clamping, mapPos would throw RangeError.
+    const changes = ChangeSet.of({ from: 9, to: 10, insert: '' }, 10);
+    const staleBoundaries = [
+      { from: 0, to: 10 },
+      { from: 10, to: 20 },
+    ];
+    expect(() => mapBoundariesThroughChanges(staleBoundaries, changes)).not.toThrow();
+    const mapped = mapBoundariesThroughChanges(staleBoundaries, changes);
+    // The second boundary collapses (both ends clamp to prevLen and stay there).
+    expect(mapped).toEqual([{ from: 0, to: 9 }]);
+  });
+
+  it('drops degenerate (empty) boundaries', () => {
+    const changes = ChangeSet.of({ from: 0, to: 5, insert: '' }, 10);
+    const boundaries = [
+      { from: 0, to: 5 },
+      { from: 5, to: 10 },
+    ];
+    // First boundary is fully deleted -> collapses to { 0, 0 } and is dropped.
+    expect(mapBoundariesThroughChanges(boundaries, changes)).toEqual([{ from: 0, to: 5 }]);
+  });
+
+  it('handles empty boundaries list', () => {
+    const changes = ChangeSet.of({ from: 0, to: 0, insert: 'A' }, 9);
+    expect(mapBoundariesThroughChanges([], changes)).toEqual([]);
+  });
+});
+
+describe('activeQueryHighlight plugin (integration)', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it('clears decorations when all cached boundaries become degenerate after a change', async () => {
+    const splitQueries = (sql: string) => Promise.resolve([sql]);
+    const state = EditorState.create({
+      doc: 'SELECT 1;SELECT 2;',
+      extensions: [activeQueryHighlight(splitQueries)],
+    });
+    const view = new EditorView({ state, parent: container });
+    view.focus();
+    view.dispatch({ selection: { anchor: 5 } });
+
+    // Wait for the 100ms debounced async parse to populate cachedBoundaries
+    // and paint the initial `.cm-active-query` decorations.
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    expect(container.querySelector('.cm-active-query')).toBeTruthy();
+
+    // Delete the entire doc. Every cached boundary collapses to { 0, 0 } and is
+    // dropped by mapBoundariesThroughChanges, so cachedBoundaries becomes []
+    // synchronously. Prior to the fix, updateFromCache early-returned without
+    // clearing decorations and the stale highlight persisted until the next
+    // debounce tick (~100ms).
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: '' } });
+    expect(container.querySelector('.cm-active-query')).toBeFalsy();
+
+    view.destroy();
+  });
+});

package/src/components/CodeEditor/activeQueryHighlight.ts

@@ -0,0 +1,245 @@
+import type { ChangeSet, Range } from '@codemirror/state';
+import { Decoration, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+import colors from '@keboola/tailwind-config/colors';
+
+const activeQueryFirstLine = Decoration.line({ class: 'cm-active-query cm-active-query-first' });
+const activeQueryMiddleLine = Decoration.line({ class: 'cm-active-query' });
+const activeQueryLastLine = Decoration.line({ class: 'cm-active-query cm-active-query-last' });
+const activeQuerySingleLine = Decoration.line({
+  class: 'cm-active-query cm-active-query-first cm-active-query-last',
+});
+
+type QueryBoundary = { from: number; to: number };
+
+/**
+ * Given pre-computed query boundaries and a cursor position, find which query
+ * the cursor is in. Returns trimmed character offsets or null.
+ */
+export const findActiveQueryRange = (
+  doc: string,
+  cursorPos: number,
+  boundaries: QueryBoundary[],
+): { from: number; to: number } | null => {
+  if (boundaries.length === 0) return null;
+
+  let match: QueryBoundary | undefined = boundaries[boundaries.length - 1];
+  for (const boundary of boundaries) {
+    if (cursorPos <= boundary.to) {
+      match = boundary;
+      break;
+    }
+  }
+
+  if (!match) return null;
+
+  // Trim leading/trailing whitespace from the query range for tighter boundaries
+  const queryText = doc.slice(match.from, match.to);
+  const leadingWhitespace = queryText.length - queryText.trimStart().length;
+  const trailingWhitespace = queryText.length - queryText.trimEnd().length;
+
+  const trimmedStart = match.from + leadingWhitespace;
+  const trimmedEnd = match.to - trailingWhitespace;
+
+  if (trimmedStart >= trimmedEnd) return null;
+
+  return { from: trimmedStart, to: trimmedEnd };
+};
+
+/**
+ * Convert splitSqlQueries result (array of query strings that join back to the
+ * original doc) into character-offset boundaries.
+ */
+const computeBoundaries = (queries: string[]): QueryBoundary[] => {
+  const boundaries: QueryBoundary[] = [];
+  let offset = 0;
+  for (const query of queries) {
+    boundaries.push({ from: offset, to: offset + query.length });
+    offset += query.length;
+  }
+  return boundaries;
+};
+
+/**
+ * Synchronously map cached boundaries through a changeset.
+ *
+ * Boundaries can outlive the document state they were computed from (the async
+ * re-parse in `scheduleDocParse` is debounced, so several edits may land
+ * before new boundaries are produced). When that happens a cached position
+ * can exceed the changeset's pre-change length and `ChangeSet.mapPos` throws
+ * `RangeError: Position X is out of range for changeset of length Y`.
+ *
+ * Clamp positions into the valid `[0, changes.length]` range before mapping
+ * and drop degenerate boundaries so the mapping is safe even with stale cache.
+ */
+export const mapBoundariesThroughChanges = (
+  boundaries: QueryBoundary[],
+  changes: ChangeSet,
+): QueryBoundary[] => {
+  const prevLen = changes.length;
+  const mapped: QueryBoundary[] = [];
+  for (const b of boundaries) {
+    const from = changes.mapPos(Math.max(0, Math.min(b.from, prevLen)), -1);
+    const to = changes.mapPos(Math.max(0, Math.min(b.to, prevLen)), 1);
+    if (from < to) mapped.push({ from, to });
+  }
+  return mapped;
+};
+
+const buildDecorations = (view: EditorView, range: { from: number; to: number }) => {
+  const startLine = view.state.doc.lineAt(range.from).number;
+  const endLine = view.state.doc.lineAt(range.to).number;
+
+  const decorations: Range<Decoration>[] = [];
+  for (let lineNum = startLine; lineNum <= endLine; lineNum++) {
+    const lineStart = view.state.doc.line(lineNum).from;
+    if (startLine === endLine) {
+      decorations.push(activeQuerySingleLine.range(lineStart));
+    } else if (lineNum === startLine) {
+      decorations.push(activeQueryFirstLine.range(lineStart));
+    } else if (lineNum === endLine) {
+      decorations.push(activeQueryLastLine.range(lineStart));
+    } else {
+      decorations.push(activeQueryMiddleLine.range(lineStart));
+    }
+  }
+
+  return Decoration.set(decorations);
+};
+
+export const activeQueryHighlight = (splitQueries: (sql: string) => Promise<string[]>) => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations = Decoration.none;
+        private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+        private seq = 0;
+        private cachedDoc = '';
+        private cachedBoundaries: QueryBoundary[] = [];
+        private destroyed = false;
+
+        constructor(view: EditorView) {
+          this.scheduleDocParse(view);
+        }
+
+        update(update: ViewUpdate) {
+          if (update.focusChanged && !update.view.hasFocus) {
+            this.decorations = Decoration.none;
+            return;
+          }
+
+          if (update.docChanged) {
+            // Synchronously map cached boundaries through document changes
+            // so decorations update immediately without waiting for async re-parse.
+            // Positions are clamped inside mapBoundariesThroughChanges because
+            // the async re-parse is debounced and boundaries can be stale.
+            if (this.cachedBoundaries.length > 0) {
+              this.cachedBoundaries = mapBoundariesThroughChanges(
+                this.cachedBoundaries,
+                update.changes,
+              );
+              this.cachedDoc = update.state.doc.toString();
+              this.updateFromCache(update.view);
+            }
+            // Still re-parse for accurate boundaries (handles structural changes like new semicolons)
+            this.scheduleDocParse(update.view);
+          } else if (update.selectionSet || (update.focusChanged && update.view.hasFocus)) {
+            this.updateFromCache(update.view);
+          }
+        }
+
+        destroy() {
+          this.destroyed = true;
+          if (this.debounceTimer) clearTimeout(this.debounceTimer);
+        }
+
+        /**
+         * Update decorations using cached query boundaries.
+         * Only mutates this.decorations — does NOT call view.dispatch().
+         * When called from update() (sync), CodeMirror picks up the new
+         * decorations via the accessor. When called from the async
+         * scheduleDocParse callback, the caller must dispatch separately.
+         */
+        private updateFromCache(view: EditorView) {
+          if (!view.hasFocus) {
+            this.decorations = Decoration.none;
+            return;
+          }
+
+          const { main } = view.state.selection;
+
+          if (main.from !== main.to) {
+            // User has text selected — hide highlight
+            this.decorations = Decoration.none;
+            return;
+          }
+
+          const doc = view.state.doc.toString();
+          if (doc !== this.cachedDoc) return;
+          if (this.cachedBoundaries.length === 0) {
+            this.decorations = Decoration.none;
+            return;
+          }
+
+          const range = findActiveQueryRange(doc, main.head, this.cachedBoundaries);
+          this.decorations = range ? buildDecorations(view, range) : Decoration.none;
+        }
+
+        /** Parse queries async (debounced) and update decorations. */
+        private scheduleDocParse(view: EditorView) {
+          if (this.debounceTimer) clearTimeout(this.debounceTimer);
+
+          this.debounceTimer = setTimeout(async () => {
+            const seq = ++this.seq;
+            const doc = view.state.doc.toString();
+
+            if (!doc.trim()) {
+              this.cachedDoc = doc;
+              this.cachedBoundaries = [];
+              if (this.decorations !== Decoration.none) {
+                this.decorations = Decoration.none;
+                if (!this.destroyed) view.dispatch();
+              }
+              return;
+            }
+
+            let queries: string[];
+            try {
+              queries = await splitQueries(doc);
+            } catch {
+              return;
+            }
+
+            // Discard stale results
+            if (this.destroyed || seq !== this.seq) return;
+
+            this.cachedDoc = doc;
+            this.cachedBoundaries = computeBoundaries(queries);
+
+            this.updateFromCache(view);
+            if (!this.destroyed) view.dispatch();
+          }, 100);
+        }
+      },
+      { decorations: (v) => v.decorations },
+    ),
+    EditorView.baseTheme({
+      '.cm-active-query': {
+        boxShadow: `inset -1px 0 0 0 ${colors.secondary[300]}, inset 1px 0 0 0 ${colors.secondary[300]}`,
+        marginRight: '8px',
+      },
+      '.cm-active-query-first': {
+        boxShadow: `inset -1px 0 0 0 ${colors.secondary[300]}, inset 1px 0 0 0 ${colors.secondary[300]}, inset 0 1px 0 0 ${colors.secondary[300]}`,
+        borderRadius: '4px 4px 0 0',
+      },
+      '.cm-active-query-last': {
+        boxShadow: `inset -1px 0 0 0 ${colors.secondary[300]}, inset 1px 0 0 0 ${colors.secondary[300]}, inset 0 -1px 0 0 ${colors.secondary[300]}`,
+        borderRadius: '0 0 4px 4px',
+      },
+      '.cm-active-query-first.cm-active-query-last': {
+        boxShadow: `inset 0 0 0 1px ${colors.secondary[300]}`,
+        borderRadius: '4px',
+      },
+    }),
+  ];
+};

package/src/components/CodeEditor/helpers.ts

@@ -0,0 +1,100 @@
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { python } from '@codemirror/lang-python';
+import { PLSQL, sql } from '@codemirror/lang-sql';
+import { StreamLanguage } from '@codemirror/language';
+import { r } from '@codemirror/legacy-modes/mode/r';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { githubLightInit } from '@uiw/codemirror-theme-github';
+
+import { sfsql } from '@keboola/codemirror-lang-sfsql';
+import colors from '@keboola/tailwind-config/colors';
+
+export type LANGUAGE_MODE =
+  | 'application/json'
+  | 'text/x-python'
+  | 'text/x-sql'
+  | 'text/x-sfsql'
+  | 'text/x-plsql'
+  | 'text/x-rsrc'
+  | 'text/x-sh'
+  | 'text/javascript'
+  | 'text/typescript';
+
+export const baseThemeStyles = {
+  '*': { lineHeight: '20px' },
+  '*::selection': {
+    backgroundColor: colors.secondary[500],
+    color: `${colors.white} !important`,
+  },
+  '&.cm-editor:has(.cm-content[contenteditable="false"])': { backgroundColor: colors.neutral[150] },
+  '&.cm-editor:has(.cm-content[contenteditable="false"]) .cm-gutters': {
+    backgroundColor: colors.neutral[200],
+  },
+  '&.cm-editor .cm-scroller': { overflowAnchor: 'none' },
+  '&.cm-editor, &.cm-editor .cm-scroller': {
+    minHeight: '100%',
+    flexGrow: 1,
+    alignItems: 'stretch !important',
+    outline: 'none',
+  },
+  '.cm-gutter.cm-foldGutter': { display: 'none !important' },
+  '.cm-gutter.cm-lineNumbers': { paddingLeft: '20px', paddingRight: '6px' },
+  '.cm-gutters': { height: 'auto' },
+
+  // tokens overrides
+  '.cm-line .tok-string': { color: colors.warning[700] },
+
+  // merge (diff) view
+  '&[class*="cm-merge-"] .cm-deletedLine': { backgroundColor: colors.error[100] },
+  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors.primary[100] },
+  '&[class*="cm-merge-"] .cm-deletedLineGutter': { backgroundColor: colors.error[200] },
+  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors.primary[200] },
+  '&[class*="cm-merge-"] .cm-deletedText': { background: colors.error[200] },
+  '&[class*="cm-merge-"] .cm-changedText': { background: colors.primary[200] },
+  '&[class*="cm-merge-"]': {
+    backgroundColor: `${colors.white} !important`,
+  },
+  '&[class*="cm-merge-"] .cm-gutters': {
+    backgroundColor: `${colors.white} !important`,
+  },
+  '.cm-changeGutter': { position: 'absolute', zIndex: -1, width: '100%', paddingLeft: 0 },
+  '&[class*="cm-merge-"] .cm-changedLine,&[class*="cm-merge-"] .cm-line, &[class*="cm-merge-"] .cm-deletedChunk':
+    { paddingLeft: 0 },
+};
+
+export const BASIS_SETUP = { drawSelection: false };
+
+export const customTheme = githubLightInit({
+  settings: {
+    fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
+    background: colors.neutral[50],
+    gutterBackground: colors.neutral[100],
+    gutterBorder: 'transparent',
+    lineHighlight: 'transparent',
+    selection: colors.secondary[500],
+  },
+});
+
+export const getLanguageMode = (mode?: LANGUAGE_MODE) => {
+  switch (mode) {
+    case 'text/x-python':
+      return python();
+    case 'text/x-sql':
+      return sql({ upperCaseKeywords: true });
+    case 'text/x-sfsql':
+      return StreamLanguage.define(sfsql);
+    case 'text/x-plsql':
+      return sql({ upperCaseKeywords: true, dialect: PLSQL });
+    case 'text/x-rsrc':
+      return StreamLanguage.define(r);
+    case 'text/x-sh':
+      return StreamLanguage.define(shell);
+    case 'text/javascript':
+      return javascript({ jsx: true });
+    case 'text/typescript':
+      return javascript({ jsx: true, typescript: true });
+    default:
+      return json();
+  }
+};