@pentestpad/tiptap-extension-figure 1.0.0

package/dist/index.js

@@ -0,0 +1,448 @@
+import { nodeInputRule, mergeAttributes } from '@tiptap/core';
+import ImageExtension from '@tiptap/extension-image';
+
+const isMobileScreen = () => document.documentElement.clientWidth < 768;
+
+const removeImageControlsAndResetStyles = (clickedElement, wrapperElement, styles) => {
+    const containerContainsClickedElement = wrapperElement.contains(clickedElement);
+    if (containerContainsClickedElement) {
+        return;
+    }
+    // Remove all custom UI elements and styling
+    wrapperElement.classList.remove(styles["active"]);
+    const children = Array.from(wrapperElement.children);
+    children.forEach((child) => {
+        if (child.tagName !== "IMG" && child.tagName !== "FIGCAPTION") {
+            wrapperElement.removeChild(child);
+        }
+    });
+};
+
+var leftIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M144-144v-72h672v72H144Zm0-150v-72h480v72H144Zm0-150v-72h672v72H144Zm0-150v-72h480v72H144Zm0-150v-72h672v72H144Z%22%2F%3E%3C%2Fsvg%3E";
+
+var centerIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M144-144v-72h672v72H144Zm144-150v-72h384v72H288ZM144-444v-72h672v72H144Zm144-150v-72h384v72H288ZM144-744v-72h672v72H144Z%22%2F%3E%3C%2Fsvg%3E";
+
+var rightIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M144-744v-72h672v72H144Zm192%20150v-72h480v72H336ZM144-444v-72h672v72H144Zm192%20150v-72h480v72H336ZM144-144v-72h672v72H144Z%22%2F%3E%3C%2Fsvg%3E";
+
+const imageAlignmentControls = [
+    {
+        type: "left",
+        icon: leftIcon,
+        styleToApply: "margin: 0 auto 0 0;",
+    },
+    {
+        type: "center",
+        icon: centerIcon,
+        styleToApply: "margin: 0 auto;",
+    },
+    {
+        type: "right",
+        icon: rightIcon,
+        styleToApply: "margin: 0 0 0 auto;",
+    },
+];
+const addImageAlignmentControls = (wrapperElement, imageElement, styles, onAlign) => {
+    const imageAlignmentContainer = document.createElement("div");
+    imageAlignmentContainer.setAttribute("contenteditable", "false");
+    imageAlignmentContainer.setAttribute("class", styles["image-alignment-container"]);
+    imageAlignmentControls.forEach((imageControl) => {
+        const imageAlignmentControl = document.createElement("img");
+        imageAlignmentControl.src = imageControl.icon;
+        imageAlignmentControl.setAttribute("class", styles["image-alignment-control"]);
+        imageAlignmentControl.addEventListener("click", (event) => {
+            event.stopPropagation();
+            imageElement.style.cssText = `${imageElement.style.cssText} ${imageControl.styleToApply}`;
+            onAlign();
+        });
+        imageAlignmentContainer.appendChild(imageAlignmentControl);
+    });
+    wrapperElement.appendChild(imageAlignmentContainer);
+};
+
+const addImageResizeControls = (wrapperElement, imageElement, isResizing, startX, startWidth, styles, onResize) => {
+    const isMobile = isMobileScreen();
+    const dotPosition = isMobile ? "-8px" : "-4px";
+    const dotSize = isMobile ? 16 : 9;
+    const dotsPosition = [
+        `top: ${dotPosition}; left: ${dotPosition}; cursor: nwse-resize;`,
+        `top: ${dotPosition}; right: ${dotPosition}; cursor: nesw-resize;`,
+        `bottom: ${dotPosition}; left: ${dotPosition}; cursor: nesw-resize;`,
+        `bottom: ${dotPosition}; right: ${dotPosition}; cursor: nwse-resize;`,
+    ];
+    Array.from({ length: 4 }, (_, index) => {
+        const dotElement = document.createElement("div");
+        dotElement.setAttribute("class", styles["dot-element"]);
+        dotElement.setAttribute("style", `width: ${dotSize}px; height: ${dotSize}px; ${dotsPosition[index]}`);
+        dotElement.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            isResizing = true;
+            startX = e.clientX;
+            startWidth = wrapperElement.offsetWidth;
+            const onMouseMove = (event) => {
+                if (!isResizing) {
+                    return;
+                }
+                const deltaX = index % 2 === 0 ? -(event.clientX - startX) : event.clientX - startX;
+                const newWidth = startWidth + deltaX;
+                wrapperElement.style.width = newWidth + "px";
+                imageElement.style.width = newWidth + "px";
+            };
+            const onMouseUp = () => {
+                if (isResizing) {
+                    isResizing = false;
+                }
+                onResize();
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+        dotElement.addEventListener("touchstart", (e) => {
+            e.cancelable && e.preventDefault();
+            isResizing = true;
+            startX = e.touches[0].clientX;
+            startWidth = wrapperElement.offsetWidth;
+            const onTouchMove = (e) => {
+                if (!isResizing)
+                    return;
+                const deltaX = index % 2 === 0
+                    ? -(e.touches[0].clientX - startX)
+                    : e.touches[0].clientX - startX;
+                const newWidth = startWidth + deltaX;
+                wrapperElement.style.width = newWidth + "px";
+                imageElement.style.width = newWidth + "px";
+            };
+            const onTouchEnd = () => {
+                if (isResizing) {
+                    isResizing = false;
+                }
+                onResize();
+                document.removeEventListener("touchmove", onTouchMove);
+                document.removeEventListener("touchend", onTouchEnd);
+            };
+            document.addEventListener("touchmove", onTouchMove);
+            document.addEventListener("touchend", onTouchEnd);
+        }, { passive: false });
+        wrapperElement.appendChild(dotElement);
+    });
+};
+
+var closedCaptionAddIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M480-480Zm120%20288H216q-29.7%200-50.85-21.16Q144-234.32%20144-264.04v-432.24Q144-726%20165.15-747T216-768h528q29.7%200%2050.85%2021.15Q816-725.7%20816-696v288h-72v-288H216v432h384v72Zm144%2072v-72h-72v-72h72v-72h72v72h72v72h-72v72h-72ZM293.29-368h111.86Q421-368%20432-378.78q11-10.78%2011-26.72V-443h-56.14v19H312v-112h75v19h56v-37.89q0-16.11-10.64-26.61Q421.73-592%20406-592H293.01q-16.01%200-26.51%2010.71-10.5%2010.7-10.5%2026.52v148.95Q256-390%20266.72-379t26.57%2011Zm261.22%200h112.55q15.94%200%2026.44-10.78Q704-389.56%20704-405.5V-443h-56.14v19H573v-112h75v19h56v-37.89q0-16.11-10.72-26.61T666.71-592H554.85Q539-592%20528-581.29q-11%2010.7-11%2026.52v148.95Q517-390%20527.79-379q10.78%2011%2026.72%2011Z%22%2F%3E%3C%2Fsvg%3E";
+
+var deleteIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M312-144q-29.7%200-50.85-21.15Q240-186.3%20240-216v-480h-48v-72h192v-48h192v48h192v72h-48v479.57Q720-186%20698.85-165T648-144H312Zm336-552H312v480h336v-480ZM384-288h72v-336h-72v336Zm120%200h72v-336h-72v336ZM312-696v480-480Z%22%2F%3E%3C%2Fsvg%3E";
+
+const addCaptionControls = (wrapperElement, styles, onCaptionRemove, onCaptionAdd) => {
+    const captionControlsContainer = document.createElement("div");
+    captionControlsContainer.setAttribute("contenteditable", "false");
+    captionControlsContainer.setAttribute("class", styles["caption-controls-element"]);
+    // If wrapper element is a figure and the button doesn't already exist, add a button to remove caption
+    // Also, wrapper elements needs to become a div
+    if (wrapperElement.tagName === "FIGURE" &&
+        !wrapperElement.querySelector(styles["remove-caption-button"])) {
+        const removeCaptionButton = document.createElement("img");
+        removeCaptionButton.src = deleteIcon;
+        removeCaptionButton.setAttribute("class", styles["remove-caption-button"]);
+        removeCaptionButton.addEventListener("click", (event) => {
+            event.stopPropagation();
+            onCaptionRemove();
+        });
+        captionControlsContainer.appendChild(removeCaptionButton);
+        wrapperElement.appendChild(captionControlsContainer);
+        return;
+    }
+    // If wrapper element is a div and the button doesn't already exist, add a button to add caption
+    if (wrapperElement.tagName === "DIV" &&
+        !wrapperElement.querySelector(styles["add-caption-button"])) {
+        const addCaptionButton = document.createElement("img");
+        addCaptionButton.src = closedCaptionAddIcon;
+        addCaptionButton.setAttribute("class", styles["add-caption-button"]);
+        addCaptionButton.addEventListener("click", (event) => {
+            event.stopPropagation();
+            onCaptionAdd();
+        });
+        captionControlsContainer.appendChild(addCaptionButton);
+        wrapperElement.appendChild(captionControlsContainer);
+    }
+};
+
+const changeFigureToImage = (wrapperElement) => {
+    const imageWrapperElement = document.createElement("div");
+    const oldAttributes = wrapperElement.attributes;
+    const newAttributes = imageWrapperElement.attributes;
+    // Copy attributes
+    for (let i = 0, len = oldAttributes.length; i < len; i++) {
+        newAttributes.setNamedItem(oldAttributes.item(i).cloneNode());
+    }
+    // Find the image within the old wrapper and set it as the only child of the new wrapper
+    const imageElement = wrapperElement.querySelector("img");
+    if (imageElement) {
+        imageWrapperElement.appendChild(imageElement);
+    }
+    // Replace wrapperElement with imageWrapperElement
+    wrapperElement.replaceWith(imageWrapperElement);
+};
+const changeImageToFigure = (wrapperElement, captionElement) => {
+    const figureWrapperElement = document.createElement("figure");
+    const oldAttributes = wrapperElement.attributes;
+    const newAttributes = figureWrapperElement.attributes;
+    // Copy attributes
+    for (let i = 0, len = oldAttributes.length; i < len; i++) {
+        newAttributes.setNamedItem(oldAttributes.item(i).cloneNode());
+    }
+    // Find the image within the old wrapper and set it as the only child of the new wrapper
+    const imageElement = wrapperElement.querySelector("img");
+    if (imageElement) {
+        figureWrapperElement.appendChild(imageElement);
+    }
+    captionElement.innerHTML = "Caption";
+    figureWrapperElement.appendChild(captionElement);
+    // Replace wrapperElement with figureWrapperElement
+    wrapperElement.replaceWith(figureWrapperElement);
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".styles_wrapper-element__SoyDK {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  cursor: pointer;\n  width: fit-content;\n}\n.styles_wrapper-element__SoyDK.styles_active__kXAaT {\n  border: 2px dashed #6c6c6c;\n}\n\n.styles_figure-element__wBqOu {\n}\n\n.styles_caption-element__-9Bt- {\n  text-align: center;\n  margin-top: 8px;\n  min-height: 1em;\n  margin: 0.5rem 2rem;\n  padding: 0.5rem 0;\n}\n.styles_caption-element__-9Bt-:hover {\n  border-radius: 4px;\n  border: 2px dashed #6c6c6c;\n}\n\n.styles_caption-controls-element__Pwjxq {\n  position: absolute;\n  bottom: 7.5%;\n  left: 50%;\n  width: 40px;\n  height: 35px;\n  z-index: 999;\n  background-color: rgba(255, 255, 255, 0.7);\n  border-radius: 4px;\n  border: 2px solid #6c6c6c;\n  cursor: pointer;\n  transform: translate(-50%, -50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.styles_remove-caption-button__OzMEn,\n.styles_add-caption-button__2rKuu {\n  cursor: pointer;\n  font-size: 20px;\n}\n\n.styles_remove-caption-button__OzMEn:hover,\n.styles_add-caption-button__2rKuu:hover {\n  opacity: 0.5;\n}\n\n.styles_dot-element__TQRBe {\n  position: absolute;\n  border: 1.5px solid #6c6c6c;\n  border-radius: 50%;\n}\n\n.styles_image-alignment-container__5byQ2 {\n  position: absolute;\n  top: 0%;\n  left: 50%;\n  width: 100px;\n  height: 25px;\n  z-index: 999;\n  background-color: rgba(255, 255, 255, 0.7);\n  border-radius: 4px;\n  border: 2px solid #6c6c6c;\n  cursor: pointer;\n  transform: translate(-50%, -50%);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 10px;\n}\n\n.styles_image-alignment-control__r3rTj {\n  cursor: pointer;\n  font-size: 20px;\n}\n.styles_image-alignment-control__r3rTj:hover {\n  opacity: 0.5;\n}\n";
+var styles = {"wrapper-element":"styles_wrapper-element__SoyDK","active":"styles_active__kXAaT","caption-element":"styles_caption-element__-9Bt-","caption-controls-element":"styles_caption-controls-element__Pwjxq","remove-caption-button":"styles_remove-caption-button__OzMEn","add-caption-button":"styles_add-caption-button__2rKuu","dot-element":"styles_dot-element__TQRBe","image-alignment-container":"styles_image-alignment-container__5byQ2","image-alignment-control":"styles_image-alignment-control__r3rTj"};
+styleInject(css_248z);
+
+const inputRegex = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/;
+const TiptapImageFigureExtension = ImageExtension.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            inline: false,
+            allowBase64: false,
+            HTMLAttributes: {},
+        };
+    },
+    group: "block",
+    draggable: true,
+    isolating: true,
+    content: "inline*",
+    addStorage() {
+        return {
+            elementsVisible: false,
+            currentActiveWrapper: null,
+        };
+    },
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            src: {
+                default: null,
+                parseHTML: (element) => {
+                    if (element.tagName === "FIGURE") {
+                        const img = element.querySelector("img");
+                        return img?.getAttribute("src");
+                    }
+                    return element.getAttribute("src");
+                },
+            },
+            alt: {
+                default: null,
+                parseHTML: (element) => {
+                    const img = element.querySelector("img");
+                    return img?.getAttribute("alt");
+                },
+            },
+            title: {
+                default: null,
+                parseHTML: (element) => {
+                    const img = element.querySelector("img");
+                    return img?.getAttribute("title");
+                },
+            },
+            style: {
+                // This style is applied to the wrapper element
+                default: "width: 100%; height: auto; cursor: pointer;",
+                parseHTML: (element) => {
+                    const width = element.getAttribute("width");
+                    // const img = element.querySelector("img");
+                    // const width = img?.getAttribute("width");
+                    return width
+                        ? `width: ${width}px; height: auto; cursor: pointer;`
+                        : `${element.style.cssText}`;
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "figure",
+                contentElement: "figcaption",
+            },
+            {
+                tag: this.options.allowBase64
+                    ? "img[src]"
+                    : 'img[src]:not([src^="data:"])',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        const hasCaption = node.content.size > 0;
+        if (hasCaption) {
+            return [
+                "figure",
+                this.options.HTMLAttributes,
+                [
+                    "img",
+                    mergeAttributes(HTMLAttributes, {
+                        draggable: false,
+                        contenteditable: false,
+                    }),
+                ],
+                ["figcaption", 0],
+            ];
+        }
+        return ["img", mergeAttributes(HTMLAttributes)];
+    },
+    addNodeView() {
+        return ({ node, editor, getPos }) => {
+            const dispatchNodeView = () => {
+                if (typeof getPos === "function") {
+                    const newAttrs = {
+                        ...node.attrs,
+                        style: imageElement.style.cssText,
+                    };
+                    editor.view.dispatch(editor.view.state.tr.setNodeMarkup(getPos(), null, newAttrs));
+                    this.storage.elementsVisible = false;
+                }
+            };
+            const { options: { editable }, } = editor;
+            const { style } = node.attrs;
+            // Create wrapper based on content
+            const wrapperElement = document.createElement(node.content.size > 0 ? "figure" : "div");
+            wrapperElement.setAttribute("class", styles["wrapper-element"]);
+            wrapperElement.setAttribute("style", style);
+            const imageElement = document.createElement("img");
+            wrapperElement.appendChild(imageElement);
+            const captionElement = document.createElement("figcaption");
+            // Set up image attributes
+            Object.entries(node.attrs).forEach(([key, value]) => {
+                if (value === undefined || value === null) {
+                    return;
+                }
+                imageElement.setAttribute(key, value);
+            });
+            // Add caption if needed
+            if (node.content.size > 0) {
+                captionElement.setAttribute("class", styles["caption-element"]);
+                captionElement.setAttribute("contenteditable", "true");
+                wrapperElement.appendChild(captionElement);
+            }
+            if (!editable)
+                return { dom: wrapperElement, contentDOM: captionElement };
+            // Initialize control variables
+            let isResizing = false;
+            let startX = 0;
+            let startWidth = 0;
+            // Handle click on container
+            wrapperElement.addEventListener("click", (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                // If controls are already visible, check if another image or figure is being clicked on
+                if (this.storage.elementsVisible) {
+                    const clickedElement = event.target;
+                    const currentActiveWrapper = this.storage.currentActiveWrapper;
+                    // Check if the clicked element is a child of the current active wrapper
+                    // If it isn't, we must remove the controls from the previous wrapper and continue
+                    // If it is, we do nothing
+                    if (currentActiveWrapper &&
+                        currentActiveWrapper.contains(clickedElement)) {
+                        return;
+                    }
+                    if (currentActiveWrapper) {
+                        removeImageControlsAndResetStyles(clickedElement, currentActiveWrapper, styles);
+                    }
+                }
+                this.storage.currentActiveWrapper = wrapperElement;
+                const isMobile = isMobileScreen();
+                if (isMobile) {
+                    const focusedElement = document.querySelector(".ProseMirror-focused");
+                    focusedElement?.blur();
+                }
+                // Remove existing controls first
+                removeImageControlsAndResetStyles(event.target, wrapperElement, styles);
+                // Show new controls
+                wrapperElement.classList.toggle(styles["active"]);
+                addImageAlignmentControls(wrapperElement, imageElement, styles, () => {
+                    dispatchNodeView();
+                    editor.commands.focus();
+                });
+                addImageResizeControls(wrapperElement, imageElement, isResizing, startX, startWidth, styles, () => {
+                    dispatchNodeView();
+                    editor.commands.focus();
+                });
+                addCaptionControls(wrapperElement, styles, () => {
+                    // On caption remove
+                    changeFigureToImage(wrapperElement);
+                    this.storage.elementsVisible = false;
+                }, () => {
+                    // On caption add
+                    changeImageToFigure(wrapperElement, captionElement);
+                    this.storage.elementsVisible = false;
+                });
+                this.storage.elementsVisible = true;
+            });
+            // Handle clicks outside
+            document.addEventListener("click", (event) => {
+                if (!wrapperElement.contains(event.target)) {
+                    removeImageControlsAndResetStyles(event.target, wrapperElement, styles);
+                    this.storage.elementsVisible = false;
+                    this.storage.currentActiveWrapper = null;
+                }
+            });
+            return {
+                dom: wrapperElement,
+                contentDOM: node.content.size > 0 ? captionElement : undefined,
+                ignoreMutation: (mutation) => {
+                    // We must ignore mutations that happened outside the captionElement
+                    return !captionElement.contains(mutation.target);
+                },
+            };
+        };
+    },
+    addInputRules() {
+        return [
+            nodeInputRule({
+                find: inputRegex,
+                type: this.type,
+                getAttributes: (match) => {
+                    const [, alt, src, title] = match;
+                    return { src, alt, title };
+                },
+            }),
+        ];
+    },
+});
+
+export { TiptapImageFigureExtension as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/assets/icons/format-align-left.svg","../src/assets/icons/format-align-center.svg","../src/assets/icons/format-align-right.svg","../src/assets/icons/closed-caption-add.svg","../src/assets/icons/delete.svg","../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M144-144v-72h672v72H144Zm0-150v-72h480v72H144Zm0-150v-72h672v72H144Zm0-150v-72h480v72H144Zm0-150v-72h672v72H144Z%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M144-144v-72h672v72H144Zm144-150v-72h384v72H288ZM144-444v-72h672v72H144Zm144-150v-72h384v72H288ZM144-744v-72h672v72H144Z%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M144-744v-72h672v72H144Zm192%20150v-72h480v72H336ZM144-444v-72h672v72H144Zm192%20150v-72h480v72H336ZM144-144v-72h672v72H144Z%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M480-480Zm120%20288H216q-29.7%200-50.85-21.16Q144-234.32%20144-264.04v-432.24Q144-726%20165.15-747T216-768h528q29.7%200%2050.85%2021.15Q816-725.7%20816-696v288h-72v-288H216v432h384v72Zm144%2072v-72h-72v-72h72v-72h72v72h72v72h-72v72h-72ZM293.29-368h111.86Q421-368%20432-378.78q11-10.78%2011-26.72V-443h-56.14v19H312v-112h75v19h56v-37.89q0-16.11-10.64-26.61Q421.73-592%20406-592H293.01q-16.01%200-26.51%2010.71-10.5%2010.7-10.5%2026.52v148.95Q256-390%20266.72-379t26.57%2011Zm261.22%200h112.55q15.94%200%2026.44-10.78Q704-389.56%20704-405.5V-443h-56.14v19H573v-112h75v19h56v-37.89q0-16.11-10.72-26.61T666.71-592H554.85Q539-592%20528-581.29q-11%2010.7-11%2026.52v148.95Q517-390%20527.79-379q10.78%2011%2026.72%2011Z%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M312-144q-29.7%200-50.85-21.15Q240-186.3%20240-216v-480h-48v-72h192v-48h192v48h192v72h-48v479.57Q720-186%20698.85-165T648-144H312Zm336-552H312v480h336v-480ZM384-288h72v-336h-72v336Zm120%200h72v-336h-72v336ZM312-696v480-480Z%22%2F%3E%3C%2Fsvg%3E\"","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,eAAe;;ACAf,iBAAe;;ACAf,gBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,2BAAe;;ACAf,iBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO;;AAExD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B;AACA,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B;;AAEA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[5]}

package/dist/utils/add-caption-controls.util.d.ts

@@ -0,0 +1 @@
+export declare const addCaptionControls: (wrapperElement: HTMLElement, styles: Record<string, string>, onCaptionRemove: () => void, onCaptionAdd: () => void) => void;

package/dist/utils/add-image-alignment-controls.util.d.ts

@@ -0,0 +1 @@
+export declare const addImageAlignmentControls: (wrapperElement: HTMLElement, imageElement: HTMLImageElement, styles: Record<string, string>, onAlign: () => void) => void;

package/dist/utils/add-image-resize-controls.util.d.ts

@@ -0,0 +1 @@
+export declare const addImageResizeControls: (wrapperElement: HTMLElement, imageElement: HTMLImageElement, isResizing: boolean, startX: number, startWidth: number, styles: Record<string, string>, onResize: () => void) => void;

package/dist/utils/is-mobile-screen.util.d.ts

@@ -0,0 +1 @@
+export declare const isMobileScreen: () => boolean;

package/dist/utils/remove-image-controls.util.d.ts

@@ -0,0 +1 @@
+export declare const removeImageControlsAndResetStyles: (clickedElement: HTMLElement, wrapperElement: HTMLElement, styles: Record<string, string>) => void;

package/dist/utils/replace-element.util.d.ts

@@ -0,0 +1,2 @@
+export declare const changeFigureToImage: (wrapperElement: HTMLElement) => void;
+export declare const changeImageToFigure: (wrapperElement: HTMLElement, captionElement: HTMLElement) => void;

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@pentestpad/tiptap-extension-figure",
+  "version": "1.0.0",
+  "description": "An extension for Tiptap that allows you to add and edit captions for images as well as align and resize them.",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c",
+    "dev": "npm run clean && rollup -c -w"
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-url": "^8.0.2",
+    "@tiptap/core": "^2.11.5",
+    "@tiptap/extension-image": "^2.11.5",
+    "@tiptap/pm": "^2.11.5",
+    "rollup": "^4.34.6",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0",
+    "@tiptap/extension-image": "^2.0.0",
+    "@tiptap/pm": "^2.0.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,48 @@
+// rollup.config.js
+
+const autoExternal = require("rollup-plugin-auto-external");
+const sourcemaps = require("rollup-plugin-sourcemaps");
+const commonjs = require("@rollup/plugin-commonjs");
+const babel = require("@rollup/plugin-babel");
+const typescript = require("rollup-plugin-typescript2");
+const url = require("@rollup/plugin-url");
+const postcss = require("rollup-plugin-postcss");
+
+const config = {
+  input: "src/index.ts",
+  output: [
+    {
+      file: "dist/index.cjs.js",
+      format: "cjs",
+      exports: "named",
+      sourcemap: true,
+    },
+    {
+      file: "dist/index.js",
+      format: "esm",
+      exports: "named",
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    autoExternal({ packagePath: "./package.json" }),
+    sourcemaps({ include: "node_modules/**" }),
+    babel({
+      babelHelpers: "bundled",
+      exclude: "node_modules/**",
+    }),
+    commonjs(),
+    typescript(),
+    url({
+      include: ["**/*.svg"],
+      limit: Infinity, // Embed all assets
+    }),
+    postcss({
+      inject: true,
+      modules: true,
+      minimize: false,
+    }),
+  ],
+};
+
+module.exports = config;

package/src/assets/icons/closed-caption-add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M480-480Zm120 288H216q-29.7 0-50.85-21.16Q144-234.32 144-264.04v-432.24Q144-726 165.15-747T216-768h528q29.7 0 50.85 21.15Q816-725.7 816-696v288h-72v-288H216v432h384v72Zm144 72v-72h-72v-72h72v-72h72v72h72v72h-72v72h-72ZM293.29-368h111.86Q421-368 432-378.78q11-10.78 11-26.72V-443h-56.14v19H312v-112h75v19h56v-37.89q0-16.11-10.64-26.61Q421.73-592 406-592H293.01q-16.01 0-26.51 10.71-10.5 10.7-10.5 26.52v148.95Q256-390 266.72-379t26.57 11Zm261.22 0h112.55q15.94 0 26.44-10.78Q704-389.56 704-405.5V-443h-56.14v19H573v-112h75v19h56v-37.89q0-16.11-10.72-26.61T666.71-592H554.85Q539-592 528-581.29q-11 10.7-11 26.52v148.95Q517-390 527.79-379q10.78 11 26.72 11Z"/></svg>

package/src/assets/icons/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M312-144q-29.7 0-50.85-21.15Q240-186.3 240-216v-480h-48v-72h192v-48h192v48h192v72h-48v479.57Q720-186 698.85-165T648-144H312Zm336-552H312v480h336v-480ZM384-288h72v-336h-72v336Zm120 0h72v-336h-72v336ZM312-696v480-480Z"/></svg>

package/src/assets/icons/format-align-center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M144-144v-72h672v72H144Zm144-150v-72h384v72H288ZM144-444v-72h672v72H144Zm144-150v-72h384v72H288ZM144-744v-72h672v72H144Z"/></svg>

package/src/assets/icons/format-align-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M144-144v-72h672v72H144Zm0-150v-72h480v72H144Zm0-150v-72h672v72H144Zm0-150v-72h480v72H144Zm0-150v-72h672v72H144Z"/></svg>

package/src/assets/icons/format-align-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#000000"><path d="M144-744v-72h672v72H144Zm192 150v-72h480v72H336ZM144-444v-72h672v72H144Zm192 150v-72h480v72H336ZM144-144v-72h672v72H144Z"/></svg>

package/src/assets/icons/svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}