@tuturuuu/ui 0.27.0 → 0.28.1

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

@@ -85,9 +85,18 @@ function resolveUploadHandler({
   return configuredHandler;
 }
 
+function getClipboardImageFiles(
+  items: DataTransferItemList | DataTransferItem[]
+) {
+  return Array.from(items)
+    .map((item) => (item.type.startsWith('image/') ? item.getAsFile() : null))
+    .filter((file): file is File => file !== null);
+}
+
 export const __imageExtensionPrivate = {
   clearImageResizeUIFromNodeDom,
   getSelectedImagePos,
+  getClipboardImageFiles,
   resolveUploadHandler,
 };
 
@@ -437,23 +446,10 @@ export const CustomImage = (options: ImageOptions = {}) => {
                 if (!items) return false;
 
                 // Filter and collect image files
-                const images = Array.from(items)
-                  .map((item) =>
-                    item.type.startsWith('image/') ? item.getAsFile() : null
-                  )
-                  .filter((file): file is File => file !== null);
+                const images = getClipboardImageFiles(items);
 
                 if (images.length === 0) return false;
 
-                const hasTextOrHtml = Array.from(items).some(
-                  (item) =>
-                    item.type === 'text/plain' || item.type === 'text/html'
-                );
-
-                if (hasTextOrHtml) {
-                  return false;
-                }
-
                 const onImageUpload = getOnImageUpload();
                 if (!onImageUpload) {
                   event.preventDefault();

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

@@ -1,9 +1,25 @@
 import { splitBlock } from '@tiptap/pm/commands';
+import { liftListItem, sinkListItem } from '@tiptap/pm/schema-list';
 import type { EditorState } from '@tiptap/pm/state';
 import type { EditorView } from '@tiptap/pm/view';
 
 const EXTENSION_OWNED_ENTER_NODE_NAMES = new Set(['listItem', 'taskItem']);
 const PLAIN_ENTER_FALLBACK_TEXTBLOCK_NAMES = new Set(['paragraph', 'heading']);
+const INDENTABLE_LIST_ITEM_NAMES = new Set(['listItem', 'taskItem']);
+
+function findAncestorNodeName(
+  state: EditorState,
+  nodeNames: ReadonlySet<string>
+): string | null {
+  const { $from } = state.selection;
+
+  for (let depth = $from.depth; depth > 0; depth -= 1) {
+    const name = $from.node(depth).type.name;
+    if (nodeNames.has(name)) return name;
+  }
+
+  return null;
+}
 
 export function isSelectionInsideNode(
   state: EditorState,
@@ -56,3 +72,34 @@ export function handlePlainEnterFallback(
 
   return didSplit;
 }
+
+/**
+ * Indent list items without reaching through a React closure for the editor.
+ * The DOM view is the source of truth at keydown time, including for editors
+ * that were just mounted or rebound to a collaboration document.
+ */
+export function handleListIndentation(
+  view: EditorView,
+  event: KeyboardEvent
+): boolean {
+  if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey) {
+    return false;
+  }
+
+  const itemName = findAncestorNodeName(view.state, INDENTABLE_LIST_ITEM_NAMES);
+  if (!itemName) return false;
+
+  const itemType = view.state.schema.nodes[itemName];
+  if (!itemType) return false;
+
+  const command = event.shiftKey
+    ? liftListItem(itemType)
+    : sinkListItem(itemType);
+  const handled = command(view.state, view.dispatch.bind(view), view);
+
+  if (!handled) return false;
+
+  event.preventDefault();
+  event.stopPropagation();
+  return true;
+}

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

@@ -27,6 +27,26 @@ const BLOCK_START_PATTERNS = [
   /^\s*\|/,
 ];
 
+const VISUAL_BULLET_PATTERN = /^(\s*)[•◦▪‣●]\s+/u;
+const VISUAL_CHECKBOX_PATTERN = /^(\s*)[☐☑☒]\s+/u;
+
+function normalizePastedPlainText(text: string): string {
+  return text
+    .replace(/\r\n?/g, '\n')
+    .split('\n')
+    .map((line) => {
+      const checkboxMatch = line.match(VISUAL_CHECKBOX_PATTERN);
+      if (checkboxMatch) {
+        const marker = line.trimStart().charAt(0);
+        const content = line.replace(VISUAL_CHECKBOX_PATTERN, '');
+        return `${checkboxMatch[1] ?? ''}- [${marker === '☐' ? ' ' : 'x'}] ${content}`;
+      }
+
+      return line.replace(VISUAL_BULLET_PATTERN, '$1- ');
+    })
+    .join('\n');
+}
+
 function isBlockStart(line: string): boolean {
   return BLOCK_START_PATTERNS.some((p) => p.test(line));
 }
@@ -496,7 +516,7 @@ function markdownToHtml(markdown: string): string {
       paraLines.push(lines[i]!);
       i++;
     }
-    result.push(`<p>${parseInline(paraLines.join(' '))}</p>`);
+    result.push(`<p>${paraLines.map(parseInline).join('<br>')}</p>`);
   }
 
   return result.join('\n');
@@ -539,6 +559,7 @@ function looksLikeMarkdown(text: string): boolean {
 export const __markdownPastePrivate = {
   markdownToHtml,
   looksLikeMarkdown,
+  normalizePastedPlainText,
 };
 
 const markdownPastePluginKey = new PluginKey('markdownPastePlugin');
@@ -569,7 +590,9 @@ export const MarkdownPaste = Extension.create({
                 return false;
               }
 
-              const text = clipboardData.getData('text/plain');
+              const text = normalizePastedPlainText(
+                clipboardData.getData('text/plain')
+              );
               if (!text || !looksLikeMarkdown(text)) {
                 return false;
               }

package/src/components/ui/text-editor/toggle-block-extension.ts

@@ -0,0 +1,153 @@
+import {
+  Extension,
+  findParentNode,
+  type JSONContent,
+  mergeAttributes,
+} from '@tiptap/core';
+import {
+  DetailsSummary,
+  type DetailsSummaryOptions,
+} from '@tiptap/extension-details';
+import { Fragment } from '@tiptap/pm/model';
+import { TextSelection } from '@tiptap/pm/state';
+
+export type ToggleHeadingLevel = 1 | 2 | 3 | null;
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    toggleBlock: {
+      /** Convert the selected blocks to a Notion-style toggle, or unwrap it. */
+      toggleDetailsBlock: () => ReturnType;
+    };
+  }
+}
+
+function parseHeadingLevel(element: HTMLElement): ToggleHeadingLevel {
+  const level = Number(element.dataset.headingLevel);
+  return level === 1 || level === 2 || level === 3 ? level : null;
+}
+
+export const ToggleSummary = DetailsSummary.extend<DetailsSummaryOptions>({
+  addAttributes() {
+    return {
+      level: {
+        default: null,
+        parseHTML: parseHeadingLevel,
+        renderHTML: ({ level }: { level: ToggleHeadingLevel }) =>
+          level ? { 'data-heading-level': String(level) } : {},
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'summary',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+});
+
+function summaryFromBlock(block: JSONContent | undefined) {
+  const isTextBlock = block?.type === 'paragraph' || block?.type === 'heading';
+  const level =
+    block?.type === 'heading' && [1, 2, 3].includes(block.attrs?.level)
+      ? (block.attrs?.level as 1 | 2 | 3)
+      : null;
+
+  return {
+    summary: {
+      type: 'detailsSummary',
+      attrs: { level },
+      content: isTextBlock ? block.content : undefined,
+    } satisfies JSONContent,
+    consumedFirstBlock: isTextBlock,
+  };
+}
+
+export const ToggleBlock = Extension.create({
+  name: 'toggleBlock',
+
+  addCommands() {
+    return {
+      toggleDetailsBlock:
+        () =>
+        ({ state, dispatch }) => {
+          const detailsType = state.schema.nodes.details;
+          if (!detailsType) return false;
+
+          const existing = findParentNode((node) => node.type === detailsType)(
+            state.selection
+          );
+
+          if (existing) {
+            const summary = existing.node.child(0);
+            const detailsContent = existing.node.child(1);
+            const level = summary.attrs.level as ToggleHeadingLevel;
+            const summaryType = level
+              ? state.schema.nodes.heading
+              : state.schema.nodes.paragraph;
+            if (!summaryType) return false;
+
+            if (dispatch) {
+              const restoredSummary = summaryType.create(
+                level ? { level } : undefined,
+                summary.content
+              );
+              const restoredNodes = [
+                restoredSummary,
+                ...detailsContent.content.content,
+              ];
+              const transaction = state.tr.replaceWith(
+                existing.pos,
+                existing.pos + existing.node.nodeSize,
+                Fragment.fromArray(restoredNodes)
+              );
+              transaction.setSelection(
+                TextSelection.create(transaction.doc, existing.pos + 1)
+              );
+              dispatch(transaction.scrollIntoView());
+            }
+
+            return true;
+          }
+
+          const { $from, $to } = state.selection;
+          const range = $from.blockRange($to);
+          if (!range) return false;
+
+          const selected = state.doc.slice(range.start, range.end).toJSON()
+            .content as JSONContent[] | undefined;
+          if (!selected?.length) return false;
+
+          const { summary, consumedFirstBlock } = summaryFromBlock(selected[0]);
+          const body = consumedFirstBlock ? selected.slice(1) : selected;
+
+          if (dispatch) {
+            const details = state.schema.nodeFromJSON({
+              type: 'details',
+              attrs: { open: true },
+              content: [
+                summary,
+                {
+                  type: 'detailsContent',
+                  content: body.length ? body : [{ type: 'paragraph' }],
+                },
+              ],
+            });
+            const transaction = state.tr.replaceWith(
+              range.start,
+              range.end,
+              details
+            );
+            transaction.setSelection(
+              TextSelection.create(transaction.doc, range.start + 2)
+            );
+            dispatch(transaction.scrollIntoView());
+          }
+
+          return true;
+        },
+    };
+  },
+});

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

@@ -1,4 +1,3 @@
-import { formatForDisplay } from '@tanstack/react-hotkeys';
 import type { Editor } from '@tiptap/react';
 import { BubbleMenu } from '@tiptap/react/menus';
 import {
@@ -17,6 +16,7 @@ import {
   Italic,
   Link,
   List,
+  ListCollapse,
   ListOrdered,
   ListTodo,
   Loader2,
@@ -42,86 +42,17 @@ import {
   MAX_VIDEO_SIZE,
   StorageQuotaError,
 } from './media-utils';
+import { hotkeyLabel, TOOLBAR_GROUPS, TOOLBAR_LABELS } from './toolbar-config';
 
 type LinkEditorContext = 'bubble' | 'popover' | null;
 
-// ---------------------------------------------------------------------------
-// Hotkey definitions – use 'Mod' for cross-platform (⌘ on Mac, Ctrl on Win)
-// These match Tiptap's built-in shortcuts where applicable.
-// ---------------------------------------------------------------------------
-const HOTKEYS = {
-  'heading-1': 'Mod+Alt+1',
-  'heading-2': 'Mod+Alt+2',
-  'heading-3': 'Mod+Alt+3',
-  bold: 'Mod+B',
-  italic: 'Mod+I',
-  strike: 'Mod+Shift+S',
-  subscript: 'Mod+,',
-  superscript: 'Mod+.',
-  'align-left': 'Mod+Shift+L',
-  'align-center': 'Mod+Shift+E',
-  'align-right': 'Mod+Shift+R',
-  'bullet-list': 'Mod+Shift+8',
-  'ordered-list': 'Mod+Shift+7',
-  'task-list': 'Mod+Shift+9',
-  table: '',
-  link: 'Mod+K',
-  image: '',
-  video: '',
-  youtube: '',
-  'convert-to-task': '',
-} as const;
-
-// Labels for each formatting option
-const LABELS: Record<string, string> = {
-  'heading-1': 'Heading 1',
-  'heading-2': 'Heading 2',
-  'heading-3': 'Heading 3',
-  bold: 'Bold',
-  italic: 'Italic',
-  strike: 'Strikethrough',
-  subscript: 'Subscript',
-  superscript: 'Superscript',
-  'align-left': 'Align Left',
-  'align-center': 'Align Center',
-  'align-right': 'Align Right',
-  'bullet-list': 'Bullet List',
-  'ordered-list': 'Ordered List',
-  'task-list': 'Task List',
-  table: 'Insert Table',
-  link: 'Link',
-  image: 'Upload Image',
-  video: 'Upload Video',
-  youtube: 'YouTube Video',
-  'convert-to-task': 'Convert to Task',
-};
-
-// Semantic groups for the fixed toolbar
-const TOOLBAR_GROUPS = [
-  ['heading-1', 'heading-2', 'heading-3'],
-  ['bold', 'italic', 'strike', 'subscript', 'superscript'],
-  ['align-left', 'align-center', 'align-right'],
-  ['bullet-list', 'ordered-list', 'task-list'],
-  ['table', 'link'],
-] as const;
-
-/** Format a hotkey combo string for display (platform-aware). */
-function hotkeyLabel(key: string): string {
-  const combo = HOTKEYS[key as keyof typeof HOTKEYS];
-  if (!combo) return '';
-  try {
-    return formatForDisplay(combo);
-  } catch {
-    return combo;
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Shared sub-components
 // ---------------------------------------------------------------------------
 
 interface ToolbarButtonProps {
   id: string;
+  label?: string;
   icon: React.ReactNode;
   pressed: boolean;
   onClick: () => void;
@@ -131,12 +62,13 @@ interface ToolbarButtonProps {
 /** A single toolbar toggle button wrapped with a tooltip showing name + hotkey. */
 function ToolbarButton({
   id,
+  label: labelOverride,
   icon,
   pressed,
   onClick,
   disabled,
 }: ToolbarButtonProps) {
-  const label = LABELS[id] ?? id;
+  const label = labelOverride ?? TOOLBAR_LABELS[id] ?? id;
   const shortcut = hotkeyLabel(id);
 
   return (
@@ -183,6 +115,7 @@ interface ToolBarProps {
   onConvertToTask?: () => void | Promise<void>;
   /** When true, the BubbleMenu is hidden because the fixed toolbar is visible */
   fixedToolbarVisible?: boolean;
+  toggleBlockLabel?: string;
 }
 
 export function ToolBar({
@@ -191,6 +124,7 @@ export function ToolBar({
   workspaceId,
   onImageUpload,
   onConvertToTask,
+  toggleBlockLabel,
 }: ToolBarProps) {
   const [linkEditorContext, setLinkEditorContext] =
     useState<LinkEditorContext>(null);
@@ -358,6 +292,12 @@ export function ToolBar({
           onClick: () => editor?.chain().focus().toggleTaskListSmart().run(),
           pressed: editor?.isActive('taskList'),
         },
+        {
+          key: 'toggle-block',
+          icon: <ListCollapse className="size-4" />,
+          onClick: () => editor?.chain().focus().toggleDetailsBlock().run(),
+          pressed: editor?.isActive('details'),
+        },
         {
           key: 'table',
           icon: <Table className="size-4" />,
@@ -587,6 +527,7 @@ export function ToolBar({
           <ToolbarButton
             key={`${option.key}-${source}`}
             id={option.key}
+            label={option.key === 'toggle-block' ? toggleBlockLabel : undefined}
             icon={option.icon}
             pressed={option.pressed as boolean}
             onClick={option.onClick}
@@ -673,6 +614,7 @@ export function ToolBar({
       isUploadingVideo,
       showYoutubeInput,
       onConvertToTask,
+      toggleBlockLabel,
     ]
   );
 
@@ -967,6 +909,7 @@ interface FixedToolbarProps {
   onConvertToTask?: () => void | Promise<void>;
   className?: string;
   ref?: React.Ref<HTMLDivElement>;
+  toggleBlockLabel?: string;
 }
 
 export function FixedToolbar({
@@ -976,6 +919,7 @@ export function FixedToolbar({
   onConvertToTask,
   className,
   ref,
+  toggleBlockLabel,
 }: FixedToolbarProps) {
   const [isUploadingImage, setIsUploadingImage] = useState(false);
   const [isUploadingVideo, setIsUploadingVideo] = useState(false);
@@ -1083,6 +1027,12 @@ export function FixedToolbar({
         onClick: () => editor.chain().focus().toggleTaskListSmart().run(),
         pressed: editor.isActive('taskList'),
       },
+      {
+        key: 'toggle-block',
+        icon: <ListCollapse className="size-4" />,
+        onClick: () => editor.chain().focus().toggleDetailsBlock().run(),
+        pressed: editor.isActive('details'),
+      },
       {
         key: 'table',
         icon: <Table className="size-4" />,
@@ -1225,6 +1175,7 @@ export function FixedToolbar({
               <ToolbarButton
                 key={key}
                 id={key}
+                label={key === 'toggle-block' ? toggleBlockLabel : undefined}
                 icon={opt.icon}
                 pressed={opt.pressed}
                 onClick={opt.onClick}

package/src/components/ui/text-editor/toolbar-config.ts

@@ -0,0 +1,67 @@
+import { formatForDisplay } from '@tanstack/react-hotkeys';
+
+const HOTKEYS = {
+  'heading-1': 'Mod+Alt+1',
+  'heading-2': 'Mod+Alt+2',
+  'heading-3': 'Mod+Alt+3',
+  bold: 'Mod+B',
+  italic: 'Mod+I',
+  strike: 'Mod+Shift+S',
+  subscript: 'Mod+,',
+  superscript: 'Mod+.',
+  'align-left': 'Mod+Shift+L',
+  'align-center': 'Mod+Shift+E',
+  'align-right': 'Mod+Shift+R',
+  'bullet-list': 'Mod+Shift+8',
+  'ordered-list': 'Mod+Shift+7',
+  'task-list': 'Mod+Shift+9',
+  'toggle-block': '',
+  table: '',
+  link: 'Mod+K',
+  image: '',
+  video: '',
+  youtube: '',
+  'convert-to-task': '',
+} as const;
+
+export const TOOLBAR_LABELS: Record<string, string> = {
+  'heading-1': 'Heading 1',
+  'heading-2': 'Heading 2',
+  'heading-3': 'Heading 3',
+  bold: 'Bold',
+  italic: 'Italic',
+  strike: 'Strikethrough',
+  subscript: 'Subscript',
+  superscript: 'Superscript',
+  'align-left': 'Align Left',
+  'align-center': 'Align Center',
+  'align-right': 'Align Right',
+  'bullet-list': 'Bullet List',
+  'ordered-list': 'Ordered List',
+  'task-list': 'Task List',
+  'toggle-block': 'Toggle List or Heading',
+  table: 'Insert Table',
+  link: 'Link',
+  image: 'Upload Image',
+  video: 'Upload Video',
+  youtube: 'YouTube Video',
+  'convert-to-task': 'Convert to Task',
+};
+
+export const TOOLBAR_GROUPS = [
+  ['heading-1', 'heading-2', 'heading-3'],
+  ['bold', 'italic', 'strike', 'subscript', 'superscript'],
+  ['align-left', 'align-center', 'align-right'],
+  ['bullet-list', 'ordered-list', 'task-list', 'toggle-block'],
+  ['table', 'link'],
+] as const;
+
+export function hotkeyLabel(key: string): string {
+  const combo = HOTKEYS[key as keyof typeof HOTKEYS];
+  if (!combo) return '';
+  try {
+    return formatForDisplay(combo);
+  } catch {
+    return combo;
+  }
+}