Making Specific Parts of a Composite Component Non-Selectable/Non-Editable: Is It Possible?

[johann-taberlet]

Hello,

I'm attempting to create composite components where only specific parts are editable. Take, for instance, a card component; I want to allow users to edit the text and image areas but prevent them from altering or selecting the surrounding containers that control the layout of the card. This is crucial because I ultimately need to generate the complete HTML for this component, which requires the use of custom UserComponents for the containers.

To achieve this for now, I created a custom props "isEditable" and checked within the RenderNode function whether a component is editable; if not, the parent is selected and so on. This method works to some extent, but it's not ideal, as these components are still visible in the Layer component.

In summary, I need a method to construct composite components where certain parts are neither selectable nor editable, yet they must still be included in the editor state for parsing.

Here is an example of my current solution:

export const SectionHeroHeader = () => {
  return (
    <Element
      is={BlockContainer}
      id="mainSection"
      as="section"
      className=" bg-white dark:bg-gray-900"
      custom={{
        isEditable: false,
      }}
    >
      <Element
        as="div"
        is={BlockContainer}
        id="div1"
        className="mx-auto grid max-w-screen-xl px-4 pb-8 pt-20 lg:grid-cols-12 lg:gap-8 lg:py-16 lg:pt-28 xl:gap-0"
        custom={{
          isEditable: false,
        }}
      >
        <Element
          as="div"
          is={BlockContainer}
          id="div2"
          className="mr-auto place-self-center lg:col-span-7"
          custom={{
            isEditable: false,
          }}
        >
          <Element
            is={BlockText}
            id="heading"
            as="h1"
            className="mb-4 max-w-2xl whitespace-pre-wrap text-4xl font-extrabold leading-none tracking-tight dark:text-white md:text-5xl xl:text-6xl"
          >
            {"Building digital \nproducts & brands."}
          </Element>
          <Element
            is={BlockText}
            id="paragraph"
            as="p"
            className="mb-6 max-w-2xl font-light text-gray-500 dark:text-gray-400 md:text-lg lg:mb-8 lg:text-xl"
          >
            This free and open-source landing page template was built using the
            utility classes from Tailwind CSS and based on the components from
            the Flowbite Library Blocks System.
          </Element>
          <BlockContainer
            as="div"
            className="space-y-4 sm:flex sm:space-x-4 sm:space-y-0"
            custom={{
              isEditable: false,
            }}
          >
            <Element
              is={BlockButton}
              id="button-1"
              href="https://github.com/themesberg/landwind"
              className="inline-flex w-full items-center justify-center rounded-lg border border-gray-200 px-5 py-3 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 sm:w-auto"
            >
              View on GitHub
            </Element>
            <Element
              is={BlockButton}
              id="button-2"
              href="https://www.figma.com/community/file/1125744163617429490"
              className="mb-2 mr-2 inline-flex w-full items-center justify-center rounded-lg border border-gray-200 bg-white px-5 py-3 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700 sm:w-auto"
            >
              Get Figma file
            </Element>
          </BlockContainer>
        </Element>
        <BlockContainer
          as="div"
          className="hidden lg:col-span-5 lg:mt-0 lg:flex"
          custom={{
            isEditable: false,
          }}
        >
          <Element
            is={BlockImage}
            id="image"
            src="/tests/hero.png"
            alt="hero image"
          />
        </BlockContainer>
      </Element>
    </Element>
  );
};

SectionHeroHeader.craft = {
  displayName: "SectionHeroHeader",
  related: {
    settings: SectionHeroHeaderSettings,
  },
  props: {
    className: "bg-white dark:bg-gray-900",
  },
};

Thanks in advance if anyone has a better idea to address this needs :)

[addlistener]

@johann-taberlet have u found solution?

Just met the same problem.

I actually tried removing the "connect" on ContainerB

ContainerA 
  -> ContainerB
       -> ChildC
       -> ChildD

And the result is that when you move ChildC or ChildD there will be an error.

[MrVibe]

Remove ref > connect conditionally to make elements non-editable.