paris 0.18.1 → 0.19.0

package/src/stories/markdowneditor/MarkdownEditor.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { EditorContent } from '@tiptap/react';
+import { clsx } from 'clsx';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { useMemo } from 'react';
+import type { MarkdownSize } from '../markdown';
+import type { MarkdownEditorFeature } from './features';
+import { ALL_FEATURES } from './features';
+import styles from './MarkdownEditor.module.scss';
+import { MarkdownEditorContext } from './MarkdownEditorContext';
+import { useMarkdownEditor } from './useMarkdownEditor';
+
+export type MarkdownEditorProps = {
+    /** The markdown string value (controlled). */
+    value: string;
+    /** Fires with the updated markdown string on every edit. */
+    onChange?: (value: string) => void;
+    /** Whitelist of formatting features to enable. Defaults to all features. */
+    features?: MarkdownEditorFeature[];
+    /** Placeholder text shown when the editor is empty. */
+    placeholder?: string;
+    /**
+     * Base text size for body content, matching the Markdown component's size prop.
+     * @default 'paragraphSmall'
+     */
+    size?: MarkdownSize;
+    /** Whether the editor is editable. @default true */
+    editable?: boolean;
+    /** Whether to autofocus the editor on mount. @default false */
+    autofocus?: boolean;
+    /** An optional CSS class name for the root wrapper. */
+    className?: string;
+    /** Visual status for the editor container (follows Input pattern). */
+    status?: 'default' | 'error' | 'success';
+    /** Prop overrides for sub-elements. */
+    overrides?: {
+        root?: ComponentPropsWithoutRef<'div'>;
+        editorContainer?: ComponentPropsWithoutRef<'div'>;
+    };
+    /**
+     * Children are placed inside the context provider, before the editor content.
+     * This is where toolbar components should be placed.
+     */
+    children?: ReactNode;
+};
+
+/**
+ * A WYSIWYG markdown editor built on Tiptap, styled with Paris design tokens.
+ * It pairs with the read-only `<Markdown>` component as its write counterpart.
+ *
+ * The editor uses a compound component pattern — toolbar components are passed
+ * as children and communicate with the editor via React context.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```tsx
+ * import { MarkdownEditor, FixedToolbar, FloatingToolbar } from 'paris/markdowneditor';
+ *
+ * export const Example: FC = () => {
+ *     const [md, setMd] = useState('');
+ *     return (
+ *         <MarkdownEditor value={md} onChange={setMd} placeholder="Start writing...">
+ *             <FixedToolbar />
+ *             <FloatingToolbar />
+ *         </MarkdownEditor>
+ *     );
+ * };
+ * ```
+ *
+ * @constructor
+ */
+export const MarkdownEditor: FC<MarkdownEditorProps> = ({
+    value,
+    onChange,
+    features = ALL_FEATURES,
+    placeholder,
+    size = 'paragraphSmall',
+    editable = true,
+    autofocus = false,
+    className,
+    status = 'default',
+    overrides,
+    children,
+}) => {
+    const { editor, featureSet } = useMarkdownEditor({
+        value,
+        onChange,
+        features,
+        placeholder,
+        editable,
+        autofocus,
+    });
+
+    const contextValue = useMemo(() => ({ editor, features: featureSet }), [editor, featureSet]);
+
+    return (
+        <MarkdownEditorContext.Provider value={contextValue}>
+            <div {...overrides?.root} className={clsx(styles.root, className, overrides?.root?.className)}>
+                <div
+                    {...overrides?.editorContainer}
+                    className={clsx(styles.editorContainer, overrides?.editorContainer?.className)}
+                    data-status={status}
+                    data-disabled={!editable}
+                >
+                    {children}
+                    <div
+                        className={styles.editorContent}
+                        style={
+                            {
+                                '--markdown-base-font-size': `var(--pte-new-typography-styles-${size}-fontSize)`,
+                            } as React.CSSProperties
+                        }
+                    >
+                        <EditorContent editor={editor} />
+                    </div>
+                </div>
+            </div>
+        </MarkdownEditorContext.Provider>
+    );
+};

package/src/stories/markdowneditor/MarkdownEditorContext.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import type { Editor } from '@tiptap/react';
+import { createContext, useContext } from 'react';
+import type { MarkdownEditorFeature } from './features';
+
+export type MarkdownEditorContextValue = {
+    editor: Editor | null;
+    features: Set<MarkdownEditorFeature>;
+};
+
+export const MarkdownEditorContext = createContext<MarkdownEditorContextValue>({
+    editor: null,
+    features: new Set(),
+});
+
+export const useMarkdownEditorContext = () => useContext(MarkdownEditorContext);

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

@@ -0,0 +1,35 @@
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--pte-new-colors-contentSecondary);
+    cursor: pointer;
+    padding: 0;
+    font-size: 13px;
+    font-family: inherit;
+    transition:
+        background-color var(--pte-new-animations-interaction, 150ms) ease,
+        color var(--pte-new-animations-interaction, 150ms) ease;
+    flex-shrink: 0;
+
+    &:hover {
+        background-color: var(--pte-new-colors-backgroundSecondary);
+        color: var(--pte-new-colors-contentPrimary);
+    }
+
+    &[data-active='true'] {
+        background-color: var(--pte-new-colors-borderSubtle);
+        color: var(--pte-new-colors-contentPrimary);
+    }
+
+    &:disabled {
+        color: var(--pte-new-colors-contentDisabled);
+        cursor: not-allowed;
+        background: transparent;
+    }
+}

package/src/stories/markdowneditor/ToolbarButton.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { clsx } from 'clsx';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import styles from './ToolbarButton.module.scss';
+
+export type ToolbarButtonProps = {
+    /** Whether the button is currently active (e.g., bold is on). */
+    isActive?: boolean;
+    /** The action to perform when clicked. */
+    onAction: () => void;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Icon or label content. */
+    children: ReactNode;
+    /** Optional tooltip text. */
+    tooltip?: string;
+    /** Prop overrides for the button element. */
+    overrides?: {
+        button?: ComponentPropsWithoutRef<'button'>;
+    };
+};
+
+/**
+ * A toolbar button used in FixedToolbar and FloatingToolbar.
+ * Uses onMouseDown instead of onClick to prevent stealing editor focus.
+ */
+export const ToolbarButton: FC<ToolbarButtonProps> = ({
+    isActive = false,
+    onAction,
+    disabled = false,
+    children,
+    tooltip,
+    overrides,
+}) => {
+    return (
+        <button
+            type="button"
+            title={tooltip}
+            disabled={disabled}
+            data-active={isActive}
+            {...overrides?.button}
+            className={clsx(styles.button, overrides?.button?.className)}
+            onMouseDown={(e) => {
+                e.preventDefault();
+                if (!disabled) onAction();
+            }}
+        >
+            {children}
+        </button>
+    );
+};

package/src/stories/markdowneditor/features.ts

@@ -0,0 +1,92 @@
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import { Table } from '@tiptap/extension-table';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import TableRow from '@tiptap/extension-table-row';
+import TaskItem from '@tiptap/extension-task-item';
+import TaskList from '@tiptap/extension-task-list';
+import { Markdown } from '@tiptap/markdown';
+import type { Extensions } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+export const FEATURES = [
+    'bold',
+    'italic',
+    'strikethrough',
+    'heading',
+    'blockquote',
+    'horizontalRule',
+    'bulletList',
+    'orderedList',
+    'taskList',
+    'codeBlock',
+    'code',
+    'link',
+    'image',
+    'table',
+] as const;
+
+export type MarkdownEditorFeature = (typeof FEATURES)[number];
+
+export const ALL_FEATURES: MarkdownEditorFeature[] = [...FEATURES];
+
+/**
+ * Builds the Tiptap extensions array based on enabled features.
+ * Always includes: Document, Paragraph, Text, History, Markdown, Placeholder.
+ * Conditionally includes StarterKit sub-extensions and standalone extensions.
+ */
+export function buildExtensions(features: Set<MarkdownEditorFeature>, placeholder?: string): Extensions {
+    const extensions: Extensions = [
+        StarterKit.configure({
+            bold: features.has('bold') ? {} : false,
+            italic: features.has('italic') ? {} : false,
+            strike: features.has('strikethrough') ? {} : false,
+            heading: features.has('heading') ? { levels: [1, 2, 3, 4, 5, 6] } : false,
+            blockquote: features.has('blockquote') ? {} : false,
+            horizontalRule: features.has('horizontalRule') ? {} : false,
+            bulletList: features.has('bulletList') ? {} : false,
+            orderedList: features.has('orderedList') ? {} : false,
+            listItem: features.has('bulletList') || features.has('orderedList') ? {} : false,
+            codeBlock: features.has('codeBlock') ? {} : false,
+            code: features.has('code') ? {} : false,
+            link: features.has('link')
+                ? {
+                      openOnClick: false,
+                      HTMLAttributes: {
+                          rel: 'noopener noreferrer',
+                          target: '_blank',
+                      },
+                  }
+                : false,
+        }),
+        Markdown,
+        Placeholder.configure({
+            placeholder: placeholder ?? '',
+            showOnlyCurrent: false,
+        }),
+    ];
+
+    if (features.has('taskList')) {
+        extensions.push(TaskList);
+        extensions.push(TaskItem.configure({ nested: true }));
+    }
+
+    if (features.has('table')) {
+        extensions.push(Table.configure({ resizable: false }));
+        extensions.push(TableRow);
+        extensions.push(TableCell);
+        extensions.push(TableHeader);
+    }
+
+    if (features.has('image')) {
+        extensions.push(
+            Image.configure({
+                inline: false,
+                allowBase64: true,
+            }),
+        );
+    }
+
+    return extensions;
+}

package/src/stories/markdowneditor/index.ts

@@ -0,0 +1,11 @@
+export type { FixedToolbarProps } from './FixedToolbar';
+export { FixedToolbar } from './FixedToolbar';
+export type { FloatingToolbarProps } from './FloatingToolbar';
+export { FloatingToolbar } from './FloatingToolbar';
+export type { MarkdownEditorFeature } from './features';
+export { ALL_FEATURES, FEATURES } from './features';
+export type { MarkdownEditorProps } from './MarkdownEditor';
+export { MarkdownEditor } from './MarkdownEditor';
+export { useMarkdownEditorContext } from './MarkdownEditorContext';
+export type { ToolbarButtonProps } from './ToolbarButton';
+export { ToolbarButton } from './ToolbarButton';

package/src/stories/markdowneditor/useMarkdownEditor.ts

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEditor } from '@tiptap/react';
+import { useEffect, useMemo, useRef } from 'react';
+import type { MarkdownEditorFeature } from './features';
+import { ALL_FEATURES, buildExtensions } from './features';
+
+export type UseMarkdownEditorOptions = {
+    /** The markdown string value (controlled). */
+    value: string;
+    /** Fires with the updated markdown string on every edit. */
+    onChange?: (value: string) => void;
+    /** Whitelist of formatting features. Defaults to ALL_FEATURES. */
+    features?: MarkdownEditorFeature[];
+    /** Placeholder text when the editor is empty. */
+    placeholder?: string;
+    /** Whether the editor is editable. @default true */
+    editable?: boolean;
+    /** Whether to autofocus the editor on mount. @default false */
+    autofocus?: boolean;
+};
+
+export function useMarkdownEditor({
+    value,
+    onChange,
+    features = ALL_FEATURES,
+    placeholder,
+    editable = true,
+    autofocus = false,
+}: UseMarkdownEditorOptions) {
+    const featureSet = useMemo(() => new Set(features), [features]);
+    const extensions = useMemo(() => buildExtensions(featureSet, placeholder), [featureSet, placeholder]);
+
+    // Track the last value we sent via onChange to prevent circular updates
+    const lastOnChangeValue = useRef(value);
+
+    const editor = useEditor({
+        extensions,
+        // Empty strings produce no DOM nodes with contentType: 'markdown',
+        // which breaks the placeholder. Only use markdown parsing for non-empty content.
+        content: value || undefined,
+        contentType: value ? 'markdown' : undefined,
+        editable,
+        autofocus,
+        immediatelyRender: false,
+        onUpdate: ({ editor: ed }) => {
+            const markdown = ed.getMarkdown();
+            lastOnChangeValue.current = markdown;
+            onChange?.(markdown);
+        },
+    });
+
+    // Sync external value changes into the editor (controlled mode)
+    useEffect(() => {
+        if (!editor || editor.isDestroyed) return;
+
+        // Skip if this value came from our own onChange
+        if (value === lastOnChangeValue.current) return;
+
+        const currentMarkdown = editor.getMarkdown();
+        if (value !== currentMarkdown) {
+            editor.commands.setContent(value, { contentType: 'markdown', emitUpdate: false });
+            lastOnChangeValue.current = value;
+        }
+    }, [editor, value]);
+
+    // Sync editable state
+    useEffect(() => {
+        if (editor && !editor.isDestroyed) {
+            editor.setEditable(editable);
+        }
+    }, [editor, editable]);
+
+    return { editor, featureSet };
+}

package/src/stories/tabs/Tabs.module.scss

@@ -36,8 +36,6 @@
         top: 0;
         width: 100%;
         z-index: 1;
-        backdrop-filter: var(--pte-new-blurs-strong);
-        -webkit-backdrop-filter: var(--pte-new-blurs-strong);
         background: var(--pte-new-materials-primaryThin-background);
     }
 }

package/src/stories/tabs/Tabs.tsx

@@ -112,6 +112,15 @@ export const Tabs: FC<TabsProps> = ({
             <div
                 {...overrides?.tabBackground}
                 className={clsx(styles.tabBackground, styles[backgroundStyle], overrides?.tabBackground?.className)}
+                style={{
+                    ...(backgroundStyle === 'glass'
+                        ? {
+                              backdropFilter: 'var(--pte-new-blurs-strong)',
+                              WebkitBackdropFilter: 'var(--pte-new-blurs-strong)',
+                          }
+                        : {}),
+                    ...overrides?.tabBackground?.style,
+                }}
             >
                 <TabList
                     {...overrides?.tabList}