Modern Rich Text Editor For Svelte

ShadEditor is a ready-to-use text editor component built specifically for Svelte applications.

It combines the power of TipTap, a headless text editor framework, with the sleek design of shadcn/ui. This results in a feature-rich editing experience that can be installed in current projects.

GitHub Repo

Demo

Features

✍️ Rich Text Editing: Supports markdown shortcuts for a fluid writing experience.

🌈 Color Customization: Includes a color picker for text and highlighting.

📊 Tables: Insert and modify tables. Operations include adding, deleting, merging, and splitting rows, columns, and cells.

📝 Blockquotes: Easily create and manage blockquotes for highlighting text.

🔤 Typography: Integrates TipTap Typography, including emojis and special characters.

🔍 Search and Replace: Find and replace text within the editor.

🎨 Formatting Options: Bold, italic, underline, strikethrough, superscript, subscript, text color, highlight, and quick color selection.

🖼️ Image Handling: Add images via URL or local files. Resize, align, and caption images.

💻 Code Blocks: Syntax highlighting is provided by lowlight. Supports multiple languages, dark/light modes, and a copy button.

🔗 Links: Add and remove hyperlinks.

📑 Lists: Create and manage unordered, ordered, and task lists.

Use Cases

Content Management Systems (CMS): ShadEditor can serve as the primary text editor within a CMS. This allows content creators to draft, format, and publish articles or blog posts with ease.
Blogging Platforms: For developers creating custom blogging platforms, ShadEditor offers the tools needed for rich post creation. Features such as markdown support, image uploads, and text formatting options streamline the writing process.
Collaborative Workspaces: ShadEditor can be integrated into platforms where team members collaborate on documents. Its ability to handle various content types makes it useful for shared document editing.
Educational Applications: In online learning platforms, ShadEditor can be used for creating course content. Instructors can format lessons, add multimedia elements, and structure information clearly.
Forums and Discussion Boards: ShadEditor improves user engagement by allowing users to format their posts. It supports rich text, code snippets, and links.

Installation

Prerequisites:

Install shadcn UI: Follow the official shadcn installation guide for Svelte to add shadcn UI to your project.
Add shadcn UI Components: The editor uses several shadcn UI components. Install them using: # using npm npx shadcn-svelte@next add dropdown-menu button tooltip input popover separator # using pnpm pnpm dlx shadcn-svelte@next add dropdown-menu button tooltip input popover separator
Install Tailwind Typography: ShadEditor utilizes the Tailwind Typography plugin. Install it by following the official installation guide.
Add Lucide Icons (Optional): If you want to use icons, install Lucide Icons: # using npm npm install lucide-svelte # using pnpm pnpm install lucide-svelte
Add Mode Watcher (Optional): To detect the editor’s mode, install Mode Watcher: # using npm npm install mode-watcher # using pnpm pnpm install mode-watcher

Installation Steps:

The recommended method is to use the CLI, which automates the setup:

# using npm
npx shadeditor init
# using pnpm
pnpm dlx shadeditor init

This command installs dependencies and adds the ShadEditor component to your project.

Usage

After installation, you can import and use the ShadEditor component like any other Svelte component:

<script lang="ts">
    import { browser } from '$app/environment';
    import ShadEditor from '$lib/components/shad-editor/shad-editor.svelte';
    import { writable } from 'svelte/store';
    let localStorageContent = '';
    if (browser) {
        localStorageContent = localStorage.getItem('content') || '';
    }
    const content = writable(localStorageContent);
    content.subscribe((value) => {
        console.log('Content Changed');
        if (!browser) return;
        localStorage.setItem('content', value);
    });
</script>
<main class="my-10 flex h-full w-full flex-col items-center justify-center">
    <ShadEditor class="h-[40rem]" content={$content} />
</main>

This code imports the ShadEditor component and sets up a writable store to manage the editor’s content. The content is initialized from local storage and updates whenever changes occur.

FAQs

Q: Can ShadEditor’s appearance be customized?
A: Yes, ShadEditor’s appearance can be customized. It uses Tailwind CSS, which allows for extensive styling changes. You can modify the existing classes or add your own to alter the editor’s look and feel.

Q: Does ShadEditor support collaborative editing?
A: Out of the box, ShadEditor does not support real-time collaborative editing. However, its foundation, TipTap, can be extended with collaboration features using tools like Y.js.

Q: What types of content can I store with ShadEditor?
A: ShadEditor stores content in either HTML or JSON format. You can choose the format that best suits your application’s needs.

Q: Is it difficult to add custom extensions to ShadEditor?
A: Adding custom extensions is not overly difficult. ShadEditor’s architecture is built on TipTap, which supports a modular extension system. You can create or integrate additional extensions to enhance the editor’s functionality.

Q: Does ShadEditor work on mobile devices?
A: ShadEditor is designed to be responsive and functions on various screen sizes, including mobile devices. The user interface adapts to smaller screens, providing a usable editing experience on phones and tablets.