hardcode public path to use unpkg

src/components/App.tsx

@@ -972,7 +972,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       },
       {
         renderOptimizations: true,
-        renderScrollbars: !isMobile(),
       },
     );
     if (scrollBars) {

src/components/ExportDialog.scss

@@ -66,10 +66,4 @@
       overflow-y: auto;
     }
   }
-
-  .shareable-link--viewonly {
-    svg {
-      width: 1.5em;
-    }
-  }
 }

src/components/ExportDialog.tsx

@@ -12,7 +12,7 @@ import { exportToCanvas, getExportSize } from "../scene/export";
 import { AppState } from "../types";
 import { Dialog } from "./Dialog";
 import "./ExportDialog.scss";
-import { clipboard, exportFile, eyeIcon, link } from "./icons";
+import { clipboard, exportFile, link } from "./icons";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 
@@ -66,10 +66,7 @@ const ExportModal = ({
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
-  onExportToBackend?: (
+  onExportToBackend?: ExportCB;
-    elements: readonly NonDeletedExcalidrawElement[],
-    viewonly: boolean,
-  ) => void;
   onCloseRequest: () => void;
 }) => {
   const someElementIsSelected = isSomeElementSelected(elements, appState);
@@ -158,23 +155,13 @@ const ExportModal = ({
               />
             )}
             {onExportToBackend && (
-              <>
+              <ToolButton
-                <ToolButton
+                type="button"
-                  type="button"
+                icon={link}
-                  icon={link}
+                title={t("buttons.getShareableLink")}
-                  title={t("buttons.getShareableLink")}
+                aria-label={t("buttons.getShareableLink")}
-                  aria-label={t("buttons.getShareableLink")}
+                onClick={() => onExportToBackend(exportedElements)}
-                  onClick={() => onExportToBackend(exportedElements, false)}
+              />
-                />
-                <ToolButton
-                  type="button"
-                  icon={eyeIcon}
-                  className="shareable-link--viewonly"
-                  title={t("buttons.getViewonlyShareableLink")}
-                  aria-label={t("buttons.getShareableLink")}
-                  onClick={() => onExportToBackend(exportedElements, true)}
-                />
-              </>
             )}
           </Stack.Row>
           <div className="ExportDialog__name">
@@ -249,10 +236,7 @@ export const ExportDialog = ({
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
-  onExportToBackend?: (
+  onExportToBackend?: ExportCB;
-    elements: readonly NonDeletedExcalidrawElement[],
-    viewonly: boolean,
-  ) => void;
 }) => {
   const [modalIsShown, setModalIsShown] = useState(false);
   const triggerButton = useRef<HTMLButtonElement>(null);

src/components/LayerUI.tsx

@@ -58,7 +58,6 @@ interface LayerUIProps {
   isCollaborating: boolean;
   onExportToBackend?: (
     exportedElements: readonly NonDeletedExcalidrawElement[],
-    viewonly: boolean,
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;
@@ -369,9 +368,9 @@ const LayerUI = ({
         onExportToClipboard={createExporter("clipboard")}
         onExportToBackend={
           onExportToBackend
-            ? (elements, viewonly) => {
+            ? (elements) => {
                 onExportToBackend &&
-                  onExportToBackend(elements, viewonly, appState, canvas);
+                  onExportToBackend(elements, appState, canvas);
               }
             : undefined
         }

src/components/icons.tsx

@@ -113,10 +113,6 @@ export const questionCircle = createIcon(
   { mirror: true },
 );
 
-export const eyeIcon = createIcon(
-  "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z",
-);
-
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(

src/excalidraw-app/data/index.ts

@@ -251,7 +251,6 @@ export const loadScene = async (
 export const exportToBackend = async (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-  viewonly: boolean,
 ) => {
   const json = serializeAsJSON(elements, appState);
   const encoded = new TextEncoder().encode(json);
@@ -289,13 +288,9 @@ export const exportToBackend = async (
     const json = await response.json();
     if (json.id) {
       const url = new URL(window.location.href);
-      url.hash = "#";
-      if (viewonly) {
-        url.hash = `${url.hash}viewonly=true&`;
-      }
       // We need to store the key (and less importantly the id) as hash instead
       // of queryParam in order to never send it to the server
-      url.hash = `${url.hash}json=${json.id},${exportedKey.k!}`;
+      url.hash = `json=${json.id},${exportedKey.k!}`;
       const urlString = url.toString();
       window.prompt(`🔒${t("alerts.uploadedSecurly")}`, urlString);
     } else if (json.error_class === "RequestTooLargeError") {

src/excalidraw-app/index.tsx

@@ -70,8 +70,9 @@ const initializeScene = async (opts: {
   const searchParams = new URLSearchParams(window.location.search);
   const id = searchParams.get("id");
   const jsonMatch = window.location.hash.match(
-    /json=([0-9]+),([a-zA-Z0-9_-]+)/,
+    /^#json=([0-9]+),([a-zA-Z0-9_-]+)$/,
   );
+
   const initialData = importFromLocalStorage();
 
   let scene = await loadScene(null, null, initialData);
@@ -93,10 +94,6 @@ const initializeScene = async (opts: {
       } else if (jsonMatch) {
         scene = await loadScene(jsonMatch[1], jsonMatch[2], initialData);
       }
-      const isViewModeEnabled = !!window.location.hash.match(/#viewonly=true/);
-      if (isViewModeEnabled) {
-        scene.appState.viewModeEnabled = true;
-      }
       if (!roomLinkData) {
         window.history.replaceState({}, APP_NAME, window.location.origin);
       }
@@ -137,7 +134,6 @@ function ExcalidrawWrapper() {
   const [errorMessage, setErrorMessage] = useState("");
   const currentLangCode = languageDetector.detect() || defaultLang.code;
   const [langCode, setLangCode] = useState(currentLangCode);
-  const [viewModeEnabled, setViewModeEnabled] = useState(false);
 
   useLayoutEffect(() => {
     const onResize = () => {
@@ -161,6 +157,7 @@ function ExcalidrawWrapper() {
   if (!initialStatePromiseRef.current.promise) {
     initialStatePromiseRef.current.promise = resolvablePromise<ImportedDataState | null>();
   }
+
   useEffect(() => {
     // Delayed so that the app has a time to load the latest SW
     setTimeout(() => {
@@ -181,18 +178,12 @@ function ExcalidrawWrapper() {
     }
 
     initializeScene({ collabAPI }).then((scene) => {
-      if (scene?.appState?.viewModeEnabled) {
-        setViewModeEnabled(true);
-      }
       initialStatePromiseRef.current.promise.resolve(scene);
     });
 
     const onHashChange = (_: HashChangeEvent) => {
       initializeScene({ collabAPI }).then((scene) => {
         if (scene) {
-          if (scene?.appState?.viewModeEnabled) {
-            setViewModeEnabled(true);
-          }
           excalidrawAPI.updateScene(scene);
         }
       });
@@ -233,7 +224,6 @@ function ExcalidrawWrapper() {
 
   const onExportToBackend = async (
     exportedElements: readonly NonDeletedExcalidrawElement[],
-    viewonly: boolean,
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => {
@@ -242,16 +232,12 @@ function ExcalidrawWrapper() {
     }
     if (canvas) {
       try {
-        await exportToBackend(
+        await exportToBackend(exportedElements, {
-          exportedElements,
+          ...appState,
-          {
+          viewBackgroundColor: appState.exportBackground
-            ...appState,
+            ? appState.viewBackgroundColor
-            viewBackgroundColor: appState.exportBackground
+            : getDefaultAppState().viewBackgroundColor,
-              ? appState.viewBackgroundColor
+        });
-              : getDefaultAppState().viewBackgroundColor,
-          },
-          viewonly,
-        );
       } catch (error) {
         if (error.name !== "AbortError") {
           const { width, height } = canvas;
@@ -286,6 +272,7 @@ function ExcalidrawWrapper() {
     },
     [langCode],
   );
+
   return (
     <>
       <Excalidraw
@@ -300,7 +287,6 @@ function ExcalidrawWrapper() {
         onExportToBackend={onExportToBackend}
         renderFooter={renderFooter}
         langCode={langCode}
-        viewModeEnabled={viewModeEnabled ? viewModeEnabled : undefined}
       />
       {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (

src/locales/en.json

@@ -106,7 +106,6 @@
     "saveAs": "Save as",
     "load": "Load",
     "getShareableLink": "Get shareable link",
-    "getViewonlyShareableLink": "Get View only shareable link",
     "close": "Close",
     "selectLanguage": "Select language",
     "scrollBackToContent": "Scroll back to content",

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@excalidraw/excalidraw",
+  "name": "aakansha-excalidraw",
-  "version": "0.3.1",
+  "version": "0.4.3",
   "main": "dist/excalidraw.min.js",
   "files": [
     "dist/*"

src/packages/excalidraw/webpack.prod.config.js

@@ -14,6 +14,7 @@ module.exports = {
     libraryTarget: "umd",
     filename: "[name].js",
     chunkFilename: "excalidraw-assets/[name].js",
+    publicPath: "https://unpkg.com/aakansha-excalidraw@0.4.3/dist/",
   },
   resolve: {
     extensions: [".js", ".ts", ".tsx", ".css", ".scss"],

src/types.ts

@@ -180,7 +180,6 @@ export interface ExcalidrawProps {
   }) => void;
   onExportToBackend?: (
     exportedElements: readonly NonDeletedExcalidrawElement[],
-    viewonly: boolean,
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;