Editor Kit

A rich text editor built with TipTap, featuring a shadcn-inspired design.

Installation

# npm
npm install @seoulcomix-hub/editor-kit-editor

# yarn
yarn add @seoulcomix-hub/editor-kit-editor

Usage

Basic Usage

import { TiptapEditor } from '@seoulcomix-hub/editor-kit-editor';
import '@seoulcomix-hub/editor-kit-editor/dist/editor.css';

function MyEditor() {
  const [content, setContent] = useState('<p>Hello World!</p>');

  return (
    <TiptapEditor
      content={content}
      onChange={(newContent) => setContent(newContent)}
      placeholder="Start typing..."
    />
  );
}

Styling Options

1. CSS Import (Recommended)

The simplest way to include styles is to import the CSS file:

import '@seoulcomix-hub/editor-kit-editor/dist/editor.css';

2. Using the CSS Path Constants

You can use the exported path constants for dynamic imports:

import { CSS_PATH } from '@seoulcomix-hub/editor-kit-editor';

// Then use CSS_PATH to dynamically import or create a link tag

Components

TiptapEditor

The main editor component that combines the toolbar and editor.

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | '' | Initial HTML content | | placeholder | string | 'Start typing...' | Placeholder text | | onChange | function | - | Callback when content changes | | editable | boolean | true | Whether the editor is editable | | showToolbar | boolean | true | Whether to show the toolbar |

Editor

The core editor component without the toolbar.

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | '' | Initial HTML content | | placeholder | string | 'Start typing...' | Placeholder text | | onChange | function | - | Callback when content changes | | onEditorReady | function | - | Callback when editor is ready | | editable | boolean | true | Whether the editor is editable |

Toolbar

The toolbar component with formatting options.

| Prop | Type | Default | Description | |------|------|---------|-------------| | editor | Editor | null | TipTap editor instance |

Features

• Rich text formatting (bold, italic, underline)
• Headings (H1, H2)
• Lists (bullet and ordered)
• Code blocks with syntax highlighting
• Image support
• Link support
• Text alignment
• Undo/redo
• Shadcn-inspired design system

Development

# Install dependencies
yarn install

# Start development server
yarn dev

# Build the package
yarn build

CSS Classes

The editor uses a shadcn-inspired design with clean, modern styling:

Main CSS Classes

• .editor-container - The main editor container
• .editor-toolbar - The toolbar container
• .editor-toolbar button - Toolbar buttons
• .editor-toolbar button.is-active - Active toolbar buttons
• .tiptap-editor-container - The container for the entire editor component
• .ProseMirror - The editable content area

Customization

The editor uses direct CSS values, making it compatible with projects that already use shadcn UI or similar design systems. You can override the styles by targeting the CSS classes in your own stylesheets.

License

MIT