paris 0.19.0 → 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.tsx

@@ -20,7 +20,7 @@ import {
     Table,
 } from 'lucide-react';
 import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import { Fragment, useCallback, useState } from 'react';
+import { Fragment, useCallback, useRef, useState } from 'react';
 import styles from './FixedToolbar.module.scss';
 import type { MarkdownEditorFeature } from './features';
 import { LinkPopover } from './LinkPopover';
@@ -56,13 +56,34 @@ const ICON_SIZE = 14;
  * Groups with no enabled features are hidden.
  */
 export const FixedToolbar: FC<FixedToolbarProps> = ({ className, overrides }) => {
-    const { editor, features } = useMarkdownEditorContext();
+    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[] = [
@@ -166,18 +187,17 @@ export const FixedToolbar: FC<FixedToolbarProps> = ({ className, overrides }) =>
             action: handleLinkClick,
             isActive: () => editor.isActive('link'),
         },
-        {
-            feature: 'image',
-            label: <Image size={ICON_SIZE} />,
-            tooltip: 'Image',
-            action: () => {
-                const url = window.prompt('Image URL');
-                if (url) {
-                    editor.chain().focus().setImage({ src: url }).run();
-                }
-            },
-            isActive: () => false,
-        },
+        ...(handleImageUpload
+            ? [
+                  {
+                      feature: 'image' as const,
+                      label: <Image size={ICON_SIZE} />,
+                      tooltip: 'Image',
+                      action: handleImageClick,
+                      isActive: () => false,
+                  },
+              ]
+            : []),
         {
             feature: 'table',
             label: <Table size={ICON_SIZE} />,
@@ -239,6 +259,16 @@ export const FixedToolbar: FC<FixedToolbarProps> = ({ className, overrides }) =>
                 </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/LinkPopover.module.scss

@@ -2,7 +2,7 @@
     position: absolute;
     top: calc(100% + 8px);
     left: 0;
-    z-index: 50;
+    z-index: var(--pte-new-layers-popover);
     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);

package/src/stories/markdowneditor/MarkdownEditor.stories.tsx

@@ -53,12 +53,15 @@ That's it! The editor outputs **markdown** on every change.`;
  * Default editor with both FixedToolbar and FloatingToolbar.
  * All features enabled.
  */
+// Mock upload handler — creates a local object URL for demo purposes
+const mockImageUpload = async (file: File) => URL.createObjectURL(file);
+
 export const Default: Story = {
     render: (args) => {
         const [value, setValue] = useState(sampleMarkdown);
         return (
             <div style={{ maxWidth: 700 }}>
-                <MarkdownEditor {...args} value={value} onChange={setValue}>
+                <MarkdownEditor {...args} value={value} onChange={setValue} handleImageUpload={mockImageUpload}>
                     <FixedToolbar />
                     <FloatingToolbar />
                 </MarkdownEditor>

package/src/stories/markdowneditor/MarkdownEditor.test.tsx

@@ -0,0 +1,115 @@
+import { render, screen } from '../../test/render';
+import { MarkdownEditor } from './MarkdownEditor';
+
+// ProseMirror needs real DOM measurement APIs that jsdom does not provide.
+const mockEditor = {
+    isDestroyed: false,
+    isEditable: true,
+    getMarkdown: () => 'mock',
+    commands: { setContent: vi.fn() },
+    setEditable: vi.fn(),
+};
+
+vi.mock('@tiptap/react', () => ({
+    useEditor: () => mockEditor,
+    EditorContent: ({ editor }: any) => (
+        <div data-testid="editor-content">{editor ? 'Editor loaded' : 'No editor'}</div>
+    ),
+}));
+
+describe('MarkdownEditor', () => {
+    it('renders without crashing', () => {
+        render(<MarkdownEditor value="" />);
+        expect(screen.getByTestId('editor-content')).toBeInTheDocument();
+    });
+
+    it('renders the editor content area', () => {
+        render(<MarkdownEditor value="" />);
+        expect(screen.getByText('Editor loaded')).toBeInTheDocument();
+    });
+
+    it('renders children (toolbar slot) inside the editor container', () => {
+        render(
+            <MarkdownEditor value="">
+                <div data-testid="custom-toolbar">Toolbar</div>
+            </MarkdownEditor>,
+        );
+        expect(screen.getByTestId('custom-toolbar')).toBeInTheDocument();
+    });
+
+    it('applies custom className to root element', () => {
+        const { container } = render(<MarkdownEditor value="" className="my-editor" />);
+        const root = container.firstElementChild;
+        expect(root).toHaveClass('my-editor');
+    });
+
+    it('sets data-status attribute based on status prop', () => {
+        const { container } = render(<MarkdownEditor value="" status="error" />);
+        const editorContainer = container.querySelector('[data-status]');
+        expect(editorContainer).toHaveAttribute('data-status', 'error');
+    });
+
+    it('sets data-status to success', () => {
+        const { container } = render(<MarkdownEditor value="" status="success" />);
+        const editorContainer = container.querySelector('[data-status]');
+        expect(editorContainer).toHaveAttribute('data-status', 'success');
+    });
+
+    it('sets data-status to default by default', () => {
+        const { container } = render(<MarkdownEditor value="" />);
+        const editorContainer = container.querySelector('[data-status]');
+        expect(editorContainer).toHaveAttribute('data-status', 'default');
+    });
+
+    it('sets data-disabled attribute when editable is false', () => {
+        const { container } = render(<MarkdownEditor value="" editable={false} />);
+        const editorContainer = container.querySelector('[data-disabled]');
+        expect(editorContainer).toHaveAttribute('data-disabled', 'true');
+    });
+
+    it('sets data-disabled to false when editable is true (default)', () => {
+        const { container } = render(<MarkdownEditor value="" />);
+        const editorContainer = container.querySelector('[data-disabled]');
+        expect(editorContainer).toHaveAttribute('data-disabled', 'false');
+    });
+
+    it('applies override props to root element', () => {
+        const { container } = render(
+            <MarkdownEditor
+                value=""
+                overrides={{
+                    root: { 'data-testid': 'root-override' },
+                }}
+            />,
+        );
+        expect(screen.getByTestId('root-override')).toBeInTheDocument();
+    });
+
+    it('applies override props to editor container element', () => {
+        render(
+            <MarkdownEditor
+                value=""
+                overrides={{
+                    editorContainer: { 'data-testid': 'container-override' },
+                }}
+            />,
+        );
+        expect(screen.getByTestId('container-override')).toBeInTheDocument();
+    });
+
+    it('sets the markdown base font size CSS variable', () => {
+        const { container } = render(<MarkdownEditor value="" size="paragraphMedium" />);
+        const editorContent = container.querySelector('[class*="editorContent"]');
+        expect(editorContent).toHaveStyle({
+            '--markdown-base-font-size': 'var(--pte-new-typography-styles-paragraphMedium-fontSize)',
+        });
+    });
+
+    it('uses paragraphSmall as the default size', () => {
+        const { container } = render(<MarkdownEditor value="" />);
+        const editorContent = container.querySelector('[class*="editorContent"]');
+        expect(editorContent).toHaveStyle({
+            '--markdown-base-font-size': 'var(--pte-new-typography-styles-paragraphSmall-fontSize)',
+        });
+    });
+});

package/src/stories/markdowneditor/MarkdownEditor.tsx

@@ -8,6 +8,7 @@ import type { MarkdownSize } from '../markdown';
 import type { MarkdownEditorFeature } from './features';
 import { ALL_FEATURES } from './features';
 import styles from './MarkdownEditor.module.scss';
+import type { ImageUploadHandler } from './MarkdownEditorContext';
 import { MarkdownEditorContext } from './MarkdownEditorContext';
 import { useMarkdownEditor } from './useMarkdownEditor';
 
@@ -31,6 +32,11 @@ export type MarkdownEditorProps = {
     autofocus?: boolean;
     /** An optional CSS class name for the root wrapper. */
     className?: string;
+    /**
+     * Handler for image uploads. Receives a File, should return a Promise
+     * resolving to the image URL. If not provided, the image button is hidden.
+     */
+    handleImageUpload?: ImageUploadHandler;
     /** Visual status for the editor container (follows Input pattern). */
     status?: 'default' | 'error' | 'success';
     /** Prop overrides for sub-elements. */
@@ -80,6 +86,7 @@ export const MarkdownEditor: FC<MarkdownEditorProps> = ({
     size = 'paragraphSmall',
     editable = true,
     autofocus = false,
+    handleImageUpload,
     className,
     status = 'default',
     overrides,
@@ -94,7 +101,10 @@ export const MarkdownEditor: FC<MarkdownEditorProps> = ({
         autofocus,
     });
 
-    const contextValue = useMemo(() => ({ editor, features: featureSet }), [editor, featureSet]);
+    const contextValue = useMemo(
+        () => ({ editor, features: featureSet, handleImageUpload }),
+        [editor, featureSet, handleImageUpload],
+    );
 
     return (
         <MarkdownEditorContext.Provider value={contextValue}>

package/src/stories/markdowneditor/MarkdownEditorContext.tsx

@@ -4,9 +4,12 @@ import type { Editor } from '@tiptap/react';
 import { createContext, useContext } from 'react';
 import type { MarkdownEditorFeature } from './features';
 
+export type ImageUploadHandler = (file: File) => Promise<string>;
+
 export type MarkdownEditorContextValue = {
     editor: Editor | null;
     features: Set<MarkdownEditorFeature>;
+    handleImageUpload?: ImageUploadHandler;
 };
 
 export const MarkdownEditorContext = createContext<MarkdownEditorContextValue>({

package/src/stories/markdowneditor/index.ts

@@ -6,6 +6,7 @@ export type { MarkdownEditorFeature } from './features';
 export { ALL_FEATURES, FEATURES } from './features';
 export type { MarkdownEditorProps } from './MarkdownEditor';
 export { MarkdownEditor } from './MarkdownEditor';
+export type { ImageUploadHandler } from './MarkdownEditorContext';
 export { useMarkdownEditorContext } from './MarkdownEditorContext';
 export type { ToolbarButtonProps } from './ToolbarButton';
 export { ToolbarButton } from './ToolbarButton';

package/src/stories/menu/Menu.module.scss

@@ -19,7 +19,7 @@
     align-items: flex-start;
 
     overflow: hidden;
-    z-index: 100;
+    z-index: var(--pte-new-layers-menu);
 
     transition: var(--pte-animations-interaction);
     opacity: 1;