Bold

The Bold mark applies bold formatting to text. It renders as <strong> and parses <strong>, <b>, and CSS font-weight styles (600+, bold, bolder). Included in StarterKit by default.

Live Playground

Select text and apply bold with buttons, keyboard shortcut (Cmd+B / Ctrl+B), or type **text** to trigger the input rule.

Vanilla JS/TS

With the default theme enabled. Click the B toolbar button or use Cmd+B / Ctrl+B.

Click to try it out

Angular

Click to try it out

Vanilla JS preview - Angular components produce the same output

React

Click to try it out

Vanilla JS preview - React components produce the same output

Headless

Plain editor without the theme. The buttons above call toggleBold(), setBold(), and unsetBold() directly.

Click to try it out

Usage

Bold is included in StarterKit, so it works out of the box. To use it standalone:

Vanilla JS/TS

import { Editor, Document, Paragraph, Text, Bold, defaultIcons } from '@domternal/core';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;

// Toolbar
const toolbar = document.createElement('div');
toolbar.className = 'dm-toolbar';
toolbar.innerHTML = `<div class="dm-toolbar-group">
  <button class="dm-toolbar-button" data-mark="bold">${defaultIcons.textB}</button>
</div>`;
editorEl.before(toolbar);

// Editor
const editor = new Editor({
  element: editorEl,
  extensions: [Document, Paragraph, Text, Bold],
  content: '<p>This is <strong>bold</strong> text.</p>',
});

// Toggle bold on click
toolbar.addEventListener('click', (e) => {
  const btn = (e.target as Element).closest<HTMLButtonElement>('[data-mark]');
  if (btn) editor.chain().focus().toggleBold().run();
});

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Bold } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent, DomternalToolbarComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Paragraph, Text, Bold];
  content = '<p>This is <strong>bold</strong> text.</p>';
}

editor.html

@if (editor(); as ed) {
  <domternal-toolbar [editor]="ed" />
}
<domternal-editor
  [extensions]="extensions"
  [content]="content"
  (editorCreated)="editor.set($event)"
/>

React

import { Domternal } from '@domternal/react';
import { Document, Paragraph, Text, Bold } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Bold]}
      content="<p>This is <strong>bold</strong> text.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

Headless

import { Editor, Document, Paragraph, Text, Bold } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Bold],
  content: '<p>This is <strong>bold</strong> text.</p>',
});

// Toggle bold programmatically
editor.chain().focus().toggleBold().run();

To disable Bold in StarterKit:

StarterKit.configure({ bold: false })

Schema

Property	Value
ProseMirror name	bold
Type	Mark
HTML tag	<strong>

Parsing rules

Bold parses from multiple HTML sources for maximum compatibility:

Source	Condition
<strong>	Always
<b>	Unless font-weight: normal or 400 (Google Docs compatibility)
CSS font-weight	Numeric value >= 600, or bold/bolder

Options

Option	Type	Default	Description
HTMLAttributes	Record<string, unknown>	{}	Custom HTML attributes added to the rendered <strong> element

import { Bold } from '@domternal/core';

const CustomBold = Bold.configure({
  HTMLAttributes: { class: 'my-bold' },
});

Commands

setBold

Applies bold formatting to the current selection.

editor.commands.setBold();

unsetBold

Removes bold formatting from the current selection.

editor.commands.unsetBold();

toggleBold

Toggles bold formatting on the current selection. Applies bold if not active, removes it if active.

editor.commands.toggleBold();

// With chaining
editor.chain().focus().toggleBold().run();

Keyboard shortcuts

Key	Action
Mod-B	Toggle bold (toggleBold)

Mod is Cmd on macOS and Ctrl on Windows/Linux.

Input rules

Input	Result
**text**	Wraps text in bold
__text__	Wraps text in bold

Type the closing ** or __ to trigger the conversion. The markers are removed and the text between them becomes bold.

Toolbar items

Bold registers a button in the toolbar with the name bold in group format at priority 200.

Item	Type	Command	Icon	Shortcut	Active when
Bold	button	toggleBold	textB	Mod-B	Bold mark is active on selection

Exports

import { Bold } from '@domternal/core';
import type { BoldOptions } from '@domternal/core';

Export	Type	Description
Bold	Mark extension	The bold mark extension
BoldOptions	TypeScript type	Options for Bold.configure()

Source

@domternal/core - Bold.ts