feat: disable the plugin in collab mode

src/components/base.ts

@@ -10,11 +10,13 @@ const fontSizes = {
 type TextProps = {
   size: "xl" | "l" | "s" | "xs";
   margin?: string;
+  textAlign?: "center";
 };
 
 export const Text = styled.p<TextProps>`
   font-size: ${(props) => fontSizes[props.size]};
   margin: ${(props) => props.margin ?? "0"};
+  text-align: ${(props) => props.textAlign ?? undefined};
 `;
 
 export const Input = styled.input`

src/components/create-edit-bar.tsx

@@ -40,9 +40,9 @@ export const CreateEditBar = (props: CreateEditBarProps) => {
 
   const EditDrawing = (
     <>
-      <Group margin="15px 0 0 0">
-        <Text size="s">{activeDrawingName}</Text>
-      </Group>
+      <Text textAlign="center" margin="15px 0 0 0" size="s">
+        {activeDrawingName}
+      </Text>
       <Group margin="5px 0 20px 0">
         <Button color="red" onClick={onClear}>
           New

src/components/modal.tsx

@@ -75,7 +75,6 @@ export const Modal = (props: ModalProps) => {
           >
             Ignore
           </Button>
-
         </Group>
       </ModalContainer>
     </>

src/components/title-bar.tsx

@@ -19,11 +19,9 @@ export const TitleBar = () => {
           src={floppy}
         />
       </Group>
-      <Group margin="0" padding="0">
-        <Text size="xs" margin="0">
-          The Excalidraw drawings manager
-        </Text>
-      </Group>
+      <Text textAlign="center" size="xs" margin="0">
+        The Excalidraw drawings manager
+      </Text>
     </>
   );
 };

src/hooks/use-content-script.ts

@@ -3,14 +3,20 @@ import { sendReceiveMessage } from "../browser";
 
 export const useContentScript = () => {
   const [isAlive, setIsAlive] = useState(false);
+  const [url, setUrl] = useState<string | null>(null);
   const [activeDrawing, setActiveDrawing] = useState<{
     name: string;
     id: string;
   } | null>(null);
 
   const checkIsAlive = async (): Promise<void> => {
     await sendReceiveMessage({ action: "ping" })
-      .then((response) => setIsAlive(response?.action === "pong"))
+      .then((response) => {
+        if (response?.action === "pong") {
+          setIsAlive(true);
+          setUrl(response.currentUrl);
+        }
+      })
       .then(() => updateActiveDrawingName())
       .catch((err) => {
         console.debug(`Unable to communicate with the content-script`, err);
@@ -79,6 +85,7 @@ export const useContentScript = () => {
   return {
     isAlive,
     activeDrawing,
+    url,
     getDrawing,
     setDrawing,
     checkIsAlive,

src/main.tsx

@@ -19,7 +19,7 @@ import { GlobalStyles } from "./style";
 const App = () => {
   const { drawings, createDrawing, deleteDrawing, updateDrawing } =
     useStorage();
-  const { isAlive, activeDrawing, getDrawing, setDrawing, checkIsAlive } =
+  const { isAlive, activeDrawing, url, getDrawing, setDrawing, checkIsAlive } =
     useContentScript();
   const { modalProps, closeModal, openModal } = useModal();
   const [mode, setMode] = useState<"Create" | "Edit">("Create");
@@ -123,9 +123,10 @@ const App = () => {
         title="Excalistore"
         description={
           <>
-            <Group>
-              <Text size="xs">{`This extensions only works on the Excalidraw website.`}</Text>
-            </Group>
+            <Text
+              textAlign="center"
+              size="xs"
+            >{`This extensions only works on the Excalidraw website.`}</Text>
             <Group margin="25px 0 0 0">
               <Button
                 color="green"
@@ -143,6 +144,31 @@ const App = () => {
     );
   }
 
+  console.debug("url", url);
+  console.debug("isAlive", isAlive);
+  if (url === null || url.substring(url.indexOf("#")).includes("#room=")) {
+    return (
+      <Modal
+        title="Excalistore"
+        description={
+          <div style={{ marginTop: "25px" }}>
+            <Text
+              textAlign="center"
+              size="xs"
+            >{`Live collaboration is not supported.`}</Text>
+            <Text
+              textAlign="center"
+              size="xs"
+            >{`Exit from the live collaboration to use Excalistore.`}</Text>
+          </div>
+        }
+        opened={true}
+        icons={"None"}
+        onSubmit={checkIsAlive}
+      />
+    );
+  }
+
   return (
     <>
       <TitleBar />
@@ -154,9 +180,9 @@ const App = () => {
         onClear={onClearCanvas}
         onSave={onSave}
       />
-      <Group margin="0px 0px 5px 0">
-        <Text size="l">Local drawings:</Text>
-      </Group>
+      <Text margin="0px 0px 5px 0" textAlign="center" size="l">
+        Local drawings:
+      </Text>
       <div
         style={{
           maxHeight: "240px",

src/model.ts

@@ -17,7 +17,7 @@ type PingRequest = { action: "ping" };
 /**
  * Reply to Ping from the script to pop-up
  */
-type PingResponse = { action: "pong" };
+type PingResponse = { action: "pong"; currentUrl: string };
 
 /**
  * Message from the pop-up to the script

src/script.ts

@@ -12,7 +12,7 @@ onMessageReceived<PopUpMessage, ScriptMessage>((request, sendResponse) => {
   const reply = (message: ScriptMessage) => sendResponse(message);
   switch (request.action) {
     case "ping":
-      reply({ action: "pong" });
+      reply({ action: "pong", currentUrl: window.location.href });
       break;
     case "get-drawing":
       reply({