@tuturuuu/ui 0.7.0 → 0.9.0

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

@@ -0,0 +1,284 @@
+import type { Editor } from '@tiptap/react';
+import { Highlighter, Paintbrush, TextIcon, X } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+
+interface EditorColorSwatch {
+  name: string;
+  foreground: string;
+  background: string;
+}
+
+const EDITOR_COLOR_SWATCHES: EditorColorSwatch[] = [
+  {
+    name: 'Yellow',
+    foreground: 'var(--yellow)',
+    background: 'var(--calendar-bg-yellow)',
+  },
+  {
+    name: 'Orange',
+    foreground: 'var(--orange)',
+    background: 'var(--calendar-bg-orange)',
+  },
+  {
+    name: 'Red',
+    foreground: 'var(--red)',
+    background: 'var(--calendar-bg-red)',
+  },
+  {
+    name: 'Pink',
+    foreground: 'var(--pink)',
+    background: 'var(--calendar-bg-pink)',
+  },
+  {
+    name: 'Purple',
+    foreground: 'var(--purple)',
+    background: 'var(--calendar-bg-purple)',
+  },
+  {
+    name: 'Blue',
+    foreground: 'var(--blue)',
+    background: 'var(--calendar-bg-blue)',
+  },
+  {
+    name: 'Green',
+    foreground: 'var(--green)',
+    background: 'var(--calendar-bg-green)',
+  },
+  {
+    name: 'Gray',
+    foreground: 'var(--gray)',
+    background: 'var(--calendar-bg-gray)',
+  },
+];
+
+type HighlightAttributes = {
+  color: string;
+  textColor?: string;
+};
+
+type TextStyleAttributes = {
+  color?: string | null;
+  backgroundColor?: string | null;
+};
+
+interface TextEditorColorControlsProps {
+  editor: Editor | null;
+}
+
+export function TextEditorColorControls({
+  editor,
+}: TextEditorColorControlsProps) {
+  if (!editor) return null;
+
+  const getAttributes = editor.getAttributes?.bind(editor);
+  const highlightAttributes = (getAttributes?.('highlight') ?? {}) as {
+    color?: string | null;
+    textColor?: string | null;
+  };
+  const textStyleAttributes = (getAttributes?.('textStyle') ??
+    {}) as TextStyleAttributes;
+
+  const textColor = textStyleAttributes.color ?? null;
+  const backgroundColor = textStyleAttributes.backgroundColor ?? null;
+  const highlightColor = highlightAttributes.color ?? null;
+  const highlightTextColor = highlightAttributes.textColor ?? null;
+
+  return (
+    <>
+      <ColorControlPopover
+        active={editor.isActive('highlight')}
+        clearLabel="Clear highlight"
+        indicatorBackground={highlightColor}
+        indicatorColor={highlightTextColor}
+        label="Highlight color"
+        icon={<Highlighter className="size-4" />}
+        onClear={() => editor.chain().focus().unsetHighlight().run()}
+        swatchKind="highlight"
+        onSelect={(swatch) => {
+          const attributes: HighlightAttributes = {
+            color: swatch.background,
+            textColor: swatch.foreground,
+          };
+
+          editor.chain().focus().setHighlight(attributes).run();
+        }}
+        isSwatchActive={(swatch) =>
+          editor.isActive('highlight', {
+            color: swatch.background,
+            textColor: swatch.foreground,
+          })
+        }
+      />
+      <ColorControlPopover
+        active={Boolean(textColor)}
+        clearLabel="Clear text color"
+        indicatorColor={textColor}
+        label="Text color"
+        icon={<TextIcon className="size-4" />}
+        onClear={() => editor.chain().focus().unsetColor().run()}
+        swatchKind="text"
+        onSelect={(swatch) =>
+          editor.chain().focus().setColor(swatch.foreground).run()
+        }
+        isSwatchActive={(swatch) =>
+          editor.isActive('textStyle', { color: swatch.foreground })
+        }
+      />
+      <ColorControlPopover
+        active={Boolean(backgroundColor)}
+        clearLabel="Clear background color"
+        indicatorBackground={backgroundColor}
+        label="Background color"
+        icon={<Paintbrush className="size-4" />}
+        onClear={() => editor.chain().focus().unsetBackgroundColor().run()}
+        swatchKind="background"
+        onSelect={(swatch) =>
+          editor.chain().focus().setBackgroundColor(swatch.background).run()
+        }
+        isSwatchActive={(swatch) =>
+          editor.isActive('textStyle', {
+            backgroundColor: swatch.background,
+          })
+        }
+      />
+    </>
+  );
+}
+
+interface ColorControlPopoverProps {
+  active: boolean;
+  clearLabel: string;
+  icon: React.ReactNode;
+  indicatorBackground?: string | null;
+  indicatorColor?: string | null;
+  isSwatchActive: (swatch: EditorColorSwatch) => boolean;
+  label: string;
+  onClear: () => void;
+  onSelect: (swatch: EditorColorSwatch) => void;
+  swatchKind: 'highlight' | 'text' | 'background';
+}
+
+function ColorControlPopover({
+  active,
+  clearLabel,
+  icon,
+  indicatorBackground,
+  indicatorColor,
+  isSwatchActive,
+  label,
+  onClear,
+  onSelect,
+  swatchKind,
+}: ColorControlPopoverProps) {
+  return (
+    <Popover>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              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',
+                active &&
+                  'border-foreground/10 bg-dynamic-surface/80 text-foreground'
+              )}
+              onMouseDown={(event) => event.preventDefault()}
+              size="icon"
+              type="button"
+              variant="ghost"
+            >
+              {icon}
+              <span
+                className="pointer-events-none absolute right-1 bottom-1 h-1.5 w-4 rounded-full border border-background"
+                style={{
+                  backgroundColor:
+                    indicatorBackground ?? indicatorColor ?? 'transparent',
+                }}
+              />
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">{label}</TooltipContent>
+      </Tooltip>
+      <PopoverContent align="start" className="w-56 p-2">
+        <div className="space-y-2">
+          <div className="font-medium text-muted-foreground text-xs">
+            {label}
+          </div>
+          <div className="grid grid-cols-4 gap-1.5">
+            {EDITOR_COLOR_SWATCHES.map((swatch) => (
+              <SwatchButton
+                active={isSwatchActive(swatch)}
+                key={`${swatchKind}-${swatch.name}`}
+                swatch={swatch}
+                swatchKind={swatchKind}
+                onSelect={() => onSelect(swatch)}
+              />
+            ))}
+          </div>
+          <Button
+            className="h-8 w-full justify-start px-2 text-xs"
+            onClick={onClear}
+            onMouseDown={(event) => event.preventDefault()}
+            type="button"
+            variant="ghost"
+          >
+            <X className="mr-1.5 size-3.5" />
+            {clearLabel}
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface SwatchButtonProps {
+  active: boolean;
+  onSelect: () => void;
+  swatch: EditorColorSwatch;
+  swatchKind: 'highlight' | 'text' | 'background';
+}
+
+function SwatchButton({
+  active,
+  onSelect,
+  swatch,
+  swatchKind,
+}: SwatchButtonProps) {
+  const backgroundColor =
+    swatchKind === 'text' ? 'var(--background)' : swatch.background;
+  const color =
+    swatchKind === 'background' ? 'var(--foreground)' : swatch.foreground;
+
+  return (
+    <Button
+      aria-label={`${swatch.name} ${swatchKind}`}
+      className={cn(
+        'h-8 w-8 rounded-md border border-dynamic-border p-0 transition-all hover:scale-105',
+        active &&
+          'ring-2 ring-foreground/30 ring-offset-1 ring-offset-background'
+      )}
+      onClick={onSelect}
+      onMouseDown={(event) => event.preventDefault()}
+      size="icon"
+      style={{ backgroundColor, color }}
+      type="button"
+      variant="ghost"
+    >
+      {swatchKind === 'text' ? (
+        <TextIcon className="size-4" />
+      ) : (
+        <span
+          className="size-4 rounded-sm border border-foreground/10"
+          style={{
+            backgroundColor: swatch.background,
+          }}
+        />
+      )}
+    </Button>
+  );
+}

package/src/components/ui/text-editor/content-migration.ts

@@ -6,6 +6,10 @@ import type { JSONContent } from '@tiptap/react';
  */
 const IMAGE_NODE_TYPES = ['image', 'imageResize'];
 
+function getContentChildren(node: JSONContent): JSONContent[] | null {
+  return Array.isArray(node.content) ? node.content : null;
+}
+
 /**
  * Migrates content from inline images (inside paragraphs) to block-level images.
  * This ensures backward compatibility when switching from inline: true to inline: false.
@@ -36,13 +40,19 @@ const IMAGE_NODE_TYPES = ['image', 'imageResize'];
 export function migrateInlineImagesToBlock(
   content: JSONContent | null
 ): JSONContent | null {
-  if (!content?.content) return content;
+  if (!content) return content;
+
+  const contentChildren = getContentChildren(content);
+  if (!contentChildren) return content;
 
   const newContent: JSONContent[] = [];
 
-  for (const node of content.content) {
+  for (const node of contentChildren) {
     // Recursively migrate nested structures (lists, blockquotes, etc.)
-    if (node.content && !IMAGE_NODE_TYPES.includes(node.type || '')) {
+    if (
+      getContentChildren(node) &&
+      !IMAGE_NODE_TYPES.includes(node.type || '')
+    ) {
       const migratedNode = migrateNodeContent(node);
       if (migratedNode.extractedImages.length > 0) {
         // Add the node with non-image content (if it has any)
@@ -74,18 +84,23 @@ interface MigratedNode {
  * Recursively migrates a node's content, extracting inline images from paragraphs.
  */
 function migrateNodeContent(node: JSONContent): MigratedNode {
+  const contentChildren = getContentChildren(node);
+
   // Handle paragraph nodes - extract inline images
-  if (node.type === 'paragraph' && node.content?.length) {
+  if (node.type === 'paragraph' && contentChildren?.length) {
     return extractImagesFromParagraph(node);
   }
 
   // Handle container nodes (list items, blockquotes, table cells, etc.) - recurse into children
-  if (node.content?.length) {
+  if (contentChildren?.length) {
     const migratedChildren: JSONContent[] = [];
     const allExtractedImages: JSONContent[] = [];
 
-    for (const child of node.content) {
-      if (child.content && !IMAGE_NODE_TYPES.includes(child.type || '')) {
+    for (const child of contentChildren) {
+      if (
+        getContentChildren(child) &&
+        !IMAGE_NODE_TYPES.includes(child.type || '')
+      ) {
         const result = migrateNodeContent(child);
 
         if (result.extractedImages.length > 0) {
@@ -116,14 +131,16 @@ function migrateNodeContent(node: JSONContent): MigratedNode {
  * and the extracted images separately.
  */
 function extractImagesFromParagraph(paragraph: JSONContent): MigratedNode {
-  if (!paragraph.content) {
+  const contentChildren = getContentChildren(paragraph);
+
+  if (!contentChildren) {
     return { node: paragraph, extractedImages: [] };
   }
 
   const textContent: JSONContent[] = [];
   const images: JSONContent[] = [];
 
-  for (const child of paragraph.content) {
+  for (const child of contentChildren) {
     if (IMAGE_NODE_TYPES.includes(child.type || '')) {
       images.push(child);
     } else {
@@ -148,9 +165,10 @@ function extractImagesFromParagraph(paragraph: JSONContent): MigratedNode {
  * Empty paragraphs should be filtered out when all content was extracted.
  */
 function hasNonEmptyContent(node: JSONContent): boolean {
-  if (!node.content || node.content.length === 0) return false;
+  const contentChildren = getContentChildren(node);
+  if (!contentChildren || contentChildren.length === 0) return false;
 
-  return node.content.some((child) => {
+  return contentChildren.some((child) => {
     // Check for text content
     if (child.text && child.text.trim().length > 0) return true;
 
@@ -165,7 +183,7 @@ function hasNonEmptyContent(node: JSONContent): boolean {
     }
 
     // Recursively check children
-    if (child.content) return hasNonEmptyContent(child);
+    if (getContentChildren(child)) return hasNonEmptyContent(child);
 
     return false;
   });
@@ -176,24 +194,29 @@ function hasNonEmptyContent(node: JSONContent): boolean {
  * Used to avoid unnecessary processing.
  */
 export function needsMigration(content: JSONContent | null): boolean {
-  if (!content?.content) return false;
+  if (!content) return false;
+
+  const contentChildren = getContentChildren(content);
+  if (!contentChildren) return false;
 
   function checkNode(node: JSONContent): boolean {
+    const nodeChildren = getContentChildren(node);
+
     // Check if this is a paragraph with inline images
-    if (node.type === 'paragraph' && node.content?.length) {
-      const hasImage = node.content.some((child) =>
+    if (node.type === 'paragraph' && nodeChildren?.length) {
+      const hasImage = nodeChildren.some((child) =>
         IMAGE_NODE_TYPES.includes(child.type || '')
       );
       if (hasImage) return true;
     }
 
     // Recursively check children
-    if (node.content?.length) {
-      return node.content.some((child) => checkNode(child));
+    if (nodeChildren?.length) {
+      return nodeChildren.some((child) => checkNode(child));
     }
 
     return false;
   }
 
-  return content.content.some((node) => checkNode(node));
+  return contentChildren.some((node) => checkNode(node));
 }

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

@@ -42,6 +42,26 @@ const hasContent = (node: JSONContent): boolean => {
   return false;
 };
 
+function syncEditorContent(editor: Editor, nextContent: JSONContent | null) {
+  const migratedContent = migrateInlineImagesToBlock(nextContent);
+  const currentContent = editor.getJSON();
+  const contentChanged =
+    JSON.stringify(currentContent) !== JSON.stringify(migratedContent);
+
+  if (contentChanged) {
+    editor.commands.setContent(
+      migratedContent || { type: 'doc', content: [] },
+      {
+        emitUpdate: false,
+      }
+    );
+  }
+}
+
+function serializeEditorContent(content: JSONContent | null) {
+  return JSON.stringify(content ?? { type: 'doc', content: [] });
+}
+
 interface RichTextEditorProps {
   content: JSONContent | null;
   onChange?: (content: JSONContent | null) => void;
@@ -127,6 +147,9 @@ export function RichTextEditor({
   const debouncedOnChangeRef = useRef<ReturnType<typeof debounce> | null>(null);
   // Track when we're in a programmatic update to skip content sync
   const isProgrammaticUpdateRef = useRef(false);
+  const hasDeferredExternalContentRef = useRef(false);
+  const deferredExternalContentRef = useRef<JSONContent | null>(null);
+  const deferredEditorSnapshotRef = useRef<string | null>(null);
   const getDelegatedImageUpload = useCallback(
     () => onImageUploadRef.current,
     []
@@ -566,26 +589,58 @@ export function RichTextEditor({
     // This prevents the effect from reverting editor content before state update propagates
     if (isProgrammaticUpdateRef.current) {
       isProgrammaticUpdateRef.current = false;
+      hasDeferredExternalContentRef.current = false;
+      deferredExternalContentRef.current = null;
+      deferredEditorSnapshotRef.current = null;
       return;
     }
 
-    // Migrate inline images to block-level for backward compatibility
-    const migratedContent = migrateInlineImagesToBlock(content);
-    const currentContent = editor.getJSON();
-    const contentChanged =
-      JSON.stringify(currentContent) !== JSON.stringify(migratedContent);
-
-    if (contentChanged) {
-      // Update editor content without triggering onChange
-      editor.commands.setContent(
-        migratedContent || { type: 'doc', content: [] },
-        {
-          emitUpdate: false,
-        }
-      );
+    if (editor.isFocused) {
+      if (!hasDeferredExternalContentRef.current) {
+        deferredEditorSnapshotRef.current = serializeEditorContent(
+          editor.getJSON()
+        );
+      }
+      hasDeferredExternalContentRef.current = true;
+      deferredExternalContentRef.current = content;
+      return;
     }
+
+    hasDeferredExternalContentRef.current = false;
+    deferredExternalContentRef.current = null;
+    deferredEditorSnapshotRef.current = null;
+    syncEditorContent(editor, content);
   }, [editor, content, allowCollaboration]);
 
+  useEffect(() => {
+    if (!editor || allowCollaboration) return;
+
+    const syncDeferredContent = () => {
+      if (!hasDeferredExternalContentRef.current) return;
+
+      hasDeferredExternalContentRef.current = false;
+      const deferredContent = deferredExternalContentRef.current;
+      const deferredEditorSnapshot = deferredEditorSnapshotRef.current;
+      deferredExternalContentRef.current = null;
+      deferredEditorSnapshotRef.current = null;
+
+      if (
+        deferredEditorSnapshot !== null &&
+        serializeEditorContent(editor.getJSON()) !== deferredEditorSnapshot
+      ) {
+        return;
+      }
+
+      syncEditorContent(editor, deferredContent);
+    };
+
+    editor.on('blur', syncDeferredContent);
+
+    return () => {
+      editor.off('blur', syncDeferredContent);
+    };
+  }, [editor, allowCollaboration]);
+
   // Handle initial cursor positioning when focusing from title
   useEffect(() => {
     if (

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

@@ -1,7 +1,7 @@
 import { InputRule } from '@tiptap/core';
 import Collaboration from '@tiptap/extension-collaboration';
 import CollaborationCaret from '@tiptap/extension-collaboration-caret';
-import Highlight from '@tiptap/extension-highlight';
+import { Color } from '@tiptap/extension-color';
 import HorizontalRule from '@tiptap/extension-horizontal-rule';
 import Link from '@tiptap/extension-link';
 import { TaskList } from '@tiptap/extension-list';
@@ -14,11 +14,14 @@ import TableCell from '@tiptap/extension-table-cell';
 import TableHeader from '@tiptap/extension-table-header';
 import TableRow from '@tiptap/extension-table-row';
 import TextAlign from '@tiptap/extension-text-align';
+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 * as Y from 'yjs';
+import { BackgroundColor } from './background-color-extension';
+import { ThemeAwareHighlight } from './highlight-extension';
 import { CustomImage } from './image-extension';
 import { ListConverter } from './list-converter-extension';
 import { ListItemBase } from './list-item-extension';
@@ -148,7 +151,10 @@ export function getEditorExtensions({
     }),
     TextShortcuts,
     MarkdownPaste,
-    Highlight,
+    TextStyle,
+    Color,
+    BackgroundColor,
+    ThemeAwareHighlight,
     Link.configure({
       openOnClick: true,
       autolink: true,
@@ -213,7 +219,7 @@ export function getEditorExtensions({
       getOnImageUpload,
       getOnVideoUpload,
     }),
-    Video({ onVideoUpload }).configure({
+    Video({ onVideoUpload, getOnVideoUpload }).configure({
       HTMLAttributes: {
         class: 'rounded-md my-4',
       },

package/src/components/ui/text-editor/highlight-extension.ts

@@ -0,0 +1,22 @@
+import Highlight from '@tiptap/extension-highlight';
+
+export const ThemeAwareHighlight = Highlight.extend({
+  addAttributes() {
+    return {
+      ...(this.parent?.() ?? {}),
+      textColor: {
+        default: null,
+        parseHTML: (element) => element.style.getPropertyValue('color') || null,
+        renderHTML: (attributes) => {
+          if (!attributes.textColor) return {};
+
+          return {
+            style: `color: ${attributes.textColor}`,
+          };
+        },
+      },
+    };
+  },
+}).configure({
+  multicolor: true,
+});

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

@@ -66,13 +66,31 @@ function clearImageResizeUIFromNodeDom(nodeDom: Node | null): void {
   }
 }
 
+export type ImageSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type UploadHandler = (file: File) => Promise<string>;
+type UploadHandlerGetter = () => UploadHandler | undefined;
+
+function resolveUploadHandler({
+  configuredHandler,
+  delegatedGetter,
+}: {
+  configuredHandler?: UploadHandler;
+  delegatedGetter?: UploadHandlerGetter;
+}): UploadHandler | undefined {
+  if (delegatedGetter) {
+    return delegatedGetter();
+  }
+
+  return configuredHandler;
+}
+
 export const __imageExtensionPrivate = {
   clearImageResizeUIFromNodeDom,
   getSelectedImagePos,
+  resolveUploadHandler,
 };
 
-export type ImageSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
 // Size presets in pixels (will be calculated based on editor width)
 const SIZE_PERCENTAGES: Record<ImageSize, number> = {
   xs: 25, // 25% of editor width
@@ -137,10 +155,10 @@ function calculatePresetWidth(
 }
 
 interface ImageOptions {
-  onImageUpload?: (file: File) => Promise<string>;
-  onVideoUpload?: (file: File) => Promise<string>;
-  getOnImageUpload?: () => ((file: File) => Promise<string>) | undefined;
-  getOnVideoUpload?: () => ((file: File) => Promise<string>) | undefined;
+  onImageUpload?: UploadHandler;
+  onVideoUpload?: UploadHandler;
+  getOnImageUpload?: UploadHandlerGetter;
+  getOnVideoUpload?: UploadHandlerGetter;
 }
 
 /**
@@ -166,10 +184,10 @@ interface ExtendedImageResizeOptions {
   HTMLAttributes: Record<string, any>;
   minWidth?: number;
   maxWidth?: number;
-  onImageUpload?: (file: File) => Promise<string>;
-  onVideoUpload?: (file: File) => Promise<string>;
-  getOnImageUpload?: () => ((file: File) => Promise<string>) | undefined;
-  getOnVideoUpload?: () => ((file: File) => Promise<string>) | undefined;
+  onImageUpload?: UploadHandler;
+  onVideoUpload?: UploadHandler;
+  getOnImageUpload?: UploadHandlerGetter;
+  getOnVideoUpload?: UploadHandlerGetter;
 }
 
 export const CustomImage = (options: ImageOptions = {}) => {
@@ -229,15 +247,19 @@ export const CustomImage = (options: ImageOptions = {}) => {
     addProseMirrorPlugins() {
       const parentPlugins = this.parent?.() || [];
       const getOnImageUpload = () =>
-        this?.options?.getOnImageUpload?.() ??
-        this?.options?.onImageUpload ??
-        options.getOnImageUpload?.() ??
-        options.onImageUpload;
+        resolveUploadHandler({
+          delegatedGetter:
+            this?.options?.getOnImageUpload ?? options.getOnImageUpload,
+          configuredHandler:
+            this?.options?.onImageUpload ?? options.onImageUpload,
+        });
       const getOnVideoUpload = () =>
-        this?.options?.getOnVideoUpload?.() ??
-        this?.options?.onVideoUpload ??
-        options.getOnVideoUpload?.() ??
-        options.onVideoUpload;
+        resolveUploadHandler({
+          delegatedGetter:
+            this?.options?.getOnVideoUpload ?? options.getOnVideoUpload,
+          configuredHandler:
+            this?.options?.onVideoUpload ?? options.onVideoUpload,
+        });
 
       return [
         ...parentPlugins,