xertica-ui 2.1.2 → 2.1.4

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

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React from 'react';
+import { useRichTextEditor } from './use-rich-text-editor';
 import { cn } from '../../shared/utils';
 import { Button } from '../button';
 import {
@@ -46,6 +47,9 @@ export interface RichTextEditorProps {
   maxHeight?: string;
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
 export function RichTextEditor({
   value,
   onChange,
@@ -70,51 +74,30 @@ export function RichTextEditor({
 }: RichTextEditorProps) {
   const isEditable = !disabled && !readOnly;
   const showToolbar = isEditable;
-  const editorRef = useRef<HTMLDivElement>(null);
-  const [activeFormats, setActiveFormats] = useState<Record<string, boolean>>({});
-  const [isSearchOpen, setIsSearchOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [linkUrl, setLinkUrl] = useState('https://');
-  const [isLinkOpen, setIsLinkOpen] = useState(false);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const linkInputRef = useRef<HTMLInputElement>(null);
-  const savedSelection = useRef<Range | null>(null);
 
-  const findParentTag = (node: Node | null, tagName: string): HTMLElement | null => {
-    let current = node;
-    while (current && current !== editorRef.current) {
-      if (current.nodeName === tagName) return current as HTMLElement;
-      current = current.parentNode;
-    }
-    return null;
-  };
-
-  const updateActiveFormats = () => {
-    let formatBlock = '';
-    try {
-      formatBlock = document.queryCommandValue('formatBlock');
-    } catch (e) {}
-
-    const selection = window.getSelection();
-    const anchorNode = selection?.anchorNode;
-    const focusNode = selection?.focusNode;
-
-    setActiveFormats({
-      bold: document.queryCommandState('bold'),
-      italic: document.queryCommandState('italic'),
-      underline: document.queryCommandState('underline'),
-      justifyLeft: document.queryCommandState('justifyLeft'),
-      justifyCenter: document.queryCommandState('justifyCenter'),
-      justifyRight: document.queryCommandState('justifyRight'),
-      insertUnorderedList: document.queryCommandState('insertUnorderedList'),
-      insertOrderedList: document.queryCommandState('insertOrderedList'),
-      link: !!(findParentTag(anchorNode || null, 'A') || findParentTag(focusNode || null, 'A')),
-      h1: formatBlock === 'h1' || formatBlock === 'H1',
-      h2: formatBlock === 'h2' || formatBlock === 'H2',
-      h3: formatBlock === 'h3' || formatBlock === 'H3',
-      p: formatBlock === 'p' || formatBlock === 'P' || formatBlock === 'div' || formatBlock === 'DIV' || formatBlock === '',
-    });
-  };
+  const {
+    editorRef,
+    searchInputRef,
+    linkInputRef,
+    activeFormats,
+    isSearchOpen,
+    setIsSearchOpen,
+    searchQuery,
+    setSearchQuery,
+    linkUrl,
+    setLinkUrl,
+    isLinkOpen,
+    hasSavedSelection,
+    wordCount,
+    characterCount,
+    updateActiveFormats,
+    execCommand,
+    handleInput,
+    performSearch,
+    handleCreateLink,
+    handleUnlink,
+    onLinkPopoverOpenChange,
+  } = useRichTextEditor({ value, onChange });
 
   const getCurrentBlockLabel = () => {
     if (activeFormats.h1) return <><Heading1 className="w-4 h-4 mr-1 shrink-0" /><span className="truncate">Título 1</span></>;
@@ -123,214 +106,6 @@ export function RichTextEditor({
     return <><Type className="w-4 h-4 mr-1 shrink-0" /><span className="truncate">Parágrafo</span></>;
   };
 
-  // Only initialize value once unless externally forced to completely rewrite.
-  // Using simple innerHTML is sufficient for a lightweight editor.
-  useEffect(() => {
-    if (editorRef.current && editorRef.current.innerHTML !== value) {
-      editorRef.current.innerHTML = value;
-    }
-
-    const handleSelectionChange = () => {
-      if (document.activeElement === editorRef.current) {
-        updateActiveFormats();
-      }
-    };
-
-    document.addEventListener('selectionchange', handleSelectionChange);
-    return () => document.removeEventListener('selectionchange', handleSelectionChange);
-  }, []);
-
-  const execCommand = (command: string, value: string = '') => {
-    document.execCommand(command, false, value);
-    updateActiveFormats();
-    editorRef.current?.focus();
-    handleInput();
-  };
-
-  const handleInput = () => {
-    if (editorRef.current) {
-      onChange?.(editorRef.current.innerHTML);
-      updateActiveFormats();
-    }
-  };
-
-  const getWordCount = () => {
-    const text = editorRef.current?.innerText || '';
-    return text.trim() ? text.trim().split(/\s+/).length : 0;
-  };
-
-  const getCharacterCount = () => {
-    const text = editorRef.current?.innerText || '';
-    return text.trim() ? text.length : 0;
-  };
-
-  const performSearch = (text: string, backward = false) => {
-    if (!text || !editorRef.current) return;
-
-    const editor = editorRef.current;
-    const selection = window.getSelection();
-    if (!selection) return;
-
-    // Collect all text nodes inside the editor using TreeWalker
-    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
-    const segments: Array<{ node: Text; start: number }> = [];
-    let offset = 0;
-    let node: Node | null;
-    while ((node = walker.nextNode())) {
-      segments.push({ node: node as Text, start: offset });
-      offset += (node as Text).length;
-    }
-    const fullText = segments.reduce((acc, s) => acc + (s.node.textContent ?? ''), '');
-
-    // Find current cursor/selection position in the concatenated text
-    let searchFrom = 0;
-    if (selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0);
-      if (editor.contains(range.startContainer)) {
-        const seg = segments.find(s => s.node === range.startContainer);
-        if (seg) {
-          searchFrom = backward
-            ? seg.start + range.startOffset - 1
-            : seg.start + range.endOffset;
-        }
-      }
-    }
-
-    const lowerFull = fullText.toLowerCase();
-    const lowerQuery = text.toLowerCase();
-    let matchStart = -1;
-
-    if (backward) {
-      matchStart = lowerFull.lastIndexOf(lowerQuery, Math.max(0, searchFrom));
-      if (matchStart === -1) matchStart = lowerFull.lastIndexOf(lowerQuery);
-    } else {
-      matchStart = lowerFull.indexOf(lowerQuery, searchFrom);
-      if (matchStart === -1) matchStart = lowerFull.indexOf(lowerQuery);
-    }
-
-    if (matchStart === -1) return;
-
-    const matchEnd = matchStart + text.length;
-
-    // Build a DOM Range spanning the match across text nodes
-    const range = document.createRange();
-    let startSet = false;
-    let endSet = false;
-
-    for (let i = 0; i < segments.length && !endSet; i++) {
-      const seg = segments[i];
-      const segEnd = seg.start + seg.node.length;
-
-      if (!startSet && matchStart < segEnd && matchStart >= seg.start) {
-        range.setStart(seg.node, matchStart - seg.start);
-        startSet = true;
-      }
-      if (startSet && matchEnd <= segEnd) {
-        range.setEnd(seg.node, matchEnd - seg.start);
-        endSet = true;
-      }
-    }
-
-    if (startSet && endSet) {
-      selection.removeAllRanges();
-      selection.addRange(range);
-      (range.startContainer as Element).parentElement?.scrollIntoView?.({ block: 'nearest' });
-    }
-  };
-
-
-  const handleCreateLink = () => {
-    if (savedSelection.current) {
-      const selection = window.getSelection();
-      selection?.removeAllRanges();
-      selection?.addRange(savedSelection.current);
-    }
-
-    const selection = window.getSelection();
-    const anchorNode = selection?.anchorNode;
-    const existingLink = findParentTag(anchorNode || null, 'A');
-
-    if (existingLink) {
-      if (linkUrl) {
-        existingLink.setAttribute('href', linkUrl);
-        existingLink.setAttribute('target', '_blank');
-        existingLink.setAttribute('rel', 'noopener noreferrer');
-        existingLink.style.color = 'hsl(var(--primary))';
-        existingLink.style.textDecoration = 'underline';
-        existingLink.style.cursor = 'pointer';
-      }
-      handleInput(); // Trigger onChange
-      setIsLinkOpen(false);
-      savedSelection.current = null;
-      return;
-    }
-
-    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
-      return;
-    }
-
-    if (linkUrl) {
-      execCommand('createLink', linkUrl);
-      
-      // The execCommand might have finished, let's find the newly created anchor
-      // We wait a bit for the DOM to update if needed, but usually it's immediate
-      setTimeout(() => {
-        const anchor = findParentTag(window.getSelection()?.anchorNode || null, 'A');
-        if (anchor) {
-          anchor.setAttribute('target', '_blank');
-          anchor.setAttribute('rel', 'noopener noreferrer');
-          anchor.style.color = 'hsl(var(--primary))';
-          anchor.style.textDecoration = 'underline';
-          anchor.style.cursor = 'pointer';
-        }
-        handleInput(); // Trigger onChange
-      }, 10);
-      
-      setIsLinkOpen(false);
-      savedSelection.current = null;
-    }
-  };
-
-  const handleUnlink = () => {
-    const selection = window.getSelection();
-    const anchorNode = selection?.anchorNode;
-    const existingLink = findParentTag(anchorNode || null, 'A');
-
-    if (existingLink) {
-      const parent = existingLink.parentNode;
-      while (existingLink.firstChild) {
-        parent?.insertBefore(existingLink.firstChild, existingLink);
-      }
-      parent?.removeChild(existingLink);
-      handleInput();
-    } else {
-      execCommand('unlink');
-    }
-  };
-
-  const onLinkPopoverOpenChange = (open: boolean) => {
-    if (open) {
-      const selection = window.getSelection();
-      const anchorNode = selection?.anchorNode;
-      const focusNode = selection?.focusNode;
-      const existingLink = findParentTag(anchorNode || null, 'A') || findParentTag(focusNode || null, 'A');
-      
-      if (existingLink) {
-        setLinkUrl(existingLink.getAttribute('href') || 'https://');
-      } else {
-        setLinkUrl('https://');
-      }
-
-      if (selection && selection.rangeCount > 0 && (!selection.isCollapsed || existingLink)) {
-        savedSelection.current = selection.getRangeAt(0).cloneRange();
-      } else {
-        savedSelection.current = null;
-      }
-      setTimeout(() => linkInputRef.current?.focus(), 100);
-    }
-    setIsLinkOpen(open);
-  };
-
   return (
     <div className={cn("flex flex-col h-full w-full bg-background sm:border border-border sm:shadow-sm sm:rounded-lg overflow-hidden", disabled && "opacity-50 pointer-events-none", className)}>
       <style>{`
@@ -399,25 +174,25 @@ export function RichTextEditor({
           outline: none !important;
         }
       `}</style>
-      
+
       {/* Toolbar — hidden in disabled/readOnly mode */}
       {showToolbar && <div className="px-3 py-2 border-b border-border bg-muted/30 flex items-center gap-1 flex-wrap shrink-0">
         {allowUndoRedo && (
           <>
-            <Button 
-              variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground" 
+            <Button
+              variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground"
               onClick={() => execCommand('undo')} title="Desfazer" aria-label="Desfazer">
               <Undo className="w-4 h-4" />
             </Button>
-            <Button 
-              variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground" 
+            <Button
+              variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground"
               onClick={() => execCommand('redo')} title="Refazer" aria-label="Refazer">
               <Redo className="w-4 h-4" />
             </Button>
             <div className="w-px h-6 bg-border mx-1 hidden sm:block"></div>
           </>
         )}
-        
+
         {allowHeadings && (
           <>
             <DropdownMenu modal={false}>
@@ -445,88 +220,94 @@ export function RichTextEditor({
             <div className="w-px h-6 bg-border mx-1 hidden sm:block"></div>
           </>
         )}
-        
+
         {allowFormatting && (
           <>
-            <Button 
-              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.bold && "bg-muted text-foreground")} 
+            <Button
+              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.bold && "bg-muted text-foreground")}
               onClick={() => execCommand('bold')} title="Negrito" aria-label="Negrito">
               <Bold className="w-4 h-4" />
             </Button>
-            <Button 
-              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.italic && "bg-muted text-foreground")} 
+            <Button
+              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.italic && "bg-muted text-foreground")}
               onClick={() => execCommand('italic')} title="Itálico" aria-label="Itálico">
               <Italic className="w-4 h-4" />
             </Button>
-            <Button 
-              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.underline && "bg-muted text-foreground")} 
+            <Button
+              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.underline && "bg-muted text-foreground")}
               onClick={() => execCommand('underline')} title="Sublinhado" aria-label="Sublinhado">
               <Underline className="w-4 h-4" />
             </Button>
             <div className="w-px h-6 bg-border mx-1 hidden sm:block"></div>
           </>
         )}
-        
+
         {allowAlignment && (
           <>
-            <Button 
-              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.justifyLeft && "bg-muted text-foreground")} 
+            <Button
+              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.justifyLeft && "bg-muted text-foreground")}
               onClick={() => execCommand('justifyLeft')} title="Alinhar à esquerda" aria-label="Alinhar à esquerda">
               <AlignLeft className="w-4 h-4" />
             </Button>
-            <Button 
-              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.justifyCenter && "bg-muted text-foreground")} 
+            <Button
+              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.justifyCenter && "bg-muted text-foreground")}
               onClick={() => execCommand('justifyCenter')} title="Centralizar" aria-label="Centralizar">
               <AlignCenter className="w-4 h-4" />
             </Button>
-            <Button 
-              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.justifyRight && "bg-muted text-foreground")} 
+            <Button
+              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.justifyRight && "bg-muted text-foreground")}
               onClick={() => execCommand('justifyRight')} title="Alinhar à direita" aria-label="Alinhar à direita">
               <AlignRight className="w-4 h-4" />
             </Button>
             <div className="w-px h-6 bg-border mx-1 hidden sm:block"></div>
           </>
         )}
-        
+
         {allowLists && (
           <>
-            <Button 
-              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.insertUnorderedList && "bg-muted text-foreground")} 
+            <Button
+              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.insertUnorderedList && "bg-muted text-foreground")}
               onClick={() => execCommand('insertUnorderedList')} title="Lista com marcadores" aria-label="Lista com marcadores">
               <List className="w-4 h-4" />
             </Button>
-            <Button 
-              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.insertOrderedList && "bg-muted text-foreground")} 
+            <Button
+              variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", activeFormats.insertOrderedList && "bg-muted text-foreground")}
               onClick={() => execCommand('insertOrderedList')} title="Lista numerada" aria-label="Lista numerada">
               <ListOrdered className="w-4 h-4" />
             </Button>
             <div className="w-px h-6 bg-border mx-1 hidden sm:block"></div>
           </>
         )}
-        
+
         {allowLinks && (
           <>
             <Popover open={isLinkOpen} onOpenChange={onLinkPopoverOpenChange} modal={false}>
               <PopoverTrigger asChild>
-                <Button 
-                  variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", (activeFormats.link || isLinkOpen) && "bg-muted text-foreground")} 
+                <Button
+                  variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", (activeFormats.link || isLinkOpen) && "bg-muted text-foreground")}
                   title="Inserir link" aria-label="Inserir link">
                   <LinkIcon className="w-4 h-4" />
                 </Button>
               </PopoverTrigger>
               <PopoverContent className="w-80 p-3" align="start" style={{ zIndex: 9999 }}>
-                {!savedSelection.current && !activeFormats.link ? (
+                {!activeFormats.link && !hasSavedSelection ? (
                   <p className="text-xs text-muted-foreground py-1">Selecione um texto para criar um link.</p>
                 ) : (
                   <div className="flex flex-col gap-2">
                     <div className="text-xs font-medium">{activeFormats.link ? "Editar Link" : "Inserir Link"}</div>
                     <div className="flex gap-2">
-                      <Input 
+                      <Input
                         ref={linkInputRef}
-                        placeholder="https://..." 
-                        value={linkUrl} 
+                        placeholder="https://..."
+                        value={linkUrl}
                         onChange={(e) => setLinkUrl(e.target.value)}
-                        onKeyDown={(e) => e.key === 'Enter' && handleCreateLink()}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleCreateLink();
+                          }
+                        }}
                         className="h-8 text-xs"
                       />
                       <Button size="sm" className="h-8" onClick={handleCreateLink}>Aplicar</Button>
@@ -536,36 +317,36 @@ export function RichTextEditor({
               </PopoverContent>
             </Popover>
 
-            <Button 
-              variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground" 
+            <Button
+              variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground"
               onClick={handleUnlink} title="Remover link" aria-label="Remover link">
               <X className="w-4 h-4" />
             </Button>
-            
+
             <div className="w-px h-6 bg-border mx-1 hidden sm:block"></div>
           </>
         )}
-        
+
         {(allowFormatting || allowHeadings || allowAlignment || allowLists || allowLinks) && (
-          <Button 
-            variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground" 
+          <Button
+            variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground"
             onClick={() => execCommand('removeFormat')} title="Limpar formatação" aria-label="Limpar formatação">
             <Type className="w-4 h-4" />
           </Button>
         )}
-        
+
         {allowSearch && (
-          <Button 
-            variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", isSearchOpen && "bg-muted text-foreground")} 
+          <Button
+            variant="ghost" size="icon" className={cn("h-8 w-8 text-muted-foreground", isSearchOpen && "bg-muted text-foreground")}
             onClick={() => {
               setIsSearchOpen(!isSearchOpen);
               if (!isSearchOpen) setTimeout(() => searchInputRef.current?.focus(), 100);
-            }} 
+            }}
             title="Buscar" aria-label="Buscar">
             <Search className="w-4 h-4" />
           </Button>
         )}
-        
+
         {actionButton && (
           <>
             <div className="flex-1"></div>
@@ -597,21 +378,21 @@ export function RichTextEditor({
             />
           </div>
           <div className="flex items-center gap-1">
-            <Button 
-              variant="ghost" size="icon" className="h-7 w-7" 
+            <Button
+              variant="ghost" size="icon" className="h-7 w-7"
               onMouseDown={(e) => e.preventDefault()}
               onClick={() => performSearch(searchQuery, true)} title="Anterior">
               <ChevronUp className="w-4 h-4" />
             </Button>
-            <Button 
-              variant="ghost" size="icon" className="h-7 w-7" 
+            <Button
+              variant="ghost" size="icon" className="h-7 w-7"
               onMouseDown={(e) => e.preventDefault()}
               onClick={() => performSearch(searchQuery, false)} title="Próximo">
               <ChevronDown className="w-4 h-4" />
             </Button>
             <div className="w-px h-4 bg-border mx-1"></div>
-            <Button 
-              variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground" 
+            <Button
+              variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground"
               onClick={() => setIsSearchOpen(false)} title="Fechar busca">
               <X className="w-4 h-4" />
             </Button>
@@ -644,13 +425,13 @@ export function RichTextEditor({
         <div className="px-4 py-2 border-t border-border bg-muted/20 flex items-center justify-between">
           <div className="text-[10px] sm:text-xs text-muted-foreground font-medium uppercase tracking-wider flex items-center gap-2">
             {showWordCount && (
-              <span>{getWordCount()} {getWordCount() === 1 ? 'palavra' : 'palavras'}</span>
+              <span>{wordCount} {wordCount === 1 ? 'palavra' : 'palavras'}</span>
             )}
             {showWordCount && showCharacterCount && (
               <span className="text-muted-foreground">•</span>
             )}
             {showCharacterCount && (
-              <span>{getCharacterCount()} {getCharacterCount() === 1 ? 'caractere' : 'caracteres'}</span>
+              <span>{characterCount} {characterCount === 1 ? 'caractere' : 'caracteres'}</span>
             )}
           </div>
           <div className="text-[10px] sm:text-xs text-muted-foreground italic">