Tipex

Tipex stands as an advanced rich text editor tailored for Svelte, meticulously engineered with the robust frameworks Tiptap and Prosemirror. It empowers developers to effortlessly craft rich text editors, liberating them from the intricacies of underlying technologies, style management, and related complexities.

Svelte5 and runes mode activated! ✨🔮

Key Features

• 🚀 Svelte 5 Ready: Built with Svelte 5's latest features including runes and snippets
• 🎨 Automatic Control Detection: Smart control system that automatically detects whether to show default or custom controls
• 🔌 Plugin Architecture: Extensible through Tiptap extensions
• 📱 Responsive: Works great on both desktop and mobile devices
• 🎯 Floating Menu: Context-aware floating toolbar for enhanced editing experience
• 🔗 Link Management: Built-in link handling with preview and editing capabilities
• 🎭 Theming Support: Easy styling with CSS variables and utility classes
• ⚡ Performance Optimized: Leverages Svelte's reactivity for smooth editing
• 💼 TypeScript Support: Full TypeScript support for better development experience

Installation

Install the package from NPM:

npm install "@friendofsvelte/tipex"

Check out Tipex Editor Variants and its live preview for examples showcasing what you can build with the Tipex Svelte text editor, including multiple themes and configurations.

Basic Usage

Import the component and use it in your component:

<script lang="ts">
    import {Tipex} from "@friendofsvelte/tipex";
    
    let body = `<p>This <a target="_blank" rel="noopener noreferrer" href="">content</a> is written by <a target="_blank" rel="noopener noreferrer" href="http://bishwas.net/">Bishwas</a> in 2023.</p>`;
</script>

<Tipex 
    {body} 
    floating
    style="margin-top: 1rem; margin-bottom: 0;"
    class="h-[70vh] border border-neutral-200"
/>

Core Concepts

Control System

Tipex features an intelligent control system that automatically detects which interface to display:

1. Default Controls (automatic when no controlComponent is provided):

   • Pre-built formatting toolbar
   • Customizable through the utilities snippet
   • Perfect for quick implementation

2. Custom Controls (when controlComponent snippet is provided):

   • Full control over the editor interface
   • Complete customization freedom
   • Ideal for specialized use cases

This automatic detection eliminates the need for boolean flags and provides a cleaner API.

Extension System

Tipex leverages Tiptap's extension system for enhanced functionality:

import { Tipex } from "@friendofsvelte/tipex";
import { TextAlign } from '@tiptap/extension-text-align';

const extensions = [
    TextAlign.configure({
        types: ['heading', 'paragraph'],
    }),
];

// Use in component
<Tipex { extensions }
/>

Floating Menu

The floating menu provides context-aware formatting options:

<Tipex floating /> // Enables the floating menu

Advanced Usage

Custom Head and Foot Sections

Add custom components above or below the editor using Svelte 5 snippets:

<script lang="ts">
    import {Tipex} from "@friendofsvelte/tipex";
    
    let body = "";
</script>

<Tipex {body}>
    {#snippet head(editor)}
        <CustomHeader {editor} />
    {/snippet}
    
    {#snippet foot(editor)}
        <CustomFooter {editor} />
    {/snippet}
</Tipex>

Custom Utilities

Add custom controls while keeping the default toolbar:

<script lang="ts">
    import {Tipex} from "@friendofsvelte/tipex";
    
    let body = "";
</script>

<Tipex {body}>
    {#snippet utilities(editor)}
        <CustomFormatting {editor} />
    {/snippet}
</Tipex>

Custom Control Component

Create a completely custom control interface:

<script lang="ts">
    import {Tipex} from "@friendofsvelte/tipex";
    
    let body = "";
</script>

<Tipex {body}>
    {#snippet controlComponent(editor)}
        <MyCustomControls {editor} />
    {/snippet}
</Tipex>

How to get html content from editor?

<script lang="ts">
    import {Tipex} from "@friendofsvelte/tipex";
    
    let body = "";
    let editor: Editor | undefined = $state();

    const htmlContent = $derived(editor?.getHTML()); // Get HTML content
 </script>
 
 <Tipex {body} bind:tipex={editor} />

Documentation

For comprehensive documentation, visit tipex.pages.dev.

About Friend Of Svelte

Friend Of Svelte is a community-driven project to help Svelte developers find and develop awesome Svelte resources. Our mission is to create high-quality, maintainable, and accessible tools for the Svelte ecosystem.

Join the Community

• 🌟 Star our repositories
• 🤝 Contribute to projects
• 📢 Share your ideas
• 👥 Open memberships for everyone

If you like this project, you can be one of the friends by contributing to the project. Memberships are open for everyone.

License

MIT Licensed. Copyright (c) 2023-2024 Friend of Svelte.