ShadEditor

Edra: Advanced Rich Text Editing for Svelte Applications

Edra equips Svelte developers with a highly extensible and feature-rich rich text editor, built on the robust Tiptap library. It's designed for straightforward integration into your projects as a component, emphasizing ease of use and reliable data output. Edra offers flexibility with both headless UI and a beautifully styled ShadCN-based UI option, enabling the creation of sophisticated content with a pleasant editing experience and minimal setup.

Features:

• Rich Text Formatting: Bold, italic, underline, strikethrough, superscript, subscript, text color, highlight, and markdown shortcuts.
• Advanced Color Pickers: For text color, highlight, and quickcolor selection from a visualizer.
• Comprehensive Table Management: Create and modify tables with operations for rows, columns, and cells (add, delete, merge, split).
• Image Integration: Add images via URL or local upload, featuring resize, alignment, and caption options.
• Video Embedding: Embed videos via URL or local upload, with resize, alignment, and caption capabilities.
• Audio Integration: Incorporate audio files via URL or local upload, including resize, alignment, and caption functionalities.
• Syntax Highlighted Code Blocks: Supports multiple programming languages, dark/light themes, and a copy-to-clipboard button, powered by lowlight.
• Blockquotes: Easily create and manage distinct blockquote sections.
• Tiptap Typography Enhancements: Utilizes Tiptap's typography for emojis, a color visualizer, and special characters.
• Link Management: Seamlessly add, edit, and remove hyperlinks within the content.
• Versatile List Creation: Supports unordered (bullet), ordered (numbered), and interactive task lists.
• Search and Replace Functionality: Efficiently find and replace text strings throughout the editor content.
• Drag and Drop Node Editing: Intuitively rearrange content blocks and elements with an automatic content joining feature.
• Slash Commands: Accelerate content creation by using slash commands to insert headings, tables, media, and other elements.
• Font Size Control & BubbleMenu: Adjust text font size and access quick editing options via a contextual BubbleMenu.

Summary:

Edra is a Svelte-centric rich text editor powered by Tiptap, crafted for developer productivity and extensibility. It delivers a wide array of editing capabilities, from basic formatting to advanced features like media embedding, table manipulation, and syntax-highlighted code blocks. Offering choices between a headless UI or a ShadCN-based interface, Edra facilitates the seamless addition of a powerful, visually appealing editor to Svelte applications, ensuring clean and structured data output.