awesome-repositories.com
المدونة
MCP
awesome-repositories.com

اكتشف أفضل مستودعات المصادر المفتوحة باستخدام بحث مدعوم بالذكاء الاصطناعي.

استكشفعمليات بحث منسقةبدائل مفتوحة المصدربرمجيات ذاتية الاستضافةالمدونةخريطة الموقع
المشروعحولكيفية ترتيب النتائجالصحافةخادم MCP
قانونيالخصوصيةالشروط
© 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 نجوم·1,047 تفرعات·TypeScript·MIT·7 مشاهداتwww.draft-js-plugins.com↗

Draft Js Plugins

This project is a plugin framework for the Draft.js rich text editor, providing a system to add custom behaviors, decorators, and keyboard shortcuts. It functions as a toolkit for extending the editor with advanced formatting and interactive elements, while also providing a React UI component library for managing toolbars and popups.

The framework is distinguished by its specialized support for social mention systems, enabling the detection and formatting of hashtags and user mentions as interactive entities via autocomplete triggers. It also includes a comprehensive suite of rich media extensions for embedding and manipulating images, videos, emojis, and stickers directly within the text flow.

Broad capabilities include the implementation of contextual toolbars—such as floating, static, or side-aligned menus—and the ability to manage content arrangement through drag-and-drop interactions and block resizing. The system also covers content management tools like real-time document metrics and history management for undo and redo operations.

The project is written in TypeScript and provides an extensible architecture for integrating custom decorators and state transformation pipelines.

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.

سجل النجوم

مخطط تاريخ النجوم لـ draft-js-plugins/draft-js-pluginsمخطط تاريخ النجوم لـ draft-js-plugins/draft-js-plugins

بحث بالذكاء الاصطناعي

استكشف المزيد من المستودعات الرائعة

صف ما تحتاجه بلغة بسيطة — وسيقوم الذكاء الاصطناعي بترتيب آلاف المشاريع مفتوحة المصدر المنسقة حسب الصلة.

Start searching with AI

بدائل مفتوحة المصدر لـ Draft Js Plugins

مشاريع مفتوحة المصدر مشابهة، مرتبة حسب عدد الميزات المشتركة مع Draft Js Plugins.
  • margox/braft-editorالصورة الرمزية لـ margox

    margox/braft-editor

    4,591عرض على 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
    عرض على GitHub↗4,591
  • ichord/at.jsالصورة الرمزية لـ ichord

    ichord/At.js

    5,247عرض على 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
    عرض على GitHub↗5,247
  • jpuri/react-draft-wysiwygالصورة الرمزية لـ jpuri

    jpuri/react-draft-wysiwyg

    6,471عرض على 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
    عرض على GitHub↗6,471
  • yoopta-editor/yoopta-editorالصورة الرمزية لـ yoopta-editor

    yoopta-editor/Yoopta-Editor

    3,045عرض على 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
    عرض على GitHub↗3,045
عرض جميع البدائل الـ 30 لـ Draft Js Plugins→

الأسئلة الشائعة

ما هي وظيفة draft-js-plugins/draft-js-plugins؟

This project is a plugin framework for the Draft.js rich text editor, providing a system to add custom behaviors, decorators, and keyboard shortcuts. It functions as a toolkit for extending the editor with advanced formatting and interactive elements, while also providing a React UI component library for managing toolbars and popups.

ما هي الميزات الرئيسية لـ draft-js-plugins/draft-js-plugins؟

الميزات الرئيسية لـ draft-js-plugins/draft-js-plugins هي: Rich Text Editors, Document Image Embeds, Entity-to-Component Decorators, Image Embeddings, Rich Text Embeddings, Editor State Management, Rich Media Integration, Mention Trigger Interfaces.

ما هي البدائل مفتوحة المصدر لـ draft-js-plugins/draft-js-plugins؟

تشمل البدائل مفتوحة المصدر لـ draft-js-plugins/draft-js-plugins: 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…