Resize Handle

"use client";

import * as React from "react";

import {
  mediaResizeHandleVariants,
  Resizable,
  ResizeHandle,
} from "@/components/ui/resize-handle";

import { ImagePlugin } from "@platejs/media/react";
import { ResizableProvider } from "@platejs/resizable";
import {
  Plate,
  PlateContent,
  PlateElement,
  usePlateEditor,
  withHOC,
} from "platejs/react";

const ImageElement = withHOC(
  ResizableProvider,
  function ImageElement(props: any) {
    return (
      <PlateElement {...props} className="py-2.5">
        <figure className="group relative m-0" contentEditable={false}>
          <Resizable align="center" options={{ align: "center" }}>
            <ResizeHandle
              className={mediaResizeHandleVariants({ direction: "left" })}
              options={{ direction: "left" }}
            />
            <img
              className="block w-full max-w-full cursor-pointer rounded-sm object-cover"
              src={props.element.url}
              alt=""
            />
            <ResizeHandle
              className={mediaResizeHandleVariants({ direction: "right" })}
              options={{ direction: "right" }}
            />
          </Resizable>
        </figure>
        {props.children}
      </PlateElement>
    );
  },
);

const initialValue = [
  {
    type: "p",
    children: [
      {
        text: "Hover the image, then drag the bar on either side to resize it.",
      },
    ],
  },
  {
    type: "img",
    url: "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=600&q=80",
    width: 400,
    children: [{ text: "" }],
  },
];

export default function ResizeHandleDemo() {
  const editor = usePlateEditor({
    plugins: [ImagePlugin.withComponent(ImageElement)],
    value: initialValue,
  });

  return (
    <div className="w-full rounded-lg border bg-background p-4 text-foreground">
      <Plate editor={editor}>
        <PlateContent className="min-h-[300px] px-3 py-2 outline-none" />
      </Plate>
    </div>
  );
}