WebContentSurfaceBehavior

type WebContentSurfaceBehavior = {
  content?: {
     after?: WebElement[];
     append?: WebElement[];
     before?: WebElement[];
     prepend?: WebElement[];
     remove?: boolean;
     replaceRange?:   | {
        fromMarker?: string;
        replaceWith?: WebElement[] | null;
        toMarker?: string;
      }
        | null;
  };
};

Properties

content?

optional content: {
  after?: WebElement[];
  append?: WebElement[];
  before?: WebElement[];
  prepend?: WebElement[];
  remove?: boolean;
  replaceRange?:   | {
     fromMarker?: string;
     replaceWith?: WebElement[] | null;
     toMarker?: string;
   }
     | null;
};

• after?

  optional after: WebElement[];

  Insert elements after the component.

• append?

  optional append: WebElement[];

  Insert elements inside the component at the end.

• before?

  optional before: WebElement[];

  Insert elements before the component.

• prepend?

  optional prepend: WebElement[];

  Insert elements inside the component at the beginning.

• remove?

  optional remove: boolean;

  Remove the component

• replaceRange?

  optional replaceRange: 
    | {
    fromMarker?: string;
    replaceWith?: WebElement[] | null;
    toMarker?: string;
  }
    | null;

  Replace or remove a specified range inside the component. Can be used to truncate the contents of a component. Truncation via word count is not currently supported, CSS markers must be used.

  Type Declaration

  {
    fromMarker?: string;
    replaceWith?: WebElement[] | null;
    toMarker?: string;
  }

  null

  Examples

  {fromMarker: 'p:nth-child(2)'}

  {fromMarker: 'p:nth-child(2)', replaceWith: [{type: 'html', content: '<h1>Content Removed</h1>'}]}

  {fromMarker: '.title', toMarker: 'img', replaceWith: [{type: 'html', content: '<h1>Content Removed</h1>'}]}