Bold

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

When to use

Use Bold when you need:

A standard  mark with Cmd+B and **markdown** input rules
Permissive HTML parsing that accepts , , and CSS font-weight: 600+ so pasted content from Google Docs, Word, and Notion lands correctly
Programmatic control via setBold, unsetBold, and toggleBold commands

Notes:

Bold renders  (semantic emphasis), not  (presentational), to match accessibility best practices
Disable in StarterKit with StarterKit.configure({ bold: false }) if you have a custom bold implementation

Live Playground

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

Themed
Headless

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

Click to try it out

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:

import { Document, Paragraph, Text, Bold } from '@domternal/core';
import { DomternalEditor, DomternalToolbar } from '@domternal/vanilla';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;
const toolbarEl = document.createElement('div');
editorEl.before(toolbarEl);

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

new DomternalToolbar(toolbarEl, { editor: dm.editor });

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>';
}

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

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>
  );
}

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { Document, Paragraph, Text, Bold } from '@domternal/core';

const extensions = [Document, Paragraph, Text, Bold];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>This is <strong>bold</strong> text.</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

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.

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