@monolith-forensics/monolith-ui 1.8.1-dev.2 → 1.8.1-dev.4

package/dist/RichTextEditor/Plugins/ImageActionsPlugin.js

@@ -0,0 +1,241 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { ReactRenderer } from "@tiptap/react";
+import { CopyIcon, DownloadIcon, FullscreenIcon } from "lucide-react";
+import styled from "styled-components";
+import { Button } from "../../Button";
+import { FileViewer } from "../../FileViewer";
+import { useState } from "react";
+const imageActionsKey = new PluginKey("image-actions");
+const ImageActionsMenuRoot = styled.div `
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 5px;
+
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
+
+  button {
+    width: 24px;
+    padding: 0;
+  }
+`;
+const ImageActionsMenu = ({ onCopy, onDownload, getFile, onMouseEnter, onMouseLeave, }) => {
+    const [viewerFile, setViewerFile] = useState(null);
+    const keepEditorFocus = (event) => {
+        event.preventDefault();
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(ImageActionsMenuRoot, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsx(Button, { type: "button", size: "xxs", variant: "outlined", "aria-label": "Copy image", title: "Copy image", onMouseDown: keepEditorFocus, onClick: onCopy, children: _jsx(CopyIcon, { size: 14 }) }), _jsx(Button, { type: "button", size: "xxs", variant: "outlined", "aria-label": "Download image", title: "Download image", onMouseDown: keepEditorFocus, onClick: onDownload, children: _jsx(DownloadIcon, { size: 14 }) }), _jsx(Button, { type: "button", size: "xxs", variant: "outlined", "aria-label": "View image fullscreen", title: "View image fullscreen", onMouseDown: keepEditorFocus, onClick: () => {
+                            const file = getFile();
+                            if (file) {
+                                setViewerFile(file);
+                            }
+                        }, children: _jsx(FullscreenIcon, { size: 14 }) })] }), _jsx(FileViewer, { file: viewerFile || undefined, open: Boolean(viewerFile), onClose: () => setViewerFile(null) })] }));
+};
+const getImageFilename = (image) => {
+    var _a, _b;
+    const fromTitle = (_b = (_a = image.title) === null || _a === void 0 ? void 0 : _a.match(/Filename:\s*(.+)$/)) === null || _b === void 0 ? void 0 : _b[1];
+    if (fromTitle)
+        return fromTitle;
+    if (image.alt)
+        return image.alt;
+    try {
+        const url = new URL(image.src);
+        const pathname = url.pathname.split("/").filter(Boolean).pop();
+        if (pathname)
+            return pathname;
+    }
+    catch (_c) {
+        // Data URLs and blob URLs are fine; fall back to a generated filename.
+    }
+    return "image.png";
+};
+const getImageBlob = (src) => __awaiter(void 0, void 0, void 0, function* () {
+    const response = yield fetch(src);
+    if (!response.ok) {
+        throw new Error("Unable to load image.");
+    }
+    return response.blob();
+});
+const copyImage = (image) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const ClipboardItemCtor = window.ClipboardItem;
+    if (!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write) || !ClipboardItemCtor) {
+        throw new Error("Image copying is not supported by this browser.");
+    }
+    const blob = yield getImageBlob(image.src);
+    const type = blob.type || "image/png";
+    yield navigator.clipboard.write([
+        new ClipboardItemCtor({
+            [type]: blob,
+        }),
+    ]);
+});
+const downloadImage = (image) => __awaiter(void 0, void 0, void 0, function* () {
+    const filename = getImageFilename(image);
+    let href = image.src;
+    let objectUrl = null;
+    try {
+        const blob = yield getImageBlob(image.src);
+        objectUrl = URL.createObjectURL(blob);
+        href = objectUrl;
+    }
+    catch (_a) {
+        // Cross-origin images may not be fetchable, but the browser can still try
+        // the original URL as the download target.
+    }
+    const link = document.createElement("a");
+    link.href = href;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+    }
+});
+const getImageViewerFile = (image) => {
+    var _a;
+    const name = getImageFilename(image);
+    const ext = ((_a = name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "png";
+    const url = image.currentSrc || image.src;
+    return {
+        name,
+        ext,
+        type: "image",
+        url,
+    };
+};
+class ImageActionsView {
+    constructor(view, editor) {
+        this.component = null;
+        this.toolbar = null;
+        this.activeImage = null;
+        this.hideTimer = null;
+        this.handleMouseOver = (event) => {
+            var _a;
+            const target = event.target;
+            const image = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, "img");
+            if (!(image instanceof HTMLImageElement) ||
+                image.classList.contains("uploading") ||
+                !this.view.dom.contains(image)) {
+                return;
+            }
+            this.activeImage = image;
+            this.cancelHide();
+            this.show();
+        };
+        this.handleMouseOut = (event) => {
+            var _a, _b;
+            const relatedTarget = event.relatedTarget;
+            if (relatedTarget &&
+                (((_a = this.toolbar) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) ||
+                    ((_b = this.activeImage) === null || _b === void 0 ? void 0 : _b.contains(relatedTarget)))) {
+                return;
+            }
+            this.scheduleHide();
+        };
+        this.handleCopy = () => __awaiter(this, void 0, void 0, function* () {
+            if (!this.activeImage)
+                return;
+            try {
+                yield copyImage(this.activeImage);
+            }
+            catch (error) {
+                alert(error.message || "Unable to copy image.");
+            }
+        });
+        this.handleDownload = () => __awaiter(this, void 0, void 0, function* () {
+            if (!this.activeImage)
+                return;
+            yield downloadImage(this.activeImage);
+        });
+        this.getFile = () => {
+            if (!this.activeImage)
+                return null;
+            return getImageViewerFile(this.activeImage);
+        };
+        this.hide = () => {
+            if (this.toolbar) {
+                this.toolbar.style.display = "none";
+            }
+            this.activeImage = null;
+        };
+        this.cancelHide = () => {
+            if (!this.hideTimer)
+                return;
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        };
+        this.scheduleHide = () => {
+            this.cancelHide();
+            this.hideTimer = setTimeout(this.hide, 120);
+        };
+        this.updatePosition = () => {
+            if (!this.activeImage ||
+                !this.toolbar ||
+                this.toolbar.style.display === "none")
+                return;
+            const rect = this.activeImage.getBoundingClientRect();
+            const top = Math.max(8, rect.top + 8);
+            const left = Math.min(window.innerWidth - this.toolbar.offsetWidth - 8, Math.max(8, rect.right - this.toolbar.offsetWidth - 8));
+            this.toolbar.style.top = `${top}px`;
+            this.toolbar.style.left = `${left}px`;
+        };
+        this.view = view;
+        this.editor = editor;
+        this.view.dom.addEventListener("mouseover", this.handleMouseOver);
+        this.view.dom.addEventListener("mouseout", this.handleMouseOut);
+        window.addEventListener("scroll", this.updatePosition, true);
+        window.addEventListener("resize", this.updatePosition);
+    }
+    ensureToolbar() {
+        if (this.toolbar)
+            return this.toolbar;
+        this.component = new ReactRenderer(ImageActionsMenu, {
+            editor: this.editor,
+            props: {
+                onCopy: this.handleCopy,
+                onDownload: this.handleDownload,
+                getFile: this.getFile,
+                onMouseEnter: this.cancelHide,
+                onMouseLeave: this.scheduleHide,
+            },
+            className: "monolith-image-actions",
+        });
+        this.toolbar = this.component.element;
+        this.toolbar.style.position = "fixed";
+        this.toolbar.style.display = "none";
+        this.toolbar.style.zIndex = "16000";
+        this.view.dom.ownerDocument.body.appendChild(this.toolbar);
+        return this.toolbar;
+    }
+    show() {
+        const toolbar = this.ensureToolbar();
+        toolbar.style.display = "block";
+        this.updatePosition();
+    }
+    destroy() {
+        var _a, _b;
+        this.cancelHide();
+        this.view.dom.removeEventListener("mouseover", this.handleMouseOver);
+        this.view.dom.removeEventListener("mouseout", this.handleMouseOut);
+        window.removeEventListener("scroll", this.updatePosition, true);
+        window.removeEventListener("resize", this.updatePosition);
+        (_a = this.toolbar) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = this.component) === null || _b === void 0 ? void 0 : _b.destroy();
+    }
+}
+export const ImageActionsPlugin = (editor) => new Plugin({
+    key: imageActionsKey,
+    view: (view) => new ImageActionsView(view, editor),
+});

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.d.ts

@@ -1,5 +1,13 @@
 import { Plugin } from "@tiptap/pm/state";
 import { DecorationSet, EditorView } from "@tiptap/pm/view";
+export declare const addImagePlaceholder: ({ view, id, pos, src, label, }: {
+    view: EditorView;
+    id: string;
+    pos: number;
+    src?: string;
+    label?: string;
+}) => void;
+export declare const removeImagePlaceholder: (view: EditorView, id: string) => any;
 export type HandleImageUploadProps = {
     file: File;
     name: string;
@@ -11,5 +19,12 @@ export type HandleImageUploadProps = {
 export type HandleImageUpload = {
     (props: HandleImageUploadProps): Promise<string> | undefined;
 };
+export type HandleImageUrlUploadProps = {
+    src: string;
+    name: string;
+};
+export type HandleImageUrlUpload = {
+    (props: HandleImageUrlUploadProps): Promise<string | undefined> | string | undefined;
+};
 export declare const startImageUpload: (file: File, view: EditorView, pos: number, handleImageUpload: HandleImageUpload | undefined) => void;
 export declare const UploadImagesPlugin: () => Plugin<DecorationSet>;

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { nanoid } from "nanoid";
@@ -5,10 +14,51 @@ import calculateFileHash from "../../Utilities/calculateFileHash";
 const uploadKey = new PluginKey("upload-image");
 function findPlaceholder(state, id) {
     const decos = uploadKey.getState(state);
+    if (!decos)
+        return null;
     const found = decos.find(null, null, (spec) => spec.id === id);
     return found.length ? found[0].from : null;
 }
+const readFileAsDataUrl = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener("load", () => {
+            resolve(reader.result);
+        });
+        reader.addEventListener("error", () => {
+            reject(reader.error || new Error("Unable to read image file."));
+        });
+        reader.addEventListener("abort", () => {
+            reject(new Error("Image file read was aborted."));
+        });
+        reader.readAsDataURL(file);
+    });
+};
+export const addImagePlaceholder = ({ view, id, pos, src, label = "Processing image...", }) => {
+    if (!uploadKey.getState(view.state))
+        return;
+    view.dispatch(view.state.tr.setMeta(uploadKey, {
+        add: {
+            id,
+            pos,
+            src,
+            label,
+        },
+    }));
+};
+export const removeImagePlaceholder = (view, id) => {
+    if (!uploadKey.getState(view.state))
+        return;
+    const position = findPlaceholder(view.state, id);
+    view.dispatch(view.state.tr.setMeta(uploadKey, { remove: { id } }));
+    return position;
+};
 export const startImageUpload = (file, view, pos, handleImageUpload) => {
+    if (!handleImageUpload ||
+        !view.state.schema.nodes.image ||
+        !uploadKey.getState(view.state)) {
+        return;
+    }
     // check if the file is an image
     if (!file.type.includes("image/")) {
         alert("File type not supported.");
@@ -22,59 +72,61 @@ export const startImageUpload = (file, view, pos, handleImageUpload) => {
     // A fresh object to act as the ID for this upload
     const id = nanoid(25);
     // Replace the selection with a placeholder
-    const tr = view.state.tr;
-    if (!tr.selection.empty)
-        tr.deleteSelection();
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => {
-        tr.setMeta(uploadKey, {
-            add: {
+    (() => __awaiter(void 0, void 0, void 0, function* () {
+        let placeholderAdded = false;
+        try {
+            const previewSrc = yield readFileAsDataUrl(file);
+            const transaction = view.state.tr;
+            if (!transaction.selection.empty) {
+                transaction.deleteSelection();
+            }
+            transaction.setMeta(uploadKey, {
+                add: {
+                    id,
+                    pos,
+                    src: previewSrc,
+                },
+            });
+            view.dispatch(transaction);
+            placeholderAdded = true;
+            const hashes = yield calculateFileHash(file);
+            const src = yield handleImageUpload({
+                file,
+                name: `${id}.png`,
                 id,
-                pos,
-                src: reader.result,
-            },
-        });
-        view.dispatch(tr);
-    };
-    calculateFileHash(file).then((hashes) => {
-        var _a;
-        const md5 = hashes.md5Hash;
-        const sha1 = hashes.sha1Hash;
-        const sha256 = hashes.sha256Hash;
-        (_a = handleImageUpload === null || handleImageUpload === void 0 ? void 0 : handleImageUpload({
-            file,
-            name: `${id}.png`,
-            id,
-            md5,
-            sha1,
-            sha256,
-        })) === null || _a === void 0 ? void 0 : _a.then((src) => {
-            if (!src)
-                return;
-            const { schema } = view.state;
-            let pos = findPlaceholder(view.state, id);
-            // If the content around the placeholder has been deleted, drop
-            // the image
-            if (pos == null)
+                md5: hashes.md5Hash,
+                sha1: hashes.sha1Hash,
+                sha256: hashes.sha256Hash,
+            });
+            if (!src) {
+                throw new Error("Image upload did not return a source URL.");
+            }
+            const placeholderPos = findPlaceholder(view.state, id);
+            // If the content around the placeholder has been deleted, drop the image.
+            if (placeholderPos == null) {
+                removeImagePlaceholder(view, id);
                 return;
-            // Otherwise, insert it at the placeholder's position, and remove
-            // the placeholder
-            // When BLOB_READ_WRITE_TOKEN is not valid or unavailable, read
-            // the image locally
-            const imageSrc = typeof src === "object" ? reader.result : src;
-            const node = schema.nodes.image.create({
+            }
+            // When BLOB_READ_WRITE_TOKEN is not valid or unavailable, read the image locally.
+            const imageSrc = typeof src === "object" ? previewSrc : src;
+            const node = view.state.schema.nodes.image.create({
                 src: imageSrc,
                 alt: `${id}.png`,
                 "data-uuid": id,
                 title: `Filename: ${id}.png`,
             });
-            const transaction = view.state.tr
-                .replaceWith(pos, pos, node)
+            const insertTransaction = view.state.tr
+                .replaceWith(placeholderPos, placeholderPos, node)
                 .setMeta(uploadKey, { remove: { id } });
-            view.dispatch(transaction);
-        });
-    });
+            view.dispatch(insertTransaction);
+        }
+        catch (error) {
+            if (placeholderAdded) {
+                removeImagePlaceholder(view, id);
+            }
+            console.error("Image upload failed.", error);
+        }
+    }))();
 };
 export const UploadImagesPlugin = () => new Plugin({
     key: uploadKey,
@@ -87,13 +139,25 @@ export const UploadImagesPlugin = () => new Plugin({
             // See if the transaction adds or removes any placeholders
             const action = tr.getMeta(this);
             if (action && action.add) {
-                const { id, pos, src } = action.add;
+                const { id, pos, src, label } = action.add;
                 const placeholder = document.createElement("div");
-                placeholder.setAttribute("class", "img-placeholder");
-                const image = document.createElement("img");
-                image.setAttribute("class", "monolith-image uploading");
-                image.src = src;
-                placeholder.appendChild(image);
+                placeholder.setAttribute("class", src ? "img-placeholder" : "img-placeholder processing");
+                if (src) {
+                    const image = document.createElement("img");
+                    image.setAttribute("class", "monolith-image uploading");
+                    image.src = src;
+                    placeholder.appendChild(image);
+                    const text = document.createElement("span");
+                    text.setAttribute("class", "img-placeholder-label");
+                    text.textContent = label || "Uploading image...";
+                    placeholder.appendChild(text);
+                }
+                else {
+                    const text = document.createElement("span");
+                    text.setAttribute("class", "img-placeholder-label");
+                    text.textContent = label;
+                    placeholder.appendChild(text);
+                }
                 const deco = Decoration.widget(pos + 1, placeholder, {
                     id,
                 });

package/dist/RichTextEditor/Plugins/index.d.ts

@@ -1 +1,2 @@
 export * from "./UploadImagesPlugin";
+export * from "./ImageActionsPlugin";

package/dist/RichTextEditor/Plugins/index.js

@@ -1 +1,2 @@
 export * from "./UploadImagesPlugin";
+export * from "./ImageActionsPlugin";

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -1,11 +1,11 @@
 import { Editor } from "@tiptap/react";
 import { ExtensionType } from "./Extensions/getTiptapExtensions";
-import { HandleImageUpload } from "./Plugins/UploadImagesPlugin";
+import { HandleImageUrlUpload, HandleImageUpload } from "./Plugins/UploadImagesPlugin";
 import { BubbleMenuOptions } from "./Extensions/BubbleMenuExtension";
 import { ToolbarOptions } from "./Toolbar/Toolbar";
 type RichTextEditorProps = {
     className?: string;
-    editorInstanceRef?: React.RefObject<Editor>;
+    editorInstanceRef?: React.RefObject<Editor | null>;
     extensions?: ExtensionType[];
     slashCommands?: any[];
     defaultValue?: string;
@@ -17,6 +17,7 @@ type RichTextEditorProps = {
     saving?: boolean;
     onChange?: (value: string) => void;
     handleImageUpload?: HandleImageUpload;
+    handleImageUrlUpload?: HandleImageUrlUpload;
     bubbleMenuOptions?: BubbleMenuOptions;
     toolbarOptions?: ToolbarOptions;
     autoFocus?: boolean;