Tipex Editor 0.0.1-prev.0.2

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";
    export let htmlContent = `<p>The initial html content.</p>`;
</script>

<Tipex {htmlContent}
    displayDefaultControls
    floatingMenu
    style="margin-top: 1rem; margin-bottom: 0;" 
    className="h-[70vh] border border-neutral-200"/>

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.
floatingMenu	boolean	false	Determines if the default floating menu should be displayed.
onEditorCreate	function	() => {}	Callback function when the editor is created.
onEditorDestroy	function	() => {}	Callback function when the editor is destroyed.
onEditorUpdate	function	() => {}	Callback function when the editor is updated.
htmlContent	string	''	Initial HTML content to be rendered in the editor.
className	string	''	Class to be applied to the editor.
style	string	''	Style to be applied to the editor.
focusOnEdit	boolean	true	Determines whether to focus on the editor when it is clicked to edit; default blue outline.
displayDefaultControls	boolean	false	Determines if the default controls should be displayed.

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

Accessing Editor Instance

You can access the editor instance via:

import {tipexEditor} from '@friendofsvelte/tipex';

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.