Tipex Editor

https://tipex.pages.dev
Admin
Tipex is a highly customizable rich text editor built for Svelte applications, leveraging TipTap and...
Tokens:13,845
Snippets:30
Trust Score:7.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Quick Start Svelte Component

Source: https://tipex.pages.dev/index

Get started with Tipex in a Svelte application by importing the component and its styles, then using it with initial HTML content and configuration props.

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

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

```

--------------------------------

### Complete Custom Control Implementation Example

Source: https://tipex.pages.dev/customization

Provides a full example of a custom control component for Tipex, including Svelte script for editor interaction, custom toolbar UI, and scoped CSS styles. It shows how to use Tipex instance methods like `isActive` and `can` for dynamic button states.

```svelte
<script>
  import CustomToolbar from './CustomToolbar.svelte';
</script>

<Tipex body={body}>
  {#snippet controlComponent(tipex)}
    <CustomToolbar {tipex} />
  {/snippet}
</Tipex>

<!-- CustomToolbar.svelte -->
<script>
  export let tipex;

  let isActive = $derived((name, attrs = {}) => tipex?.isActive(name, attrs) ?? false);
  let canExecute = $derived((command) => tipex?.can()[command]() ?? false);
</script>

<div class="custom-toolbar">
  <div class="toolbar-section">
    <button
      class="toolbar-btn"
      class:active={isActive('bold')}
      disabled={!canExecute('toggleBold')}
      onclick={() => tipex.chain().focus().toggleBold().run()}
    >
      <strong>B</strong>
    </button>

    <button
      class="toolbar-btn"
      class:active={isActive('italic')}
      onclick={() => tipex.chain().focus().toggleItalic().run()}
    >
      <em>I</em>
    </button>
  </div>

  <div class="toolbar-section">
    <select
      value={isActive('heading', {level: 1}) ? '1' : 
             isActive('heading', {level: 2}) ? '2' : 'p'}
      onchange={(e) => {
        const level = e.target.value;
        if (level === 'p') {
          tipex.chain().focus().setParagraph().run();
        } else {
          tipex.chain().focus().toggleHeading({level: parseInt(level)}).run();
        }
      }}
    >
      <option value="p">Paragraph</option>
      <option value="1">Heading 1</option>
      <option value="2">Heading 2</option>
    </select>
  </div>
</div>

<style>
	@reference "../app.css";
    .custom-toolbar {
      @apply flex gap-tipex-md p-tipex-lg
	  bg-tipex-control-bg dark:bg-tipex-control-bg-dark
      rounded-tipex-md shadow-tipex-sm
      border border-tipex-control-border dark:border-tipex-control-border-dark;
    }
</style>
```

--------------------------------

### Example: Multiple Custom Tipex Utilities

Source: https://tipex.pages.dev/customization

Provides a comprehensive example of integrating both built-in and multiple custom utility buttons into the Tipex editor. It includes examples for exporting to PDF, inserting templates, and toggling fullscreen, utilizing `iconify-icon` for displaying icons.

```svelte
<Tipex body={body}>
  {#snippet utilities(tipex)}
    <!-- Built-in utilities -->
    <Utility {tipex}/>

    <!-- Custom utilities -->
    <button
      class="tipex-edit-button tipex-button-rigid"
      onclick={() => exportToPDF(tipex.getHTML())}
      aria-label="Export to PDF"
    >
      <iconify-icon icon="fa6-solid:file-pdf"></iconify-icon>
    </button>

    <button
      class="tipex-edit-button tipex-button-rigid"
      onclick={() => insertTemplate(tipex)}
      aria-label="Insert template"
    >
      <iconify-icon icon="fa6-solid:file-contract"></iconify-icon>
    </button>

    <button
      class="tipex-edit-button tipex-button-rigid"
      onclick={() => toggleFullscreen()}
      aria-label="Toggle fullscreen"
    >
      <iconify-icon icon="fa6-solid:expand"></iconify-icon>
    </button>
  {/snippet}
</Tipex>
```

--------------------------------

### Install Tipex

Source: https://tipex.pages.dev/index

Install Tipex from NPM using your preferred package manager.

```bash
npm install "@friendofsvelte/tipex";
```

--------------------------------

### Customize Tipex Layout with Slots (JavaScript)

Source: https://tipex.pages.dev/customization

Provides an alternative example for Tipex layout customization using Svelte slots for head, control components, and foot. Features auto-save and custom components for stats and save indicators. Requires custom Svelte components.

```javascript
<script>
  import { Tipex } from "@friendofsvelte/tipex";
  import DocumentStats from "./DocumentStats.svelte";
  import CustomControl from "./CustomControl.svelte";
  import SaveIndicator from "./SaveIndicator.svelte";

  let editor = $state();
  let lastSaved = $state(null);

  // Auto-save functionality using runes
  $effect(() => {
    if (editor) {
      const debounce = setTimeout(() => {
        saveDocument(editor.getHTML());
        lastSaved = new Date();
      }, 1000);

      return () => clearTimeout(debounce);
    }
  });
</script>

<Tipex bind:tipex={editor} body={body}>
  {#snippet head(tipex)}<div class="editor-header">
      <DocumentStats {tipex} />
      <SaveIndicator {lastSaved} />
    </div>{/snippet}

  {#snippet controlComponent(tipex)}<CustomControl {tipex} />{/snippet}

  {#snippet foot(tipex)}<div class="editor-footer">
      <span class="status">Ready</span>
      <span class="word-count">{getWordCount(tipex)} words</span>
    </div>{/snippet}
</Tipex>
```

--------------------------------

### Define Custom Tiptap Extensions for Tipex

Source: https://tipex.pages.dev/customization

Shows how to create custom Tiptap extensions, such as 'Highlight' for text styling and 'WordCount' for tracking editor content. It includes defining options, global attributes, commands, and storage, then integrating them into the Tipex editor.

```svelte
<script>
  import { Extension } from '@tiptap/core';
  import { defaultExtensions, Tipex } from "@friendofsvelte/tipex";

  // Custom extension for highlighting text
  const Highlight = Extension.create({
    name: 'highlight',

    addOptions() {
      return {
        multicolor: true,
        HTMLAttributes: {},
      };
    },

    addGlobalAttributes() {
      return [
        {
          types: ['textStyle'],
          attributes: {
            backgroundColor: {
              default: null,
              parseHTML: element => element.style.backgroundColor,
              renderHTML: attributes => {
                if (!attributes.backgroundColor) return {};
                return { style: `background-color: ${attributes.backgroundColor}` };
              },
            },
          },
        },
      ];
    },

    addCommands() {
      return {
        setHighlight: (attributes) => ({ commands }) => {
          return commands.setMark('textStyle', attributes);
        },
        toggleHighlight: (attributes) => ({ commands }) => {
          return commands.toggleMark('textStyle', attributes);
        },
        unsetHighlight: () => ({ commands }) => {
          return commands.unsetMark('textStyle');
        },
      };
    },
  });

  // Custom extension for word count
  const WordCount = Extension.create({
    name: 'wordCount',

    addStorage() {
      return {
        wordCount: 0,
        characterCount: 0,
      };
    },

    onUpdate() {
      const text = this.editor.getText();
      this.storage.wordCount = text.split(/\s+/).filter(word => word.length > 0).length;
      this.storage.characterCount = text.length;
    },
  });

  const customExtensions = [
    ...defaultExtensions,
    Highlight,
    WordCount,
    // Add more custom extensions
  ];
</script>

<Tipex extensions={customExtensions} body={body}>
  {#snippet controlComponent(tipex)}
    <div class="custom-controls">
      <!-- Highlight controls -->
      <button
        onclick={() => tipex.commands.setHighlight({ backgroundColor: '#ffeb3b' })}
        class="tipex-edit-button"
      >
        <iconify-icon icon="fa6-solid:highlighter"></iconify-icon>
      </button>

      <!-- Word count display -->
      <span class="word-count">
        Words: {tipex.storage.wordCount?.wordCount || 0}
      </span>
    </div>
  {/snippet}
</Tipex>
```

--------------------------------

### Add Built-in Tipex Utilities

Source: https://tipex.pages.dev/customization

Demonstrates how to include the default utility buttons, such as copy and link management, within the Tipex editor component. This requires importing and using the `Utility` component from the `@friendofsvelte/tipex` library.

```svelte
import {Utility} from "@friendofsvelte/tipex";
<Tipex body={body}>
  {#snippet utilities(tipex)}
    <Utility {tipex}/>
  {/snippet}
</Tipex>
```

--------------------------------

### React to Editor Events and Execute Commands

Source: https://tipex.pages.dev/commands

Provides examples of how to listen to various editor events to trigger custom logic. This includes handling editor updates for auto-saving, responding to selection changes, and intercepting keydown events to implement custom shortcuts or auto-formatting.

```JavaScript
// Listen to editor events and execute commands
editor.on('update', ({ editor }) => {
    // Auto-save functionality
    const content = editor.getHTML()
    localStorage.setItem('editor-content', content)
})

editor.on('selectionUpdate', ({ editor }) => {
    // Update UI based on selection
    const { from, to } = editor.state.selection
    console.log(`Selection: ${from} to ${to}`)
})

// Custom keyboard shortcuts with commands
editor.on('keydown', (event) => {
    // Custom Ctrl+Shift+D for current date
    if (event.ctrlKey && event.shiftKey && event.key === 'D') {
        event.preventDefault()
        editor.commands.insertContent(`<p>${new Date().toLocaleDateString()}</p>`)
    }

    // Auto-format on Enter
    if (event.key === 'Enter') {
        const { $from } = editor.state.selection
        const currentLine = $from.parent.textContent

        if (currentLine.startsWith('# ')) {
            setTimeout(() => {
                editor.commands.setHeading({ level: 1 })
            }, 0)
        }
    }
})
```

--------------------------------

### Get Editor Reference (JavaScript)

Source: https://tipex.pages.dev/commands

Demonstrates how to obtain a reference to the Tipex editor instance, which is necessary for executing any commands. This involves binding the editor instance to a variable within your component.

```javascript
let editor;

// In your component
// <Tipex bind:tipex={editor} />

// Now you can use commands
// editor.commands.setContent('<p>Hello World</p>')

```

--------------------------------

### Define and Register Custom Editor Commands

Source: https://tipex.pages.dev/commands

Illustrates creating custom commands for specialized editor functionality. It shows how to define a command that inserts content and how to register it with the editor instance. Also includes examples for inserting dynamic content like dates and commands that automatically format text based on input.

```JavaScript
const customCommand = () => ({ commands }: { commands: any }) => {
    return commands.insertContent('Custom content inserted!')
}

// Register and use custom command
editor.commands.customCommand = customCommand()
editor.commands.customCommand()

// More complex custom command
const insertCurrentDate = () => ({ commands }: { commands: any }) => {
    const date = new Date().toLocaleDateString()
    return commands.insertContent(`<p>Today is ${date}</p>`) 
}

// Smart formatting command
const smartFormat = (text: string) => ({ commands }: { commands: any }) => {
    // Auto-detect and apply formatting
    if (text.startsWith('# ')) {
        return commands.setHeading({ level: 1 })
    } else if (text.startsWith('## ')) {
        return commands.setHeading({ level: 2 })
    } else if (text.startsWith('- ')) {
        return commands.setBulletList()
    }
    return commands.setParagraph()
}
```

--------------------------------

### Integrate Custom Tipex Utilities

Source: https://tipex.pages.dev/customization

Shows how to extend the utility area of the Tipex editor with your own custom buttons and functionality. This involves placing custom HTML elements, such as buttons, within the `utilities` snippet slot provided by the Tipex component.

```svelte
<Tipex body={body}>
 {#snippet utilities(tipex)}
   <div aria-label="Custom utility button">...</div>
 {/snippet}
</Tipex>
```

--------------------------------

### Handle Tipex Editor Events for Dynamic Behavior

Source: https://tipex.pages.dev/customization

Demonstrates how to use Tipex event listeners to react to editor changes and user interactions. This includes implementing auto-save on updates, custom keyboard shortcuts (e.g., Ctrl+S, Ctrl+Shift+L), selection updates, and focus/blur state management.

```svelte
<script>
  import { Tipex } from "@friendofsvelte/tipex";

  let editor = $state();
  let isTyping = $state(false);
  let typingTimer;

  function handleEditorReady(tipex) {
    // Auto-save setup
    tipex.on('update', ({ editor }) => {
      clearTimeout(typingTimer);
      isTyping = true;

      typingTimer = setTimeout(() => {
        isTyping = false;
        saveContent(editor.getHTML());
      }, 1000);
    });

    // Custom keyboard shortcuts
    tipex.on('keydown', (event) => {
      // Ctrl+S for save
      if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        saveContent(tipex.getHTML());
      }

      // Ctrl+Shift+L for link
      if (event.ctrlKey && event.shiftKey && event.key === 'L') {
        event.preventDefault();
        const url = prompt('Enter URL:');
        if (url) {
          tipex.commands.setLink({ href: url });
        }
      }
    });

    // Selection change handling
    tipex.on('selectionUpdate', ({ editor }) => {
      updateFloatingMenu(editor);
    });

    // Focus/blur handling
    tipex.on('focus', () => {
      document.body.classList.add('editor-focused');
    });

    tipex.on('blur', () => {
      document.body.classList.remove('editor-focused');
    });
  }

  async function saveContent(html) {
    try {
      await fetch('/api/save', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: html })
      });
    } catch (error) {
      console.error('Save failed:', error);
    }
  }
</script>

<Tipex
  bind:tipex={editor}
  body={body}
  onready={handleEditorReady}
>
  {#snippet head()}
    <div class="editor-status">
      {#if isTyping}
        <span class="status typing">Typing...</span>
      {:else}
        <span class="status saved">Saved</span>
      {/if}
    </div>
  {/snippet}
</Tipex>
```

--------------------------------

### Customize Tipex Layout with Slots (TypeScript)

Source: https://tipex.pages.dev/customization

Demonstrates advanced layout customization in Tipex using Svelte slots for head, control components, and foot. Includes reactive word count and auto-save functionality. Requires custom Svelte components for header, footer, and toolbar.

```typescript
<script lang="ts">
  import { Tipex } from "@friendofsvelte/tipex";
  import type { Editor } from '@tiptap/core';
  import DocumentHeader from "./DocumentHeader.svelte";
  import DocumentFooter from "./DocumentFooter.svelte";
  import CustomToolbar from "./CustomToolbar.svelte";

  let editor = $state<Editor>();
  let wordCount = $state(0);
  let lastSaved = $state<Date | null>(null);

  // Reactive word count using runes
  $effect(() => {
    if (editor) {
      const text = editor.getText();
      wordCount = text.split(/\s+/).filter(word => word.length > 0).length;
    }
  });

  // Auto-save functionality using runes
  $effect(() => {
    if (editor) {
      const debounceTimer = setTimeout(() => {
        saveDocument(editor.getHTML());
        lastSaved = new Date();
      }, 2000);

      return () => clearTimeout(debounceTimer);
    }
  });

  async function saveDocument(content: string) {
    try {
      await fetch('/api/documents/save', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content, timestamp: new Date().toISOString() })
      });
    } catch (error) {
      console.error('Auto-save failed:', error);
    }
  }
</script>

<Tipex bind:tipex={editor} body={body}>
  {#snippet head(tipex)}<DocumentHeader
      {wordCount}
      {lastSaved}
      characterCount={tipex.getText().length}
      readingTime={Math.ceil(wordCount / 200)}
    />{/snippet}

  {#snippet controlComponent(tipex)}<CustomToolbar
      {tipex}
      onSave={() => saveDocument(tipex.getHTML())}
      onExport={() => exportDocument(tipex.getHTML())}
    />{/snippet}

  {#snippet foot(tipex)}<DocumentFooter
      status={lastSaved ? 'saved' : 'unsaved'}
      {wordCount}
      version="1.2.3"
    />{/snippet}
</Tipex>
```

--------------------------------

### Replace Tipex Control Component

Source: https://tipex.pages.dev/customization

Demonstrates how to replace the default Tipex editor controls by providing a custom Svelte component via the `controlComponent` prop. This allows for complete UI customization of the editor's toolbar and actions.

```svelte
<Tipex body={body}>
   {#snippet controlComponent(tipex)}
	   <div aria-label="New Custom Control">...</div>
	 {/snippet}
</Tipex>
```

--------------------------------

### Customize Tipex Image Upload Handling

Source: https://tipex.pages.dev/customization

Shows how to customize Tipex's image upload process, including file validation (size, type) and integration with custom upload services. It adds a button to trigger the upload and insert the image using Tipex commands. Requires an 'iconify-icon' component.

```javascript
<script>
  import { Tipex } from "@friendofsvelte/tipex";

  async function handleImageUpload(file) {
    // Custom validation
    const maxSize = 5 * 1024 * 1024; // 5MB
    const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];

    if (!allowedTypes.includes(file.type)) {
      throw new Error('Unsupported file type');
    }

    if (file.size > maxSize) {
      throw new Error('File too large');
    }

    // Upload to your service (Cloudinary, AWS S3, etc.)
    const formData = new FormData();
    formData.append('image', file);

    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) throw new Error('Upload failed');

    const { url, publicId } = await response.json();

    return {
      src: url,
      alt: file.name,
      'data-public-id': publicId // For later deletion
    };
  }

  let editor;
</script>

<Tipex bind:tipex={editor} body={body}>
  {#snippet utilities(tipex)}<button
      class="tipex-edit-button tipex-button-rigid"
      onclick={() => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';
        input.onchange = async (e) => {
          const file = e.target.files[0];
          if (file) {
            try {
              const imageData = await handleImageUpload(file);
              tipex.commands.setImage(imageData);
            } catch (error) {
              alert('Upload failed: ' + error.message);
            }
          }
        };
        input.click();
      }}
      aria-label="Upload image"
    >
      <iconify-icon icon="fa6-solid:image"></iconify-icon>
    </button>{/snippet}
</Tipex>
```

--------------------------------

### Enhance Tipex Editor Accessibility

Source: https://tipex.pages.dev/customization

Implements custom ARIA labels, keyboard shortcuts for headings and lists, and screen reader announcements for a more accessible rich text editing experience. It integrates with the Tipex editor component.

```javascript
function enhanceAccessibility(tipex) {
  // Add custom ARIA labels
  const editorElement = tipex.view.dom;
  editorElement.setAttribute('aria-label', 'Rich text editor');
  editorElement.setAttribute('role', 'textbox');
  editorElement.setAttribute('aria-multiline', 'true');

  // Custom keyboard shortcuts for accessibility
  tipex.on('keydown', (event) => {
    // Alt+1-6 for headings
    if (event.altKey && event.key >= '1' && event.key <= '6') {
      event.preventDefault();
      const level = parseInt(event.key);
      tipex.commands.toggleHeading({ level });

      // Announce to screen readers
      announceToScreenReader(`Heading level ${level} applied`);
    }

    // Alt+L for list
    if (event.altKey && event.key === 'l') {
      event.preventDefault();
      tipex.commands.toggleBulletList();
      announceToScreenReader('Bullet list toggled');
    }
  });
}

function announceToScreenReader(message) {
  const announcement = document.createElement('div');
  announcement.setAttribute('aria-live', 'polite');
  announcement.setAttribute('aria-atomic', 'true');
  announcement.className = 'sr-only';
  announcement.textContent = message;

  document.body.appendChild(announcement);
  setTimeout(() => document.body.removeChild(announcement), 1000);
}
```

```svelte
<script>
  import Tipex from './Tipex.svelte'; // Assuming Tipex component path
  import { enhanceAccessibility } from './accessibility.js'; // Assuming accessibility functions are in a separate file

  let body = 'Initial content';
</script>

<Tipex
  body={body}
  onready={enhanceAccessibility}
  aria-label="Document editor"
>
  {#snippet controlComponent(tipex)}
    <div class="accessible-controls" role="toolbar" aria-label="Formatting options">
      <button
        class="tipex-edit-button"
        class:active={tipex.isActive('bold')}
        onclick={() => tipex.commands.toggleBold()}
        aria-label="Toggle bold formatting"
        aria-pressed={tipex.isActive('bold')}
      >
        <strong>B</strong>
      </button>

      <button
        class="tipex-edit-button"
        class:active={tipex.isActive('italic')}
        onclick={() => tipex.commands.toggleItalic()}
        aria-label="Toggle italic formatting"
        aria-pressed={tipex.isActive('italic')}
      >
        <em>I</em>
      </button>
    </div>
  {/snippet}
</Tipex>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
```

--------------------------------

### Tailwind CSS v4 Theme Configuration

Source: https://tipex.pages.dev/customization

Demonstrates how to override Tipex's visual design using Tailwind CSS v4's modern `@theme` configuration system and CSS custom properties. This allows for comprehensive theming of colors, typography, spacing, and shadows for both light and dark modes.

```css
/* Modern Tailwind v4 Theme Configuration */
@import "tailwindcss";

@theme {
  /* Tipex Design System Override */
  --color-tipex-*: initial;

  /* Custom Primary Colors */
  --color-tipex-primary: #10b981; /* Custom green */
  --color-tipex-primary-dark: #34d399;

  /* Editor Colors */
  --color-tipex-editor-bg: #fafafa;
  --color-tipex-editor-bg-dark: #0f172a;
  --color-tipex-editor-text: #111827;
  --color-tipex-editor-text-dark: #f9fafb;

  /* Control Colors */
  --color-tipex-control-bg: #ffffff;
  --color-tipex-control-bg-dark: #1f2937;
  --color-tipex-control-hover: #f1f5f9;
  --color-tipex-control-hover-dark: #374151;
  --color-tipex-control-active: #dcfce7;
  --color-tipex-control-active-dark: #1e3a8a;

  /* Typography Scale */
  --text-tipex-base: 1.125rem;
  --text-tipex-lg: 1.25rem;
  --text-tipex-xl: 1.5rem;

  /* Spacing Scale */
  --spacing-tipex-xs: 0.25rem;
  --spacing-tipex-sm: 0.5rem;
  --spacing-tipex-md: 1rem;
  --spacing-tipex-lg: 1.5rem;
  --spacing-tipex-xl: 2rem;

  /* Border Radius */
  --radius-tipex-sm: 0.25rem;
  --radius-tipex-md: 0.375rem;
  --radius-tipex-lg: 0.5rem;

  /* Shadows */
  --shadow-tipex-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-tipex-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-tipex-focus: 0 0 0 3px rgb(16 185 129 / 0.5);
  --shadow-tipex-focus-dark: 0 0 0 3px rgb(52 211 153 / 0.5);
}

/* Custom Dark Mode Variant (Tailwind v4) */
@custom-variant dark (&:where(.dark, .dark *));

/* Component Layer Customization */
@layer components {
  .tipex-editor {
    @apply bg-tipex-editor-bg dark:bg-tipex-editor-bg-dark
           border-tipex-editor-border dark:border-tipex-editor-border-dark
           rounded-tipex-md;
  }

  .tipex-editor.focused.focal {
    @apply shadow-tipex-focus dark:shadow-tipex-focus-dark
           border-transparent outline-none;
  }

  .custom-editor-theme {
    @apply bg-gradient-to-br from-tipex-editor-bg to-tipex-control-bg
           dark:from-tipex-editor-bg-dark dark:to-tipex-control-bg-dark;
  }
}
```

--------------------------------

### Customize Tipex Extensions with TypeScript

Source: https://tipex.pages.dev/customization

This snippet demonstrates how to customize default Tipex extensions by importing specific Tiptap extensions and configuring them. It shows how to filter out default extensions, configure Heading levels, enable Text Alignment, multicolor Highlighting, Underline, and Table features. The custom extensions are then passed to the Tipex component.

```typescript
<script lang="ts">
  import { defaultExtensions, Tipex } from "@friendofsvelte/tipex";
  import { Heading } from '@tiptap/extension-heading';
  import { TextAlign } from '@tiptap/extension-text-align';
  import { Highlight } from '@tiptap/extension-highlight';
  import { Underline } from '@tiptap/extension-underline';
  import { Table } from '@tiptap/extension-table';
  import { TableRow } from '@tiptap/extension-table-row';
  import { TableHeader } from '@tiptap/extension-table-header';
  import { TableCell } from '@tiptap/extension-table-cell';
  import type { Extensions } from '@tiptap/core';

  // Custom extension configuration
  const customExtensions: Extensions = [
    ...defaultExtensions.filter(ext => ext.name !== 'heading'), // Remove default heading

    // Custom heading configuration
    Heading.configure({
      levels: [1, 2, 3, 4], // Only allow H1-H4
      HTMLAttributes: {
        class: 'custom-heading',
      },
    }),

    // Text alignment support
    TextAlign.configure({
      types: ['heading', 'paragraph'],
      alignments: ['left', 'center', 'right', 'justify'],
      defaultAlignment: 'left',
    }),

    // Highlighting with multiple colors
    Highlight.configure({
      multicolor: true,
      HTMLAttributes: {
        class: 'custom-highlight',
      },
    }),

    // Underline support
    Underline.configure({
      HTMLAttributes: {
        class: 'custom-underline',
      },
    }),

    // Table support
    Table.configure({
      resizable: true,
      HTMLAttributes: {
        class: 'custom-table',
      },
    }),
    TableRow,
    TableHeader,
    TableCell,
  ];

  let body = `
    <h1>Welcome to Enhanced Tipex</h1>
    <p>This editor now supports:</p>
    <ul>
      <li>Custom heading levels (H1-H4 only)</li>
      <li>Text alignment options</li>
      <li><mark data-color="#ffeb3b">Multi-color highlighting</mark></li>
      <li><u>Underlined text</u></li>
      <li>Resizable tables</li>
    </ul>
  `;
</script>

<Tipex extensions={customExtensions} {body} />

```

--------------------------------

### Tailwind v4 Premium Theme Configuration

Source: https://tipex.pages.dev/customization

This snippet defines a premium theme for Tailwind CSS v4, establishing custom design system variables for colors, typography, spacing, and shadows. It includes component styles for editors and controls, along with custom scrollbar styling, demonstrating advanced theming capabilities.

```css
/* Custom Tipex Theme with Tailwind v4 */
@import "tailwindcss";

@theme {
  /* Custom Tipex Design System */
  --color-tipex-*: initial;

  /* Brand Colors */
  --color-tipex-primary: #8b5cf6; /* Purple brand */
  --color-tipex-primary-dark: #a78bfa;
  --color-tipex-secondary: #64748b;
  --color-tipex-secondary-dark: #94a3b8;

  /* Custom Editor Theme */
  --color-tipex-editor-bg: #fefefe;
  --color-tipex-editor-bg-dark: #0c0a09;
  --color-tipex-editor-border: #e2e8f0;
  --color-tipex-editor-border-dark: #292524;
  --color-tipex-editor-text: #0f172a;
  --color-tipex-editor-text-dark: #fafaf9;

  /* Premium Control Colors */
  --color-tipex-control-bg: #ffffff;
  --color-tipex-control-bg-dark: #1c1917;
  --color-tipex-control-hover: #f8fafc;
  --color-tipex-control-hover-dark: #292524;
  --color-tipex-control-active: #ede9fe;
  --color-tipex-control-active-dark: #581c87;
  --color-tipex-control-border: #cbd5e1;
  --color-tipex-control-border-dark: #44403c;

  /* Enhanced Typography */
  --text-tipex-xs: 0.8125rem;
  --text-tipex-sm: 0.9375rem;
  --text-tipex-base: 1.0625rem;
  --text-tipex-lg: 1.1875rem;
  --text-tipex-xl: 1.375rem;
  --text-tipex-2xl: 1.625rem;

  /* Custom Spacing */
  --spacing-tipex-xs: 0.375rem;
  --spacing-tipex-sm: 0.625rem;
  --spacing-tipex-md: 1.125rem;
  --spacing-tipex-lg: 1.75rem;
  --spacing-tipex-xl: 2.25rem;

  /* Modern Shadows */
  --shadow-tipex-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08);
  --shadow-tipex-md: 0 4px 8px -2px rgb(0 0 0 / 0.12);
  --shadow-tipex-lg: 0 8px 16px -4px rgb(0 0 0 / 0.16);
  --shadow-tipex-focus: 0 0 0 3px rgb(139 92 246 / 0.4);
  --shadow-tipex-focus-dark: 0 0 0 3px rgb(167 139 250 / 0.4);
}

/* Custom Dark Mode Variant */
@custom-variant dark (&:where(.dark, .dark *));

/* Premium Component Styling */
@layer components {
  .tipex-editor-premium {
    @apply bg-gradient-to-br from-tipex-editor-bg via-white to-tipex-control-bg
           dark:from-tipex-editor-bg-dark dark:via-stone-900 dark:to-tipex-control-bg-dark
           border-2 border-tipex-editor-border dark:border-tipex-editor-border-dark
           rounded-tipex-lg shadow-tipex-md;
  }

  .tipex-editor-premium.focused.focal {
    @apply shadow-tipex-focus dark:shadow-tipex-focus-dark
           border-tipex-primary dark:border-tipex-primary-dark
           outline-none ring-2 ring-tipex-primary/20 dark:ring-tipex-primary-dark/20;
  }

  .tipex-control-premium {
    @apply bg-tipex-control-bg/90 dark:bg-tipex-control-bg-dark/90
           backdrop-blur-sm border border-tipex-control-border/50 dark:border-tipex-control-border-dark/50
           rounded-tipex-md shadow-tipex-sm;
  }

  .tipex-button-premium {
    @apply px-tipex-md py-tipex-sm
           bg-gradient-to-b from-tipex-control-bg to-tipex-control-hover
           dark:from-tipex-control-bg-dark dark:to-tipex-control-hover-dark
           border border-tipex-control-border dark:border-tipex-control-border-dark
           rounded-tipex-sm shadow-tipex-sm
           hover:shadow-tipex-md hover:scale-105
           active:scale-95 active:shadow-tipex-sm
           transition-all duration-150 ease-out
           focus:outline-none focus:ring-2 focus:ring-tipex-primary/40;
  }

  .tipex-button-premium.active {
    @apply bg-gradient-to-b from-tipex-control-active to-tipex-primary/10
           dark:from-tipex-control-active-dark dark:to-tipex-primary-dark/10
           border-tipex-primary dark:border-tipex-primary-dark
           text-tipex-primary dark:text-tipex-primary-dark
           shadow-tipex-md ring-2 ring-tipex-primary/20 dark:ring-tipex-primary-dark/20;
  }

  .tipex-scrollbar-premium {
    scrollbar-width: thin;
    scrollbar-color: rgb(139 92 246 / 0.3) transparent;
  }

  .tipex-scrollbar-premium::-webkit-scrollbar {
    width: 6px;
  }

  .tipex-scrollbar-premium::-webkit-scrollbar-track {
    background: transparent;
  }

  .tipex-scrollbar-premium::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgb(139 92 246 / 0.3), rgb(139 92 246 / 0.5));
    border-radius: 3px;
  }

  .tipex-scrollbar-premium::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgb(139 92 246 / 0.5), rgb(139 92 246 / 0.7));
  }

  .dark .tipex-scrollbar-premium {
    scrollbar-color: rgb(167 139 250 / 0.4) transparent;
  }

  .dark .tipex-scrollbar-premium::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgb(167 139 250 / 0.3), rgb(167 139 250 / 0.5));
  }

  .dark .tipex-scrollbar-premium::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgb(167 139 250 / 0.5), rgb(167 139 250 / 0.7));
  }
}

```

--------------------------------

### Advanced Command Patterns and Chaining

Source: https://tipex.pages.dev/commands

Explores advanced editor command usage including chaining multiple commands, conditional execution, checking command executability, custom command wrappers, and batch operations using transactions.

```typescript
// Command chaining for complex operations
editor.chain()
    .focus()
    .toggleBold()
    .toggleItalic()
    .setTextAlign('center')
    .run()

// Conditional command execution
if (editor.isActive('bold')) {
    editor.chain().focus().unsetBold().setItalic().run()
} else {
    editor.chain().focus().setBold().run()
}

// Check if command can be executed
const canToggleBold = editor.can().toggleBold()
const canSetHeading = editor.can().setHeading({ level: 2 })

// Custom command wrapper with error handling
function safeCommand(command: () => boolean) {
    try {
        const result = command()
        if (!result) {
            console.warn('Command execution failed')
        }
        return result
    } catch (error) {
        console.error('Command error:', error)
        return false
    }
}

// Usage
safeCommand(() => editor.chain().focus().toggleBold().run())

// Batch operations with transaction
editor.chain()
    .command(({ tr }) => {
        // Custom transaction operations
        tr.insertText('Hello')
        tr.addMark(0, 5, editor.schema.marks.bold.create())
        return true
    })
    .run()
```

--------------------------------

### Tipex Props and Configuration

Source: https://tipex.pages.dev/index

Documentation for Tipex component props, detailing their types, default values, and descriptions for customization and configuration.

```APIDOC
Tipex Component Props:

- extensions: Extensions[] | defaultExtensions
  - Description: Extensions to be used in the editor.
- floating: boolean | false
  - Description: Determines display of default floating menu.
- oncreate: function | () => {}
  - Description: Callback function when the editor is created.
- ondestroy: function | () => {}
  - Description: Callback function when the editor is destroyed.
- onupdate: function | () => {}
  - Description: Callback function when the editor is updated.
- body: string | ''
  - Description: HTML content to render.
- this: TipTap | N/A
  - Description: Instance of the editor.
- class: string | ''
  - Description: Additional CSS classes to apply to the editor container.
- style: string | ''
  - Description: Inline styles to apply to the editor container.
- focal: boolean | true
  - Description: Focus outline when editing (blue ring).
- ctxId: ${string}_tipex | _tipex
  - Description: Sets context ID to get editor instance via getContext.

Note: For better customization, please have a look at [[Slot Props](/customization#slot-props)].

```

--------------------------------

### Image Handling in Tipex Editor

Source: https://tipex.pages.dev/commands

Demonstrates how to insert images, handle file uploads with validation (type, size), use base64 for small images, and process pasted images within the editor.

```typescript
// Basic image insertion
editor.commands.setImage({
    src: 'https://example.com/image.jpg',
    alt: 'Description',
    title: 'Image title'
})

// Handle file uploads with validation
async function handleImageUpload(file: File) {
    // Validate file type
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
    if (!allowedTypes.includes(file.type)) {
        throw new Error('Unsupported file type')
    }

    // Validate file size (e.g., 5MB limit)
    const maxSize = 5 * 1024 * 1024
    if (file.size > maxSize) {
        throw new Error('File too large')
    }

    try {
        // Option 1: Upload to server
        const formData = new FormData()
        formData.append('image', file)

        const response = await fetch('/api/upload', {
            method: 'POST',
            body: formData
        })

        if (!response.ok) throw new Error('Upload failed')

        const { url, alt } = await response.json()

        editor.commands.setImage({
            src: url,
            alt: alt || file.name,
            title: file.name
        })

    } catch (error) {
        console.error('Image upload failed:', error)

        // Option 2: Fallback to base64 for small images
        if (file.size < 1024 * 1024) { // 1MB limit for base64
            const reader = new FileReader()
            reader.onload = (e) => {
                editor.commands.setImage({
                    src: e.target?.result as string,
                    alt: file.name,
                    title: file.name
                })
            }
            reader.readAsDataURL(file)
        }
    }
}

// Handle paste events for images
editor.on('paste', (event) => {
    const items = event.clipboardData?.items
    if (!items) return

    for (const item of items) {
        if (item.type.startsWith('image/')) {
            const file = item.getAsFile()
            if (file) {
                handleImageUpload(file)
                event.preventDefault()
            }
        }
    }
})
```

--------------------------------

### Content Management Commands (JavaScript)

Source: https://tipex.pages.dev/commands

Covers essential commands for managing editor content, including setting, inserting, clearing, and focusing. These operations allow for full control over the editor's state and content.

```javascript
// Set entire editor content
editor.commands.setContent('<p>Hello World</p>')
editor.commands.setContent(htmlString, true) // true to emit update event

// Insert content at current cursor position
editor.commands.insertContent('New content')
editor.commands.insertContent('<p>HTML content</p>')

// Insert content at specific position
editor.commands.insertContentAt(10, 'Content at position 10')

// Clear all content
editor.commands.clearContent()
editor.commands.clearContent(true) // true to emit update event

// Focus the editor
editor.commands.focus()
editor.commands.focus('start') // Focus at start
editor.commands.focus('end')   // Focus at end
editor.commands.focus(10)      // Focus at specific position

// Blur (unfocus) the editor
editor.commands.blur()

```

--------------------------------

### History and Undo/Redo Operations

Source: https://tipex.pages.dev/commands

Details how to perform undo and redo actions, check their availability, clear the editor's history, and create custom UI elements for history management.

```typescript
// Undo/Redo operations
editor.commands.undo()
editor.commands.redo()

// Check if undo/redo is available
const canUndo = editor.can().undo()
const canRedo = editor.can().redo()

// Clear history
editor.commands.clearHistory()

// Custom undo/redo buttons
function createHistoryButton(type: 'undo' | 'redo') {
    return {
        canExecute: () => type === 'undo' ? editor.can().undo() : editor.can().redo(),
        execute: () => type === 'undo' ? editor.commands.undo() : editor.commands.redo(),
        isDisabled: () => type === 'undo' ? !editor.can().undo() : !editor.can().redo()
    }
}
```

--------------------------------

### Import Tipex Styles

Source: https://tipex.pages.dev/index

Import the Tipex CSS file to apply default styling, leveraging Tailwind CSS v4's architecture.

```typescript
import "@friendofsvelte/tipex/styles/index.css";
```

--------------------------------

### Selection and Cursor Management

Source: https://tipex.pages.dev/commands

Provides methods for controlling text selection, cursor positioning, deleting content, and navigating within the editor's content.

```typescript
// Selection operations
editor.commands.selectAll()
editor.commands.selectTextblockStart()
editor.commands.selectTextblockEnd()
editor.commands.selectNodeForward()
editor.commands.selectNodeBackward()

// Set selection to specific range
editor.commands.setTextSelection({ from: 0, to: 10 })
editor.commands.setTextSelection(5) // Set cursor at position 5

// Delete operations
editor.commands.deleteSelection()
editor.commands.deleteRange({ from: 0, to: 10 })
editor.commands.deleteCurrentNode()

// Navigation
editor.commands.goToNext()
editor.commands.goToPrevious()
```
Tokens:
Raw