paris 0.18.1 → 0.20.0

package/src/stories/markdown/Markdown.test.tsx

@@ -0,0 +1,228 @@
+import { render, screen, waitFor } from '../../test/render';
+import { Markdown } from './Markdown';
+
+describe('Markdown', () => {
+    describe('headings', () => {
+        it('renders h1', async () => {
+            render(<Markdown>{'# Heading 1'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('Heading 1')).toBeInTheDocument();
+            });
+            expect(screen.getByText('Heading 1').closest('h1')).toBeInTheDocument();
+        });
+
+        it('renders h2', async () => {
+            render(<Markdown>{'## Heading 2'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('Heading 2').closest('h2')).toBeInTheDocument();
+            });
+        });
+
+        it('renders h3', async () => {
+            render(<Markdown>{'### Heading 3'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('Heading 3').closest('h3')).toBeInTheDocument();
+            });
+        });
+
+        it('generates slug IDs for headings', async () => {
+            render(<Markdown>{'# Hello World'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('Hello World')).toHaveAttribute('id', 'hello-world');
+            });
+        });
+    });
+
+    describe('paragraphs and inline text', () => {
+        it('renders paragraphs', async () => {
+            render(<Markdown>{'This is a paragraph.'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('This is a paragraph.')).toBeInTheDocument();
+            });
+        });
+
+        it('renders bold text', async () => {
+            render(<Markdown>{'This is **bold** text.'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('bold')).toBeInTheDocument();
+            });
+        });
+
+        it('renders italic text', async () => {
+            render(<Markdown>{'This is *italic* text.'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('italic')).toBeInTheDocument();
+            });
+        });
+    });
+
+    describe('links', () => {
+        it('renders links with href', async () => {
+            render(<Markdown>{'[Click me](https://example.com)'}</Markdown>);
+            await waitFor(() => {
+                const link = screen.getByText('Click me');
+                expect(link.closest('a')).toHaveAttribute('href', 'https://example.com');
+            });
+        });
+
+        it('renders links with target="_blank"', async () => {
+            render(<Markdown>{'[Link](https://example.com)'}</Markdown>);
+            await waitFor(() => {
+                const link = screen.getByText('Link');
+                expect(link.closest('a')).toHaveAttribute('target', '_blank');
+            });
+        });
+    });
+
+    describe('lists', () => {
+        it('renders unordered lists', async () => {
+            render(<Markdown>{'- Item 1\n- Item 2\n- Item 3'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('Item 1')).toBeInTheDocument();
+                expect(screen.getByText('Item 2')).toBeInTheDocument();
+                expect(screen.getByText('Item 3')).toBeInTheDocument();
+            });
+        });
+
+        it('renders ordered lists', async () => {
+            render(<Markdown>{'1. First\n2. Second\n3. Third'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('First')).toBeInTheDocument();
+                expect(screen.getByText('Second')).toBeInTheDocument();
+            });
+        });
+    });
+
+    describe('code', () => {
+        it('renders inline code', async () => {
+            render(<Markdown>{'Use `console.log()` to debug.'}</Markdown>);
+            await waitFor(() => {
+                const code = screen.getByText('console.log()');
+                expect(code.tagName).toBe('CODE');
+            });
+        });
+
+        it('renders code blocks with language', async () => {
+            render(<Markdown>{'```js\nconst x = 1;\n```'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('js')).toBeInTheDocument();
+                expect(screen.getByText('const x = 1;')).toBeInTheDocument();
+            });
+        });
+    });
+
+    describe('GFM extensions', () => {
+        it('renders strikethrough text', async () => {
+            render(<Markdown>{'~~deleted~~'}</Markdown>);
+            await waitFor(() => {
+                const del = screen.getByText('deleted');
+                expect(del.closest('span')).toHaveClass('strikethrough');
+            });
+        });
+
+        it('renders tables', async () => {
+            const md = '| Name | Age |\n| --- | --- |\n| Alice | 30 |';
+            render(<Markdown>{md}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('Name')).toBeInTheDocument();
+                expect(screen.getByText('Alice')).toBeInTheDocument();
+                expect(screen.getByText('30')).toBeInTheDocument();
+            });
+        });
+
+        it('renders task lists', async () => {
+            const md = '- [x] Done\n- [ ] Todo';
+            const { container } = render(<Markdown>{md}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('Done')).toBeInTheDocument();
+                expect(screen.getByText('Todo')).toBeInTheDocument();
+            });
+            const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+            expect(checkboxes.length).toBe(2);
+        });
+    });
+
+    describe('raw HTML', () => {
+        it('renders kbd elements', async () => {
+            render(<Markdown>{'Press <kbd>Ctrl</kbd>+<kbd>C</kbd>'}</Markdown>);
+            await waitFor(() => {
+                const kbd = screen.getByText('Ctrl');
+                expect(kbd.tagName).toBe('KBD');
+            });
+        });
+
+        it('renders mark elements', async () => {
+            render(<Markdown>{'This is <mark>highlighted</mark> text.'}</Markdown>);
+            await waitFor(() => {
+                const mark = screen.getByText('highlighted');
+                expect(mark.tagName).toBe('MARK');
+            });
+        });
+
+        it('renders sup elements', async () => {
+            render(<Markdown>{'E=mc<sup>2</sup>'}</Markdown>);
+            await waitFor(() => {
+                const sup = screen.getByText('2');
+                expect(sup.tagName).toBe('SUP');
+            });
+        });
+    });
+
+    describe('blockquotes', () => {
+        it('renders blockquotes', async () => {
+            render(<Markdown>{'> This is a quote'}</Markdown>);
+            await waitFor(() => {
+                expect(screen.getByText('This is a quote')).toBeInTheDocument();
+            });
+        });
+    });
+
+    describe('horizontal rules', () => {
+        it('renders hr elements', async () => {
+            const { container } = render(<Markdown>{'Above\n\n---\n\nBelow'}</Markdown>);
+            await waitFor(() => {
+                expect(container.querySelector('hr')).toBeInTheDocument();
+            });
+        });
+    });
+
+    describe('images', () => {
+        it('renders images with src and alt', async () => {
+            render(<Markdown>{'![Alt text](https://example.com/image.png)'}</Markdown>);
+            await waitFor(() => {
+                const img = screen.getByAltText('Alt text');
+                expect(img).toHaveAttribute('src', 'https://example.com/image.png');
+            });
+        });
+    });
+
+    describe('className', () => {
+        it('applies custom className', () => {
+            const { container } = render(<Markdown className="custom-md">{'Hello'}</Markdown>);
+            expect(container.firstElementChild).toHaveClass('custom-md');
+        });
+
+        it('always applies the markdown base class', () => {
+            const { container } = render(<Markdown>{'Hello'}</Markdown>);
+            expect(container.firstElementChild).toHaveClass('markdown');
+        });
+    });
+
+    describe('size', () => {
+        it('sets CSS variable for base font size', () => {
+            const { container } = render(<Markdown size="paragraphLarge">{'Hello'}</Markdown>);
+            const wrapper = container.firstElementChild as HTMLElement;
+            expect(wrapper.style.getPropertyValue('--markdown-base-font-size')).toBe(
+                'var(--pte-new-typography-styles-paragraphLarge-fontSize)',
+            );
+        });
+
+        it('defaults to paragraphSmall', () => {
+            const { container } = render(<Markdown>{'Hello'}</Markdown>);
+            const wrapper = container.firstElementChild as HTMLElement;
+            expect(wrapper.style.getPropertyValue('--markdown-base-font-size')).toBe(
+                'var(--pte-new-typography-styles-paragraphSmall-fontSize)',
+            );
+        });
+    });
+});

package/src/stories/markdowneditor/FixedToolbar.module.scss

@@ -0,0 +1,24 @@
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 6px 8px;
+    border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
+    background-color: var(--pte-new-colors-backgroundPrimary);
+    flex-wrap: wrap;
+    position: relative;
+}
+
+.group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.separator {
+    width: 1px;
+    height: 18px;
+    background-color: var(--pte-new-colors-borderSubtle);
+    margin: 0 4px;
+    flex-shrink: 0;
+}

package/src/stories/markdowneditor/FixedToolbar.tsx

@@ -0,0 +1,274 @@
+'use client';
+
+import { clsx } from 'clsx';
+import {
+    Bold,
+    Code,
+    Heading1,
+    Heading2,
+    Heading3,
+    Image,
+    Italic,
+    Link,
+    List,
+    ListChecks,
+    ListOrdered,
+    Minus,
+    Quote,
+    SquareCode,
+    Strikethrough,
+    Table,
+} from 'lucide-react';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { Fragment, useCallback, useRef, useState } from 'react';
+import styles from './FixedToolbar.module.scss';
+import type { MarkdownEditorFeature } from './features';
+import { LinkPopover } from './LinkPopover';
+import { useMarkdownEditorContext } from './MarkdownEditorContext';
+import { ToolbarButton } from './ToolbarButton';
+
+export type FixedToolbarProps = {
+    /** An optional CSS class name. */
+    className?: string;
+    /** Prop overrides for sub-elements. */
+    overrides?: {
+        root?: ComponentPropsWithoutRef<'div'>;
+        group?: ComponentPropsWithoutRef<'div'>;
+        separator?: ComponentPropsWithoutRef<'div'>;
+    };
+};
+
+type ToolbarItem = {
+    feature: MarkdownEditorFeature;
+    label: ReactNode;
+    tooltip: string;
+    action: () => void;
+    isActive: () => boolean;
+};
+
+const ICON_SIZE = 14;
+
+/**
+ * A fixed toolbar that renders above the editor content.
+ * Reads the editor instance and enabled features from MarkdownEditorContext.
+ *
+ * Renders button groups: Inline marks | Blocks | Lists | Inserts.
+ * Groups with no enabled features are hidden.
+ */
+export const FixedToolbar: FC<FixedToolbarProps> = ({ className, overrides }) => {
+    const { editor, features, handleImageUpload } = useMarkdownEditorContext();
+    const [showLinkPopover, setShowLinkPopover] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleLinkClick = useCallback(() => {
+        setShowLinkPopover((prev) => !prev);
+    }, []);
+
+    const handleImageClick = useCallback(() => {
+        fileInputRef.current?.click();
+    }, []);
+
+    const handleFileChange = useCallback(
+        async (e: React.ChangeEvent<HTMLInputElement>) => {
+            const file = e.target.files?.[0];
+            if (!file || !editor || !handleImageUpload) return;
+            try {
+                const url = await handleImageUpload(file);
+                editor.chain().focus().setImage({ src: url }).run();
+            } catch {
+                // Upload failed — consumer's handler should surface errors
+            }
+            // Reset so the same file can be re-selected
+            e.target.value = '';
+        },
+        [editor, handleImageUpload],
+    );
+
+    if (!editor) return null;
+
+    const inlineMarks: ToolbarItem[] = [
+        {
+            feature: 'bold',
+            label: <Bold size={ICON_SIZE} />,
+            tooltip: 'Bold (⌘B)',
+            action: () => editor.chain().focus().toggleBold().run(),
+            isActive: () => editor.isActive('bold'),
+        },
+        {
+            feature: 'italic',
+            label: <Italic size={ICON_SIZE} />,
+            tooltip: 'Italic (⌘I)',
+            action: () => editor.chain().focus().toggleItalic().run(),
+            isActive: () => editor.isActive('italic'),
+        },
+        {
+            feature: 'strikethrough',
+            label: <Strikethrough size={ICON_SIZE} />,
+            tooltip: 'Strikethrough (⌘⇧X)',
+            action: () => editor.chain().focus().toggleStrike().run(),
+            isActive: () => editor.isActive('strike'),
+        },
+        {
+            feature: 'code',
+            label: <Code size={ICON_SIZE} />,
+            tooltip: 'Inline code (⌘E)',
+            action: () => editor.chain().focus().toggleCode().run(),
+            isActive: () => editor.isActive('code'),
+        },
+    ];
+
+    const blocks: ToolbarItem[] = [
+        {
+            feature: 'heading',
+            label: <Heading1 size={ICON_SIZE} />,
+            tooltip: 'Heading 1',
+            action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+            isActive: () => editor.isActive('heading', { level: 1 }),
+        },
+        {
+            feature: 'heading',
+            label: <Heading2 size={ICON_SIZE} />,
+            tooltip: 'Heading 2',
+            action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+            isActive: () => editor.isActive('heading', { level: 2 }),
+        },
+        {
+            feature: 'heading',
+            label: <Heading3 size={ICON_SIZE} />,
+            tooltip: 'Heading 3',
+            action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+            isActive: () => editor.isActive('heading', { level: 3 }),
+        },
+        {
+            feature: 'blockquote',
+            label: <Quote size={ICON_SIZE} />,
+            tooltip: 'Blockquote',
+            action: () => editor.chain().focus().toggleBlockquote().run(),
+            isActive: () => editor.isActive('blockquote'),
+        },
+        {
+            feature: 'horizontalRule',
+            label: <Minus size={ICON_SIZE} />,
+            tooltip: 'Horizontal rule',
+            action: () => editor.chain().focus().setHorizontalRule().run(),
+            isActive: () => false,
+        },
+    ];
+
+    const lists: ToolbarItem[] = [
+        {
+            feature: 'bulletList',
+            label: <List size={ICON_SIZE} />,
+            tooltip: 'Bullet list (⌘⇧8)',
+            action: () => editor.chain().focus().toggleBulletList().run(),
+            isActive: () => editor.isActive('bulletList'),
+        },
+        {
+            feature: 'orderedList',
+            label: <ListOrdered size={ICON_SIZE} />,
+            tooltip: 'Ordered list (⌘⇧7)',
+            action: () => editor.chain().focus().toggleOrderedList().run(),
+            isActive: () => editor.isActive('orderedList'),
+        },
+        {
+            feature: 'taskList',
+            label: <ListChecks size={ICON_SIZE} />,
+            tooltip: 'Task list',
+            action: () => editor.chain().focus().toggleTaskList().run(),
+            isActive: () => editor.isActive('taskList'),
+        },
+    ];
+
+    const inserts: ToolbarItem[] = [
+        {
+            feature: 'link',
+            label: <Link size={ICON_SIZE} />,
+            tooltip: 'Link',
+            action: handleLinkClick,
+            isActive: () => editor.isActive('link'),
+        },
+        ...(handleImageUpload
+            ? [
+                  {
+                      feature: 'image' as const,
+                      label: <Image size={ICON_SIZE} />,
+                      tooltip: 'Image',
+                      action: handleImageClick,
+                      isActive: () => false,
+                  },
+              ]
+            : []),
+        {
+            feature: 'table',
+            label: <Table size={ICON_SIZE} />,
+            tooltip: 'Insert table',
+            action: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+            isActive: () => false,
+        },
+        {
+            feature: 'codeBlock',
+            label: <SquareCode size={ICON_SIZE} />,
+            tooltip: 'Code block',
+            action: () => editor.chain().focus().toggleCodeBlock().run(),
+            isActive: () => editor.isActive('codeBlock'),
+        },
+    ];
+
+    const groupEntries = [
+        { name: 'inline', items: inlineMarks },
+        { name: 'blocks', items: blocks },
+        { name: 'lists', items: lists },
+        { name: 'inserts', items: inserts },
+    ];
+
+    // Filter each group to only include items whose feature is enabled
+    const filteredGroups = groupEntries
+        .map((g) => ({ name: g.name, items: g.items.filter((item) => features.has(item.feature)) }))
+        .filter((g) => g.items.length > 0);
+
+    if (filteredGroups.length === 0) return null;
+
+    return (
+        <div
+            role="toolbar"
+            aria-label="Formatting options"
+            {...overrides?.root}
+            className={clsx(styles.toolbar, className, overrides?.root?.className)}
+        >
+            {filteredGroups.map((group, groupIndex) => (
+                <Fragment key={group.name}>
+                    {groupIndex > 0 && (
+                        <div
+                            {...overrides?.separator}
+                            className={clsx(styles.separator, overrides?.separator?.className)}
+                            aria-hidden="true"
+                        />
+                    )}
+                    <div {...overrides?.group} className={clsx(styles.group, overrides?.group?.className)}>
+                        {group.items.map((item) => (
+                            <ToolbarButton
+                                key={item.tooltip}
+                                isActive={item.isActive()}
+                                onAction={item.action}
+                                tooltip={item.tooltip}
+                            >
+                                {item.label}
+                            </ToolbarButton>
+                        ))}
+                    </div>
+                </Fragment>
+            ))}
+            {showLinkPopover && features.has('link') && <LinkPopover onClose={() => setShowLinkPopover(false)} />}
+            {handleImageUpload && (
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    onChange={handleFileChange}
+                    style={{ display: 'none' }}
+                    tabIndex={-1}
+                />
+            )}
+        </div>
+    );
+};

package/src/stories/markdowneditor/FloatingToolbar.module.scss

@@ -0,0 +1,21 @@
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px 6px;
+    background-color: var(--pte-new-colors-surfacePrimary, var(--pte-new-colors-backgroundPrimary));
+    border: 1px solid var(--pte-new-colors-borderSubtle);
+    border-radius: var(--pte-new-borders-radius-rounded, 8px);
+    box-shadow: var(
+        --pte-new-shadows-shallowPopup,
+        0 4px 12px rgba(0, 0, 0, 0.15)
+    );
+}
+
+.separator {
+    width: 1px;
+    height: 18px;
+    background-color: var(--pte-new-colors-borderSubtle);
+    margin: 0 2px;
+    flex-shrink: 0;
+}

package/src/stories/markdowneditor/FloatingToolbar.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { BubbleMenu } from '@tiptap/react/menus';
+import { clsx } from 'clsx';
+import { Bold, Code, Italic, Link, Strikethrough } from 'lucide-react';
+import type { ComponentPropsWithoutRef, FC } from 'react';
+import { Fragment, useState } from 'react';
+import styles from './FloatingToolbar.module.scss';
+import { LinkPopover } from './LinkPopover';
+import { useMarkdownEditorContext } from './MarkdownEditorContext';
+import { ToolbarButton } from './ToolbarButton';
+
+export type FloatingToolbarProps = {
+    /** An optional CSS class name. */
+    className?: string;
+    /** Prop overrides for sub-elements. */
+    overrides?: {
+        root?: ComponentPropsWithoutRef<'div'>;
+    };
+};
+
+const ICON_SIZE = 14;
+
+/**
+ * A floating toolbar that appears when text is selected.
+ * Shows inline formatting options: bold, italic, strikethrough, code, link.
+ * Wraps Tiptap's BubbleMenu component.
+ */
+export const FloatingToolbar: FC<FloatingToolbarProps> = ({ className, overrides }) => {
+    const { editor, features } = useMarkdownEditorContext();
+    const [showLinkPopover, setShowLinkPopover] = useState(false);
+
+    if (!editor) return null;
+
+    const items = [
+        {
+            feature: 'bold' as const,
+            label: <Bold size={ICON_SIZE} />,
+            tooltip: 'Bold (⌘B)',
+            action: () => editor.chain().focus().toggleBold().run(),
+            isActive: () => editor.isActive('bold'),
+        },
+        {
+            feature: 'italic' as const,
+            label: <Italic size={ICON_SIZE} />,
+            tooltip: 'Italic (⌘I)',
+            action: () => editor.chain().focus().toggleItalic().run(),
+            isActive: () => editor.isActive('italic'),
+        },
+        {
+            feature: 'strikethrough' as const,
+            label: <Strikethrough size={ICON_SIZE} />,
+            tooltip: 'Strikethrough (⌘⇧X)',
+            action: () => editor.chain().focus().toggleStrike().run(),
+            isActive: () => editor.isActive('strike'),
+        },
+        {
+            feature: 'code' as const,
+            label: <Code size={ICON_SIZE} />,
+            tooltip: 'Inline code (⌘E)',
+            action: () => editor.chain().focus().toggleCode().run(),
+            isActive: () => editor.isActive('code'),
+        },
+        {
+            feature: 'link' as const,
+            label: <Link size={ICON_SIZE} />,
+            tooltip: 'Link',
+            action: () => setShowLinkPopover((prev) => !prev),
+            isActive: () => editor.isActive('link'),
+        },
+    ];
+
+    const visibleItems = items.filter((item) => features.has(item.feature));
+
+    if (visibleItems.length === 0) return null;
+
+    return (
+        <BubbleMenu editor={editor} options={{ placement: 'top', offset: 8 }}>
+            <div {...overrides?.root} className={clsx(styles.toolbar, className, overrides?.root?.className)}>
+                {visibleItems.map((item, index) => (
+                    <Fragment key={item.feature}>
+                        {index > 0 && item.feature === 'link' && (
+                            <div className={styles.separator} aria-hidden="true" />
+                        )}
+                        <ToolbarButton isActive={item.isActive()} onAction={item.action} tooltip={item.tooltip}>
+                            {item.label}
+                        </ToolbarButton>
+                    </Fragment>
+                ))}
+                {showLinkPopover && features.has('link') && <LinkPopover onClose={() => setShowLinkPopover(false)} />}
+            </div>
+        </BubbleMenu>
+    );
+};