From 1af2e084a2afb03639ba59ed1edc8d3e05eb53e9 Mon Sep 17 00:00:00 2001
From: vimzh <vimzh.dev@gmail.com>
Date: Sat, 14 Mar 2026 18:14:42 +0530
Subject: [PATCH 1/3] feat(design-system): replace textarea with
 contentEditable for inline autocomplete

Swap the native <textarea> in AutocompleteTextArea with a contentEditable
<div> that renders each line as a <span>. This enables pixel-accurate
inline ghost text for autocomplete on any line, without the positioning
hacks required by absolute-positioned overlays.

New ContentEditableTextArea component with:
- Per-line span rendering with editable + ghost segments
- useContentEditable hook for DOM <-> state sync and caret management
- Memoized Line component to skip unchanged line re-renders
- Auto-sizing, LTR/RTL, disabled state, placeholder
- Full ARIA: role=textbox, aria-multiline, aria-autocomplete=inline

Closes #197
---
 .../TextArea/AutocompleteTextArea.tsx         | 411 +++++-------------
 .../TextArea/ContentEditableTextArea.tsx      | 379 ++++++++++++++++
 .../TextArea/contentEditable.test.tsx         |  80 ++++
 .../contentEditableTextarea.stories.tsx       |  79 ++++
 .../src/components/TextArea/index.tsx         |   1 +
 5 files changed, 646 insertions(+), 304 deletions(-)
 create mode 100644 packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx
 create mode 100644 packages/@intlayer/design-system/src/components/TextArea/contentEditable.test.tsx
 create mode 100644 packages/@intlayer/design-system/src/components/TextArea/contentEditableTextarea.stories.tsx

diff --git a/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx b/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx
index 717f3d4c67..25d2388fae 100644
--- a/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx
+++ b/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx
@@ -1,36 +1,14 @@
 'use client';
 
 import { useAutocomplete } from '@hooks/reactQuery';
-import type { AutocompleteResponse } from '@intlayer/backend';
 import { useConfiguration } from '@intlayer/editor-react';
-import { type FC, useEffect, useRef, useState } from 'react';
+import { type FC, useCallback, useEffect, useRef, useState } from 'react';
+import type { AutoSizedTextAreaProps } from './AutoSizeTextArea';
 import {
-  AutoSizedTextArea,
-  type AutoSizedTextAreaProps,
-} from './AutoSizeTextArea';
+  ContentEditableTextArea,
+  type ContentEditableTextAreaHandle,
+} from './ContentEditableTextArea';
 
-/**
- * Custom hook for debouncing values to prevent excessive API calls.
- *
- * Delays updating the returned value until the input value has stopped changing
- * for the specified delay period.
- *
- * @param value - The value to debounce
- * @param delay - Delay in milliseconds before updating the debounced value
- * @returns The debounced value that only updates after the delay period
- *
- * @example
- * ```tsx
- * const [searchTerm, setSearchTerm] = useState('');
- * const debouncedSearchTerm = useDebounce(searchTerm, 300);
- *
- * useEffect(() => {
- *   if (debouncedSearchTerm) {
- *     performSearch(debouncedSearchTerm);
- *   }
- * }, [debouncedSearchTerm]);
- * ```
- */
 export const useDebounce = <T,>(value: T, delay: number): T => {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
@@ -39,141 +17,17 @@ export const useDebounce = <T,>(value: T, delay: number): T => {
       setDebouncedValue(value);
     }, delay);
 
-    // Cleanup the timer if value changes before 'delay' ms
     return () => clearTimeout(timer);
   }, [value, delay]);
 
   return debouncedValue;
 };
 
-/**
- * Props for the AutocompleteTextArea component.
- *
- * Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.
- *
- * @example
- * ```tsx
- * // AI-powered autocomplete textarea
- * <AutoCompleteTextarea
- *   placeholder="Start typing for AI suggestions..."
- *   isActive={true}
- *   autoSize={true}
- *   maxRows={10}
- * />
- *
- * // Manual suggestion mode
- * <AutoCompleteTextarea
- *   value={content}
- *   onChange={handleChange}
- *   suggestion="Consider adding more details about..."
- *   isActive={false}
- * />
- *
- * // Disabled autocomplete for sensitive content
- * <AutoCompleteTextarea
- *   placeholder="Private notes (no AI assistance)"
- *   isActive={false}
- *   autoSize={true}
- * />
- * ```
- */
 export type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {
-  /** Whether AI autocomplete is active and should fetch suggestions */
   isActive?: boolean;
-  /** Manual suggestion text to display (overrides AI suggestions) */
   suggestion?: string;
 };
 
-/**
- * AutoCompleteTextarea Component
- *
- * An intelligent textarea that provides AI-powered autocomplete suggestions as users type,
- * combining auto-sizing functionality with contextual text completion.
- *
- * ## Features
- * - **AI-Powered Suggestions**: Context-aware autocomplete using configured AI models
- * - **Debounced API Calls**: Efficient suggestion fetching with 200ms debounce
- * - **Visual Suggestions**: Inline preview of suggested completions
- * - **Keyboard Navigation**: Tab key to accept suggestions
- * - **Context Analysis**: Uses surrounding text for better suggestions
- * - **Auto-Sizing**: Inherits all AutoSizedTextArea capabilities
- * - **Performance Optimized**: Smart caching and minimal re-renders
- *
- * ## Technical Implementation
- * - **Debounce Strategy**: 200ms delay before fetching suggestions
- * - **Context Window**: 5 lines before/after cursor for context
- * - **Minimum Trigger**: Requires 3+ characters before suggesting
- * - **Position Tracking**: Ghost layer for accurate suggestion positioning
- * - **Cursor Management**: Tracks cursor position during suggestion fetch
- *
- * ## AI Integration
- * - Uses configured AI model (OpenAI, Anthropic, etc.)
- * - Sends context-aware prompts for relevant suggestions
- * - Respects temperature and model settings from configuration
- * - Handles API errors gracefully without interrupting user flow
- *
- * ## Use Cases
- * - **Content Creation**: Blog posts, articles, documentation
- * - **Code Comments**: Intelligent code documentation assistance
- * - **Email Composition**: Professional email writing assistance
- * - **Creative Writing**: Story and narrative completion
- * - **Technical Documentation**: API docs, README files
- * - **Social Media**: Post creation with engagement optimization
- *
- * @example
- * ```tsx
- * // Blog writing assistant
- * const [blogPost, setBlogPost] = useState('');
- * const [isAiEnabled, setIsAiEnabled] = useState(true);
- *
- * <div className="space-y-4">
- *   <div className="flex items-center gap-2">
- *     <Switch
- *       checked={isAiEnabled}
- *       onChange={setIsAiEnabled}
- *     />
- *     <label>AI Writing Assistant</label>
- *   </div>
- *
- *   <AutoCompleteTextarea
- *     value={blogPost}
- *     onChange={(e) => setBlogPost(e.target.value)}
- *     placeholder="Start writing your blog post..."
- *     isActive={isAiEnabled}
- *     autoSize={true}
- *     maxRows={15}
- *     className="min-h-[200px] font-serif text-lg leading-relaxed"
- *   />
- * </div>
- *
- * // Code documentation assistant
- * <AutoCompleteTextarea
- *   value={docComment}
- *   onChange={handleDocChange}
- *   placeholder="/** Describe this function... *\/"
- *   isActive={true}
- *   autoSize={true}
- *   maxRows={8}
- *   className="font-mono text-sm"
- * />
- *
- * // Email composition with templates
- * <AutoCompleteTextarea
- *   defaultValue="Dear "
- *   placeholder="AI will help complete your email..."
- *   isActive={true}
- *   autoSize={true}
- *   maxRows={12}
- *   variant={InputVariant.DEFAULT}
- * />
- * ```
- *
- * ## Accessibility
- * - Ghost layer is properly hidden from screen readers
- * - Maintains focus management during suggestion acceptance
- * - Preserves keyboard navigation patterns
- * - Respects reduced motion preferences
- */
 export const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({
   isActive = true,
   suggestion: suggestionProp,
@@ -185,16 +39,13 @@ export const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({
   const [isTyped, setIsTyped] = useState(false);
   const [text, setText] = useState(defaultValue);
   const [suggestion, setSuggestion] = useState('');
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const placeholderRef = useRef<HTMLSpanElement>(null);
-  const ghostLayerRef = useRef<HTMLDivElement>(null);
-  const [suggestionPosition, setSuggestionPosition] = useState<{
-    left: number;
-    top: number;
-  } | null>(null);
+  const editorRef = useRef<ContentEditableTextAreaHandle>(null);
   const [cursorAtFetch, setCursorAtFetch] = useState(-1);
+  const [ghostPos, setGhostPos] = useState<{
+    line: number;
+    offset: number;
+  } | null>(null);
 
-  // Only update this “debouncedText” after the user stops typing for 200ms
   const debouncedText = useDebounce(text, 200);
 
   useEffect(() => {
@@ -202,166 +53,118 @@ export const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({
     setText(defaultValue);
   }, [props.value, props.defaultValue]);
 
-  useEffect(() => {
-    if (!isActive) return;
-    if (!isTyped) return;
-
-    const fetchSuggestion = async () => {
-      try {
-        const cursor =
-          textareaRef.current?.selectionStart ?? debouncedText.length;
-        const before = debouncedText.slice(0, cursor);
-        const after = debouncedText.slice(cursor);
-        const numLines = 5;
-        const beforeLines = before.split('\n');
-        const contextBeforeLines = beforeLines.slice(
-          Math.max(0, beforeLines.length - numLines - 1),
-          -1
-        );
-        const contextBefore = contextBeforeLines.join('\n');
-        const currentLine = beforeLines[beforeLines.length - 1] ?? '';
-        const afterLines = after.split('\n');
-        const contextAfter = afterLines.slice(1, numLines + 1).join('\n');
-
-        autocomplete(
-          {
-            text: before,
-            contextBefore,
-            currentLine,
-            contextAfter,
-            aiOptions: {
-              apiKey: configuration.ai?.apiKey,
-              model: configuration.ai?.model,
-              temperature: configuration.ai?.temperature,
-            },
-          },
-          {
-            onSuccess: (data: AutocompleteResponse) => {
-              setSuggestion(data.data?.autocompletion ?? '');
-              setCursorAtFetch(cursor);
-            },
-          }
-        );
-      } catch (err) {
-        console.error('Autocomplete error:', err);
+  const _cursorToLinePos = useCallback((cursor: number, src: string) => {
+    const lines = src.split('\n');
+    let rem = cursor;
+    for (let i = 0; i < lines.length; i++) {
+      if (rem <= lines[i].length) {
+        setGhostPos({ line: i, offset: rem });
+        return;
       }
-    };
+      rem -= lines[i].length + 1;
+    }
+    setGhostPos({
+      line: lines.length - 1,
+      offset: lines[lines.length - 1].length,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!isActive || !isTyped) return;
 
     if (debouncedText.length > 3) {
-      // Only fetch if user typed more than 3 chars and has paused
       setSuggestion('');
-      // TODO: Uncomment this when the autocomplete works well enough
-      // fetchSuggestion();
+
+      // Autocomplete fetch logic — currently disabled upstream
+      // const cursor = editorRef.current?.getCursorOffset() ?? debouncedText.length;
+      // const before = debouncedText.slice(0, cursor);
+      // const after = debouncedText.slice(cursor);
+      // const beforeLines = before.split('\n');
+      // const contextBefore = beforeLines.slice(Math.max(0, beforeLines.length - 6), -1).join('\n');
+      // const currentLine = beforeLines[beforeLines.length - 1] ?? '';
+      // const contextAfter = after.split('\n').slice(1, 6).join('\n');
+      //
+      // autocomplete(
+      //   { text: before, contextBefore, currentLine, contextAfter,
+      //     aiOptions: { apiKey: configuration.ai?.apiKey, model: configuration.ai?.model, temperature: configuration.ai?.temperature } },
+      //   { onSuccess: (data: AutocompleteResponse) => {
+      //       const completion = data.data?.autocompletion ?? '';
+      //       setSuggestion(completion);
+      //       setCursorAtFetch(cursor);
+      //       if (completion) cursorToLinePos(cursor, debouncedText);
+      //   }}
+      // );
     } else {
-      // If typed less than threshold, clear the suggestion
       setSuggestion('');
     }
   }, [debouncedText, isActive, autocomplete, configuration]);
 
-  useEffect(() => {
-    if (
-      !suggestion ||
-      cursorAtFetch === -1 ||
-      !placeholderRef.current ||
-      !ghostLayerRef.current
-    ) {
-      setSuggestionPosition(null);
-      return;
-    }
+  const acceptSuggestion = useCallback(() => {
+    const cursor = editorRef.current?.getCursorOffset() ?? cursorAtFetch;
+    if (cursor !== cursorAtFetch) return;
 
-    const rect = placeholderRef.current.getBoundingClientRect();
-    const parentRect = ghostLayerRef.current.getBoundingClientRect();
-    setSuggestionPosition({
-      left: rect.left - parentRect.left,
-      top: rect.top - parentRect.top,
-    });
-  }, [suggestion, cursorAtFetch, text]);
-
-  const acceptSuggestion = () => {
-    const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;
-    if (currentCursor !== cursorAtFetch) return;
-    const newText =
-      text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);
-    setText(newText);
+    const active = suggestionProp ?? suggestion;
+    const next = text.slice(0, cursor) + active + text.slice(cursor);
+    setText(next);
     setSuggestion('');
     setCursorAtFetch(-1);
+    setGhostPos(null);
+
     setTimeout(() => {
-      textareaRef.current?.focus();
-      const newCursorPos = currentCursor + suggestion.length;
-      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+      editorRef.current?.focus();
+      editorRef.current?.setCursorAtOffset(cursor + active.length);
     }, 0);
-  };
+  }, [text, suggestion, suggestionProp, cursorAtFetch]);
+
+  const activeGhost = suggestionProp ?? (suggestion || undefined);
+  const activeLine = suggestionProp
+    ? text.split('\n').length - 1
+    : ghostPos?.line;
+  const activeOffset = suggestionProp
+    ? (text.split('\n').at(-1)?.length ?? 0)
+    : ghostPos?.offset;
 
   return (
-    <div className="relative w-full">
-      <div
-        ref={ghostLayerRef}
-        className="pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]"
-        aria-hidden="true"
-      >
-        {suggestion && cursorAtFetch !== -1 ? (
-          <>
-            <span className="align-text-top text-transparent">
-              {text.slice(0, cursorAtFetch)}
-            </span>
-            <span
-              ref={placeholderRef}
-              style={{ visibility: 'hidden' }}
-              aria-hidden="true"
-            >
-              {suggestion}
-            </span>
-            <span className="align-text-top text-transparent">
-              {text.slice(cursorAtFetch)}
-            </span>
-          </>
-        ) : (
-          <span className="align-text-top text-transparent">{text}</span>
-        )}
-        {suggestionProp && (
-          <span className="align-text-top text-neutral">{suggestionProp}</span>
-        )}
-      </div>
-      {suggestion && suggestionPosition && (
-        <div
-          className="pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]"
-          style={{
-            position: 'absolute',
-            left: suggestionPosition.left,
-            top: suggestionPosition.top,
-          }}
-        >
-          {suggestion}
-        </div>
-      )}
-      <AutoSizedTextArea
-        {...props}
-        ref={textareaRef}
-        value={text}
-        onChange={(e) => {
-          setIsTyped(true);
-          setText(e.target.value);
-          setSuggestion('');
-          props.onChange?.(e);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'Tab' && suggestion) {
-            e.preventDefault();
-            acceptSuggestion();
-          }
-          props.onKeyDown?.(e);
-        }}
-        onSelect={(e) => {
-          if (
-            suggestion &&
-            (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch
-          ) {
-            setSuggestion('');
-            setCursorAtFetch(-1);
-          }
-          props.onSelect?.(e);
-        }}
-      />
-    </div>
+    <ContentEditableTextArea
+      ref={editorRef}
+      value={text}
+      onChange={(val) => {
+        setIsTyped(true);
+        setText(val);
+        setSuggestion('');
+        setGhostPos(null);
+
+        if (props.onChange) {
+          const evt = {
+            target: { value: val },
+            currentTarget: { value: val },
+          } as React.ChangeEvent<HTMLTextAreaElement>;
+          props.onChange(evt);
+        }
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Tab' && (suggestionProp ?? suggestion)) {
+          e.preventDefault();
+          acceptSuggestion();
+        }
+        props.onKeyDown?.(
+          e as unknown as React.KeyboardEvent<HTMLTextAreaElement>
+        );
+      }}
+      ghostText={activeGhost}
+      ghostLine={activeLine}
+      ghostOffset={activeOffset}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      autoSize={props.autoSize}
+      maxRows={props.maxRows}
+      minRows={props.rows}
+      variant={props.variant}
+      validationStyleEnabled={props.validationStyleEnabled}
+      className={props.className}
+      dir={props.dir as 'ltr' | 'rtl' | 'auto'}
+      aria-label={props['aria-label']}
+      data-testid={props['data-testid']}
+    />
   );
 };
diff --git a/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx b/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx
new file mode 100644
index 0000000000..050924faec
--- /dev/null
+++ b/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx
@@ -0,0 +1,379 @@
+'use client';
+
+import { cn } from '@utils/cn';
+import type { VariantProps } from 'class-variance-authority';
+import {
+  type FC,
+  type HTMLAttributes,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { type InputVariant, inputVariants } from '../Input';
+
+type CaretPosition = {
+  line: number;
+  offset: number;
+};
+
+type UseContentEditableOptions = {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+};
+
+const getTextFromContainer = (container: HTMLDivElement): string => {
+  const lineEls = container.querySelectorAll('[data-line]');
+  if (lineEls.length === 0) return container.textContent ?? '';
+
+  return Array.from(lineEls)
+    .map((el) => {
+      const editable = el.querySelector('[data-editable]');
+      return editable?.textContent ?? el.textContent ?? '';
+    })
+    .join('\n');
+};
+
+const splitLines = (text: string): string[] => {
+  const lines = text.split('\n');
+  return lines.length === 0 ? [''] : lines;
+};
+
+export const useContentEditable = ({
+  value,
+  defaultValue,
+  onChange,
+  disabled = false,
+}: UseContentEditableOptions) => {
+  const initialValue = value ?? defaultValue ?? '';
+  const [lines, setLines] = useState<string[]>(() => splitLines(initialValue));
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const isControlled = value !== undefined;
+
+  useEffect(() => {
+    if (isControlled && value !== undefined) {
+      setLines(splitLines(value));
+    }
+  }, [value, isControlled]);
+
+  const getText = useCallback(() => lines.join('\n'), [lines]);
+
+  const getCaretPosition = useCallback((): CaretPosition | null => {
+    const sel = window.getSelection();
+    if (!sel?.rangeCount || !containerRef.current) return null;
+
+    const range = sel.getRangeAt(0);
+    const lineEls = containerRef.current.querySelectorAll('[data-line]');
+
+    for (let i = 0; i < lineEls.length; i++) {
+      if (lineEls[i].contains(range.startContainer)) {
+        return { line: i, offset: range.startOffset };
+      }
+    }
+    return null;
+  }, []);
+
+  const setCaretPosition = useCallback((pos: CaretPosition) => {
+    if (!containerRef.current) return;
+
+    const lineEls = containerRef.current.querySelectorAll('[data-line]');
+    const lineEl = lineEls[pos.line];
+    if (!lineEl) return;
+
+    const editable = lineEl.querySelector('[data-editable]');
+    const node =
+      editable?.firstChild ?? editable ?? lineEl.firstChild ?? lineEl;
+
+    const sel = window.getSelection();
+    if (!sel) return;
+
+    const range = document.createRange();
+    const maxOff = Math.min(pos.offset, node.textContent?.length ?? 0);
+
+    try {
+      range.setStart(node, maxOff);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    } catch {
+      range.selectNodeContents(node);
+      range.collapse(false);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  }, []);
+
+  const getCursorOffset = useCallback((): number => {
+    const pos = getCaretPosition();
+    if (!pos) return 0;
+
+    let offset = 0;
+    for (let i = 0; i < pos.line; i++) {
+      offset += lines[i].length + 1;
+    }
+    return offset + pos.offset;
+  }, [getCaretPosition, lines]);
+
+  const handleInput = useCallback(() => {
+    if (disabled || !containerRef.current) return;
+
+    const newText = getTextFromContainer(containerRef.current);
+    const newLines = splitLines(newText);
+
+    if (!isControlled) {
+      setLines(newLines);
+    }
+    onChange?.(newText);
+  }, [disabled, isControlled, onChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) {
+        e.preventDefault();
+      }
+    },
+    [disabled]
+  );
+
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent<HTMLDivElement>) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+
+      e.preventDefault();
+      const text = e.clipboardData.getData('text/plain');
+
+      const sel = window.getSelection();
+      if (!sel?.rangeCount) return;
+
+      const range = sel.getRangeAt(0);
+      range.deleteContents();
+      range.insertNode(document.createTextNode(text));
+      range.collapse(false);
+      sel.removeAllRanges();
+      sel.addRange(range);
+
+      handleInput();
+    },
+    [disabled, handleInput]
+  );
+
+  return {
+    lines,
+    containerRef,
+    getText,
+    handleInput,
+    handleKeyDown,
+    handlePaste,
+    getCaretPosition,
+    setCaretPosition,
+    getCursorOffset,
+  };
+};
+
+type LineProps = {
+  index: number;
+  text: string;
+  isLast: boolean;
+  ghostText?: string;
+};
+
+const Line: FC<LineProps> = memo(
+  ({ index, text, isLast, ghostText }) => (
+    <span data-line={index} className="block min-h-[1.5rem]">
+      <span data-editable>{text || '\u200B'}</span>
+      {ghostText && (
+        <span
+          data-ghost
+          className="pointer-events-none select-none text-neutral"
+          aria-hidden="true"
+        >
+          {ghostText}
+        </span>
+      )}
+      {!isLast && <br />}
+    </span>
+  ),
+  (prev, next) =>
+    prev.text === next.text &&
+    prev.ghostText === next.ghostText &&
+    prev.index === next.index &&
+    prev.isLast === next.isLast
+);
+
+Line.displayName = 'Line';
+
+export type ContentEditableTextAreaHandle = {
+  getContainer: () => HTMLDivElement | null;
+  getText: () => string;
+  focus: () => void;
+  getCursorOffset: () => number;
+  setCursorAtOffset: (offset: number) => void;
+};
+
+export type ContentEditableTextAreaProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'defaultValue'
+> & {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  minRows?: number;
+  maxRows?: number;
+  autoSize?: boolean;
+  validationStyleEnabled?: boolean;
+  variant?: InputVariant | `${InputVariant}`;
+  ghostText?: string;
+  ghostLine?: number;
+  ghostOffset?: number;
+  ref?: React.Ref<ContentEditableTextAreaHandle>;
+  dir?: 'ltr' | 'rtl' | 'auto';
+} & Omit<
+    VariantProps<typeof inputVariants>,
+    'validationStyleEnabled' | 'variant'
+  >;
+
+const LINE_HEIGHT = 24;
+const LINE_PADDING = 12;
+
+export const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({
+  value,
+  defaultValue,
+  onChange,
+  placeholder,
+  disabled = false,
+  minRows = 1,
+  maxRows = 999,
+  autoSize = true,
+  validationStyleEnabled = false,
+  variant,
+  ghostText,
+  ghostLine,
+  ghostOffset,
+  onClick,
+  className,
+  dir = 'auto',
+  ref,
+  ...rest
+}) => {
+  const {
+    lines,
+    containerRef,
+    getText,
+    handleInput,
+    handleKeyDown,
+    handlePaste,
+    getCursorOffset,
+    setCaretPosition,
+  } = useContentEditable({ value, defaultValue, onChange, disabled });
+
+  const elRef = useRef<HTMLDivElement | null>(null);
+
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      elRef.current = el;
+      (containerRef as React.MutableRefObject<HTMLDivElement | null>).current =
+        el;
+    },
+    [containerRef]
+  );
+
+  useImperativeHandle(ref, () => ({
+    getContainer: () => elRef.current,
+    getText,
+    focus: () => elRef.current?.focus(),
+    getCursorOffset,
+    setCursorAtOffset: (offset: number) => {
+      let rem = offset;
+      for (let i = 0; i < lines.length; i++) {
+        if (rem <= lines[i].length) {
+          setCaretPosition({ line: i, offset: rem });
+          return;
+        }
+        rem -= lines[i].length + 1;
+      }
+      setCaretPosition({
+        line: lines.length - 1,
+        offset: lines[lines.length - 1].length,
+      });
+    },
+  }));
+
+  useEffect(() => {
+    if (!autoSize || !elRef.current) return;
+
+    const el = elRef.current;
+    const max = LINE_HEIGHT * maxRows + LINE_PADDING;
+    const min = LINE_HEIGHT * minRows + LINE_PADDING;
+
+    el.style.height = 'auto';
+    const sh = el.scrollHeight;
+    el.style.height = `${Math.max(Math.min(sh, max), min)}px`;
+    el.style.overflowY = sh > max ? 'auto' : 'hidden';
+  }, [lines, autoSize, maxRows, minRows]);
+
+  const isEmpty = lines.length === 1 && lines[0] === '';
+  const hasGhost =
+    ghostText && ghostLine !== undefined && ghostOffset !== undefined;
+
+  return (
+    <div className="relative w-full">
+      {isEmpty && placeholder && (
+        <div
+          className="pointer-events-none absolute inset-0 select-none px-3 py-3 text-neutral-400"
+          aria-hidden="true"
+        >
+          {placeholder}
+        </div>
+      )}
+
+      <div
+        ref={setRef}
+        role="textbox"
+        aria-multiline="true"
+        aria-placeholder={placeholder}
+        aria-disabled={disabled}
+        aria-autocomplete={hasGhost ? 'inline' : undefined}
+        tabIndex={disabled ? -1 : 0}
+        contentEditable={!disabled}
+        suppressContentEditableWarning
+        dir={dir}
+        onInput={handleInput}
+        onKeyDown={handleKeyDown}
+        onPaste={handlePaste}
+        onClick={onClick}
+        data-testid={rest['data-testid']}
+        className={cn(
+          'resize-none whitespace-pre-wrap break-words outline-none',
+          inputVariants({
+            variant,
+            validationStyleEnabled: validationStyleEnabled
+              ? 'enabled'
+              : 'disabled',
+          }),
+          autoSize && 'overflow-y-auto',
+          className
+        )}
+        {...rest}
+      >
+        {lines.map((text, i) => (
+          <Line
+            key={i}
+            index={i}
+            text={text}
+            isLast={i === lines.length - 1}
+            ghostText={hasGhost && ghostLine === i ? ghostText : undefined}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/@intlayer/design-system/src/components/TextArea/contentEditable.test.tsx b/packages/@intlayer/design-system/src/components/TextArea/contentEditable.test.tsx
new file mode 100644
index 0000000000..5a9cc20a4e
--- /dev/null
+++ b/packages/@intlayer/design-system/src/components/TextArea/contentEditable.test.tsx
@@ -0,0 +1,80 @@
+import { render, renderHook, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import {
+  ContentEditableTextArea,
+  useContentEditable,
+} from './ContentEditableTextArea';
+
+describe('useContentEditable', () => {
+  test('splits value into lines', () => {
+    const { result } = renderHook(() =>
+      useContentEditable({ value: 'line1\nline2\nline3' })
+    );
+    expect(result.current.lines).toEqual(['line1', 'line2', 'line3']);
+  });
+
+  test('empty string gives single empty line', () => {
+    const { result } = renderHook(() => useContentEditable({ value: '' }));
+    expect(result.current.lines).toEqual(['']);
+  });
+
+  test('getText joins lines back', () => {
+    const { result } = renderHook(() =>
+      useContentEditable({ value: 'hello\nworld' })
+    );
+    expect(result.current.getText()).toBe('hello\nworld');
+  });
+
+  test('reacts to value changes', () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useContentEditable({ value }),
+      { initialProps: { value: 'initial' } }
+    );
+    rerender({ value: 'updated\ntext' });
+    expect(result.current.lines).toEqual(['updated', 'text']);
+  });
+});
+
+describe('ContentEditableTextArea', () => {
+  test('renders as role=textbox with aria-multiline', () => {
+    render(<ContentEditableTextArea />);
+    const el = screen.getByRole('textbox');
+    expect(el).toBeDefined();
+    expect(el.getAttribute('aria-multiline')).toBe('true');
+  });
+
+  test('renders value as line spans', () => {
+    render(<ContentEditableTextArea value={'line1\nline2'} />);
+    const el = screen.getByRole('textbox');
+    expect(el.querySelectorAll('[data-line]').length).toBe(2);
+  });
+
+  test('shows placeholder when empty', () => {
+    render(<ContentEditableTextArea placeholder="Type here..." />);
+    expect(screen.getByText('Type here...')).toBeDefined();
+  });
+
+  test('disabled sets contenteditable=false', () => {
+    render(<ContentEditableTextArea disabled />);
+    expect(screen.getByRole('textbox').getAttribute('contenteditable')).toBe(
+      'false'
+    );
+  });
+
+  test('passes className through', () => {
+    render(<ContentEditableTextArea className="my-class" data-testid="ce" />);
+    expect(screen.getByTestId('ce').className).toContain('my-class');
+  });
+
+  test('renders ghost text on specified line', () => {
+    render(
+      <ContentEditableTextArea
+        value="hello "
+        ghostText="world"
+        ghostLine={0}
+        ghostOffset={6}
+      />
+    );
+    expect(screen.getByText('world')).toBeDefined();
+  });
+});
diff --git a/packages/@intlayer/design-system/src/components/TextArea/contentEditableTextarea.stories.tsx b/packages/@intlayer/design-system/src/components/TextArea/contentEditableTextarea.stories.tsx
new file mode 100644
index 0000000000..8d4594a2d1
--- /dev/null
+++ b/packages/@intlayer/design-system/src/components/TextArea/contentEditableTextarea.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { ContentEditableTextArea } from './ContentEditableTextArea';
+
+const meta: Meta<typeof ContentEditableTextArea> = {
+  title: 'Components/TextArea/ContentEditableTextArea',
+  component: ContentEditableTextArea,
+  tags: ['autodocs'],
+  argTypes: {
+    dir: { control: 'select', options: ['ltr', 'rtl', 'auto'] },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContentEditableTextArea>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Start typing...',
+    minRows: 3,
+    maxRows: 10,
+  },
+};
+
+export const WithGhostText: Story = {
+  render: () => (
+    <ContentEditableTextArea
+      value="Hello "
+      ghostText="world, how are you?"
+      ghostLine={0}
+      ghostOffset={6}
+    />
+  ),
+};
+
+export const MultilineGhost: Story = {
+  render: () => (
+    <ContentEditableTextArea
+      value={'First line\nSecond line: '}
+      ghostText="autocomplete suggestion"
+      ghostLine={1}
+      ghostOffset={13}
+      minRows={4}
+    />
+  ),
+};
+
+export const RTL: Story = {
+  args: {
+    dir: 'rtl',
+    placeholder: 'اكتب هنا...',
+    defaultValue: 'مرحبا بالعالم',
+    minRows: 3,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: 'This content cannot be edited',
+    disabled: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('Edit me!');
+    return (
+      <div className="space-y-2">
+        <ContentEditableTextArea
+          value={value}
+          onChange={setValue}
+          minRows={3}
+          maxRows={8}
+        />
+        <p className="text-neutral-500 text-sm">{value.length} characters</p>
+      </div>
+    );
+  },
+};
diff --git a/packages/@intlayer/design-system/src/components/TextArea/index.tsx b/packages/@intlayer/design-system/src/components/TextArea/index.tsx
index 04ec9f2225..6f49362694 100644
--- a/packages/@intlayer/design-system/src/components/TextArea/index.tsx
+++ b/packages/@intlayer/design-system/src/components/TextArea/index.tsx
@@ -1,3 +1,4 @@
 export * from './AutocompleteTextArea';
 export * from './AutoSizeTextArea';
+export * from './ContentEditableTextArea';
 export * from './TextArea';

From 579bbfbd246e006402a518d8112e4de73b96ec9d Mon Sep 17 00:00:00 2001
From: vimzh <vimzh.dev@gmail.com>
Date: Sun, 15 Mar 2026 18:30:03 +0530
Subject: [PATCH 2/3] fix(design-system): resolve contentEditable input bugs
 and review feedback

Address all maintainer review comments on PR #394:

- Remove unused _cursorToLinePos function and dead autocomplete state
- Replace .at(-1) with bracket access for ES2020 compatibility
- Fix broken input logic by intercepting all keyboard/clipboard events
  via React state instead of allowing browser DOM mutations
- Add cursor preservation across re-renders via pendingCaretRef
- Handle text selections for Backspace/Delete/Enter/Cut/Paste
- Support modifier keys: Option+Backspace (word), Cmd+Backspace (line)
- Block Cmd+Z/Redo to prevent React state desync
- Add IME composition guards for CJK input
- Add grapheme-safe deletion for emoji and surrogate pairs
- Block drag-and-drop to prevent uncontrolled DOM mutations
- Handle spell-check replacements via insertReplacementText
- Fix {..rest} spread ordering to prevent handler override
- Fix placeholder alignment to match inputVariants padding
- Forward aria-invalid and aria-describedby to contentEditable div
- Strip zero-width spaces from text extraction
- Add 24 unit tests for hook and component behavior
---
 .../TextArea/AutocompleteTextArea.tsx         |  87 +---
 .../TextArea/ContentEditableTextArea.tsx      | 466 ++++++++++++++++--
 .../TextArea/contentEditable.test.tsx         | 104 ++++
 3 files changed, 546 insertions(+), 111 deletions(-)

diff --git a/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx b/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx
index 25d2388fae..8f458ccabf 100644
--- a/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx
+++ b/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import { useAutocomplete } from '@hooks/reactQuery';
-import { useConfiguration } from '@intlayer/editor-react';
 import { type FC, useCallback, useEffect, useRef, useState } from 'react';
 import type { AutoSizedTextAreaProps } from './AutoSizeTextArea';
 import {
@@ -34,105 +32,46 @@ export const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({
   ...props
 }) => {
   const defaultValue = String(props.value ?? props.defaultValue ?? '');
-  const { mutate: autocomplete } = useAutocomplete();
-  const configuration = useConfiguration();
-  const [isTyped, setIsTyped] = useState(false);
   const [text, setText] = useState(defaultValue);
   const [suggestion, setSuggestion] = useState('');
   const editorRef = useRef<ContentEditableTextAreaHandle>(null);
-  const [cursorAtFetch, setCursorAtFetch] = useState(-1);
-  const [ghostPos, setGhostPos] = useState<{
-    line: number;
-    offset: number;
-  } | null>(null);
-
-  const debouncedText = useDebounce(text, 200);
 
   useEffect(() => {
     if (typeof props.value === 'undefined') return;
-    setText(defaultValue);
+    setText(String(props.value ?? props.defaultValue ?? ''));
   }, [props.value, props.defaultValue]);
 
-  const _cursorToLinePos = useCallback((cursor: number, src: string) => {
-    const lines = src.split('\n');
-    let rem = cursor;
-    for (let i = 0; i < lines.length; i++) {
-      if (rem <= lines[i].length) {
-        setGhostPos({ line: i, offset: rem });
-        return;
-      }
-      rem -= lines[i].length + 1;
-    }
-    setGhostPos({
-      line: lines.length - 1,
-      offset: lines[lines.length - 1].length,
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!isActive || !isTyped) return;
-
-    if (debouncedText.length > 3) {
-      setSuggestion('');
-
-      // Autocomplete fetch logic — currently disabled upstream
-      // const cursor = editorRef.current?.getCursorOffset() ?? debouncedText.length;
-      // const before = debouncedText.slice(0, cursor);
-      // const after = debouncedText.slice(cursor);
-      // const beforeLines = before.split('\n');
-      // const contextBefore = beforeLines.slice(Math.max(0, beforeLines.length - 6), -1).join('\n');
-      // const currentLine = beforeLines[beforeLines.length - 1] ?? '';
-      // const contextAfter = after.split('\n').slice(1, 6).join('\n');
-      //
-      // autocomplete(
-      //   { text: before, contextBefore, currentLine, contextAfter,
-      //     aiOptions: { apiKey: configuration.ai?.apiKey, model: configuration.ai?.model, temperature: configuration.ai?.temperature } },
-      //   { onSuccess: (data: AutocompleteResponse) => {
-      //       const completion = data.data?.autocompletion ?? '';
-      //       setSuggestion(completion);
-      //       setCursorAtFetch(cursor);
-      //       if (completion) cursorToLinePos(cursor, debouncedText);
-      //   }}
-      // );
-    } else {
-      setSuggestion('');
-    }
-  }, [debouncedText, isActive, autocomplete, configuration]);
-
   const acceptSuggestion = useCallback(() => {
-    const cursor = editorRef.current?.getCursorOffset() ?? cursorAtFetch;
-    if (cursor !== cursorAtFetch) return;
-
     const active = suggestionProp ?? suggestion;
+    if (!active) return;
+
+    const cursor = editorRef.current?.getCursorOffset() ?? text.length;
     const next = text.slice(0, cursor) + active + text.slice(cursor);
     setText(next);
     setSuggestion('');
-    setCursorAtFetch(-1);
-    setGhostPos(null);
 
     setTimeout(() => {
       editorRef.current?.focus();
       editorRef.current?.setCursorAtOffset(cursor + active.length);
     }, 0);
-  }, [text, suggestion, suggestionProp, cursorAtFetch]);
+  }, [text, suggestion, suggestionProp]);
 
-  const activeGhost = suggestionProp ?? (suggestion || undefined);
-  const activeLine = suggestionProp
-    ? text.split('\n').length - 1
-    : ghostPos?.line;
+  const activeGhost = isActive
+    ? (suggestionProp ?? (suggestion || undefined))
+    : undefined;
+  const textLines = text.split('\n');
+  const activeLine = suggestionProp ? textLines.length - 1 : undefined;
   const activeOffset = suggestionProp
-    ? (text.split('\n').at(-1)?.length ?? 0)
-    : ghostPos?.offset;
+    ? (textLines[textLines.length - 1]?.length ?? 0)
+    : undefined;
 
   return (
     <ContentEditableTextArea
       ref={editorRef}
       value={text}
       onChange={(val) => {
-        setIsTyped(true);
         setText(val);
         setSuggestion('');
-        setGhostPos(null);
 
         if (props.onChange) {
           const evt = {
@@ -164,6 +103,8 @@ export const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({
       className={props.className}
       dir={props.dir as 'ltr' | 'rtl' | 'auto'}
       aria-label={props['aria-label']}
+      aria-invalid={props['aria-invalid']}
+      aria-describedby={props['aria-describedby']}
       data-testid={props['data-testid']}
     />
   );
diff --git a/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx b/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx
index 050924faec..04fe888c1c 100644
--- a/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx
+++ b/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx
@@ -26,14 +26,21 @@ type UseContentEditableOptions = {
   disabled?: boolean;
 };
 
+const ZERO_WIDTH_SPACE = '\u200B';
+
 const getTextFromContainer = (container: HTMLDivElement): string => {
   const lineEls = container.querySelectorAll('[data-line]');
-  if (lineEls.length === 0) return container.textContent ?? '';
+  if (lineEls.length === 0) {
+    return (container.textContent ?? '').split(ZERO_WIDTH_SPACE).join('');
+  }
 
   return Array.from(lineEls)
     .map((el) => {
       const editable = el.querySelector('[data-editable]');
-      return editable?.textContent ?? el.textContent ?? '';
+      const raw = editable?.textContent ?? el.textContent ?? '';
+      return raw === ZERO_WIDTH_SPACE
+        ? ''
+        : raw.split(ZERO_WIDTH_SPACE).join('');
     })
     .join('\n');
 };
@@ -43,6 +50,96 @@ const splitLines = (text: string): string[] => {
   return lines.length === 0 ? [''] : lines;
 };
 
+// Cached Intl.Segmenter for grapheme-aware deletion (emoji, CJK, etc.)
+const graphemeSegmenter =
+  typeof Intl !== 'undefined' && 'Segmenter' in Intl
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+
+/**
+ * Find the previous grapheme cluster boundary for safe deletion.
+ * Falls back to code-point-aware deletion if Intl.Segmenter is unavailable.
+ */
+const prevGraphemeBoundary = (text: string, offset: number): number => {
+  if (offset <= 0) return 0;
+
+  if (graphemeSegmenter) {
+    const segments = [...graphemeSegmenter.segment(text.slice(0, offset))];
+    const last = segments[segments.length - 1];
+    return last ? offset - last.segment.length : offset - 1;
+  }
+
+  // Fallback: handle surrogate pairs
+  const code = text.charCodeAt(offset - 1);
+  if (code >= 0xdc00 && code <= 0xdfff && offset >= 2) {
+    return offset - 2;
+  }
+  return offset - 1;
+};
+
+/**
+ * Find the next grapheme cluster boundary for safe forward deletion.
+ */
+const nextGraphemeBoundary = (text: string, offset: number): number => {
+  if (offset >= text.length) return text.length;
+
+  if (graphemeSegmenter) {
+    const segments = [...graphemeSegmenter.segment(text.slice(offset))];
+    const first = segments[0];
+    return first ? offset + first.segment.length : offset + 1;
+  }
+
+  // Fallback: handle surrogate pairs
+  const code = text.charCodeAt(offset);
+  if (code >= 0xd800 && code <= 0xdbff && offset + 1 < text.length) {
+    return offset + 2;
+  }
+  return offset + 1;
+};
+
+/**
+ * Find the previous word boundary for Option+Backspace.
+ */
+const prevWordBoundary = (text: string, offset: number): number => {
+  if (offset <= 0) return 0;
+  let i = offset - 1;
+  // Skip whitespace
+  while (i > 0 && /\s/.test(text[i - 1])) i--;
+  // Skip word characters
+  while (i > 0 && /\S/.test(text[i - 1])) i--;
+  return i;
+};
+
+/**
+ * Find the next word boundary for Option+Delete.
+ */
+const nextWordBoundary = (text: string, offset: number): number => {
+  if (offset >= text.length) return text.length;
+  let i = offset;
+  // Skip word characters
+  while (i < text.length && /\S/.test(text[i])) i++;
+  // Skip whitespace
+  while (i < text.length && /\s/.test(text[i])) i++;
+  return i;
+};
+
+/**
+ * Find the start of the current line (for Cmd+Backspace).
+ */
+const lineStart = (text: string, offset: number): number => {
+  const before = text.slice(0, offset);
+  const lastNewline = before.lastIndexOf('\n');
+  return lastNewline + 1;
+};
+
+/**
+ * Find the end of the current line (for Cmd+Delete).
+ */
+const lineEnd = (text: string, offset: number): number => {
+  const nextNewline = text.indexOf('\n', offset);
+  return nextNewline === -1 ? text.length : nextNewline;
+};
+
 export const useContentEditable = ({
   value,
   defaultValue,
@@ -52,15 +149,20 @@ export const useContentEditable = ({
   const initialValue = value ?? defaultValue ?? '';
   const [lines, setLines] = useState<string[]>(() => splitLines(initialValue));
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const pendingCaretRef = useRef<CaretPosition | null>(null);
   const isControlled = value !== undefined;
 
+  // Keep a ref to the latest lines to avoid stale closures in rapid typing
+  const linesRef = useRef(lines);
+  linesRef.current = lines;
+
   useEffect(() => {
     if (isControlled && value !== undefined) {
       setLines(splitLines(value));
     }
   }, [value, isControlled]);
 
-  const getText = useCallback(() => lines.join('\n'), [lines]);
+  const getText = useCallback(() => linesRef.current.join('\n'), []);
 
   const getCaretPosition = useCallback((): CaretPosition | null => {
     const sel = window.getSelection();
@@ -77,6 +179,46 @@ export const useContentEditable = ({
     return null;
   }, []);
 
+  const getSelectionOffsets = useCallback((): {
+    start: number;
+    end: number;
+    hasSelection: boolean;
+  } | null => {
+    const sel = window.getSelection();
+    if (!sel?.rangeCount || !containerRef.current) return null;
+
+    const range = sel.getRangeAt(0);
+    const lineEls = containerRef.current.querySelectorAll('[data-line]');
+    const currentLines = linesRef.current;
+
+    const findOffset = (node: Node, nodeOffset: number): number => {
+      for (let i = 0; i < lineEls.length; i++) {
+        if (lineEls[i].contains(node)) {
+          let flat = 0;
+          for (let j = 0; j < i; j++) {
+            flat += currentLines[j].length + 1;
+          }
+          return flat + Math.min(nodeOffset, currentLines[i]?.length ?? 0);
+        }
+      }
+      // Selection is on the root container (e.g. select-all)
+      if (node === containerRef.current) {
+        if (nodeOffset === 0) return 0;
+        return currentLines.join('\n').length;
+      }
+      return 0;
+    };
+
+    const start = findOffset(range.startContainer, range.startOffset);
+    const end = findOffset(range.endContainer, range.endOffset);
+
+    return {
+      start: Math.min(start, end),
+      end: Math.max(start, end),
+      hasSelection: !range.collapsed,
+    };
+  }, []);
+
   const setCaretPosition = useCallback((pos: CaretPosition) => {
     if (!containerRef.current) return;
 
@@ -107,36 +249,188 @@ export const useContentEditable = ({
     }
   }, []);
 
-  const getCursorOffset = useCallback((): number => {
-    const pos = getCaretPosition();
-    if (!pos) return 0;
+  useEffect(() => {
+    if (pendingCaretRef.current && containerRef.current) {
+      setCaretPosition(pendingCaretRef.current);
+      pendingCaretRef.current = null;
+    }
+  });
 
+  const flatOffsetFromCaret = useCallback((pos: CaretPosition): number => {
+    const currentLines = linesRef.current;
     let offset = 0;
     for (let i = 0; i < pos.line; i++) {
-      offset += lines[i].length + 1;
+      offset += currentLines[i].length + 1;
     }
     return offset + pos.offset;
-  }, [getCaretPosition, lines]);
+  }, []);
+
+  const caretFromFlatOffset = useCallback(
+    (flat: number, targetLines: string[]): CaretPosition => {
+      let rem = flat;
+      for (let i = 0; i < targetLines.length; i++) {
+        if (rem <= targetLines[i].length) {
+          return { line: i, offset: rem };
+        }
+        rem -= targetLines[i].length + 1;
+      }
+      return {
+        line: targetLines.length - 1,
+        offset: targetLines[targetLines.length - 1]?.length ?? 0,
+      };
+    },
+    []
+  );
+
+  const getCursorOffset = useCallback((): number => {
+    const pos = getCaretPosition();
+    if (!pos) return 0;
+    return flatOffsetFromCaret(pos);
+  }, [getCaretPosition, flatOffsetFromCaret]);
+
+  /**
+   * Applies a text mutation: computes new lines, sets pending caret, updates state.
+   */
+  const applyTextChange = useCallback(
+    (newText: string, caretOffset: number) => {
+      const newLines = splitLines(newText);
+      pendingCaretRef.current = caretFromFlatOffset(caretOffset, newLines);
+      setLines(newLines);
+      onChange?.(newText);
+    },
+    [caretFromFlatOffset, onChange]
+  );
 
   const handleInput = useCallback(() => {
+    if (pendingCaretRef.current !== null) return;
     if (disabled || !containerRef.current) return;
 
+    const caretPos = getCaretPosition();
     const newText = getTextFromContainer(containerRef.current);
     const newLines = splitLines(newText);
 
-    if (!isControlled) {
-      setLines(newLines);
-    }
+    pendingCaretRef.current = caretPos;
+    setLines(newLines);
     onChange?.(newText);
-  }, [disabled, isControlled, onChange]);
+  }, [disabled, onChange, getCaretPosition]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
       if (disabled) {
         e.preventDefault();
+        return;
+      }
+
+      // Don't intercept during IME composition (CJK input)
+      if (e.nativeEvent.isComposing) return;
+
+      // Block undo/redo — browser would mutate DOM out of sync with React
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+        e.preventDefault();
+        return;
+      }
+
+      const selInfo = getSelectionOffsets();
+      if (!selInfo) return;
+
+      const currentText = linesRef.current.join('\n');
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        const newText =
+          currentText.slice(0, selInfo.start) +
+          '\n' +
+          currentText.slice(selInfo.end);
+        applyTextChange(newText, selInfo.start + 1);
+        return;
+      }
+
+      if (e.key === 'Backspace') {
+        e.preventDefault();
+
+        if (selInfo.hasSelection) {
+          const newText =
+            currentText.slice(0, selInfo.start) +
+            currentText.slice(selInfo.end);
+          applyTextChange(newText, selInfo.start);
+        } else {
+          if (selInfo.start === 0) return;
+
+          let deleteFrom: number;
+          if (e.metaKey) {
+            // Cmd+Backspace: delete to start of line
+            deleteFrom = lineStart(currentText, selInfo.start);
+          } else if (e.altKey) {
+            // Option+Backspace: delete previous word
+            deleteFrom = prevWordBoundary(currentText, selInfo.start);
+          } else {
+            // Regular backspace: delete one grapheme
+            deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);
+          }
+
+          const newText =
+            currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);
+          applyTextChange(newText, deleteFrom);
+        }
+        return;
+      }
+
+      if (e.key === 'Delete') {
+        e.preventDefault();
+
+        if (selInfo.hasSelection) {
+          const newText =
+            currentText.slice(0, selInfo.start) +
+            currentText.slice(selInfo.end);
+          applyTextChange(newText, selInfo.start);
+        } else {
+          if (selInfo.start >= currentText.length) return;
+
+          let deleteTo: number;
+          if (e.metaKey) {
+            // Cmd+Delete: delete to end of line
+            deleteTo = lineEnd(currentText, selInfo.start);
+          } else if (e.altKey) {
+            // Option+Delete: delete next word
+            deleteTo = nextWordBoundary(currentText, selInfo.start);
+          } else {
+            // Regular delete: delete one grapheme
+            deleteTo = nextGraphemeBoundary(currentText, selInfo.start);
+          }
+
+          const newText =
+            currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);
+          applyTextChange(newText, selInfo.start);
+        }
+        return;
+      }
+    },
+    [disabled, getSelectionOffsets, applyTextChange]
+  );
+
+  const handleCut = useCallback(
+    (e: React.ClipboardEvent<HTMLDivElement>) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
       }
+
+      e.preventDefault();
+      const selInfo = getSelectionOffsets();
+      if (!selInfo || !selInfo.hasSelection) return;
+
+      const currentText = linesRef.current.join('\n');
+      const selectedText = currentText.slice(selInfo.start, selInfo.end);
+
+      // Write selected text to clipboard
+      e.clipboardData.setData('text/plain', selectedText);
+
+      // Delete the selected text
+      const newText =
+        currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);
+      applyTextChange(newText, selInfo.start);
     },
-    [disabled]
+    [disabled, getSelectionOffsets, applyTextChange]
   );
 
   const handlePaste = useCallback(
@@ -147,33 +441,131 @@ export const useContentEditable = ({
       }
 
       e.preventDefault();
-      const text = e.clipboardData.getData('text/plain');
+      const pastedText = e.clipboardData.getData('text/plain');
+      if (!pastedText) return;
+
+      const selInfo = getSelectionOffsets();
+      if (!selInfo) return;
+
+      const currentText = linesRef.current.join('\n');
+      const newText =
+        currentText.slice(0, selInfo.start) +
+        pastedText +
+        currentText.slice(selInfo.end);
+      applyTextChange(newText, selInfo.start + pastedText.length);
+    },
+    [disabled, getSelectionOffsets, applyTextChange]
+  );
 
-      const sel = window.getSelection();
-      if (!sel?.rangeCount) return;
+  const handleBeforeInput = useCallback(
+    (e: React.FormEvent<HTMLDivElement>) => {
+      if (disabled) return;
 
-      const range = sel.getRangeAt(0);
-      range.deleteContents();
-      range.insertNode(document.createTextNode(text));
-      range.collapse(false);
-      sel.removeAllRanges();
-      sel.addRange(range);
+      const inputEvent = e.nativeEvent as InputEvent;
+
+      // Don't intercept during IME composition (CJK input)
+      if (inputEvent.isComposing) return;
+
+      const inputType = inputEvent.inputType;
+
+      // Skip types handled by handleKeyDown (when keydown fires)
+      if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {
+        return;
+      }
+
+      // Handle deletions as fallback for mobile keyboards that don't fire keydown
+      if (
+        inputType === 'deleteContentBackward' ||
+        inputType === 'deleteContentForward'
+      ) {
+        e.preventDefault();
+        const selInfo = getSelectionOffsets();
+        if (!selInfo) return;
+
+        const currentText = linesRef.current.join('\n');
+
+        if (selInfo.hasSelection) {
+          const newText =
+            currentText.slice(0, selInfo.start) +
+            currentText.slice(selInfo.end);
+          applyTextChange(newText, selInfo.start);
+        } else if (inputType === 'deleteContentBackward') {
+          if (selInfo.start === 0) return;
+          const deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);
+          const newText =
+            currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);
+          applyTextChange(newText, deleteFrom);
+        } else {
+          if (selInfo.start >= currentText.length) return;
+          const deleteTo = nextGraphemeBoundary(currentText, selInfo.start);
+          const newText =
+            currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);
+          applyTextChange(newText, selInfo.start);
+        }
+        return;
+      }
+
+      // Handle spell-check replacements
+      if (inputType === 'insertReplacementText') {
+        e.preventDefault();
+        const selInfo = getSelectionOffsets();
+        if (!selInfo) return;
+
+        const currentText = linesRef.current.join('\n');
+        const replacement =
+          inputEvent.data ??
+          inputEvent.dataTransfer?.getData('text/plain') ??
+          '';
+        const newText =
+          currentText.slice(0, selInfo.start) +
+          replacement +
+          currentText.slice(selInfo.end);
+        applyTextChange(newText, selInfo.start + replacement.length);
+        return;
+      }
+
+      if (inputType === 'insertText' && inputEvent.data) {
+        e.preventDefault();
 
-      handleInput();
+        const selInfo = getSelectionOffsets();
+        if (!selInfo) return;
+
+        const currentText = linesRef.current.join('\n');
+        const inserted = inputEvent.data;
+        const newText =
+          currentText.slice(0, selInfo.start) +
+          inserted +
+          currentText.slice(selInfo.end);
+        applyTextChange(newText, selInfo.start + inserted.length);
+      }
     },
-    [disabled, handleInput]
+    [disabled, getSelectionOffsets, applyTextChange]
   );
 
+  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    // Block drag-and-drop to prevent uncontrolled DOM mutations
+    e.preventDefault();
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+  }, []);
+
   return {
     lines,
     containerRef,
     getText,
     handleInput,
+    handleBeforeInput,
     handleKeyDown,
+    handleCut,
     handlePaste,
+    handleDrop,
+    handleDragOver,
     getCaretPosition,
     setCaretPosition,
     getCursorOffset,
+    caretFromFlatOffset,
   };
 };
 
@@ -269,10 +661,15 @@ export const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({
     containerRef,
     getText,
     handleInput,
+    handleBeforeInput,
     handleKeyDown,
+    handleCut,
     handlePaste,
+    handleDrop,
+    handleDragOver,
     getCursorOffset,
     setCaretPosition,
+    caretFromFlatOffset,
   } = useContentEditable({ value, defaultValue, onChange, disabled });
 
   const elRef = useRef<HTMLDivElement | null>(null);
@@ -292,18 +689,7 @@ export const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({
     focus: () => elRef.current?.focus(),
     getCursorOffset,
     setCursorAtOffset: (offset: number) => {
-      let rem = offset;
-      for (let i = 0; i < lines.length; i++) {
-        if (rem <= lines[i].length) {
-          setCaretPosition({ line: i, offset: rem });
-          return;
-        }
-        rem -= lines[i].length + 1;
-      }
-      setCaretPosition({
-        line: lines.length - 1,
-        offset: lines[lines.length - 1].length,
-      });
+      setCaretPosition(caretFromFlatOffset(offset, lines));
     },
   }));
 
@@ -328,7 +714,7 @@ export const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({
     <div className="relative w-full">
       {isEmpty && placeholder && (
         <div
-          className="pointer-events-none absolute inset-0 select-none px-3 py-3 text-neutral-400"
+          className="pointer-events-none absolute inset-0 select-none px-2 py-3 text-base text-neutral-400 leading-[1.5rem] md:py-2 md:text-sm"
           aria-hidden="true"
         >
           {placeholder}
@@ -336,6 +722,7 @@ export const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({
       )}
 
       <div
+        {...rest}
         ref={setRef}
         role="textbox"
         aria-multiline="true"
@@ -347,8 +734,12 @@ export const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({
         suppressContentEditableWarning
         dir={dir}
         onInput={handleInput}
+        onBeforeInput={handleBeforeInput}
         onKeyDown={handleKeyDown}
+        onCut={handleCut}
         onPaste={handlePaste}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
         onClick={onClick}
         data-testid={rest['data-testid']}
         className={cn(
@@ -362,7 +753,6 @@ export const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({
           autoSize && 'overflow-y-auto',
           className
         )}
-        {...rest}
       >
         {lines.map((text, i) => (
           <Line
diff --git a/packages/@intlayer/design-system/src/components/TextArea/contentEditable.test.tsx b/packages/@intlayer/design-system/src/components/TextArea/contentEditable.test.tsx
index 5a9cc20a4e..86dcfe2e3d 100644
--- a/packages/@intlayer/design-system/src/components/TextArea/contentEditable.test.tsx
+++ b/packages/@intlayer/design-system/src/components/TextArea/contentEditable.test.tsx
@@ -78,3 +78,107 @@ describe('ContentEditableTextArea', () => {
     expect(screen.getByText('world')).toBeDefined();
   });
 });
+
+describe('ContentEditableTextArea input handling', () => {
+  test('controlled value updates reflected in DOM', () => {
+    const { rerender } = render(<ContentEditableTextArea value="initial" />);
+    const el = screen.getByRole('textbox');
+    expect(el.textContent).toContain('initial');
+    rerender(<ContentEditableTextArea value="updated" />);
+    expect(el.textContent).toContain('updated');
+  });
+
+  test('multiline controlled value renders correct number of lines', () => {
+    render(<ContentEditableTextArea value={'line1\nline2\nline3'} />);
+    const el = screen.getByRole('textbox');
+    expect(el.querySelectorAll('[data-line]').length).toBe(3);
+  });
+
+  test('empty value shows placeholder', () => {
+    render(<ContentEditableTextArea value="" placeholder="Enter text..." />);
+    expect(screen.getByText('Enter text...')).toBeDefined();
+  });
+
+  test('non-empty value hides placeholder', () => {
+    render(
+      <ContentEditableTextArea value="hello" placeholder="Enter text..." />
+    );
+    expect(screen.queryByText('Enter text...')).toBeNull();
+  });
+
+  test('disabled prevents contentEditable', () => {
+    render(<ContentEditableTextArea value="read only" disabled />);
+    const el = screen.getByRole('textbox');
+    expect(el.getAttribute('contenteditable')).toBe('false');
+    expect(el.getAttribute('tabindex')).toBe('-1');
+  });
+
+  test('aria-disabled is set when disabled', () => {
+    render(<ContentEditableTextArea disabled />);
+    expect(screen.getByRole('textbox').getAttribute('aria-disabled')).toBe(
+      'true'
+    );
+  });
+
+  test('ghost text sets aria-autocomplete=inline', () => {
+    render(
+      <ContentEditableTextArea
+        value="test"
+        ghostText="suggestion"
+        ghostLine={0}
+        ghostOffset={4}
+      />
+    );
+    expect(screen.getByRole('textbox').getAttribute('aria-autocomplete')).toBe(
+      'inline'
+    );
+  });
+
+  test('no ghost text means no aria-autocomplete', () => {
+    render(<ContentEditableTextArea value="test" />);
+    expect(
+      screen.getByRole('textbox').getAttribute('aria-autocomplete')
+    ).toBeNull();
+  });
+
+  test('dir prop is passed to element', () => {
+    render(<ContentEditableTextArea value="test" dir="rtl" data-testid="ce" />);
+    expect(screen.getByTestId('ce').getAttribute('dir')).toBe('rtl');
+  });
+});
+
+describe('useContentEditable utilities', () => {
+  test('single line text gives correct lines', () => {
+    const { result } = renderHook(() =>
+      useContentEditable({ value: 'no newlines here' })
+    );
+    expect(result.current.lines).toEqual(['no newlines here']);
+  });
+
+  test('trailing newline creates empty last line', () => {
+    const { result } = renderHook(() =>
+      useContentEditable({ value: 'hello\n' })
+    );
+    expect(result.current.lines).toEqual(['hello', '']);
+  });
+
+  test('multiple consecutive newlines preserved', () => {
+    const { result } = renderHook(() =>
+      useContentEditable({ value: 'a\n\n\nb' })
+    );
+    expect(result.current.lines).toEqual(['a', '', '', 'b']);
+  });
+
+  test('defaultValue is used when value is undefined', () => {
+    const { result } = renderHook(() =>
+      useContentEditable({ defaultValue: 'fallback' })
+    );
+    expect(result.current.getText()).toBe('fallback');
+  });
+
+  test('empty options gives single empty line', () => {
+    const { result } = renderHook(() => useContentEditable({}));
+    expect(result.current.lines).toEqual(['']);
+    expect(result.current.getText()).toBe('');
+  });
+});

From c52266e4ff51bf9f28f9c96b634dd0aa0316f5d6 Mon Sep 17 00:00:00 2001
From: vimzh <vimzh.dev@gmail.com>
Date: Mon, 16 Mar 2026 12:27:27 +0530
Subject: [PATCH 3/3] refactor(design-system): remove useCallback/memo and
 displayName per review

React compiler handles memoization, so useCallback and memo wrappers
are unnecessary. Also removes Line.displayName (React 18 pattern).
---
 .../TextArea/AutocompleteTextArea.tsx         |   6 +-
 .../TextArea/ContentEditableTextArea.tsx      | 494 ++++++++----------
 2 files changed, 233 insertions(+), 267 deletions(-)

diff --git a/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx b/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx
index 8f458ccabf..b7f7421faa 100644
--- a/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx
+++ b/packages/@intlayer/design-system/src/components/TextArea/AutocompleteTextArea.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type FC, useCallback, useEffect, useRef, useState } from 'react';
+import { type FC, useEffect, useRef, useState } from 'react';
 import type { AutoSizedTextAreaProps } from './AutoSizeTextArea';
 import {
   ContentEditableTextArea,
@@ -41,7 +41,7 @@ export const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({
     setText(String(props.value ?? props.defaultValue ?? ''));
   }, [props.value, props.defaultValue]);
 
-  const acceptSuggestion = useCallback(() => {
+  const acceptSuggestion = () => {
     const active = suggestionProp ?? suggestion;
     if (!active) return;
 
@@ -54,7 +54,7 @@ export const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({
       editorRef.current?.focus();
       editorRef.current?.setCursorAtOffset(cursor + active.length);
     }, 0);
-  }, [text, suggestion, suggestionProp]);
+  };
 
   const activeGhost = isActive
     ? (suggestionProp ?? (suggestion || undefined))
diff --git a/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx b/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx
index 04fe888c1c..09898b79cd 100644
--- a/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx
+++ b/packages/@intlayer/design-system/src/components/TextArea/ContentEditableTextArea.tsx
@@ -5,8 +5,6 @@ import type { VariantProps } from 'class-variance-authority';
 import {
   type FC,
   type HTMLAttributes,
-  memo,
-  useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -162,9 +160,9 @@ export const useContentEditable = ({
     }
   }, [value, isControlled]);
 
-  const getText = useCallback(() => linesRef.current.join('\n'), []);
+  const getText = () => linesRef.current.join('\n');
 
-  const getCaretPosition = useCallback((): CaretPosition | null => {
+  const getCaretPosition = (): CaretPosition | null => {
     const sel = window.getSelection();
     if (!sel?.rangeCount || !containerRef.current) return null;
 
@@ -177,9 +175,9 @@ export const useContentEditable = ({
       }
     }
     return null;
-  }, []);
+  };
 
-  const getSelectionOffsets = useCallback((): {
+  const getSelectionOffsets = (): {
     start: number;
     end: number;
     hasSelection: boolean;
@@ -217,9 +215,9 @@ export const useContentEditable = ({
       end: Math.max(start, end),
       hasSelection: !range.collapsed,
     };
-  }, []);
+  };
 
-  const setCaretPosition = useCallback((pos: CaretPosition) => {
+  const setCaretPosition = (pos: CaretPosition) => {
     if (!containerRef.current) return;
 
     const lineEls = containerRef.current.querySelectorAll('[data-line]');
@@ -247,7 +245,7 @@ export const useContentEditable = ({
       sel.removeAllRanges();
       sel.addRange(range);
     }
-  }, []);
+  };
 
   useEffect(() => {
     if (pendingCaretRef.current && containerRef.current) {
@@ -256,52 +254,49 @@ export const useContentEditable = ({
     }
   });
 
-  const flatOffsetFromCaret = useCallback((pos: CaretPosition): number => {
+  const flatOffsetFromCaret = (pos: CaretPosition): number => {
     const currentLines = linesRef.current;
     let offset = 0;
     for (let i = 0; i < pos.line; i++) {
       offset += currentLines[i].length + 1;
     }
     return offset + pos.offset;
-  }, []);
-
-  const caretFromFlatOffset = useCallback(
-    (flat: number, targetLines: string[]): CaretPosition => {
-      let rem = flat;
-      for (let i = 0; i < targetLines.length; i++) {
-        if (rem <= targetLines[i].length) {
-          return { line: i, offset: rem };
-        }
-        rem -= targetLines[i].length + 1;
+  };
+
+  const caretFromFlatOffset = (
+    flat: number,
+    targetLines: string[]
+  ): CaretPosition => {
+    let rem = flat;
+    for (let i = 0; i < targetLines.length; i++) {
+      if (rem <= targetLines[i].length) {
+        return { line: i, offset: rem };
       }
-      return {
-        line: targetLines.length - 1,
-        offset: targetLines[targetLines.length - 1]?.length ?? 0,
-      };
-    },
-    []
-  );
+      rem -= targetLines[i].length + 1;
+    }
+    return {
+      line: targetLines.length - 1,
+      offset: targetLines[targetLines.length - 1]?.length ?? 0,
+    };
+  };
 
-  const getCursorOffset = useCallback((): number => {
+  const getCursorOffset = (): number => {
     const pos = getCaretPosition();
     if (!pos) return 0;
     return flatOffsetFromCaret(pos);
-  }, [getCaretPosition, flatOffsetFromCaret]);
+  };
 
   /**
    * Applies a text mutation: computes new lines, sets pending caret, updates state.
    */
-  const applyTextChange = useCallback(
-    (newText: string, caretOffset: number) => {
-      const newLines = splitLines(newText);
-      pendingCaretRef.current = caretFromFlatOffset(caretOffset, newLines);
-      setLines(newLines);
-      onChange?.(newText);
-    },
-    [caretFromFlatOffset, onChange]
-  );
+  const applyTextChange = (newText: string, caretOffset: number) => {
+    const newLines = splitLines(newText);
+    pendingCaretRef.current = caretFromFlatOffset(caretOffset, newLines);
+    setLines(newLines);
+    onChange?.(newText);
+  };
 
-  const handleInput = useCallback(() => {
+  const handleInput = () => {
     if (pendingCaretRef.current !== null) return;
     if (disabled || !containerRef.current) return;
 
@@ -312,244 +307,227 @@ export const useContentEditable = ({
     pendingCaretRef.current = caretPos;
     setLines(newLines);
     onChange?.(newText);
-  }, [disabled, onChange, getCaretPosition]);
+  };
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
-      if (disabled) {
-        e.preventDefault();
-        return;
-      }
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
 
-      // Don't intercept during IME composition (CJK input)
-      if (e.nativeEvent.isComposing) return;
+    // Don't intercept during IME composition (CJK input)
+    if (e.nativeEvent.isComposing) return;
 
-      // Block undo/redo — browser would mutate DOM out of sync with React
-      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
-        e.preventDefault();
-        return;
-      }
+    // Block undo/redo — browser would mutate DOM out of sync with React
+    if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+      e.preventDefault();
+      return;
+    }
 
-      const selInfo = getSelectionOffsets();
-      if (!selInfo) return;
+    const selInfo = getSelectionOffsets();
+    if (!selInfo) return;
 
-      const currentText = linesRef.current.join('\n');
+    const currentText = linesRef.current.join('\n');
 
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        const newText =
-          currentText.slice(0, selInfo.start) +
-          '\n' +
-          currentText.slice(selInfo.end);
-        applyTextChange(newText, selInfo.start + 1);
-        return;
-      }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const newText =
+        currentText.slice(0, selInfo.start) +
+        '\n' +
+        currentText.slice(selInfo.end);
+      applyTextChange(newText, selInfo.start + 1);
+      return;
+    }
 
-      if (e.key === 'Backspace') {
-        e.preventDefault();
+    if (e.key === 'Backspace') {
+      e.preventDefault();
 
-        if (selInfo.hasSelection) {
-          const newText =
-            currentText.slice(0, selInfo.start) +
-            currentText.slice(selInfo.end);
-          applyTextChange(newText, selInfo.start);
+      if (selInfo.hasSelection) {
+        const newText =
+          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);
+        applyTextChange(newText, selInfo.start);
+      } else {
+        if (selInfo.start === 0) return;
+
+        let deleteFrom: number;
+        if (e.metaKey) {
+          // Cmd+Backspace: delete to start of line
+          deleteFrom = lineStart(currentText, selInfo.start);
+        } else if (e.altKey) {
+          // Option+Backspace: delete previous word
+          deleteFrom = prevWordBoundary(currentText, selInfo.start);
         } else {
-          if (selInfo.start === 0) return;
-
-          let deleteFrom: number;
-          if (e.metaKey) {
-            // Cmd+Backspace: delete to start of line
-            deleteFrom = lineStart(currentText, selInfo.start);
-          } else if (e.altKey) {
-            // Option+Backspace: delete previous word
-            deleteFrom = prevWordBoundary(currentText, selInfo.start);
-          } else {
-            // Regular backspace: delete one grapheme
-            deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);
-          }
-
-          const newText =
-            currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);
-          applyTextChange(newText, deleteFrom);
+          // Regular backspace: delete one grapheme
+          deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);
         }
-        return;
+
+        const newText =
+          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);
+        applyTextChange(newText, deleteFrom);
       }
+      return;
+    }
 
-      if (e.key === 'Delete') {
-        e.preventDefault();
+    if (e.key === 'Delete') {
+      e.preventDefault();
 
-        if (selInfo.hasSelection) {
-          const newText =
-            currentText.slice(0, selInfo.start) +
-            currentText.slice(selInfo.end);
-          applyTextChange(newText, selInfo.start);
+      if (selInfo.hasSelection) {
+        const newText =
+          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);
+        applyTextChange(newText, selInfo.start);
+      } else {
+        if (selInfo.start >= currentText.length) return;
+
+        let deleteTo: number;
+        if (e.metaKey) {
+          // Cmd+Delete: delete to end of line
+          deleteTo = lineEnd(currentText, selInfo.start);
+        } else if (e.altKey) {
+          // Option+Delete: delete next word
+          deleteTo = nextWordBoundary(currentText, selInfo.start);
         } else {
-          if (selInfo.start >= currentText.length) return;
-
-          let deleteTo: number;
-          if (e.metaKey) {
-            // Cmd+Delete: delete to end of line
-            deleteTo = lineEnd(currentText, selInfo.start);
-          } else if (e.altKey) {
-            // Option+Delete: delete next word
-            deleteTo = nextWordBoundary(currentText, selInfo.start);
-          } else {
-            // Regular delete: delete one grapheme
-            deleteTo = nextGraphemeBoundary(currentText, selInfo.start);
-          }
-
-          const newText =
-            currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);
-          applyTextChange(newText, selInfo.start);
+          // Regular delete: delete one grapheme
+          deleteTo = nextGraphemeBoundary(currentText, selInfo.start);
         }
-        return;
-      }
-    },
-    [disabled, getSelectionOffsets, applyTextChange]
-  );
 
-  const handleCut = useCallback(
-    (e: React.ClipboardEvent<HTMLDivElement>) => {
-      if (disabled) {
-        e.preventDefault();
-        return;
+        const newText =
+          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);
+        applyTextChange(newText, selInfo.start);
       }
+      return;
+    }
+  };
 
+  const handleCut = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    if (disabled) {
       e.preventDefault();
-      const selInfo = getSelectionOffsets();
-      if (!selInfo || !selInfo.hasSelection) return;
+      return;
+    }
 
-      const currentText = linesRef.current.join('\n');
-      const selectedText = currentText.slice(selInfo.start, selInfo.end);
+    e.preventDefault();
+    const selInfo = getSelectionOffsets();
+    if (!selInfo || !selInfo.hasSelection) return;
 
-      // Write selected text to clipboard
-      e.clipboardData.setData('text/plain', selectedText);
+    const currentText = linesRef.current.join('\n');
+    const selectedText = currentText.slice(selInfo.start, selInfo.end);
 
-      // Delete the selected text
-      const newText =
-        currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);
-      applyTextChange(newText, selInfo.start);
-    },
-    [disabled, getSelectionOffsets, applyTextChange]
-  );
+    // Write selected text to clipboard
+    e.clipboardData.setData('text/plain', selectedText);
 
-  const handlePaste = useCallback(
-    (e: React.ClipboardEvent<HTMLDivElement>) => {
-      if (disabled) {
-        e.preventDefault();
-        return;
-      }
+    // Delete the selected text
+    const newText =
+      currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);
+    applyTextChange(newText, selInfo.start);
+  };
 
+  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    if (disabled) {
       e.preventDefault();
-      const pastedText = e.clipboardData.getData('text/plain');
-      if (!pastedText) return;
+      return;
+    }
 
-      const selInfo = getSelectionOffsets();
-      if (!selInfo) return;
+    e.preventDefault();
+    const pastedText = e.clipboardData.getData('text/plain');
+    if (!pastedText) return;
+
+    const selInfo = getSelectionOffsets();
+    if (!selInfo) return;
+
+    const currentText = linesRef.current.join('\n');
+    const newText =
+      currentText.slice(0, selInfo.start) +
+      pastedText +
+      currentText.slice(selInfo.end);
+    applyTextChange(newText, selInfo.start + pastedText.length);
+  };
 
-      const currentText = linesRef.current.join('\n');
-      const newText =
-        currentText.slice(0, selInfo.start) +
-        pastedText +
-        currentText.slice(selInfo.end);
-      applyTextChange(newText, selInfo.start + pastedText.length);
-    },
-    [disabled, getSelectionOffsets, applyTextChange]
-  );
+  const handleBeforeInput = (e: React.FormEvent<HTMLDivElement>) => {
+    if (disabled) return;
 
-  const handleBeforeInput = useCallback(
-    (e: React.FormEvent<HTMLDivElement>) => {
-      if (disabled) return;
+    const inputEvent = e.nativeEvent as InputEvent;
 
-      const inputEvent = e.nativeEvent as InputEvent;
+    // Don't intercept during IME composition (CJK input)
+    if (inputEvent.isComposing) return;
 
-      // Don't intercept during IME composition (CJK input)
-      if (inputEvent.isComposing) return;
+    const inputType = inputEvent.inputType;
 
-      const inputType = inputEvent.inputType;
+    // Skip types handled by handleKeyDown (when keydown fires)
+    if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {
+      return;
+    }
 
-      // Skip types handled by handleKeyDown (when keydown fires)
-      if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {
-        return;
-      }
+    // Handle deletions as fallback for mobile keyboards that don't fire keydown
+    if (
+      inputType === 'deleteContentBackward' ||
+      inputType === 'deleteContentForward'
+    ) {
+      e.preventDefault();
+      const selInfo = getSelectionOffsets();
+      if (!selInfo) return;
 
-      // Handle deletions as fallback for mobile keyboards that don't fire keydown
-      if (
-        inputType === 'deleteContentBackward' ||
-        inputType === 'deleteContentForward'
-      ) {
-        e.preventDefault();
-        const selInfo = getSelectionOffsets();
-        if (!selInfo) return;
-
-        const currentText = linesRef.current.join('\n');
-
-        if (selInfo.hasSelection) {
-          const newText =
-            currentText.slice(0, selInfo.start) +
-            currentText.slice(selInfo.end);
-          applyTextChange(newText, selInfo.start);
-        } else if (inputType === 'deleteContentBackward') {
-          if (selInfo.start === 0) return;
-          const deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);
-          const newText =
-            currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);
-          applyTextChange(newText, deleteFrom);
-        } else {
-          if (selInfo.start >= currentText.length) return;
-          const deleteTo = nextGraphemeBoundary(currentText, selInfo.start);
-          const newText =
-            currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);
-          applyTextChange(newText, selInfo.start);
-        }
-        return;
-      }
+      const currentText = linesRef.current.join('\n');
 
-      // Handle spell-check replacements
-      if (inputType === 'insertReplacementText') {
-        e.preventDefault();
-        const selInfo = getSelectionOffsets();
-        if (!selInfo) return;
-
-        const currentText = linesRef.current.join('\n');
-        const replacement =
-          inputEvent.data ??
-          inputEvent.dataTransfer?.getData('text/plain') ??
-          '';
+      if (selInfo.hasSelection) {
         const newText =
-          currentText.slice(0, selInfo.start) +
-          replacement +
-          currentText.slice(selInfo.end);
-        applyTextChange(newText, selInfo.start + replacement.length);
-        return;
+          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);
+        applyTextChange(newText, selInfo.start);
+      } else if (inputType === 'deleteContentBackward') {
+        if (selInfo.start === 0) return;
+        const deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);
+        const newText =
+          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);
+        applyTextChange(newText, deleteFrom);
+      } else {
+        if (selInfo.start >= currentText.length) return;
+        const deleteTo = nextGraphemeBoundary(currentText, selInfo.start);
+        const newText =
+          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);
+        applyTextChange(newText, selInfo.start);
       }
+      return;
+    }
 
-      if (inputType === 'insertText' && inputEvent.data) {
-        e.preventDefault();
+    // Handle spell-check replacements
+    if (inputType === 'insertReplacementText') {
+      e.preventDefault();
+      const selInfo = getSelectionOffsets();
+      if (!selInfo) return;
 
-        const selInfo = getSelectionOffsets();
-        if (!selInfo) return;
+      const currentText = linesRef.current.join('\n');
+      const replacement =
+        inputEvent.data ?? inputEvent.dataTransfer?.getData('text/plain') ?? '';
+      const newText =
+        currentText.slice(0, selInfo.start) +
+        replacement +
+        currentText.slice(selInfo.end);
+      applyTextChange(newText, selInfo.start + replacement.length);
+      return;
+    }
 
-        const currentText = linesRef.current.join('\n');
-        const inserted = inputEvent.data;
-        const newText =
-          currentText.slice(0, selInfo.start) +
-          inserted +
-          currentText.slice(selInfo.end);
-        applyTextChange(newText, selInfo.start + inserted.length);
-      }
-    },
-    [disabled, getSelectionOffsets, applyTextChange]
-  );
+    if (inputType === 'insertText' && inputEvent.data) {
+      e.preventDefault();
+
+      const selInfo = getSelectionOffsets();
+      if (!selInfo) return;
 
-  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+      const currentText = linesRef.current.join('\n');
+      const inserted = inputEvent.data;
+      const newText =
+        currentText.slice(0, selInfo.start) +
+        inserted +
+        currentText.slice(selInfo.end);
+      applyTextChange(newText, selInfo.start + inserted.length);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
     // Block drag-and-drop to prevent uncontrolled DOM mutations
     e.preventDefault();
-  }, []);
+  };
 
-  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
-  }, []);
+  };
 
   return {
     lines,
@@ -576,31 +554,22 @@ type LineProps = {
   ghostText?: string;
 };
 
-const Line: FC<LineProps> = memo(
-  ({ index, text, isLast, ghostText }) => (
-    <span data-line={index} className="block min-h-[1.5rem]">
-      <span data-editable>{text || '\u200B'}</span>
-      {ghostText && (
-        <span
-          data-ghost
-          className="pointer-events-none select-none text-neutral"
-          aria-hidden="true"
-        >
-          {ghostText}
-        </span>
-      )}
-      {!isLast && <br />}
-    </span>
-  ),
-  (prev, next) =>
-    prev.text === next.text &&
-    prev.ghostText === next.ghostText &&
-    prev.index === next.index &&
-    prev.isLast === next.isLast
+const Line: FC<LineProps> = ({ index, text, isLast, ghostText }) => (
+  <span data-line={index} className="block min-h-[1.5rem]">
+    <span data-editable>{text || '\u200B'}</span>
+    {ghostText && (
+      <span
+        data-ghost
+        className="pointer-events-none select-none text-neutral"
+        aria-hidden="true"
+      >
+        {ghostText}
+      </span>
+    )}
+    {!isLast && <br />}
+  </span>
 );
 
-Line.displayName = 'Line';
-
 export type ContentEditableTextAreaHandle = {
   getContainer: () => HTMLDivElement | null;
   getText: () => string;
@@ -674,14 +643,11 @@ export const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({
 
   const elRef = useRef<HTMLDivElement | null>(null);
 
-  const setRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      elRef.current = el;
-      (containerRef as React.MutableRefObject<HTMLDivElement | null>).current =
-        el;
-    },
-    [containerRef]
-  );
+  const setRef = (el: HTMLDivElement | null) => {
+    elRef.current = el;
+    (containerRef as React.MutableRefObject<HTMLDivElement | null>).current =
+      el;
+  };
 
   useImperativeHandle(ref, () => ({
     getContainer: () => elRef.current,