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

React rich text editor based on tiptap

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var react = require('@tiptap/react');
var reResizable = require('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__ */ jsxRuntime.jsx(react.NodeViewWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
    reResizable.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__ */ jsxRuntime.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%"
          }
        }
      )
    }
  ) });
}

module.exports = ImageResizableComponent;
//# sourceMappingURL=ImageResizableComponent.cjs.map