TextEditorMetadataPanel Configuration

The following properties must be defined to configure an editor metadata section based on TextEditorMetadataPanel:

- name

The name of the web component, preceded by a hyphen (-). By convention it is usually the same as the web component's tagName, but does not have to be.

tagName

The tag name of the web component. The name you specify here must contain a hyphen and must be the name specified with customElements.define() in the web component definition.

modulePath

The URL of the web component

attributes

Information about the web component:

title

The display name of the component. The name is only actually displayed when the mouse is held over the metadata section button.

icon

The tag name of the web component's icon. The name you specify must contain a hyphen.

All the properties must be entered as a list item belonging to a customComponents property. They must be indented correctly and the name property must be preceded by a hyphen (-) to indicate the start of a new list item. The following example shows the required format:

customComponents
  - name: "content-history"
    tagName: "content-history"
    modulePath: "webcomponents/history/history.js"
    attributes:
      title: "Content History"
      icon: "content-history-icon"

In order for a metadata section defined in this way to actually appear in CUE, you also need to add a configuration to one or more content-type resources in the Content Store. For further information about this, see Metadata Panel Sections.