{"version":3,"file":"index.cjs","sources":["../src/ResizableImage/wrapper/index.tsx","../src/ResizableImage/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { Resizable } from \"re-resizable\";\nimport { Node as ProsemirrorNode } from \"prosemirror-model\";\nimport { Direction } from \"re-resizable/lib/resizer\";\ninterface WrapperProps {\n  node: ProsemirrorNode;\n  updateAttributes: (attrs: unknown) => void;\n}\n\nexport default function ResizableImageWrapper(props: WrapperProps) {\n  const defaultWidth = props.node.attrs.width;\n  const defaultHeight = props.node.attrs.height;\n\n  const [marginLeft, setPaddingLeft] = useState(\n    props.node.attrs?.marginLeft ?? 0\n  );\n\n  const handleLeftArrowClick = () => {\n    props.updateAttributes({\n      marginLeft,\n    });\n    setPaddingLeft(marginLeft - 10);\n  };\n\n  const handleRightArrowClick = () => {\n    props.updateAttributes({\n      marginLeft,\n    });\n    setPaddingLeft(marginLeft + 10);\n  };\n\n  return (\n    <NodeViewWrapper className=\"image-resizer\">\n      <button className=\"arrow-button\" onClick={handleLeftArrowClick}>\n        &#8592;\n      </button>\n      &nbsp;&nbsp;\n      <button className=\"arrow-button\" onClick={handleRightArrowClick}>\n        &#8594;\n      </button>\n      <div\n        style={{\n          marginTop: \"10px\",\n        }}\n      />\n      <Resizable\n        className=\"resizable-image\"\n        defaultSize={{\n          width: defaultWidth ? defaultWidth : \"300\",\n          height: defaultHeight ? defaultHeight : \"300\",\n        }}\n        onResize={(\n          e: MouseEvent | TouchEvent,\n          direction: Direction,\n          ref: HTMLElement\n        ) => {\n          props.updateAttributes({\n            width: ref.style.width,\n            height: ref.style.height,\n          });\n        }}\n        maxWidth={\"100%\"}\n        style={{\n          backgroundImage: `url(${props.node.attrs.src})`,\n          backgroundSize: \"100% 100%\",\n          backgroundRepeat: \"no-repeat\",\n          marginLeft: `${marginLeft}px`,\n        }}\n        lockAspectRatio={false}\n      ></Resizable>\n    </NodeViewWrapper>\n  );\n}\n","import { mergeAttributes, Node, nodeInputRule } from \"@tiptap/core\";\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\nimport ResizableImageWrapper from \"./wrapper\";\n\ninterface ImageOptions {\n  inline: boolean;\n  allowBase64: boolean;\n  HTMLAttributes: Record<string, string>;\n}\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    image: {\n      /**\n       * Add an image\n       */\n      setImage: (options: {\n        src: string;\n        alt?: string;\n        title?: string;\n        height?: string;\n        width?: string;\n        dataID?: string;\n      }) => ReturnType;\n    };\n  }\n}\n\nconst inputRegex = /(?:^|\\s)(!\\[(.+|:?)]\\((\\S+)(?:(?:\\s+)[\"'](\\S+)[\"'])?\\))$/;\n\nexport const ResizableImage = Node.create<ImageOptions>({\n  name: \"image\",\n\n  addOptions() {\n    return {\n      inline: false,\n      allowBase64: false,\n      HTMLAttributes: {},\n    };\n  },\n\n  inline() {\n    return this.options.inline;\n  },\n\n  group() {\n    return this.options.inline ? \"inline\" : \"block\";\n  },\n\n  draggable: true,\n\n  addAttributes() {\n    return {\n      src: {\n        default: null,\n      },\n      alt: {\n        default: null,\n      },\n      title: {\n        default: null,\n      },\n      height: {\n        default: null,\n      },\n      width: {\n        default: null,\n      },\n      marginLeft: {\n        default: null,\n      },\n      dataID: {\n        default: null,\n      },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: \"img\",\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    const { height, width, marginLeft } = HTMLAttributes;\n\n    console.log(HTMLAttributes);\n    const attributes = {\n      ...HTMLAttributes,\n      style: `height: ${height} !important; width: ${width} !important; margin-left: ${marginLeft}px !important;`,\n    };\n    return [\"img\", mergeAttributes(this.options.HTMLAttributes, attributes)];\n  },\n\n  addCommands() {\n    return {\n      setImage:\n        (options) =>\n        ({ commands }) => {\n          return commands.insertContent({\n            type: this.name,\n            attrs: options,\n          });\n        },\n    };\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(ResizableImageWrapper);\n  },\n\n  addInputRules() {\n    return [\n      nodeInputRule({\n        find: inputRegex,\n        type: this.type,\n        getAttributes: (match) => {\n          const [, , alt, src, title, height, width] = match;\n          return { src, alt, title, height, width };\n        },\n      }),\n    ];\n  },\n});\n"],"names":["useState","NodeViewWrapper","Resizable","Node","mergeAttributes","ReactNodeViewRenderer","nodeInputRule"],"mappings":"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"}