@tuturuuu/ui 0.37.2 → 0.39.0

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;
@@ -131,6 +132,7 @@ export interface RichTextEditorProps {
   };
   renderTaskMention?: TaskMentionNodeViewRenderer;
   toolbarLeadingContent?: React.ReactNode;
+  toolbarToolsLabel?: string;
   toggleBlockLabel?: string;
   copyLabels?: EditorCopyLabels;
 }
@@ -158,10 +160,12 @@ export function RichTextEditor({
   yjsProvider,
   collaborationUser,
   allowCollaboration = false,
+  allowEmbeds = true,
   revealToolbarOnFocus = false,
   mentionTranslations,
   renderTaskMention,
   toolbarLeadingContent,
+  toolbarToolsLabel,
   toggleBlockLabel,
   copyLabels,
 }: RichTextEditorProps) {
@@ -453,7 +457,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
@@ -649,6 +653,7 @@ export function RichTextEditor({
           onImageUpload={onImageUpload}
           onConvertToTask={onConvertToTask}
           leadingContent={toolbarLeadingContent}
+          toolsLabel={toolbarToolsLabel}
           toggleBlockLabel={toggleBlockLabel}
           copyLabels={copyLabels}
         />
@@ -657,6 +662,7 @@ export function RichTextEditor({
         <ToolBar
           editor={editor}
           fixedToolbarVisible={fixedToolbarVisible}
+          allowEmbeds={allowEmbeds}
           saveButtonLabel={saveButtonLabel}
           savedButtonLabel={savedButtonLabel}
           workspaceId={workspaceId}
@@ -671,3 +677,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/fixed-toolbar-contents.test.tsx

@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { Editor } from '@tiptap/react';
+import { TooltipProvider } from '@tuturuuu/ui/tooltip';
+import { describe, expect, it, vi } from 'vitest';
+import { FixedToolbarContents } from './fixed-toolbar-contents';
+
+vi.mock('./color-controls', () => ({
+  TextEditorColorControls: () => <button type="button">Colors</button>,
+}));
+vi.mock('./copy-menu', () => ({
+  EditorCopyMenu: () => <button type="button">Copy tools</button>,
+}));
+
+function mount(toolsLabel?: string) {
+  const heading = vi.fn();
+  const bold = vi.fn();
+  const options = new Map([
+    ['bold', { icon: <span>B</span>, pressed: false, onClick: bold }],
+    ['heading-1', { icon: <span>H1</span>, pressed: false, onClick: heading }],
+  ]);
+  render(
+    <TooltipProvider>
+      <FixedToolbarContents
+        editor={{} as Editor}
+        options={options}
+        toolsLabel={toolsLabel}
+        imageUpload={false}
+        videoUpload={false}
+        uploadingImage={false}
+        uploadingVideo={false}
+        onImage={vi.fn()}
+        onVideo={vi.fn()}
+      />
+    </TooltipProvider>
+  );
+  return { heading, bold };
+}
+
+describe('optional compact document toolbar', () => {
+  it('retains the existing full toolbar by default', () => {
+    const { heading } = mount();
+    expect(screen.queryByRole('button', { name: 'Tools' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Heading 1' }));
+    expect(heading).toHaveBeenCalledOnce();
+    expect(screen.getByRole('button', { name: 'Colors' })).toBeTruthy();
+  });
+  it('keeps primary formatting reachable and places secondary controls in Tools', () => {
+    const { heading, bold } = mount('Tools');
+    expect(screen.queryByRole('button', { name: 'Heading 1' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Colors' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Bold' }));
+    expect(bold).toHaveBeenCalledOnce();
+    fireEvent.click(screen.getByRole('button', { name: 'Tools' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Heading 1' }));
+    expect(heading).toHaveBeenCalledOnce();
+    expect(screen.getByRole('button', { name: 'Colors' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Copy tools' })).toBeTruthy();
+  });
+});

package/src/components/ui/text-editor/fixed-toolbar-contents.tsx

@@ -0,0 +1,156 @@
+import type { Editor } from '@tiptap/react';
+import {
+  CirclePlus,
+  FileVideo,
+  ImageIcon,
+  Loader2,
+  Settings2,
+} from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import type { ReactNode } from 'react';
+import { TextEditorColorControls } from './color-controls';
+import { type EditorCopyLabels, EditorCopyMenu } from './copy-menu';
+import { TOOLBAR_GROUPS } from './toolbar-config';
+import { ToolbarButton, ToolbarSeparator } from './toolbar-controls';
+
+interface Props {
+  editor: Editor;
+  options: Map<
+    string,
+    { onClick: () => void; pressed: boolean; icon: ReactNode }
+  >;
+  toolsLabel?: string;
+  toggleBlockLabel?: string;
+  copyLabels?: EditorCopyLabels;
+  imageUpload: boolean;
+  videoUpload: boolean;
+  uploadingImage: boolean;
+  uploadingVideo: boolean;
+  onImage: () => void;
+  onVideo: () => void;
+  onConvertToTask?: () => void | Promise<void>;
+}
+
+/** Optional compact presentation; existing editors keep the full toolbar. */
+export function FixedToolbarContents({
+  editor,
+  options,
+  toolsLabel,
+  toggleBlockLabel,
+  copyLabels,
+  imageUpload,
+  videoUpload,
+  uploadingImage,
+  uploadingVideo,
+  onImage,
+  onVideo,
+  onConvertToTask,
+}: Props) {
+  function control(key: string) {
+    const option = options.get(key);
+    if (!option) return null;
+    return (
+      <ToolbarButton
+        key={key}
+        id={key}
+        label={key === 'toggle-block' ? toggleBlockLabel : undefined}
+        icon={option.icon}
+        pressed={option.pressed}
+        onClick={option.onClick}
+      />
+    );
+  }
+  const primary = new Set(['bold', 'italic', 'strike']);
+  const groups = TOOLBAR_GROUPS.map((group, index) => {
+    const keys = toolsLabel ? group.filter((key) => !primary.has(key)) : group;
+    if (!keys.length) return null;
+    return (
+      <div
+        key={index}
+        className={toolsLabel ? 'flex items-center gap-1' : 'contents'}
+      >
+        {!toolsLabel && index > 0 && <ToolbarSeparator />}
+        {keys.map(control)}
+      </div>
+    );
+  });
+  const secondary = (
+    <>
+      {groups}
+      <ToolbarSeparator />
+      <TextEditorColorControls editor={editor} />
+      {imageUpload && (
+        <>
+          <ToolbarSeparator />
+          <ToolbarButton
+            id="image"
+            icon={
+              uploadingImage ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <ImageIcon className="size-4" />
+              )
+            }
+            pressed={false}
+            onClick={onImage}
+            disabled={uploadingImage}
+          />
+          {videoUpload && (
+            <ToolbarButton
+              id="video"
+              icon={
+                uploadingVideo ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <FileVideo className="size-4" />
+                )
+              }
+              pressed={false}
+              onClick={onVideo}
+              disabled={uploadingVideo}
+            />
+          )}
+        </>
+      )}
+      {onConvertToTask && (
+        <>
+          <ToolbarSeparator />
+          <ToolbarButton
+            id="convert-to-task"
+            icon={<CirclePlus className="size-4" />}
+            pressed={false}
+            onClick={onConvertToTask}
+          />
+        </>
+      )}
+      <ToolbarSeparator />
+      <EditorCopyMenu editor={editor} labels={copyLabels} />
+    </>
+  );
+  if (!toolsLabel) return secondary;
+  return (
+    <>
+      {[...primary].map(control)}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-8 shrink-0"
+          >
+            <Settings2 className="size-4" aria-hidden="true" />
+            {toolsLabel}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="flex w-80 max-w-[calc(100vw-2rem)] flex-wrap items-center gap-1"
+        >
+          {secondary}
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}

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