TinyMCE custom toolbar: register the control and keep its state accurate

An original dispatch-note editor labels a strikethrough control “Superseded.” Staff use it to mark an outdated collection instruction while writing the replacement underneath. The button should be active when the cursor sits in the superseded text and inactive in the replacement, regardless of which route applied the formatting.

Register on each editor instance

For an application where current TinyMCE is already loaded, adapt this initialization fragment:

tinymce.init({
  selector: '#dispatch-note',
  toolbar: 'undo redo | supersededInstruction',
  setup: (editor) => {
    editor.ui.registry.addToggleButton('supersededInstruction', {
      text: 'Superseded',
      tooltip: 'Toggle strikethrough on the selected instruction',
      onAction: () => {
        editor.execCommand('mceToggleFormat', false, 'strikethrough');
      },
      onSetup: (api) => {
        api.setActive(editor.formatter.match('strikethrough'));
        const listener = editor.formatter.formatChanged(
          'strikethrough',
          active => api.setActive(active)
        );
        return () => listener.unbind();
      }
    });
  }
});

Retain the application's existing license, loading, plugins, and other setup code. If it already has a setup callback, combine the registration into that callback. Replacing it would discard whatever the original setup installed.

The format name is the existing strikethrough format. “Superseded” is only this application's visible label; it adds no approval record, revision history, or business status. Keep the replacement instruction explicit so the meaning does not depend on a line through text alone.

Choose the correct kind of control

Use addButton for an action without a persistent on/off state, such as opening a review dialog. addToggleButton suits a format whose current selection can be active. TinyMCE also exposes menu and split-button registration for commands that need choices. The identifier connects registration to placement; adding an unknown string to toolbar does not implement its behavior.

The toggle button documentation distinguishes manual state changes from a selection-synchronized toggle. Here formatter.match() establishes the initial state, while formatChanged() keeps it current. The teardown returned from onSetup removes that listener when the control is destroyed.

Avoid a page-wide variable for the active editor when several dispatch notes appear together. The editor received by setup identifies the instance owning the control. Each initialized instance gets its own registration and selection listener.

Diagnose a missing or misleading button

If the button is absent, compare the registration identifier and toolbar string character for character, then check whether the expected setup callback runs. Inspect the responsive toolbar's overflow area before concluding that the control was never created.

If the button appears but does nothing, inspect the action and registered format. A formatting control needs an editable selection and the relevant formatting capability. If the document changes but the active state is wrong, inspect the listener and its cleanup rather than rewriting the saved HTML.

When an application recreates editors as a user changes records, ensure the old instance is destroyed through its normal lifecycle. Repeated mounts should not leave duplicate application listeners or controls referring to the previous record.

Check the instruction and the replacement separately

Use this fictional note as the development fixture:

<p>Collect the crates at the side gate.</p>
<p>Replacement: collect the crates at reception.</p>

Apply Superseded to the first instruction. Move the cursor between that text and the replacement and check the button state. Undo, redo, and apply the same format through any other enabled route. The control should follow the selected content instead of remembering its last click.

Save through the real form path and reopen the note. TinyMCE content extraction covers synchronizing the editor before capturing the form payload. Finish by reading both instructions in the recipient's view: reception must be the unambiguous current collection point, even when the authoring toolbar is absent.