@griddo/ax 12.8.3 → 12.8.4

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "12.8.3",
+	"version": "12.8.4",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -201,5 +201,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2583a2f1211251425b5766dd3377e5ec38db7a89"
+	"gitHead": "3a207a967d89225272c5760824e1138d0b01b926"
 }

package/src/Style/index.tsx

@@ -40,6 +40,7 @@ const GlobalStyle = createGlobalStyle`
     background: transparent;
     padding: 0;
     border: none;
+    color: inherit;
   }
 
   #root {

package/src/__tests__/components/Fields/VisualUniqueSelection/VisualUniqueSelection.test.tsx

@@ -48,6 +48,30 @@ describe("VisualUniqueSelection component rendering", () => {
 		expect(screen.getByTestId("imageSelectionComponent")).toBeTruthy();
 	});
 
+	// Las opciones por tema son una lista de `{ theme, options }`; el campo tiene que
+	// quedarse con la entrada del tema que recibe, y con sus miniaturas.
+	test("should render only the options of the given theme", () => {
+		const { container } = render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<VisualUniqueSelection
+					{...makeProps({
+						theme: "griddo-alt-theme",
+						options: [
+							{ theme: "default-theme", options: [{ value: "square", img: "/img/default/square.png" }] },
+							{ theme: "griddo-alt-theme", options: [{ value: "round", img: "/img/alt/round.png" }] },
+						],
+					})}
+				/>
+			</ThemeProvider>,
+		);
+
+		const values = screen.getAllByTestId("radioButtons").map((radio) => (radio as HTMLInputElement).value);
+		expect(values).toEqual(["round"]);
+
+		const sources = Array.from(container.querySelectorAll("img")).map((img) => img.getAttribute("src"));
+		expect(sources).toEqual(["/img/alt/round.png"]);
+	});
+
 	test("should render the component with ScrollableSelection", () => {
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>

package/src/__tests__/components/Tabs/Tabs.test.tsx

@@ -209,3 +209,50 @@ describe("Tabs component events", () => {
 		expect(tabs[1]).toHaveStyleRule("cursor", "pointer");
 	});
 });
+
+describe("Tabs component auto selection", () => {
+	it("should select the only tab once, although the tabs array is new on each render", () => {
+		const setSelectedTabAction = vi.fn();
+
+		// A new array on each render, as the callers that build the tabs inline do.
+		const renderTabs = () => (
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Tabs {...makeProps({ tabs: ["content"], active: "content", setSelectedTab: setSelectedTabAction })} />
+			</ThemeProvider>
+		);
+
+		const { rerender } = render(renderTabs());
+		rerender(renderTabs());
+		rerender(renderTabs());
+
+		expect(setSelectedTabAction).toHaveBeenCalledTimes(1);
+	});
+
+	it("should select the new tab when the only tab changes", () => {
+		const setSelectedTabAction = vi.fn();
+
+		const renderTabs = (tab: string) => (
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Tabs {...makeProps({ tabs: [tab], active: tab, setSelectedTab: setSelectedTabAction })} />
+			</ThemeProvider>
+		);
+
+		const { rerender } = render(renderTabs("content"));
+		rerender(renderTabs("config"));
+
+		expect(setSelectedTabAction).toHaveBeenNthCalledWith(1, "content");
+		expect(setSelectedTabAction).toHaveBeenNthCalledWith(2, "config");
+	});
+
+	it("should not select any tab when there is more than one", () => {
+		const setSelectedTabAction = vi.fn();
+
+		render(
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Tabs {...makeProps({ tabs: ["tab1", "tab2"], active: "tab1", setSelectedTab: setSelectedTabAction })} />
+			</ThemeProvider>,
+		);
+
+		expect(setSelectedTabAction).not.toBeCalled();
+	});
+});

package/src/__tests__/containers/PageEditor/sendPagePing.test.ts

@@ -0,0 +1,61 @@
+import { pages } from "@ax/api";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { SET_USER_EDITING } from "@ax/containers/PageEditor/constants";
+import type { IUserEditing } from "@ax/types";
+
+const PAGE = 213;
+const OTHER_AUTHOR: IUserEditing = { id: 12, name: "Otra autora", username: "otra" };
+const THIRD_AUTHOR: IUserEditing = { id: 13, name: "Tercera autora", username: "tercera" };
+
+const lockedResponse = (user: IUserEditing) => ({ status: 400, data: { code: 400, user } });
+
+describe("sendPagePing action", () => {
+	const runPing = async (params: { onStart: IUserEditing | null; onAnswer: IUserEditing | null; answer: any }) => {
+		const dispatch = vi.fn();
+		const getState = vi.fn().mockReturnValue({ pageEditor: { userEditing: params.onStart } } as any) as unknown as any;
+
+		vi.spyOn(pages, "sendPagePing").mockImplementation(async () => {
+			// El ping sale antes de que getPage responda: el lock del store cambia
+			// mientras la petición está en vuelo.
+			getState.mockReturnValue({ pageEditor: { userEditing: params.onAnswer } });
+			return params.answer;
+		});
+
+		await pageEditorActions.sendPagePing(PAGE)(dispatch, getState);
+
+		return dispatch;
+	};
+
+	it("does not dispatch the author the store already has", async () => {
+		const dispatch = await runPing({
+			onStart: null,
+			onAnswer: OTHER_AUTHOR,
+			answer: lockedResponse(OTHER_AUTHOR),
+		});
+
+		expect(dispatch).not.toHaveBeenCalled();
+	});
+
+	it("dispatches the author that took the page", async () => {
+		const dispatch = await runPing({
+			onStart: OTHER_AUTHOR,
+			onAnswer: OTHER_AUTHOR,
+			answer: lockedResponse(THIRD_AUTHOR),
+		});
+
+		expect(dispatch).toHaveBeenCalledWith({
+			type: SET_USER_EDITING,
+			payload: { userEditing: THIRD_AUTHOR },
+		});
+	});
+
+	it("dispatches nothing while nobody holds the page", async () => {
+		const dispatch = await runPing({
+			onStart: null,
+			onAnswer: null,
+			answer: { status: 200, data: {} },
+		});
+
+		expect(dispatch).not.toHaveBeenCalled();
+	});
+});

package/src/__tests__/hooks/editingLock.test.tsx

@@ -0,0 +1,92 @@
+import "@testing-library/jest-dom";
+
+import { useEditingLock } from "@ax/hooks";
+import type { IUserEditing } from "@ax/types";
+
+import { renderHook } from "@testing-library/react";
+
+const CURRENT_USER = 7;
+const OTHER_AUTHOR: IUserEditing = { id: 12, name: "Otra autora", username: "otra" };
+const THIRD_AUTHOR: IUserEditing = { id: 13, name: "Tercera autora", username: "tercera" };
+
+describe("useEditingLock hook", () => {
+	const renderLock = (userEditing: IUserEditing | null, callbacks: { onLocked: () => void; onUnlocked: () => void }) =>
+		renderHook(
+			({ userEditing }) =>
+				useEditingLock({
+					userEditing,
+					currentUserID: CURRENT_USER,
+					...callbacks,
+				}),
+			{ initialProps: { userEditing } },
+		);
+
+	const callbacks = () => ({ onLocked: vi.fn(), onUnlocked: vi.fn() });
+
+	it("locks the editor when another author holds the page", () => {
+		const spies = callbacks();
+
+		const { result } = renderLock(OTHER_AUTHOR, spies);
+
+		expect(result.current.isReadOnly).toBe(true);
+		expect(spies.onLocked).toHaveBeenCalledTimes(1);
+		expect(spies.onUnlocked).not.toHaveBeenCalled();
+	});
+
+	it("leaves the editor open when the page is free", () => {
+		const spies = callbacks();
+
+		const { result } = renderLock(null, spies);
+
+		expect(result.current.isReadOnly).toBe(false);
+		expect(spies.onUnlocked).toHaveBeenCalledTimes(1);
+		expect(spies.onLocked).not.toHaveBeenCalled();
+	});
+
+	it("leaves the editor open when the lock is your own", () => {
+		const spies = callbacks();
+
+		const { result } = renderLock({ id: CURRENT_USER, name: "Yo", username: "yo" }, spies);
+
+		expect(result.current.isReadOnly).toBe(false);
+		expect(spies.onLocked).not.toHaveBeenCalled();
+	});
+
+	// El motivo del bug: getPage y el ping despachan cada uno su propio objeto
+	// para el mismo autor, y reaccionar a la referencia reabría el modal que la
+	// autora acababa de cerrar con «Preview Page».
+	it("does not lock again when the same author is dispatched in a new object", () => {
+		const spies = callbacks();
+
+		const { rerender, result } = renderLock(OTHER_AUTHOR, spies);
+		expect(spies.onLocked).toHaveBeenCalledTimes(1);
+
+		rerender({ userEditing: { ...OTHER_AUTHOR } });
+
+		expect(spies.onLocked).toHaveBeenCalledTimes(1);
+		expect(spies.onUnlocked).not.toHaveBeenCalled();
+		expect(result.current.isReadOnly).toBe(true);
+	});
+
+	it("unlocks the editor when the author leaves the page", () => {
+		const spies = callbacks();
+
+		const { rerender, result } = renderLock(OTHER_AUTHOR, spies);
+
+		rerender({ userEditing: null });
+
+		expect(result.current.isReadOnly).toBe(false);
+		expect(spies.onUnlocked).toHaveBeenCalledTimes(1);
+	});
+
+	it("locks again when a different author takes the page", () => {
+		const spies = callbacks();
+
+		const { rerender, result } = renderLock(OTHER_AUTHOR, spies);
+
+		rerender({ userEditing: THIRD_AUTHOR });
+
+		expect(result.current.isReadOnly).toBe(true);
+		expect(spies.onLocked).toHaveBeenCalledTimes(2);
+	});
+});

package/src/__tests__/modules/Forms/FormEditor/FormEditor.test.tsx

@@ -0,0 +1,88 @@
+import { Route, Router } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import FormEditor from "@ax/modules/Forms/FormEditor";
+import history from "@ax/routes/history";
+import globalTheme from "@ax/themes/theme.json";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { act, cleanup, render, screen } from "../../../../../config/tests/test-utils";
+
+// El editor real monta el panel de configuración entero. Aquí solo interesa el
+// tema que le entrega FormEditor, así que el doble lo expone en el DOM.
+vi.mock("@ax/modules/Forms/FormEditor/Editor", () => ({
+	default: ({ theme }: { theme: string }) => <div data-testid="form-editor-editor" data-theme={theme} />,
+}));
+
+// `getForm` es un thunk que pide el formulario y luego selecciona su contenido.
+// Sobre un mock store el estado nunca avanza, así que la cadena rompe y deja un
+// rechazo sin capturar. El tema no depende de ella: se anula y ya.
+vi.mock("@ax/containers/Forms", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("@ax/containers/Forms")>();
+	return {
+		...actual,
+		formsActions: { ...actual.formsActions, getForm: () => async () => undefined },
+	};
+});
+
+afterEach(cleanup);
+
+// El componentsMock declara un único tema, `1`, y ninguno marcado por defecto:
+// getDefaultTheme() cae al primero de la lista.
+const DEFAULT_THEME = "1";
+const SITE_THEME = "griddo-alt-theme";
+
+const createMockStore = (currentSiteInfo: Record<string, unknown> | null) => {
+	const mockStore = configureStore([thunk] as any);
+	return mockStore({
+		app: {
+			isSaving: false,
+			isLoading: false,
+			lang: { locale: "en-US", id: 1 },
+			globalLangs: [],
+			globalSettings: {},
+		},
+		forms: {
+			currentFormID: null,
+			formContent: null,
+			isNewTranslation: false,
+			selectedEditorID: null,
+			selectedContent: {},
+			template: "",
+			moduleCopy: null,
+		},
+		sites: { currentSiteInfo, currentSiteLanguages: [], currentSitePages: [] },
+		users: { currentUser: null, currentPermissions: [], globalPermissions: [], roles: [] },
+	});
+};
+
+const renderEditor = async (currentSiteInfo: Record<string, unknown> | null) => {
+	const store = createMockStore(currentSiteInfo);
+
+	await act(async () => {
+		render(
+			<Router history={history}>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					{/* El editor está conectado y espera las props de ruta; la Route se las da. */}
+					<Route component={FormEditor} />
+				</ThemeProvider>
+			</Router>,
+			{ store },
+		);
+	});
+
+	return screen.getByTestId("form-editor-editor").getAttribute("data-theme");
+};
+
+describe("FormEditor theme", () => {
+	it("should use the theme of the current site", async () => {
+		expect(await renderEditor({ id: 1, theme: SITE_THEME })).toBe(SITE_THEME);
+	});
+
+	it("should fall back to the default theme on global forms", async () => {
+		expect(await renderEditor(null)).toBe(DEFAULT_THEME);
+	});
+});

package/src/components/ConfigPanel/PreviewForm/index.tsx

@@ -5,9 +5,10 @@ import type { IUserEditing } from "@ax/types";
 
 import * as S from "./style";
 
+const tabs = ["content"];
+
 const PreviewForm = (props: IPreviewFormProps): JSX.Element => {
 	const { selectedTab, setSelectedTab, userEditing } = props;
-	const tabs = ["content"];
 
 	const noteText = `${
 		userEditing && userEditing.name

package/src/components/Login/LoginForm/style.tsx

@@ -49,7 +49,7 @@ const Password = styled.div`
   width: 100%;
   text-align: right;
 
-  span {
+  button {
     cursor: pointer;
   }
 `;

package/src/components/Tabs/index.tsx

@@ -6,10 +6,14 @@ import * as S from "./style";
 const Tabs = (props: ITabsProps): JSX.Element => {
 	const { tabs, icons, active, setSelectedTab, isInAppBar, noMargins, inversed, disabled } = props;
 
+	// Depend on the tab itself, not on the array: callers that build the array inline
+	// give a new reference on each render and would re-run the effect every time.
+	const onlyTab = tabs && tabs.length === 1 ? tabs[0] : undefined;
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: setSelectedTab is stable and should not trigger re-renders
 	useEffect(() => {
-		tabs && tabs.length === 1 && setSelectedTab(tabs[0]);
-	}, [tabs]);
+		onlyTab !== undefined && setSelectedTab(onlyTab);
+	}, [onlyTab]);
 
 	if (tabs) {
 		return (

package/src/containers/PageEditor/actions.tsx

@@ -1477,14 +1477,18 @@ function getGlobalFromLocalPage(): (dispatch: Dispatch, getState: any) => Promis
 function sendPagePing(pageID: number): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
-			const {
-				pageEditor: { userEditing },
-			} = getState();
-
 			const responseActions = {
 				handleSuccess: () => null,
+				// sc-119017: the state is read when the answer lands, not when the ping leaves:
+				// the first ping of the editor starts before getPage has resolved, so
+				// a lock read here would still be null and this would dispatch a
+				// second object for the same author. That dispatch is what reopened
+				// the "page being edited" modal after the author dismissed it.
 				handleError: (response: any) => {
 					const { data } = response;
+					const {
+						pageEditor: { userEditing },
+					} = getState();
 					if (data.code === 400 && (!userEditing || userEditing.id !== data.user.id)) {
 						dispatch(setUserEditing(data.user));
 					}

package/src/hooks/editingLock.ts

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+import type { IUserEditing } from "@ax/types";
+
+/**
+ * Puts the editor in read only while another author holds the page, and tells
+ * the caller when to open and to close the modal that names that author.
+ *
+ * sc-119017: the effect watches the author's **id**, not the object. The
+ * store gets a new object for the same author more than once per page: getPage
+ * dispatches `setUserEditing(page.editing)` and the lock ping dispatches
+ * `setUserEditing(data.user)` on its 400, and both are in flight together when
+ * the editor mounts. Watching the reference reopened the modal that the author
+ * had already dismissed, because the guard of the effect read a stale `isOpen`
+ * from the render that opened it — the second dispatch looked like a new lock.
+ * With the id as the dependency, a repeated dispatch for the same author is a
+ * no-op and the modal stays closed.
+ *
+ * `onLocked` and `onUnlocked` are not dependencies on purpose: React keeps the
+ * closure of the last render, so both callbacks are always the current ones,
+ * and adding them would run the effect on every render.
+ */
+const useEditingLock = (params: {
+	userEditing: IUserEditing | null;
+	currentUserID: number | null;
+	onLocked: () => void;
+	onUnlocked: () => void;
+}): { isReadOnly: boolean } => {
+	const { userEditing, currentUserID, onLocked, onUnlocked } = params;
+
+	const lockedByOtherUserID = userEditing && userEditing.id !== currentUserID ? userEditing.id : null;
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: see the note above
+	useEffect(() => {
+		if (lockedByOtherUserID) {
+			onLocked();
+		} else {
+			onUnlocked();
+		}
+	}, [lockedByOtherUserID]);
+
+	return { isReadOnly: lockedByOtherUserID !== null };
+};
+
+export { useEditingLock };

package/src/hooks/index.tsx

@@ -1,6 +1,7 @@
 import { useBroadcastChannel, useBroadcastClipboard, useBroadcastContentUpdate, useBroadcastLogout } from "./broadcast";
 import { type IBulkSelectedItems, useBulkSelection } from "./bulk";
 import { useAdaptiveText, useCategoryColors, useEmptyState } from "./content";
+import { useEditingLock } from "./editingLock";
 import {
 	useDebounce,
 	useDebouncedCallback,
@@ -36,6 +37,7 @@ export {
 	useDebounce,
 	useDebouncedCallback,
 	useEditingHeartbeat,
+	useEditingLock,
 	useEmptyState,
 	useEqualStructured,
 	useFirefoxScrollLock,

package/src/modules/Forms/FormEditor/index.tsx

@@ -98,7 +98,9 @@ const FormEditor = (props: IProps) => {
 	);
 
 	const backLinkRoute = isSiteView ? "/sites/forms" : "/forms";
-	const theme = getDefaultTheme();
+	// El tema manda en los campos temáticos (VisualUniqueSelection, ColorPicker) y en las
+	// miniaturas: en un site vale el suyo, y solo los formularios globales caen al principal.
+	const theme = currentSiteInfo?.theme || getDefaultTheme();
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {

package/src/modules/GlobalEditor/index.tsx

@@ -30,6 +30,7 @@ import {
 	useBroadcastClipboard,
 	useBroadcastContentUpdate,
 	useEditingHeartbeat,
+	useEditingLock,
 	useIsDirty,
 	useModals,
 	usePermissionsForPage,
@@ -106,7 +107,6 @@ const GlobalEditor = (props: IProps) => {
 	const defaultTab = isAllowedTo.editContentPages ? "edit" : "view";
 
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
-	const [isReadOnly, setIsReadOnly] = useState(false);
 	const [selectedTab, setSelectedTab] = useState(defaultTab);
 	const [notification, setNotification] = useState<INotification | null>(null);
 	const [toastMsg, setToastMsg] = useState<string | null>(null);
@@ -125,7 +125,7 @@ const GlobalEditor = (props: IProps) => {
 	const { broadcastPageSave, remotePageUpdate, clearRemoteUpdate } = useBroadcastContentUpdate(pageID);
 	useBroadcastClipboard();
 
-	const { isOpen, toggleModal, closeModal } = useModals([
+	const { isOpen, toggleModal, openModal, closeModal } = useModals([
 		"userEditing",
 		"unpublish",
 		"schedule",
@@ -139,6 +139,16 @@ const GlobalEditor = (props: IProps) => {
 		"conflictSave",
 	]);
 
+	const { isReadOnly } = useEditingLock({
+		userEditing,
+		currentUserID: props.currentUserID,
+		onLocked: () => openModal("userEditing"),
+		onUnlocked: () => {
+			pageID && sendPagePing(pageID);
+			closeModal("userEditing");
+		},
+	});
+
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
 
 	const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
@@ -207,19 +217,6 @@ const GlobalEditor = (props: IProps) => {
 		resetDirty();
 	}, [lang]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
-	useEffect(() => {
-		const { currentUserID } = props;
-		if (userEditing && userEditing.id !== currentUserID) {
-			setIsReadOnly(true);
-			!isOpen("userEditing") && toggleModal("userEditing");
-		} else {
-			setIsReadOnly(false);
-			pageID && sendPagePing(pageID);
-			isOpen("userEditing") && toggleModal("userEditing");
-		}
-	}, [userEditing]);
-
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		if (!errorPagesChecked && !isLoading && editorContent) {

package/src/modules/PageEditor/index.tsx

@@ -28,6 +28,7 @@ import {
 	useBroadcastClipboard,
 	useBroadcastContentUpdate,
 	useEditingHeartbeat,
+	useEditingLock,
 	useIsDirty,
 	useModals,
 	usePermissionsForPage,
@@ -111,7 +112,6 @@ const PageEditor = (props: IProps) => {
 	const defaultTab = isAllowedTo.editContentPages ? "edit" : "view";
 
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
-	const [isReadOnly, setIsReadOnly] = useState(false);
 	const [selectedTab, setSelectedTab] = useState(defaultTab);
 	const [notification, setNotification] = useState<INotification | null>(null);
 	const [toastMsg, setToastMsg] = useState<string | null>(null);
@@ -127,7 +127,7 @@ const PageEditor = (props: IProps) => {
 	const { broadcastPageSave, remotePageUpdate, clearRemoteUpdate } = useBroadcastContentUpdate(pageID);
 	useBroadcastClipboard();
 
-	const { isOpen, toggleModal, closeModal } = useModals([
+	const { isOpen, toggleModal, openModal, closeModal } = useModals([
 		"userEditing",
 		"unpublish",
 		"delete",
@@ -141,6 +141,16 @@ const PageEditor = (props: IProps) => {
 		"conflictSave",
 	]);
 
+	const { isReadOnly } = useEditingLock({
+		userEditing,
+		currentUserID: props.currentUserID,
+		onLocked: () => openModal("userEditing"),
+		onUnlocked: () => {
+			pageID && sendPagePing(pageID);
+			closeModal("userEditing");
+		},
+	});
+
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
 
 	const isGlobal = editorContent && editorContent.origin === "GLOBAL";
@@ -212,19 +222,6 @@ const PageEditor = (props: IProps) => {
 		setSelectedTab(defaultTab);
 	}, [defaultTab]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
-	useEffect(() => {
-		const { currentUserID } = props;
-		if (userEditing && userEditing.id !== currentUserID) {
-			setIsReadOnly(true);
-			!isOpen("userEditing") && toggleModal("userEditing");
-		} else {
-			setIsReadOnly(false);
-			pageID && sendPagePing(pageID);
-			isOpen("userEditing") && toggleModal("userEditing");
-		}
-	}, [userEditing]);
-
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		if (!errorPagesChecked && !isLoading && editorContent) {