Link copied!

Code Editor API

Required Child Component

vce-code-editor must have the following child component:

  • vce-html-editor This child component must have an `editor` attribute

Optional Child Components

vce-code-editor may have the following child components:

  • vce-code-editor-validation-status-display This child component must have a `validation-status-display` attribute
  • vce-code-editor-twig-validator This child component must have a `twig-validator` attribute

API Reference vce-code-editor

HTML Attributes API

Name Description Type Required Default value
single-line Display the editor as a single line of text similar to an input box.
When combined with the line-wrapping attribute the editor looks similar to a text area element.		 boolean false
disabled Specifies that CodeMirror will not accept input. boolean false

Events

Event Description Returns
update Fires when any of the configurations changed. 
{
    detail: []
}

API Reference vce-code-editor-twig-validator

HTML Tag Attributes

Name Description Type Required Default value
debounce-time The debounce on the personalization call string true
validation-url Sets the validator URL string true
code Code to be validated string true
twig-validator This attribute is required when using vce-code-editor boolean * true
* The twig-validator attribute must exist when <vce-code-editor-twig-validator> is a child of <vce-code-editor>.

Events

Event Description Returns
connected.code-editor-twig-validator Fires on connectedCallback. 
{ detail: {}, bubbles: true }
validation-event.code-editor-twig-validator Fires when any of the configurations changed. 
{
    detail: {
     status: 'success.twig-validator-status' |
             'fail.twig-validator-status' |
             'loading.twig-validator-status' |
             'unknown.twig-validator-status',
     errors: string[]
  }
}
validation-event.code-editor-twig-validator Fires when any of the configurations changed. 
{
    detail: {
     status: 'success.twig-validator-status' |
             'fail.twig-validator-status' |
             'loading.twig-validator-status' |
             'unknown.twig-validator-status',
     errors: string[]
  }
}

API Reference vce-code-editor-validation-status-display

HTML Tag Attributes

Name Description Type Required Default value
validationStatus Validation status CodeEditorTwigValidatorPluginValidationStatus
translations Sets the translations ValidationStatusTranslation
validation-status-display This attribute is required when using vce-code-editor boolean * true
* The validation-status-display attribute must exist when <vce-code-editor-validation-status-display> is a child of <vce-code-editor>.

CodeEditorTwigValidatorPluginValidationStatus

 {
  status: CodeEditorTwigValidatorStatus;
  errors: string[];
}

ValidationStatusTranslation

 enum ValidationStatusTranslation {
  Success = 'success.twig-validator-status',
  Fail = 'fail.twig-validator-status',
  Loading = 'loading.twig-validator-status',
  Unknown = 'unknown.twig-validator-status',
}

ValidationStatusTranslation

 {
  success: string;
  fail: string;
  loading: string;
  unknown: string;
}

Events

Event Description Returns
connected.code-editor-error-display Fires on connectedCallback. 
{ bubbles: true }
disconnected.code-editor-error-display Fires on disconnectedCallback. 
{ bubbles: true }

API Reference vce-token

HTML Tag Attributes

Name Description Type Required Default value
name Name string
data Data string

API Reference vce-html-editor-personalization-plugin

HTML Tag Attributes

vce-html-editor-personalization-plugin has no attributes

Events

Event Description Returns
connected.html-editor-plugin Fires on connectedCallback. 
{ bubbles: true }
disconnected.html-editor-plugin Fires on disconnectedCallback. 
{ bubbles: true }

Method

Name Description Parameter Returns
getStrategy/code> Get token information html Array of token position data