tipex Download - tipex Source code download

tipex

Other source code

1.0.0

Download

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
Customizable Controls: Flexible control system with both default and custom options
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"

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} controls floatingstyle="margin-top: 1rem; margin-bottom: 0;"class="h-[70vh] border border-neutral-200"/>

Core Concepts

Control Modes

Tipex offers two control modes:

Default Controls (controls={true}):

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

Custom Controls (controls={false}):

Full control over the editor interface
Use controlComponent for custom implementations
Ideal for specialized use cases

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} controls>
    {#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} controls={false}>
    {#snippet controlComponent(editor)}
        <MyCustomControls {editor} />
    {/snippet}
</Tipex>

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.