paris 0.23.0 → 0.24.0

package/src/stories/markdowneditor/FloatingToolbar.tsx

@@ -1,94 +0,0 @@
-'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

@@ -1,124 +0,0 @@
-.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

@@ -1,135 +0,0 @@
-'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>
-    );
-};