How to use the scrivito.isInPlaceEditingActive function in scrivito

const InPlaceEditingPlaceholder = ({ children, center, block }) => {
  if (!Scrivito.isInPlaceEditingActive()) {
    return null;
  }

  const innerSpan = <span style="{placeholderCss}">{children}</span>;

  if (center) {
    return <div>{innerSpan}</div>;
  }

  if (block) {
    return <div>{innerSpan}</div>;
  }

  return innerSpan;
};

Scrivito.provideComponent("ImageWidget", ({ widget }) => {
  let image = (
    
  );

  const link = widget.get("link");
  if (link && !Scrivito.isInPlaceEditingActive()) {
    image = {image};
  }

  if (["center", "right"].includes(widget.get("alignment"))) {
    return <div>{image}</div>;
  }

  return image;
});

const AddTestimonial = ({ widget }) => {
  if (!Scrivito.isInPlaceEditingActive()) {
    return null;
  }

  return (
    <div>
      <a style="{placeholderCss}" href="#"> {
          e.preventDefault();
          e.stopPropagation();
          const newTestimonials = [
            ...widget.get("testimonials"),
            new TestimonialWidget({}),
          ];</a></div>

Scrivito.provideComponent("VideoWidget", ({ widget }) => {
  const videoUrl = urlFromBinary(widget.get("source"));

  if (!videoUrl && !Scrivito.isInPlaceEditingActive()) {
    return null;
  }

  const posterUrl = urlFromBinary(widget.get("poster"));
  const src = posterUrl ? videoUrl : `${videoUrl}#t=0.01`;

  let style = {};
  if (Scrivito.isInPlaceEditingActive() && !videoUrl && !posterUrl) {
    style = videoPlaceholder;
  }

  return (
    
  );
});

({ widget, title, attribute, maxRows }) => {
    if (!Scrivito.isInPlaceEditingActive()) {
      return null;
    }

    const currentRows = widget.get(attribute);
    if (maxRows && currentRows.length >= maxRows) {
      return null;
    }

    return (
      
        
          <div>
            <a style="{placeholderCss}" href="#"> {</a></div>

const JobValidThrough = Scrivito.connect(({ page }) => {
  const validThrough = page.get("validThrough");
  if (!validThrough) {
    if (!Scrivito.isInPlaceEditingActive()) {
      return null;
    }

    return (
      <h2>
        <i title="date" aria-hidden="true">{" "}
        <span>Valid through: </span>
        
          
            Click to select expire at.
          
        
      </i></h2><i title="date" aria-hidden="true">
    );
  }
</i>

Scrivito.provideComponent("VideoWidget", ({ widget }) => {
  const videoUrl = urlFromBinary(widget.get("source"));

  if (!videoUrl && !Scrivito.isInPlaceEditingActive()) {
    return null;
  }

  const posterUrl = urlFromBinary(widget.get("poster"));
  const src = posterUrl ? videoUrl : `${videoUrl}#t=0.01`;

  let style = {};
  if (Scrivito.isInPlaceEditingActive() && !videoUrl && !posterUrl) {
    style = videoPlaceholder;
  }

  return (