Skip to main content
Beyond the required methods, implement these adapter methods to enable additional block manipulation features in the editor. Each method is optional — blökkli disables the corresponding editor feature when a method is not provided. You only need to implement the methods that match the capabilities of your backend.
All parameter and return types referenced below are exported from @blokkli/editor. Import them for full type safety in your adapter.
Enables the Delete toolbar action. blökkli calls this when the user selects one or more blocks and triggers the delete action (keyboard shortcut or toolbar button).Signature
async deleteBlocks({ uuids }: { uuids: string[] }): Promise<void>
​
uuids
string[]
required
Array of UUIDs for the blocks to delete.
Example
async deleteBlocks({ uuids }: { uuids: string[] }): Promise<void> {
  await $fetch('/api/blocks', {
    method: 'DELETE',
    body: { uuids },
  })
}
Deletion is irreversible unless your backend supports history. If you implement setHistoryIndex(), blökkli can undo a delete by navigating back through history.
Enables the Duplicate toolbar action. Your backend must create copies of the given blocks with new UUIDs and insert them directly after their originals.Signature
async duplicateBlocks({ uuids }: { uuids: string[] }): Promise<void>
​
uuids
string[]
required
Array of UUIDs for the blocks to duplicate. Preserve the order when creating copies.
Example
async duplicateBlocks({ uuids }: { uuids: string[] }): Promise<void> {
  await $fetch('/api/blocks/duplicate', {
    method: 'POST',
    body: { uuids },
  })
}
After the call resolves, blökkli re-fetches state via loadState() and mapState() to reflect the newly created blocks with their server-assigned UUIDs.
Enables the Options panel sidebar. blökkli calls this whenever the user changes any option value for a block — text fields, toggles, selects, and so on.Signature
async updateOptions(input: UpdateOptionsInput): Promise<void>
​
uuid
string
required
UUID of the block whose options are being updated.
​
options
Record<string, any>
required
The full options object for the block, including both changed and unchanged values.
Example
async updateOptions({ uuid, options }: UpdateOptionsInput): Promise<void> {
  await $fetch(`/api/blocks/${uuid}/options`, {
    method: 'PATCH',
    body: { options },
  })
}
Enables inline editable fields — block fields that the user can edit directly on the canvas (for example, a text block’s body content). Called each time the user commits a change to an editable field value.Signature
async updateFieldValue(input: UpdateFieldValueInput): Promise<void>
​
uuid
string
required
UUID of the block containing the field being updated.
​
fieldName
string
required
The name of the field being updated (e.g., 'body', 'title').
​
value
any
required
The new value for the field. The type depends on the field definition in your block component.
Example
async updateFieldValue({
  uuid,
  fieldName,
  value,
}: UpdateFieldValueInput): Promise<void> {
  await $fetch(`/api/blocks/${uuid}/fields/${fieldName}`, {
    method: 'PATCH',
    body: { value },
  })
}
Enables the Convert block type feature. blökkli calls this when the user opens the conversion menu for a selection of blocks. Return the available conversion targets.Signature
async getConversions({ uuids }: { uuids: string[] }): Promise<ConversionItem[]>
​
uuids
string[]
required
UUIDs of the selected blocks for which conversion options are requested.
Example
async getConversions({ uuids }: { uuids: string[] }) {
  return $fetch('/api/blocks/conversions', {
    method: 'POST',
    body: { uuids },
  })
}
Performs a block type conversion. blökkli calls this after the user selects a target bundle from the conversion menu returned by getConversions().Signature
async convertBlocks(input: ConvertBlocksInput): Promise<void>
​
uuids
string[]
required
UUIDs of the blocks to convert.
​
targetBundle
string
required
The bundle identifier to convert the blocks into.
Example
async convertBlocks({
  uuids,
  targetBundle,
}: ConvertBlocksInput): Promise<void> {
  await $fetch('/api/blocks/convert', {
    method: 'POST',
    body: { uuids, targetBundle },
  })
}
Both getConversions() and convertBlocks() must be implemented together for the conversion feature to activate. Implementing only one has no effect.
Enables the Transform feature. blökkli calls this on editor activation to discover which transform plugins are available. Transform plugins run server-side logic on a block selection — for example, merging text blocks or splitting a block by paragraph.Signature
async getTransformPlugins(): Promise<TransformPlugin[]>
Example
async getTransformPlugins() {
  return $fetch('/api/transforms')
}
Applies a transform plugin to the selected blocks. blökkli calls this after the user selects a plugin from the transform menu.Signature
async applyTransformPlugin(input: ApplyTransformInput): Promise<void>
​
pluginId
string
required
The identifier of the transform plugin to apply (as returned by getTransformPlugins()).
​
uuids
string[]
required
UUIDs of the blocks to transform.
Example
async applyTransformPlugin({
  pluginId,
  uuids,
}: ApplyTransformInput): Promise<void> {
  await $fetch(`/api/transforms/${pluginId}`, {
    method: 'POST',
    body: { uuids },
  })
}
Both getTransformPlugins() and applyTransformPlugin() must be implemented together for the transform feature to activate.