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

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js

@@ -1,12 +1,3 @@
-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";
@@ -14,51 +5,10 @@ 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.");
@@ -72,61 +22,59 @@ 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
-    (() => __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`,
+    const tr = view.state.tr;
+    if (!tr.selection.empty)
+        tr.deleteSelection();
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+        tr.setMeta(uploadKey, {
+            add: {
                 id,
-                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);
+                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;
-            }
-            // 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({
+            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)
+                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({
                 src: imageSrc,
                 alt: `${id}.png`,
                 "data-uuid": id,
                 title: `Filename: ${id}.png`,
             });
-            const insertTransaction = view.state.tr
-                .replaceWith(placeholderPos, placeholderPos, node)
+            const transaction = view.state.tr
+                .replaceWith(pos, pos, node)
                 .setMeta(uploadKey, { remove: { id } });
-            view.dispatch(insertTransaction);
-        }
-        catch (error) {
-            if (placeholderAdded) {
-                removeImagePlaceholder(view, id);
-            }
-            console.error("Image upload failed.", error);
-        }
-    }))();
+            view.dispatch(transaction);
+        });
+    });
 };
 export const UploadImagesPlugin = () => new Plugin({
     key: uploadKey,
@@ -139,25 +87,13 @@ 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, label } = action.add;
+                const { id, pos, src } = action.add;
                 const placeholder = document.createElement("div");
-                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);
-                }
+                placeholder.setAttribute("class", "img-placeholder");
+                const image = document.createElement("img");
+                image.setAttribute("class", "monolith-image uploading");
+                image.src = src;
+                placeholder.appendChild(image);
                 const deco = Decoration.widget(pos + 1, placeholder, {
                     id,
                 });

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

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

package/dist/RichTextEditor/Plugins/index.js

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

package/dist/RichTextEditor/RichTextEditor.js

@@ -1,226 +1,14 @@
-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 } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { EditorContent, useEditor } from "@tiptap/react";
-import { DOMParser as ProseMirrorDOMParser } from "@tiptap/pm/model";
 import { Toolbar } from "./Toolbar";
 import getTipTapExtensions from "./Extensions/getTiptapExtensions";
-import { Extensions, SlashCommands } from "./Enums";
-import { addImagePlaceholder, removeImagePlaceholder, startImageUpload, } from "./Plugins/UploadImagesPlugin";
+import { Extensions } from "./Enums";
+import { startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
-const getImageFilesFromClipboard = (clipboardData) => {
-    return Array.from(clipboardData.files).filter((file) => file.type.includes("image/"));
-};
-const getImageFilenameFromSource = (src, fallbackIndex, fallbackName) => {
-    if (fallbackName)
-        return fallbackName;
-    try {
-        const url = new URL(src);
-        const filename = url.pathname.split("/").filter(Boolean).pop();
-        if (filename)
-            return filename;
-    }
-    catch (_a) {
-        // Data URLs and blob URLs may not parse to useful filenames.
-    }
-    return `pasted-image-${fallbackIndex + 1}.png`;
-};
-const getMimeExtension = (mimeType) => {
-    var _a;
-    const subtype = (_a = mimeType.split("/")[1]) === null || _a === void 0 ? void 0 : _a.split(";")[0];
-    if (!subtype)
-        return "png";
-    if (subtype === "jpeg")
-        return "jpg";
-    if (subtype === "svg+xml")
-        return "svg";
-    return subtype;
-};
-const ensureImageFilenameExtension = (name, mimeType) => {
-    if (/\.[a-z0-9]+$/i.test(name))
-        return name;
-    return `${name}.${getMimeExtension(mimeType)}`;
-};
-const createHtmlImageMarker = (index) => {
-    return `monolith-image-marker-${Date.now()}-${index}-${Math.random()
-        .toString(36)
-        .slice(2)}`;
-};
-const getHtmlImageSources = (html) => {
-    const document = new DOMParser().parseFromString(html, "text/html");
-    const imageSources = [];
-    Array.from(document.body.querySelectorAll("img[src]")).forEach((image, index) => {
-        const src = image.getAttribute("src");
-        if (!src)
-            return;
-        const marker = createHtmlImageMarker(index);
-        imageSources.push({
-            src,
-            name: getImageFilenameFromSource(src, index, image.getAttribute("title") || image.getAttribute("alt")),
-            marker,
-            placeholderId: marker,
-        });
-        image.replaceWith(document.createTextNode(marker));
-    });
-    return {
-        imageSources,
-        htmlWithImageMarkers: document.body.innerHTML,
-    };
-};
-const htmlHasContent = (html) => {
-    var _a;
-    const document = new DOMParser().parseFromString(html, "text/html");
-    return Boolean(((_a = document.body.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
-        document.body.querySelector("table, ul, ol, blockquote, pre, code, hr, iframe, video, audio"));
-};
-const insertHtmlAtSelection = (view, html) => {
-    const container = window.document.createElement("div");
-    container.innerHTML = html;
-    const slice = ProseMirrorDOMParser.fromSchema(view.state.schema).parseSlice(container);
-    view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
-};
-const createImageFileFromSource = (imageSource, index) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a;
-    const response = yield fetch(imageSource.src);
-    if (!response.ok) {
-        throw new Error(`Unable to fetch pasted image: ${imageSource.src}`);
-    }
-    const blob = yield response.blob();
-    const type = blob.type ||
-        ((_a = imageSource.src.match(/^data:(image\/[^;,]+)/)) === null || _a === void 0 ? void 0 : _a[1]) ||
-        "image/png";
-    return new File([blob], ensureImageFilenameExtension(imageSource.name || `pasted-image-${index + 1}`, type), { type });
-});
-const findTextRange = (view, text) => {
-    let range;
-    view.state.doc.descendants((node, position) => {
-        if (range)
-            return false;
-        if (!node.isText || !node.text)
-            return;
-        const index = node.text.indexOf(text);
-        if (index === -1)
-            return;
-        range = {
-            from: position + index,
-            to: position + index + text.length,
-        };
-        return false;
-    });
-    return range;
-};
-const removeImageMarker = (view, marker) => {
-    const range = findTextRange(view, marker);
-    if (!range)
-        return;
-    view.dispatch(view.state.tr.delete(range.from, range.to));
-    return range.from;
-};
-const getPlaceholderAddPosition = (position) => {
-    return Math.max(position - 1, 0);
-};
-const replaceImageMarkerWithPlaceholder = (view, imageSource) => {
-    const markerPosition = removeImageMarker(view, imageSource.marker);
-    if (markerPosition === undefined)
-        return;
-    addImagePlaceholder({
-        view,
-        id: imageSource.placeholderId,
-        pos: getPlaceholderAddPosition(markerPosition),
-        label: "Processing image...",
-    });
-};
-const replaceImagePlaceholder = (view, placeholderId, src, name) => {
-    var _a;
-    const position = removeImagePlaceholder(view, placeholderId);
-    const imageNode = (_a = view.state.schema.nodes.image) === null || _a === void 0 ? void 0 : _a.create({
-        src,
-        alt: name,
-        title: `Filename: ${name}`,
-    });
-    if (position == null || !imageNode)
-        return false;
-    view.dispatch(view.state.tr.replaceWith(position, position, imageNode).scrollIntoView());
-    return true;
-};
-const uploadImagesFromHtmlSources = (imageSources, view, handleImageUpload, handleImageUrlUpload) => {
-    imageSources.forEach((imageSource, index) => {
-        createImageFileFromSource(imageSource, index)
-            .then((file) => {
-            const uploadPosition = removeImagePlaceholder(view, imageSource.placeholderId);
-            if (uploadPosition == null)
-                return;
-            startImageUpload(file, view, getPlaceholderAddPosition(uploadPosition), handleImageUpload);
-        })
-            .catch((error) => __awaiter(void 0, void 0, void 0, function* () {
-            if (!handleImageUrlUpload) {
-                console.error("Unable to upload pasted HTML image.", error);
-                removeImagePlaceholder(view, imageSource.placeholderId);
-                return;
-            }
-            try {
-                const uploadedSrc = yield handleImageUrlUpload(imageSource);
-                if (uploadedSrc) {
-                    replaceImagePlaceholder(view, imageSource.placeholderId, uploadedSrc, imageSource.name);
-                }
-                else {
-                    removeImagePlaceholder(view, imageSource.placeholderId);
-                }
-            }
-            catch (urlUploadError) {
-                console.error("Unable to upload pasted HTML image URL.", urlUploadError);
-                removeImagePlaceholder(view, imageSource.placeholderId);
-            }
-        }));
-    });
-};
-const handleImagePaste = (view, event, handleImageUpload, handleImageUrlUpload) => {
-    const { clipboardData } = event;
-    if (!clipboardData)
-        return false;
-    const imageFiles = getImageFilesFromClipboard(clipboardData);
-    const html = clipboardData.getData("text/html");
-    const { imageSources, htmlWithImageMarkers } = html
-        ? getHtmlImageSources(html)
-        : { imageSources: [], htmlWithImageMarkers: "" };
-    if (!imageFiles.length && !imageSources.length)
-        return false;
-    event.preventDefault();
-    if (html && htmlHasContent(htmlWithImageMarkers)) {
-        insertHtmlAtSelection(view, htmlWithImageMarkers);
-        imageSources.forEach((imageSource) => {
-            replaceImageMarkerWithPlaceholder(view, imageSource);
-        });
-    }
-    const uploadPosition = view.state.selection.from;
-    if (imageFiles.length) {
-        imageFiles.forEach((file, index) => {
-            var _a;
-            const placeholderId = (_a = imageSources[index]) === null || _a === void 0 ? void 0 : _a.placeholderId;
-            const markerPosition = placeholderId
-                ? removeImagePlaceholder(view, placeholderId)
-                : undefined;
-            startImageUpload(file, view, markerPosition == null
-                ? uploadPosition
-                : getPlaceholderAddPosition(markerPosition), handleImageUpload);
-        });
-        uploadImagesFromHtmlSources(imageSources.slice(imageFiles.length), view, handleImageUpload, handleImageUrlUpload);
-        return true;
-    }
-    uploadImagesFromHtmlSources(imageSources, view, handleImageUpload, handleImageUrlUpload);
-    return true;
-};
 const StyledContent = styled.div `
   position: relative;
   display: flex;
@@ -261,7 +49,6 @@ const StyledContent = styled.div `
   }
 
   .ProseMirror {
-    font-size: 14px;
     font-weight: 400;
     outline: none;
     height: 100%;
@@ -294,34 +81,37 @@ const StyledContent = styled.div `
     }
 
     h1 {
-      font-size: 32px;
+      font-size: 1.5rem;
       line-height: 2rem;
       margin: 0;
     }
     h2 {
-      font-size: 28px;
+      font-size: 1.25rem;
       line-height: 1.75rem;
       margin: 0;
     }
     h3 {
-      font-size: 24px;
+      font-size: 1.125rem;
       line-height: 1.75rem;
       margin: 0;
     }
     h4 {
-      font-size: 20px;
+      font-size: 1rem;
       line-height: 1.5rem;
       margin: 0;
     }
     p {
       margin: 0;
+      font-size: 0.8rem;
       line-height: 1.5rem;
     }
     ul {
       margin: 0;
+      font-size: 0.8rem;
     }
     ol {
       margin: 0;
+      font-size: 0.8rem;
     }
     .editor-link {
       color: ${({ theme }) => theme.palette.primary.main};
@@ -365,9 +155,6 @@ const StyledContent = styled.div `
   .ProseMirror .img-placeholder {
     position: relative;
     width: fit-content;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
 
     &:before {
       content: "";
@@ -390,58 +177,6 @@ const StyledContent = styled.div `
     }
   }
 
-  .ProseMirror .img-placeholder .img-placeholder-label {
-    position: absolute;
-    top: calc(50% + 1.75rem);
-    left: 50%;
-    transform: translateX(-50%);
-    width: max-content;
-    max-width: calc(100% - 1rem);
-    padding: 0.25rem 0.5rem;
-    border-radius: 6px;
-    background-color: ${({ theme }) => theme.palette.background.paper};
-    color: ${({ theme }) => theme.palette.text.secondary};
-    font-size: 0.75rem;
-    line-height: 1rem;
-    text-align: center;
-    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
-  }
-
-  .ProseMirror .img-placeholder.processing {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    width: auto;
-    min-height: 2rem;
-    padding: 0.35rem 0.65rem;
-    border: 1px dashed ${({ theme }) => theme.palette.divider};
-    border-radius: 6px;
-    background-color: ${({ theme }) => theme.palette.action.hover};
-    color: ${({ theme }) => theme.palette.text.secondary};
-    font-size: 0.75rem;
-    line-height: 1rem;
-    vertical-align: middle;
-
-    .img-placeholder-label {
-      position: static;
-      transform: none;
-      max-width: none;
-      padding: 0;
-      border-radius: 0;
-      background-color: transparent;
-      box-shadow: none;
-    }
-
-    &:before {
-      position: static;
-      flex: 0 0 auto;
-      width: 0.875rem;
-      height: 0.875rem;
-      border-width: 2px;
-      transform: none;
-    }
-  }
-
   .floating-menu {
     display: flex;
     background-color: #0d0d0d10;
@@ -543,28 +278,18 @@ const StyledContent = styled.div `
     margin: 0 0.125rem;
   }
 `;
-export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
-    const isControlled = value !== undefined;
-    const hasImageExtension = extensions.includes(Extensions.Image);
-    const hasSlashCommandExtension = extensions.includes(Extensions.SlashCommand);
-    const hasImageSlashCommand = hasSlashCommandExtension && slashCommands.includes(SlashCommands.Image);
-    const onChangeRef = useRef(onChange);
+export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }) => {
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    if (hasImageSlashCommand && !hasImageExtension) {
-        throw new Error("Extensions.Image is required when using the Image slash command.");
-    }
-    if (hasImageExtension || hasImageSlashCommand) {
+    // check if image extension is included
+    if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
+        // Ensure that handleImageUpload is provided
         if (!handleImageUpload) {
-            throw new Error("handleImageUpload is required when using image uploads.");
+            throw new Error("handleImageUpload is required when using the image extension.");
         }
     }
     const editor = useEditor({
-        content: value !== null && value !== void 0 ? value : defaultValue,
+        content: defaultValue,
         editable: !readOnly,
-        shouldRerenderOnTransaction: true,
         extensions: getTipTapExtensions({
             extensions,
             slashCommands,
@@ -573,12 +298,27 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         }),
         editorProps: {
             handlePaste: (view, event) => {
-                if (!hasImageExtension || !handleImageUpload)
+                if (!handleImageUpload)
                     return false;
-                return handleImagePaste(view, event, handleImageUpload, handleImageUrlUpload);
+                if (!(event === null || event === void 0 ? void 0 : event.clipboardData))
+                    return false;
+                if (event.clipboardData.types.includes("text/html") ||
+                    event.clipboardData.types.includes("text/plain") ||
+                    event.clipboardData.types.includes("text/rtf"))
+                    return false;
+                if (event.clipboardData &&
+                    event.clipboardData.files &&
+                    event.clipboardData.files[0]) {
+                    event.preventDefault();
+                    const file = event.clipboardData.files[0];
+                    const pos = view.state.selection.from;
+                    startImageUpload(file, view, pos, handleImageUpload);
+                    return true;
+                }
+                return false;
             },
             handleDrop: (view, event, _slice, moved) => {
-                if (!hasImageExtension || !handleImageUpload)
+                if (!handleImageUpload)
                     return false;
                 if (!moved &&
                     event.dataTransfer &&
@@ -600,23 +340,9 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
             },
         },
         onUpdate: ({ editor }) => {
-            var _a;
-            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, editor.getHTML());
+            onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
         },
     });
-    useEffect(() => {
-        if (!editor || !isControlled)
-            return;
-        const currentValue = editor.getHTML();
-        if (currentValue !== value) {
-            editor.commands.setContent(value, { emitUpdate: false });
-        }
-    }, [editor, isControlled, value]);
-    useEffect(() => {
-        if (!editor)
-            return;
-        editor.setEditable(!readOnly, false);
-    }, [editor, readOnly]);
     useEffect(() => {
         const _ref = editorInstanceRef;
         if (editorInstanceRef) {