Visual Builder: Element Selection Does Not Focus Corresponding Component in Preview Panel

[thaophamvan]

In Visual Builder mode, when I click an element, the corresponding component in the right preview panel should be focused, but currently it is not.

[TRomesh]

@thaophamvan This is a known bug in v1. This fix (the bug has been fixed but not yet released) will be available in the next release

[thaophamvan]

Thanks for the update. Could you please share the expected release timeline? The current experience in the visual builder is quite unstable and is impacting our workflow.

[TRomesh]

@thaophamvan can you post how your JSX code. Did you add pa() the preview attributes?. The fix was actually passed into the v1 release.

[thaophamvan]

@thaophamvan can you post how your JSX code. Did you add pa() the preview attributes?. The fix was actually passed into the v1 release.

You can refer to this JSX file:
https://github.com/evest/nextjs-fe-hosting/blob/master/src/components/elements/TextElement.tsx — it already adds pa().

Could you please share the expected next release timeline?

[alainmarsolais-verndale]

Hi,
I do think I am facing the same issue ( or somewhat related )

When I follow the documentation, I am not able to get any visual builder elements highlighted in the browser, and also not working when I am clicking on the field

Here are snippets of my code

Experience

import { ContentProps, contentType, } from "@optimizely/cms-sdk";
import { ComponentContainerProps, getPreviewUtils, OptimizelyComposition } from "@optimizely/cms-sdk/react/server";
import { ContentPageExperienceModel } from "../content-page/ContentPageExperience";

export const HomePageExperienceModel = contentType({
  key: "HomePageExperience",
  displayName: "Experience - Home",
  baseType: "_experience",
  properties: { },
  mayContainTypes: [ContentPageExperienceModel]  
});

type Props = {
  content: ContentProps<typeof HomePageExperienceModel>;
};

function ComponentWrapper({ children, node }: ComponentContainerProps) {
  const { pa } = getPreviewUtils(node);

  return(     
    <div {...pa(node)}>
      {children}
    </div>
  );
`}`

export default function HomePageExperienceView({ content }: Props) {
  return (
    <main>
      <OptimizelyComposition 
        nodes={content.composition.nodes ?? []} 
        ComponentWrapper={ComponentWrapper} />
    </main>
  );
}

Section

import { contentType, ContentProps } from "@optimizely/cms-sdk";
import { getPreviewUtils, OptimizelyGridSection, StructureContainerProps } from '@optimizely/cms-sdk/react/server';

export const FullWidthSectionModel = contentType({
  key: "FullWidthSection",
  displayName: "Section - Full Width",
  baseType: "_section",
});

type Props = {
  content: ContentProps<typeof FullWidthSectionModel>;
};

function CustomRow({ children, node }: StructureContainerProps) {
  const { pa } = getPreviewUtils(node);

  return (
    <div {...pa(node)}>
      {children}
    </div>
  );
}

function CustomColumn({ children, node }: StructureContainerProps) {
  const { pa } = getPreviewUtils(node);

  return (
    <div {...pa(node)}>
      {children}
    </div>
  );
}

export default function FullWidthSectionView({ content }: Props) {
  const { pa } = getPreviewUtils(content);
  
  return (
    <section {...pa(content)}>
      <OptimizelyGridSection 
        nodes={content.nodes} 
        row={CustomRow} 
        column={CustomColumn} />
                
        <hr />
    </section>
  );
}

Element

import { ContentProps, contentType } from "@optimizely/cms-sdk";
import { getPreviewUtils } from "@optimizely/cms-sdk/react/server";

export const HeroBannerElementModel = contentType({
    key: "HeroBannerElement",
    baseType: "_component",
    displayName: "Element - Hero Banner",
    properties: {
      title: {
        type: "string",
        displayName: "Title",
        group: "custom",
        indexingType: "queryable",
      }, 
      subTitle: {
        type: "string",
        displayName: "Short Description",
        group: "custom",
        indexingType: "queryable",
      },
      link: {
        type: "link",
        displayName: "Link", 
        group: "custom",
      } 
    },
    compositionBehaviors: ["elementEnabled"],
  });

  type Props = {
    content: ContentProps<typeof HeroBannerElementModel>;
  };
  
  export default function HeroBannerElementView({ content }: Props) {
    const { pa } = getPreviewUtils(content);

    return (         
        <>
            {content.title && <h1 {...pa("title")}>{content.title}</h1>}
            {content.subTitle && <p {...pa("subTitle")}>{content.subTitle}</p>}        
            {content.link?.url?.default && (
              <a {...pa("link")} href={content.link.url.default }>{content.link.text ?? "Learn more"}</a>
            )}
        </>
    );
  }

Possible to help me with what am I doing wrong !

Thanks