Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Commit

Permalink
Merge branch 'MOC-262_undo-button' into MOC-274_top-toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
Kayla Fitzsimmons authored and Kayla Fitzsimmons committed Sep 19, 2024
2 parents c0dcdaf + 3376f42 commit cf71fd0
Show file tree
Hide file tree
Showing 5 changed files with 248 additions and 196 deletions.
50 changes: 39 additions & 11 deletions apps/mocksi-lite-next/src/pages/background/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,13 @@ addEventListener("install", () => {
});
});

<<<<<<< HEAD
let mainIframeSrcPort: null | chrome.runtime.Port = null;
let topIframeSrcPort: null | chrome.runtime.Port = null;
=======
let mainIframeSrcPort: chrome.runtime.Port;
let topIframeSrcPort: chrome.runtime.Port;
>>>>>>> MOC-262_undo-button

chrome.runtime.onConnectExternal.addListener((port) => {
console.log("connecting...", port);
Expand Down Expand Up @@ -149,17 +154,6 @@ chrome.action.onClicked.addListener((tab) => {
}
});

chrome.runtime.onMessage.addListener(
(request, _sender, sendResponse): boolean => {
sendResponse({
data: request.data,
message: request.message,
status: "ok",
});
return true;
},
);

chrome.runtime.onMessageExternal.addListener(
(request, _sender, sendResponse) => {
console.log("on message external: ", request);
Expand All @@ -171,6 +165,7 @@ chrome.runtime.onMessageExternal.addListener(
request.source === "extension/top" &&
request.message === AppEvents.EDIT_DEMO_STOP
) {
<<<<<<< HEAD
if (mainIframeSrcPort) {
// notify extension/main that demo edit mode exited in extension/top
mainIframeSrcPort.postMessage({
Expand All @@ -180,12 +175,20 @@ chrome.runtime.onMessageExternal.addListener(
} else {
console.log("mainIframeSrcPort is not connected");
}
=======
// notify extension/main that demo edit mode exited in extension/top
mainIframeSrcPort.postMessage({
...request,
message: AppEvents.EDIT_DEMO_STOP,
});
>>>>>>> MOC-262_undo-button
}

if (request.message === AuthEvents.AUTH_ERROR) {
await clearAuth();
sendResponse({
message: AuthEvents.RETRY,
source: "background",
status: "ok",
});
} else if (request.message === AuthEvents.UNAUTHORIZED) {
Expand All @@ -195,12 +198,14 @@ chrome.runtime.onMessageExternal.addListener(
const tab = await getCurrentTab();
sendResponse({
message: { accessToken, email, url: tab?.url },
source: "background",
status: "ok",
});
} else {
await showAuthTab(true);
sendResponse({
message: AuthEvents.AUTHENTICATING,
source: "background",
status: "ok",
});
}
Expand All @@ -209,10 +214,15 @@ chrome.runtime.onMessageExternal.addListener(
if (!tab?.id) {
sendResponse({
message: LayoutEvents.NO_TAB,
source: "background",
status: "ok",
});
console.error("No tab found");
<<<<<<< HEAD
return true;
=======
return;
>>>>>>> MOC-262_undo-button
}

if (
Expand Down Expand Up @@ -240,6 +250,7 @@ chrome.runtime.onMessageExternal.addListener(
console.log("response from content script in background:", response);
if (response.message === DemoEditEvents.UNDO) {
// pass updated modifications from reactor to extension/main to store
<<<<<<< HEAD
if (mainIframeSrcPort) {
await mainIframeSrcPort.postMessage({
...response,
Expand All @@ -248,13 +259,20 @@ chrome.runtime.onMessageExternal.addListener(
} else {
console.log("mainIframeSrcPort is not connected");
}
=======
await mainIframeSrcPort.postMessage({
...response,
status: "ok", // response handler expects status
});
>>>>>>> MOC-262_undo-button
}
if (
request.message === AppEvents.EDIT_DEMO_START ||
request.message === DemoEditEvents.NEW_EDIT ||
request.message === DemoEditEvents.CHAT_RESPONSE
) {
// notify extension/top # of edits changed
<<<<<<< HEAD
if (topIframeSrcPort) {
await topIframeSrcPort.postMessage({
...response,
Expand All @@ -268,6 +286,16 @@ chrome.runtime.onMessageExternal.addListener(
sendResponse(response);
});
return true;
=======
await topIframeSrcPort.postMessage({
...response,
status: "ok",
});
}
sendResponse(response);
return true;
});
>>>>>>> MOC-262_undo-button
}
})();

Expand Down
159 changes: 15 additions & 144 deletions apps/mocksi-lite-next/src/pages/content/main-iframe.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import type { ModificationRequest } from "@repo/reactor";
import { Reactor } from "@repo/reactor";
import React from "react";
import ReactDOM from "react-dom";
import { DemoEditEvents, LayoutEvents } from "../events";
import { getHighlighter } from "./highlighter";
import { LayoutEvents } from "../events";

export enum IframePosition {
BOTTOM_CENTER = "BOTTOM_CENTER",
Expand Down Expand Up @@ -71,151 +68,25 @@ function getIframeStyles({ height, position, width }: IframeResizeArgs) {
);
}

interface AppMessageRequest {
data: {
edits?: ModificationRequest[];
uuid: string;
};
message: string;
}

function MainIframe() {
const prevStartStopDemoEventRef = React.useRef({
data: { uuid: "" },
message: "",
});
const reactor = new Reactor();
const highlighter = getHighlighter();
const iframeRef = React.useRef<HTMLIFrameElement>(null);

async function handleStartStopDemoEvent(
prevRequest: AppMessageRequest,
request: AppMessageRequest,
) {
async function startDemo(request: AppMessageRequest) {
if (request.data.edits?.length) {
for (const mod of request.data.edits) {
await reactor.pushModification(mod);
}
} else {
console.log("no edits provided to reactor");
}
return await reactor.attach(document, highlighter);
}

// check if app is asking to start or stop PLAY or EDIT
const startRequestRegExp = new RegExp(/_DEMO_START/);
const stopRequestRegExp = new RegExp(/_DEMO_STOP/);

const requestingStopDemo = stopRequestRegExp.test(request.message);
const requestingStartDemo = startRequestRegExp.test(request.message);

if (!requestingStartDemo && !requestingStopDemo) {
return prevRequest;
}

// if a demo is running already we want to avoid mounting the same
// modifications more than once, this is more performant, and edits
// persist in the dom if transitioning between EDIT and PLAY states
if (requestingStartDemo) {
const prevDemoUUID = prevRequest?.data?.uuid || null;

const demoRunning =
prevDemoUUID && startRequestRegExp.test(prevRequest.message);

if (!demoRunning) {
await startDemo(request);
} else {
const isDupeEvent = prevRequest.message === request.message;
const isNewDemo = prevDemoUUID !== request.data.uuid;
if (!isDupeEvent && isNewDemo) {
if (reactor.isAttached()) {
await reactor.detach(true);
}
await startDemo(request);
}
}
}

if (requestingStopDemo) {
await reactor.detach(true);
}

return request;
}

async function findReplaceAll(find: string, replace: string, flags: string) {
const modification: ModificationRequest = {
description: `Change ${find} to ${replace}`,
modifications: [
{
action: "replaceAll",
content: `/${find}/${replace}/${flags}`,
selector: "body",
},
],
};

const modifications = await reactor.pushModification(modification);
return modifications;
}

React.useEffect(() => {
chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
// execute in async block so that we return true
// synchronously, telling chrome to wait for the response
(async () => {
let data = null;

prevStartStopDemoEventRef.current = await handleStartStopDemoEvent(
prevStartStopDemoEventRef.current,
request,
);

if (request.message === DemoEditEvents.NEW_EDIT) {
if (request.data) {
const { find, flags, replace } = request.data;
await findReplaceAll(find, replace, flags);
data = Array.from(reactor.getAppliedModifications()).map(
(mod) => mod.modificationRequest,
);
}
}

// chat events
if (request.message === DemoEditEvents.CHAT_MESSAGE) {
data = reactor.exportDOM();
}

if (request.message === DemoEditEvents.CHAT_RESPONSE) {
await reactor.pushModification(request.data);
data = Array.from(reactor.getAppliedModifications()).map(
(mod) => mod.modificationRequest,
);
chrome.runtime.onMessage.addListener((request) => {
if (iframeRef.current) {
switch (request.message) {
case LayoutEvents.HIDE:
iframeRef.current.style.display = "none";
break;
case LayoutEvents.RESIZE:
const styles = getIframeStyles(request.data.iframe);
Object.assign(iframeRef.current.style, styles);
break;
case LayoutEvents.SHOW:
iframeRef.current.style.display = "block";
break;
}

// Resize iframe, how or hide it
if (iframeRef.current) {
switch (request.message) {
case LayoutEvents.HIDE:
iframeRef.current.style.display = "none";
break;
case LayoutEvents.RESIZE:
const styles = getIframeStyles(request.data.iframe);
Object.assign(iframeRef.current.style, styles);
break;
case LayoutEvents.SHOW:
iframeRef.current.style.display = "block";
break;
}
}

sendResponse({
data,
message: request.message,
status: "ok",
});
})();
}
return true;
});
}, []);
Expand Down
Loading

0 comments on commit cf71fd0

Please sign in to comment.