[MOC-57] Load modifications on edit mode

apps/mocksi-lite/content/ContentApp.tsx

@@ -9,7 +9,7 @@ import closeIcon from "../public/close-icon.png";
 import mocksiLogo from "../public/mocksi-logo.png";
 import { setRootPosition } from "../utils";
 import { setEditorMode } from "./EditMode/editMode";
-import { ContentHighlighter } from "./EditMode/highlighter";
+import { getHighlighter } from "./EditMode/highlighter";
 import Popup from "./Popup";
 import { RecordButton } from "./RecordButton";
 
@@ -40,6 +40,7 @@ export default function ContentApp({ isOpen, email }: ContentProps) {
 	const [state, setState] = useState<RecordingState>(
 		RecordingState.UNAUTHORIZED,
 	);
+	const ContentHighlighter = getHighlighter();
 
 	useEffect(() => {
 		// Load initial state from chrome storage

apps/mocksi-lite/content/EditMode/actions.ts

@@ -1,6 +1,6 @@
 import { DOMManipulator } from "@repo/dodom";
 import { saveModification } from "../../utils";
-import { ContentHighlighter } from "./highlighter";
+import { getHighlighter } from "./highlighter";
 
 export function cancelEditWithoutChanges(nodeWithTextArea: HTMLElement | null) {
 	if (nodeWithTextArea) {
@@ -24,7 +24,7 @@ export function applyChanges(
 		// TODO: check if we should keep the singleton behavior we had before
 		const domManipulator = new DOMManipulator(
 			fragmentTextNode,
-			ContentHighlighter,
+			getHighlighter(),
 			saveModification,
 		);
 		domManipulator.addPattern(oldValue, newValue);

apps/mocksi-lite/content/EditMode/editMode.ts

@@ -6,7 +6,6 @@ import {
 import { persistModifications, undoModifications } from "../../utils";
 import { cancelEditWithoutChanges } from "./actions";
 import { decorate } from "./decorator";
-import { ContentHighlighter, initHighlighter } from "./highlighter";
 
 export const setEditorMode = async (turnOn: boolean, recordingId?: string) => {
 	if (turnOn) {
@@ -16,7 +15,6 @@ export const setEditorMode = async (turnOn: boolean, recordingId?: string) => {
 		await chrome.storage.local.set({
 			[MOCKSI_RECORDING_STATE]: RecordingState.EDITING,
 		});
-		initHighlighter();
 		blockClickableElements();
 		document.body.addEventListener("dblclick", onDoubleClickText);
 		return;
@@ -31,7 +29,6 @@ export const setEditorMode = async (turnOn: boolean, recordingId?: string) => {
 	await chrome.storage.local.remove(MOCKSI_RECORDING_ID);
 	document.body.removeEventListener("dblclick", onDoubleClickText);
 	restoreNodes();
-	ContentHighlighter.removeHighlightNodes();
 	cancelEditWithoutChanges(document.getElementById("mocksiSelectedText"));
 	document.normalize();
 };

apps/mocksi-lite/content/EditMode/highlighter.ts

@@ -31,12 +31,13 @@ class Highlighter {
 	};
 }
 
-export let ContentHighlighter: Highlighter;
+let ContentHighlighter: Highlighter;
 
-export const initHighlighter = () => {
+export const getHighlighter = () => {
 	if (!ContentHighlighter) {
 		ContentHighlighter = new Highlighter();
 	}
+	return ContentHighlighter;
 };
 
 const highlight = ({

apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx

@@ -21,6 +21,7 @@ const DemoItem = ({
 }: DemoItemProps) => {
 	const handleEdit = () => {
 		setEditorMode(true, uuid);
+		loadAlterations(alterations, true);
 		setState(RecordingState.EDITING);
 	};
 
@@ -46,7 +47,7 @@ const DemoItem = ({
 				</Button>
 				<Button
 					variant={Variant.icon}
-					onClick={() => loadAlterations(alterations)}
+					onClick={() => loadAlterations(alterations, false)}
 					disabled={
 						!url.includes(window.location.hostname) ||
 						!alterations ||

apps/mocksi-lite/utils.ts

@@ -1,3 +1,4 @@
+import { DOMManipulator } from "@repo/dodom";
 import sanitizeHtml from "sanitize-html";
 import MocksiRollbar from "./MocksiRollbar";
 import type { Alteration } from "./background";
@@ -14,6 +15,8 @@ import {
 	STORAGE_KEY,
 	SignupURL,
 } from "./consts";
+import { fragmentTextNode } from "./content/EditMode/actions";
+import { getHighlighter } from "./content/EditMode/highlighter";
 
 type DOMModificationsType = {
 	[querySelector: string]: { nextText: string; previousText: string };
@@ -40,7 +43,7 @@ export const logout = () => {
 
 const commandsExecuted: Command[] = [];
 
-const domainModifications: DOMModificationsType = {};
+let domainModifications: DOMModificationsType = {};
 
 export const saveModification = (
 	parentElement: HTMLElement,
@@ -74,17 +77,35 @@ export const persistModifications = (recordingId: string) => {
 export const undoModifications = () => {
 	loadPreviousModifications();
 	chrome.storage.local.remove(MOCKSI_MODIFICATIONS);
+	getHighlighter().removeHighlightNodes();
+	// clean the domainModifications
+	domainModifications = {};
 };
 
 // v2 of loading alterations, this is from backend
-export const loadAlterations = (alterations: Alteration[] | null) => {
+export const loadAlterations = (
+	alterations: Alteration[] | null,
+	withHighlights: boolean,
+) => {
+	undoModifications();
 	if (!alterations?.length) {
 		// FIXME: we should warn the user that there are no alterations for this demo
 		return [] as Alteration[];
 	}
+	const domManipulator = new DOMManipulator(
+		fragmentTextNode,
+		getHighlighter(),
+		saveModification,
+	);
 	for (const alteration of alterations) {
 		const { selector, dom_after, dom_before } = alteration;
-		modifyElementInnerHTML(selector, dom_before, sanitizeHtml(dom_after));
+		const elemToModify = getHTMLElementFromSelector(selector);
+		domManipulator.iterateAndReplace(
+			elemToModify as Node,
+			new RegExp(dom_before, "gi"),
+			sanitizeHtml(dom_after),
+			withHighlights,
+		);
 	}
 };
 
@@ -93,75 +114,52 @@ export const loadPreviousModifications = () => {
 	for (const modification of Object.entries(domainModifications)) {
 		const [querySelector, { previousText, nextText }] = modification;
 		const sanitizedPreviousText = sanitizeHtml(previousText);
+		const elemToModify = getHTMLElementFromSelector(querySelector);
 		// here newText and previous is in altered order because we want to revert the changes
-		modifyElementInnerHTML(querySelector, nextText, sanitizedPreviousText);
-	}
-};
-
-const modifyElementInnerHTML = (
-	selector: string,
-	oldContent: string,
-	newContent: string,
-) => {
-	// querySelector format {htmlElementType}#{elementId}.{elementClassnames}[${elementIndexIfPresent}]{{newValue}}
-	const hasIndex = selector.match(/\[[0-9]+\]/);
-	const valueInQuerySelector = selector.match(/\{[a-zA-Z0-9 ]+\}/); // add spaces to pattern
-	let elemToModify: Element | null;
-	// FIXME: this needs to be refactored
-	if (hasIndex) {
-		// with all this replaces, we should build a formatter
-		const filteredQuerySelector = formatQuerySelector(
-			selector,
-			valueInQuerySelector,
-			hasIndex,
-		);
-		const index: number = +hasIndex[0].replace("[", "").replace("]", "");
-		// FIXME: lots of duplicated code here
-		try {
-			elemToModify = document.querySelectorAll(filteredQuerySelector)[index];
-		} catch (e: unknown) {
-			if (e instanceof Error) {
-				console.error(`Error querying selector: ${e}`);
-			}
-
-			elemToModify = null;
-		}
-	} else {
-		// FIXME: lots of duplicated code here
-		try {
-			elemToModify = document.querySelector(
-				formatQuerySelector(selector, valueInQuerySelector, null),
+		if (elemToModify) {
+			elemToModify.innerHTML = elemToModify.innerHTML.replaceAll(
+				nextText,
+				sanitizedPreviousText,
 			);
-		} catch (e: unknown) {
-			if (e instanceof Error) {
-				console.error(`Error querying selector: ${e}`);
-			}
-			elemToModify = null;
 		}
 	}
-	const sanitizedNewContent = sanitizeHtml(newContent);
-	if (elemToModify?.innerHTML) {
-		elemToModify.innerHTML =
-			elemToModify.innerHTML.replaceAll(oldContent, sanitizedNewContent) || "";
-	}
 };
 
 const formatQuerySelector = (
 	rawSelector: string,
 	valueInQuerySelector: RegExpMatchArray | null,
 	hasIndex: RegExpMatchArray | null,
 ) => {
-	if (hasIndex) {
-		return valueInQuerySelector
-			? rawSelector
-					.replace(hasIndex[0], "")
-					.replace(valueInQuerySelector[0], "")
-			: rawSelector.replace(hasIndex[0], "");
-	}
+	// querySelector format {htmlElementType}#{elementId}.{elementClassnames}[${elementIndexIfPresent}]{{newValue}}
+	const [index] = hasIndex || [""];
+	const [value] = valueInQuerySelector || [""];
+	return rawSelector.replace(index, "").replace(value, "");
+};
 
-	return valueInQuerySelector
-		? rawSelector.replace(valueInQuerySelector[0], "")
-		: rawSelector;
+const getHTMLElementFromSelector = (
+	unfomattedSelector: string,
+): Element | null => {
+	const hasIndex = unfomattedSelector.match(/\[[0-9]+\]/);
+	const valueInQuerySelector = unfomattedSelector.match(/\{.+\}/);
+	const formattedSelector = formatQuerySelector(
+		unfomattedSelector,
+		hasIndex,
+		valueInQuerySelector,
+	);
+	let elemToModify: NodeListOf<Element> | null;
+	try {
+		elemToModify = document.querySelectorAll(formattedSelector);
+	} catch (e: unknown) {
+		if (e instanceof Error) {
+			console.error(`Error querying selector: ${e}`);
+		}
+		elemToModify = null;
+	}
+	if (elemToModify) {
+		const index = hasIndex ? +hasIndex[0].replace("[", "").replace("]", "") : 0;
+		return elemToModify[index];
+	}
+	return elemToModify;
 };
 
 export const sendMessage = (
@@ -235,7 +233,7 @@ export const getEmail = async (): Promise<string | null> => {
 export const getRecordingsStorage = async (): Promise<Recording[]> => {
 	try {
 		const results = await chrome.storage.local.get(["recordings"]);
-		console.log(results.recordings);
+		console.log("results", results.recordings);
 		if (results.recordings) {
 			return JSON.parse(results.recordings);
 		}

packages/dodom/receivers/DOMManipulator.ts

@@ -32,7 +32,7 @@ export class DOMManipulator {
 	addPattern(pattern: string | RegExp, replace: string) {
 		const replacePattern = { pattern: toRegExpPattern(pattern), replace };
 		this.patterns.push(replacePattern);
-		this.seekAndReplace(replacePattern.pattern, replacePattern.replace);
+		this.seekAndReplaceAllPage(replacePattern.pattern, replacePattern.replace);
 	}
 
 	removePattern(pattern: string | RegExp) {
@@ -50,47 +50,45 @@ export class DOMManipulator {
 		}
 	}
 
-	seekAndReplace(pattern: RegExp, newText: string) {
+	seekAndReplaceAllPage(pattern: RegExp, newText: string) {
 		const body = document.querySelector("body");
 		if (!body) {
 			console.log("Body not found");
 			return;
 		}
+		this.iterateAndReplace(body, pattern, newText, true);
+	}
+
+	iterateAndReplace(
+		rootNode: Node,
+		oldValueInPattern: RegExp,
+		newText: string,
+		highlightReplacements: boolean,
+	) {
 		const fragmentsToHighlight: Node[] = [];
 		const replacements: { nodeToReplace: Node; replacement: Node }[] = [];
-		createTreeWalker(body, (textNode) => {
-			if (!textNode.nodeValue) {
-				return;
-			}
-			const matches = [...textNode.nodeValue.matchAll(pattern)];
-			if (matches.length > 0) {
-				const fragmentedTextNode = this.fragmentTextNode(
-					fragmentsToHighlight,
-					matches,
-					textNode,
-					newText,
-				);
-				replacements.push({
-					nodeToReplace: textNode,
-					replacement: fragmentedTextNode as Node,
-				});
-				this.saveModification(
-					textNode.parentElement as HTMLElement,
-					newText,
-					cleanPattern(pattern),
-				);
-			}
+		createTreeWalker(rootNode, (textNode) => {
+			fillReplacements(
+				textNode,
+				oldValueInPattern,
+				newText,
+				fragmentsToHighlight,
+				replacements,
+				this.fragmentTextNode,
+				this.saveModification,
+			);
 		});
-
 		for (const { nodeToReplace, replacement } of replacements) {
 			if (nodeToReplace.parentElement == null) {
 				continue;
 			}
 			nodeToReplace.parentElement.replaceChild(replacement, nodeToReplace);
 		}
 
-		for (const fragment of fragmentsToHighlight) {
-			this.contentHighlighter.highlightNode(fragment);
+		if (highlightReplacements) {
+			for (const fragment of fragmentsToHighlight) {
+				this.contentHighlighter.highlightNode(fragment);
+			}
 		}
 	}
 
@@ -184,6 +182,38 @@ const createTreeWalker = (
 	} while (treeWalker.nextNode());
 };
 
+const fillReplacements = (
+	textNode: Node,
+	oldTextPattern: RegExp,
+	newText: string,
+	fragmentsToHighlight: Node[],
+	replacements: { nodeToReplace: Node; replacement: Node }[],
+	fragmentTextNode: FragmentTextNode,
+	saveModification: SaveModification,
+) => {
+	if (!textNode || !textNode.nodeValue) {
+		return;
+	}
+	const matches = [...textNode.nodeValue.matchAll(oldTextPattern)];
+	if (matches.length > 0) {
+		const fragmentedTextNode = fragmentTextNode(
+			fragmentsToHighlight,
+			matches,
+			textNode,
+			newText,
+		);
+		replacements.push({
+			nodeToReplace: textNode,
+			replacement: fragmentedTextNode as Node,
+		});
+		saveModification(
+			textNode.parentElement as HTMLElement,
+			newText,
+			cleanPattern(oldTextPattern),
+		);
+	}
+};
+
 export const replaceFirstLetterCase = (value: string) => {
 	return (match: string) => {
 		if (match[0]?.toLowerCase() !== match[0]?.toUpperCase()) {