@keboola/design 2.0.0 → 2.1.0

package/src/components/MarkdownEditor/MarkdownEditor.test.ts

@@ -1,171 +0,0 @@
-import { CodeNode } from '@lexical/code';
-import { LinkNode } from '@lexical/link';
-import { ListItemNode, ListNode } from '@lexical/list';
-import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown';
-import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
-import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-import { createEditor } from 'lexical';
-import { describe, expect, test } from 'vitest';
-
-import { ImageNode } from './nodes/ImageNode';
-import { MermaidNode } from './nodes/MermaidNode';
-import { CUSTOM_TRANSFORMERS, postprocessMarkdown, preprocessMarkdown } from './transformers';
-
-const EDITOR_NODES = [
-  ImageNode,
-  MermaidNode,
-  HeadingNode,
-  QuoteNode,
-  ListNode,
-  ListItemNode,
-  CodeNode,
-  LinkNode,
-  HorizontalRuleNode,
-];
-
-const roundTrip = (markdown: string): string => {
-  const editor = createEditor({
-    nodes: EDITOR_NODES,
-    onError: (e) => {
-      throw e;
-    },
-  });
-
-  const container = document.createElement('div');
-  editor.setRootElement(container);
-
-  editor.update(
-    () => {
-      $convertFromMarkdownString(preprocessMarkdown(markdown), CUSTOM_TRANSFORMERS);
-    },
-    { discrete: true },
-  );
-
-  let result = '';
-  editor.getEditorState().read(() => {
-    result = postprocessMarkdown($convertToMarkdownString(CUSTOM_TRANSFORMERS));
-  });
-  return result;
-};
-
-describe('Markdown round-trip', () => {
-  test('empty string', () => {
-    expect(roundTrip('')).toBe('');
-  });
-
-  test('single paragraph', () => {
-    expect(roundTrip('Hello world')).toBe('Hello world');
-  });
-
-  test('multiple paragraphs', () => {
-    const md = 'First paragraph\n\nSecond paragraph';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('headings', () => {
-    const md = '# Heading 1\n\n## Heading 2\n\n### Heading 3';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('bold and italic', () => {
-    const md = 'Some **bold** and *italic* text';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('strikethrough', () => {
-    const md = 'Some ~~deleted~~ text';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('inline code', () => {
-    const md = 'Use `console.log()` for debugging';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('unordered list', () => {
-    const md = '- Item one\n- Item two\n- Item three';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('ordered list', () => {
-    const md = '1. First\n2. Second\n3. Third';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('code block with language', () => {
-    const md = '```javascript\nconst x = 1;\nconsole.log(x);\n```';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('code block (snowflake)', () => {
-    const md = '```snowflake\nSELECT * FROM table;\n```';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('link', () => {
-    const md = 'Visit [Google](https://google.com) for search';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('image with regular URL', () => {
-    const md = '![screenshot](https://example.com/img.png)';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('image with kbc-file URL', () => {
-    const md = '![my image](https://kbc-file/12345/image.png)';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('blockquote', () => {
-    const md = '> This is a quote';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('horizontal rule', () => {
-    const md = 'Above\n\n---\n\nBelow';
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('GFM table (preserved via code fence)', () => {
-    const md = ['| Header 1 | Header 2 |', '| --- | --- |', '| Cell 1 | Cell 2 |'].join('\n');
-    expect(roundTrip(md)).toBe(md);
-  });
-
-  test('mermaid diagram', () => {
-    const md = '```mermaid\ngraph TD\n    A --> B\n```';
-    expect(roundTrip(md)).toBe(md);
-  });
-});
-
-describe('Table preprocessing', () => {
-  test('wraps tables in code fences', () => {
-    const input = '| A | B |\n| --- | --- |\n| 1 | 2 |';
-    const result = preprocessMarkdown(input);
-    expect(result).toContain('```__kbc_table__');
-    expect(result).toContain('| A | B |');
-  });
-
-  test('unwraps code-fenced tables', () => {
-    const input = '```__kbc_table__\n| A | B |\n| --- | --- |\n| 1 | 2 |\n```';
-    expect(postprocessMarkdown(input)).toBe('| A | B |\n| --- | --- |\n| 1 | 2 |');
-  });
-
-  test('does not wrap single pipe line', () => {
-    const input = '| just a pipe |';
-    expect(preprocessMarkdown(input)).toBe(input);
-  });
-
-  test('handles table surrounded by paragraphs', () => {
-    const input = 'Before\n\n| A | B |\n| --- | --- |\n| 1 | 2 |\n\nAfter';
-    const processed = preprocessMarkdown(input);
-    expect(processed).toContain('```__kbc_table__');
-    expect(processed).toContain('Before');
-    expect(processed).toContain('After');
-  });
-
-  test('does not wrap pipe lines inside fenced code blocks', () => {
-    const input = '```\n| A | B |\n| --- | --- |\n| 1 | 2 |\n```';
-    expect(preprocessMarkdown(input)).toBe(input);
-  });
-});

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,245 +0,0 @@
-import { useRef, useState } from 'react';
-import type { FocusEvent, ReactNode } from 'react';
-import { CodeNode } from '@lexical/code';
-import { LinkNode } from '@lexical/link';
-import { ListItemNode, ListNode } from '@lexical/list';
-import { $convertFromMarkdownString } from '@lexical/markdown';
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
-import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin';
-import type { InitialConfigType } from '@lexical/react/LexicalComposer';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
-import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';
-import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
-import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
-import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-
-import { cn } from '../../utils';
-
-import { ImageNode } from './nodes/ImageNode';
-import { MermaidNode } from './nodes/MermaidNode';
-import { ImagePastePlugin } from './plugins/ImagePastePlugin';
-import { KeyboardPlugin } from './plugins/KeyboardPlugin';
-import { MarkdownSyncPlugin } from './plugins/MarkdownSyncPlugin';
-import { ToolbarPlugin } from './plugins/ToolbarPlugin';
-import { ImageRendererProvider } from './context';
-import { editorTheme } from './theme';
-import { CUSTOM_TRANSFORMERS, preprocessMarkdown, SINGLE_LINE_TRANSFORMERS } from './transformers';
-
-export type MarkdownEditorProps = {
-  /** Markdown string (controlled) */
-  value: string;
-  onChange?: (markdown: string) => void;
-  /**
-   * Renders content but never accepts input. Use for permanent view-only contexts
-   * (e.g. a current user lacks edit permission). Toolbar is hidden.
-   */
-  readOnly?: boolean;
-  /**
-   * Temporarily blocks input but signals intent to re-enable
-   * (e.g. while a save is in flight). Functionally identical to `readOnly` today.
-   */
-  disabled?: boolean;
-  placeholder?: string;
-  autoFocus?: boolean;
-  /** Invoked on Cmd/Ctrl+Enter — typically used to commit a form. */
-  onSave?: () => void;
-  /**
-   * Invoked on Escape in inline-edit mode (`singleLine || saveOnBlur`). Per the
-   * inline-editable-text pattern spec, Esc reverts the in-progress edit — callers
-   * reset `value` to the last-committed state inside this handler.
-   */
-  onCancel?: () => void;
-  /**
-   * Async image upload. Resolved URL is embedded as the image src
-   * (`![alt](url)` in the underlying markdown).
-   */
-  onImageUpload?: (file: File) => Promise<{ url: string }>;
-  className?: string;
-  imageRenderer?: (props: { src: string; alt: string }) => ReactNode;
-  showToolbar?: boolean;
-  /**
-   * Strips the prose typography wrapper, removes the min-height, and tightens padding so
-   * the editor visually blends with surrounding text. Use for inline / Linear-style edit
-   * affordances inside headings, list rows, or table cells. Pair with `className` to set
-   * the caller's typography.
-   */
-  compact?: boolean;
-  /**
-   * Calls `onSave` when focus leaves the editor (and is not moved into the toolbar).
-   * `onChange` already keeps the caller's value in sync — `onSave` is the "commit" signal.
-   */
-  saveOnBlur?: boolean;
-  /**
-   * Disables block-level markdown (lists, headings, code blocks, HR) and makes a plain
-   * Enter press trigger `onSave` and blur the editor. Shift+Enter still inserts a soft
-   * line break. Use for editable titles.
-   */
-  singleLine?: boolean;
-  /**
-   * Clamps content to ~2 lines with a bottom fade in the display (not-focused) state;
-   * focus expands the editor to full height (no clamp). Per the inline-editable-text
-   * pattern spec for description-style slots — fade replaces truncation/ellipsis.
-   */
-  clampDisplay?: boolean;
-};
-
-const EDITOR_NODES = [
-  ImageNode,
-  MermaidNode,
-  HeadingNode,
-  QuoteNode,
-  ListNode,
-  ListItemNode,
-  CodeNode,
-  LinkNode,
-  HorizontalRuleNode,
-];
-
-export const MarkdownEditor = ({
-  value,
-  onChange,
-  readOnly = false,
-  placeholder,
-  autoFocus = false,
-  disabled = false,
-  onSave,
-  onCancel,
-  onImageUpload,
-  className,
-  imageRenderer,
-  showToolbar = false,
-  compact = false,
-  saveOnBlur = false,
-  singleLine = false,
-  clampDisplay = false,
-}: MarkdownEditorProps) => {
-  const editable = !readOnly && !disabled;
-  const transformers = singleLine ? SINGLE_LINE_TRANSFORMERS : CUSTOM_TRANSFORMERS;
-
-  // Lexical reads editorState only on first render; later prop changes are applied by MarkdownSyncPlugin.
-  const [initialConfig] = useState<InitialConfigType>(() => ({
-    namespace: 'MarkdownEditor',
-    theme: editorTheme,
-    nodes: EDITOR_NODES,
-    onError: (error: Error) => {
-      console.error('[MarkdownEditor] uncaught editor error', error);
-    },
-    editable,
-    editorState: () => {
-      $convertFromMarkdownString(preprocessMarkdown(value), transformers);
-    },
-  }));
-
-  // Set to `true` by KeyboardPlugin before it programmatically blurs on Escape so the
-  // blur handler can skip its `onSave` — otherwise blur-after-cancel would commit the
-  // value we just reverted. Reset on read inside handleBlur.
-  const skipBlurSaveRef = useRef(false);
-
-  const handleBlur =
-    saveOnBlur && onSave
-      ? (event: FocusEvent<HTMLDivElement>) => {
-          if (skipBlurSaveRef.current) {
-            skipBlurSaveRef.current = false;
-            return;
-          }
-          // Only fire when focus leaves the editor wrapper entirely (not when moving into the toolbar).
-          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
-            onSave();
-          }
-        }
-      : undefined;
-
-  return (
-    <LexicalComposer initialConfig={initialConfig}>
-      <ImageRendererProvider value={imageRenderer ?? null}>
-        <div
-          className={cn(
-            !compact && 'tw-prose',
-            // Compact mode drops `tw-prose`, so Lexical's <p> wrappers fall back to the browser
-            // default `margin: 1em 0` — visually huge at heading sizes. Zero them, and use the
-            // adjacent-sibling selector for paragraph spacing so single-paragraph blocks (titles,
-            // short descriptions) stay tight while multi-paragraph blocks still breathe.
-            compact && '[&_p]:tw-m-0 [&_p+p]:tw-mt-2',
-            // Display-state clamp: 2 lines + bottom fade. Drops in focus-within so editing
-            // expands to full height. Fade replaces ellipsis per the pattern spec — the
-            // mask gradient overlays line-clamp's default ellipsis so it's invisible.
-            clampDisplay &&
-              '[&:not(:focus-within)]:tw-line-clamp-2 [&:not(:focus-within)]:[mask-image:linear-gradient(to_bottom,black_50%,transparent)]',
-            className,
-          )}
-          onBlur={handleBlur}
-        >
-          {showToolbar && editable && <ToolbarPlugin />}
-          <div
-            className={cn(
-              'tw-relative tw-rounded-md tw-transition-colors',
-              // In compact mode the padding lets the hover bg / focus ring extend past the text,
-              // but a matching negative margin shifts the wrapper outward so the text itself stays
-              // aligned with the parent's content edge (i.e. with where static text would render).
-              compact ? 'tw-px-1.5 tw-py-0.5 -tw-mx-1.5 -tw-my-0.5' : 'tw-p-2',
-              editable &&
-                'tw-cursor-text hover:tw-bg-neutral-50 focus-within:tw-ring-2 focus-within:tw-ring-secondary-500/40',
-            )}
-          >
-            <RichTextPlugin
-              contentEditable={
-                <ContentEditable
-                  className={cn('tw-outline-none', !compact && 'tw-min-h-[100px]')}
-                  aria-placeholder={placeholder ?? ''}
-                  placeholder={
-                    placeholder ? (
-                      <div
-                        className={cn(
-                          'tw-pointer-events-none tw-absolute tw-select-none tw-text-neutral-400',
-                          compact
-                            ? 'tw-left-1.5 tw-top-0.5'
-                            : 'tw-left-2 tw-top-[calc(0.5rem+0.35em)]',
-                        )}
-                      >
-                        {placeholder}
-                      </div>
-                    ) : (
-                      <div />
-                    )
-                  }
-                />
-              }
-              ErrorBoundary={LexicalErrorBoundary}
-            />
-          </div>
-          <HistoryPlugin />
-          <LinkPlugin />
-          <ClickableLinkPlugin newTab />
-          {!singleLine && <ListPlugin />}
-          {!singleLine && <CheckListPlugin />}
-          {!singleLine && <HorizontalRulePlugin />}
-          <TabIndentationPlugin />
-          <MarkdownShortcutPlugin transformers={transformers} />
-          <MarkdownSyncPlugin
-            value={value}
-            editable={editable}
-            onChange={onChange}
-            transformers={transformers}
-          />
-          <ImagePastePlugin onImageUpload={onImageUpload} />
-          <KeyboardPlugin
-            onSave={onSave}
-            onCancel={onCancel}
-            singleLine={singleLine}
-            blurOnEscape={singleLine || saveOnBlur}
-            skipBlurSaveRef={skipBlurSaveRef}
-          />
-          {autoFocus && <AutoFocusPlugin />}
-        </div>
-      </ImageRendererProvider>
-    </LexicalComposer>
-  );
-};

package/src/components/MarkdownEditor/context.ts

@@ -1,10 +0,0 @@
-import { createContext, use } from 'react';
-import type { ReactNode } from 'react';
-
-type ImageRenderer = (props: { src: string; alt: string }) => ReactNode;
-
-const ImageRendererContext = createContext<ImageRenderer | null>(null);
-
-export const ImageRendererProvider = ImageRendererContext;
-
-export const useImageRenderer = (): ImageRenderer | null => use(ImageRendererContext);

package/src/components/MarkdownEditor/index.ts

@@ -1 +0,0 @@
-export { MarkdownEditor, type MarkdownEditorProps } from './MarkdownEditor';

package/src/components/MarkdownEditor/nodes/ImageNode.tsx

@@ -1,115 +0,0 @@
-/* eslint-disable react/only-export-components -- Lexical convention: $create/$is helpers co-locate with node */
-import type { ReactNode } from 'react';
-import type {
-  DOMConversionMap,
-  DOMExportOutput,
-  EditorConfig,
-  LexicalNode,
-  NodeKey,
-  SerializedLexicalNode,
-  Spread,
-} from 'lexical';
-import { DecoratorNode } from 'lexical';
-
-import { ImageNodeComponent } from './ImageNodeComponent';
-
-type SerializedImageNode = Spread<{ src: string; altText: string }, SerializedLexicalNode>;
-
-export class ImageNode extends DecoratorNode<ReactNode> {
-  __src: string;
-  __altText: string;
-
-  static override getType(): string {
-    return 'image';
-  }
-
-  static override clone(node: ImageNode): ImageNode {
-    return new ImageNode(node.__src, node.__altText, node.__key);
-  }
-
-  constructor(src: string, altText: string, key?: NodeKey) {
-    super(key);
-    this.__src = src;
-    this.__altText = altText;
-  }
-
-  getSrc(): string {
-    return this.__src;
-  }
-
-  getAlt(): string {
-    return this.__altText;
-  }
-
-  setSrc(src: string): void {
-    const writable = this.getWritable();
-    writable.__src = src;
-  }
-
-  setAlt(altText: string): void {
-    const writable = this.getWritable();
-    writable.__altText = altText;
-  }
-
-  override createDOM(config: EditorConfig): HTMLElement {
-    const span = document.createElement('span');
-    const className = config.theme.image;
-    if (typeof className === 'string') {
-      span.className = className;
-    }
-    return span;
-  }
-
-  override updateDOM(): boolean {
-    return false;
-  }
-
-  override decorate(): ReactNode {
-    return <ImageNodeComponent src={this.__src} alt={this.__altText} />;
-  }
-
-  override isInline(): boolean {
-    return true;
-  }
-
-  static override importJSON(serializedNode: SerializedImageNode): ImageNode {
-    return $createImageNode(serializedNode.src, serializedNode.altText);
-  }
-
-  override exportJSON(): SerializedImageNode {
-    return {
-      type: 'image',
-      version: 1,
-      src: this.__src,
-      altText: this.__altText,
-    };
-  }
-
-  override exportDOM(): DOMExportOutput {
-    const element = document.createElement('img');
-    element.setAttribute('src', this.__src);
-    element.setAttribute('alt', this.__altText);
-    return { element };
-  }
-
-  static override importDOM(): DOMConversionMap | null {
-    return {
-      img: () => ({
-        conversion: (domNode: HTMLElement) => {
-          const src = domNode.getAttribute('src') || '';
-          const alt = domNode.getAttribute('alt') || '';
-          return { node: $createImageNode(src, alt) };
-        },
-        priority: 0,
-      }),
-    };
-  }
-}
-
-export const $createImageNode = (src: string, altText: string): ImageNode => {
-  return new ImageNode(src, altText);
-};
-
-export const $isImageNode = (node: LexicalNode | null | undefined): node is ImageNode => {
-  return node instanceof ImageNode;
-};

package/src/components/MarkdownEditor/nodes/ImageNodeComponent.tsx

@@ -1,18 +0,0 @@
-import { useImageRenderer } from '../context';
-
-const isPlaceholder = (src: string) => src.startsWith('upload-placeholder-');
-
-export const ImageNodeComponent = ({ src, alt }: { src: string; alt: string }) => {
-  const renderer = useImageRenderer();
-
-  if (isPlaceholder(src)) {
-    return (
-      <span className="tw-inline-flex tw-items-center tw-gap-1 tw-rounded tw-bg-neutral-100 tw-px-2 tw-py-1 tw-text-xs tw-text-neutral-400">
-        Uploading image…
-      </span>
-    );
-  }
-
-  if (renderer) return <>{renderer({ src, alt })}</>;
-  return <img src={src} alt={alt} />;
-};

package/src/components/MarkdownEditor/nodes/MermaidNode.tsx

@@ -1,72 +0,0 @@
-/* eslint-disable react/only-export-components -- Lexical convention: $create/$is helpers co-locate with node */
-import type { ReactNode } from 'react';
-import type { LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
-import { DecoratorNode } from 'lexical';
-
-import { MermaidNodeComponent } from './MermaidNodeComponent';
-
-type SerializedMermaidNode = Spread<{ code: string }, SerializedLexicalNode>;
-
-export class MermaidNode extends DecoratorNode<ReactNode> {
-  __code: string;
-
-  static override getType(): string {
-    return 'mermaid';
-  }
-
-  static override clone(node: MermaidNode): MermaidNode {
-    return new MermaidNode(node.__code, node.__key);
-  }
-
-  constructor(code: string, key?: NodeKey) {
-    super(key);
-    this.__code = code;
-  }
-
-  getCode(): string {
-    return this.__code;
-  }
-
-  setCode(code: string): void {
-    const writable = this.getWritable();
-    writable.__code = code;
-  }
-
-  override createDOM(): HTMLElement {
-    const div = document.createElement('div');
-    div.setAttribute('data-lexical-mermaid', 'true');
-    return div;
-  }
-
-  override updateDOM(): boolean {
-    return false;
-  }
-
-  override decorate(): ReactNode {
-    return <MermaidNodeComponent code={this.__code} />;
-  }
-
-  override isInline(): boolean {
-    return false;
-  }
-
-  static override importJSON(serializedNode: SerializedMermaidNode): MermaidNode {
-    return $createMermaidNode(serializedNode.code);
-  }
-
-  override exportJSON(): SerializedMermaidNode {
-    return {
-      type: 'mermaid',
-      version: 1,
-      code: this.__code,
-    };
-  }
-}
-
-export const $createMermaidNode = (code: string): MermaidNode => {
-  return new MermaidNode(code);
-};
-
-export const $isMermaidNode = (node: LexicalNode | null | undefined): node is MermaidNode => {
-  return node instanceof MermaidNode;
-};

package/src/components/MarkdownEditor/nodes/MermaidNodeComponent.tsx

@@ -1,35 +0,0 @@
-import { lazy, Suspense } from 'react';
-
-import { Skeleton } from '../../../components/Skeleton/Skeleton';
-
-const MermaidDiagram = lazy(() =>
-  import('../../../blocks/MermaidDiagram/MermaidDiagram').then(
-    (m) => ({ default: m.MermaidDiagram }),
-    (error: unknown) => {
-      // Falling back to raw code on chunk-load failure (typically a stale tab after deploy).
-      // Logging so we don't silently swap implementations.
-      console.error('[MarkdownEditor] failed to load MermaidDiagram chunk', error);
-      return {
-        default: ({ code }: { code: string }) => (
-          <pre>
-            <code>{code}</code>
-          </pre>
-        ),
-      };
-    },
-  ),
-);
-
-export const MermaidNodeComponent = ({ code }: { code: string }) => {
-  return (
-    <Suspense
-      fallback={
-        <div className="tw-my-3 tw-overflow-hidden tw-rounded-card tw-border tw-border-neutral-150 tw-bg-neutral-50 tw-p-6">
-          <Skeleton className="tw-h-40" />
-        </div>
-      }
-    >
-      <MermaidDiagram code={code} />
-    </Suspense>
-  );
-};