feat: Image resizing (#4368)

* wip

* works

* wip

* refactor

* Support replacing image and retain width
fix: Copy paste does not retain size

* cleanup

* fix: Cannot resize past 100%
fix: Borders to edges on unresized images

* Handle Escape key while dragging

* fix: Embeds and images dont render when edit state changes
fix: Small animation regression

app/editor/components/ComponentView.tsx

@@ -59,6 +59,7 @@ export default class ComponentView {
 
     this.renderElement();
     window.addEventListener("theme-changed", this.renderElement);
+    window.addEventListener("location-changed", this.renderElement);
   }
 
   renderElement = () => {
@@ -107,9 +108,11 @@ export default class ComponentView {
   }
 
   destroy() {
+    window.removeEventListener("theme-changed", this.renderElement);
+    window.removeEventListener("location-changed", this.renderElement);
+
     if (this.dom) {
       ReactDOM.unmountComponentAtNode(this.dom);
-      window.removeEventListener("theme-changed", this.renderElement);
     }
     this.dom = null;
   }

app/index.tsx

@@ -24,6 +24,12 @@ import { initSentry } from "./utils/sentry";
 initI18n();
 const element = window.document.getElementById("root");
 
+history.listen(() => {
+  requestAnimationFrame(() =>
+    window.dispatchEvent(new Event("location-changed"))
+  );
+});
+
 if (env.SENTRY_DSN) {
   initSentry(history);
 }