@tuturuuu/ui 0.28.1 → 0.29.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.29.0](https://github.com/tutur3u/platform/compare/ui-v0.28.1...ui-v0.29.0) (2026-08-20)
+
+
+### Features
+
+* **editor:** add copy format menu ([389a6f0](https://github.com/tutur3u/platform/commit/389a6f02d822feef271409a9ab31e8fcbb6ef18e))
+
+
+### Bug Fixes
+
+* **editor:** contain toolbar overflow ([6bda614](https://github.com/tutur3u/platform/commit/6bda61416cbd2e4d4d4af7c7337d7b4e905274ef))
+* **editor:** keep copy menu in toolbar ([c9dd241](https://github.com/tutur3u/platform/commit/c9dd2416f7e1b397c3293445d0bd0564a48c6bda))
+* **editor:** preserve semantic rich paste ([bea67ca](https://github.com/tutur3u/platform/commit/bea67cac57b52b82a9ed4d7fd1a8a892cf4ceea4))
+* **editor:** preserve task clipboard structure ([2d05d86](https://github.com/tutur3u/platform/commit/2d05d8602f39975805944edfccb2e10818863413))
+* **tasks:** restore pasted image uploads ([3edef4e](https://github.com/tutur3u/platform/commit/3edef4e04a1fc6963904b7861d422f8db9d5b749))
+
 ## [0.28.1](https://github.com/tutur3u/platform/compare/ui-v0.28.0...ui-v0.28.1) (2026-08-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.28.1",
+  "version": "0.29.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -91,9 +91,9 @@
     "@tuturuuu/apis": "0.11.2",
     "@tuturuuu/hooks": "0.1.1",
     "@tuturuuu/icons": "0.1.0",
-    "@tuturuuu/internal-api": "0.31.0",
+    "@tuturuuu/internal-api": "0.31.1",
     "@tuturuuu/supabase": "0.5.0",
-    "@tuturuuu/utils": "0.25.2",
+    "@tuturuuu/utils": "0.25.3",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",

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

@@ -18,4 +18,70 @@ describe('ImageExtension clipboard files', () => {
 
     expect(images).toEqual([imageFile]);
   });
+
+  it('names an unnamed screenshot from its clipboard MIME type', () => {
+    const unnamedImage = new File(['image'], '', { type: 'image/png' });
+
+    const [image] = __imageExtensionPrivate.getClipboardImageFiles([
+      {
+        type: 'image/png',
+        getAsFile: () => unnamedImage,
+      } as DataTransferItem,
+    ]);
+
+    expect(image).toBeInstanceOf(File);
+    expect(image?.name).toBe('pasted-image.png');
+    expect(image?.type).toBe('image/png');
+    expect(image?.size).toBe(unnamedImage.size);
+  });
+
+  it('adds an extension to an extensionless clipboard filename', () => {
+    const extensionlessImage = new File(['image'], 'Screenshot', {
+      type: 'image/jpeg',
+    });
+
+    const [image] = __imageExtensionPrivate.getClipboardImageFiles([
+      {
+        type: 'image/jpeg',
+        getAsFile: () => extensionlessImage,
+      } as DataTransferItem,
+    ]);
+
+    expect(image?.name).toBe('Screenshot.jpg');
+    expect(image?.type).toBe('image/jpeg');
+  });
+
+  it('restores a missing file MIME type from the clipboard item', () => {
+    const imageWithoutType = new File(['image'], '', { type: '' });
+
+    const [image] = __imageExtensionPrivate.getClipboardImageFiles([
+      {
+        type: 'image/webp',
+        getAsFile: () => imageWithoutType,
+      } as DataTransferItem,
+    ]);
+
+    expect(image?.name).toBe('pasted-image.webp');
+    expect(image?.type).toBe('image/webp');
+  });
+
+  it('ignores non-image items and null image files without losing valid images', () => {
+    const imageFile = new File(['image'], 'capture.png', {
+      type: 'image/png',
+    });
+
+    const images = __imageExtensionPrivate.getClipboardImageFiles([
+      {
+        type: 'text/plain',
+        getAsFile: () => new File(['text'], 'note.txt'),
+      } as DataTransferItem,
+      { type: 'image/png', getAsFile: () => null } as DataTransferItem,
+      {
+        type: 'image/png',
+        getAsFile: () => imageFile,
+      } as DataTransferItem,
+    ]);
+
+    expect(images).toEqual([imageFile]);
+  });
 });

package/src/components/ui/text-editor/__tests__/inline-task-conversion.test.tsx

@@ -1,9 +1,11 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import type { Editor } from '@tiptap/react';
-import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Editor } from '@tiptap/core';
+import type { Editor as TiptapEditor } from '@tiptap/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { getEditorExtensions } from '../extensions';
 import { FixedToolbar } from '../tool-bar';
 
-function createEditorStub(): Editor {
+function createEditorStub(): TiptapEditor {
   const chain = {
     focus: vi.fn(() => chain),
     insertTable: vi.fn(() => chain),
@@ -26,9 +28,16 @@ function createEditorStub(): Editor {
   return {
     chain: vi.fn(() => chain),
     isActive: vi.fn(() => false),
-  } as unknown as Editor;
+  } as unknown as TiptapEditor;
 }
 
+const editors: Editor[] = [];
+
+afterEach(() => {
+  for (const editor of editors.splice(0)) editor.destroy();
+  vi.restoreAllMocks();
+});
+
 describe('inline task conversion toolbar', () => {
   it('delegates conversion to the provided callback', async () => {
     const onConvertToTask = vi.fn();
@@ -73,4 +82,106 @@ describe('inline task conversion toolbar', () => {
       screen.getByRole('button', { name: 'Liste ou titre repliable' })
     ).toBeInTheDocument();
   });
+
+  it('keeps every control in a scrollbar-free horizontal lane without shrinking', () => {
+    const { container } = render(
+      <FixedToolbar
+        editor={createEditorStub()}
+        leadingContent={<button type="button">99% left</button>}
+      />
+    );
+    const toolbar = container.firstElementChild;
+    const capacityButton = screen.getByRole('button', { name: '99% left' });
+    const boldButton = screen.getByRole('button', { name: 'Bold' });
+    const copyButton = screen.getByRole('button', { name: 'Copy content' });
+
+    expect(toolbar).toHaveClass(
+      '@container',
+      'flex-nowrap',
+      'max-w-full',
+      'overflow-x-auto',
+      'overflow-y-hidden',
+      'overscroll-x-contain',
+      'scrollbar-hide'
+    );
+    expect(toolbar).not.toHaveClass('flex-wrap');
+    expect(copyButton.closest('.ml-auto')).toBeNull();
+    expect(capacityButton.compareDocumentPosition(boldButton)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+    expect(copyButton).toHaveClass('h-8', 'w-8', 'shrink-0', 'rounded-md');
+    expect(boldButton).toHaveClass('h-8', 'w-8', 'shrink-0', 'rounded-md');
+  });
+
+  it('copies the full document in either Markdown or plain-text form', async () => {
+    const editor = new Editor({
+      extensions: getEditorExtensions(),
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'heading',
+            attrs: { level: 1 },
+            content: [{ type: 'text', text: 'Plan' }],
+          },
+          {
+            type: 'bulletList',
+            content: [
+              {
+                type: 'listItem',
+                content: [
+                  {
+                    type: 'paragraph',
+                    content: [
+                      {
+                        type: 'text',
+                        text: 'Ship it',
+                        marks: [{ type: 'bold' }],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    });
+    editors.push(editor);
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText },
+    });
+
+    render(<FixedToolbar editor={editor} />);
+
+    fireEvent.pointerDown(
+      await screen.findByRole('button', { name: 'Copy content' })
+    );
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: /Copy as Markdown/ })
+    );
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('menuitem', { name: /Copy as Markdown/ })
+      ).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(writeText).toHaveBeenLastCalledWith('# Plan\n\n- **Ship it**')
+    );
+
+    fireEvent.pointerDown(screen.getByRole('button', { name: 'Copy content' }));
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: /Copy as plain text/ })
+    );
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('menuitem', { name: /Copy as plain text/ })
+      ).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(writeText).toHaveBeenLastCalledWith('Plan\n\n• Ship it')
+    );
+  });
 });

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