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

app/editor/menus/image.tsx

@@ -5,6 +5,7 @@ import {
   AlignImageLeftIcon,
   AlignImageRightIcon,
   AlignImageCenterIcon,
+  AlignFullWidthIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
@@ -23,6 +24,9 @@ export default function imageMenuItems(
   const isRightAligned = isNodeActive(schema.nodes.image, {
     layoutClass: "right-50",
   });
+  const isFullWidthAligned = isNodeActive(schema.nodes.image, {
+    layoutClass: "full-width",
+  });
 
   return [
     {
@@ -40,7 +44,8 @@ export default function imageMenuItems(
       active: (state) =>
         isNodeActive(schema.nodes.image)(state) &&
         !isLeftAligned(state) &&
-        !isRightAligned(state),
+        !isRightAligned(state) &&
+        !isFullWidthAligned(state),
     },
     {
       name: "alignRight",
@@ -49,6 +54,13 @@ export default function imageMenuItems(
       visible: true,
       active: isRightAligned,
     },
+    {
+      name: "alignFullWidth",
+      tooltip: dictionary.alignFullWidth,
+      icon: <AlignFullWidthIcon />,
+      visible: true,
+      active: isFullWidthAligned,
+    },
     {
       name: "separator",
       visible: true,