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.

  Union Members

  Type Literal

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

  fromMarker?

  optional fromMarker?: string;

  CSS selector indicating the start of the range to replace.

  replaceWith?

  optional replaceWith?: WebElement[] | null;

  Content to replace the specified range with. If null or omitted, the range will be removed.

  toMarker?

  optional toMarker?: string;

  CSS selector indicating the end of the range to replace.

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>'}]}