Type Alias CommentThreadUI

Type Declaration

• SlotConfigurationCallback<{ id: string }>
• {
      comment?: CommentUI;
      editor?: SlotConfigurationCallback<{ id: string }>;
      footer?: SlotConfigurationCallback<{ id: string }>;
      header?: SlotConfigurationCallback<{ id: string }>;
  }

  • Optionalcomment?: CommentUI

    Use this to customize each comment fully or provide slots for partial customization.

    Example

    Customize each comment within the comment thread:

    NutrientViewer.load({
      // ... Your configuration.
      ui: {
        commentThread: {
          comment: () => {
            return {
              render: () => {
                const div = document.createElement("div");
                div.style.backgroundColor = "lightgreen";
                div.style.padding = "5px";
                div.innerText = "This is a custom comment for the comment thread.";
    
                return div;
              },
            };
          },
        },
      },
    });
    Copy

  • Optionaleditor?: SlotConfigurationCallback<{ id: string }>

    Use this to customize the editor area.

    Example

    Replace the editor area by customizing the editor slot:

    NutrientViewer.load({
      // ... Your configuration.
      ui: {
        commentThread: {
          editor: () => {
            return {
              render: () => {
                const div = document.createElement("div");
                div.style.backgroundColor = "lightgreen";
                div.style.padding = "5px";
                // You can add your custom editor implementation here.
    
                return div;
              },
            };
          },
        },
      },
    });
    Copy

  • Optionalfooter?: SlotConfigurationCallback<{ id: string }>

    Use this to render a custom UI in the footer (bottom area) of the UI.

    Example

    Add a custom footer to the comment thread by customizing the footer slot:

    NutrientViewer.load({
      // ... Your configuration.
      ui: {
        commentThread: {
          footer: () => {
            return {
              render: () => {
                const div = document.createElement("div");
                div.style.backgroundColor = "lightgreen";
                div.style.padding = "5px";
                div.innerText = "This is a custom footer for the comment thread.";
    
                return div;
              },
            };
          },
        },
      },
    });
    Copy

  • Optionalheader?: SlotConfigurationCallback<{ id: string }>

    Use this to render a custom UI in the header (top area) of the UI.

    Example

    Add a custom header to the comment thread by customizing the header slot:

    NutrientViewer.load({
      // ... Your configuration.
      ui: {
        commentThread: {
          header: () => {
            return {
              render: () => {
                const div = document.createElement("div");
                div.style.backgroundColor = "lightgreen";
                div.style.padding = "5px";
                div.innerText = "This is a custom header for the comment thread.";
    
                return div;
              },
            };
          },
        },
      },
    });
    Copy