@ctzhian/tiptap 1.5.2 → 1.5.4

package/dist/extension/component/Iframe/Insert.d.ts

@@ -0,0 +1,14 @@
+import { EditorFnProps } from "../../../type";
+import React from "react";
+export type IframeAttributes = {
+    src: string;
+    width: number;
+    height: number;
+};
+type InsertIframeProps = {
+    selected: boolean;
+    attrs: IframeAttributes;
+    updateAttributes: (attrs: IframeAttributes) => void;
+} & EditorFnProps;
+declare const InsertIframe: ({ selected, attrs, updateAttributes }: InsertIframeProps) => React.JSX.Element;
+export default InsertIframe;

package/dist/extension/component/Iframe/Insert.js

@@ -0,0 +1,112 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { FloatingPopover } from "../../../component/FloatingPopover";
+import { WindowFillIcon } from "../../../component/Icons";
+import { Box, Button, Stack, TextField } from "@mui/material";
+import { NodeViewWrapper } from "@tiptap/react";
+import React, { useState } from "react";
+var InsertIframe = function InsertIframe(_ref) {
+  var selected = _ref.selected,
+    attrs = _ref.attrs,
+    updateAttributes = _ref.updateAttributes;
+  var _useState = useState(attrs.src || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    editUrl = _useState2[0],
+    setEditUrl = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var handleShowPopover = function handleShowPopover(event) {
+    return setAnchorEl(event.currentTarget);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    return setAnchorEl(null);
+  };
+  var handleInsert = function handleInsert() {
+    if (!editUrl.trim()) return;
+    updateAttributes({
+      src: editUrl.trim(),
+      width: attrs.width,
+      height: attrs.height
+    });
+    handleClosePopover();
+  };
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "iframe-wrapper",
+    "data-drag-handle": true
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center',
+    gap: 2,
+    onClick: handleShowPopover,
+    sx: {
+      border: '1px dashed',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      px: 2,
+      py: 1.5,
+      minWidth: 200,
+      textAlign: 'center',
+      color: 'text.secondary',
+      bgcolor: 'action.default',
+      position: 'relative',
+      overflow: 'hidden',
+      cursor: 'pointer',
+      '&:hover': {
+        bgcolor: 'action.hover'
+      },
+      '&:active': {
+        bgcolor: 'action.selected'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(WindowFillIcon, {
+    sx: {
+      fontSize: '1rem',
+      position: 'relative',
+      flexShrink: 0
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem',
+      position: 'relative',
+      flexGrow: 1,
+      textAlign: 'left'
+    }
+  }, "\u70B9\u51FB\u6B64\u5904\u5D4C\u5165 iframe")), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: handleClosePopover,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    gap: 2,
+    sx: {
+      p: 2,
+      width: 350
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: editUrl,
+    onChange: function onChange(e) {
+      return setEditUrl(e.target.value);
+    },
+    placeholder: "\u8F93\u5165\u8981\u5D4C\u5165\u7684 URL"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 1
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    fullWidth: true,
+    onClick: handleClosePopover
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    fullWidth: true,
+    onClick: handleInsert
+  }, "\u5D4C\u5165")))));
+};
+export default InsertIframe;

package/dist/extension/component/Iframe/Readonly.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type IframeAttributes = {
+    src: string;
+    width: number;
+    height: number;
+};
+declare const ReadonlyIframe: ({ attrs }: {
+    attrs: IframeAttributes;
+}) => React.JSX.Element;
+export default ReadonlyIframe;

package/dist/extension/component/Iframe/Readonly.js

@@ -0,0 +1,14 @@
+import React from 'react';
+var ReadonlyIframe = function ReadonlyIframe(_ref) {
+  var attrs = _ref.attrs;
+  return /*#__PURE__*/React.createElement("iframe", {
+    src: attrs.src,
+    width: attrs.width,
+    height: attrs.height,
+    style: {
+      display: 'block',
+      border: 0
+    }
+  });
+};
+export default ReadonlyIframe;

package/dist/extension/component/Iframe/index.d.ts

@@ -0,0 +1,5 @@
+import { EditorFnProps } from "../../../type";
+import { NodeViewProps } from '@tiptap/react';
+import React from "react";
+declare const IframeViewWrapper: React.FC<NodeViewProps & EditorFnProps>;
+export default IframeViewWrapper;

package/dist/extension/component/Iframe/index.js

@@ -0,0 +1,290 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { FloatingPopover } from "../../../component/FloatingPopover";
+import { DeleteLineIcon, EditBoxLineIcon } from "../../../component/Icons";
+import { Box, Button, IconButton, Stack, TextField, Tooltip } from "@mui/material";
+import { NodeViewWrapper } from '@tiptap/react';
+import React, { useEffect, useState } from "react";
+import InsertIframe from "./Insert";
+import ReadonlyIframe from "./Readonly";
+var IframeViewWrapper = function IframeViewWrapper(_ref) {
+  var editor = _ref.editor,
+    node = _ref.node,
+    updateAttributes = _ref.updateAttributes,
+    deleteNode = _ref.deleteNode,
+    selected = _ref.selected;
+  var attrs = node.attrs;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovering = _useState2[0],
+    setIsHovering = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDraggingWidth = _useState4[0],
+    setIsDraggingWidth = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDraggingHeight = _useState6[0],
+    setIsDraggingHeight = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dragStartX = _useState8[0],
+    setDragStartX = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    dragStartY = _useState10[0],
+    setDragStartY = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dragStartWidth = _useState12[0],
+    setDragStartWidth = _useState12[1];
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dragStartHeight = _useState14[0],
+    setDragStartHeight = _useState14[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    anchorEl = _useState16[0],
+    setAnchorEl = _useState16[1];
+  var _useState17 = useState(attrs.src),
+    _useState18 = _slicedToArray(_useState17, 2),
+    editSrc = _useState18[0],
+    setEditSrc = _useState18[1];
+  var handleShowPopover = function handleShowPopover(event) {
+    return setAnchorEl(event.currentTarget);
+  };
+  var handleClosePopover = function handleClosePopover() {
+    return setAnchorEl(null);
+  };
+  var handleSave = function handleSave() {
+    if (editSrc.trim()) {
+      updateAttributes({
+        src: editSrc.trim(),
+        width: attrs.width,
+        height: attrs.height
+      });
+    }
+    handleClosePopover();
+  };
+  var handleMouseDownWidth = function handleMouseDownWidth(e) {
+    e.preventDefault();
+    setIsDraggingWidth(true);
+    setDragStartX(e.clientX);
+    setDragStartWidth(attrs.width);
+  };
+  var handleMouseDownHeight = function handleMouseDownHeight(e) {
+    e.preventDefault();
+    setIsDraggingHeight(true);
+    setDragStartY(e.clientY);
+    setDragStartHeight(attrs.height);
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (isDraggingWidth) {
+      var deltaX = e.clientX - dragStartX;
+      var newWidth = Math.max(200, Math.min(1920, dragStartWidth + deltaX));
+      updateAttributes({
+        width: newWidth,
+        height: attrs.height,
+        src: attrs.src
+      });
+    }
+    if (isDraggingHeight) {
+      var deltaY = e.clientY - dragStartY;
+      var newHeight = Math.max(100, Math.min(2000, dragStartHeight + deltaY));
+      updateAttributes({
+        width: attrs.width,
+        height: newHeight,
+        src: attrs.src
+      });
+    }
+  };
+  var handleMouseUp = function handleMouseUp() {
+    setIsDraggingWidth(false);
+    setIsDraggingHeight(false);
+  };
+  useEffect(function () {
+    if (isDraggingWidth || isDraggingHeight) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return function () {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDraggingWidth, isDraggingHeight]);
+  if (!attrs.src && !editor.isEditable) return null;
+  if (!editor.isEditable) {
+    return /*#__PURE__*/React.createElement(ReadonlyIframe, {
+      attrs: attrs
+    });
+  }
+  if (!attrs.src) {
+    return /*#__PURE__*/React.createElement(InsertIframe, {
+      selected: selected,
+      attrs: attrs,
+      updateAttributes: updateAttributes
+    });
+  }
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "iframe-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
+    "data-drag-handle": true
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'relative',
+      display: 'inline-block',
+      border: '1px solid',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      p: '0.25rem',
+      bgcolor: 'background.paper',
+      '&:hover .iframe-controls': {
+        opacity: 1
+      }
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovering(false);
+    }
+  }, (isDraggingWidth || isDraggingHeight) && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'absolute',
+      inset: 0,
+      zIndex: 8,
+      cursor: isDraggingWidth ? 'ew-resize' : 'ns-resize',
+      backgroundColor: 'transparent'
+    }
+  }), /*#__PURE__*/React.createElement("iframe", {
+    src: attrs.src,
+    width: attrs.width,
+    height: attrs.height,
+    style: {
+      display: 'block',
+      border: 0,
+      maxWidth: '100%',
+      pointerEvents: isDraggingWidth || isDraggingHeight ? 'none' : 'auto'
+    }
+  }), (isHovering || isDraggingWidth) && /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: handleMouseDownWidth,
+    sx: {
+      position: 'absolute',
+      right: -2,
+      top: '50%',
+      transform: 'translateY(-50%)',
+      width: 4,
+      height: 50,
+      bgcolor: isDraggingWidth ? 'primary.main' : 'text.primary',
+      cursor: 'ew-resize',
+      borderRadius: 2,
+      '&:hover': {
+        bgcolor: 'primary.main'
+      },
+      transition: 'background-color 0.2s ease',
+      zIndex: 10
+    }
+  }), (isHovering || isDraggingHeight) && /*#__PURE__*/React.createElement(Box, {
+    onMouseDown: handleMouseDownHeight,
+    sx: {
+      position: 'absolute',
+      left: '50%',
+      bottom: -2,
+      transform: 'translateX(-50%)',
+      height: 4,
+      width: 60,
+      bgcolor: isDraggingHeight ? 'primary.main' : 'text.primary',
+      cursor: 'ns-resize',
+      borderRadius: 2,
+      '&:hover': {
+        bgcolor: 'primary.main'
+      },
+      transition: 'background-color 0.2s ease',
+      zIndex: 10
+    }
+  }), (isHovering || !!anchorEl) && /*#__PURE__*/React.createElement(Box, {
+    className: "iframe-controls",
+    sx: {
+      position: 'absolute',
+      top: '0.5rem',
+      right: '0.5rem',
+      display: 'flex',
+      gap: '0.25rem'
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: true,
+    title: "\u66F4\u6362\u94FE\u63A5"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    onClick: handleShowPopover,
+    sx: {
+      color: 'text.primary',
+      bgcolor: 'background.paper'
+    }
+  }, /*#__PURE__*/React.createElement(EditBoxLineIcon, {
+    sx: {
+      fontSize: 18
+    }
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: true,
+    title: "\u5220\u9664"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    onClick: deleteNode,
+    sx: {
+      color: 'text.primary',
+      bgcolor: 'background.paper'
+    }
+  }, /*#__PURE__*/React.createElement(DeleteLineIcon, {
+    sx: {
+      fontSize: 18
+    }
+  }))))), /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: handleClosePopover,
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      p: 2,
+      width: 350
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem',
+      color: 'text.secondary',
+      lineHeight: '1.5',
+      mb: 1
+    }
+  }, "\u94FE\u63A5\u5730\u5740"), /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: editSrc,
+    onChange: function onChange(e) {
+      return setEditSrc(e.target.value);
+    },
+    placeholder: "\u8F93\u5165\u8981\u5D4C\u5165\u7684 URL"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 1,
+    alignItems: 'center',
+    sx: {
+      mt: 2
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    size: "small",
+    fullWidth: true,
+    onClick: handleClosePopover
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    size: "small",
+    fullWidth: true,
+    onClick: handleSave,
+    disabled: !editSrc.trim()
+  }, "\u4FDD\u5B58")))));
+};
+export default IframeViewWrapper;

package/dist/extension/component/Image/Crop.d.ts

@@ -0,0 +1,12 @@
+import { EditorFnProps } from "../../../type";
+import React from "react";
+import { ImageAttributes } from ".";
+import 'react-image-crop/dist/ReactCrop.css';
+type CropImageProps = {
+    selected: boolean;
+    attrs: ImageAttributes;
+    onConfirm: (imageUrl: string) => void;
+    onCancel: () => void;
+} & EditorFnProps;
+declare const CropImage: ({ selected, attrs, onConfirm, onCancel, onUpload, onError }: CropImageProps) => React.JSX.Element;
+export default CropImage;