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 body={body}>
  {#snippet utilities(tipex)}
    <Utility {tipex}/>
  {/snippet}
</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 body={body}>
 {#snippet utilities(tipex)}
   <div aria-label="Custom utility button">...</div>
 {/snippet}
</Tipex>

Tipex Props

Prop Name	Default	Condition	Description
head(tipex)	undefined	Optional	A slot that accepts a function receiving the TipexEditor instance, rendered above the main editor content area
controlComponent(tipex)	undefined	Only used when controls=false	A custom control component that receives the editor instance. Cannot be used together with the utilities prop
utilities(tipex)	Utility	Only used when controls=true	Custom utility components rendered within the default Controls component. Cannot be used together with controlComponent
foot(tipex)	undefined	Optional	A slot that accepts a function receiving the TipexEditor instance, rendered below the editor content and controls

Note: These props are mutually exclusive based on the control mode:

When controls=true: Only utilities can be used

When controls=false: Only controlComponent can be used

This is enforced by the WithControlsOn and WithControlsOff type interfaces.

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 body={body}>
   {#snippet controlComponent(tipex)}
	   <div aria-label="New Custom Control">...</div>
	 {/snippet}
</Tipex>

Or, you can use {#snippet controlComponent} to append your buttons.

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 body={body}>
  {#snippet head(tipex)}
    <YourCustomHead/>
  {/snippet}
  {#snippet controlComponent(tipex)}
    <CustomControl/>
  {/snippet}
  {#snippet foot(tipex)}
    <YourCustomFooter/>
  {/snippet}
</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 newExtensions = [
        ...defaultExtensions,
         Heading.configure({
            levels: [2, 3, 4, 5, 6]
        })
    ] // sample of tweaking extensions, so that only heading 2 to 6 are available
</script>
<Tipex extensions={newExtensions} .../>