paris 0.18.1 → 0.20.0

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

@@ -0,0 +1,124 @@
+.popover {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    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);
+    box-shadow: var(
+        --pte-new-shadows-shallowPopup,
+        0 4px 12px rgba(0, 0, 0, 0.15)
+    );
+    padding: 8px 10px;
+    width: 280px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.label {
+    font-size: var(--pte-new-typography-styles-labelXSmall-fontSize, 11px);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--pte-new-colors-contentTertiary);
+}
+
+.inputRow {
+    display: flex;
+    gap: 6px;
+}
+
+.input {
+    flex: 1;
+    background-color: var(--pte-new-colors-inputFill);
+    border: 1px solid var(--pte-new-colors-borderSubtle);
+    border-radius: 4px;
+    padding: 4px 8px;
+    color: var(--pte-new-colors-contentPrimary);
+    font-size: 11px;
+    font-family: inherit;
+    outline: none;
+    transition: border-color var(--pte-new-animations-interaction, 150ms) ease;
+
+    &:focus {
+        border-color: var(--pte-new-colors-inputBorderFocus);
+    }
+
+    &::placeholder {
+        color: var(--pte-new-colors-contentTertiary);
+    }
+}
+
+.applyButton {
+    background-color: var(--pte-new-colors-buttonFill);
+    border: none;
+    border-radius: 4px;
+    padding: 4px 10px;
+    color: var(--pte-new-colors-contentInversePrimary, #fff);
+    font-size: 11px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color var(--pte-new-animations-interaction, 150ms) ease;
+    flex-shrink: 0;
+
+    &:hover {
+        background-color: var(--pte-new-colors-buttonFillHover);
+    }
+}
+
+.footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.checkboxLabel {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    color: var(--pte-new-colors-contentTertiary);
+    cursor: pointer;
+
+    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;
+        flex-shrink: 0;
+        transition: var(--pte-animations-interaction);
+
+        &:checked {
+            &::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;
+            }
+        }
+    }
+}
+
+.removeButton {
+    background: none;
+    border: none;
+    color: var(--pte-new-colors-contentNegative);
+    font-size: 11px;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 0;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

package/src/stories/markdowneditor/LinkPopover.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import type { FC } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import styles from './LinkPopover.module.scss';
+import { useMarkdownEditorContext } from './MarkdownEditorContext';
+
+export type LinkPopoverProps = {
+    /** Callback when the popover should close. */
+    onClose: () => void;
+};
+
+/**
+ * An inline popover for inserting/editing links.
+ * Reads the current link state from the editor and allows
+ * setting href and target attributes.
+ */
+export const LinkPopover: FC<LinkPopoverProps> = ({ onClose }) => {
+    const { editor } = useMarkdownEditorContext();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const popoverRef = useRef<HTMLDivElement>(null);
+
+    // Read existing link attributes if cursor is on a link
+    const existingHref = editor?.getAttributes('link')?.href ?? '';
+    const existingTarget = editor?.getAttributes('link')?.target ?? '_blank';
+
+    const [url, setUrl] = useState(existingHref);
+    const [openInNewTab, setOpenInNewTab] = useState(existingTarget === '_blank');
+
+    // Focus the input on mount
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+
+    // Close on click outside
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+                onClose();
+            }
+        };
+        // Use requestAnimationFrame to skip the current event that triggered the popover
+        const raf = requestAnimationFrame(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        });
+        return () => {
+            cancelAnimationFrame(raf);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [onClose]);
+
+    // Close on Escape
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onClose();
+                editor?.chain().focus().run();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [onClose, editor]);
+
+    const handleApply = useCallback(() => {
+        if (!editor) return;
+
+        if (!url) {
+            editor.chain().focus().unsetLink().run();
+        } else {
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setLink({
+                    href: url,
+                    target: openInNewTab ? '_blank' : null,
+                })
+                .run();
+        }
+        onClose();
+    }, [editor, url, openInNewTab, onClose]);
+
+    const handleRemove = useCallback(() => {
+        if (!editor) return;
+        editor.chain().focus().unsetLink().run();
+        onClose();
+    }, [editor, onClose]);
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                handleApply();
+            }
+        },
+        [handleApply],
+    );
+
+    return (
+        <div ref={popoverRef} className={styles.popover}>
+            <div className={styles.label}>Link URL</div>
+            <div className={styles.inputRow}>
+                <input
+                    ref={inputRef}
+                    type="url"
+                    className={styles.input}
+                    placeholder="https://..."
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                />
+                <button
+                    type="button"
+                    className={styles.applyButton}
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={handleApply}
+                >
+                    Apply
+                </button>
+            </div>
+            <div className={styles.footer}>
+                <label className={styles.checkboxLabel}>
+                    <input type="checkbox" checked={openInNewTab} onChange={(e) => setOpenInNewTab(e.target.checked)} />
+                    Open in new tab
+                </label>
+                {existingHref && (
+                    <button type="button" className={styles.removeButton} onClick={handleRemove}>
+                        Remove link
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,405 @@
+/* ── 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));
+    }
+}