@tuturuuu/ui 0.28.1 → 0.29.1

package/src/components/ui/text-editor/color-controls.tsx

@@ -182,7 +182,7 @@ function ColorControlPopover({
               aria-label={label}
               aria-pressed={active}
               className={cn(
-                'relative h-8 w-8 rounded-md border border-transparent transition-colors hover:bg-dynamic-surface/80',
+                'relative h-8 w-8 shrink-0 rounded-md border border-transparent transition-colors hover:bg-dynamic-surface/80',
                 active &&
                   'border-foreground/10 bg-dynamic-surface/80 text-foreground'
               )}

package/src/components/ui/text-editor/copy-menu.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import type { Editor } from '@tiptap/react';
+import { Code2, Copy, FileText } from '@tuturuuu/icons';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { toast } from '@tuturuuu/ui/sonner';
+import { Toggle } from '@tuturuuu/ui/toggle';
+import { useCallback, useState } from 'react';
+import {
+  serializeClipboardPlainText,
+  serializeClipboardText,
+} from './clipboard-serialization';
+import { TOOLBAR_BUTTON_CLASS_NAME } from './toolbar-controls';
+
+export interface EditorCopyLabels {
+  copy?: string;
+  copyAsMarkdown?: string;
+  copyAsPlainText?: string;
+  markdownDescription?: string;
+  plainTextDescription?: string;
+  markdownCopied?: string;
+  plainTextCopied?: string;
+  copyFailed?: string;
+}
+
+interface EditorCopyMenuProps {
+  editor: Editor;
+  labels?: EditorCopyLabels;
+}
+
+const DEFAULT_LABELS = {
+  copy: 'Copy content',
+  copyAsMarkdown: 'Copy as Markdown',
+  copyAsPlainText: 'Copy as plain text',
+  markdownDescription: 'Keep headings, lists, links, and formatting syntax',
+  plainTextDescription: 'Clean text for chat, email, or documents',
+  markdownCopied: 'Copied as Markdown',
+  plainTextCopied: 'Copied as plain text',
+  copyFailed: 'Could not copy content',
+} satisfies Required<EditorCopyLabels>;
+
+export function EditorCopyMenu({ editor, labels }: EditorCopyMenuProps) {
+  const [open, setOpen] = useState(false);
+  const copy = useCallback(
+    async (format: 'markdown' | 'text') => {
+      try {
+        if (!navigator.clipboard?.writeText) throw new Error('Unavailable');
+        const slice = editor.state.doc.slice(0, editor.state.doc.content.size);
+        const content =
+          format === 'markdown'
+            ? serializeClipboardText(slice)
+            : serializeClipboardPlainText(slice);
+        await navigator.clipboard.writeText(content);
+        toast.success(
+          format === 'markdown'
+            ? (labels?.markdownCopied ?? DEFAULT_LABELS.markdownCopied)
+            : (labels?.plainTextCopied ?? DEFAULT_LABELS.plainTextCopied)
+        );
+      } catch {
+        toast.error(labels?.copyFailed ?? DEFAULT_LABELS.copyFailed);
+      }
+    },
+    [editor, labels]
+  );
+
+  const copyLabel = labels?.copy ?? DEFAULT_LABELS.copy;
+  const copyAndClose = (format: 'markdown' | 'text') => {
+    setOpen(false);
+    void copy(format);
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Toggle
+          pressed={open}
+          disabled={editor.isEmpty}
+          aria-label={copyLabel}
+          className={`${TOOLBAR_BUTTON_CLASS_NAME} data-[state=open]:border-foreground/10 data-[state=open]:bg-dynamic-surface/80 data-[state=open]:text-foreground`}
+        >
+          <Copy className="size-4" />
+        </Toggle>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-72">
+        <DropdownMenuLabel className="text-muted-foreground text-xs">
+          {copyLabel}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="items-start gap-3 py-2.5"
+          onSelect={() => copyAndClose('markdown')}
+        >
+          <Code2 className="mt-0.5 size-4 shrink-0 text-dynamic-blue" />
+          <span className="min-w-0">
+            <span className="block font-medium">
+              {labels?.copyAsMarkdown ?? DEFAULT_LABELS.copyAsMarkdown}
+            </span>
+            <span className="block whitespace-normal text-muted-foreground text-xs leading-relaxed">
+              {labels?.markdownDescription ??
+                DEFAULT_LABELS.markdownDescription}
+            </span>
+          </span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="items-start gap-3 py-2.5"
+          onSelect={() => copyAndClose('text')}
+        >
+          <FileText className="mt-0.5 size-4 shrink-0 text-dynamic-green" />
+          <span className="min-w-0">
+            <span className="block font-medium">
+              {labels?.copyAsPlainText ?? DEFAULT_LABELS.copyAsPlainText}
+            </span>
+            <span className="block whitespace-normal text-muted-foreground text-xs leading-relaxed">
+              {labels?.plainTextDescription ??
+                DEFAULT_LABELS.plainTextDescription}
+            </span>
+          </span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/ui/text-editor/editor.tsx

@@ -15,6 +15,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import type * as Y from 'yjs';
 import { migrateInlineImagesToBlock } from './content-migration';
+import type { EditorCopyLabels } from './copy-menu';
 import { getRichTextEditorClasses } from './editor-classes';
 import { getEditorExtensions } from './extensions';
 import { handleListIndentation, handlePlainEnterFallback } from './keyboard';
@@ -129,7 +130,9 @@ export interface RichTextEditorProps {
     create_project?: string;
   };
   renderTaskMention?: TaskMentionNodeViewRenderer;
+  toolbarLeadingContent?: React.ReactNode;
   toggleBlockLabel?: string;
+  copyLabels?: EditorCopyLabels;
 }
 
 export function RichTextEditor({
@@ -158,7 +161,9 @@ export function RichTextEditor({
   revealToolbarOnFocus = false,
   mentionTranslations,
   renderTaskMention,
+  toolbarLeadingContent,
   toggleBlockLabel,
+  copyLabels,
 }: RichTextEditorProps) {
   // Use refs to ensure we have stable references for handlers
   const onImageUploadRef = useRef(onImageUpload);
@@ -635,7 +640,9 @@ export function RichTextEditor({
           workspaceId={workspaceId}
           onImageUpload={onImageUpload}
           onConvertToTask={onConvertToTask}
+          leadingContent={toolbarLeadingContent}
           toggleBlockLabel={toggleBlockLabel}
+          copyLabels={copyLabels}
         />
       )}
       {!readOnly && (

package/src/components/ui/text-editor/image-extension.ts

@@ -7,6 +7,7 @@ import {
 import { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view';
 import { toast } from '@tuturuuu/ui/sonner';
 import ImageResize from 'tiptap-extension-resize-image';
+import { getClipboardImageFiles } from './clipboard-image-files';
 import {
   formatBytes,
   getImageDimensions,
@@ -85,14 +86,6 @@ function resolveUploadHandler({
   return configuredHandler;
 }
 
-function getClipboardImageFiles(
-  items: DataTransferItemList | DataTransferItem[]
-) {
-  return Array.from(items)
-    .map((item) => (item.type.startsWith('image/') ? item.getAsFile() : null))
-    .filter((file): file is File => file !== null);
-}
-
 export const __imageExtensionPrivate = {
   clearImageResizeUIFromNodeDom,
   getSelectedImagePos,

package/src/components/ui/text-editor/markdown-paste-extension.ts

@@ -1,6 +1,10 @@
 import { DOMParser as ProseMirrorDOMParser } from '@tiptap/pm/model';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { Extension } from '@tiptap/react';
+import {
+  collapseExcessBlankLines,
+  serializeClipboardText,
+} from './clipboard-serialization';
 
 // ---------------------------------------------------------------------------
 // Markdown -> HTML converter (toolbar-supported features only)
@@ -31,8 +35,7 @@ const VISUAL_BULLET_PATTERN = /^(\s*)[•◦▪‣●]\s+/u;
 const VISUAL_CHECKBOX_PATTERN = /^(\s*)[☐☑☒]\s+/u;
 
 function normalizePastedPlainText(text: string): string {
-  return text
-    .replace(/\r\n?/g, '\n')
+  return collapseExcessBlankLines(text)
     .split('\n')
     .map((line) => {
       const checkboxMatch = line.match(VISUAL_CHECKBOX_PATTERN);
@@ -214,10 +217,7 @@ function parseListTree(
 
   while (i < lines.length) {
     const line = lines[i];
-    if (line === undefined || line.trim() === '') {
-      i++;
-      continue;
-    }
+    if (line === undefined || line.trim() === '') break;
 
     const match = line.match(/^(\s*)([-*+]|\d+\.)\s+(.*)$/);
     if (!match) break;
@@ -329,8 +329,15 @@ function renderListTree(nodes: ListNode[], ordered: boolean): string {
   const tag = ordered ? 'ol' : 'ul';
   const isTaskList = nodes.some((n) => n.checked !== null);
   const dataType = isTaskList ? ' data-type="taskList"' : '';
+  const orderedStart = ordered
+    ? Number.parseInt(nodes[0]?.marker.replace('.', '') ?? '1', 10)
+    : 1;
+  const startAttribute =
+    ordered && Number.isFinite(orderedStart) && orderedStart !== 1
+      ? ` start="${orderedStart}"`
+      : '';
 
-  let html = `<${tag}${dataType}>`;
+  let html = `<${tag}${startAttribute}${dataType}>`;
 
   for (const node of nodes) {
     if (isTaskList) {
@@ -552,6 +559,19 @@ function looksLikeMarkdown(text: string): boolean {
   return MARKDOWN_SIGNATURES.some((pattern) => pattern.test(text));
 }
 
+const SEMANTIC_RICH_TEXT_TAG_PATTERN =
+  /<(?:a|b|blockquote|code|details|em|h[1-6]|i|img|li|mark|ol|pre|s|strong|summary|table|tbody|td|th|thead|tr|ul)\b/i;
+
+function shouldConvertPastedText({
+  html,
+  text,
+}: {
+  html: string;
+  text: string;
+}): boolean {
+  return looksLikeMarkdown(text) && !SEMANTIC_RICH_TEXT_TAG_PATTERN.test(html);
+}
+
 // ---------------------------------------------------------------------------
 // Test-only exports (not part of the public API contract)
 // ---------------------------------------------------------------------------
@@ -560,6 +580,7 @@ export const __markdownPastePrivate = {
   markdownToHtml,
   looksLikeMarkdown,
   normalizePastedPlainText,
+  shouldConvertPastedText,
 };
 
 const markdownPastePluginKey = new PluginKey('markdownPastePlugin');
@@ -577,6 +598,7 @@ export const MarkdownPaste = Extension.create({
       new Plugin({
         key: markdownPastePluginKey,
         props: {
+          clipboardTextSerializer: serializeClipboardText,
           handleDOMEvents: {
             paste: (
               view: import('@tiptap/pm/view').EditorView,
@@ -593,24 +615,27 @@ export const MarkdownPaste = Extension.create({
               const text = normalizePastedPlainText(
                 clipboardData.getData('text/plain')
               );
-              if (!text || !looksLikeMarkdown(text)) {
+              const clipboardHtml = clipboardData.getData('text/html');
+              if (
+                !text ||
+                !shouldConvertPastedText({ html: clipboardHtml, text })
+              ) {
                 return false;
               }
 
-              // When plain text looks like markdown, convert it to editor nodes
-              // even if HTML is also present on the clipboard. Many apps wrap
-              // markdown in simple HTML tags that Tiptap would insert as plain
-              // text paragraphs; we prefer structured conversion instead.
+              // Convert Markdown from plain text when HTML is absent or only a
+              // visual wrapper. Genuine rich HTML keeps its headings, lists,
+              // inline emphasis, links, media, and paragraph boundaries.
               event.preventDefault();
 
-              const html = markdownToHtml(text);
+              const generatedHtml = markdownToHtml(text);
               const { state } = view;
               const { from, to } = state.selection;
 
               // Parse the generated HTML into a ProseMirror slice
               const browserParser = new DOMParser();
               const dom = browserParser.parseFromString(
-                `<div>${html}</div>`,
+                `<div>${generatedHtml}</div>`,
                 'text/html'
               );
               const firstChild = dom.body.firstChild;

package/src/components/ui/text-editor/tool-bar.tsx

@@ -32,76 +32,20 @@ import {
 import { Button } from '@tuturuuu/ui/button';
 import { Input } from '@tuturuuu/ui/input';
 import { toast } from '@tuturuuu/ui/sonner';
-import { Toggle } from '@tuturuuu/ui/toggle';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { cn } from '@tuturuuu/utils/format';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TextEditorColorControls } from './color-controls';
+import { type EditorCopyLabels, EditorCopyMenu } from './copy-menu';
 import {
   MAX_IMAGE_SIZE,
   MAX_VIDEO_SIZE,
   StorageQuotaError,
 } from './media-utils';
-import { hotkeyLabel, TOOLBAR_GROUPS, TOOLBAR_LABELS } from './toolbar-config';
+import { TOOLBAR_GROUPS } from './toolbar-config';
+import { ToolbarButton, ToolbarSeparator } from './toolbar-controls';
 
 type LinkEditorContext = 'bubble' | 'popover' | null;
 
-// ---------------------------------------------------------------------------
-// Shared sub-components
-// ---------------------------------------------------------------------------
-
-interface ToolbarButtonProps {
-  id: string;
-  label?: string;
-  icon: React.ReactNode;
-  pressed: boolean;
-  onClick: () => void;
-  disabled?: boolean;
-}
-
-/** A single toolbar toggle button wrapped with a tooltip showing name + hotkey. */
-function ToolbarButton({
-  id,
-  label: labelOverride,
-  icon,
-  pressed,
-  onClick,
-  disabled,
-}: ToolbarButtonProps) {
-  const label = labelOverride ?? TOOLBAR_LABELS[id] ?? id;
-  const shortcut = hotkeyLabel(id);
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Toggle
-          pressed={pressed}
-          onPressedChange={() => onClick()}
-          onMouseDown={(e) => e.preventDefault()}
-          disabled={disabled}
-          className="h-8 w-8 rounded-md border border-transparent transition-colors data-[state=on]:border-foreground/10 data-[state=on]:bg-dynamic-surface/80 data-[state=on]:text-foreground"
-          aria-label={label}
-        >
-          {icon}
-        </Toggle>
-      </TooltipTrigger>
-      <TooltipContent side="bottom" className="flex items-center gap-1.5">
-        <span>{label}</span>
-        {shortcut && (
-          <kbd className="rounded bg-foreground/10 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
-            {shortcut}
-          </kbd>
-        )}
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
-/** Vertical divider between toolbar groups */
-function ToolbarSeparator() {
-  return <div className="mx-0.5 h-5 w-px shrink-0 bg-dynamic-border/60" />;
-}
-
 // ---------------------------------------------------------------------------
 // Main ToolBar (BubbleMenu)
 // ---------------------------------------------------------------------------
@@ -898,35 +842,32 @@ export function ToolBar({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Fixed Toolbar (always-visible, rendered above the editor)
-// ---------------------------------------------------------------------------
-
 interface FixedToolbarProps {
   editor: Editor | null;
+  leadingContent?: React.ReactNode;
   workspaceId?: string;
   onImageUpload?: (file: File) => Promise<string>;
   onConvertToTask?: () => void | Promise<void>;
   className?: string;
   ref?: React.Ref<HTMLDivElement>;
   toggleBlockLabel?: string;
+  copyLabels?: EditorCopyLabels;
 }
-
 export function FixedToolbar({
   editor,
+  leadingContent,
   workspaceId,
   onImageUpload,
   onConvertToTask,
   className,
   ref,
   toggleBlockLabel,
+  copyLabels,
 }: FixedToolbarProps) {
   const [isUploadingImage, setIsUploadingImage] = useState(false);
   const [isUploadingVideo, setIsUploadingVideo] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const videoInputRef = useRef<HTMLInputElement>(null);
-
-  // Build the formatting option map
   const formattingOptions = useMemo(() => {
     if (!editor)
       return new Map<
@@ -1140,12 +1081,11 @@ export function FixedToolbar({
   );
 
   if (!editor) return null;
-
   return (
     <div
       ref={ref}
       className={cn(
-        'sticky top-0 z-40 flex flex-wrap items-center gap-1 rounded-t-md border-dynamic-border border-b bg-background/95 px-2 py-1.5 backdrop-blur-sm',
+        '@container scrollbar-hide sticky top-0 z-40 flex w-full min-w-0 max-w-full flex-nowrap items-center gap-1 overflow-x-auto overflow-y-hidden overscroll-x-contain whitespace-nowrap rounded-t-md border-dynamic-border border-b bg-background/95 px-2 py-1.5 backdrop-blur-sm',
         className
       )}
     >
@@ -1163,7 +1103,12 @@ export function FixedToolbar({
         onChange={handleVideoUpload}
         className="hidden"
       />
-
+      {leadingContent ? (
+        <>
+          <div className="shrink-0">{leadingContent}</div>
+          <ToolbarSeparator />
+        </>
+      ) : null}
       {/* Grouped formatting options with separators */}
       {TOOLBAR_GROUPS.map((group, gi) => (
         <div key={gi} className="contents">
@@ -1233,6 +1178,9 @@ export function FixedToolbar({
           />
         </>
       )}
+
+      <ToolbarSeparator />
+      <EditorCopyMenu editor={editor} labels={copyLabels} />
     </div>
   );
 }

package/src/components/ui/text-editor/toolbar-controls.tsx

@@ -0,0 +1,59 @@
+import { Toggle } from '@tuturuuu/ui/toggle';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
+import type { ReactNode } from 'react';
+import { hotkeyLabel, TOOLBAR_LABELS } from './toolbar-config';
+
+interface ToolbarButtonProps {
+  id: string;
+  label?: string;
+  icon: ReactNode;
+  pressed: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export const TOOLBAR_BUTTON_CLASS_NAME =
+  'h-8 w-8 shrink-0 rounded-md border border-transparent transition-colors data-[state=on]:border-foreground/10 data-[state=on]:bg-dynamic-surface/80 data-[state=on]:text-foreground';
+
+/** A toolbar toggle with an accessible label and optional hotkey hint. */
+export function ToolbarButton({
+  id,
+  label: labelOverride,
+  icon,
+  pressed,
+  onClick,
+  disabled,
+}: ToolbarButtonProps) {
+  const label = labelOverride ?? TOOLBAR_LABELS[id] ?? id;
+  const shortcut = hotkeyLabel(id);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Toggle
+          pressed={pressed}
+          onPressedChange={() => onClick()}
+          onMouseDown={(event) => event.preventDefault()}
+          disabled={disabled}
+          className={TOOLBAR_BUTTON_CLASS_NAME}
+          aria-label={label}
+        >
+          {icon}
+        </Toggle>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="flex items-center gap-1.5">
+        <span>{label}</span>
+        {shortcut ? (
+          <kbd className="rounded bg-foreground/10 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+            {shortcut}
+          </kbd>
+        ) : null}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+/** Vertical divider between toolbar groups. */
+export function ToolbarSeparator() {
+  return <div className="mx-0.5 h-5 w-px shrink-0 bg-dynamic-border/60" />;
+}