Tipex Editor 0.0.7-up-5

Buy me a coffee

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.

Installation

Install the package from NPM.

npm install "@friendofsvelte/tipex";

Usage

Import the component and use it in your component.

<script lang="ts">
    import {Tipex} from '@friendofsvelte/tipex';
    let body = `<p>The initial html content.</p>`;
</script>

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

Quick short-hands

!controls: Disable the control buttons, or controls=false.
!floating: Disable the floating toolbar, or floating=false.
!focal: Disable the focal point, or focal=false.

Styling

Tipex comes with a default style. You can use it by importing the following CSS file inside the script tag.

import "@friendofsvelte/tipex/styles/Tipex.css";
import "@friendofsvelte/tipex/styles/ProseMirror.css";
import "@friendofsvelte/tipex/styles/Controls.css";
import "@friendofsvelte/tipex/styles/EditLink.css";
import "@friendofsvelte/tipex/styles/CodeBlock.css";

The import for @friendofsvelte/tipex/styles/ProseMirror.css is used to style content written in the editor. You can use your own style or use the default one. Or, remove any CSS you don't wanna use.

Props

Tipex component accepts following props.

Prop	Type	Default	Description
extensions	Extensions[]	defaultExtensions	Extensions to be used in the editor.
floating	boolean	false	Determines display of default floating menu.
oncreate	function	() => {}	Callback function when the editor is created.
ondestroy	function	() => {}	Callback function when the editor is destroyed.
onupdate	function	() => {}	Callback function when the editor is updated.
body	string	''	HTML content to render.
this	TipTap	N/A	Instance of the editor.
class	string	''	Class to be applied to the editor.
style	string	''	Style to be applied to the editor.
focal	boolean	true	Focus outline when editing (blue ring).
controls	boolean	false	Display the default controls.
ctxId	${string}_tipex	_tipex	Sets context ID to get editor instance via getContext.

Note: For better customization, please have a look at [Slot Props]

Accessing Editor Instance

You can access the editor instance via:

<Tipex body={htmlCotent} bind:this={editor} />

The editor instance is stored in a store. You can use it to access the editor instance from anywhere in your app.

Customizing Editor

Tipex is built taking into consideration the need for customization. We believe that a software lacking customization is a software lacking soul. Tipex provides an extensive set of options to customize the editor to your heart's content. From functionality, style, to key bindings, you can customize almost everything. Visit the customization page to learn more.

About Friend Of Svelte

Friend Of Svelte is a community driven project to help Svelte developers to find and develop awesome Svelte resources.

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