@keboola/design 2.0.1 → 2.1.0

package/src/components/CodeEditor/SqlEditor.tsx

@@ -1,206 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { defaultKeymap } from '@codemirror/commands';
-import type { SQLNamespace } from '@codemirror/lang-sql';
-import type {
-  EditorState,
-  KeyBinding,
-  ReactCodeMirrorRef,
-  ViewUpdate,
-} from '@uiw/react-codemirror';
-import CodeMirror, { EditorView, keymap } from '@uiw/react-codemirror';
-
-import { installExtensions, type SqlDialectName } from '@keboola/codemirror-lang-sql';
-import colors from '@keboola/tailwind-config/colors';
-
-import { baseThemeStyles, customTheme } from './helpers';
-import type { HighlightedLines } from './highlighting';
-import { highlightingExtension, updateHighlighting } from './highlighting';
-import { searchExtension, updateSearch } from './search';
-
-const BASIS_SETUP = {
-  drawSelection: false,
-  defaultKeymap: false,
-  completionKeymap: false,
-  searchKeymap: false,
-};
-
-const CUSTOM_KEYMAP: KeyBinding[] = [
-  {
-    key: 'Escape',
-    stopPropagation: true,
-    run: (view: EditorView) => {
-      view.contentDOM.blur();
-      return true;
-    },
-  },
-];
-
-const theme = {
-  ...baseThemeStyles,
-  '&.cm-editor': {
-    border: 'solid 1px transparent',
-    background: colors.white,
-    borderRadius: '8px',
-    paddingTop: '8px',
-    paddingBottom: '8px',
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):hover': {
-    borderColor: colors.secondary[500],
-  },
-  '&.cm-editor:has(.cm-content[contenteditable="true"]):focus-within': {
-    borderColor: colors.secondary[500],
-    boxShadow: `0 0 0 4px ${colors.secondary[200]}`,
-  },
-  '&.cm-editor .cm-scroller': { overflowAnchor: 'none' },
-  '&.cm-editor :is(.cm-gutters,.cm-scroller)': { background: colors.white },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { background: colors.neutral[100] },
-  '&.cm-editor:has(.cm-content[contenteditable="false"]) :is(.cm-scroller,.cm-gutters)': {
-    background: colors.neutral[100],
-  },
-};
-
-type Props = {
-  value: string;
-  onChange?: (value: string) => void;
-  onSelectionChange?: (text: string) => void;
-  onCreateEditor?: (view: EditorView, state: EditorState) => void;
-  onDestroyEditor?: () => void;
-  onBlurEditor?: (view: EditorView) => void;
-  onFocusEditor?: (view: EditorView) => void;
-  readOnly: boolean;
-  placeholder?: string;
-  searchQuery?: string;
-  searchMatchIndex?: number;
-  extraKeys?: KeyBinding[];
-  queryParser?: (sql: string) => Promise<string[]>;
-  autoFocus?: boolean;
-  lineNumbers?: boolean;
-  className?: string;
-  schema?: SQLNamespace;
-  variables?: string[];
-  defaultSchema?: string;
-  defaultDatabase?: string;
-  highlightLines?: HighlightedLines;
-  dialect?: SqlDialectName;
-};
-
-export const SqlEditor = ({
-  value,
-  onChange,
-  onSelectionChange,
-  onCreateEditor,
-  onDestroyEditor,
-  onBlurEditor,
-  onFocusEditor,
-  placeholder = '',
-  searchQuery = '',
-  searchMatchIndex,
-  readOnly = false,
-  extraKeys,
-  queryParser,
-  autoFocus = false,
-  lineNumbers = true,
-  className,
-  schema,
-  variables,
-  defaultDatabase,
-  defaultSchema,
-  highlightLines,
-  dialect,
-}: Props) => {
-  const editorRef = useRef<ReactCodeMirrorRef>(null);
-
-  const extensions = useMemo(() => {
-    const baseKeymap = [...defaultKeymap, ...CUSTOM_KEYMAP];
-
-    return [
-      EditorView.lineWrapping,
-      keymap.of(extraKeys ? [...extraKeys, ...baseKeymap] : baseKeymap),
-      ...installExtensions({ schema, defaultDatabase, defaultSchema, variables, dialect }),
-      searchExtension(),
-      highlightingExtension(queryParser),
-      EditorView.theme(theme),
-      onBlurEditor ? EditorView.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
-      onFocusEditor ? EditorView.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : [],
-    ];
-  }, [
-    extraKeys,
-    queryParser,
-    schema,
-    defaultDatabase,
-    defaultSchema,
-    variables,
-    dialect,
-    onBlurEditor,
-    onFocusEditor,
-  ]);
-
-  const defaultSetup = useMemo(() => {
-    return { ...BASIS_SETUP, lineNumbers };
-  }, [lineNumbers]);
-
-  useEffect(() => {
-    if (editorRef.current?.view) {
-      updateHighlighting(editorRef.current.view, highlightLines);
-    }
-  }, [highlightLines]);
-
-  useEffect(() => {
-    if (editorRef.current?.view) {
-      updateSearch(editorRef.current.view, searchQuery, searchMatchIndex);
-    }
-  }, [searchQuery, searchMatchIndex]);
-
-  useEffect(() => {
-    if (!onDestroyEditor) return;
-
-    return () => {
-      onDestroyEditor();
-    };
-  }, [onDestroyEditor]);
-
-  const handleOnCreate = useCallback(
-    (view: EditorView, state: EditorState) => {
-      onCreateEditor?.(view, state);
-
-      if (highlightLines) {
-        updateHighlighting(view, highlightLines);
-      }
-
-      if (searchQuery) {
-        updateSearch(view, searchQuery, searchMatchIndex);
-      }
-    },
-    [onCreateEditor, highlightLines, searchQuery, searchMatchIndex],
-  );
-
-  const handleOnUpdate = useCallback(
-    (update: ViewUpdate) => {
-      if (update.selectionSet) {
-        const { main } = update.state.selection;
-        const text = update.state.sliceDoc(main.from, main.to);
-
-        onSelectionChange?.(text);
-      }
-    },
-    [onSelectionChange],
-  );
-
-  return (
-    <CodeMirror
-      ref={editorRef}
-      theme={customTheme}
-      extensions={extensions}
-      value={value}
-      onChange={onChange}
-      onUpdate={handleOnUpdate}
-      onCreateEditor={handleOnCreate}
-      autoFocus={autoFocus}
-      placeholder={placeholder}
-      className={className}
-      readOnly={readOnly}
-      editable={!readOnly}
-      basicSetup={defaultSetup}
-    />
-  );
-};

package/src/components/CodeEditor/ToggleComponentHelp.tsx

@@ -1,7 +0,0 @@
-import { Kbd } from '../Kbd';
-
-export const ToggleComponentHelp = () => (
-  <div>
-    Use <Kbd>Ctrl+/</Kbd> or <Kbd>Command+/</Kbd> to toggle comments.
-  </div>
-);

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',
-      },
-    }),
-  ];
-};