made Highlighter Singleton to prevent multiple instances of the same …

…class

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);