or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

command-system.mdconfiguration.mdcore-plugin.mddocument-structure.mdediting-engine.mdindex.mdui-components.md
tile.json

tessl/npm-ckeditor--ckeditor5-heading

Headings feature for CKEditor 5 that provides structured heading levels (H1-H6) and paragraph formatting with configurable UI components.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ckeditor/ckeditor5-heading@46.0.x

To install, run

npx @tessl/cli install tessl/npm-ckeditor--ckeditor5-heading@46.0.0

index.mddocs/

CKEditor 5 Heading

CKEditor 5 Heading is a comprehensive headings feature plugin that provides structured heading levels (H1-H6) and paragraph formatting for CKEditor 5. It offers configurable heading options, multiple UI components (dropdown and individual buttons), and advanced document structuring capabilities with title/body separation.

Package Information

  • Package Name: @ckeditor/ckeditor5-heading
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ckeditor/ckeditor5-heading

Core Imports

import { Heading, HeadingEditing, HeadingUI } from '@ckeditor/ckeditor5-heading';

For configuration types:

import type { HeadingConfig, HeadingOption } from '@ckeditor/ckeditor5-heading';

For individual button components:

import { HeadingButtonsUI } from '@ckeditor/ckeditor5-heading';

For document structuring:

import { Title } from '@ckeditor/ckeditor5-heading';

Basic Usage

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Heading } from '@ckeditor/ckeditor5-heading';

ClassicEditor.create(document.querySelector('#editor'), {
    plugins: [Heading, /* other plugins */],
    toolbar: ['heading', /* other tools */],
    heading: {
        options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
            { model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
        ]
    }
});

Architecture

CKEditor 5 Heading is built around several key components:

  • Main Plugin: Heading combines editing and UI functionality as a single plugin
  • Editing Engine: HeadingEditing handles model-view conversion, commands, and Enter key behavior
  • UI Components: HeadingUI provides dropdown interface, HeadingButtonsUI provides individual buttons
  • Command System: HeadingCommand manages heading application and state tracking
  • Document Structure: Title plugin enables title/body document organization
  • Configuration System: Flexible heading options with custom view mappings and styling

Capabilities

Core Heading Plugin

Main plugin that combines editing and UI features for heading functionality. Provides the complete heading system with configurable options.

class Heading extends Plugin {
    static readonly pluginName: 'Heading';
    static readonly requires: [typeof HeadingEditing, typeof HeadingUI];
    static readonly isOfficialPlugin: true;
}

Core Heading Plugin

Heading Editing Engine

Engine functionality for heading conversion, commands, and model-view processing. Handles the core editing behavior for headings.

class HeadingEditing extends Plugin {
    static readonly pluginName: 'HeadingEditing';
    static readonly requires: [typeof Paragraph];
    static readonly isOfficialPlugin: true;
    
    constructor(editor: Editor);
    init(): void;
    afterInit(): void;
}

Heading Editing

UI Components

User interface components including dropdown selectors and individual heading buttons for toolbar integration.

class HeadingUI extends Plugin {
    static readonly pluginName: 'HeadingUI';
    static readonly isOfficialPlugin: true;
    
    init(): void;
}

class HeadingButtonsUI extends Plugin {
    init(): void;
}

UI Components

Command System

Heading command for programmatic heading application and state management.

class HeadingCommand extends Command {
    readonly value: false | string;
    readonly modelElements: Array<string>;
    
    constructor(editor: Editor, modelElements: Array<string>);
    refresh(): void;
    execute(options: { value: string }): void;
}

Command System

Document Structure

Advanced document structuring with title and body sections for document organization.

class Title extends Plugin {
    static readonly pluginName: 'Title';
    static readonly requires: ['Paragraph'];
    static readonly isOfficialPlugin: true;
    
    init(): void;
    getTitle(options?: Record<string, unknown>): string;
    getBody(options?: Record<string, unknown>): string;
}

Document Structure

Configuration System

Flexible configuration interfaces for customizing heading options, view mappings, and styling.

interface HeadingConfig {
    options?: Array<HeadingOption>;
}

type HeadingOption = HeadingElementOption | HeadingParagraphOption;

interface HeadingElementOption {
    model: 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | `heading${string}`;
    view: ViewElementDefinition;
    title: string;
    class: string;
    icon?: string;
    upcastAlso?: ArrayOrItem<ViewElementDefinition | MatcherPattern>;
    converterPriority?: 'low' | 'normal' | 'high';
}

interface HeadingParagraphOption {
    model: 'paragraph';
    title: string;
    class: string;
    icon?: string;
    upcastAlso?: ArrayOrItem<ViewElementDefinition | MatcherPattern>;
}

interface HeadingTitleConfig {
    placeholder?: string;
}

Configuration System

Types

// Re-exported from other CKEditor packages
import type { Plugin } from '@ckeditor/ckeditor5-core';
import type { Command } from '@ckeditor/ckeditor5-core';
import type { Editor } from '@ckeditor/ckeditor5-core';
import type { ViewElementDefinition } from '@ckeditor/ckeditor5-engine';
import type { MatcherPattern } from '@ckeditor/ckeditor5-engine';
import type { ArrayOrItem } from '@ckeditor/ckeditor5-utils';