TipToB: TipTap ToolBox

TipToB is a customizable, web component-based toolbox for TipTap.
It provides a set of ready-to-use Svelte web components and extensions for building modern, flexible, and framework-agnostic rich text editing experiences.

Features

• Web Components: Use editor buttons and menus as custom elements in any framework or plain HTML.
• TipTap Extensions: Includes a set of TipTap extensions for advanced editing features.
• Svelte-based: All UI components are written in Svelte for performance and reactivity.
• Customizable: Easily style and extend the toolbox to fit your needs.

Demo Editor

Installation

npm install @samhammer/tiptob

Usage

Using Web Components

import '@samhammer/tiptob/web-components.js';

Using Extensions

import { ImageExtension, KnowledgeExtension, SelectionDecoration, TableBubbleMenuExtension } 
 from '@samhammer/tiptob/extensions';

Components

• <tiptob-bold-button>
• <tiptob-italic-button>
• <tiptob-underline-button>
• <tiptob-bullet-list-button>
• <tiptob-ordered-list-button>
• <tiptob-font-color-button>
• <tiptob-font-highlight-button>
• <tiptob-image-button>
• <tiptob-knowledge-button>
• <tiptob-redo-button>
• <tiptob-undo-button>
• <tiptob-remove-format-button>
• <tiptob-strike-button>
• <tiptob-hyperlink-button>
• <tiptob-table-button>
• <tiptob-table-bubble-menu>
• <tiptob-text-align-button>

Extensions

• ImageExtension: Add image support to your editor. Bind a function that receives a File and returns a Promise<string>.
• TableBubbleMenuExtension: Bubble Menu for table editing support.

Styling

:root {
  --tiptob-bg-button: white;
  --tiptob-bg-button-hover: #e2e2e2;
  --tiptob-bg-button-highlighted: #a6ccf7;
  --tiptob-bg-icon: rgba(37, 39, 45, 0.37);
}