awesome-repositories.com
Blog
awesome-repositories.com

Descubre los mejores repositorios open-source con nuestra búsqueda potenciada por IA.

ExplorarBúsquedas curadasAlternativas open-sourceSoftware autohospedableBlogMapa del sitio
ProyectoAcerca deCómo clasificamosPrensaServidor MCP
Aviso legalPrivacidadTérminos
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
draft-js-plugins avatar

draft-js-plugins/draft-js-pluginsArchived

0
View on GitHub↗
4,091 estrellas·1,047 forks·TypeScript·MIT·1 vistawww.draft-js-plugins.com↗

Draft Js Plugins

Este proyecto es un framework de plugins para el editor de texto enriquecido Draft.js, que proporciona un sistema para añadir comportamientos personalizados, decoradores y atajos de teclado. Funciona como un kit de herramientas para extender el editor con formato avanzado y elementos interactivos, al tiempo que proporciona una librería de componentes de UI de React para gestionar barras de herramientas y popups.

El framework se distingue por su soporte especializado para sistemas de menciones sociales, permitiendo la detección y el formato de hashtags y menciones de usuario como entidades interactivas a través de disparadores de autocompletado. También incluye una suite completa de extensiones de medios enriquecidos para incrustar y manipular imágenes, vídeos, emojis y stickers directamente dentro del flujo de texto.

Las capacidades amplias incluyen la implementación de barras de herramientas contextuales —como menús flotantes, estáticos o alineados lateralmente— y la capacidad de gestionar la disposición del contenido a través de interacciones de arrastrar y soltar y redimensionamiento de bloques. El sistema también cubre herramientas de gestión de contenido como métricas de documentos en tiempo real y gestión del historial para operaciones de deshacer y rehacer.

El proyecto está escrito en TypeScript y proporciona una arquitectura extensible para integrar decoradores personalizados y pipelines de transformación de estado.

Features

  • Rich Text Editors - Provides a comprehensive framework for building and extending rich text editing experiences.
  • Document Image Embeds - Supports inserting image entities with capabilities for resizing, alignment, and drag-and-drop manipulation.
  • Entity-to-Component Decorators - Maps rich text entities to custom React components using a decorator strategy pattern.
  • Image Embeddings - Integrates visual media into the editor with control over dimensions and source URLs.
  • Rich Text Embeddings - Inserts diverse visual media like images, stickers, and emojis directly into rich text documents.
  • Editor State Management - Manages the comprehensive editor state and allows modification before state change callbacks fire.
  • Rich Media Integration - Integrates complex multimedia formats including videos, stickers, and emojis directly into the editing workspace.
  • Mention Trigger Interfaces - Provides UI mechanisms that trigger suggestion dropdowns when specific mention characters are typed.
  • Social Mention Systems - Implements autocomplete triggers that detect and format hashtags and user mentions as interactive entities.
  • Rich Text Decorators - Implements a system for applying custom visual styles and interactive behavior to specific text ranges within the editor.
  • Plugin Transformation Pipelines - Implements a modular chain of plugin functions to transform the editor state.
  • Editor Functionality Plugins - Supplies plugins to extend editor capabilities, including custom key commands and block rendering.
  • Pattern-Based Rendering - Automatically renders custom components for text that matches specific patterns like hashtags or mentions.
  • Plugin System Extensions - Provides an extensible system to intercept events and props for custom input handling.
  • Content Decorators - Implements a system to merge external decoration strategies with plugin decorators for rendering specialized content components.
  • Rich Content Embeds - Enables the embedding of interactive media and complex non-text elements like images and videos into the document flow.
  • Autocomplete Mention Insertions - Enables the insertion of formatted user mentions and avatars via an autocomplete mechanism.
  • Entity-Based Content Models - Models complex media and mentions as distinct entities with metadata linked to text ranges.
  • Rich Text Element Embedding - Integrates complex interactive objects like emojis, stickers, and videos directly into the rich text flow.
  • Mentioning Systems - Implements searchable panels for usernames and hashtags to facilitate social interactions within the editor.
  • Social Mention Formatting - Implements the detection and formatting of user mentions and hashtags as interactive entities.
  • Video Player Embeds - Integrates video playback elements directly into the text field with resizing support.
  • Pattern-Based Entity Insertion - Transforms text matching specific patterns into interactive mention entities from a suggestion list.
  • Plugin Frameworks - Provides a modular plugin architecture for extending the core functionality of the Draft.js editor.
  • Rich Media Insertions - Enables the insertion of rich media such as images, stickers, and emojis directly into the text flow.
  • Clickable Link Detections - Converts detected URLs into interactive clickable links using customizable rendering components.
  • Drag and Drop - Implements a drag-and-drop interface for rearranging blocks of content within the editing workspace.
  • Keybinding Management - Controls the keyboard event chain by allowing or blocking specific keybindings.
  • Block-Based Content Arrangement - Allows users to move text and media blocks within the editor using drag-and-drop interactions.
  • Content Statistics Tracking - Tracks real-time document metrics such as character, word, and line counts.
  • Document Word Counters - Ships real-time logic for calculating word, character, and line counts within the document.
  • State Transformation Pipelines - Implements a state transformation pipeline to ensure content adheres to specific rules before updates.
  • Rich Text - Provides a set of plugins to add mentions, emojis, and stickers to a web-based editor.
  • Mention Suggestion Templates - Enables custom templates for the appearance of suggestion entries and popover containers.
  • Hyperlink Insertions - Provides a toolbar-based interface for adding hyperlink entities and visual formatting to text.
  • Event Interception - Intercepts keyboard and mouse events to allow plugins to trigger actions before the editor processes them.
  • Interactive Toolbar Management - Coordinates the behavior and visibility of static, side, and floating editor toolbars.
  • Block Rearrangement Interfaces - Implements a user interface for reordering large blocks of content or images via drag-and-drop.
  • Keyboard Shortcuts - Allows the definition of custom keyboard shortcuts to trigger specific editor actions.
  • Coordinate-Based Position Calculators - Calculates screen coordinates to precisely position floating menus over editor content.
  • Content Repositioners - Allows users to reposition images and other media elements within the editor using drag-and-drop interactions.
  • Editor Accessibility Optimizations - Implements ARIA attributes and keyboard shortcuts to improve screen reader and navigation support in the editor.
  • Emoji Autocomplete Popovers - Ships a searchable popover that triggers on a specific character to find and insert emojis.
  • Content Width Adjusters - Provides UI controls for modifying the horizontal dimensions of content blocks to optimize layout and readability.
  • Floating Toolbars - Provides floating toolbars that appear near selected text for quick formatting actions.
  • Rich Text Editor Toolbars - Provides a system for creating floating, side, and static formatting menus based on text selection.
  • Higher-Order Components - Uses higher-order components to inject plugin props and event handlers into the editor component tree.
  • Hashtag Visual Styling - Detects words starting with a number sign and applies visual styling to highlight them as hashtags.
  • Image Layout Controls - Provides controls for adjusting image dimensions, alignment, and positioning to manage visual presentation.
  • React UI Component Libraries - Ships a collection of React-based toolbar and popup components for managing content insertion.
  • Block Resizers - Provides interactive handles to manually adjust the width of embedded content blocks via mouse dragging.
  • Rich Text Editor Toolbars - Implements customizable toolbars for managing text formatting and the insertion of hyperlinks.
  • Side Toolbars - Provides vertical side toolbars that appear when the editor input field is focused.
  • Static Toolbars - Includes a fixed-position toolbar for providing consistent text styling and layout controls.
  • Rich Text WYSIWYG Editors - Implements a visual editor for formatted text and media including drag-and-drop blocks and resizing.
  • Sticker Selection Galleries - Provides an interactive gallery for browsing and embedding sticker images into the document.
  • Text Alignment - Allows users to change the horizontal alignment of text blocks via a toolbar.
  • Text Alignment & Case Formatting - Provides controls for text alignment and focus states to organize the visual structure of documents.
  • Video Players - Integrates video player components into the text flow for embedded media playback.
  • Automatic Hyperlink Detection - Automatically identifies plain text URLs and converts them into clickable hyperlinks as the user types.
  • Hashtag Pattern Parsing - Provides parsing logic to identify the exact positions of hashtags within text strings for further processing.
  • Undo-Redo History - Manages a history of state changes to provide undo and redo functionality for content editing.
  • Plugins and Extensions - Core plugin architecture for the framework.

Historial de estrellas

Gráfico del historial de estrellas de draft-js-plugins/draft-js-pluginsGráfico del historial de estrellas de draft-js-plugins/draft-js-plugins

Búsqueda con IA

Explora más repositorios increíbles

Describe lo que necesitas en lenguaje sencillo: la IA clasifica miles de proyectos open-source curados por relevancia.

Start searching with AI

Alternativas open-source a Draft Js Plugins

Proyectos open-source similares, clasificados según cuántas características comparten con Draft Js Plugins.
  • margox/braft-editorAvatar de margox

    margox/braft-editor

    4,591Ver en GitHub↗

    Braft Editor is a React-based rich text editor built on Draft.js that provides a framework for content creation and formatting. It functions as a reusable UI component that allows users to compose formatted documents in a WYSIWYG interface and export the resulting content as HTML strings. The project features built-in localization support for multiple languages, including Chinese, Japanese, and Korean. It provides a modular system for extending editor functionality through plugins, custom toolbar mappings, and specialized media entities. The editor covers a broad range of content capabilitie

    JavaScript
    Ver en GitHub↗4,591
  • ichord/at.jsAvatar de ichord

    ichord/At.js

    5,247Ver en GitHub↗

    At.js is a JavaScript mention autocomplete library and client-side suggestion engine used to add trigger-based dropdowns to textareas and rich text editors. It functions as a plugin for integrating dynamic autocomplete popups into third-party HTML editors and contentEditable elements. The library provides a framework for managing multiple trigger characters and custom insertion templates for user mentions and symbols. It supports the use of custom match logic and the assignment of specific trigger keys to map different characters to separate data sources. The engine covers the retrieval of s

    CoffeeScript
    Ver en GitHub↗5,247
  • jpuri/react-draft-wysiwygAvatar de jpuri

    jpuri/react-draft-wysiwyg

    6,471Ver en GitHub↗

    This project is a rich text editor component for React applications that provides a visual interface for composing and formatting content. It functions as a DraftJS-based WYSIWYG editor, allowing users to create structured documents with inline styles and block types. The editor features a customizable toolbar interface for managing text alignment, lists, and media embeds. It includes a specialized input system for inserting emojis, hashtags, and user mentions as single deletable units. The project provides capabilities for transforming internal editor state into HTML, JSON, or Markdown form

    JavaScript
    Ver en GitHub↗6,471
  • yoopta-editor/yoopta-editorAvatar de yoopta-editor

    yoopta-editor/Yoopta-Editor

    3,045Ver en GitHub↗

    Yoopta-Editor is a headless framework for building customizable block-based rich text editors. It utilizes a JSON-based document engine to manage editor state and provides a WYSIWYG interface for creating structured documents. The system separates core document logic from the visual layer, allowing for complete customization of the user interface. The framework is designed for real-time collaborative editing, featuring a synchronization engine with conflict resolution and remote cursor presence tracking. It offers a highly extensible plugin system that allows developers to define new content

    TypeScriptcontenteditableeditorhacktoberfest
    Ver en GitHub↗3,045
Ver las 30 alternativas a Draft Js Plugins→

Preguntas frecuentes

¿Qué hace draft-js-plugins/draft-js-plugins?

Este proyecto es un framework de plugins para el editor de texto enriquecido Draft.js, que proporciona un sistema para añadir comportamientos personalizados, decoradores y atajos de teclado. Funciona como un kit de herramientas para extender el editor con formato avanzado y elementos interactivos, al tiempo que proporciona una librería de componentes de UI de React para gestionar barras de herramientas y popups.

¿Cuáles son las características principales de draft-js-plugins/draft-js-plugins?

Las características principales de draft-js-plugins/draft-js-plugins son: Rich Text Editors, Document Image Embeds, Entity-to-Component Decorators, Image Embeddings, Rich Text Embeddings, Editor State Management, Rich Media Integration, Mention Trigger Interfaces.

¿Qué alternativas de código abierto existen para draft-js-plugins/draft-js-plugins?

Las alternativas de código abierto para draft-js-plugins/draft-js-plugins incluyen: margox/braft-editor — Braft Editor is a React-based rich text editor built on Draft.js that provides a framework for content creation and… ichord/at.js — At.js is a JavaScript mention autocomplete library and client-side suggestion engine used to add trigger-based… jpuri/react-draft-wysiwyg — This project is a rich text editor component for React applications that provides a visual interface for composing and… yoopta-editor/yoopta-editor — Yoopta-Editor is a headless framework for building customizable block-based rich text editors. It utilizes a… vanessa219/vditor — Vditor is a browser-based Markdown editor and rendering engine that supports multiple editing interfaces, including a… alex-d/trumbowyg — Trumbowyg is a lightweight JavaScript WYSIWYG editor used to create and format rich-text and HTML content directly…