Skip to main content

​
Overview

The useYooptaFocused hook returns a boolean indicating whether the Yoopta editor is currently focused. This is useful for showing/hiding UI elements or changing behavior based on editor focus state.

​
Usage

import { useYooptaFocused } from '@yoopta/editor';

function EditorToolbar() {
  const isFocused = useYooptaFocused();

  return (
    <div className={isFocused ? 'toolbar-visible' : 'toolbar-hidden'}>
      {isFocused && <button>Bold</button>}
      {isFocused && <button>Italic</button>}
    </div>
  );
}

​
Signature

function useYooptaFocused(): boolean

​
Returns

boolean - true if the editor is focused, false otherwise

​
Examples

​
Show Toolbar When Focused

function FloatingToolbar() {
  const isFocused = useYooptaFocused();

  if (!isFocused) return null;

  return (
    <div className="floating-toolbar">
      <button>Format</button>
      <button>Insert</button>
      <button>Export</button>
    </div>
  );
}

​
Conditional Styling

function EditorWrapper() {
  const isFocused = useYooptaFocused();

  return (
    <div 
      className="editor-wrapper"
      style={{
        border: isFocused ? '2px solid blue' : '1px solid gray',
        boxShadow: isFocused ? '0 0 10px rgba(0,0,255,0.2)' : 'none',
      }}
    >
      <YooptaEditor {...editorProps} />
    </div>
  );
}

​
Focus Indicator

function FocusIndicator() {
  const isFocused = useYooptaFocused();

  return (
    <div className="status-bar">
      <span>
        Status: {isFocused ? '✓ Focused' : '○ Not focused'}
      </span>
    </div>
  );
}

​
Keyboard Shortcut Handler

function KeyboardShortcutHandler() {
  const isFocused = useYooptaFocused();
  const editor = useYooptaEditor();

  useEffect(() => {
    const handleKeydown = (e: KeyboardEvent) => {
      // Only handle shortcuts when editor is focused
      if (!isFocused) return;

      if (e.metaKey && e.key === 's') {
        e.preventDefault();
        // Save content
        const content = editor.getHTML(editor.children);
        localStorage.setItem('content', content);
      }
    };

    window.addEventListener('keydown', handleKeydown);
    return () => window.removeEventListener('keydown', handleKeydown);
  }, [isFocused, editor]);

  return null;
}

​
Character Count with Focus State

function CharacterCount() {
  const editor = useYooptaEditor();
  const isFocused = useYooptaFocused();
  
  const charCount = useMemo(() => {
    const text = editor.getPlainText(editor.children);
    return text.length;
  }, [editor.children]);

  return (
    <div 
      className="character-count"
      style={{ opacity: isFocused ? 1 : 0.5 }}
    >
      {charCount} characters
    </div>
  );
}

​
Auto-save on Blur

function AutoSave() {
  const editor = useYooptaEditor();
  const isFocused = useYooptaFocused();
  const previousFocused = useRef(isFocused);

  useEffect(() => {
    // Save when editor loses focus
    if (previousFocused.current && !isFocused) {
      const content = editor.getHTML(editor.children);
      saveToServer(content);
    }
    previousFocused.current = isFocused;
  }, [isFocused, editor]);

  return null;
}

​
Use Cases

  • Floating Toolbars: Show formatting tools only when editor is focused
  • Visual Feedback: Highlight editor border or background on focus
  • Keyboard Shortcuts: Enable/disable shortcuts based on focus
  • Auto-save: Trigger save operations when focus is lost
  • Analytics: Track user engagement with the editor
  • Context Menus: Show/hide context-sensitive menus
  • Status Indicators: Display editor state in the UI

​
Focus vs Selection

Note the difference between editor focus and block selection:
  • Focus (useYooptaFocused): Whether the editor as a whole has focus
  • Selection (useBlockSelected): Whether a specific block is selected
function EditorState() {
  const isFocused = useYooptaFocused();
  const editor = useYooptaEditor();
  const hasSelection = editor.path.current !== null;

  return (
    <div>
      <p>Editor focused: {isFocused ? 'Yes' : 'No'}</p>
      <p>Block selected: {hasSelection ? 'Yes' : 'No'}</p>
    </div>
  );
}

​
Implementation Details

Under the hood, this hook calls editor.isFocused(), which is a method on the YooEditor instance. The focus state is managed internally by the editor. 
// Simplified implementation
const useYooptaFocused = () => useYooptaEditor().isFocused();

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us