Segment editor

A React block (a whole screen) in Beamline's CMS & media app.

One segment's translation with its checks and help. The source shows its tags and placeholders as numbered chips, and so does a preview of the translation; the translation is checked as it's typed: a missing, extra or reordered tag or placeholder, a tag closing before it opens, two spaces and a glossary term not used as it should be are each said, a missing token goes in at the caret, and a suggested fix can be used. Approving with checks still open keeps them listed. Beside it, translation memory (each match with its score, source, target, who and when; an exact match goes in as is, a partial one goes in marked to adapt) and the glossary (do-not-translate and case rules, terms used ticked), searchable together.

Use it for

Translating one string that carries markup tags or placeholders, with checks and suggestions beside it.
Any text editor that must keep tokens intact and use agreed terms.

Not for

A whole file's segments and approvals (translation-workbench).
Writing rich text (rich-text-editor).

Anatomy

header: the product's mark, the title and key, Approve
source: text with numbered tag and placeholder chips
translation: the field, how it reads with chips, where it came from
checks: each problem, a missing token's insert, the suggested fix, the approval result
help: search, memory or glossary; matches with score, source, target, who, when and use; terms with rules and used or not

States

checks: clean (green), problems (amber) each said, fix offered
approved (green), approved with checks open (amber, kept listed)
inserted from an exact match (green), from a partial one (amber, adapt)
glossary: used (green), not used yet (amber), don't translate, case matters
no memory or glossary, nothing matches the search
phone: one column
right to left: the page mirrors; each text keeps its own direction

Keyboard

Type in the translation; the caret stays when Tab reaches a missing token's button, Enter inserts it there and returns to the text

Motion

Nothing moves; checks change as you type.

Props

Prop	Type	Default	Description
`keyName` (required)	`string`	—
`sourceLanguage` (required)	`string`	—
`language` (required)	`string`	—
`source` (required)	`string`	—	Tags as <1>…</1>, placeholders as {name}.
`defaultTarget`	`string`	—
`memory`	`MemoryMatch[]`	—
`glossary`	`GlossaryTerm[]`	—
`suggestion`	`string`	—	A corrected translation to offer when checks fail.
`onApprove`	`((target: string) => void)`	—
`product`	`string`	—	Your product's name, shown as its mark.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Import

import { SegmentEditor } from "@beamline/segment-editor";

Get it

Segment editor is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent