ShadEditor

A ready to use text editor build for svelte with tiptap and shadcn ui.

Creating a tiptap editor from scratch is a pain. This package provides a ready-to-use editor with all the features you need. You can install the package in your project but it will not give you flexibility. The recommended way is to use cli which installs all the dependencies for you and pastes the shadeditor component in your project.

ShadEditor

Features

Rich Text Editing with markdown shortcuts
Rich text formatting like bold, italic, underline, strikethrough, superscript, subscript, textcolor, highlight, quickcolor, etc.
Highlighter and Text Color Picker (Pick any color from the color visualizer)
Quickcolor (Quickly pick a color from the color visualizer)
Table (Create tables with ease and add, delete, merge, split rows, cells and columns)
Images (Add images with url or pick from your device) with features like resize, align and caption
Code Block (Syntax highlight with lowlight) which supports multiple languages, dark and light mode and copy button
Blockquotes
Tiptap Typography with emojis, color visualizer and special characters
Links (Add and remove links with ease)
Lists (Unordered, ordered, task list)
Search and Replace (Find and replace text in the editor)

Pre-Requisites (Important)

Since, this project uses shadcn ui, you need to install shadcn in your svelte project. The editor uses tailwind typography plugin which is not included in shadcn. So, you need to install it manually.

Adding shadcn and it's components

For installation of shadcn, please follow thier official installation guide.

The editor usages tooltip, dropdown menu, button, separator, input, etc. Add them in your svelte project.

# 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

Adding Tailwind Typography

For installation of tailwind typography, please follow thier official installation guide.

Adding Lucide Icons (Optional, CLI will do it for you)

Add lucide icons in your svelte project.

# using npm
npm install lucide-svelte
# using pnpm
pnpm install lucide-svelte

Adding Mode Watcher (Optional, CLI will do it for you)

Mode watcher is used to detect the mode of the editor. Add it in your svelte project.

# using npm
npm install mode-watcher
# using pnpm
pnpm install mode-watcher

Installation

Recommended way is to use cli which installs all the dependencies for you and pastes the shadeditor component in your project. This method gives you full independence and flexibility. You can further customize the editor as per your need.

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

Usage

<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>

Credits

This project had many inspirations and was built with the help of the following projects.

tiptap - A rich text editor framework
shadcn ui - A ui component library
Shadcn Tiptap - A tiptap implementation for react

License

MIT

Tsuzat / ShadEditor

readme