feat: Full width images (#4389)

* feat: Full width images

* lint

* fix: Enable TOC overlaid on full size images

* Vendorize react-medium-image-zoom

* tsc

* fix

* Remove body scroll lock

shared/editor/components/ImageZoom/Styles.tsx

@@ -0,0 +1,60 @@
+import { transparentize } from "polished";
+import { createGlobalStyle } from "styled-components";
+
+export default createGlobalStyle`
+  [data-rmiz] {
+    position: relative;
+  }
+  [data-rmiz-content="found"] img,
+  [data-rmiz-content="found"] svg,
+  [data-rmiz-content="found"] [role="img"],
+  [data-rmiz-content="found"] [data-zoom] {
+    cursor: zoom-in;
+  }
+  [data-rmiz-modal]::backdrop {
+    display: none;
+  }
+  [data-rmiz-modal][open] {
+    position: fixed;
+    width: 100vw;
+    width: 100svw;
+    height: 100vh;
+    height: 100svh;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    overflow: hidden;
+  }
+  [data-rmiz-modal-overlay] {
+    position: absolute;
+    inset: 0;
+    transition: background-color 0.3s;
+  }
+  [data-rmiz-modal-overlay="hidden"] {
+    background-color: ${(props) => transparentize(1, props.theme.background)};
+  }
+  [data-rmiz-modal-overlay="visible"] {
+    background-color: ${(props) => props.theme.background};
+  }
+  [data-rmiz-modal-content] {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  [data-rmiz-modal-img] {
+    position: absolute;
+    cursor: zoom-out;
+    image-rendering: high-quality;
+    transform-origin: top left;
+    transition: transform 0.3s;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-rmiz-modal-overlay],
+    [data-rmiz-modal-img] {
+      transition-duration: 0.01ms !important;
+    }
+  }
+`;