tsc

.eslintrc

@@ -65,7 +65,7 @@
     ],
     "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
     "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-    "lodash/import-scope": ["warn", "method"],
+    "lodash/import-scope": ["error", "method"],
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
     "import/newline-after-import": 2,

.github/workflows/ci.yml

@@ -63,6 +63,7 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       server: ${{ steps.filter.outputs.server }}
+      app: ${{ steps.filter.outputs.app }}
     steps:
       - uses: actions/checkout@v4
       - uses: dorny/paths-filter@v2
@@ -81,7 +82,7 @@ jobs:
               - 'yarn.lock'
 
   test:
-    needs: build
+    needs: [build, changes]
     if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     strategy:
@@ -143,7 +144,7 @@ jobs:
         yarn test --maxWorkers=2 $TESTFILES
 
   bundle-size:
-    needs: [build, types]
+    needs: [build, types, changes]
     if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     steps:
@@ -161,3 +162,4 @@ jobs:
       with:
         key: ${{ secrets.RELATIVE_CI_KEY }}
         token: ${{ secrets.GITHUB_TOKEN }}
+        webpackStatsFile: ./build/app/webpack-stats.json

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.82.0
+Licensed Work:        Outline 0.83.0
                       The Licensed Work is (c) 2025 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2029-02-15
+Change Date:          2029-04-11
 
 Change License:       Apache License, Version 2.0
 

app/stores/base/Store.ts

@@ -1,5 +1,6 @@
 import commandScore from "command-score";
 import invariant from "invariant";
+// eslint-disable-next-line lodash/import-scope
 import type { ObjectIterateeCustom } from "lodash";
 import deburr from "lodash/deburr";
 import filter from "lodash/filter";

package.json

@@ -377,5 +377,5 @@
     "rollup": "^4.5.1",
     "prismjs": "1.30.0"
   },
-  "version": "0.82.0"
-}
+  "version": "0.83.0"
+}

shared/editor/components/Frame.tsx

@@ -1,13 +1,15 @@
-import { observable } from "mobx";
-import { observer } from "mobx-react";
 import { OpenIcon } from "outline-icons";
 import * as React from "react";
+import { useState, useEffect, useRef } from "react";
 import styled from "styled-components";
 import { Optional } from "utility-types";
 import { s } from "../../styles";
 import { sanitizeUrl } from "../../utils/urls";
 
-type Props = Omit<Optional<HTMLIFrameElement>, "children" | "style"> & {
+type Props = Omit<
+  Optional<React.ComponentProps<typeof Iframe>>,
+  "children" | "style"
+> & {
   /** The URL to load in the iframe */
   src?: string;
   /** Whether to display a border, defaults to true */
@@ -30,85 +32,79 @@ type PropsWithRef = Props & {
   forwardedRef: React.Ref<HTMLIFrameElement>;
 };
 
-@observer
-class Frame extends React.Component<PropsWithRef> {
-  mounted: boolean;
+const Frame = ({
+  border,
+  style = {},
+  forwardedRef,
+  icon,
+  title,
+  canonicalUrl,
+  isSelected,
+  referrerPolicy,
+  className = "",
+  src,
+  ...rest
+}: PropsWithRef) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const mountedRef = useRef(true);
 
-  @observable
-  isLoaded = false;
+  useEffect(() => {
+    // Set mounted flag
+    mountedRef.current = true;
 
-  componentDidMount() {
-    this.mounted = true;
-    setTimeout(this.loadIframe, 0);
-  }
+    // Load iframe after a small delay
+    const timer = setTimeout(() => {
+      if (mountedRef.current) {
+        setIsLoaded(true);
+      }
+    }, 0);
 
-  componentWillUnmount() {
-    this.mounted = false;
-  }
+    // Cleanup function
+    return () => {
+      mountedRef.current = false;
+      clearTimeout(timer);
+    };
+  }, []);
 
-  loadIframe = () => {
-    if (!this.mounted) {
-      return;
-    }
-    this.isLoaded = true;
-  };
+  const showBottomBar = !!(icon || canonicalUrl);
 
-  render() {
-    const {
-      border,
-      style = {},
-      forwardedRef,
-      icon,
-      title,
-      canonicalUrl,
-      isSelected,
-      referrerPolicy,
-      className = "",
-      src,
-    } = this.props;
-    const showBottomBar = !!(icon || canonicalUrl);
-
-    return (
-      <Rounded
-        style={style}
-        $showBottomBar={showBottomBar}
-        $border={border}
-        className={
-          isSelected ? `ProseMirror-selectednode ${className}` : className
-        }
-      >
-        {this.isLoaded && (
-          <Iframe
-            ref={forwardedRef}
-            $showBottomBar={showBottomBar}
-            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-downloads allow-storage-access-by-user-activation"
-            style={style}
-            frameBorder="0"
-            title="embed"
-            loading="lazy"
-            src={sanitizeUrl(src)}
-            referrerPolicy={referrerPolicy}
-            allowFullScreen
-          />
-        )}
-        {showBottomBar && (
-          <Bar>
-            {icon} <Title>{title}</Title>
-            {canonicalUrl && (
-              <Open
-                href={canonicalUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <OpenIcon size={18} /> Open
-              </Open>
-            )}
-          </Bar>
-        )}
-      </Rounded>
-    );
-  }
-}
+  return (
+    <Rounded
+      style={style}
+      $showBottomBar={showBottomBar}
+      $border={border}
+      className={
+        isSelected ? `ProseMirror-selectednode ${className}` : className
+      }
+    >
+      {isLoaded && (
+        <Iframe
+          ref={forwardedRef}
+          $showBottomBar={showBottomBar}
+          sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-downloads allow-storage-access-by-user-activation"
+          style={style}
+          frameBorder="0"
+          title="embed"
+          loading="lazy"
+          src={sanitizeUrl(src)}
+          referrerPolicy={referrerPolicy}
+          allowFullScreen
+          {...rest}
+        />
+      )}
+      {showBottomBar && (
+        <Bar>
+          {icon} <Title>{title}</Title>
+          {canonicalUrl && (
+            <Open href={canonicalUrl} target="_blank" rel="noopener noreferrer">
+              <OpenIcon size={18} /> Open
+            </Open>
+          )}
+        </Bar>
+      )}
+    </Rounded>
+  );
+};
 
 const Iframe = styled.iframe<{ $showBottomBar: boolean }>`
   border-radius: ${(props) => (props.$showBottomBar ? "3px 3px 0 0" : "3px")};