ElementLockCategory

Version Availability

This enum is available starting from v3.11.0

Enum defining the Element Lock category a control's changes are governed by.

enum ElementLockCategory {
  CONTENT = 'content',
  STYLE = 'style'
}

Description

ElementLockCategory connects extension controls with the Lock Element feature. A locked element can prevent content editing, style editing, or both, and the editor disables the settings controls of the locked element and its child elements according to the selected lock options.

The editor cannot reliably infer from the tab whether an extension control edits content or styling, so a control declares its category, and Element Lock disables it and rejects its patches consistently:

• Prevent content editing governs controls categorized as CONTENT
• Prevent style editing governs controls categorized as STYLE

Use it with Control.getElementLockCategory() and with getElementLockCategory() of built-in controls extensions (see Element Lock Category for Built-in Controls).

Import

import { ElementLockCategory } from '@stripoinc/ui-editor-extensions';

Enum Values

Value	Description
CONTENT	The control edits the element content. It is disabled when the element prevents content editing. Default for custom controls
STYLE	The control edits the element visual styling. It is disabled when the element prevents style editing

Example

import { Control, ElementLockCategory, UEAttr, UIElementType } from '@stripoinc/ui-editor-extensions';

class CouponBackgroundControl extends Control {
    getId(): string {
        return 'coupon-background-control';
    }

    getTemplate(): string {
        return `<${UIElementType.COLOR} ${UEAttr.COLOR.name}="backgroundColor"></${UIElementType.COLOR}>`;
    }

    // The control changes appearance only, so it follows the "Prevent style editing" option
    getElementLockCategory(): ElementLockCategory {
        return ElementLockCategory.STYLE;
    }
}