@tuturuuu/ui 0.28.0 → 0.29.0

package/src/components/ui/text-editor/clipboard-serialization.ts

@@ -0,0 +1,249 @@
+import type { Fragment, Mark, Node, Slice } from '@tiptap/pm/model';
+
+type ClipboardFormat = 'markdown' | 'text';
+
+function wrapMarkedText(
+  text: string,
+  marks: readonly Mark[],
+  format: ClipboardFormat
+): string {
+  if (format === 'text') return text;
+
+  const marksByName = new Map(marks.map((mark) => [mark.type.name, mark]));
+  let result = text;
+
+  if (marksByName.has('code')) {
+    const fence = result.includes('`') ? '``' : '`';
+    result = `${fence}${result}${fence}`;
+  }
+  if (marksByName.has('bold')) result = `**${result}**`;
+  if (marksByName.has('italic')) result = `*${result}*`;
+  if (marksByName.has('strike')) result = `~~${result}~~`;
+  if (marksByName.has('highlight')) result = `==${result}==`;
+  if (marksByName.has('subscript')) result = `<sub>${result}</sub>`;
+  if (marksByName.has('superscript')) result = `<sup>${result}</sup>`;
+
+  const link = marksByName.get('link');
+  const href = typeof link?.attrs.href === 'string' ? link.attrs.href : '';
+  return href ? `[${result}](${href})` : result;
+}
+
+function serializeInlineContent(node: Node, format: ClipboardFormat): string {
+  let result = '';
+  node.forEach((child) => {
+    if (child.isText) {
+      result += wrapMarkedText(child.text ?? '', child.marks, format);
+    } else if (child.type.name === 'hardBreak') {
+      result += '\n';
+    } else if (child.type.name === 'mention') {
+      result += child.attrs.displayName
+        ? `@${String(child.attrs.displayName)}`
+        : '@mention';
+    } else if (
+      child.type.name === 'image' ||
+      child.type.name === 'imageResize'
+    ) {
+      const src = typeof child.attrs.src === 'string' ? child.attrs.src : '';
+      const alt = typeof child.attrs.alt === 'string' ? child.attrs.alt : '';
+      if (format === 'markdown') result += src ? `![${alt}](${src})` : alt;
+      else result += [alt || 'Image', src].filter(Boolean).join(': ');
+    } else {
+      result += serializeInlineContent(child, format);
+    }
+  });
+  return result;
+}
+
+function serializeListItem(
+  node: Node,
+  marker: string,
+  depth: number,
+  format: ClipboardFormat
+): string {
+  const indent = '  '.repeat(depth);
+  const prefix = `${marker} `;
+  const lines: string[] = [];
+  let hasMarker = false;
+
+  node.forEach((child) => {
+    if (['bulletList', 'orderedList', 'taskList'].includes(child.type.name)) {
+      lines.push(serializeList(child, depth + 1, format));
+      return;
+    }
+
+    const text = serializeBlock(child, depth, format).trimEnd();
+    if (!hasMarker) {
+      const continuation = ' '.repeat(prefix.length);
+      const marked = text
+        .split('\n')
+        .map((line, index) => (index === 0 ? line : `${continuation}${line}`))
+        .join('\n');
+      lines.push(`${indent}${prefix}${marked}`);
+      hasMarker = true;
+      return;
+    }
+
+    const continuation = `${indent}${' '.repeat(prefix.length)}`;
+    lines.push(
+      text
+        .split('\n')
+        .map((line) => `${continuation}${line}`)
+        .join('\n')
+    );
+  });
+
+  return lines.join('\n') || `${indent}${prefix.trimEnd()}`;
+}
+
+function serializeList(
+  node: Node,
+  depth: number,
+  format: ClipboardFormat
+): string {
+  const start =
+    node.type.name === 'orderedList' && typeof node.attrs.start === 'number'
+      ? node.attrs.start
+      : 1;
+  const lines: string[] = [];
+  node.forEach((item, _offset, index) => {
+    const marker =
+      node.type.name === 'orderedList'
+        ? `${start + index}.`
+        : node.type.name === 'taskList'
+          ? format === 'markdown'
+            ? item.attrs.checked === true
+              ? '- [x]'
+              : '- [ ]'
+            : item.attrs.checked === true
+              ? '☑'
+              : '☐'
+          : format === 'markdown'
+            ? '-'
+            : '•';
+    lines.push(serializeListItem(item, marker, depth, format));
+  });
+  return lines.join('\n');
+}
+
+function serializeTable(node: Node, format: ClipboardFormat): string {
+  const rows: string[][] = [];
+  node.forEach((row) => {
+    const cells: string[] = [];
+    row.forEach((cell) => {
+      cells.push(
+        serializeBlocks(cell.content, format).replace(/\n+/g, ' ').trim()
+      );
+    });
+    rows.push(cells);
+  });
+  if (rows.length === 0) return '';
+  if (format === 'text') return rows.map((row) => row.join('\t')).join('\n');
+
+  const width = Math.max(...rows.map((row) => row.length));
+  const normalizedRows = rows.map((row) => [
+    ...row,
+    ...Array.from({ length: width - row.length }, () => ''),
+  ]);
+  const separator = Array.from({ length: width }, () => '---');
+  return [normalizedRows[0] ?? [], separator, ...normalizedRows.slice(1)]
+    .map((row) => `| ${row.join(' | ')} |`)
+    .join('\n');
+}
+
+function serializeBlock(
+  node: Node,
+  depth = 0,
+  format: ClipboardFormat
+): string {
+  switch (node.type.name) {
+    case 'paragraph':
+      return serializeInlineContent(node, format);
+    case 'heading': {
+      const text = serializeInlineContent(node, format);
+      if (format === 'text') return text;
+      const level = typeof node.attrs.level === 'number' ? node.attrs.level : 1;
+      return `${'#'.repeat(Math.min(6, Math.max(1, level)))} ${text}`;
+    }
+    case 'bulletList':
+    case 'orderedList':
+    case 'taskList':
+      return serializeList(node, depth, format);
+    case 'blockquote': {
+      const text = serializeBlocks(node.content, format);
+      return format === 'text'
+        ? text
+        : text
+            .split('\n')
+            .map((line) => (line ? `> ${line}` : '>'))
+            .join('\n');
+    }
+    case 'codeBlock': {
+      if (format === 'text') return node.textContent;
+      const language =
+        typeof node.attrs.language === 'string' ? node.attrs.language : '';
+      return `\`\`\`${language}\n${node.textContent}\n\`\`\``;
+    }
+    case 'horizontalRule':
+      return '---';
+    case 'table':
+      return serializeTable(node, format);
+    case 'video':
+      return node.attrs.src
+        ? format === 'markdown'
+          ? `[Video](${String(node.attrs.src)})`
+          : `Video: ${String(node.attrs.src)}`
+        : '';
+    case 'details':
+    case 'detailsContent':
+      return serializeBlocks(node.content, format);
+    case 'detailsSummary': {
+      const summary = serializeInlineContent(node, format);
+      if (format === 'text') return summary;
+      const level =
+        typeof node.attrs.level === 'number' ? node.attrs.level : null;
+      return level ? `${'#'.repeat(level)} ${summary}` : summary;
+    }
+    default:
+      return serializeBlocks(node.content, format);
+  }
+}
+
+function serializeBlocks(fragment: Fragment, format: ClipboardFormat): string {
+  const blocks: string[] = [];
+  fragment.forEach((node) => {
+    blocks.push(serializeBlock(node, 0, format));
+  });
+  return blocks.join('\n\n');
+}
+
+export function collapseExcessBlankLines(text: string): string {
+  const lines = text.replace(/\r\n?/g, '\n').split('\n');
+  const normalized: string[] = [];
+  let fenced = false;
+  for (const line of lines) {
+    const isFence = /^\s*(?:```|~~~)/.test(line);
+    if (isFence) fenced = !fenced;
+    if (!fenced && !isFence && line.trim() === '') {
+      if (normalized.at(-1) !== '') normalized.push('');
+    } else normalized.push(line);
+  }
+  return normalized.join('\n');
+}
+
+function serializeClipboard(slice: Slice, format: ClipboardFormat): string {
+  return collapseExcessBlankLines(
+    serializeBlocks(slice.content, format)
+      .replace(/\r\n?/g, '\n')
+      .replace(/[ \t]+$/gm, '')
+  ).replace(/^\n+|\n+$/g, '');
+}
+
+/** Markdown representation used for normal clipboard copy and explicit export. */
+export function serializeClipboardText(slice: Slice): string {
+  return serializeClipboard(slice, 'markdown');
+}
+
+/** Readable plain text without Markdown formatting delimiters. */
+export function serializeClipboardPlainText(slice: Slice): string {
+  return serializeClipboard(slice, 'text');
+}

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,
@@ -88,6 +89,7 @@ function resolveUploadHandler({
 export const __imageExtensionPrivate = {
   clearImageResizeUIFromNodeDom,
   getSelectedImagePos,
+  getClipboardImageFiles,
   resolveUploadHandler,
 };
 
@@ -437,23 +439,10 @@ export const CustomImage = (options: ImageOptions = {}) => {
                 if (!items) return false;
 
                 // Filter and collect image files
-                const images = Array.from(items)
-                  .map((item) =>
-                    item.type.startsWith('image/') ? item.getAsFile() : null
-                  )
-                  .filter((file): file is File => file !== null);
+                const images = getClipboardImageFiles(items);
 
                 if (images.length === 0) return false;
 
-                const hasTextOrHtml = Array.from(items).some(
-                  (item) =>
-                    item.type === 'text/plain' || item.type === 'text/html'
-                );
-
-                if (hasTextOrHtml) {
-                  return false;
-                }
-
                 const onImageUpload = getOnImageUpload();
                 if (!onImageUpload) {
                   event.preventDefault();

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)
@@ -27,6 +31,25 @@ const BLOCK_START_PATTERNS = [
   /^\s*\|/,
 ];
 
+const VISUAL_BULLET_PATTERN = /^(\s*)[•◦▪‣●]\s+/u;
+const VISUAL_CHECKBOX_PATTERN = /^(\s*)[☐☑☒]\s+/u;
+
+function normalizePastedPlainText(text: string): string {
+  return collapseExcessBlankLines(text)
+    .split('\n')
+    .map((line) => {
+      const checkboxMatch = line.match(VISUAL_CHECKBOX_PATTERN);
+      if (checkboxMatch) {
+        const marker = line.trimStart().charAt(0);
+        const content = line.replace(VISUAL_CHECKBOX_PATTERN, '');
+        return `${checkboxMatch[1] ?? ''}- [${marker === '☐' ? ' ' : 'x'}] ${content}`;
+      }
+
+      return line.replace(VISUAL_BULLET_PATTERN, '$1- ');
+    })
+    .join('\n');
+}
+
 function isBlockStart(line: string): boolean {
   return BLOCK_START_PATTERNS.some((p) => p.test(line));
 }
@@ -194,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;
@@ -309,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) {
@@ -496,7 +523,7 @@ function markdownToHtml(markdown: string): string {
       paraLines.push(lines[i]!);
       i++;
     }
-    result.push(`<p>${parseInline(paraLines.join(' '))}</p>`);
+    result.push(`<p>${paraLines.map(parseInline).join('<br>')}</p>`);
   }
 
   return result.join('\n');
@@ -532,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)
 // ---------------------------------------------------------------------------
@@ -539,6 +579,8 @@ function looksLikeMarkdown(text: string): boolean {
 export const __markdownPastePrivate = {
   markdownToHtml,
   looksLikeMarkdown,
+  normalizePastedPlainText,
+  shouldConvertPastedText,
 };
 
 const markdownPastePluginKey = new PluginKey('markdownPastePlugin');
@@ -556,6 +598,7 @@ export const MarkdownPaste = Extension.create({
       new Plugin({
         key: markdownPastePluginKey,
         props: {
+          clipboardTextSerializer: serializeClipboardText,
           handleDOMEvents: {
             paste: (
               view: import('@tiptap/pm/view').EditorView,
@@ -569,25 +612,30 @@ export const MarkdownPaste = Extension.create({
                 return false;
               }
 
-              const text = clipboardData.getData('text/plain');
-              if (!text || !looksLikeMarkdown(text)) {
+              const text = normalizePastedPlainText(
+                clipboardData.getData('text/plain')
+              );
+              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;