From 7d88542d97ca7ec9a834f6c815d7eafc78eea5fe Mon Sep 17 00:00:00 2001 From: Christopher Loverich <1010084+cloverich@users.noreply.github.com> Date: Thu, 5 Sep 2024 21:26:19 -0700 Subject: [PATCH] add image size constraints - adds a max height constriant for images - remove resize handler (does not persist to markdown) and caption (was broken); to address in a future version --- package.json | 1 - src/markdown/index.test.ts | 4 +- src/views/edit/PlateContainer.tsx | 6 -- src/views/edit/editor/elements/Caption.tsx | 34 ------ .../edit/editor/elements/ImageElement.tsx | 101 ++++++------------ src/views/edit/editor/elements/Video.tsx | 31 +++--- yarn.lock | 35 +----- 7 files changed, 48 insertions(+), 164 deletions(-) delete mode 100644 src/views/edit/editor/elements/Caption.tsx diff --git a/package.json b/package.json index 18a336e..682d66c 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/markdown/index.test.ts b/src/markdown/index.test.ts index 81faa29..f350eed 100644 --- a/src/markdown/index.test.ts +++ b/src/markdown/index.test.ts @@ -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**. @@ -123,7 +123,7 @@ This works! _Seriously_, no **complaints**. }, { type: "img", - url: "chronicles://ckure3z1b00003u65tfr1m2ki..png", + url: "chronicles://ckure3z1b00003u65tfr1m2ki.png", title: null, alt: null, caption: [ diff --git a/src/views/edit/PlateContainer.tsx b/src/views/edit/PlateContainer.tsx index 40fb5b0..59b83e0 100644 --- a/src/views/edit/PlateContainer.tsx +++ b/src/views/edit/PlateContainer.tsx @@ -68,8 +68,6 @@ import { unwrapCodeBlock, } from "@udecode/plate"; -import { createCaptionPlugin } from "@udecode/plate-caption"; - import { BlockquoteElement, CodeBlockElement, @@ -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, diff --git a/src/views/edit/editor/elements/Caption.tsx b/src/views/edit/editor/elements/Caption.tsx deleted file mode 100644 index 31a7ad8..0000000 --- a/src/views/edit/editor/elements/Caption.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { cn, withCn, withVariants } from "@udecode/cn"; -import { - Caption as CaptionPrimitive, - CaptionTextarea as CaptionTextareaPrimitive, -} from "@udecode/plate-caption"; -import { cva } from "class-variance-authority"; - -const captionVariants = cva("max-w-full", { - variants: { - align: { - left: "mr-auto", - center: "mx-auto", - right: "ml-auto", - }, - }, - defaultVariants: { - align: "center", - }, -}); - -export const Caption = withVariants(CaptionPrimitive, captionVariants, [ - "align", -]); - -// For captioning images, media, and (technically) any other block -// https://platejs.org/docs/components/caption -export const CaptionTextarea = withCn( - CaptionTextareaPrimitive, - cn( - "mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit", - "focus:outline-none focus:[&::placeholder]:opacity-0", - "text-center print:placeholder:text-transparent", - ), -); diff --git a/src/views/edit/editor/elements/ImageElement.tsx b/src/views/edit/editor/elements/ImageElement.tsx index 39fbe60..bdb4293 100644 --- a/src/views/edit/editor/elements/ImageElement.tsx +++ b/src/views/edit/editor/elements/ImageElement.tsx @@ -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( - ({ 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 ( - - -
- - + return ( + + + - - - - - - - -
- - {children} - - - ); - }, - ), -); + {children} + + + ); +}; diff --git a/src/views/edit/editor/elements/Video.tsx b/src/views/edit/editor/elements/Video.tsx index 3d7c4fe..9873f87 100644 --- a/src/views/edit/editor/elements/Video.tsx +++ b/src/views/edit/editor/elements/Video.tsx @@ -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"; /** @@ -16,24 +15,18 @@ export const VideoElement = ({ return ( -
- - - - - {children} -
+ ); diff --git a/yarn.lock b/yarn.lock index 2151985..b90a266 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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== @@ -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" @@ -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" @@ -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" @@ -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"