@rtdui/editor/esm/RichTextEditor/tiptap_extensions/extension-image-upload/ImageResizableComponent.mjs

React rich text editor based on tiptap

'use client';
import { jsx } from 'react/jsx-runtime';
import React from 'react';
import { NodeViewWrapper } from '@tiptap/react';
import { Resizable } from 're-resizable';

function ImageResizableComponent(props) {
  const { editor, node, selected, updateAttributes, extension } = props;
  const ref = React.useRef(null);
  const handleImgLoad = (ev) => {
    const img = ev.target;
    const aspectRatio = img.naturalWidth / img.naturalHeight;
    const { width } = img.getBoundingClientRect();
    const height = width / aspectRatio;
    ref.current.updateSize({
      width,
      height
    });
  };
  return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx(
    Resizable,
    {
      ref,
      size: node.attrs.width && node.attrs.height ? {
        width: node.attrs.width,
        height: node.attrs.height
      } : {
        width: "100%",
        height: "auto"
      },
      onResizeStop: (ev, direction, element, delta) => {
        updateAttributes({
          // width: node.attrs.width + delta.width,
          // height: node.attrs.height + delta.height,
          width: Number(getComputedStyle(element).width.slice(0, -2)),
          height: Number(getComputedStyle(element).height.slice(0, -2))
        });
      },
      lockAspectRatio: true,
      enable: extension.options.resizable && editor.isEditable ? {
        top: false,
        right: false,
        bottom: false,
        left: false,
        topRight: false,
        bottomRight: true,
        bottomLeft: false,
        topLeft: false
      } : false,
      children: /* @__PURE__ */ jsx(
        "img",
        {
          src: node.attrs.src,
          alt: node.attrs.alt,
          title: node.attrs.title,
          className: selected ? "ProseMirror-selectednode" : void 0,
          onLoad: handleImgLoad,
          "data-drag-handle": true,
          style: {
            width: "100%",
            height: "100%"
          }
        }
      )
    }
  ) });
}

export { ImageResizableComponent as default };
//# sourceMappingURL=ImageResizableComponent.mjs.map