$ show sodenn/lexical-beautiful-mentions
This repository contains a mentions plugin for the Lexical text editor, along with a Next.js demo application. The plugin provides advanced mentions functionality including customizable triggers, multiple trigger support, automatic spacing, async query functions, customizable styling, and programmatic manipulation of mentions. The architecture consists of a core plugin implementation in the 'plugin' directory and a demonstration application in the 'www' directory. The plugin follows a modular design with separate concerns for UI components, state management, text processing, and editor integration. Key features include mention detection via regex, custom node implementation for Lexical, and hooks for managing asynchronous data fetching with proper loading states.
The LLM identified 3 files worth highlighting for reuse:
A custom React hook that handles asynchronous data fetching for mention suggestions with debouncing, loading states, and support for both static data sources and async functions. It encapsulates the complexity of managing search queries, preventing race conditions, and providing a clean API with loading, results, and query state. This pattern is reusable across any React application needing search/filter functionality with async data sources.
A collection of utility functions for working with the Lexical editor's selection model and text content. Key functions include $getSelectionInfo which extracts comprehensive selection state, getTextContent which handles special nodes like zero-width characters, and helpers for DOM manipulation in the editor context. These utilities solve the complex problem of interacting with Lexical's internal APIs while providing a clean, reusable interface for common editor operations like detecting word boundaries and managing cursor positions.
Implements sophisticated text-to-node conversion for detecting and transforming mention patterns in text. It features robust regex-based pattern matching with proper boundary handling, conversion of text strings to mention and text nodes, and transformation of existing text nodes in the editor to mention nodes. The implementation correctly handles edge cases like punctuation, special characters, and trigger validation, demonstrating advanced text processing skills that are isolated from UI concerns and could be adapted to other text processing scenarios.