@tuturuuu/ui 0.8.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/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,

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/tool-bar.tsx

@@ -13,7 +13,6 @@ import {
   Heading1,
   Heading2,
   Heading3,
-  Highlighter,
   ImageIcon,
   Italic,
   Link,
@@ -37,6 +36,7 @@ import { Toggle } from '@tuturuuu/ui/toggle';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { cn } from '@tuturuuu/utils/format';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { TextEditorColorControls } from './color-controls';
 import {
   MAX_IMAGE_SIZE,
   MAX_VIDEO_SIZE,
@@ -65,7 +65,6 @@ const HOTKEYS = {
   'ordered-list': 'Mod+Shift+7',
   'task-list': 'Mod+Shift+9',
   table: '',
-  highlight: 'Mod+Shift+H',
   link: 'Mod+K',
   image: '',
   video: '',
@@ -90,7 +89,6 @@ const LABELS: Record<string, string> = {
   'ordered-list': 'Ordered List',
   'task-list': 'Task List',
   table: 'Insert Table',
-  highlight: 'Highlight',
   link: 'Link',
   image: 'Upload Image',
   video: 'Upload Video',
@@ -104,7 +102,7 @@ const TOOLBAR_GROUPS = [
   ['bold', 'italic', 'strike', 'subscript', 'superscript'],
   ['align-left', 'align-center', 'align-right'],
   ['bullet-list', 'ordered-list', 'task-list'],
-  ['table', 'highlight', 'link'],
+  ['table', 'link'],
 ] as const;
 
 /** Format a hotkey combo string for display (platform-aware). */
@@ -371,12 +369,6 @@ export function ToolBar({
               .run(),
           pressed: editor?.isActive('table'),
         },
-        {
-          key: 'highlight',
-          icon: <Highlighter className="size-4" />,
-          onClick: () => editor?.chain().focus().toggleHighlight().run(),
-          pressed: editor?.isActive('highlight'),
-        },
       ] as const,
     [editor]
   );
@@ -601,6 +593,10 @@ export function ToolBar({
           />
         ))}
 
+        {/* Color controls */}
+        <ToolbarSeparator />
+        <TextEditorColorControls editor={editor} />
+
         {/* Link */}
         <ToolbarSeparator />
         <ToolbarButton
@@ -1098,12 +1094,6 @@ export function FixedToolbar({
             .run(),
         pressed: editor.isActive('table'),
       },
-      {
-        key: 'highlight',
-        icon: <Highlighter className="size-4" />,
-        onClick: () => editor.chain().focus().toggleHighlight().run(),
-        pressed: editor.isActive('highlight'),
-      },
       {
         key: 'link',
         icon: <Link className="size-4" />,
@@ -1244,6 +1234,9 @@ export function FixedToolbar({
         </div>
       ))}
 
+      <ToolbarSeparator />
+      <TextEditorColorControls editor={editor} />
+
       {/* Media group */}
       {workspaceId && onImageUpload && (
         <>

package/src/components/ui/toast.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as ToastPrimitives from '@radix-ui/react-toast';
-import { X } from '@tuturuuu/icons';
+import { X } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';