@semiont/react-ui 0.2.36 → 0.2.37

package/src/components/navigation/__tests__/SortableResourceTab.test.tsx

@@ -0,0 +1,371 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderWithProviders } from '../../../test-utils';
+import type { SortableResourceTabProps } from '../../../types/collapsible-navigation';
+
+// Mock @dnd-kit/sortable
+const mockSetNodeRef = vi.fn();
+const mockSortableReturn = {
+  attributes: { role: 'button', tabIndex: 0 },
+  listeners: {},
+  setNodeRef: mockSetNodeRef,
+  transform: null,
+  transition: null,
+  isDragging: false,
+};
+
+vi.mock('@dnd-kit/sortable', () => ({
+  useSortable: vi.fn(() => mockSortableReturn),
+}));
+
+vi.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Transform: {
+      toString: vi.fn((transform: any) => (transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined)),
+    },
+  },
+}));
+
+vi.mock('../../../lib/resource-utils', () => ({
+  getResourceIcon: vi.fn((mediaType: string | undefined) => {
+    if (!mediaType) return '\u{1F4C4}';
+    if (mediaType.startsWith('image/')) return '\u{1F5BC}\uFE0F';
+    if (mediaType === 'text/markdown') return '\u{1F4DD}';
+    return '\u{1F4C4}';
+  }),
+}));
+
+import { useSortable } from '@dnd-kit/sortable';
+import { SortableResourceTab } from '../SortableResourceTab';
+
+describe('SortableResourceTab', () => {
+  const MockLink = ({ href, children, ...props }: any) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  );
+
+  const defaultProps: SortableResourceTabProps = {
+    resource: {
+      id: 'resource-1',
+      name: 'Test Document',
+      openedAt: Date.now(),
+      mediaType: 'text/plain',
+    },
+    isCollapsed: false,
+    isActive: false,
+    href: '/resources/resource-1',
+    onClose: vi.fn(),
+    LinkComponent: MockLink,
+    translations: {},
+    index: 0,
+    totalCount: 3,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useSortable).mockReturnValue(mockSortableReturn as any);
+  });
+
+  describe('Rendering', () => {
+    it('should render the resource name', () => {
+      renderWithProviders(<SortableResourceTab {...defaultProps} />);
+
+      expect(screen.getByText('Test Document')).toBeInTheDocument();
+    });
+
+    it('should render the resource icon', () => {
+      renderWithProviders(<SortableResourceTab {...defaultProps} />);
+
+      const icon = screen.getByText('\u{1F4C4}');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('should render link with correct href', () => {
+      renderWithProviders(<SortableResourceTab {...defaultProps} />);
+
+      const link = screen.getByTitle('Test Document');
+      expect(link).toHaveAttribute('href', '/resources/resource-1');
+    });
+
+    it('should render close button when not collapsed', () => {
+      renderWithProviders(<SortableResourceTab {...defaultProps} />);
+
+      const closeButton = screen.getByLabelText('Close Test Document');
+      expect(closeButton).toBeInTheDocument();
+    });
+
+    it('should not render close button when collapsed', () => {
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} isCollapsed={true} />
+      );
+
+      expect(screen.queryByLabelText('Close Test Document')).not.toBeInTheDocument();
+    });
+
+    it('should not render resource name text when collapsed', () => {
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} isCollapsed={true} />
+      );
+
+      expect(screen.queryByText('Test Document')).not.toBeInTheDocument();
+    });
+
+    it('should render icon when collapsed', () => {
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} isCollapsed={true} />
+      );
+
+      expect(screen.getByText('\u{1F4C4}')).toBeInTheDocument();
+    });
+  });
+
+  describe('Active state', () => {
+    it('should have active class when isActive is true', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} isActive={true} />
+      );
+
+      const tab = container.querySelector('.semiont-resource-tab');
+      expect(tab).toHaveClass('semiont-resource-tab--active');
+    });
+
+    it('should not have active class when isActive is false', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} isActive={false} />
+      );
+
+      const tab = container.querySelector('.semiont-resource-tab');
+      expect(tab).not.toHaveClass('semiont-resource-tab--active');
+    });
+
+    it('should set aria-selected based on isActive', () => {
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} isActive={true} />
+      );
+
+      const tab = screen.getByRole('tab');
+      expect(tab).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+
+  describe('Dragging state', () => {
+    it('should have dragging class when isDragging prop is true', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} isDragging={true} />
+      );
+
+      const tab = container.querySelector('.semiont-resource-tab');
+      expect(tab).toHaveClass('semiont-resource-tab--dragging');
+    });
+
+    it('should have dragging class when useSortable reports dragging', () => {
+      vi.mocked(useSortable).mockReturnValue({
+        ...mockSortableReturn,
+        isDragging: true,
+      } as any);
+
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} />
+      );
+
+      const tab = container.querySelector('.semiont-resource-tab');
+      expect(tab).toHaveClass('semiont-resource-tab--dragging');
+    });
+
+    it('should not have dragging class when not dragging', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} isDragging={false} />
+      );
+
+      const tab = container.querySelector('.semiont-resource-tab');
+      expect(tab).not.toHaveClass('semiont-resource-tab--dragging');
+    });
+  });
+
+  describe('Close button', () => {
+    it('should call onClose with resource id and event when clicked', () => {
+      const onClose = vi.fn();
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} onClose={onClose} />
+      );
+
+      const closeButton = screen.getByLabelText('Close Test Document');
+      fireEvent.click(closeButton);
+
+      expect(onClose).toHaveBeenCalledOnce();
+      expect(onClose).toHaveBeenCalledWith('resource-1', expect.any(Object));
+    });
+
+    it('should use custom translation for close button title', () => {
+      renderWithProviders(
+        <SortableResourceTab
+          {...defaultProps}
+          translations={{ closeResource: 'Fermer la ressource' }}
+        />
+      );
+
+      const closeButton = screen.getByTitle('Fermer la ressource');
+      expect(closeButton).toBeInTheDocument();
+    });
+
+    it('should default to "Close resource" title', () => {
+      renderWithProviders(<SortableResourceTab {...defaultProps} />);
+
+      const closeButton = screen.getByTitle('Close resource');
+      expect(closeButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Keyboard reordering', () => {
+    it('should call onReorder with "up" on Alt+ArrowUp', () => {
+      const onReorder = vi.fn();
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} onReorder={onReorder} />
+      );
+
+      const tab = screen.getByRole('tab');
+      fireEvent.keyDown(tab, { key: 'ArrowUp', altKey: true });
+
+      expect(onReorder).toHaveBeenCalledWith('resource-1', 'up');
+    });
+
+    it('should call onReorder with "down" on Alt+ArrowDown', () => {
+      const onReorder = vi.fn();
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} onReorder={onReorder} />
+      );
+
+      const tab = screen.getByRole('tab');
+      fireEvent.keyDown(tab, { key: 'ArrowDown', altKey: true });
+
+      expect(onReorder).toHaveBeenCalledWith('resource-1', 'down');
+    });
+
+    it('should not call onReorder without Alt key', () => {
+      const onReorder = vi.fn();
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} onReorder={onReorder} />
+      );
+
+      const tab = screen.getByRole('tab');
+      fireEvent.keyDown(tab, { key: 'ArrowUp' });
+
+      expect(onReorder).not.toHaveBeenCalled();
+    });
+
+    it('should not call onReorder for non-arrow keys with Alt', () => {
+      const onReorder = vi.fn();
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} onReorder={onReorder} />
+      );
+
+      const tab = screen.getByRole('tab');
+      fireEvent.keyDown(tab, { key: 'Enter', altKey: true });
+
+      expect(onReorder).not.toHaveBeenCalled();
+    });
+
+    it('should not error when onReorder is not provided', () => {
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} onReorder={undefined} />
+      );
+
+      const tab = screen.getByRole('tab');
+      expect(() => {
+        fireEvent.keyDown(tab, { key: 'ArrowUp', altKey: true });
+      }).not.toThrow();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have tab role', () => {
+      renderWithProviders(<SortableResourceTab {...defaultProps} />);
+
+      expect(screen.getByRole('tab')).toBeInTheDocument();
+    });
+
+    it('should have aria-label with position info', () => {
+      renderWithProviders(
+        <SortableResourceTab {...defaultProps} index={1} totalCount={5} />
+      );
+
+      const tab = screen.getByRole('tab');
+      expect(tab).toHaveAttribute('aria-label', 'Test Document, position 2 of 5');
+    });
+
+    it('should have aria-hidden on icon', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} />
+      );
+
+      const icon = container.querySelector('.semiont-resource-tab__icon');
+      expect(icon).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('should have close button with aria-label', () => {
+      renderWithProviders(<SortableResourceTab {...defaultProps} />);
+
+      const closeButton = screen.getByLabelText('Close Test Document');
+      expect(closeButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should have base tab class', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} />
+      );
+
+      expect(container.querySelector('.semiont-resource-tab')).toBeInTheDocument();
+    });
+
+    it('should have proper link class', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} />
+      );
+
+      expect(container.querySelector('.semiont-resource-tab__link')).toBeInTheDocument();
+    });
+
+    it('should have proper icon class', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} />
+      );
+
+      expect(container.querySelector('.semiont-resource-tab__icon')).toBeInTheDocument();
+    });
+
+    it('should have proper text class', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} />
+      );
+
+      expect(container.querySelector('.semiont-resource-tab__text')).toBeInTheDocument();
+    });
+
+    it('should have proper close button class', () => {
+      const { container } = renderWithProviders(
+        <SortableResourceTab {...defaultProps} />
+      );
+
+      expect(container.querySelector('.semiont-resource-tab__close')).toBeInTheDocument();
+    });
+  });
+
+  describe('useSortable integration', () => {
+    it('should call useSortable with resource id', () => {
+      renderWithProviders(<SortableResourceTab {...defaultProps} />);
+
+      expect(useSortable).toHaveBeenCalledWith({ id: 'resource-1' });
+    });
+
+    it('should pass setNodeRef to container', () => {
+      renderWithProviders(<SortableResourceTab {...defaultProps} />);
+
+      expect(mockSetNodeRef).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/resource/AnnotateView.tsx

@@ -1,20 +1,19 @@
 'use client';
 
 import { useRef, useEffect, useCallback, lazy, Suspense } from 'react';
-import type { components } from '@semiont/core';
 import { resourceUri as toResourceUri } from '@semiont/core';
-import { getTextPositionSelector, getTextQuoteSelector, getTargetSelector, getMimeCategory, isPdfMimeType, extractContext, findTextWithContext, buildContentCache } from '@semiont/api-client';
+import { getMimeCategory, isPdfMimeType } from '@semiont/api-client';
 import { ANNOTATORS } from '../../lib/annotation-registry';
+import { segmentTextWithAnnotations } from '../../lib/text-segmentation';
+import { buildTextSelectors, fallbackTextPosition } from '../../lib/text-selection-handler';
 import { SvgDrawingCanvas } from '../image-annotation/SvgDrawingCanvas';
+
 import { useResourceAnnotations } from '../../contexts/ResourceAnnotationsContext';
 
 // Lazy load PDF component to avoid SSR issues with browser PDF.js loading
 const PdfAnnotationCanvas = lazy(() => import('../pdf-annotation/PdfAnnotationCanvas.client').then(mod => ({ default: mod.PdfAnnotationCanvas })));
 
-type Annotation = components['schemas']['Annotation'];
-
 import { CodeMirrorRenderer } from '../CodeMirrorRenderer';
-import type { TextSegment } from '../CodeMirrorRenderer';
 import type { EditorView } from '@codemirror/view';
 import { useEventBus } from '../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
@@ -45,90 +44,6 @@ interface Props {
   annotateMode: boolean;
 }
 
-// Segment text with annotations - uses fuzzy anchoring when available!
-function segmentTextWithAnnotations(content: string, annotations: Annotation[]): TextSegment[] {
-  if (!content) {
-    return [{ exact: '', start: 0, end: 0 }];
-  }
-
-  // Pre-compute normalized/lowered content once for all annotations
-  const cache = buildContentCache(content);
-
-  const normalizedAnnotations = annotations
-    .map(ann => {
-      const targetSelector = getTargetSelector(ann.target);
-      const posSelector = getTextPositionSelector(targetSelector);
-      const quoteSelector = targetSelector ? getTextQuoteSelector(targetSelector) : null;
-
-      // Try fuzzy anchoring if TextQuoteSelector is available
-      // Pass TextPositionSelector as position hint for better fuzzy search
-      let position;
-      if (quoteSelector) {
-        position = findTextWithContext(
-          content,
-          quoteSelector.exact,
-          quoteSelector.prefix,
-          quoteSelector.suffix,
-          posSelector?.start,
-          cache
-        );
-      }
-
-      // Fallback to TextPositionSelector or fuzzy position
-      const start = position?.start ?? posSelector?.start ?? 0;
-      const end = position?.end ?? posSelector?.end ?? 0;
-
-      return {
-        annotation: ann,
-        start,
-        end
-      };
-    })
-    .filter(a => a.start >= 0 && a.end <= content.length && a.start < a.end)
-    .sort((a, b) => a.start - b.start);
-
-  if (normalizedAnnotations.length === 0) {
-    return [{ exact: content, start: 0, end: content.length }];
-  }
-
-  const segments: TextSegment[] = [];
-  let position = 0;
-
-  for (const { annotation, start, end } of normalizedAnnotations) {
-    if (start < position) continue; // Skip overlapping annotations
-
-    // Add text before annotation
-    if (start > position) {
-      segments.push({
-        exact: content.slice(position, start),
-        start: position,
-        end: start
-      });
-    }
-
-    // Add annotated segment
-    segments.push({
-      exact: content.slice(start, end),
-      annotation,
-      start,
-      end
-    });
-
-    position = end;
-  }
-
-  // Add remaining text
-  if (position < content.length) {
-    segments.push({
-      exact: content.slice(position),
-      start: position,
-      end: content.length
-    });
-  }
-
-  return segments;
-}
-
 /**
  * View component for annotating resources with text selection and drawing
  *
@@ -241,74 +156,33 @@ export function AnnotateView({
       // Get the CodeMirror EditorView instance stored on the CodeMirror container
       const cmContainer = container.querySelector('.codemirror-renderer');
       const view = (cmContainer as EnrichedHTMLElement | null)?.__cmView;
+
+      let start: number;
+      let end: number;
+
       if (!view || !view.posAtDOM) {
         // Fallback: try to find text in source (won't work for duplicates)
-        const start = content.indexOf(text);
-        if (start === -1) {
-          return;
-        }
-        const end = start + text.length;
-
-        // Extract context for TextQuoteSelector
-        const context = extractContext(content, start, end);
-
-        // Unified flow: all text annotations use BOTH TextPositionSelector and TextQuoteSelector
-        if (selectedMotivation) {
-          eventBus.get('mark:requested').next({
-            selector: [
-              {
-                type: 'TextPositionSelector',
-                start,
-                end
-              },
-              {
-                type: 'TextQuoteSelector',
-                exact: text,
-                ...(context.prefix && { prefix: context.prefix }),
-                ...(context.suffix && { suffix: context.suffix })
-              }
-            ],
-            motivation: selectedMotivation
-          });
-
-          // Clear selection after creating annotation
-          selection.removeAllRanges();
-          return;
-        }
-        return;
+        const pos = fallbackTextPosition(content, text);
+        if (!pos) return;
+        start = pos.start;
+        end = pos.end;
+      } else {
+        // CodeMirror's posAtDOM gives us the position in the document from a DOM node/offset
+        start = view.posAtDOM(range.startContainer, range.startOffset);
+        end = start + text.length;
       }
 
-      // CodeMirror's posAtDOM gives us the position in the document from a DOM node/offset
-      const start = view.posAtDOM(range.startContainer, range.startOffset);
-      const end = start + text.length;
-
-      if (start >= 0) {
-        // Extract context for TextQuoteSelector
-        const context = extractContext(content, start, end);
-
-        // Unified flow: all text annotations use BOTH TextPositionSelector and TextQuoteSelector
-        if (selectedMotivation) {
-          eventBus.get('mark:requested').next({
-            selector: [
-              {
-                type: 'TextPositionSelector',
-                start,
-                end
-              },
-              {
-                type: 'TextQuoteSelector',
-                exact: text,
-                ...(context.prefix && { prefix: context.prefix }),
-                ...(context.suffix && { suffix: context.suffix })
-              }
-            ],
-            motivation: selectedMotivation
-          });
-
-          // Clear selection after creating annotation
-          selection.removeAllRanges();
-          return;
-        }
+      if (start >= 0 && selectedMotivation) {
+        const selectors = buildTextSelectors(content, text, start, end);
+        if (!selectors) return;
+
+        eventBus.get('mark:requested').next({
+          selector: selectors,
+          motivation: selectedMotivation
+        });
+
+        // Clear selection after creating annotation
+        selection.removeAllRanges();
       }
     };