nitropage/src/features/editor/lib/element/useElementDescriptor.ts

A free and open source, extensible visual page builder based on SolidStart.

import { createMemo, useContext } from "solid-js";
import { BlueprintSlot, State } from "../../../../../types";
import { useLayout } from "../../../../data/layout";
import { NONE_BLUEPRINT_ID } from "../../../../lib/constants";
import { ConfigContext, StateContext } from "../../../../lib/context/page";

export const useElementDescriptor = (
  elementId: () => string | undefined,
  customState?: State,
) => {
  const [config] = useContext(ConfigContext)!;
  const [state_] = useContext(StateContext)!;
  const state = customState ?? state_;
  const layout = useLayout(() => {
    const elId = elementId();
    if (!elId) return;
    const element = state.elements[elId];
    return element.layoutId;
  });

  return createMemo<ElementDescriptor>(() => {
    const id = elementId();
    let type = "unknown" as any;
    if (id) {
      const element = state.elements[id];
      type = element.layoutId ? "layout" : "blueprint";
      const blueprint = element.blueprintId
        ? config.blueprints[element.blueprintId]
        : undefined;
      const layout_ = layout();

      if (blueprint && blueprint.id !== NONE_BLUEPRINT_ID) {
        return {
          type,
          title: blueprint.title(),
          slots: blueprint.slots,
        };
      }

      if (layout_) {
        return {
          type,
          title: layout_.revision.title,
          slots: Object.values(layout_.layoutSlots).reduce(
            (acc, layoutSlot) => {
              acc[layoutSlot.id] = {
                title: layoutSlot.title,
              };
              return acc;
            },
            {} as ElementDescriptor["slots"],
          ),
        };
      }
    }

    return {
      type,
      invalid: true,
      title: "Invalid",
      slots: {},
    };
  });
};

export type ElementDescriptor = {
  type: "unknown" | "layout" | "blueprint";
  title: string;
  slots: Record<string, BlueprintSlot & { title?: string }>;
  invalid?: boolean;
};