Refactor React Context (ComponentHtmlMapContext) to Redux to allow for better extensibility

Postponed on ✨ Leverage HTML comment annotations, remove wrapping div elements Active

Removing PP-1 tag since ✨ Leverage HTML comment annotations, remove wrapping div elements Active got in.

I've taken a (quick) look at this and hit a bit of a blocker - storing the map in Redux doesn't seem to work. I wrote a slice (which I've pasted below as a starting point should someone else want to pick this up. Maybe I just made a silly mistake, but it seems that fundamentally storing references to the DOM elements in Redux isn't the way to go.

ChatGPT suggests: While it's technically possible to store a reference to a DOM element in Redux state, it's generally not recommended. Redux state is intended to be serializable and should ideally only contain plain JavaScript objects, arrays, strings, numbers, and booleans.

import { createAppSlice } from '@/app/createAppSlice';
import type { PayloadAction } from '@reduxjs/toolkit';
import type {
  ComponentsMap,
  SlotsMap,
  RegionsMap,
} from '@/types/AnnotationMaps';

export interface PreviewElementMapSliceState {
  regionsMap: RegionsMap;
  componentsMap: ComponentsMap;
  slotsMap: SlotsMap;
}

const initialState: PreviewElementMapSliceState = {
  regionsMap: {},
  componentsMap: {},
  slotsMap: {},
};

type setRegionsMapPayload = RegionsMap;
type setComponentsMapPayload = ComponentsMap;
type setSlotsMapPayload = SlotsMap;

export const previewElementMapSlice = createAppSlice({
  name: 'previewElementMap',
  initialState,
  reducers: (create) => ({
    setRegionsMap: create.reducer(
      (state, action: PayloadAction<setRegionsMapPayload>) => {
        state.regionsMap = action.payload;
      },
    ),
    setComponentsMap: create.reducer(
      (state, action: PayloadAction<setComponentsMapPayload>) => {
        state.componentsMap = action.payload;
      },
    ),
    setSlotsMap: create.reducer(
      (state, action: PayloadAction<setSlotsMapPayload>) => {
        state.slotsMap = action.payload;
      },
    ),
  }),
  selectors: {
    selectRegionsMap: (maps): RegionsMap => {
      return maps.regionsMap;
    },
    selectComponentsMap: (maps): ComponentsMap => {
      return maps.componentsMap;
    },
    selectSlotsMap: (maps): SlotsMap => {
      return maps.slotsMap;
    },
  },
});

export const { setRegionsMap, setComponentsMap, setSlotsMap } =
  previewElementMapSlice.actions;
export const { selectRegionsMap, selectComponentsMap, selectSlotsMap } =
  previewElementMapSlice.selectors;