paris 0.18.1 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # paris
 
+## 0.19.0
+
+### Minor Changes
+
+- 4a511cc: Add MarkdownEditor component — a WYSIWYG rich text editor built on Tiptap that outputs markdown. Features composable toolbars (FixedToolbar, FloatingToolbar), controlled value/onChange with markdown strings, feature gating via `features` prop, and Paris-styled content rendering. Adds lucide-react for toolbar icons.
+
 ## 0.18.1
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
     "name": "paris",
     "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
     "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-    "version": "0.18.1",
+    "version": "0.19.0",
     "homepage": "https://paris.slingshot.fm",
     "license": "MIT",
     "repository": {
@@ -62,6 +62,7 @@
         "./informationaltooltip": "./src/stories/informationaltooltip/index.ts",
         "./input": "./src/stories/input/index.ts",
         "./markdown": "./src/stories/markdown/index.ts",
+        "./markdowneditor": "./src/stories/markdowneditor/index.ts",
         "./menu": "./src/stories/menu/index.ts",
         "./pagination": "./src/stories/pagination/index.ts",
         "./popover": "./src/stories/popover/index.ts",
@@ -87,9 +88,22 @@
         "@headlessui/react": "^2.2.4",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@tiptap/extension-image": "^3.22.2",
+        "@tiptap/extension-link": "^3.22.2",
+        "@tiptap/extension-placeholder": "^3.22.2",
+        "@tiptap/extension-table": "^3.22.2",
+        "@tiptap/extension-table-cell": "^3.22.2",
+        "@tiptap/extension-table-header": "^3.22.2",
+        "@tiptap/extension-table-row": "^3.22.2",
+        "@tiptap/extension-task-item": "^3.22.2",
+        "@tiptap/extension-task-list": "^3.22.2",
+        "@tiptap/markdown": "^3.22.2",
+        "@tiptap/react": "^3.22.2",
+        "@tiptap/starter-kit": "^3.22.2",
         "clsx": "^1.2.1",
         "font-color-contrast": "^11.1.0",
         "framer-motion": "^12.24.10",
+        "lucide-react": "^1.7.0",
         "pte": "^0.5.0",
         "react-hot-toast": "^2.4.1",
         "react-markdown": "^10.1.0",

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,244 @@
+'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, 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 } = useMarkdownEditorContext();
+    const [showLinkPopover, setShowLinkPopover] = useState(false);
+
+    const handleLinkClick = useCallback(() => {
+        setShowLinkPopover((prev) => !prev);
+    }, []);
+
+    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'),
+        },
+        {
+            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,
+        },
+        {
+            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)} />}
+        </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>
+    );
+};

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

@@ -0,0 +1,124 @@
+.popover {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    z-index: 50;
+    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>
+    );
+};