In order to use the Editorial Comments feature for custom property fields, the property field needs to implement the SideButtonMixin and call initSideButtonMixin() in its constructor. This mixin enables the component to render a floating button in its top right corner. The property field also needs to make use of the PropertyFieldPlugin as shown in the example below:

import Config from "@jangaroo/runtime/Config";
import ConfigUtils from "@jangaroo/runtime/ConfigUtils";
import Container from "@jangaroo/ext-ts/container/Container";
import PropertyFieldPlugin from "@coremedia/studio-client.main.editor-components/sdk/premular/PropertyFieldPlugin";

class CustomField extends Container {

  static override readonly xtype: string = "my.customField";

  constructor(config: Config<Container>) {
    super(ConfigUtils.apply(Config(CustomField, {
      sideButtonVerticalAdjustment: 10,
      sideButtonHorizontalAdjustment: 20,
      sideButtonRenderToFunction: host => host["bodyEl"],
      plugins: [
        Config(PropertyFieldPlugin, {
          propertyName: "description",
        }),
      ],
    }), config));
  }
}

export default CustomField;

As shown in the example, CustomField implements the SideButtonMixin and now provides a variety of properties to render the button correctly. You can define offsets to change the position or provide a function that specifies where the button should be rendered in the component hierarchy. You could also disable the button by setting sideButtonDisabled to true;

Note

The title of a comment thread in the FeedbackHub depends on the property name, set in the corresponding PropertyFieldPlugin. These titles are localized just like in the content form. This means, you will have to provide a localization in the form <CapType>_<PropertyName>_text in BluePrintDocumentTypes_properties.ts. (e.g. CMChannel_title_text)

If no localization is given, the key will be displayed as a fallback. Also, if the property field label is hidden by a surrounding PropertyFieldGroup, the comment thread will automatically use the title of the PropertyFieldGroup as the label of the comment thread.