Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add image size constraints #233

Merged
merged 1 commit into from
Sep 6, 2024
Merged

add image size constraints #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@
"@types/rehype-react": "^4.0.0",
"@udecode/cn": "^29.0.1",
"@udecode/plate": "^34.1.0",
"@udecode/plate-caption": "^34.1.0",
"chai": "^5.0.3",
"class-variance-authority": "^0.7.0",
"date-fns": "^3.3.1",
Expand Down
4 changes: 2 additions & 2 deletions src/markdown/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ I have a few ideas to record:

Now lets add an image:

![](ckure3z1b00003u65tfr1m2ki..png)
![](ckure3z1b00003u65tfr1m2ki.png)

This works! _Seriously_, no **complaints**.

Expand Down Expand Up @@ -123,7 +123,7 @@ This works! _Seriously_, no **complaints**.
},
{
type: "img",
url: "chronicles://ckure3z1b00003u65tfr1m2ki..png",
url: "chronicles://ckure3z1b00003u65tfr1m2ki.png",
title: null,
alt: null,
caption: [
Expand Down
6 changes: 0 additions & 6 deletions src/views/edit/PlateContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,6 @@ import {
unwrapCodeBlock,
} from "@udecode/plate";

import { createCaptionPlugin } from "@udecode/plate-caption";

import {
BlockquoteElement,
CodeBlockElement,
Expand Down Expand Up @@ -153,10 +151,6 @@ export default observer(

createListPlugin(),

// https://platejs.org/docs/media
createCaptionPlugin({
options: { pluginKeys: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
}),
createImagePlugin({
options: {
uploadImage: client.files.uploadImage,
Expand Down
34 changes: 0 additions & 34 deletions src/views/edit/editor/elements/Caption.tsx
View file
Open in desktop

This file was deleted.

101 changes: 33 additions & 68 deletions src/views/edit/editor/elements/ImageElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,41 @@
import { cn, withRef } from "@udecode/cn";
import { PlateElement, withHOC } from "@udecode/plate-common";
import { cn } from "@udecode/cn";
import { PlateElement, PlateRenderElementProps } from "@udecode/plate-common";
import { ELEMENT_IMAGE, Image, useMediaState } from "@udecode/plate-media";
import { ResizableProvider, useResizableStore } from "@udecode/plate-resizable";
import React from "react";

import { Caption, CaptionTextarea } from "./Caption";
import { MediaPopover } from "./MediaPopover";
import {
Resizable,
ResizeHandle,
mediaResizeHandleVariants,
} from "./Resizeable";

// https://platejs.org/docs/components/image-element
export const ImageElement = withHOC(
ResizableProvider,
withRef<typeof PlateElement>(
({ className, children, nodeProps, ...props }, ref) => {
// NOTE: props.element contains url, alt, etc. This is never passed directly to
// the ImageElement; I guess the downstream image pulls it from context?
// Read plate-media source to see how it's used.
// todo: Incorporate chronicles:// prefix here
const { readOnly, focused, selected, align = "center" } = useMediaState();
const width = useResizableStore().get.width();
export const ImageElement = ({
className,
children,
nodeProps,
...props
}: PlateRenderElementProps) => {
// NOTE: props.element contains url, alt, etc. This is never passed directly to
// the ImageElement; I guess the downstream image pulls it from context?
// Read plate-media source to see how it's used.
// todo: Incorporate chronicles:// prefix here
const { readOnly, focused, selected, align = "center" } = useMediaState();

return (
<MediaPopover pluginKey={ELEMENT_IMAGE}>
<PlateElement
ref={ref}
className={cn("py-2.5", className)}
{...props}
>
<figure className="group relative m-0" contentEditable={false}>
<Resizable
align={align}
options={{
align,
readOnly,
}}
>
<ResizeHandle
options={{ direction: "left" }}
className={mediaResizeHandleVariants({ direction: "left" })}
/>
return (
<MediaPopover pluginKey={ELEMENT_IMAGE}>
<PlateElement
className={cn("flex max-h-96 justify-start py-2.5", className)}
{...props}
>
<Image
className={cn(
"max-h-full max-w-full cursor-pointer object-scale-down px-0",
"rounded-sm",
focused && selected && "ring-2 ring-ring ring-offset-2",
)}
alt=""
{...nodeProps}
/>

<Image
className={cn(
"block w-full max-w-full cursor-pointer object-cover px-0",
"rounded-sm",
focused && selected && "ring-2 ring-ring ring-offset-2",
)}
alt=""
{...nodeProps}
/>
<ResizeHandle
options={{ direction: "right" }}
className={mediaResizeHandleVariants({ direction: "right" })}
/>
</Resizable>

<Caption align={align} style={{ width }}>
<CaptionTextarea
placeholder="Write a caption..."
readOnly={readOnly}
/>
</Caption>
</figure>

{children}
</PlateElement>
</MediaPopover>
);
},
),
);
{children}
</PlateElement>
</MediaPopover>
);
};
31 changes: 12 additions & 19 deletions src/views/edit/editor/elements/Video.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { PlateElement, PlateRenderElementProps } from "@udecode/plate-common";
import React from "react";
import { ELEMENT_VIDEO } from "../plugins/createVideoPlugin";
import { Caption, CaptionTextarea } from "./Caption";
import { MediaPopover } from "./MediaPopover";

/**
Expand All @@ -16,24 +15,18 @@ export const VideoElement = ({
return (
<MediaPopover pluginKey={ELEMENT_VIDEO}>
<PlateElement asChild className={className} {...props}>
<figure className="group relative m-0" contentEditable={false}>
<video
src={props.element.url as any}
controls
style={{
display: "block",
maxWidth: "80%",
maxHeight: "20em",
margin: "auto", // center
}}
>
Unable to load video.
</video>
<Caption align="center">
<CaptionTextarea placeholder="Write a caption..." />
</Caption>
{children}
</figure>
<video
src={props.element.url as any}
controls
style={{
display: "block",
maxWidth: "80%",
maxHeight: "20em",
margin: "auto", // center
}}
>
Unable to load video.
</video>
</PlateElement>
</MediaPopover>
);
Expand Down
35 changes: 1 addition & 34 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
dependencies:
regenerator-runtime "^0.14.0"

"@babel/runtime@^7.14.8", "@babel/runtime@^7.20.13":
"@babel/runtime@^7.14.8":
version "7.24.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
Expand Down Expand Up @@ -1535,13 +1535,6 @@
resolved "https://registry.yarnpkg.com/@udecode/plate-break/-/plate-break-34.0.0.tgz#974d232e0ec74985aa1d88b5e6b008ea3cbbb81a"
integrity sha512-poSIw8/N76jBrLXNxoKp7csmZcPzmo0XIfHT/5pecAZfdMzYb9fYtZR4iazAgaoHzk+9s7yNs5qv68yx8u6VBg==

"@udecode/plate-caption@^34.1.0":
version "34.1.0"
resolved "https://registry.yarnpkg.com/@udecode/plate-caption/-/plate-caption-34.1.0.tgz#70c1afa488f63c3d1bb7c945595187a5ec0b7143"
integrity sha512-jIIsLjD7kyprrlPbsUpbVIvfNDNMSfhoc+sWo5Tv2l7V8WiArYSYfAFRW+wDb+szXNhA1AUbY+WAbcvg8/Pi0Q==
dependencies:
react-textarea-autosize "^8.5.3"

"@udecode/plate-code-block@34.0.0":
version "34.0.0"
resolved "https://registry.yarnpkg.com/@udecode/plate-code-block/-/plate-code-block-34.0.0.tgz#d1ae0d2e0bd36d55b81043b801ac3caba29a9325"
Expand Down Expand Up @@ -5577,15 +5570,6 @@ react-style-singleton@^2.2.1:
invariant "^2.2.4"
tslib "^2.0.0"

react-textarea-autosize@^8.5.3:
version "8.5.3"
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz#d1e9fe760178413891484847d3378706052dd409"
integrity sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==
dependencies:
"@babel/runtime" "^7.20.13"
use-composed-ref "^1.3.0"
use-latest "^1.2.1"

react-tracked@^1.7.11:
version "1.7.14"
resolved "https://registry.yarnpkg.com/react-tracked/-/react-tracked-1.7.14.tgz#66445c918107a502e86501904fee6940ffe37612"
Expand Down Expand Up @@ -6759,11 +6743,6 @@ use-callback-ref@^1.3.0:
dependencies:
tslib "^2.0.0"

use-composed-ref@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==

use-context-selector@1.4.4:
version "1.4.4"
resolved "https://registry.yarnpkg.com/use-context-selector/-/use-context-selector-1.4.4.tgz#f5d65c7fcd78f994cb33cacd57651007a40595c0"
Expand All @@ -6776,18 +6755,6 @@ use-deep-compare@^1.2.1:
dependencies:
dequal "2.0.3"

use-isomorphic-layout-effect@^1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==

use-latest@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2"
integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==
dependencies:
use-isomorphic-layout-effect "^1.1.1"

use-sidecar@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
Expand Down
Loading