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
This commit is contained in:
Tom Moor
2022-12-17 17:17:15 -08:00
committed by GitHub
parent f8ba393f7c
commit acf74b83a8
19 changed files with 1415 additions and 104 deletions

View File

@@ -1,6 +1,6 @@
import * as React from "react";
import ImageZoom from "react-medium-image-zoom";
import Frame from "../components/Frame";
import ImageZoom from "../components/ImageZoom";
import { EmbedProps as Props } from ".";
const IFRAME_REGEX = /^https:\/\/(invis\.io\/.*)|(projects\.invisionapp\.com\/share\/.*)$/;
@@ -9,19 +9,18 @@ const IMAGE_REGEX = /^https:\/\/(opal\.invisionapp\.com\/static-signed\/live-emb
function InVision(props: Props) {
if (IMAGE_REGEX.test(props.attrs.href)) {
return (
<ImageZoom
// @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
className={props.isSelected ? "ProseMirror-selectednode" : ""}
image={{
src: props.attrs.href,
alt: "InVision Embed",
style: {
maxWidth: "100%",
maxHeight: "75vh",
},
}}
shouldRespectMaxDimension
/>
<div className={props.isSelected ? "ProseMirror-selectednode" : ""}>
<ImageZoom zoomMargin={24}>
<img
src={props.attrs.href}
alt="InVision Embed"
style={{
maxWidth: "100%",
maxHeight: "75vh",
}}
/>
</ImageZoom>
</div>
);
}