@keboola/design 2.0.0 → 2.1.0

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

@@ -1,178 +0,0 @@
-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

@@ -1,245 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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();
-  }
-};