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! ✨🔮
Install the package from NPM:
npm install "@friendofsvelte/tipex"
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}
controls
floating
style="margin-top: 1rem; margin-bottom: 0;"
class="h-[70vh] border border-neutral-200"
/>
Tipex offers two control modes:
Default Controls (controls={true}
):
utilities
propCustom Controls (controls={false}
):
controlComponent
for custom implementationsTipex 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 }
/>
The floating menu provides context-aware formatting options:
<Tipex floating /> // Enables the floating menu
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>
Add custom controls while keeping the default toolbar:
<script lang="ts">
import {Tipex} from "@friendofsvelte/tipex";
let body = "";
</script>
<Tipex {body} controls>
{#snippet utilities(editor)}
<CustomFormatting {editor} />
{/snippet}
</Tipex>
Create a completely custom control interface:
<script lang="ts">
import {Tipex} from "@friendofsvelte/tipex";
let body = "";
</script>
<Tipex {body} controls={false}>
{#snippet controlComponent(editor)}
<MyCustomControls {editor} />
{/snippet}
</Tipex>
<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} />
For comprehensive documentation, visit tipex.pages.dev.
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.
If you like this project, you can be one of the friends by contributing to the project. Memberships are open for everyone.
MIT Licensed. Copyright (c) 2023-2024 Friend of Svelte.