paris 0.23.0 → 0.24.0

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

@@ -1,405 +0,0 @@
-/* ── MarkdownEditor styles ────────────────────────────────────
- * Uses Paris design tokens (--pte-*) for consistent theming.
- * Editor content styles mirror Markdown.module.scss but target
- * native HTML elements rendered by Tiptap (not CSS module classes).
- * ──────────────────────────────────────────────────────────── */
-
-.root {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-// ── Editor container (input-like wrapper) ─────────────────
-.editorContainer {
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--pte-borders-radius-rectangle);
-    background-color: var(--pte-new-colors-inputFill);
-    border: 1px solid var(--pte-new-colors-inputFill);
-    transition: var(--pte-animations-interaction);
-
-    &:focus-within {
-        outline: none;
-        border-color: var(--pte-new-colors-inputBorderFocus);
-        background-color: var(--pte-new-colors-inputFillFocus);
-    }
-
-    &[data-status='error'] {
-        border-color: var(--pte-new-colors-inputBorderNegative);
-        background-color: var(--pte-new-colors-inputFillNegative);
-        color: var(--pte-new-colors-contentNegative);
-
-        &:focus-within {
-            color: var(--pte-new-colors-contentPrimary);
-        }
-    }
-
-    &[data-status='success'] {
-        border-color: var(--pte-new-colors-backgroundPositive);
-    }
-
-    &[data-disabled='true'] {
-        background-color: var(--pte-new-colors-inputFillDisabled);
-        border-color: var(--pte-new-colors-inputFillDisabled);
-        color: var(--pte-new-colors-contentDisabled);
-        pointer-events: none;
-        cursor: default;
-
-        &:focus-within {
-            border-color: var(--pte-new-colors-inputFillDisabled) !important;
-        }
-    }
-}
-
-// ── Editor content area ───────────────────────────────────
-// Targets native HTML elements rendered by Tiptap (not CSS module classes).
-// Mirrors the visual output of the read-only Markdown component.
-.editorContent {
-    padding: 12px 16px;
-    min-height: 120px;
-    outline: none;
-    line-height: 1.7;
-    color: var(--pte-new-colors-contentPrimary);
-    font-size: var(--markdown-base-font-size, 14px);
-
-    // Tiptap root element
-    :global(.tiptap) {
-        outline: none;
-        min-height: inherit;
-
-        > *:first-child {
-            margin-top: 0;
-        }
-
-        > *:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    // ── Placeholder ──────────────────────────────────────
-    :global(.tiptap p.is-editor-empty:first-child::before) {
-        content: attr(data-placeholder);
-        color: var(--pte-new-colors-contentTertiary);
-        pointer-events: none;
-        float: left;
-        height: 0;
-    }
-
-    // ── Headings ─────────────────────────────────────────
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        margin-top: 1.5em;
-        margin-bottom: 0.6em;
-        color: var(--pte-new-colors-contentPrimary);
-        line-height: 1.3;
-
-        &:first-child {
-            margin-top: 0;
-        }
-    }
-
-    h1 {
-        font-size: var(--pte-new-typography-styles-headingLarge-fontSize, 32px);
-        font-weight: var(--pte-new-typography-styles-headingLarge-fontWeight, 700);
-    }
-
-    h2 {
-        font-size: var(--pte-new-typography-styles-headingMedium-fontSize, 24px);
-        font-weight: var(--pte-new-typography-styles-headingMedium-fontWeight, 700);
-    }
-
-    h3 {
-        font-size: var(--pte-new-typography-styles-headingSmall-fontSize, 20px);
-        font-weight: var(--pte-new-typography-styles-headingSmall-fontWeight, 700);
-    }
-
-    h4 {
-        font-size: var(--pte-new-typography-styles-headingXSmall-fontSize, 18px);
-        font-weight: var(--pte-new-typography-styles-headingXSmall-fontWeight, 600);
-    }
-
-    h5 {
-        font-size: var(--pte-new-typography-styles-headingXXSmall-fontSize, 16px);
-        font-weight: var(--pte-new-typography-styles-headingXXSmall-fontWeight, 600);
-    }
-
-    h6 {
-        font-size: var(--pte-new-typography-styles-labelMedium-fontSize, 14px);
-        font-weight: var(--pte-new-typography-styles-labelMedium-fontWeight, 600);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-    }
-
-    // ── Paragraphs ───────────────────────────────────────
-    p {
-        margin-bottom: 1em;
-        line-height: 1.7;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    // ── Inline marks ─────────────────────────────────────
-    strong {
-        font-weight: 600;
-    }
-
-    em {
-        font-style: italic;
-    }
-
-    s {
-        text-decoration: line-through;
-        text-decoration-color: var(--pte-new-colors-contentTertiary);
-    }
-
-    // ── Links ────────────────────────────────────────────
-    a {
-        color: var(--pte-new-colors-contentAccent);
-        text-decoration: underline;
-        text-underline-offset: 2px;
-        cursor: pointer;
-
-        &:hover {
-            text-decoration-color: var(--pte-new-colors-contentAccent);
-        }
-    }
-
-    // ── Images ───────────────────────────────────────────
-    img {
-        max-width: 100%;
-        height: auto;
-        border-radius: var(--pte-new-borders-radius-rounded);
-        border: 1px solid var(--pte-new-colors-borderSubtle);
-        margin: 1em 0;
-        display: block;
-    }
-
-    // ── Blockquotes ──────────────────────────────────────
-    blockquote {
-        border-left: 3px solid var(--pte-new-colors-borderMedium);
-        padding: 8px 16px;
-        margin: 1em 0;
-        background-color: var(--pte-new-colors-backgroundSecondary);
-        border-radius: 0 var(--pte-new-borders-radius-rounded, 8px)
-            var(--pte-new-borders-radius-rounded, 8px) 0;
-        color: var(--pte-new-colors-contentSecondary);
-
-        blockquote {
-            margin: 0.5em 0;
-        }
-
-        p {
-            margin-bottom: 0.5em;
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-    }
-
-    // ── Horizontal rules ─────────────────────────────────
-    hr {
-        border: none;
-        border-top: 1px solid var(--pte-new-colors-borderMedium);
-        margin: 1.5em 0;
-    }
-
-    // ── Lists ────────────────────────────────────────────
-    ul,
-    ol {
-        margin: 0.5em 0 1em;
-        padding-left: 1.5em;
-    }
-
-    ul {
-        list-style-type: disc;
-
-        ul {
-            list-style-type: circle;
-            margin: 0.25em 0;
-
-            ul {
-                list-style-type: square;
-            }
-        }
-    }
-
-    ol {
-        list-style-type: decimal;
-
-        ol {
-            list-style-type: lower-alpha;
-            margin: 0.25em 0;
-
-            ol {
-                list-style-type: lower-roman;
-            }
-        }
-    }
-
-    li {
-        margin-bottom: 0.25em;
-        line-height: 1.7;
-
-        p {
-            margin-bottom: 0.25em;
-        }
-    }
-
-    // ── Task lists (Tiptap v3 uses data-checked on li) ────
-    ul[data-type='taskList'] {
-        list-style: none;
-        padding-left: 0;
-    }
-
-    li[data-checked] {
-        display: flex;
-        flex-direction: row;
-        align-items: baseline;
-        gap: 8px;
-
-        > label {
-            flex-shrink: 0;
-
-            input[type='checkbox'] {
-                appearance: none;
-                width: 14px;
-                height: 14px;
-                border: 2px solid var(--pte-new-colors-contentTertiary);
-                border-radius: var(--pte-borders-radius-rectangle);
-                background: transparent;
-                cursor: pointer;
-                position: relative;
-                top: 2px;
-                transition: var(--pte-animations-interaction);
-
-                &:checked {
-                    // Matches the Paris Checkbox: filled SVG covers the full 14x14 area
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        inset: -2px;
-                        background-color: var(--pte-new-colors-contentPrimary);
-                        mask-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.333374 0.333252V13.6666H13.6667V0.333252H0.333374ZM6.00004 10.3999L2.26672 6.66658L3.66671 5.26658L5.93339 7.53325L10.2 3.26658L11.6001 4.66659L6.00004 10.3999Z' fill='black'/%3E%3C/svg%3E");
-                        mask-size: contain;
-                        mask-repeat: no-repeat;
-                    }
-                }
-            }
-        }
-
-        > div {
-            flex: 1;
-        }
-    }
-
-    // ── Inline code ──────────────────────────────────────
-    code {
-        font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
-        font-size: 0.875em;
-        padding: 2px 6px;
-        border-radius: 6px;
-        background-color: var(--pte-new-colors-backgroundSecondary);
-        border: 1px solid var(--pte-new-colors-borderSubtle);
-        color: var(--pte-new-colors-contentPrimary);
-        word-break: break-word;
-    }
-
-    // ── Code blocks ──────────────────────────────────────
-    pre {
-        margin: 1em 0;
-        padding: 0;
-        background: transparent;
-        overflow: visible;
-
-        code {
-            display: block;
-            padding: 16px;
-            overflow-x: auto;
-            font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
-            font-size: 13px;
-            line-height: 1.6;
-            tab-size: 4;
-            white-space: pre;
-            border-radius: var(--pte-new-borders-radius-rounded, 8px);
-            background-color: var(--pte-new-colors-backgroundSecondary);
-            border: 1px solid var(--pte-new-colors-borderSubtle);
-            color: var(--pte-new-colors-contentPrimary);
-
-            &::-webkit-scrollbar {
-                height: 6px;
-            }
-
-            &::-webkit-scrollbar-track {
-                background: transparent;
-            }
-
-            &::-webkit-scrollbar-thumb {
-                background-color: var(--pte-new-colors-borderMedium);
-                border-radius: 3px;
-            }
-        }
-    }
-
-    // ── Tables ───────────────────────────────────────────
-    table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: 1em 0;
-        font-size: var(--pte-new-typography-paragraphSmall-fontSize, 13px);
-        border-radius: var(--pte-new-borders-radius-rounded, 8px);
-        border: 1px solid var(--pte-new-colors-borderSubtle);
-        overflow: hidden;
-    }
-
-    thead {
-        background-color: var(--pte-new-colors-backgroundSecondary);
-    }
-
-    th {
-        padding: 10px 16px;
-        text-align: left;
-        border-bottom: 1px solid var(--pte-new-colors-borderMedium);
-        white-space: nowrap;
-        color: var(--pte-new-colors-contentSecondary);
-        font-size: var(--pte-new-typography-styles-labelXSmall-fontSize, 11px);
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-    }
-
-    td {
-        padding: 10px 16px;
-        border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
-        color: var(--pte-new-colors-contentPrimary);
-    }
-
-    tr:last-child td {
-        border-bottom: none;
-    }
-
-    tbody tr {
-        transition: background-color 0.15s ease;
-
-        &:hover {
-            background-color: var(--pte-new-colors-backgroundSecondary);
-        }
-    }
-
-    // ── Tiptap table selection states ────────────────────
-    :global(.selectedCell) {
-        background-color: var(--pte-new-colors-backgroundAccentSubtle, rgba(99, 102, 241, 0.1));
-    }
-
-    // ── Selection highlight ──────────────────────────────
-    ::selection {
-        background-color: var(--pte-new-colors-backgroundAccentSubtle, rgba(99, 102, 241, 0.2));
-    }
-}

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

@@ -1,226 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { useState } from 'react';
-import { FixedToolbar } from './FixedToolbar';
-import { FloatingToolbar } from './FloatingToolbar';
-import { MarkdownEditor } from './MarkdownEditor';
-
-const meta: Meta<typeof MarkdownEditor> = {
-    title: 'Content/MarkdownEditor',
-    component: MarkdownEditor,
-    tags: ['autodocs'],
-    argTypes: {
-        size: {
-            control: 'select',
-            options: ['paragraphLarge', 'paragraphMedium', 'paragraphSmall', 'paragraphXSmall', 'paragraphXXSmall'],
-        },
-        status: {
-            control: 'select',
-            options: ['default', 'error', 'success'],
-        },
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof MarkdownEditor>;
-
-const sampleMarkdown = `# Getting Started
-
-This is a **WYSIWYG** markdown editor built on *Tiptap*.
-
-## Features
-
-- Bold, italic, and ~~strikethrough~~
-- [Links](https://paris.slingshot.fm) and \`inline code\`
-- Headings, blockquotes, and horizontal rules
-
-> Blockquotes render with Paris styling.
-
-### Task Lists
-
-- [x] Set up Tiptap
-- [x] Add markdown serialization
-- [ ] Style with Paris tokens
-
-\`\`\`typescript
-const [md, setMd] = useState('');
-\`\`\`
-
----
-
-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} handleImageUpload={mockImageUpload}>
-                    <FixedToolbar />
-                    <FloatingToolbar />
-                </MarkdownEditor>
-                <details style={{ marginTop: 16 }}>
-                    <summary
-                        style={{ cursor: 'pointer', fontSize: 12, color: 'var(--pte-new-colors-contentTertiary)' }}
-                    >
-                        Markdown output
-                    </summary>
-                    <pre
-                        style={{
-                            marginTop: 8,
-                            padding: 12,
-                            fontSize: 12,
-                            background: 'var(--pte-new-colors-backgroundSecondary)',
-                            borderRadius: 8,
-                            overflow: 'auto',
-                            whiteSpace: 'pre-wrap',
-                        }}
-                    >
-                        {value}
-                    </pre>
-                </details>
-            </div>
-        );
-    },
-    args: {
-        placeholder: 'Start writing...',
-    },
-};
-
-/**
- * Editor with only the FloatingToolbar (appears on text selection).
- * Clean editing surface without a fixed toolbar.
- */
-export const FloatingOnly: Story = {
-    render: (args) => {
-        const [value, setValue] = useState('Select some text to see the floating toolbar.');
-        return (
-            <div style={{ maxWidth: 700 }}>
-                <MarkdownEditor {...args} value={value} onChange={setValue}>
-                    <FloatingToolbar />
-                </MarkdownEditor>
-            </div>
-        );
-    },
-    args: {
-        placeholder: 'Start writing...',
-    },
-};
-
-/**
- * Editor with only the FixedToolbar.
- */
-export const FixedOnly: Story = {
-    render: (args) => {
-        const [value, setValue] = useState('');
-        return (
-            <div style={{ maxWidth: 700 }}>
-                <MarkdownEditor {...args} value={value} onChange={setValue}>
-                    <FixedToolbar />
-                </MarkdownEditor>
-            </div>
-        );
-    },
-    args: {
-        placeholder: 'Start writing...',
-    },
-};
-
-/**
- * Editor with a limited feature set — only bold, italic, heading, and link.
- * Toolbar only shows buttons for enabled features.
- */
-export const LimitedFeatures: Story = {
-    render: (args) => {
-        const [value, setValue] = useState('Only **bold**, *italic*, headings, and links are available.');
-        return (
-            <div style={{ maxWidth: 700 }}>
-                <MarkdownEditor {...args} value={value} onChange={setValue}>
-                    <FixedToolbar />
-                    <FloatingToolbar />
-                </MarkdownEditor>
-            </div>
-        );
-    },
-    args: {
-        features: ['bold', 'italic', 'heading', 'link'],
-        placeholder: 'Limited formatting...',
-    },
-};
-
-/**
- * Read-only editor with pre-filled content.
- * The editor is not editable — useful for preview modes.
- */
-export const ReadOnly: Story = {
-    render: (args) => {
-        return (
-            <div style={{ maxWidth: 700 }}>
-                <MarkdownEditor {...args} value={sampleMarkdown} editable={false} />
-            </div>
-        );
-    },
-};
-
-/**
- * Editor with error status — shows error border styling.
- */
-export const ErrorStatus: Story = {
-    render: (args) => {
-        const [value, setValue] = useState('');
-        return (
-            <div style={{ maxWidth: 700 }}>
-                <MarkdownEditor {...args} value={value} onChange={setValue} status="error">
-                    <FixedToolbar />
-                </MarkdownEditor>
-            </div>
-        );
-    },
-    args: {
-        placeholder: 'This field has an error...',
-    },
-};
-
-/**
- * Editor with no toolbar — users rely on keyboard shortcuts and
- * markdown input rules (e.g., type `## ` for heading 2).
- */
-export const NoToolbar: Story = {
-    render: (args) => {
-        const [value, setValue] = useState('');
-        return (
-            <div style={{ maxWidth: 700 }}>
-                <MarkdownEditor {...args} value={value} onChange={setValue} />
-            </div>
-        );
-    },
-    args: {
-        placeholder: 'Type markdown shortcuts: # heading, **bold**, - list item...',
-    },
-};
-
-/**
- * Editor with custom placeholder text.
- */
-export const WithPlaceholder: Story = {
-    render: (args) => {
-        const [value, setValue] = useState('');
-        return (
-            <div style={{ maxWidth: 700 }}>
-                <MarkdownEditor {...args} value={value} onChange={setValue}>
-                    <FixedToolbar />
-                </MarkdownEditor>
-            </div>
-        );
-    },
-    args: {
-        placeholder: 'Write your thoughts here...',
-        size: 'paragraphMedium',
-    },
-};