@tuturuuu/ui 0.28.1 → 0.29.1

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

@@ -1,8 +1,42 @@
-import { describe, expect, it } from 'vitest';
+import { Editor } from '@tiptap/core';
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+  serializeClipboardPlainText,
+  serializeClipboardText,
+} from '../clipboard-serialization';
+import { getEditorExtensions } from '../extensions';
 import { __markdownPastePrivate } from '../markdown-paste-extension';
 
-const { markdownToHtml, looksLikeMarkdown, normalizePastedPlainText } =
-  __markdownPastePrivate;
+const {
+  markdownToHtml,
+  looksLikeMarkdown,
+  normalizePastedPlainText,
+  shouldConvertPastedText,
+} = __markdownPastePrivate;
+
+const editors: Editor[] = [];
+
+function createEditor(content: Record<string, unknown>) {
+  const editor = new Editor({ content, extensions: getEditorExtensions() });
+  editors.push(editor);
+  return editor;
+}
+
+function copyDocument(editor: Editor) {
+  return serializeClipboardText(
+    editor.state.doc.slice(0, editor.state.doc.content.size)
+  );
+}
+
+function copyDocumentAsPlainText(editor: Editor) {
+  return serializeClipboardPlainText(
+    editor.state.doc.slice(0, editor.state.doc.content.size)
+  );
+}
+
+afterEach(() => {
+  for (const editor of editors.splice(0)) editor.destroy();
+});
 
 describe('markdownToHtml', () => {
   it('should convert headings', () => {
@@ -69,6 +103,44 @@ describe('markdownToHtml', () => {
     expect(markdownToHtml(text)).toContain('data-type="taskList"');
   });
 
+  it('collapses pathological blank-line runs without removing section spacing', () => {
+    const text = normalizePastedPlainText(
+      'First section\r\n\r\n\r\n\r\nSecond section\n\n\n- Item'
+    );
+
+    expect(text).toBe('First section\n\nSecond section\n\n- Item');
+  });
+
+  it('does not collapse intentional blank lines inside fenced code', () => {
+    const text = normalizePastedPlainText(
+      'Before\n\n\n```ts\nfirst()\n\n\nsecond()\n```\n\n\nAfter'
+    );
+
+    expect(text).toBe('Before\n\n```ts\nfirst()\n\n\nsecond()\n```\n\nAfter');
+  });
+
+  it('keeps semantic rich HTML for long structured task descriptions', () => {
+    const text = normalizePastedPlainText(
+      'KEEPING FROM THE NEW VERSION:\n• The new About Me UI editor: I like the compactness of it more than the older version.'
+    );
+    const html = [
+      '<h1>KEEPING FROM THE NEW VERSION:</h1>',
+      '<ul><li><p><strong>The new About Me UI editor:</strong> ',
+      'I like the compactness of it more than the older version.</p></li></ul>',
+    ].join('');
+
+    expect(looksLikeMarkdown(text)).toBe(true);
+    expect(shouldConvertPastedText({ html, text })).toBe(false);
+  });
+
+  it('converts Markdown when clipboard HTML is only a visual wrapper', () => {
+    const text = '# Heading\n- Item';
+    const html = '<div># Heading<br>- Item</div>';
+
+    expect(shouldConvertPastedText({ html, text })).toBe(true);
+    expect(shouldConvertPastedText({ html: '', text })).toBe(true);
+  });
+
   it('should convert ordered lists', () => {
     const md = '1. first\n2. second';
     const html = markdownToHtml(md);
@@ -85,6 +157,16 @@ describe('markdownToHtml', () => {
     expect(html).toContain('data-checked="true"');
   });
 
+  it('keeps adjacent regular and task lists as separate structures', () => {
+    const html = markdownToHtml(
+      '- Regular item\n\n- [ ] Pending task\n- [x] Finished task'
+    );
+
+    expect(html).toContain('<ul><li><p>Regular item</p></li></ul>');
+    expect(html).toContain('<ul data-type="taskList">');
+    expect(html).not.toContain('data-checked="null"');
+  });
+
   it('should convert nested unordered lists', () => {
     const md = '- Item A\n  - Nested A1\n  - Nested A2\n- Item B';
     const html = markdownToHtml(md);
@@ -108,6 +190,12 @@ describe('markdownToHtml', () => {
     );
   });
 
+  it('preserves a copied ordered-list start number', () => {
+    const html = markdownToHtml('3. Third\n4. Fourth');
+
+    expect(html).toContain('<ol start="3">');
+  });
+
   it('should convert deeply nested lists', () => {
     const md = '- A\n  - B\n    - C\n      - D';
     const html = markdownToHtml(md);
@@ -292,3 +380,304 @@ describe('markdownToHtml', () => {
     expect(html).not.toContain('<div>');
   });
 });
+
+describe('task-description clipboard serialization', () => {
+  it('removes duplicate empty blocks while retaining one section gap', () => {
+    const editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'heading',
+          attrs: { level: 1 },
+          content: [{ type: 'text', text: 'KEEPING FROM THE NEW VERSION:' }],
+        },
+        { type: 'paragraph' },
+        { type: 'paragraph' },
+        { type: 'paragraph' },
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text: 'Intro' }],
+        },
+        { type: 'paragraph' },
+        { type: 'paragraph' },
+        {
+          type: 'heading',
+          attrs: { level: 2 },
+          content: [{ type: 'text', text: 'Next section' }],
+        },
+      ],
+    });
+
+    expect(copyDocument(editor)).toBe(
+      '# KEEPING FROM THE NEW VERSION:\n\nIntro\n\n## Next section'
+    );
+  });
+
+  it('retains unordered, nested ordered, and task-list markers', () => {
+    const editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'bulletList',
+          content: [
+            {
+              type: 'listItem',
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [{ type: 'text', text: 'Parent bullet' }],
+                },
+                {
+                  type: 'orderedList',
+                  attrs: { start: 3 },
+                  content: [
+                    {
+                      type: 'listItem',
+                      content: [
+                        {
+                          type: 'paragraph',
+                          content: [{ type: 'text', text: 'Nested step' }],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'taskList',
+          content: [
+            {
+              type: 'taskItem',
+              attrs: { checked: false },
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [{ type: 'text', text: 'Pending' }],
+                },
+              ],
+            },
+            {
+              type: 'taskItem',
+              attrs: { checked: true },
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [{ type: 'text', text: 'Finished' }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(copyDocument(editor)).toBe(
+      [
+        '- Parent bullet',
+        '  3. Nested step',
+        '',
+        '- [ ] Pending',
+        '- [x] Finished',
+      ].join('\n')
+    );
+  });
+
+  it('retains headings, inline formatting, links, and hard breaks', () => {
+    const editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'heading',
+          attrs: { level: 2 },
+          content: [
+            { type: 'text', text: 'Bold', marks: [{ type: 'bold' }] },
+            { type: 'text', text: ' and ' },
+            { type: 'text', text: 'italic', marks: [{ type: 'italic' }] },
+          ],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Docs',
+              marks: [{ type: 'link', attrs: { href: 'https://example.com' } }],
+            },
+            { type: 'hardBreak' },
+            { type: 'text', text: 'deleted', marks: [{ type: 'strike' }] },
+          ],
+        },
+      ],
+    });
+    const slice = editor.state.doc.slice(0, editor.state.doc.content.size);
+    let fromClipboardProp = '';
+    editor.view.someProp('clipboardTextSerializer', (serializer) => {
+      fromClipboardProp = serializer(slice, editor.view);
+      return true;
+    });
+
+    expect(fromClipboardProp).toBe(
+      '## **Bold** and *italic*\n\n[Docs](https://example.com)\n~~deleted~~'
+    );
+  });
+
+  it('creates clean plain text without Markdown formatting delimiters', () => {
+    const editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'heading',
+          attrs: { level: 2 },
+          content: [
+            { type: 'text', text: 'Important', marks: [{ type: 'bold' }] },
+          ],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Read the docs',
+              marks: [{ type: 'link', attrs: { href: 'https://example.com' } }],
+            },
+          ],
+        },
+        {
+          type: 'bulletList',
+          content: [
+            {
+              type: 'listItem',
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [{ type: 'text', text: 'First point' }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(copyDocumentAsPlainText(editor)).toBe(
+      'Important\n\nRead the docs\n\n• First point'
+    );
+  });
+
+  it('uses readable checkbox markers and preserves ordered-list starts in plain text', () => {
+    const editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'taskList',
+          content: [
+            {
+              type: 'taskItem',
+              attrs: { checked: false },
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [{ type: 'text', text: 'Todo' }],
+                },
+              ],
+            },
+            {
+              type: 'taskItem',
+              attrs: { checked: true },
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [{ type: 'text', text: 'Done' }],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'orderedList',
+          attrs: { start: 4 },
+          content: [
+            {
+              type: 'listItem',
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [{ type: 'text', text: 'Continue' }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(copyDocumentAsPlainText(editor)).toBe(
+      '☐ Todo\n☑ Done\n\n4. Continue'
+    );
+  });
+
+  it('round-trips the reported task shape through plain clipboard text', () => {
+    const source = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'heading',
+          attrs: { level: 1 },
+          content: [{ type: 'text', text: 'CHANGES FOR THE SITE' }],
+        },
+        { type: 'paragraph' },
+        { type: 'paragraph' },
+        {
+          type: 'bulletList',
+          content: [
+            {
+              type: 'listItem',
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [
+                    {
+                      type: 'text',
+                      text: 'The new editor:',
+                      marks: [{ type: 'bold' }],
+                    },
+                    { type: 'text', text: ' keep the compact layout.' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+    const clipboardText = copyDocument(source);
+    const destination = createEditor({ type: 'doc', content: [] });
+    destination.commands.setContent(markdownToHtml(clipboardText));
+    const content = destination.getJSON().content ?? [];
+
+    expect(clipboardText).toBe(
+      '# CHANGES FOR THE SITE\n\n- **The new editor:** keep the compact layout.'
+    );
+    expect(content.map((node) => node.type).slice(0, 2)).toEqual([
+      'heading',
+      'bulletList',
+    ]);
+    expect(content[1]).toMatchObject({
+      content: [
+        {
+          content: [
+            {
+              content: [
+                { marks: [{ type: 'bold' }], text: 'The new editor:' },
+                { text: ' keep the compact layout.' },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+  });
+});

package/src/components/ui/text-editor/clipboard-image-files.ts

@@ -0,0 +1,41 @@
+const IMAGE_EXTENSIONS_BY_MIME_TYPE: Readonly<Record<string, string>> = {
+  'image/avif': 'avif',
+  'image/gif': 'gif',
+  'image/jpeg': 'jpg',
+  'image/jpg': 'jpg',
+  'image/png': 'png',
+  'image/svg+xml': 'svg',
+  'image/webp': 'webp',
+};
+
+function normalizeClipboardImageFile(file: File, clipboardType: string): File {
+  const type = file.type || clipboardType;
+  const normalizedType = type.split(';', 1)[0]?.trim().toLowerCase() ?? '';
+  const extension = IMAGE_EXTENSIONS_BY_MIME_TYPE[normalizedType];
+  const currentName = file.name.trim();
+  const name =
+    currentName && (/\.[a-z0-9]+$/i.test(currentName) || !extension)
+      ? currentName
+      : `${currentName || 'pasted-image'}${extension ? `.${extension}` : ''}`;
+
+  if (name === file.name && type === file.type) {
+    return file;
+  }
+
+  return new File([file], name, {
+    lastModified: file.lastModified,
+    type,
+  });
+}
+
+export function getClipboardImageFiles(
+  items: DataTransferItemList | DataTransferItem[]
+): File[] {
+  return Array.from(items)
+    .map((item) => {
+      if (!item.type.startsWith('image/')) return null;
+      const file = item.getAsFile();
+      return file ? normalizeClipboardImageFile(file, item.type) : null;
+    })
+    .filter((file): file is File => file !== null);
+}

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');
+}