@tuturuuu/ui 0.37.1 → 0.38.0

package/src/components/ui/legacy/calendar/use-calendar-draft-save.tsx

@@ -0,0 +1,141 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  getGoogleCalendarColorOptions,
+  type CalendarSourceOption,
+} from '@tuturuuu/internal-api';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { Button } from '@tuturuuu/ui/button';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { createCalendarDraftRecovery } from './calendar-draft-recovery';
+import { eventSavePayload } from './event-save-payload';
+
+type Draft = Partial<CalendarEvent>;
+type SaveArgs = {
+  draft: Draft;
+  original?: CalendarEvent;
+  buildPayload: () => Draft;
+  addEvent: (
+    event: Omit<CalendarEvent, 'id'>,
+    options?: { requestId?: string }
+  ) => Promise<CalendarEvent | undefined>;
+  updateEvent: (id: string, payload: Draft) => Promise<unknown>;
+  closeModal: () => void;
+  setIsSaving: (saving: boolean) => void;
+  onError: () => void;
+  isSaving: boolean;
+  source?: CalendarSourceOption;
+  wsId?: string;
+};
+
+export function useCalendarDraftSave(args: SaveArgs) {
+  const t = useTranslations('calendar');
+  const connectionId =
+    args.source?.provider === 'google' ? args.source.connectionId : null;
+  const { data: capabilities } = useQuery({
+    queryKey: ['google-calendar-color-options', args.wsId, connectionId],
+    enabled: !!args.wsId && !!connectionId,
+    queryFn: () => getGoogleCalendarColorOptions(args.wsId!, connectionId!),
+  });
+  const scope = `${args.draft.ws_id}:${args.draft.requestId ?? args.original?.id}`;
+  const state = useRef({ scope, recovery: createCalendarDraftRecovery() });
+  if (state.current.scope !== scope)
+    state.current = { scope, recovery: createCalendarDraftRecovery() };
+  const [uncertainScope, setUncertainScope] = useState<string>();
+  const current = state.current;
+  const recovery = current.recovery;
+  const uncertain = uncertainScope === scope && !recovery.original();
+
+  async function retryOriginal() {
+    const submission = recovery.submitted();
+    if (!submission?.recoverable) return;
+    args.setIsSaving(true);
+    try {
+      const saved = await args.addEvent(
+        submission.payload as Omit<CalendarEvent, 'id'>,
+        {
+          requestId: submission.requestId,
+        }
+      );
+      if (!saved) throw new Error('Unconfirmed creation');
+      if (state.current !== current) return;
+      recovery.complete(saved);
+      // The caller may have edited the draft during the uncertain response.
+      // Keep those edits open; their next save updates the confirmed event ID.
+      setUncertainScope(undefined);
+    } catch {
+      if (state.current === current) args.onError();
+    } finally {
+      if (state.current === current) args.setIsSaving(false);
+    }
+  }
+
+  async function save() {
+    if (uncertain) return;
+    args.setIsSaving(true);
+    try {
+      const payload = args.buildPayload();
+      const confirmed = recovery.original();
+      if (confirmed) {
+        const sourceChanged =
+          JSON.stringify(payload.source) !==
+          JSON.stringify(recovery.submitted()?.payload.source);
+        const updates = eventSavePayload(payload, confirmed, sourceChanged);
+        if (Object.keys(updates).length)
+          await args.updateEvent(confirmed.id, updates);
+      } else if (args.original?.id === 'new') {
+        if (!args.draft.requestId)
+          throw new Error('Missing creation request ID');
+        const submission = recovery.capture(
+          payload,
+          args.draft.requestId,
+          !!connectionId &&
+            capabilities?.connectionId === connectionId &&
+            capabilities.providerColorWrites === true
+        );
+        const saved = await args.addEvent(
+          submission.payload as Omit<CalendarEvent, 'id'>,
+          {
+            requestId: submission.requestId,
+          }
+        );
+        if (!saved) throw new Error('Unconfirmed creation');
+        recovery.complete(saved);
+      } else if (args.original?.id) {
+        if (Object.keys(payload).length)
+          await args.updateEvent(args.original.id, payload);
+      } else throw new Error('No event to save');
+      if (state.current === current) args.closeModal();
+    } catch {
+      if (recovery.submitted() && !recovery.original())
+        setUncertainScope(scope);
+      if (state.current === current) args.onError();
+    } finally {
+      if (state.current === current) args.setIsSaving(false);
+    }
+  }
+
+  return {
+    save,
+    recoveryNotice: uncertain ? (
+      <div role="status" className="mb-2 space-y-2">
+        <p className="text-muted-foreground text-sm">
+          {t(
+            recovery.submitted()?.recoverable
+              ? 'creation_recovery_notice'
+              : 'creation_recovery_unavailable'
+          )}
+        </p>
+        {recovery.submitted()?.recoverable && (
+          <Button
+            variant="outline"
+            onClick={retryOriginal}
+            disabled={args.isSaving}
+          >
+            {t('creation_recovery_retry')}
+          </Button>
+        )}
+      </div>
+    ) : null,
+  };
+}

package/src/components/ui/popover.tsx

@@ -44,4 +44,6 @@ function PopoverAnchor({
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+const PopoverClose = PopoverPrimitive.Close;
+
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/src/components/ui/resizable.tsx

@@ -8,6 +8,7 @@ import {
   type GroupProps as GroupPropsOriginal,
   Panel,
   Separator,
+  usePanelRef,
 } from 'react-resizable-panels';
 
 interface ResizablePanelGroupProps
@@ -96,4 +97,4 @@ function ResizableHandle({
   );
 }
 
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, usePanelRef };

package/src/components/ui/text-editor/__tests__/collaboration-carets.test.ts

@@ -0,0 +1,142 @@
+import { waitFor } from '@testing-library/react';
+import { Editor } from '@tiptap/core';
+import Collaboration from '@tiptap/extension-collaboration';
+import CollaborationCaret from '@tiptap/extension-collaboration-caret';
+import StarterKit from '@tiptap/starter-kit';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  Awareness,
+  applyAwarenessUpdate,
+  encodeAwarenessUpdate,
+} from 'y-protocols/awareness';
+import * as Y from 'yjs';
+import {
+  renderCollaborationCaret,
+  renderCollaborationSelection,
+  scrollToCollaborationCaret,
+} from '../collaboration-carets';
+
+describe('remote cursors and selections', () => {
+  it('identifies duplicate names by account ID and safely renders untrusted names', () => {
+    const root = document.createElement('div');
+    const first = renderCollaborationCaret({
+      id: 'first',
+      name: 'Alex',
+      color: '#123456',
+    });
+    const second = renderCollaborationCaret({
+      id: 'second',
+      name: 'Alex',
+      color: '#654321',
+    });
+    const scrollFirst = vi.fn();
+    const scrollSecond = vi.fn();
+    first.scrollIntoView = scrollFirst;
+    second.scrollIntoView = scrollSecond;
+    root.append(first, second);
+    expect(scrollToCollaborationCaret(root, 'second')).toBe(true);
+    expect(scrollFirst).not.toHaveBeenCalled();
+    expect(scrollSecond).toHaveBeenCalledOnce();
+    const unsafe = renderCollaborationCaret({
+      id: 'third',
+      name: '<img src=x onerror=alert(1)>',
+      color: 'url(evil)',
+    });
+    expect(unsafe.querySelector('img')).toBeNull();
+    expect(unsafe.textContent).toBe('<img src=x onerror=alert(1)>');
+    expect(
+      renderCollaborationSelection({ color: 'url(evil)' }).style
+    ).not.toContain('evil');
+  });
+  it('renders a real Tiptap peer caret and highlights a remote range after Yjs sync', async () => {
+    const a = new Y.Doc();
+    const b = new Y.Doc();
+    const awarenessA = new Awareness(a);
+    const awarenessB = new Awareness(b);
+    const sync = 'wire';
+    a.on('update', (update, origin) => {
+      if (origin !== sync) Y.applyUpdate(b, update, sync);
+    });
+    b.on('update', (update, origin) => {
+      if (origin !== sync) Y.applyUpdate(a, update, sync);
+    });
+    for (const [source, target] of [
+      [awarenessA, awarenessB],
+      [awarenessB, awarenessA],
+    ] as const) {
+      source.on(
+        'update',
+        (
+          {
+            added,
+            updated,
+            removed,
+          }: { added: number[]; updated: number[]; removed: number[] },
+          origin: unknown
+        ) => {
+          if (origin !== sync)
+            applyAwarenessUpdate(
+              target,
+              encodeAwarenessUpdate(source, [...added, ...updated, ...removed]),
+              sync
+            );
+        }
+      );
+    }
+    const elements = [
+      document.createElement('div'),
+      document.createElement('div'),
+    ];
+    for (const element of elements) document.body.append(element);
+    const editors = [
+      [a, awarenessA, 'first'],
+      [b, awarenessB, 'second'],
+    ].map(
+      ([doc, awareness, id], index) =>
+        new Editor({
+          element: elements[index],
+          extensions: [
+            StarterKit.configure({ undoRedo: false }),
+            Collaboration.configure({
+              document: doc as Y.Doc,
+              field: 'prosemirror',
+            }),
+            CollaborationCaret.configure({
+              provider: { awareness },
+              user: { id, name: 'Alex', color: '#123456' },
+              render: renderCollaborationCaret,
+              selectionRender: renderCollaborationSelection,
+            }),
+          ],
+        })
+    );
+    try {
+      editors[0]!.commands.setContent('<p>Hello shared document</p>');
+      await waitFor(() =>
+        expect(editors[1]!.getText()).toBe('Hello shared document')
+      );
+      editors[0]!.view.focus();
+      editors[0]!.commands.setTextSelection({ from: 2, to: 6 });
+      await waitFor(() =>
+        expect(
+          elements[1]!.querySelector('.collaboration-carets__selection')
+        ).not.toBeNull()
+      );
+      expect(
+        elements[1]!.querySelector<HTMLElement>('.collaboration-carets__caret')
+          ?.dataset.userId
+      ).toBe('first');
+      expect(
+        elements[1]!.querySelector('.collaboration-carets__selection')
+          ?.textContent
+      ).toBe('ello');
+    } finally {
+      for (const editor of editors) editor.destroy();
+      awarenessA.destroy();
+      awarenessB.destroy();
+      a.destroy();
+      b.destroy();
+      for (const element of elements) element.remove();
+    }
+  });
+});

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

@@ -0,0 +1,50 @@
+import { Editor } from '@tiptap/core';
+import { afterEach, describe, expect, it } from 'vitest';
+import { getEditorExtensions } from '../extensions';
+import { parseEditorMarkdown, serializeEditorMarkdown } from '../markdown';
+
+const editors: Editor[] = [];
+function editor(markdown: string) {
+  const value = new Editor({
+    extensions: getEditorExtensions(),
+    content: parseEditorMarkdown(markdown),
+  });
+  editors.push(value);
+  return value;
+}
+afterEach(() => {
+  for (const value of editors.splice(0)) value.destroy();
+});
+describe('Full document Markdown editing', () => {
+  it('round-trips headings, bold, links, code, and lists through the editor schema', () => {
+    const source =
+      '# Synthetic chapter\n\n**A hero** meets [a friend](https://example.test).\n\n- First scene\n- Second scene\n\n```ts\nconst year = -10;\n```';
+    const first = editor(source);
+    const markdown = serializeEditorMarkdown(first);
+    const second = editor(markdown);
+    expect(second.getJSON()).toEqual(first.getJSON());
+    expect(markdown).toContain('**A hero**');
+    expect(markdown).toContain('https://example.test');
+    expect(markdown).toContain('const year = -10;');
+  });
+  it('preserves tables, task states, and artwork through source editing', () => {
+    const first = editor(
+      '| Name | Role |\n| --- | --- |\n| Hero | Guide |\n\n- [x] Cross the river\n- [ ] Return home\n\n![Synthetic artwork](https://example.test/art.png)'
+    );
+    const second = editor(serializeEditorMarkdown(first));
+    const json = second.getJSON();
+    expect(JSON.stringify(json)).toContain('table');
+    expect(JSON.stringify(json)).toContain('"checked":true');
+    expect(JSON.stringify(json)).toContain('"checked":false');
+    expect(JSON.stringify(json)).toContain('https://example.test/art.png');
+    expect(second.getText()).toContain('Guide');
+  });
+  it('keeps executable HTML and unsafe links out of the actual editor document', () => {
+    const value = editor(
+      '<script>alert(1)</script>\n\n[Unsafe](javascript:alert)'
+    );
+    const html = value.getHTML();
+    expect(html).not.toContain('<script>');
+    expect(html).not.toContain('href="javascript:');
+  });
+});

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

@@ -187,6 +187,16 @@ function serializeBlock(
       return '---';
     case 'table':
       return serializeTable(node, format);
+    case 'image':
+    case 'imageResize': {
+      const src = typeof node.attrs.src === 'string' ? node.attrs.src : '';
+      const alt = typeof node.attrs.alt === 'string' ? node.attrs.alt : '';
+      return format === 'markdown'
+        ? src
+          ? `![${alt}](${src})`
+          : alt
+        : [alt || 'Image', src].filter(Boolean).join(': ');
+    }
     case 'video':
       return node.attrs.src
         ? format === 'markdown'

package/src/components/ui/text-editor/collaboration-carets.ts

@@ -0,0 +1,56 @@
+type CaretUser = { id?: unknown; name?: unknown; color?: unknown };
+function identity(user: CaretUser) {
+  return typeof user.id === 'string' ? user.id.slice(0, 100) : '';
+}
+function color(user: CaretUser) {
+  return typeof user.color === 'string' && /^#[0-9a-f]{6}$/i.test(user.color)
+    ? user.color
+    : 'var(--primary)';
+}
+/** Self-contained caret styling works in every editor surface, including Meet. */
+export function renderCollaborationCaret(user: CaretUser) {
+  const caret = document.createElement('span');
+  caret.className = 'collaboration-carets__caret';
+  caret.dataset.userId = identity(user);
+  Object.assign(caret.style, {
+    borderLeft: `2px solid ${color(user)}`,
+    position: 'relative',
+    marginLeft: '-1px',
+    pointerEvents: 'none',
+  });
+  const label = document.createElement('span');
+  label.className = 'collaboration-carets__label';
+  label.dataset.userId = identity(user);
+  label.textContent =
+    typeof user.name === 'string' ? user.name.slice(0, 100) : '';
+  Object.assign(label.style, {
+    position: 'absolute',
+    top: '-1.4em',
+    left: '-2px',
+    padding: '1px 4px',
+    borderRadius: '3px 3px 3px 0',
+    backgroundColor: color(user),
+    color: 'var(--primary-foreground)',
+    fontSize: '11px',
+    lineHeight: '1.2',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+  });
+  caret.append(label);
+  return caret;
+}
+export function renderCollaborationSelection(user: CaretUser) {
+  return {
+    nodeName: 'span',
+    class: 'collaboration-carets__selection',
+    'data-user-id': identity(user),
+    style: `background-color: color-mix(in srgb, ${color(user)} 24%, transparent);`,
+  };
+}
+export function scrollToCollaborationCaret(root: HTMLElement, userId: string) {
+  const caret = [
+    ...root.querySelectorAll<HTMLElement>('.collaboration-carets__caret'),
+  ].find((element) => element.dataset.userId === userId);
+  caret?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  return !!caret;
+}

package/src/components/ui/text-editor/editor-readonly-transition.test.tsx

@@ -53,6 +53,7 @@ it('removes click-blocking classes after sync without recreating the editor', as
   await act(async () => {});
   await waitFor(() => expect(editorRef.current).not.toBeNull());
   const original = editorRef.current!;
+  expect(onImmediateChange).not.toHaveBeenCalled();
   expect(original.view.dom.className).toContain(
     '[&_.task-list-checkbox]:!pointer-events-none'
   );
@@ -67,6 +68,7 @@ it('removes click-blocking classes after sync without recreating the editor', as
   await act(async () => {});
   expect(editorRef.current).toBe(original);
   expect(original.isEditable).toBe(true);
+  expect(onImmediateChange).not.toHaveBeenCalled();
   expect(original.view.dom.className).not.toContain(
     '[&_.task-list-checkbox]:!pointer-events-none'
   );

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

@@ -9,10 +9,10 @@ import {
   useEditor,
 } from '@tiptap/react';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import type SupabaseProvider from '@tuturuuu/ui/hooks/supabase-provider';
 import { debounce } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
+import type { Awareness } from 'y-protocols/awareness';
 import type * as Y from 'yjs';
 import { migrateInlineImagesToBlock } from './content-migration';
 import type { EditorCopyLabels } from './copy-menu';
@@ -84,6 +84,7 @@ export interface RichTextEditorProps {
   savedButtonLabel?: string;
   className?: string;
   workspaceId?: string;
+  allowEmbeds?: boolean;
   onImageUpload?: (file: File) => Promise<string>;
   flushPendingRef?: { current: (() => JSONContent | null) | undefined };
   onArrowUp?: (cursorOffset?: number) => void;
@@ -92,7 +93,7 @@ export interface RichTextEditorProps {
   initialCursorOffset?: number | null;
   onEditorReady?: (editor: Editor) => void;
   yjsDoc?: Y.Doc;
-  yjsProvider?: SupabaseProvider;
+  yjsProvider?: { awareness: Awareness };
   /** User info for collaboration cursor labels. */
   collaborationUser?: { id?: string; name: string; color: string };
   boardId?: string;
@@ -158,6 +159,7 @@ export function RichTextEditor({
   yjsProvider,
   collaborationUser,
   allowCollaboration = false,
+  allowEmbeds = true,
   revealToolbarOnFocus = false,
   mentionTranslations,
   renderTaskMention,
@@ -453,7 +455,7 @@ export function RichTextEditor({
         attributes: { class: getEditorClasses },
       },
     });
-    editor.setEditable(!readOnly);
+    editor.setEditable(!readOnly, false);
   }, [editor, readOnly, getEditorClasses]);
 
   // Update editor content when the content prop changes externally
@@ -657,6 +659,7 @@ export function RichTextEditor({
         <ToolBar
           editor={editor}
           fixedToolbarVisible={fixedToolbarVisible}
+          allowEmbeds={allowEmbeds}
           saveButtonLabel={saveButtonLabel}
           savedButtonLabel={savedButtonLabel}
           workspaceId={workspaceId}
@@ -671,3 +674,5 @@ export function RichTextEditor({
     </div>
   );
 }
+
+export { parseEditorMarkdown, serializeEditorMarkdown } from './markdown';

package/src/components/ui/text-editor/extensions.ts

@@ -19,9 +19,13 @@ import { TextStyle } from '@tiptap/extension-text-style';
 import Youtube from '@tiptap/extension-youtube';
 import type { Extensions } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
-import type SupabaseProvider from '@tuturuuu/ui/hooks/supabase-provider';
+import type { Awareness } from 'y-protocols/awareness';
 import type * as Y from 'yjs';
 import { BackgroundColor } from './background-color-extension';
+import {
+  renderCollaborationCaret,
+  renderCollaborationSelection,
+} from './collaboration-carets';
 import { ThemeAwareHighlight } from './highlight-extension';
 import { CustomImage } from './image-extension';
 import { ListConverter } from './list-converter-extension';
@@ -38,7 +42,7 @@ interface EditorExtensionsOptions {
   titlePlaceholder?: string;
   writePlaceholder?: string;
   doc?: Y.Doc;
-  provider?: SupabaseProvider;
+  provider?: { awareness: Awareness };
   /** User info for CollaborationCaret labels (name shown on remote cursors). */
   collaborationUser?: { id?: string; name: string; color: string };
   onImageUpload?: (file: File) => Promise<string>;
@@ -98,6 +102,8 @@ export function getEditorExtensions({
           CollaborationCaret.configure({
             provider,
             user: collaborationUser,
+            render: renderCollaborationCaret,
+            selectionRender: renderCollaborationSelection,
           }),
         ]
       : []),

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

@@ -421,7 +421,7 @@ function parseTable(
   return { html, endIndex: i };
 }
 
-function markdownToHtml(markdown: string): string {
+export function markdownToHtml(markdown: string): string {
   const lines = markdown.split('\n');
   const result: string[] = [];
   let i = 0;

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

@@ -0,0 +1,11 @@
+import { Slice } from '@tiptap/pm/model';
+import type { Editor } from '@tiptap/react';
+import { serializeClipboardText } from './clipboard-serialization';
+import { markdownToHtml } from './markdown-paste-extension';
+
+/** The same sanitized Markdown parser used by editor paste. */
+export const parseEditorMarkdown = markdownToHtml;
+/** Export a complete document using the in-house clipboard serializer. */
+export function serializeEditorMarkdown(editor: Editor) {
+  return serializeClipboardText(new Slice(editor.state.doc.content, 0, 0));
+}