@widgetic/editor 3.11.4 → 4.0.2

package/dist/components/ic/TextAreaInputController.svelte

@@ -0,0 +1,1932 @@
+<!-- 
+  TextAreaInputController
+  
+  A rich text editor component with advanced formatting capabilities:
+  - Text styling (bold, italic, underline)
+  - Headings and lists
+  - Color picker integration
+  - Link insertion
+  - Dynamic height adjustment
+  
+  Key Features:
+  - Maintains editor state across format changes
+  - Handles complex selection scenarios
+  - Manages toolbar state based on text formatting
+  - Implements smooth height transitions
+  - Preserves cursor position during operations
+  
+  Edge Cases:
+  - Handles empty selections gracefully
+  - Manages focus state during dropdown interactions
+  - Prevents recursive updates during state changes
+  - Maintains formatting consistency across operations
+-->
+
+<script lang="ts">
+  // Svelte imports
+  import { onMount, onDestroy } from 'svelte';
+  import { writable } from 'svelte/store';
+  import type { ComponentEvents } from 'svelte';
+
+  // Component config
+  import type { InputControllerConfig } from './index';
+
+  // Import Shadcn UI components
+  import { Button, ToggleGroup, Popover, Command } from '@widgetic/design-system/components';
+  
+  // Import Lucide Icons
+  import { 
+    IconBrush,
+    IconBold,
+    IconItalic,
+    IconUnderline,
+    IconLink,
+    ChevronDown,
+    X,
+    IconPilcrow,
+    IconList,
+    IconListNumbers,
+    IconListCheck
+  } from '@widgetic/design-system/icons';
+
+
+  // Import Shad Editor
+  import { ShadEditor, type TipTapEditor, type TipTapEditorLevel } from '@widgetic/design-system/shad-editor';
+
+  // Add local ColorPickerInputController import
+  import ColorPickerInputController from './ColorPickerInputController.svelte';
+
+  // Add this constant for the decoration type
+  const TRANSITION_DURATION = 250;
+
+  /**
+   * Component props
+   */
+  let { 
+    class: className = '',
+    label,
+    value = $bindable(''),
+    onChange,
+    config = {},
+    description = undefined,
+    onFocus = () => {},
+    onClose = undefined
+  } = $props<{
+    class: string;
+    label: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    config?: InputControllerConfig;
+    description?: string;
+    onFocus?: () => void;
+    onClose?: () => void;
+  }>();
+
+  // Use config values with fallbacks
+  const textColor = config.textColor || '#1a1a1a';
+
+  /**
+   * State Variables
+   */  
+  let isInitialMount = $state(false);  // Tracks initial component mounting to prevent unnecessary updates
+  let editorInstance: TipTapEditor | null = null;          // Reference to TipTap editor instance
+  let textStyleDropdownOpen = $state(false); // Controls visibility of text style dropdown
+  let listStyleDropdownOpen = $state(false);
+  /**
+   * Format Tracking
+   * Maintains active format states for toolbar UI:
+   * - Prevents invalid format combinations
+   * - Updates reactively with selection changes
+   * - Syncs with editor commands
+   */
+  // Add type definition for formats
+  type FormatType = 'bold' | 'italic' | 'underline' | 'link';
+  type ActiveFormats = Record<FormatType, boolean>;
+  type FormatMapping = Record<FormatType, { value: string; icon: any }>;
+
+  let activeFormats = $state<ActiveFormats>({
+    bold: false,
+    italic: false,
+    underline: false,
+    link: false
+  });
+
+  const formatMapping: FormatMapping = {
+    bold: { value: 'b', icon: IconBold },
+    italic: { value: 'i', icon: IconItalic },
+    underline: { value: 'u', icon: IconUnderline },
+    link: { value: 'link', icon: IconLink }
+  };
+
+  let currentTextStyle = $state('text'); // Track current text style
+
+  let showColorPicker = $state(false);
+  let currentColor = $state(textColor);
+  let selectedTextRange: { from: number, to: number } | null = $state(null);
+
+  const textOptions = [
+    { value: 'text', label: 'Paragraph', icon: IconPilcrow },
+    { value: 'h1', label: 'H1' },
+    { value: 'h2', label: 'H2' },
+    { value: 'h3', label: 'H3' }
+  ];
+
+  const listOptions = [
+    { value: 'bulletList', label: 'Bullet List', icon: IconList },
+    { value: 'orderedList', label: 'Numbered List', icon: IconListNumbers },
+    { value: 'checkList', label: 'Check List', icon: IconListCheck }
+  ];
+
+  const content = writable(value);
+
+  // Create a store for managing dropdowns
+  const openDropdowns = writable<Set<string>>(new Set());
+  
+  function toggleDropdown(id: string) {
+    openDropdowns.update(set => {
+      if (set.has(id)) {
+        set.delete(id);
+      } else {
+        set.add(id);
+      }
+      return set;
+    });
+  }
+
+  // Add these variables to track focus state
+  let editorHasFocus = $state(false);
+  let toolbarRef: HTMLDivElement;
+
+
+
+  // Update to use $derived for reactive statement
+  const editorStyle = $derived(`
+    --editor-min-height: auto;
+    --editor-max-height: none;
+    --transition-duration: 0ms;
+    --transition-timing: ease-out;
+  `);
+
+  // Add this with other state declarations
+  let editorClass = $derived(`border-none overflow-auto editor-height ${''}`);
+
+  // Add state to track if any dropdown is open
+  let isDropdownOpen = $state(false);
+
+  /**
+   * Editor Mount Handler
+   * 
+   * Initializes the editor instance and sets up event listeners:
+   * 1. Sets initial content if provided
+   * 2. Configures editor options (autofocus, editability)
+   * 3. Sets up selection tracking for format updates
+   * 4. Manages focus/blur behavior and height transitions
+   * 5. Handles initial mount state
+   * 
+   * Edge Cases:
+   * - Prevents height changes when dropdowns are open
+   * - Manages focus state during toolbar interactions
+   * - Handles selection preservation during format changes
+   */
+  // Add these new state variables after the other state declarations
+  let lastKnownContent = $state('');
+  let wasVisible = $state(true);
+
+  function handleEditorMount(e: any) {
+    editorInstance = e.detail.editor;
+    
+    if (!editorInstance) {
+      console.error('Failed to initialize editor instance');
+      return;
+    }
+    
+    // Restore content if we were previously hidden
+    if (!wasVisible && lastKnownContent) {
+      try {
+        const coloredContent = `<span style="color: ${textColor}">${lastKnownContent}</span>`;
+        editorInstance.commands.setContent(coloredContent);
+      } catch (error) {
+        console.error('Error restoring content after visibility change:', error);
+      }
+    } else if (value) {
+      try {
+        const coloredContent = `<span style="color: ${textColor}">${value}</span>`;
+        editorInstance.commands.setContent(coloredContent);
+        
+        // Set caret to start after setting content
+        editorInstance.commands.setTextSelection(0);
+      } catch (error) {
+        console.error('Error setting initial content and color:', error);
+      }
+    }
+    
+    // Disable auto-focus behavior
+    editorInstance.setOptions({
+      autofocus: false,
+      editable: true
+    });
+    
+    // Add selection change listener
+    editorInstance.on('selectionUpdate', () => {
+      handleSelectionChange();
+      updateActiveFormats();
+    });
+    
+    // Track focus state and handle height changes
+    editorInstance.on('focus', () => {
+      onFocus();
+      editorHasFocus = true;
+      
+      // When focusing, ensure caret is at start if this is initial mount
+      if (isInitialMount && editorInstance) {
+        editorInstance.commands.setTextSelection(0);
+      }
+    });
+
+    // Update the blur handler inside handleEditorMount
+    editorInstance.on('blur', ({ event }) => {
+      const relatedTarget = (event as FocusEvent).relatedTarget as Node | null;
+      handleEditorBlur(relatedTarget);
+    });
+
+    // Set initial mount flag
+    isInitialMount = true;
+    setTimeout(() => {
+      isInitialMount = false;
+      // Check overflow only once after initial mount
+      setTimeout(() => {
+        checkContentOverflow();
+      }, 300); // Give it a bit more time to ensure content is fully rendered
+    }, 100);
+    
+    updateActiveFormats();
+
+    // Helper function to check if content overflows viewport - only called once on mount
+    function checkContentOverflow() {
+      if (!editorInstance) return;
+      try {
+        const editorDom = editorInstance.view.dom;
+        const contentArea = editorDom.closest('.editor-content-area') as HTMLElement;
+        
+        if (!contentArea) {
+          console.error('Could not find .editor-content-area parent element');
+          return;
+        }
+
+        const proseMirror = contentArea.querySelector('.ProseMirror') as HTMLElement;
+        if (!proseMirror) {
+          console.error('Could not find .ProseMirror element inside content area');
+          return;
+        }
+
+        // Get the actual content height (including padding)
+        const contentHeight = proseMirror.scrollHeight;
+        // Get the available container height
+        const containerHeight = contentArea.clientHeight;
+        const isOverflowing = contentHeight > containerHeight;
+        
+        console.log('Initial overflow check:', {
+          contentHeight,
+          containerHeight,
+          difference: contentHeight - containerHeight,
+          isOverflowing
+        });
+        
+        if (isOverflowing) {
+          proseMirror.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
+        }
+      } catch (error) {
+        console.error('Error checking content overflow:', error);
+      }
+    }
+
+    // Helper function to force caret and scroll to beginning
+    function forceCaretToStart() {
+      if (!editorInstance) return;
+      try {
+        // Only force caret to start if this is the initial mount
+        if (isInitialMount) {
+          // Force the caret (text selection) to the beginning
+          editorInstance.chain().setTextSelection({ from: 0, to: 0 }).run();
+        }
+      } catch (error) {
+        console.error('Error forcing caret to beginning:', error);
+      }
+    }
+    
+    // Only call forceCaretToStart once during initial mount
+    if (isInitialMount) {
+      setTimeout(forceCaretToStart, 300);
+    }
+  }
+
+  function handleEditorUpdate(e: any) {
+    if (!editorInstance) return;
+
+    // bind:content on ShadEditor already assigned `value` before this event,
+    // so comparing to `value` skipped onChange and the compact preview never updated.
+    const newContent = e.detail?.html ?? editorInstance.getHTML?.() ?? '';
+    lastKnownContent = newContent;
+    content.set(newContent);
+    onChange?.(newContent);
+    updateActiveFormats();
+    currentTextStyle = getCurrentTextStyle();
+  }
+
+  /**
+   * Format Management System
+   * 
+   * Handles text formatting operations and state:
+   * - Updates toolbar UI based on current selection
+   * - Manages format toggles (bold, italic, etc.)
+   * - Handles text style changes (headings, lists)
+   * - Preserves selection during format operations
+   * 
+   * Selection Handling:
+   * - Tracks active formats only when text is selected
+   * - Resets formats when no selection exists
+   * - Maintains format state during dropdown operations
+   */
+  function updateActiveFormats() {
+    if (!editorInstance) return;
+    
+    // Update activeFormats based on editor state
+    const newFormats = {
+      bold: editorInstance.isActive('bold'),
+      italic: editorInstance.isActive('italic'),
+      underline: editorInstance.isActive('underline'),
+      link: editorInstance.isActive('link')
+    };
+
+    // Only update if there's a change to prevent unnecessary rerenders
+    if (JSON.stringify(newFormats) !== JSON.stringify($state.snapshot(activeFormats))) {
+      activeFormats = newFormats;
+      console.log('Active formats updated:', $state.snapshot(activeFormats));
+    }
+  }
+
+  function applyFormat(format: FormatType, isAdding: boolean = true) {
+    if (!editorInstance) return;
+
+    try {
+      // Always focus first and start a chain
+      const chain = editorInstance.chain().focus() as any;
+      
+      switch (format) {
+        case 'bold':
+          chain.toggleBold().run();
+          break;
+        case 'italic':
+          chain.toggleItalic().run();
+          break;
+        case 'underline':
+          chain.toggleUnderline().run();
+          break;
+        case 'link':
+          if (isAdding) {
+            const href = window.prompt('Enter URL');
+            if (href) {
+              chain.setLink({ href }).run();
+            }
+          } else {
+            chain.unsetLink().run();
+          }
+          break;
+      }
+
+      // Update formats after applying changes
+      setTimeout(() => {
+        updateActiveFormats();
+      }, 0);
+    } catch (error) {
+      console.error('Error applying format:', format, error);
+    }
+  }
+
+  function handleToggleChange(newValues: string[] | undefined): void {
+    if (!editorInstance) {
+      console.warn('No editor instance available');
+      return;
+    }
+    
+    if (!newValues) {
+      console.warn('No new values provided');
+      return;
+    }
+
+    // Use $state.snapshot() for logging
+    const currentValues = $state.snapshot(toggleValues);
+    console.log('Toggle change:', { newValues, currentValues });
+    
+    // Find which format was toggled by comparing the arrays
+    const added = newValues.filter(v => !currentValues.includes(v));
+    const removed = currentValues.filter(v => !newValues.includes(v));
+    
+    // Handle the change
+    if (added.length > 0) {
+      // Find the format type for the added value
+      const format = Object.entries(formatMapping).find(([_, m]) => m.value === added[0])?.[0] as FormatType;
+      if (format) {
+        console.log('Applying format:', format);
+        applyFormat(format, true);
+      }
+    } else if (removed.length > 0) {
+      // Find the format type for the removed value
+      const format = Object.entries(formatMapping).find(([_, m]) => m.value === removed[0])?.[0] as FormatType;
+      if (format) {
+        console.log('Removing format:', format);
+        applyFormat(format, false);
+      }
+    }
+  }
+
+  // Update derived toggleValues with proper typing
+  const toggleValues = $derived(Object.entries(activeFormats)
+    .filter(([_, isActive]) => isActive)
+    .map(([format]) => formatMapping[format as FormatType].value)
+  );
+
+  // Restore handleTextStyleChange for other style changes
+  function handleTextStyleChange(value: string) {
+    if (!editorInstance) return;
+    
+    try {
+      const { from, to } = editorInstance.state.selection;
+      const selectedText = editorInstance.state.doc.textBetween(from, to);
+      
+      console.log('Changing style for text "%s" to:', (selectedText || 'No text selected'), value);
+
+      // Store the current scroll position and selection
+      const editorDom = editorInstance.view.dom;
+      const contentArea = editorDom.closest('.editor-content-area') as HTMLElement;
+      const scrollTop = contentArea ? contentArea.scrollTop : editorDom.scrollTop;
+      const selection = { from, to };
+      
+      const chain = editorInstance.chain().focus() as any;
+      
+      switch (value) {
+        case 'text':
+          chain.setNode('paragraph').run();
+          currentTextStyle = value;
+          break;
+        case 'h1':
+        case 'h2':
+        case 'h3':
+          const level = parseInt(value.charAt(1)) as TipTapEditorLevel;
+          chain.toggleHeading({ level }).run();
+          currentTextStyle = editorInstance.isActive('heading', { level }) ? value : 'text';
+          break;
+        case 'bulletList':
+          chain.toggleBulletList().run();
+          currentTextStyle = value;
+          break;
+        case 'orderedList':
+          chain.toggleOrderedList().run();
+          currentTextStyle = value;
+          break;
+        case 'checkList':
+          chain.toggleTaskList().run();
+          currentTextStyle = value;
+          break;
+        case 'blockquote':
+          chain.toggleBlockquote().run();
+          currentTextStyle = value;
+          break;
+        case 'code':
+          chain.toggleCode().run();
+          currentTextStyle = value;
+          break;
+        case 'strike':
+          chain.toggleStrike().run();
+          currentTextStyle = value;
+          break;
+      }
+      
+      // Restore the scroll position and selection after the style change
+      requestAnimationFrame(() => {
+        if (contentArea) {
+          contentArea.scrollTop = scrollTop;
+        } else if (editorDom) {
+          editorDom.scrollTop = scrollTop;
+        }
+        // Restore selection
+        editorInstance?.chain()
+          .setTextSelection(selection)
+          .run();
+      });
+      
+      updateActiveFormats();
+      textStyleDropdownOpen = false;
+    } catch (error) {
+      console.error('Error changing text style:', error);
+    }
+  }
+
+  function getCurrentTextStyle() {
+    if (!editorInstance) return 'text';
+    
+    // Check for headings first
+    if (editorInstance.isActive('heading', { level: 1 })) return 'h1';
+    if (editorInstance.isActive('heading', { level: 2 })) return 'h2';
+    if (editorInstance.isActive('heading', { level: 3 })) return 'h3';
+    
+    // Check for lists and other block-level formats
+    if (editorInstance.isActive('bulletList')) return 'bulletList';
+    if (editorInstance.isActive('orderedList')) return 'orderedList';
+    if (editorInstance.isActive('checkList')) return 'checkList';
+    if (editorInstance.isActive('blockquote')) return 'blockquote';
+    if (editorInstance.isActive('code')) return 'code';
+    if (editorInstance.isActive('strike')) return 'strike';
+    
+    // If no block-level format is active, return the current text style
+    const marks = editorInstance.state.selection.$head.marks();
+    if (marks.length > 0) {
+        // Keep the current text style if there are inline marks
+        return currentTextStyle;
+    }
+    
+    return 'text';
+  }
+  // Function to store text selection
+  function storeSelection() {
+    if (!editorInstance) return null;
+    const { from, to } = editorInstance.state.selection;
+    if (from === to) return null;
+    return { from, to };
+  }
+
+  // Function to restore text selection
+  function restoreSelection() {
+    if (!editorInstance || !selectedTextRange) return;
+    editorInstance.chain()
+      .setTextSelection({ from: selectedTextRange.from, to: selectedTextRange.to })
+      .run();
+  }
+
+  // Helper function to convert RGB to Hex
+  function rgbToHex(r: number, g: number, b: number): string {
+    const toHex = (n: number) => {
+      const hex = Math.round(n).toString(16);
+      return hex.length === 1 ? '0' + hex : hex;
+    };
+    return '#' + toHex(r) + toHex(g) + toHex(b);
+  }
+
+  // Update handleColorChange to use current selection if available
+  function handleColorChange(color: string) {
+    if (!editorInstance) return;
+    
+    try {
+      // Get current selection
+      const { from, to } = editorInstance.state.selection;
+      const hasSelection = from !== to;
+      
+      if (hasSelection) {
+        // Apply color to selection using the correct command
+        editorInstance.chain()
+          .setTextSelection({ from, to })
+          .setMark('textStyle', { color })
+          .run();
+          
+        // Remove any highlight marks and restore selection visibility
+        editorInstance.chain()
+          .unsetMark('highlight')
+          .run();
+          
+        // Remove hide-selection class
+        editorInstance.view.dom.classList.remove('hide-selection');
+        
+        // Ensure editor has focus
+        editorInstance.commands.focus();
+      }
+    } catch (error) {
+      console.error('Error applying color:', error);
+    }
+  }
+
+  // $effect(() => {
+  //   if (value !== $content && editorInstance) {
+  //     console.log('External value changed:', value);
+  //     content.set(value);
+  //     editorInstance.commands.setContent(value);
+  //   }
+  // });
+
+  // Add colorPickerOpen state
+  let colorPickerOpen = $state(false);
+
+  // Add function to handle color picker open/close
+  function handleColorPickerToggle() {
+    colorPickerOpen = !colorPickerOpen;
+    if (colorPickerOpen && selectedTextRange) {
+      restoreSelection();
+    }
+  }
+
+  // Update getSelectedTextColor to ensure hex format with 100% opacity
+  function getSelectedTextColor(): string {
+    if (!editorInstance) return currentColor;
+    
+    const { from, to } = editorInstance.state.selection;
+    if (from === to) return currentColor;
+
+    // Get the color mark from the selection
+    const marks = editorInstance.state.doc.nodeAt(from)?.marks;
+    const colorMark = marks?.find(mark => mark.type.name === 'textStyle' && mark.attrs.color);
+    
+    let color = colorMark?.attrs.color || currentColor;
+    
+    // Convert RGB to Hex if needed
+    if (color.startsWith('rgb')) {
+      const matches = color.match(/\d+/g);
+      if (matches && matches.length >= 3) {
+        color = rgbToHex(
+          parseInt(matches[0]), 
+          parseInt(matches[1]), 
+          parseInt(matches[2])
+        );
+      }
+    }
+
+    // Ensure color is in hex format and has 100% opacity
+    if (color.length === 9) { // If it's a hex with alpha
+      color = color.substring(0, 7); // Remove alpha channel
+    }
+    
+    return color;
+  }
+
+  // Update handleSelectionChange to properly handle color conversion
+  function handleSelectionChange() {
+    if (!editorInstance) return;
+    
+    const { from, to } = editorInstance.state.selection;
+    const hasSelection = from !== to;
+
+    if (hasSelection) {
+      selectedRange = { from, to };
+      
+      // Get the selected text and check for color mark
+      const marks = editorInstance.state.doc.nodeAt(from)?.marks || [];
+      const colorMark = marks.find(mark => 
+        mark.type.name === 'textStyle' && mark.attrs.color
+      );
+      
+      // Update currentColor if a color mark is found
+      if (colorMark?.attrs.color) {
+        let color = colorMark.attrs.color;
+        
+        // Convert RGB to Hex if needed
+        if (color.startsWith('rgb')) {
+          const matches = color.match(/\d+/g);
+          if (matches && matches.length >= 3) {
+            color = rgbToHex(
+              parseInt(matches[0]), 
+              parseInt(matches[1]), 
+              parseInt(matches[2])
+            );
+          }
+        }
+        
+        // Remove alpha channel if present
+        if (color.length === 9) {
+          color = color.substring(0, 7);
+        }
+        
+        currentColor = color;
+      }
+
+      console.log('Selection updated:', {
+        text: editorInstance.state.doc.textBetween(from, to),
+        range: { from, to },
+        style: currentTextStyle,
+        format: [
+          ...(editorInstance.isActive('bold') ? ['b'] : []),
+          ...(editorInstance.isActive('italic') ? ['i'] : []),
+          ...(editorInstance.isActive('underline') ? ['u'] : []),
+          ...(editorInstance.isActive('link') ? ['link'] : [])
+        ],
+        color: currentColor
+      });
+    } else {
+      selectedRange = null;
+      currentColor = textColor; // Reset to default color when deselecting
+    }
+  }
+
+  // Add this state to track animation
+  let isColorPickerAnimating = $state(false);
+
+  // Update handleColorButtonClick to ensure hex format
+  function handleColorButtonClick() {
+    if (!editorInstance) return;
+    
+    const { from, to } = editorInstance.state.selection;
+    if (from !== to) {
+      selectedRange = { from, to };
+      isSelectionActive = true;
+      
+      // Get and convert color to hex format
+      let selectedColor = getSelectedTextColor();
+      // Ensure we convert any rgb colors to hex
+      if (selectedColor.startsWith('rgb')) {
+        const matches = selectedColor.match(/\d+/g);
+        if (matches && matches.length >= 3) {
+          selectedColor = rgbToHex(
+            parseInt(matches[0]), 
+            parseInt(matches[1]), 
+            parseInt(matches[2])
+          );
+        }
+      }
+      // Remove any alpha channel
+      if (selectedColor.length === 9) {
+        selectedColor = selectedColor.substring(0, 7);
+      }
+      
+      currentColor = selectedColor;
+      
+      // Set focus to editor
+      editorHasFocus = true;
+      // editorInstance.commands.focus();
+
+    } else {
+      selectedRange = null;
+      isSelectionActive = false;
+    }
+    
+    showColorPicker = true;
+    isColorPickerAnimating = true;
+    
+    // console.log('Color picker toolbar opened with selection:', { 
+    //   range: selectedRange, 
+    //   color: currentColor,
+    //   hasFocus: editorHasFocus,
+    //   isActive
+    // });
+  }
+
+  // Update the event handler function to handle CustomEvent
+  function handleColorPickerInteraction(event: CustomEvent<any>) {
+    // Get the original MouseEvent from the detail if available
+    const mouseEvent = event.detail?.originalEvent as MouseEvent;
+    if (mouseEvent) {
+      // Prevent the default behavior that might clear the selection
+      mouseEvent.preventDefault();
+      mouseEvent.stopPropagation();
+    }
+    
+    // Reapply the selection if it exists
+    if (selectedRange && editorInstance) {
+      editorInstance.chain()
+        .focus()
+        .setTextSelection(selectedRange)
+        .run();
+    }
+  }
+
+  // Update handleColorPickerClose function
+  function handleColorPickerClose() {
+    showColorPicker = false;
+    isColorPickerAnimating = false;
+    isSelectionActive = false;
+    
+    if (editorInstance) {
+      // Create a chain to handle all operations
+      const chain = editorInstance.chain();
+      
+      // Remove highlight if it exists
+      chain.unsetMark('highlight');
+      
+      // Store current selection before cleanup
+      const currentSelection = editorInstance.state.selection;
+      const hasSelection = currentSelection.from !== currentSelection.to;
+      
+      // Run the chain
+      chain.run();
+      
+      // Remove hide-selection class
+      editorInstance.view.dom.classList.remove('hide-selection');
+      
+      // Always focus the editor first
+      editorInstance.view.focus();
+      
+      // Then reapply selection if it existed
+      if (hasSelection) {
+        editorInstance.commands.setTextSelection({
+          from: currentSelection.from,
+          to: currentSelection.to
+        });
+      }
+    }
+  }
+
+  // Add effect to handle clicks outside Color Select
+  $effect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const colorSelectModal = document.querySelector('[data-radix-popper-content-wrapper]');
+      const isClickingColorSelect = colorSelectModal?.contains(event.target as Node);
+      
+      // Don't do anything if clicking within the color select modal
+      if (isClickingColorSelect) {
+        // Prevent any focus changes
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+    };
+
+    if (isColorSelectOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  });
+
+  /**
+   * Color Management System
+   * 
+   * Handles text color operations:
+   * - Stores and restores text selection during color picker use
+   * - Manages color picker visibility state
+   * - Applies colors to selected text
+   * - Retrieves current text color for selected range
+   * 
+   * Selection Preservation:
+   * - Stores selection before opening color picker
+   * - Restores selection after color picker closes
+   * - Handles edge cases when no text is selected
+   */
+
+  // Add this with the other function declarations in the script section
+  function handleToolbarInteraction(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    
+    // If clicking toolbar elements or color picker, maintain expanded state
+    if (target.matches('input, button, [role="button"], [tabindex="0"]') || 
+        target.closest('.color-picker-container')) {
+      // Keep toolbar enabled since we're interacting with it
+      editorHasFocus = true;
+      return;
+    }
+    
+    event.preventDefault();
+    event.stopPropagation();
+    
+    // When clicking toolbar itself, maintain focus and enabled state
+    if (editorInstance) {
+      editorInstance.commands.focus();
+      editorHasFocus = true;
+    }
+  }
+
+  // Add this function to handle keyboard interactions
+  function handleToolbarKeyDown(event: KeyboardEvent) {
+    // Don't handle keyboard events for inputs and interactive elements
+    const target = event.target as HTMLElement;
+    if (target.matches('input, button, [role="button"], [tabindex="0"]')) {
+      return;
+    }
+    
+    // Handle keyboard interactions for toolbar
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleToolbarInteraction(event as unknown as MouseEvent);
+    }
+  }
+
+  // Update the effect that maintains selection during color picker interactions
+  $effect(() => {
+    if (showColorPicker && selectedTextRange && editorInstance) {
+      const { from, to } = selectedTextRange;
+      editorInstance.chain()
+        .setTextSelection({ from, to })
+        .run();
+    }
+  });
+
+  // Add these near the top of the script section with other state declarations
+  let isColorSelectOpen = $state(false);
+
+  // Add handleKeyDown function
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      if (showColorPicker) {
+        event.preventDefault();
+        handleColorPickerClose();
+      }
+    }
+  }
+
+  // Update handleEditorBlur to maintain toolbar state
+  function handleEditorBlur(relatedTarget: Node | null) {
+    if (!editorInstance) return;
+    
+    const colorSelectModal = document.querySelector('[data-radix-popper-content-wrapper]');
+    const popoverContent = document.querySelector('[role="dialog"]');
+    const commandMenu = document.querySelector('[cmdk-root]');
+    
+    const isClickingInside = toolbarRef?.contains(relatedTarget) || 
+                            editorInstance.view.dom.contains(relatedTarget as Node) ||
+                            colorSelectModal?.contains(relatedTarget as Node) ||
+                            popoverContent?.contains(relatedTarget as Node) ||
+                            commandMenu?.contains(relatedTarget as Node);
+    
+    if (!isClickingInside) {
+      editorHasFocus = false;
+    }
+  }
+
+  // Add this logging helper
+  function logTransitionState(source: string) {
+    // console.log(`Transition State [${source}]:`, {
+    //   isTransitioning,
+    //   editorHeight,
+    //   isActive,
+    //   editorHasFocus,
+    //   isIdle: editorHeight === IDLE_HEIGHT
+    // });
+  }
+
+  // Add this function to handle popover state changes
+  function handlePopoverOpenChange(isOpen: boolean) {
+    textStyleDropdownOpen = isOpen;
+
+    // Ensure editor maintains focus when popover opens/closes
+    if (editorInstance) {
+      editorHasFocus = true;
+      editorInstance.commands.focus();
+    }
+  }
+
+  // Add this function to handle command item selection
+  function handleCommandSelect(value: string) {
+    if (!editorInstance) return;
+
+    // Change the text style to the selected value
+    handleTextStyleChange(value);
+
+    // Restore editor focus after command selection
+    setTimeout(() => {
+      if (!editorInstance) return;
+      editorHasFocus = true;
+      editorInstance.commands.focus();
+    }, 0);
+  }
+
+  // Add these variables to track button position
+  let triggerButtonRect = $state<DOMRect | null>(null);
+  let triggerButton: any;
+  let triggerButtonElement: HTMLButtonElement;
+
+  // Add function to update position using the button element directly
+  function updateTriggerPosition(buttonElement: HTMLButtonElement) {
+    triggerButtonRect = buttonElement.getBoundingClientRect();
+  }
+
+  // Add these state variables near the top with other state declarations
+  let selectedRange: { from: number, to: number } | null = $state(null);
+  let isSelectionActive = $state(false);
+
+  // Add this near the top of the script section with other constants
+  const STYLE_DROPDOWN_ID = 'text-style-dropdown';
+
+  // Add these functions near the top with other event handlers
+  function closeTextStyleDropdown() {
+    if (textStyleDropdownOpen) {
+      textStyleDropdownOpen = false;
+      // Restore focus to editor
+      if (!editorInstance) return;
+      
+      setTimeout(() => {
+        if (!editorInstance) return;
+        editorHasFocus = true;
+        editorInstance.commands.focus();
+      }, 0);
+    }
+  }
+
+  function handleScroll() {
+    closeTextStyleDropdown();
+  }
+
+  // Add to lifecycle management
+  onMount(() => {
+    window.addEventListener('scroll', handleScroll, true);
+  });
+
+  onDestroy(() => {
+    window.removeEventListener('scroll', handleScroll, true);
+  });
+
+  // Add cleanup function
+  onDestroy(() => {
+    if (editorInstance) {
+      // Store the current content before unmounting
+      lastKnownContent = editorInstance.getHTML();
+      wasVisible = false;
+      
+      // Clean up editor instance
+      editorInstance.destroy();
+      editorInstance = null;
+    }
+  });
+
+  // Update mousedown handler to remove height changes
+  function handleMouseDown(e: MouseEvent) {
+    if (editorInstance) {
+      const target = e.target as HTMLElement;
+      const isInteractive = target.matches('button, input, [role="button"], [tabindex="0"]') ||
+                         target.closest('button, input, [role="button"], [tabindex="0"]');
+      
+      if (!isInteractive) {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        // Just focus the editor
+        editorHasFocus = true;
+        editorInstance.commands.focus();
+      }
+    }
+  }
+
+  // Update hit zone handler to remove transitions
+  function handleHitZone(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (editorInstance) {
+      editorInstance.commands.focus();
+      editorHasFocus = true;
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore event_directive_deprecated -->
+<div 
+  class="text-area-input-controller {className ? className + ' ' : ''}flex flex-col"
+  on:keydown={handleKeyDown}
+  tabindex="-1"
+>
+  <!-- Label section -->
+  <div class="label-container flex items-center justify-between">
+    <!-- svelte-ignore a11y_label_has_associated_control -->
+    <label class="subtext text-grey5 cursor-default select-none truncate">{label}</label>
+  </div>
+  
+  <!-- Main editor container -->
+  <div 
+    class="main-editor-container group relative w-full h-full rounded-small widgetic-colors bg-grey1 flex flex-col overflow-hidden" 
+    style={editorStyle}
+    on:mousedown={handleMouseDown}
+  >
+    <!-- Toolbar at the top -->
+    <div 
+      bind:this={toolbarRef}
+      class="toolbar-container sticky top-0 left-0 right-0 h-[56px] bg-grey1 z-10 border-b border-grey2 overflow-visible select-none"
+      on:mousedown={handleToolbarInteraction}
+      on:click={handleToolbarInteraction}
+      on:keydown={handleToolbarKeyDown}
+      role="toolbar"
+      aria-label="Text formatting toolbar"
+      tabindex="-1"
+    >
+      <div class="toolbar-items-row relative flex items-center h-full w-full">
+        <!-- Format cluster centered; close stays on the right -->
+        <div class={`toolbar-items-container absolute inset-y-0 left-0 right-10 flex items-center justify-center gap-2 transition-transform duration-200 ease-out ${
+          isColorPickerAnimating ? 'translate-y-[-200%]' : 
+          showColorPicker ? 'translate-y-[-200%]' : 
+          'translate-y-0'
+        }`}>
+          <Button 
+            variant="outline"
+            size="icon"
+            class="color-picker-preview-button toolbar-button !h-8 !w-8 !min-w-8 !p-0 shrink-0"
+            onclick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              const button = e.currentTarget as HTMLButtonElement;
+              button.blur();
+              handleColorButtonClick();
+            }}
+          >
+            <div class="toolbar-button-content flex h-full w-full items-center justify-center">
+              <IconBrush 
+                class="!text-grey5 hover:!text-grey7"
+                style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; {selectedRange ? `color: ${currentColor} !important;` : ''}"
+              />
+            </div>
+          </Button>
+
+          <!-- Text Formatting Toggle Group -->
+          <ToggleGroup.Root 
+            type="multiple" 
+            size="sm"
+            variant="outline"
+            class="text-formatting-toggle-group inline-flex h-8 gap-2"
+            value={toggleValues}
+            onValueChange={(value) => {
+              if (!editorInstance) return;
+              if (value === undefined) return;
+              handleToggleChange(value);
+            }}
+          >
+            {#each Object.entries(formatMapping) as [format, { value, icon: Icon }] (format)}
+              <ToggleGroup.Item 
+                {value}
+                aria-label={`Toggle ${format}`}
+                data-state={activeFormats[format as FormatType] ? 'on' : 'off'}
+                class="toolbar-button shrink-0 !h-8 !w-8 !min-w-8 !p-0 {activeFormats[format as FormatType] ? 'bg-muted' : ''}"
+              >
+                <div class="toolbar-button-content flex h-full w-full items-center justify-center">
+                  <Icon 
+                    class="text-current"
+                    style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+                  />
+                </div>
+              </ToggleGroup.Item>
+            {/each}
+          </ToggleGroup.Root>
+
+          <!-- Text Style Dropdown -->
+          <div class="toolbar-text-style-ct inline-flex items-center shrink-0">
+            <Popover.Root
+              bind:open={textStyleDropdownOpen}
+              onOpenChange={(e: any) => {
+                handlePopoverOpenChange(e);
+                textStyleDropdownOpen = e;
+              }}
+            >
+              <Popover.Trigger>
+                <Button
+                  bind:this={triggerButton}
+                  id="text-style-trigger"
+                  variant="outline"
+                  size="icon"
+                  class="toolbar-button toolbar-dropdown-trigger !h-8 !w-11 !min-w-11 !max-w-11 !p-0 justify-center"
+                  onclick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    
+                    const buttonElement = e.currentTarget as HTMLButtonElement;
+                    updateTriggerPosition(buttonElement);
+                    buttonElement.blur();
+
+                    textStyleDropdownOpen = !textStyleDropdownOpen;
+                  }}
+                >
+                  <div class="toolbar-button-content flex h-full w-full items-center justify-center gap-0.5 px-1">
+                    {#if currentTextStyle === 'text'}
+                      <IconPilcrow class="h-3.5 w-3.5 shrink-0" />
+                    {:else}
+                      <span class="text-xs">{textOptions.find(opt => opt.value === currentTextStyle)?.label || 'Text'}</span>
+                    {/if}
+                    <ChevronDown class="h-3 w-3 shrink-0" />
+                  </div>
+                </Button>
+              </Popover.Trigger>
+              
+              <Popover.Content 
+                class="w-[200px] p-0"
+              >
+                <Command.Root>
+                  <Command.List>
+                    {#each textOptions as option}
+                      <Command.Item
+                        value={option.value}
+                        onclick={(e: any) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          handleCommandSelect(option.value);
+                        }}
+                        class="flex items-center justify-between px-2 py-1.5 text-sm hover:bg-muted cursor-pointer"
+                      >
+                        {#if option.icon}
+                          <div class="flex items-center gap-2">
+                            {#if option.icon}
+                              <option.icon class="h-4 w-4" />
+                            {/if}
+                            <span>{option.label}</span>
+                          </div>
+                        {:else}
+                          <span>{option.label}</span>
+                        {/if}
+                        {#if option.value === currentTextStyle}
+                          <div class="h-4 w-4">✓</div>
+                        {/if}
+                      </Command.Item>
+                    {/each}
+                  </Command.List>
+                </Command.Root>
+              </Popover.Content>
+            </Popover.Root>
+          </div>
+
+          <!-- List Style Dropdown -->
+          <div class="toolbar-list-style-ct inline-flex items-center shrink-0">
+            <Popover.Root
+              bind:open={listStyleDropdownOpen}
+              onOpenChange={(e: any) => {
+                handlePopoverOpenChange(e);
+                listStyleDropdownOpen = e;
+              }}
+            >
+              <Popover.Trigger>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  id="list-style-trigger"
+                  class="toolbar-button toolbar-dropdown-trigger !h-8 !w-11 !min-w-11 !max-w-11 !p-0 justify-center"
+                  onclick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    const buttonElement = e.currentTarget as HTMLButtonElement;
+                    buttonElement.blur();
+                    listStyleDropdownOpen = !listStyleDropdownOpen;
+                  }}
+                >
+                  <div class="toolbar-button-content flex h-full w-full items-center justify-center gap-0.5 px-1">
+                    {#if currentTextStyle && currentTextStyle.includes('List')}
+                      {@const activeListOption = listOptions.find(opt => opt.value === currentTextStyle)}
+                      {#if activeListOption?.icon}
+                        <activeListOption.icon class="h-3.5 w-3.5 shrink-0" />
+                      {/if}
+                    {:else}
+                      <IconList class="h-3.5 w-3.5 shrink-0" />
+                    {/if}
+                    <ChevronDown class="h-3 w-3 shrink-0" />
+                  </div>
+                </Button>
+              </Popover.Trigger>
+              
+              <Popover.Content 
+                class="style-dropdown-container w-[300px] p-0"
+              >
+                <Command.Root>
+                  <Command.List>
+                    {#each listOptions as option}
+                      <Command.Item
+                        value={option.value}
+                        onclick={(e: any) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          handleCommandSelect(option.value);
+                        }}
+                        class="flex items-center justify-between px-2 py-1.5 text-sm hover:bg-muted cursor-pointer"
+                      >
+                        <div class="flex items-center gap-2">
+                          {#if option.icon}
+                            <option.icon class="h-4 w-4" />
+                          {/if}
+                          <span>{option.label}</span>
+                        </div>
+                        {#if option.value === currentTextStyle}
+                          <div class="h-4 w-4">✓</div>
+                        {/if}
+                      </Command.Item>
+                    {/each}
+                  </Command.List>
+                </Command.Root>
+              </Popover.Content>
+            </Popover.Root>
+          </div>
+        </div>
+
+        {#if onClose && !showColorPicker && !isColorPickerAnimating}
+          <Button
+            variant="ghost"
+            class="toolbar-close-button ml-auto shrink-0 p-0 hover:bg-transparent h-8 w-8 mr-2 z-10"
+            onclick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onClose();
+            }}
+          >
+            <X class="h-6 w-6 text-grey5 hover:text-grey7" />
+          </Button>
+        {/if}
+
+        {#if showColorPicker || isColorPickerAnimating}
+        <div class={`color-picker-parent flex items-center gap-2 absolute inset-0 z-20 bg-grey1 px-3 transition-transform duration-200 ease-out ${
+          isColorPickerAnimating ? 'translate-y-0' : 
+          showColorPicker ? 'translate-y-0' : 
+          'translate-y-[200%]'
+        }`}>
+          <Button 
+            variant="outline"
+            size="icon"
+            class="color-picker-close-button toolbar-button !h-8 !w-8 !p-0 shrink-0"
+            onclick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              const button = e.currentTarget as HTMLButtonElement;
+              button.blur();
+              handleColorPickerClose();
+            }}
+          >
+            <div class="toolbar-button-content flex h-full w-full items-center justify-center">
+              <X class="h-4 w-4" />
+            </div>
+          </Button>
+
+          <div class="color-picker-toolbar-slot relative w-[185px] shrink-0 overflow-visible">
+            <ColorPickerInputController
+              bind:value={currentColor}
+              onChange={(color) => {
+                currentColor = color;
+                handleColorChange(color);
+              }}
+              controllerId="text-color-picker"
+              {openDropdowns}
+              {toggleDropdown}
+              saveRecentColors={true}
+              showOpacityControls={false}
+              showRing={false}
+              portalTarget="text-area-portal"
+              on:mousedown={handleColorPickerInteraction}
+              on:mousemove={handleColorPickerInteraction}
+              on:focus={() => {
+                if (editorInstance && selectedRange) {
+                  editorInstance.chain()
+                    .setTextSelection(selectedRange)
+                    .setMark('highlight', { color: 'var(--text-background-color)' })
+                    .run();
+                  editorInstance.view.dom.classList.add('hide-selection');
+                }
+              }}
+              on:blur={() => {
+                if (editorInstance) {
+                  editorInstance.chain().unsetMark('highlight').run();
+                }
+              }}
+            />
+          </div>
+        </div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Scrollable content area -->
+    <div class="editor-content-area min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
+      <ShadEditor
+        bind:content={value}
+        showToolbar={false}
+        class="shad-editor subtext {editorClass} {showColorPicker || textStyleDropdownOpen ? 'color-picking-active' : ''} {editorHasFocus ? 'editor-focused' : ''} {isSelectionActive ? 'selection-active' : ''}"
+        on:mount={handleEditorMount}
+        on:update={handleEditorUpdate}
+      />
+    </div>
+  </div>
+
+  {#if description}
+    <p class="text-sm text-muted-foreground mt-2">{description}</p>
+  {/if}
+</div>
+
+<style>
+
+  /* Update editor styles */
+  :global(.text-area-input-controller .ProseMirror) {
+    outline: none !important;
+    width: 100%;
+    min-height: 100%;
+    height: auto;
+    padding: var(--editor-padding-top, 0.35rem) var(--editor-padding-right, 0.35rem) 
+             var(--editor-padding-bottom, 0.35rem) var(--editor-padding-left, 0.35rem);
+    background: transparent !important;
+    border: none !important;
+    border-radius: inherit;
+    overflow: visible;
+    margin-top: 0;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  :global(.ProseMirror p) {
+    margin: 0;
+  }
+
+  /* Remove height management styles */
+  :global(.editor-height) {
+    border: none;
+    overflow: auto;
+  }
+
+  /* Keep scrollbar styles */
+  :global(.ProseMirror::-webkit-scrollbar) {
+    width: 6px;
+    margin-right: 2px;
+  }
+
+  :global(.ProseMirror::-webkit-scrollbar-track) {
+    background-color: transparent;
+    margin-right: 2px;
+  }
+
+  :global(.ProseMirror::-webkit-scrollbar-thumb) {
+    background-color: hsl(var(--border)) !important;
+    border-radius: 3px;
+    margin-right: 2px;
+  }
+
+  :global(.ProseMirror::-webkit-scrollbar-thumb:hover) {
+    background-color: hsl(var(--muted-foreground) / 0.6) !important;
+  }
+
+  /* Keep typography styles */
+  :global(.ProseMirror p),
+  :global(.ProseMirror h1),
+  :global(.ProseMirror h2),
+  :global(.ProseMirror h3),
+  :global(.ProseMirror li p),
+  :global(.ProseMirror [data-type="taskItem"] p) {
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  /* Heading specific styles */
+  :global(.ProseMirror h1) { font-size: 2em; font-weight: 700; }
+  :global(.ProseMirror h2) { font-size: 1.5em; font-weight: 700; }
+  :global(.ProseMirror h3) { font-size: 1.17em; font-weight: 700; }
+
+  /* List styles - Consolidated */
+  :global(.ProseMirror ul),
+  :global(.ProseMirror ol),
+  :global(.ProseMirror [data-type="taskList"]) {
+    padding-left: 1.5rem;
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  :global(.ProseMirror li),
+  :global(.ProseMirror [data-type="taskItem"]) {
+    position: relative;
+    padding-left: 0.5rem;
+    margin: 0;
+  }
+
+  /* Task list specific styles */
+  :global(.ProseMirror [data-type="taskList"]) {
+    list-style: none;
+    padding-left: 0rem !important;
+  }
+
+  :global(.ProseMirror [data-type="taskItem"]) {
+    display: flex;
+    align-items: flex-start;
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+    gap: 0.5rem;
+  }
+
+  :global(.ProseMirror [data-type="taskItem"] label) {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+  }
+
+  :global(.ProseMirror [data-type="taskItem"] input[type="checkbox"]) {
+    margin: 0;
+    margin-top: 0.4em;
+  }
+
+  /* Focus states - Consolidated */
+  :global(.ProseMirror),
+  :global(.ProseMirror:hover),
+  :global(.ProseMirror:focus),
+  :global(.ProseMirror:focus-visible),
+  :global(.ProseMirror:focus-within),
+  :global(.ProseMirror *),
+  :global(.ProseMirror * *),
+  :global(.ProseMirror-focused) {
+    border-color: transparent !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Container focus styles */
+  :global(.group:focus-within) {
+    outline: none !important;
+  }
+
+  /* Toolbar styles - Consolidated */
+  :global(.toolbar-container button:focus),
+  :global(.toolbar-container button:focus-visible),
+  :global(.toolbar-container a:focus),
+  :global(.toolbar-container a:focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  :global(.toolbar-button) {
+    position: relative !important;
+    border: 1px solid hsl(var(--border)) !important;
+    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
+  }
+
+  :global(.toolbar-button:hover) {
+    border-color: hsl(var(--grey3)) !important;
+    background-color: hsl(var(--grey1)) !important;
+  }
+
+  :global(.toolbar-button svg) {
+    transition: color 0.2s ease-in-out !important;
+  }
+
+  :global(.toolbar-button:hover svg) {
+    color: hsl(var(--grey7)) !important;
+  }
+
+  :global(.toolbar-button-content) {
+    position: relative !important;
+    z-index: 2 !important;
+  }
+
+  :global(.toolbar-text-style-ct),
+  :global(.toolbar-list-style-ct) {
+    width: 44px;
+    min-width: 44px;
+    max-width: 44px;
+    flex-shrink: 0;
+  }
+
+  :global(.text-formatting-toggle-group button),
+  :global(.color-picker-preview-button) {
+    width: 2rem !important;
+    min-width: 2rem !important;
+    max-width: 2rem !important;
+    height: 2rem !important;
+    padding: 0 !important;
+  }
+
+  :global(.toolbar-text-style-ct button),
+  :global(.toolbar-list-style-ct button),
+  :global(.toolbar-dropdown-trigger) {
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
+    height: 2rem !important;
+    padding: 0 !important;
+  }
+
+  :global(.text-area-input-controller .editor-content-area) {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--grey3) / 0.5) transparent;
+  }
+
+  :global(.text-area-input-controller .editor-content-area::-webkit-scrollbar) {
+    width: 6px;
+  }
+
+  :global(.text-area-input-controller .editor-content-area::-webkit-scrollbar-thumb) {
+    background: hsl(var(--grey3) / 0.45);
+    border-radius: 999px;
+  }
+
+  /* Input styles */
+  :global(input.h-8),
+  :global(.input-container) {
+    height: 2rem !important;
+    min-height: 2rem !important;
+    line-height: 2rem !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    font-size: 0.875rem !important;
+  }
+
+  /* Color picker styles */
+  :global(.color-picker-container) {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+  }
+
+  :global(.color-picker-container input[type="text"]) {
+    width: 162px !important;
+    min-width: 162px !important;
+  }
+
+  :global(.color-picker-container:focus-within) {
+    z-index: 10;
+  }
+
+  :global(.color-picker-container input[type="text"]),
+  :global(.color-picker-container input[type="text"]:focus),
+  :global(.color-picker-container input[type="text"]:focus-visible),
+  :global(.color-picker-container input[type="text"]:focus-within),
+  :global(.color-picker-container input[type="text"]:hover) {
+    outline: none !important;
+    border: 1px solid hsl(var(--border)) !important;
+    box-shadow: none !important;
+    --tw-ring-offset-width: 0 !important;
+    --tw-ring-offset-color: transparent !important;
+    --tw-ring-color: transparent !important;
+    --tw-ring-offset-shadow: none !important;
+    --tw-ring-shadow: none !important;
+  }
+
+  /* Add these styles to ensure proper positioning */
+  :global(.fixed) {
+    position: fixed;
+  }
+
+  :global(.z-50) {
+    z-index: 50;
+  }
+
+  /* Update existing styles to handle portaled content */
+  :global([cmdk-root]) {
+    position: relative;
+    background: white;
+    border-radius: 0.375rem;
+    overflow: hidden;
+  }
+
+  :global([cmdk-list]) {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  :global([cmdk-item]) {
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+  }
+
+  :global([cmdk-item]:hover) {
+    background-color: hsl(var(--muted));
+  }
+
+  /* Add these styles to handle the portaled color suggestions */
+  :global(.color-suggestions-portal) {
+    position: fixed;
+    z-index: 100;
+    background: white;
+    border-radius: 0.375rem;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border: 1px solid hsl(var(--border));
+  }
+
+  /* Selection Styles */
+  :global(.ProseMirror mark[data-color="#adcff5"]) {
+    background-color: #b4d5fe !important;
+    color: inherit !important;
+    border-radius: 2px !important;
+    padding: 2px 0 !important;
+    margin: -2px 0 !important;
+  }
+
+  /* Selection Styles */
+  :global(.ProseMirror) {
+    --selection-color: #b4d5fe;
+    --text-background-color: #b4d5fe;
+  }
+
+  /* Default selection style */
+  :global(.ProseMirror ::selection) {
+    background-color: var(--selection-color) !important;
+    color: inherit !important;
+  }
+
+  /* Selection style during color picker */
+  :global(.ProseMirror.color-picking-active ::selection) {
+    background-color: var(--selection-color) !important;
+    color: inherit !important;
+  }
+
+  /* Hide selection when text background is active */
+  :global(.ProseMirror.hide-selection ::selection) {
+    background-color: transparent !important;
+  }
+
+  /* Text background highlight */
+  :global(.ProseMirror mark[data-highlight]) {
+    background-color: var(--text-background-color) !important;
+    color: inherit !important;
+  }
+
+  :global(.text-area) {
+    height: 100% !important;
+    width: 100% !important;
+    border-radius: var(--radius-small) !important;
+    overflow: hidden !important;
+    background-color: hsl(var(--grey1)) !important;
+    border: 1px solid hsl(var(--grey2));
+    transition: border-color 0.2s ease !important;
+  }
+
+  :global(.text-area .ProseMirror) {
+    margin-top: 0 !important;
+    padding: 8px 16px 24px 16px !important;
+    background-color: transparent !important;
+    cursor: text !important;
+    border: none !important;
+  }
+
+  /* Add portal border radius */
+  :global(.portal-contents) {
+    border-radius: var(--radius-small) !important;
+    overflow: hidden !important;
+  }
+
+  :global(.text-area .toolbar-container) {
+    padding: 10px 0 !important;
+    display: flex !important;
+    gap: 0 !important;
+    border-bottom: 1px solid hsl(var(--grey2)) !important;
+    background-color: hsl(var(--grey1)) !important;
+  }
+
+  :global(.text-area .toolbar-container button) {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    max-width: 32px !important;
+    padding: 0 !important;
+    background-color: white !important;
+    border: 1px solid hsl(var(--grey2)) !important;
+    border-radius: var(--radius) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    transition: all 0.2s !important;
+  }
+
+  :global(.text-area .toolbar-container button.toolbar-dropdown-trigger),
+  :global(.text-area .toolbar-container #text-style-trigger),
+  :global(.text-area .toolbar-container #list-style-trigger) {
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
+    padding: 0 !important;
+  }
+
+  :global(.text-area .toolbar-container .toolbar-items-container) {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    height: 100% !important;
+    position: absolute !important;
+    inset: 0 2.5rem 0 0 !important;
+  }
+
+  :global(.text-area #text-style-trigger) {
+    margin-right: 0 !important;
+  }
+
+  /* Color the brush icon based on selected color */
+  :global(.text-area .color-picker-preview-button svg) {
+    color: var(--selected-color, currentColor) !important;
+  }
+
+  :global(.text-area .color-picker-preview-button:hover svg) {
+    color: var(--selected-color, hsl(var(--grey7))) !important;
+  }
+  /* Button spacing */
+  :global(.text-area .color-picker-preview-button) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  :global(.text-area .text-formatting-toggle-group) {
+    margin-right: 0 !important;
+    display: flex !important;
+    gap: 8px !important;
+  }
+
+  :global(.text-area .text-formatting-toggle-group button) {
+    margin: 0 !important;
+  }
+
+  :global(.text-area .text-formatting-toggle-group button:not(:last-child)) {
+    margin-right: 0 !important;
+  }
+
+  :global(.text-area #text-style-trigger),
+  :global(.text-area #list-style-trigger) {
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
+  }
+
+  :global(.text-area .toolbar-container button:hover) {
+    border-color: hsl(var(--grey2)) !important;
+  }
+
+  :global(.text-area .toolbar-container button:active) {
+    transform: scale(0.95) !important;
+  }
+
+  :global(.text-area .toolbar-container button svg) {
+    width: 20px !important;
+    height: 20px !important;
+    color: hsl(var(--grey5)) !important;
+    transition: color 0.2s !important;
+  }
+
+  :global(.text-area .toolbar-container button:hover svg) {
+    color: hsl(var(--grey7)) !important;
+  }
+
+  :global(.text-area .toolbar-container button[data-state="on"]) {
+    background-color: hsl(var(--sage-green)) !important;
+    border-color: hsl(var(--sage-green)) !important;
+    color: white !important;
+  }
+
+  :global(.text-area .toolbar-container button[data-state="on"] svg),
+  :global(.text-area .toolbar-container button[data-state="on"] svg *) {
+    color: white !important;
+    stroke: white !important;
+  }
+
+  :global(.text-area .toolbar-text-style-ct),
+  :global(.text-area .toolbar-list-style-ct) {
+    margin-left: 0 !important;
+  }
+
+  /* Update the color picker button to show selected color */
+  :global(.text-area .color-picker-preview-button) {
+    position: relative !important;
+  }
+
+  :global(.text-area .color-picker-preview-button::after) {
+    display: none !important;
+  }
+
+  /* Update icon color based on selection */
+  :global(.text-area .color-picker-preview-button .toolbar-button-content svg) {
+    transition: color 0.2s ease !important;
+  }
+
+  :global(.text-area .color-picker-preview-button:hover .toolbar-button-content svg) {
+    color: currentColor !important;
+  }
+
+  /* Remove hit zone since we want clicks everywhere */
+  .input-hit-zone {
+    display: none;
+  }
+
+  /* Make the main container clickable */
+  .main-editor-container {
+    cursor: text;
+  }
+
+  :global(.text-area .toolbar-button.h-8:not(.toolbar-dropdown-trigger):not(#text-style-trigger):not(#list-style-trigger)) {
+    width: 32px !important;
+  }
+
+  :global(.text-area .toolbar-text-style-ct),
+  :global(.text-area .toolbar-list-style-ct) {
+    display: inline-flex !important;
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  /* Update color picker container styles */
+  :global(.color-picker-parent) {
+    position: absolute;
+    inset: 0;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+  }
+
+  /* ColorPicker uses absolute right-0 for the Design column; in the toolbar that
+     pins the 185px input to the far right and the popover flush to the edge. */
+  :global(.color-picker-toolbar-slot .input-controller-ct) {
+    position: relative !important;
+    right: auto !important;
+    left: auto !important;
+  }
+
+  :global(.color-picker-toolbar-slot .input-controller-header-ct) {
+    display: none !important;
+  }
+
+  :global(.color-picker-toolbar-slot .color-picker-input-controller-ct > .flex) {
+    display: block !important;
+  }
+
+  :global(.color-picker-parent input[type="text"]) {
+    width: 162px !important;
+    min-width: 162px !important;
+    height: 36px !important;
+    min-height: 36px !important;
+  }
+
+  :global(.color-picker-close-button) {
+    width: 36px !important;
+    height: 36px !important;
+    min-width: 36px !important;
+    min-height: 36px !important;
+  }
+</style>
+
+