Summary Extension Example

This example simply displays some example text plus a link to the CUE content editor tab for the content item represented by the summary:

class MyAdditionalEditor extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          margin: 0;
          padding: 0;
          width: 100%;
          display: block;
        }

        .wc-additional-editor-container {
          padding: 10px;
          height: 100px;
          overflow: hidden;
        }

        .wc-additional-editor-group {
          with: 100%;
          height: auto;
          margin-bottom: 10px;
          font-family: "Hind", Helvetica Neue, Helvetica, Arial, sans-serif;
          color: #797878;
          font-size: 16px;
        }

        .wc-additional-editor-item-name {
          display: block;
          font-size: 12px;
        }

        .wc-additional-editor-item-content {
          display: block;
          font-size: 16px;
        }

        a.wc-additional-editor-link:link,  a.wc-additional-editor-link:visited {
          text-decoration: none;
          color: #457dce;
        }

        a.wc-additional-editor-link:hover {
          text-decoration: underline;
        }

      </style>

      <div class="wc-additional-editor-container">

        <div class="wc-additional-editor-group">
          <span class="wc-additional-editor-item-name">Title:</span>
          <span class="wc-additional-editor-item-content" id="wc-additional-editor-title">This is some title here</span>
        </div>

        <div class="wc-additional-editor-group">
          <span class="wc-additional-editor-item-name">Type:</span>
          <span class="wc-additional-editor-item-content" id="wc-additional-editor-type">bipolar</span>
        </div>

        <div class="wc-additional-editor-group">
          <span class="wc-additional-editor-item-content"><a href="" class="wc-additional-editor-link" id="wc-additional-editor-editor-link">Open content</a></span>
        </div>

      </div>
    `;
  }

  connectedCallback() {
    if (this.cueInterface) {
      const title = this.cueInterface.item.values.title;
      this.shadowRoot.querySelector('#wc-additional-editor-title').innerHTML = title;
      const type = this.cueInterface.content.descriptor.uiProperties.label;
      this.shadowRoot.querySelector('#wc-additional-editor-type').innerHTML = type;
      const editorLink = this.cueInterface.link;
      this.shadowRoot.querySelector('#wc-additional-editor-editor-link').href = editorLink;
    }
  }
}
customElements.define('my-additional-editor', MyAdditionalEditor);