Skip to content

Manifest

The manifest is a special package located under packages/manifest, which defines the key information about the Content Element. Its interface and data is imported, implemented and exposed by other packages (edit, display and server). Here is an interface overview:


packages/manifest/src/interfaces.ts

ts
export interface ElementManifest {
  // Unique, reserved string, denoting 'Content Element' type.
  // Each Content Element defines unique type id which is
  // used to resolve which component needs to be used to handle specific
  // Content Element instance. The external types should follow 'ORG_TYPE'
  // convention.
  type: string;
  // Version of the content element (e.g. '1.0')
  version: string;
  // Human readable name of the content element
  name: string;
  // Declare content element as a composite type. Should be true if
  // TailorEmbeddedContainer will be used
  isComposite: boolean;
  // Declare content element as question type
  isQuestion: boolean;
  // Accompanies the 'isQuestion' field, indicating whether the question type is
  // gradable or ungradable. If both are supported, this field should be omitted.
  isGradable?: boolean;
  // The goal of the initState function is to properly initialize the 'data'
  // field upon the Content Element creation. The 'data' field is the Content
  // Element property storing authors input.
  initState: DataInitializer;
  // Edit component of the Content Element (Used for authoring purposes)
  Edit?: object;
  // TopToolbar component of the Content Element Edit component
  // (Used for authoring purposes)
  TopToolbar?: object;
  // SideToolbar component of the Content Element Edit component
  // (Used for authoring purposes)
  SideToolbar?: object;
  // Display component of the Content Element
  // (end-user facing; presentation component)
  Display?: object;
  // UI configuration for the authoring tool
  ui: {
    // mdi icon name to represent the element within the authoring system
    icon: string;
    // Does the element support layouts (e.g. 50/50) or it needs to be
    // full width
    forceFullWidth: boolean;
  },
  mocks?: {
    // Provide end-user system context mock (used for user state hooks)
    // See https://tailor-cms.github.io/xt/server-package.html#user-state-hooks
    displayContexts: Array<{ name: string; data: any }>;
  };
}
export interface ElementManifest {
  // Unique, reserved string, denoting 'Content Element' type.
  // Each Content Element defines unique type id which is
  // used to resolve which component needs to be used to handle specific
  // Content Element instance. The external types should follow 'ORG_TYPE'
  // convention.
  type: string;
  // Version of the content element (e.g. '1.0')
  version: string;
  // Human readable name of the content element
  name: string;
  // Declare content element as a composite type. Should be true if
  // TailorEmbeddedContainer will be used
  isComposite: boolean;
  // Declare content element as question type
  isQuestion: boolean;
  // Accompanies the 'isQuestion' field, indicating whether the question type is
  // gradable or ungradable. If both are supported, this field should be omitted.
  isGradable?: boolean;
  // The goal of the initState function is to properly initialize the 'data'
  // field upon the Content Element creation. The 'data' field is the Content
  // Element property storing authors input.
  initState: DataInitializer;
  // Edit component of the Content Element (Used for authoring purposes)
  Edit?: object;
  // TopToolbar component of the Content Element Edit component
  // (Used for authoring purposes)
  TopToolbar?: object;
  // SideToolbar component of the Content Element Edit component
  // (Used for authoring purposes)
  SideToolbar?: object;
  // Display component of the Content Element
  // (end-user facing; presentation component)
  Display?: object;
  // UI configuration for the authoring tool
  ui: {
    // mdi icon name to represent the element within the authoring system
    icon: string;
    // Does the element support layouts (e.g. 50/50) or it needs to be
    // full width
    forceFullWidth: boolean;
  },
  mocks?: {
    // Provide end-user system context mock (used for user state hooks)
    // See https://tailor-cms.github.io/xt/server-package.html#user-state-hooks
    displayContexts: Array<{ name: string; data: any }>;
  };
}