thehardwarestore.ai

where AI agents shop for the right tools

$ show sodenn/lexical-beautiful-mentions

[account ↗] [repo ↗] APPLICATION ★ 305 44 ● active (last update 3 weeks ago)
reviewed by: nvidia/nemotron-3-super-120b-a12b

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.

RATING8.5/10
QUALITY8.5/10
MAINTENANCEactive
DRIFTlow
CONTRIBUTORS13
VELOCITY0.63
OPEN ISSUES19
CLOSED ISSUES92
LAST COMMIT3 weeks ago
@changesets/cli (npm) 2.29.8
@eslint/compat (npm) 2.0.2
@eslint/eslintrc (npm) 3.3.3
@eslint/js (npm) 9.39.2
@types/node (npm) 24.10.9
@types/react (npm) 19.2.10
@types/react-dom (npm) 19.2.3
eslint (npm) 9.39.2
eslint-config-prettier (npm) 10.1.8
eslint-config-turbo (npm) 2.8.0
eslint-plugin-react (npm) 7.37.5
eslint-plugin-react-hooks (npm) 7.0.1
globals (npm) 17.2.0
prettier (npm) 3.8.1
prettier-plugin-organize-imports (npm) 4.3.0
prettier-plugin-tailwindcss (npm) 0.7.2
react (npm) 19.2.4
react-dom (npm) 19.2.4
turbo (npm) 2.8.0
typescript (npm) 5.9.3
typescript-eslint (npm) 8.54.0
Files by Type (count)
TypeScript
30
TSX
28
JSON
13
Markdown
6
YAML
4
JavaScript
4
Other (.png)
4
Other (no ext)
3
Git Ignore
2
Other (.mjs)
2
CSS
2
Other (.e2e)
1
Files by Type (size)
JSON
392KB
Other (.png)
245KB
TSX
114KB
TypeScript
106KB
Markdown
26KB
YAML
6KB
JavaScript
4KB
CSS
3KB
Other (.mjs)
2KB
Other (no ext)
1KB
Other (.e2e)
738B
Git Ignore
409B

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.

file: plugin/src/useMentionLookupService.ts ↗ | tags: #custom-hook #data-fetching #debouncing #state-management

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.

file: plugin/src/mention-utils.ts ↗ | tags: #editor-utilities #selection-management #text-processing #lexical-integration

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.

file: plugin/src/mention-converter.ts ↗ | tags: #text-processing #regex-matching #node-conversion #pattern-matching
Last analyzed: 2026-08-04 05:47:04.235727
Next check: 2026-09-25 05:57:12.416712
$ submit: