useDuplicateSelection

Returns a function that duplicates the selected blocks, selects the duplicates, and returns them as Block snapshots.

const duplicateSelection = useDuplicateSelection()

const duplicates = duplicateSelection(options?)

Options

CloneFieldName is (originalName: string) => string | undefined. It is called once per field name among the duplicated widgets and returns the name for the duplicates of that field; returning undefined gives them an automatically generated unique name. Use it, for example, to keep a naming prefix your application relies on.

Behavior

• Duplicated widgets get new field names, so the duplicates don't stay linked to the originals: they start with a copy of the original value and change independently afterwards. Widgets that shared a field name keep sharing the new one, so radio groups stay groups.
• When the selection is not a block selection, the function returns an empty array and changes nothing.
• The returned ids are session-scoped: don't store them across page reloads.
• With no document loaded, it throws DocumentNotLoadedError.

Example

import { useDuplicateSelection } from '@sdk-pdf/react'

function DuplicateButton() {
  const duplicateSelection = useDuplicateSelection()

  const handleClick = () =>
    duplicateSelection({
      // Shift the duplicates down-right so they don't cover the originals.
      shiftX: 12,
      shiftY: -12,
      // Keep the "initials." prefix of the copied fields; other fields get generated
      // names.
      cloneFieldName: (originalName) =>
        originalName.startsWith('initials.')
          ? `initials.${crypto.randomUUID()}`
          : undefined,
    })

  return <button onClick={handleClick}>Duplicate</button>
}