vyuhDiagram
Extensions

Range and whole-story formatting ​

Loading interactive example…Open in new tab ↗
Opening the live canvas…

Bold picnic toggles bold on the first occurrence of “picnic”, preserving the word's underline and color. Italic story toggles italic across both the paragraph and checklist. Clear picnic targets the same word and clears marks and explicit appearance only in that first range. These buttons demonstrate explicit API offsets; if you edit the text, the range still refers to offsets 0–6, not a word search.

Double-click the text to select a different range and try keyboard formatting. The action buttons do not represent or capture the current caret selection. Save, edit, then Restore verifies that mixed formatting is document content. Undo and redo operate on each admitted change; Reset restores the original fixture.

Public API ​

dart
import 'package:vyuh_diagram_extension_rich_text/extension_api.dart';
import 'package:vyuh_diagram_extension_rich_text/vyuh_diagram_extension_rich_text.dart';

final story = controller.document.textById('invitation')!.textStory;
controller.edits.setMark(
  elementId: 'invitation',
  mark: TextMark.bold,
  // The button switches the mark: it sets the opposite of the range's.
  on: !RichTextFormatting.hasMark(story, TextMark.bold, start: 0, end: 6),
  start: 0,
  end: 6,
).requireAllowed();

setMark is a setter verb: there is no toggle verb, so a control that switches a mark reads RichTextFormatting.hasMark and passes the opposite as on. The verb validates the range against the text's grammar and publishes it with history. Locked or noneditable targets return a denied result; requireAllowed throws DiagramChangeDenied. Omit the range to set a mark across the whole story, and perform clearFormatting to clear a range. See verbs.

Source: apps/demo/lib/examples/text/formatting.dart. See text and paragraphs for caret, range, region and grammar rules. This example does not qualify browser IME or screen-reader behavior.