Customization

As we have said, a software having customization is a software having soul. Tipex editor is highly customizable. You can customize the editor to your heart's content.

In-built Utility Buttons

The in-built utility buttons consist of Copy and Link buttons.

Svelte Text Editor: Tipex Editor with custom utility buttons — Location of utility buttons in Text Editor

Insert a set of buttons

Here's a basic example of how you can insert in-built utility buttons.

import {Utility} from "@friendofsvelte/tipex";
<Tipex htmlContent={htmlContent}>
    <Utility slot="utilities"/>
</Tipex>

Append custom buttons between

To append new buttons you can use the Utility.svelte component, it has a slot for you to insert your buttons.

<Tipex htmlContent={htmlContent}>
    <div aria-label="Custom utility button" slot="utilities">...</div>
</Tipex>

Slots props

Slot Name	Default	Condition	Description
headComponent	null	N/A	Slot for rendering a component at the head of the editor.
controlComponent	DefaultControls	if $$slots.controlComponent	Slot for customizing the control element of the editor. If not provided, DefaultControls are used.
utilities	Utility	if $$slots.utilities within DefaultControls	Slot within the DefaultControls for adding extra utility controls. If not provided, default Utility is used.
footComponent	null	N/A	Slot for rendering a component at the foot of the editor.

Note: The utilities slot is only available if the $$slots.controlComponent slot is not provided. The $$slots.controlComponent overrides the default controls, and makes the utilities slot unavailable.

Using new custom controls

You can override the default controls with your own custom controls. Here's an example of how you can do it.

<Tipex htmlContent={htmlContent}>
    <div aria-label="New Custom Control" slot="controlComponent">...</div>
</Tipex>

Or, you can use <svelte:fragment to append your buttons. Make sure that slot="controlComponent" is provided.

Image Upload

Tipex editor supports image upload. You can upload images by dragging and dropping them in the editor, or by copy pasting them from your clipboard, which is the most common way to upload images.

Custom Image Upload Tab

You can use utility customization for this. Apply the upper mentioned method to append your custom button.

Advanced Customization

Tipex, being a highly customizable editor, allows you to customize the editor to your heart's content and make it look like your own. Here's some ways you can customize the editor.

Customize the controls

You can customize the controls of the editor by passing a controlComponent slot.

<script lang="ts">
 import {Tipex} from "@friendofsvelte/tipex";
 import YourCustomHead from "./YourCustomHead.svelte";
 import YourCustomFooter from "./YouCustomFooter.svelte";
 import CustomControl from "./CustomControl.svelte";
</script>

<Tipex htmlContent={htmlContent}>
    <YourCustomHead slot="headComponent"/>
    <CustomControl slot="controlComponent"/>
    <YourCustomFooter slot="footerComponent"/>
</Tipex>

You can also add a header and footer with using a slot.

Tweaking extensions

Tipex provides an defaultExtensions object which contains all the extensions that are used in the editor. You can tweak the extensions, or add new extensions to the editor by passing a extensions prop to the editor.

<script lang="ts">
    import {defaultExtensions, Tipex} from "@friendofsvelte/tipex";
     let extension = {
        ...defaultExtensions,
        heading: Heading.configure({
            levels: [2, 3, 4, 5, 6]
        })
    } // sample of tweaking extensions, so that only heading 2 to 6 are available
</script>
<Tipex extensions={extension} .../>