fix: Infinite loop loading page with vbnet code embed

app/components/Sidebar/components/DocumentLink.tsx

@@ -148,12 +148,7 @@ function InnerDocumentLink(
   const color = document?.color || node.color;
 
   // Draggable
-  const [{ isDragging }, drag] = useDragDocument(
-    node,
-    depth,
-    document,
-    isEditing
-  );
+  const [{ isDragging }, drag] = useDragDocument(node, depth, document);
 
   // Drop to re-parent
   const parentRef = React.useRef<HTMLDivElement>(null);
@@ -275,8 +270,6 @@ function InnerDocumentLink(
           <div ref={dropToReparent}>
             <DropToImport documentId={node.id} activeClassName="activeDropZone">
               <SidebarLink
-                // @ts-expect-error react-router type is wrong, string component is fine.
-                component={isEditing ? "div" : undefined}
                 expanded={hasChildren ? isExpanded : undefined}
                 onDisclosureClick={handleDisclosureClick}
                 onClickIntent={handlePrefetch}
@@ -292,7 +285,6 @@ function InnerDocumentLink(
                   <EditableTitle
                     title={title}
                     onSubmit={handleTitleChange}
-                    isEditing={isEditing}
                     onEditing={setIsEditing}
                     canUpdate={canUpdate}
                     maxLength={DocumentValidation.maxTitleLength}

app/components/Sidebar/components/NavLink.tsx

@@ -39,7 +39,6 @@ export interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   location?: Location;
   strict?: boolean;
   to: LocationDescriptor;
-  component?: React.ComponentType;
   onBeforeClick?: () => void;
 }
 
@@ -147,22 +146,17 @@ const NavLink = ({
     setPreActive(undefined);
   }, [currentLocation]);
 
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLAnchorElement>) => {
-      if (["Enter", " "].includes(event.key)) {
-        navigateTo();
-        event.currentTarget?.blur();
-      }
-    },
-    [navigateTo]
-  );
-
   return (
     <Link
       key={isActive ? "active" : "inactive"}
       ref={linkRef}
       onClick={handleClick}
-      onKeyDown={handleKeyDown}
+      onKeyDown={(event) => {
+        if (["Enter", " "].includes(event.key)) {
+          navigateTo();
+          event.currentTarget?.blur();
+        }
+      }}
       aria-current={(isActive && ariaCurrent) || undefined}
       className={className}
       style={style}

app/components/Sidebar/hooks/useDragAndDrop.tsx

@@ -166,13 +166,11 @@ export function useDropToReorderStar(getIndex?: () => string) {
  * @param node The NavigationNode model to drag.
  * @param depth The depth of the node in the sidebar.
  * @param document The related Document model.
- * @param isEditing Whether the sidebar item is currently being edited.
  */
 export function useDragDocument(
   node: NavigationNode,
   depth: number,
-  document?: Document,
-  isEditing?: boolean
+  document?: Document
 ) {
   const icon = document?.icon || node.icon || node.emoji;
   const color = document?.color || node.color;
@@ -190,7 +188,7 @@ export function useDragDocument(
         icon: icon ? <Icon value={icon} color={color} /> : undefined,
         collectionId: document?.collectionId || "",
       } as DragObject),
-    canDrag: () => !!document?.isActive && !isEditing,
+    canDrag: () => !!document?.isActive,
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),

app/hooks/useSettingsConfig.ts

@@ -8,6 +8,7 @@ import {
   GlobeIcon,
   TeamIcon,
   BeakerIcon,
+  BuildingBlocksIcon,
   SettingsIcon,
   ExportIcon,
   ImportIcon,
@@ -39,6 +40,7 @@ const Notifications = lazy(() => import("~/scenes/Settings/Notifications"));
 const Preferences = lazy(() => import("~/scenes/Settings/Preferences"));
 const Profile = lazy(() => import("~/scenes/Settings/Profile"));
 const Security = lazy(() => import("~/scenes/Settings/Security"));
+const SelfHosted = lazy(() => import("~/scenes/Settings/SelfHosted"));
 const Shares = lazy(() => import("~/scenes/Settings/Shares"));
 const Templates = lazy(() => import("~/scenes/Settings/Templates"));
 const Zapier = lazy(() => import("~/scenes/Settings/Zapier"));
@@ -175,6 +177,14 @@ const useSettingsConfig = () => {
         icon: ExportIcon,
       },
       // Integrations
+      {
+        name: t("Self Hosted"),
+        path: integrationSettingsPath("self-hosted"),
+        component: SelfHosted,
+        enabled: can.update && !isCloudHosted,
+        group: t("Integrations"),
+        icon: BuildingBlocksIcon,
+      },
       {
         name: "Zapier",
         path: integrationSettingsPath("zapier"),

app/scenes/Settings/SelfHosted.tsx

@@ -0,0 +1,140 @@
+import find from "lodash/find";
+import { observer } from "mobx-react";
+import { BuildingBlocksIcon } from "outline-icons";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { IntegrationService, IntegrationType } from "@shared/types";
+import Integration from "~/models/Integration";
+import Button from "~/components/Button";
+import Heading from "~/components/Heading";
+import Input from "~/components/Input";
+import Scene from "~/components/Scene";
+import useStores from "~/hooks/useStores";
+import SettingRow from "./components/SettingRow";
+
+type FormData = {
+  drawIoUrl: string;
+  gristUrl: string;
+};
+
+function SelfHosted() {
+  const { integrations } = useStores();
+  const { t } = useTranslation();
+
+  const integrationDiagrams = find(integrations.orderedData, {
+    type: IntegrationType.Embed,
+    service: IntegrationService.Diagrams,
+  }) as Integration<IntegrationType.Embed> | undefined;
+
+  const integrationGrist = find(integrations.orderedData, {
+    type: IntegrationType.Embed,
+    service: IntegrationService.Grist,
+  }) as Integration<IntegrationType.Embed> | undefined;
+
+  const {
+    register,
+    reset,
+    handleSubmit: formHandleSubmit,
+    formState,
+  } = useForm<FormData>({
+    mode: "all",
+    defaultValues: {
+      drawIoUrl: integrationDiagrams?.settings.url,
+      gristUrl: integrationGrist?.settings.url,
+    },
+  });
+
+  React.useEffect(() => {
+    void integrations.fetchPage({
+      type: IntegrationType.Embed,
+    });
+  }, [integrations]);
+
+  React.useEffect(() => {
+    reset({
+      drawIoUrl: integrationDiagrams?.settings.url,
+      gristUrl: integrationGrist?.settings.url,
+    });
+  }, [integrationDiagrams, integrationGrist, reset]);
+
+  const handleSubmit = React.useCallback(
+    async (data: FormData) => {
+      try {
+        if (data.drawIoUrl) {
+          await integrations.save({
+            id: integrationDiagrams?.id,
+            type: IntegrationType.Embed,
+            service: IntegrationService.Diagrams,
+            settings: {
+              url: data.drawIoUrl,
+            },
+          });
+        } else {
+          await integrationDiagrams?.delete();
+        }
+
+        if (data.gristUrl) {
+          await integrations.save({
+            id: integrationGrist?.id,
+            type: IntegrationType.Embed,
+            service: IntegrationService.Grist,
+            settings: {
+              url: data.gristUrl,
+            },
+          });
+        } else {
+          await integrationGrist?.delete();
+        }
+
+        toast.success(t("Settings saved"));
+      } catch (err) {
+        toast.error(err.message);
+      }
+    },
+    [integrations, integrationDiagrams, integrationGrist, t]
+  );
+
+  return (
+    <Scene title={t("Self Hosted")} icon={<BuildingBlocksIcon />}>
+      <Heading>{t("Self Hosted")}</Heading>
+
+      <form onSubmit={formHandleSubmit(handleSubmit)}>
+        <SettingRow
+          label={t("Draw.io deployment")}
+          name="drawIoUrl"
+          description={t(
+            "Add your self-hosted draw.io installation url here to enable automatic embedding of diagrams within documents."
+          )}
+          border={false}
+        >
+          <Input
+            placeholder="https://app.diagrams.net/"
+            pattern="https?://.*"
+            {...register("drawIoUrl")}
+          />
+        </SettingRow>
+
+        <SettingRow
+          label={t("Grist deployment")}
+          name="gristUrl"
+          description={t("Add your self-hosted grist installation URL here.")}
+          border={false}
+        >
+          <Input
+            placeholder="https://docs.getgrist.com/"
+            pattern="https?://.*"
+            {...register("gristUrl")}
+          />
+        </SettingRow>
+
+        <Button type="submit" disabled={formState.isSubmitting}>
+          {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
+        </Button>
+      </form>
+    </Scene>
+  );
+}
+
+export default observer(SelfHosted);

app/stores/base/Store.ts

@@ -99,14 +99,7 @@ export default abstract class Store<T extends Model> {
     const normalized = deburr((query ?? "").trim().toLocaleLowerCase());
 
     if (!normalized) {
-      return this.orderedData
-        .filter((item) => {
-          if ("deletedAt" in item && item.deletedAt) {
-            return false;
-          }
-          return true;
-        })
-        .slice(0, options?.maxResults);
+      return this.orderedData.slice(0, options?.maxResults);
     }
 
     return this.orderedData

package.json

@@ -377,6 +377,5 @@
     "rollup": "^4.5.1",
     "prismjs": "1.30.0"
   },
-  "version": "0.83.0",
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "version": "0.83.0"
 }

plugins/github/server/github.ts

@@ -206,12 +206,12 @@ export class GitHub {
       );
       const { data } = await client.requestResource(resource);
       if (!data) {
-        return { error: "Resource not found" };
+        return;
       }
       return { ...data, type: resource.type };
     } catch (err) {
       Logger.warn("Failed to fetch resource from GitHub", err);
-      return { error: err.message || "Unknown error" };
+      return;
     }
   };
 }

plugins/iframely/server/iframely.ts

@@ -1,6 +1,6 @@
 import { JSONObject, UnfurlResourceType } from "@shared/types";
 import Logger from "@server/logging/Logger";
-import { UnfurlError, UnfurlSignature } from "@server/types";
+import { UnfurlSignature } from "@server/types";
 import fetch from "@server/utils/fetch";
 import env from "./env";
 
@@ -10,7 +10,7 @@ class Iframely {
   public static async requestResource(
     url: string,
     type = "oembed"
-  ): Promise<JSONObject | UnfurlError> {
+  ): Promise<JSONObject | undefined> {
     const isDefaultHost = env.IFRAMELY_URL === this.defaultUrl;
 
     // Cloud Iframely requires /api path, while self-hosted does not.
@@ -25,7 +25,7 @@ class Iframely {
       return await res.json();
     } catch (err) {
       Logger.error(`Error fetching data from Iframely for url: ${url}`, err);
-      return { error: err.message || "Unknown error" };
+      return;
     }
   }
 
@@ -36,9 +36,7 @@ class Iframely {
    */
   public static unfurl: UnfurlSignature = async (url: string) => {
     const data = await Iframely.requestResource(url);
-    return "error" in data // In addition to our custom UnfurlError, sometimes iframely returns error in the response body.
-      ? ({ error: data.error } as UnfurlError)
-      : { ...data, type: UnfurlResourceType.OEmbed };
+    return { ...data, type: UnfurlResourceType.OEmbed };
   };
 }
 

plugins/notion/server/notion.ts

@@ -13,11 +13,9 @@ import {
   RichTextItemResponse,
 } from "@notionhq/client/build/src/api-endpoints";
 import { RateLimit } from "async-sema";
-import emojiRegex from "emoji-regex";
 import compact from "lodash/compact";
 import { z } from "zod";
 import { Second } from "@shared/utils/time";
-import { isUrl } from "@shared/utils/urls";
 import { NotionUtils } from "../shared/NotionUtils";
 import { Block, Page, PageType } from "../shared/types";
 import env from "./env";
@@ -39,16 +37,7 @@ const AccessTokenResponseSchema = z.object({
   bot_id: z.string(),
   workspace_id: z.string(),
   workspace_name: z.string().nullish(),
-  workspace_icon: z
-    .string()
-    .nullish()
-    .transform((val) => {
-      const emojiRegexp = emojiRegex();
-      if (val && (isUrl(val) || emojiRegexp.test(val))) {
-        return val;
-      }
-      return undefined;
-    }),
+  workspace_icon: z.string().url().nullish(),
 });
 
 export class NotionClient {

server/models/helpers/NotificationHelper.test.ts

@@ -251,10 +251,6 @@ describe("NotificationHelper", () => {
         userId: subscribedUser.id,
         collectionId: document.collectionId!,
       });
-      await buildSubscription({
-        userId: subscribedUser.id,
-        documentId: document.id,
-      });
 
       const recipients =
         await NotificationHelper.getDocumentNotificationRecipients({

server/models/helpers/NotificationHelper.ts

@@ -1,5 +1,4 @@
 import uniq from "lodash/uniq";
-import uniqBy from "lodash/uniqBy";
 import { Op } from "sequelize";
 import {
   NotificationEventType,
@@ -188,6 +187,7 @@ export default class NotificationHelper {
       });
     } else {
       const subscriptions = await Subscription.findAll({
+        attributes: ["userId"],
         where: {
           userId: {
             [Op.ne]: actorId,
@@ -206,19 +206,17 @@ export default class NotificationHelper {
         ],
       });
 
-      recipients = uniqBy(
-        subscriptions.map((s) => s.user),
-        (user) => user.id
-      );
+      recipients = subscriptions.map((s) => s.user);
     }
 
+    recipients = recipients.filter((recipient) =>
+      recipient.subscribedToEventType(notificationType)
+    );
+
     const filtered = [];
 
     for (const recipient of recipients) {
-      if (
-        recipient.isSuspended ||
-        !recipient.subscribedToEventType(notificationType)
-      ) {
+      if (recipient.isSuspended) {
         continue;
       }
 

server/queues/tasks/CommentCreatedNotificationsTask.ts

@@ -85,21 +85,16 @@ export default class CommentCreatedNotificationsTask extends BaseTask<CommentEve
       )
     ).filter((recipient) => !userIdsMentioned.includes(recipient.id));
 
-    await sequelize.transaction(async (transaction) => {
-      for (const recipient of recipients) {
-        await Notification.create(
-          {
-            event: NotificationEventType.CreateComment,
-            userId: recipient.id,
-            actorId: comment.createdById,
-            teamId: document.teamId,
-            commentId: comment.id,
-            documentId: document.id,
-          },
-          { transaction }
-        );
-      }
-    });
+    for (const recipient of recipients) {
+      await Notification.create({
+        event: NotificationEventType.CreateComment,
+        userId: recipient.id,
+        actorId: comment.createdById,
+        teamId: document.teamId,
+        commentId: comment.id,
+        documentId: document.id,
+      });
+    }
   }
 
   public get options() {

server/routes/api/urls/urls.test.ts

@@ -20,7 +20,7 @@ jest.mock("dns", () => ({
 
 jest
   .spyOn(Iframely, "requestResource")
-  .mockImplementation(() => Promise.resolve({}));
+  .mockImplementation(() => Promise.resolve(undefined));
 
 const server = getTestServer();
 

server/routes/api/urls/urls.ts

@@ -98,12 +98,11 @@ router.post(
     }
 
     for (const plugin of plugins) {
-      const unfurl = await plugin.value.unfurl(url, actor);
-      if (unfurl) {
-        if (unfurl.error) {
+      const data = await plugin.value.unfurl(url, actor);
+      if (data) {
+        if ("error" in data) {
           return (ctx.response.status = 204);
         } else {
-          const data = unfurl as Unfurl;
           await CacheHelper.setData(
             CacheHelper.getUnfurlKey(actor.teamId, url),
             data,

server/types.ts

@@ -578,12 +578,10 @@ export type CollectionJSONExport = {
 
 export type Unfurl = { [x: string]: JSONValue; type: UnfurlResourceType };
 
-export type UnfurlError = { error: string };
-
 export type UnfurlSignature = (
   url: string,
   actor?: User
-) => Promise<Unfurl | UnfurlError | undefined>;
+) => Promise<Unfurl | void>;
 
 export type UninstallSignature = (integration: Integration) => Promise<void>;
 

shared/editor/components/Styles.ts

@@ -128,7 +128,6 @@ const mathStyle = (props: Props) => css`
   math-block .math-src .ProseMirror {
     width: 100%;
     display: block;
-    outline: none;
   }
 
   math-block .katex-display {
@@ -335,7 +334,7 @@ width: 100%;
   box-sizing: content-box;
 }
 
-& > .ProseMirror {
+.ProseMirror {
   position: relative;
   outline: none;
   word-wrap: break-word;
@@ -708,7 +707,6 @@ img.ProseMirror-separator {
   resize: none;
   user-select: text;
   margin: 0 auto !important;
-  max-width: 100vw;
 }
 
 .ProseMirror[contenteditable="false"] {

shared/i18n/locales/en_US/translation.json

@@ -520,6 +520,7 @@
   "Groups": "Groups",
   "Shared Links": "Shared Links",
   "Import": "Import",
+  "Self Hosted": "Self Hosted",
   "Integrations": "Integrations",
   "Revoke token": "Revoke token",
   "Revoke": "Revoke",
@@ -1044,6 +1045,10 @@
   "Allow editors to create new collections within the workspace": "Allow editors to create new collections within the workspace",
   "Workspace creation": "Workspace creation",
   "Allow editors to create new workspaces": "Allow editors to create new workspaces",
+  "Draw.io deployment": "Draw.io deployment",
+  "Add your self-hosted draw.io installation url here to enable automatic embedding of diagrams within documents.": "Add your self-hosted draw.io installation url here to enable automatic embedding of diagrams within documents.",
+  "Grist deployment": "Grist deployment",
+  "Add your self-hosted grist installation URL here.": "Add your self-hosted grist installation URL here.",
   "Could not load shares": "Could not load shares",
   "Sharing is currently disabled.": "Sharing is currently disabled.",
   "You can globally enable and disable public document sharing in the <em>security settings</em>.": "You can globally enable and disable public document sharing in the <em>security settings</em>.",