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

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

import { useContext } from "solid-js";
import { EditorUiContext } from "../../../../lib/context/admin";
import { StateContext } from "../../../../lib/context/page";
import { spliceValue } from "../../../../utils/array";
import { getElementParents } from "./useElementParents";

export const useDeleteElement = () => {
  const [state, setState] = useContext(StateContext)!;
  const [_, setEditorUi] = useContext(EditorUiContext)!;

  const deleteElement = (elementId: string, clearParentSlots = true) => {
    const element = state.elements[elementId];
    const parents = getElementParents(state, element.id);

    if (clearParentSlots && parents?.slot) {
      setState((d) => {
        spliceValue(element.id, d.slots[parents.slot!.id].elements);
      });
    }

    for (const slotId of Object.values(element.slots)) {
      for (const slotElement of state.slots[slotId].elements) {
        deleteElement(slotElement, false);
      }
    }

    setEditorUi((d) => {
      if (d.selectedElementId === elementId) {
        d.selectedElementId = undefined;
      }
      if (d.deletingElementId === elementId) {
        d.deletingElementId = undefined;
      }
    });

    // Without this some recursive element lists like breadcrumbs might ask for an element,
    // that already was deleted, giving them a frame to unmount first
    requestAnimationFrame(() => {
      setState((d) => {
        delete d.elements[elementId];
      });
    });
  };

  return deleteElement;
};