CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--extension-hard-break

Tiptap extension that implements hard break functionality for rich text editors with configurable keyboard shortcuts and mark preservation.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Tiptap Hard Break Extension

The Tiptap Hard Break Extension provides hard break functionality for rich text editors built with the Tiptap framework. It allows users to insert line breaks (represented as <br> HTML elements) within text content using keyboard shortcuts, with configurable options for preserving text marks and customizing HTML attributes.

Package Information

  • Package Name: @tiptap/extension-hard-break
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-hard-break

Core Imports

import { HardBreak } from "@tiptap/extension-hard-break";

Default import:

import HardBreak from "@tiptap/extension-hard-break";

CommonJS:

const { HardBreak } = require("@tiptap/extension-hard-break");

Basic Usage

import { Editor } from "@tiptap/core";
import { HardBreak } from "@tiptap/extension-hard-break";

const editor = new Editor({
  extensions: [
    HardBreak.configure({
      keepMarks: true,
      HTMLAttributes: {
        class: 'my-hard-break'
      }
    })
  ],
  content: '<p>This is some text.<br>This is on a new line.</p>'
});

// Insert hard break programmatically
editor.commands.setHardBreak();

Capabilities

Extension Configuration

The HardBreak extension can be configured with options to control mark preservation and HTML attributes.

const HardBreak: Node<HardBreakOptions>;

interface HardBreakOptions {
  /**
   * Controls if marks should be kept after being split by a hard break.
   * @default true
   */
  keepMarks: boolean;

  /**
   * HTML attributes to add to the hard break element.
   * @default {}
   */
  HTMLAttributes: Record<string, any>;
}

Commands

The extension adds a command to insert hard breaks programmatically.

// Command interface extension
interface Commands<ReturnType> {
  hardBreak: {
    /**
     * Add a hard break at the current cursor position
     */
    setHardBreak: () => ReturnType;
  };
}

Usage Examples:

// Insert hard break using command
editor.commands.setHardBreak();

// Check if command can be executed
if (editor.can().setHardBreak()) {
  editor.commands.setHardBreak();
}

// Chain with other commands
editor.chain()
  .insertContent('Some text')
  .setHardBreak()
  .insertContent('More text')
  .run();

Keyboard Shortcuts

The extension provides built-in keyboard shortcuts for inserting hard breaks.

Default Shortcuts:

  • Mod-Enter (Ctrl/Cmd + Enter) - Insert hard break
  • Shift-Enter - Insert hard break

Node Properties

The HardBreak node has specific properties that define its behavior in the editor.

// Node configuration properties
interface NodeConfig {
  name: 'hardBreak';
  inline: true;
  group: 'inline';
  selectable: false;
  linebreakReplacement: true;
}

Extension Methods

The extension provides core methods for configuration and default values.

/**
 * Returns the default options for the HardBreak extension.
 * This method defines the baseline configuration that can be overridden via configure().
 */
addOptions(): HardBreakOptions;

Default Configuration:

// Default options returned by addOptions()
{
  keepMarks: true,
  HTMLAttributes: {}
}

HTML Rendering

The extension handles parsing and rendering of hard break elements.

// HTML parsing configuration
parseHTML(): {
  tag: 'br';
}[];

// HTML rendering function
renderHTML(options: { HTMLAttributes: Record<string, any> }): [
  'br',
  Record<string, any>
];

// Plain text rendering
renderText(): '\n';

Configuration Examples:

// Basic configuration
const editor = new Editor({
  extensions: [
    HardBreak
  ]
});

// Custom configuration
const editor = new Editor({
  extensions: [
    HardBreak.configure({
      keepMarks: false, // Don't preserve marks after break
      HTMLAttributes: {
        class: 'custom-break',
        'data-type': 'hard-break'
      }
    })
  ]
});

Types

/**
 * Main extension class created via Node.create<HardBreakOptions>()
 */
declare const HardBreak: Node<HardBreakOptions>;

/**
 * Configuration options for the HardBreak extension
 */
interface HardBreakOptions {
  /**
   * Controls if marks should be kept after being split by a hard break.
   * When true, text formatting (bold, italic, etc.) continues after the break.
   * @default true
   */
  keepMarks: boolean;

  /**
   * HTML attributes to add to the hard break element.
   * These attributes will be merged with any runtime attributes.
   * @default {}
   */
  HTMLAttributes: Record<string, any>;
}

docs

index.md

tile.json