Single-line Strong — DatoCMS plugin

A DatoCMS manual field extension that turns a JSON field into a single-line text input where selected text can be made bold — and nothing else. Editors get a clean one-line field; the value is stored as structured JSON (a segment array), so there's no HTML to parse or sanitize.

Features

• Bold, and only bold. A fixed B toolbar button and the native ⌘/Ctrl + B shortcut toggle bold on the current selection. No other marks or block types exist.
• Single line, always. Enter and Shift+Enter never insert a line break.
• Plain-text paste. Pasted content is stripped of all formatting and any newlines are collapsed to spaces.
• WYSIWYG. Bold renders as actual bold text — editors never see <strong> or raw JSON.
• Optional length limit. Set a max character count per field; a live “X/Y” counter shows progress and input is hard-blocked at the limit. Bold markup doesn’t count toward the limit.
• Localization & read-only are supported out of the box.

Install

The plugin is on the DatoCMS Marketplace:

1. In your project: Settings → Plugins → Add new plugin.
2. Search for Single-line strong and install it.

Then attach it to a field:

1. On a model, add or edit a JSON field (the plugin only offers itself for json fields).
2. Open the field’s Presentation tab and choose Single-line strong as the editor.
3. (Optional) set a Maximum character count. Leave it empty for no limit.

That’s it — edit a record and the field behaves like a single-line input with a bold toggle.

Stored value

An empty field stores null. A non-empty field stores a JSON string holding the normalized segment array plus a plain-text mirror:

1
{
2
  "segments": [
3
    { "value": "This is my ", "mark": false },
4
    { "value": "highlighted", "mark": true },
5
    { "value": " text", "mark": false }
6
  ],
7
  "raw": "This is my highlighted text"
8
}

Each segment is a run of text that is either bold (mark: true) or not. The array is normalized — adjacent runs with the same mark are merged and there are no empty runs — so a given rendered text always serializes to exactly one array. See SPEC.md for the full data contract and normalization rules.

Rendering the value on your frontend

The JSON→HTML transform is owned by the consuming app (intentionally out of scope for the plugin). A minimal renderer:

1
type Segment = { value: string; mark: boolean };
2

3
const escapeHtml = (s: string) =>
4
  s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
5

6
export function renderStrong(fieldValue: string | null): string {
7
  if (!fieldValue) return '';
8
  const { segments } = JSON.parse(fieldValue) as { segments: Segment[] };
9
  return segments
10
    .map((s) =&gt; (s.mark ? `<strong>${escapeHtml(s.value)}</strong>` : escapeHtml(s.value)))
11
    .join('');
12
}

If you only need the unformatted text (slugs, meta tags), use the raw mirror directly.

Development

1
npm install
2
npm run dev      # serve the plugin at http://localhost:5173
3
npm run build    # typecheck (tsc -b) + production build into dist/
4
npm test         # run the segment / bridge test suites (vitest)

To try local changes against a real project, run npm run dev, then in DatoCMS go to Settings → Plugins → Add new plugin → Advanced and register http://localhost:5173 as the entry-point URL. Dato loads the plugin in an iframe from that URL, so changes hot-reload as you edit.

Built with React + Vite + TypeScript on datocms-plugin-sdk / datocms-react-ui, using Lexical as the editor engine.

License

MIT © 9elements