Single-line Strong — DatoCMS plugin

A DatoCMS plugin that gives a field a single-line text input where selected text can be made bold — and nothing else. Editors get a clean one-line field. It works on Structured text fields (recommended) and, as a legacy option, on JSON fields.

Two ways to use it

The route is chosen by the field type, which is fixed when the field is created — there is no switch.

For a new field, use Structured text. The JSON route is legacy: supported, not recommended for new fields. Existing installs keep working and nothing is being removed.

Moving an existing JSON field to Structured text means creating a new field, migrating the content and updating your frontend. No migration is required: if the JSON route works for you, leave it as it is.

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. A live “X/Y” counter shows progress and input is hard-blocked at the limit. Bold markup doesn’t count toward it. On a Structured text field the limit is the field’s own length validator, so it is also enforced when the record saves; on a JSON field it is the plugin’s own setting.
• Safe on unexpected content. A value the editor can’t show — a second paragraph from an import, an unsupported mark — is flattened for display with a notice, and is only changed once you edit it. Opening a record never modifies it.
• 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 set up a field: a Structured text field for anything new, or the legacy JSON route for an existing JSON field.

Using it on a structured text field

The plugin can also take over a Structured text field. The field stays an ordinary structured text field as far as the rest of DatoCMS is concerned; only the editor you see changes.

Set the field up so it allows bold and nothing else:

1. Add a Structured text field to a model.
2. In its Presentation settings, allow the bold mark only, and allow no nodes (no headings, lists, links, quotes or code).
3. In its Validations settings, allow no embedded blocks, no inline blocks and no links to other records.
4. (Optional) in Validations, set a maximum number of characters. The editor shows it as a live counter and stops input at the limit, and DatoCMS enforces it when the record saves — including for values written by translation or scripts.
5. Back in Presentation, enable the Single-line strong addon.

If the field allows more than that, the addon’s settings panel says what — for example “This field also allows emphasis and underline, which the single-line editor cannot show.” It is only a heads-up: you can still save the field, and the editor simply drops what it cannot show the next time the field is edited.

Legacy: the JSON route

Existing JSON fields keep working, and the route stays supported. It is not recommended for new fields.

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.

Stored value

Structured text route. The field holds an ordinary structured text value: a single paragraph, with bold text carrying the strong mark. An empty field is null. Through the CMA and GraphQL you get it back as standard dast, like any other structured text field.

JSON route (legacy). 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

Structured text route. Nothing plugin-specific is needed. Render the field with whatever you already use for structured text. In Astro, with @datocms/astro:

1
---
2
import { StructuredText } from '@datocms/astro/StructuredText';
3
import { executeQuery } from '@datocms/cda-client';
4

5
const { page } = await executeQuery(
6
  `query { page { headline { value } } }`,
7
  { token: import.meta.env.DATOCMS_API_TOKEN },
8
);
9
---
10

11
<StructuredText data={page.headline} />

Bold text comes out as <strong>. The value is always a single paragraph, so the output is one <p>. If you need it without that wrapper — inside a heading, say — the component lets you override how the paragraph node renders; see its docs.

JSON route (legacy). 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
# use the Node version in .nvmrc
2
npm install
3
npm run dev      # serve the plugin at http://localhost:5173
4
npm run build    # typecheck (tsc -b) + production build into dist/
5
npm test         # run the 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