@domternal/extension-image 0.2.0

package/dist/index.js

@@ -0,0 +1,738 @@
+import { Node, defaultIcons, PluginKey as PluginKey$1, positionFloating } from '@domternal/core';
+import { PluginKey, Plugin, NodeSelection } from '@domternal/pm/state';
+import { InputRule } from '@domternal/pm/inputrules';
+import { Decoration, DecorationSet } from '@domternal/pm/view';
+
+// src/Image.ts
+var imageUploadPluginKey = new PluginKey("imageUpload");
+function isValidImageFile(file, allowedMimeTypes, maxFileSize) {
+  if (!allowedMimeTypes.includes(file.type)) return false;
+  if (maxFileSize > 0 && file.size > maxFileSize) return false;
+  return true;
+}
+var placeholderCounter = 0;
+function createPlaceholderId() {
+  return `image-upload-${String(++placeholderCounter)}`;
+}
+function createPlaceholderElement() {
+  const div = document.createElement("div");
+  div.className = "domternal-image-uploading";
+  return div;
+}
+function imageUploadPlugin(options) {
+  const {
+    nodeType,
+    uploadHandler,
+    allowedMimeTypes,
+    maxFileSize,
+    onUploadStart,
+    onUploadError
+  } = options;
+  function handleFiles(view, files, pos) {
+    for (const file of files) {
+      const id = createPlaceholderId();
+      const tr = view.state.tr;
+      tr.setMeta(imageUploadPluginKey, { type: "add", id, pos });
+      view.dispatch(tr);
+      if (onUploadStart) onUploadStart(file);
+      uploadHandler(file).then((url) => {
+        const decos = imageUploadPluginKey.getState(
+          view.state
+        );
+        const found = decos?.find(
+          void 0,
+          void 0,
+          (spec) => spec["id"] === id
+        );
+        const placeholderPos = found?.[0]?.from;
+        if (placeholderPos === void 0) return;
+        const insertTr = view.state.tr;
+        insertTr.setMeta(imageUploadPluginKey, { type: "remove", id });
+        insertTr.insert(placeholderPos, nodeType.create({ src: url }));
+        view.dispatch(insertTr);
+      }).catch((error) => {
+        const removeTr = view.state.tr;
+        removeTr.setMeta(imageUploadPluginKey, { type: "remove", id });
+        view.dispatch(removeTr);
+        if (onUploadError) {
+          onUploadError(
+            error instanceof Error ? error : new Error(String(error)),
+            file
+          );
+        }
+      });
+    }
+  }
+  return new Plugin({
+    key: imageUploadPluginKey,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, decorations) {
+        decorations = decorations.map(tr.mapping, tr.doc);
+        const action = tr.getMeta(imageUploadPluginKey);
+        if (action?.type === "add") {
+          const widget = Decoration.widget(
+            action.pos,
+            createPlaceholderElement(),
+            { id: action.id }
+          );
+          return decorations.add(tr.doc, [widget]);
+        }
+        if (action?.type === "remove") {
+          const found = decorations.find(
+            void 0,
+            void 0,
+            (spec) => spec["id"] === action.id
+          );
+          return decorations.remove(found);
+        }
+        return decorations;
+      }
+    },
+    props: {
+      decorations(state) {
+        return imageUploadPluginKey.getState(state);
+      },
+      handlePaste(view, event) {
+        const items = event.clipboardData?.items;
+        if (!items) return false;
+        const files = [];
+        for (const item of Array.from(items)) {
+          if (item.kind === "file") {
+            const file = item.getAsFile();
+            if (file && isValidImageFile(file, allowedMimeTypes, maxFileSize)) {
+              files.push(file);
+            }
+          }
+        }
+        if (files.length === 0) return false;
+        event.preventDefault();
+        handleFiles(view, files, view.state.selection.from);
+        return true;
+      },
+      handleDrop(view, event) {
+        const dataTransfer = event.dataTransfer;
+        if (!dataTransfer?.files || dataTransfer.files.length === 0)
+          return false;
+        const imageFiles = [];
+        for (const file of Array.from(dataTransfer.files)) {
+          if (isValidImageFile(file, allowedMimeTypes, maxFileSize)) {
+            imageFiles.push(file);
+          }
+        }
+        if (imageFiles.length === 0) return false;
+        event.preventDefault();
+        const pos = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY
+        });
+        if (!pos) return false;
+        handleFiles(view, imageFiles, pos.pos);
+        return true;
+      }
+    }
+  });
+}
+
+// src/Image.ts
+function isValidImageSrc(value, allowBase64) {
+  if (value === null || value === void 0) return true;
+  if (typeof value !== "string") return false;
+  if (value === "") return true;
+  if (/^(javascript|vbscript|file):/i.test(value)) return false;
+  if (/^data:/i.test(value)) {
+    return allowBase64 && /^data:image\//i.test(value);
+  }
+  return true;
+}
+function readFileAsDataURL(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = () => {
+      reject(reader.error ?? new Error("FileReader error"));
+    };
+    reader.readAsDataURL(file);
+  });
+}
+var Image = Node.create({
+  name: "image",
+  group() {
+    return this.options.inline ? "inline" : "block";
+  },
+  inline() {
+    return this.options.inline;
+  },
+  draggable: true,
+  atom: true,
+  addOptions() {
+    return {
+      inline: false,
+      allowBase64: true,
+      HTMLAttributes: {},
+      uploadHandler: null,
+      allowedMimeTypes: [
+        "image/jpeg",
+        "image/png",
+        "image/gif",
+        "image/webp",
+        "image/svg+xml",
+        "image/avif"
+      ],
+      maxFileSize: 0,
+      onUploadStart: null,
+      onUploadError: null
+    };
+  },
+  addAttributes() {
+    const { options } = this;
+    return {
+      src: {
+        default: null,
+        parseHTML: (element) => {
+          const src = element.getAttribute("src");
+          if (src && !isValidImageSrc(src, options.allowBase64)) {
+            return null;
+          }
+          return src;
+        },
+        renderHTML: (attributes) => {
+          if (!attributes["src"]) return {};
+          return { src: attributes["src"] };
+        }
+      },
+      alt: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("alt"),
+        renderHTML: (attributes) => {
+          if (!attributes["alt"]) return {};
+          return { alt: attributes["alt"] };
+        }
+      },
+      title: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("title"),
+        renderHTML: (attributes) => {
+          if (!attributes["title"]) return {};
+          return { title: attributes["title"] };
+        }
+      },
+      width: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("width"),
+        renderHTML: (attributes) => {
+          if (!attributes["width"]) return {};
+          return { width: attributes["width"] };
+        }
+      },
+      height: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("height"),
+        renderHTML: (attributes) => {
+          if (!attributes["height"]) return {};
+          return { height: attributes["height"] };
+        }
+      },
+      loading: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("loading"),
+        renderHTML: (attributes) => {
+          if (!attributes["loading"]) return {};
+          return { loading: attributes["loading"] };
+        }
+      },
+      crossorigin: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("crossorigin"),
+        renderHTML: (attributes) => {
+          if (!attributes["crossorigin"]) return {};
+          return { crossorigin: attributes["crossorigin"] };
+        }
+      },
+      float: {
+        default: "none",
+        parseHTML: (element) => {
+          const style = element.style;
+          if (style.float === "left") return "left";
+          if (style.float === "right") return "right";
+          if (style.marginLeft === "auto" && style.marginRight === "auto") return "center";
+          const align = element.getAttribute("align");
+          if (align === "left") return "left";
+          if (align === "right") return "right";
+          if (align === "center" || align === "middle") return "center";
+          return "none";
+        },
+        renderHTML: (attributes) => {
+          const float = attributes["float"];
+          if (!float || float === "none") return {};
+          if (float === "left") return { style: "float: left; margin: 0 1em 1em 0;" };
+          if (float === "right") return { style: "float: right; margin: 0 0 1em 1em;" };
+          if (float === "center") return { style: "display: block; margin-left: auto; margin-right: auto;" };
+          return {};
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "img[src]" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const src = node.attrs["src"];
+    if (src && !isValidImageSrc(src, this.options.allowBase64)) {
+      return ["img", { ...this.options.HTMLAttributes, ...HTMLAttributes, src: "" }];
+    }
+    return ["img", { ...this.options.HTMLAttributes, ...HTMLAttributes }];
+  },
+  leafText(node) {
+    return node.attrs["alt"] ?? "";
+  },
+  addInputRules() {
+    const { nodeType, options } = this;
+    if (!nodeType) return [];
+    return [
+      new InputRule(
+        /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'\u201C\u201D\u2018\u2019]([^"'\u201C\u201D\u2018\u2019]+)["'\u201C\u201D\u2018\u2019])?\))$/,
+        (state, match, start, end) => {
+          const [fullMatch, wrapper, alt, src, title] = match;
+          if (!src || !wrapper) return null;
+          if (!isValidImageSrc(src, options.allowBase64)) return null;
+          const { tr } = state;
+          const attrs = {
+            src,
+            alt: alt ?? null,
+            title: title ?? null
+          };
+          const offset = fullMatch.length - wrapper.length;
+          const from = start + offset;
+          tr.replaceWith(from, end, nodeType.create(attrs));
+          return tr;
+        }
+      )
+    ];
+  },
+  addToolbarItems() {
+    return [
+      // Main toolbar insert button
+      {
+        type: "button",
+        name: "image",
+        command: "setImage",
+        commandArgs: [{ src: "" }],
+        icon: "image",
+        label: "Insert Image",
+        group: "insert",
+        priority: 150,
+        emitEvent: "insertImage"
+      },
+      // Bubble menu only: float controls
+      { type: "button", name: "imageFloatNone", command: "setImageFloat", commandArgs: ["none"], icon: "textIndent", label: "Inline", group: "image-float", priority: 100, isActive: { name: "image", attributes: { float: "none" } }, toolbar: false, bubbleMenu: "image" },
+      { type: "button", name: "imageFloatLeft", command: "setImageFloat", commandArgs: ["left"], icon: "textAlignLeft", label: "Float left", group: "image-float", priority: 90, isActive: { name: "image", attributes: { float: "left" } }, toolbar: false, bubbleMenu: "image" },
+      { type: "button", name: "imageFloatCenter", command: "setImageFloat", commandArgs: ["center"], icon: "textAlignCenter", label: "Center", group: "image-float", priority: 80, isActive: { name: "image", attributes: { float: "center" } }, toolbar: false, bubbleMenu: "image" },
+      { type: "button", name: "imageFloatRight", command: "setImageFloat", commandArgs: ["right"], icon: "textAlignRight", label: "Float right", group: "image-float", priority: 70, isActive: { name: "image", attributes: { float: "right" } }, toolbar: false, bubbleMenu: "image" },
+      // Bubble menu only: delete
+      { type: "button", name: "deleteImage", command: "deleteImage", icon: "trash", label: "Delete", group: "image-actions", priority: 50, toolbar: false, bubbleMenu: "image" }
+    ];
+  },
+  addNodeView() {
+    return (node, view, getPos) => {
+      const dom = document.createElement("div");
+      dom.className = "dm-image-resizable";
+      dom.draggable = true;
+      const applyFloat = (float) => {
+        if (float && float !== "none") {
+          dom.setAttribute("data-float", float);
+        } else {
+          dom.removeAttribute("data-float");
+        }
+      };
+      applyFloat(node.attrs["float"]);
+      const img = document.createElement("img");
+      img.src = node.attrs["src"];
+      if (node.attrs["alt"]) img.alt = node.attrs["alt"];
+      if (node.attrs["title"]) img.title = node.attrs["title"];
+      if (node.attrs["width"]) {
+        img.style.width = `${String(node.attrs["width"])}px`;
+      }
+      dom.appendChild(img);
+      dom.addEventListener("mousedown", (e) => {
+        if (e.target.closest(".dm-image-handle")) return;
+        const pos = getPos();
+        if (pos === void 0) return;
+        const { selection } = view.state;
+        if (selection instanceof NodeSelection && selection.from === pos) return;
+        e.preventDefault();
+        view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos)));
+        view.focus();
+      });
+      for (const corner of ["nw", "ne", "sw", "se"]) {
+        const handle = document.createElement("div");
+        handle.className = `dm-image-handle dm-image-handle-${corner}`;
+        handle.addEventListener("mousedown", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const startX = e.clientX;
+          const startWidth = img.offsetWidth;
+          const isLeft = corner.includes("w");
+          const onMouseMove = (ev) => {
+            const dx = isLeft ? startX - ev.clientX : ev.clientX - startX;
+            const newWidth = Math.max(50, startWidth + dx);
+            img.style.width = `${String(newWidth)}px`;
+          };
+          const onMouseUp = () => {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            const pos = getPos();
+            if (pos === void 0) return;
+            const currentNode = view.state.doc.nodeAt(pos);
+            if (!currentNode) return;
+            const tr = view.state.tr.setNodeMarkup(pos, void 0, {
+              ...currentNode.attrs,
+              width: img.offsetWidth
+            });
+            view.dispatch(tr);
+          };
+          document.addEventListener("mousemove", onMouseMove);
+          document.addEventListener("mouseup", onMouseUp);
+          document.body.style.cursor = isLeft ? "nw-resize" : "ne-resize";
+          document.body.style.userSelect = "none";
+        });
+        dom.appendChild(handle);
+      }
+      return {
+        dom,
+        update(updatedNode) {
+          if (updatedNode.type.name !== "image") return false;
+          img.src = updatedNode.attrs["src"];
+          img.alt = updatedNode.attrs["alt"];
+          img.title = updatedNode.attrs["title"];
+          if (updatedNode.attrs["width"]) {
+            img.style.width = `${String(updatedNode.attrs["width"])}px`;
+          } else {
+            img.style.width = "";
+          }
+          applyFloat(updatedNode.attrs["float"]);
+          node = updatedNode;
+          return true;
+        },
+        selectNode() {
+          dom.classList.add("ProseMirror-selectednode");
+        },
+        deselectNode() {
+          dom.classList.remove("ProseMirror-selectednode");
+        }
+      };
+    };
+  },
+  addCommands() {
+    return {
+      setImage: (attributes) => ({ tr, dispatch }) => {
+        if (!isValidImageSrc(attributes.src, this.options.allowBase64)) {
+          return false;
+        }
+        if (!this.nodeType) return false;
+        if (tr.selection.$from.parent.type.spec.code) return false;
+        if (dispatch) {
+          const node = this.nodeType.create(attributes);
+          tr.replaceSelectionWith(node);
+          dispatch(tr);
+        }
+        return true;
+      },
+      deleteImage: () => ({ tr, dispatch }) => {
+        if (dispatch) {
+          tr.deleteSelection();
+          dispatch(tr);
+        }
+        return true;
+      },
+      setImageFloat: (float) => ({ tr, state, dispatch }) => {
+        if (!["none", "left", "right", "center"].includes(float)) return false;
+        const { selection } = state;
+        const node = state.doc.nodeAt(selection.from);
+        if (node?.type.name !== "image") return false;
+        if (dispatch) {
+          tr.setNodeMarkup(selection.from, void 0, {
+            ...node.attrs,
+            float
+          });
+          dispatch(tr);
+        }
+        return true;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const plugins = [];
+    const editor = this.editor;
+    const nodeType = this.nodeType;
+    const options = this.options;
+    const storage = this.storage;
+    if (nodeType) {
+      const el = document.createElement("div");
+      el.className = "dm-image-popover";
+      el.setAttribute("data-dm-editor-ui", "");
+      const urlInput = document.createElement("input");
+      urlInput.type = "url";
+      urlInput.placeholder = "Image URL...";
+      urlInput.className = "dm-image-popover-input";
+      const applyBtn = document.createElement("button");
+      applyBtn.type = "button";
+      applyBtn.className = "dm-image-popover-btn dm-image-popover-apply";
+      applyBtn.title = "Insert image";
+      applyBtn.innerHTML = defaultIcons["check"] ?? "";
+      const browseBtn = document.createElement("button");
+      browseBtn.type = "button";
+      browseBtn.className = "dm-image-popover-btn dm-image-popover-browse";
+      browseBtn.title = "Browse files";
+      browseBtn.innerHTML = defaultIcons["image"] ?? "";
+      el.appendChild(urlInput);
+      el.appendChild(applyBtn);
+      el.appendChild(browseBtn);
+      let isOpen = false;
+      let cleanupFloating = null;
+      let toggleAnchor = null;
+      const showPopover = (anchorElement) => {
+        toggleAnchor = anchorElement ?? null;
+        urlInput.value = "";
+        el.setAttribute("data-show", "");
+        isOpen = true;
+        storage["isOpen"] = true;
+        editor.view.dispatch(editor.view.state.tr);
+        const reference = anchorElement ?? {
+          getBoundingClientRect: () => {
+            const coords = editor.view.coordsAtPos(editor.view.state.selection.from);
+            return new DOMRect(coords.left, coords.top, 0, coords.bottom - coords.top);
+          }
+        };
+        cleanupFloating?.();
+        cleanupFloating = positionFloating(reference, el, {
+          placement: "bottom",
+          offsetValue: 4
+        });
+        urlInput.focus();
+      };
+      const hidePopover = () => {
+        if (!isOpen) return;
+        toggleAnchor = null;
+        cleanupFloating?.();
+        cleanupFloating = null;
+        el.removeAttribute("data-show");
+        isOpen = false;
+        storage["isOpen"] = false;
+        editor.view.dispatch(editor.view.state.tr);
+      };
+      const closePopover = () => {
+        hidePopover();
+        editor.view.focus();
+      };
+      const insertFromFile = (file) => {
+        if (options.uploadHandler) {
+          options.uploadHandler(file).then((url) => {
+            editor.commands.setImage({ src: url });
+          }).catch((error) => {
+            if (options.onUploadError) {
+              options.onUploadError(
+                error instanceof Error ? error : new Error(String(error)),
+                file
+              );
+            }
+          });
+        } else {
+          void readFileAsDataURL(file).then((src) => {
+            const { tr } = editor.view.state;
+            tr.replaceSelectionWith(nodeType.create({ src }));
+            editor.view.dispatch(tr);
+          });
+        }
+      };
+      const applyUrl = () => {
+        const src = urlInput.value.trim();
+        if (src && isValidImageSrc(src, options.allowBase64)) {
+          editor.commands.setImage({ src });
+        }
+        closePopover();
+      };
+      const openFileBrowser = () => {
+        hidePopover();
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = options.allowedMimeTypes.join(",");
+        input.addEventListener("change", () => {
+          const file = input.files?.[0];
+          if (file) insertFromFile(file);
+          editor.view.focus();
+        });
+        input.click();
+      };
+      const onInsertImage = (data) => {
+        if (isOpen) {
+          closePopover();
+        } else {
+          showPopover(data.anchorElement);
+        }
+      };
+      const onInputKeydown = (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          applyUrl();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          closePopover();
+        } else if (e.key === "Tab") {
+          e.preventDefault();
+          applyBtn.focus();
+        }
+      };
+      const onButtonKeydown = (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          closePopover();
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+          e.target.click();
+        } else if (e.key === "Tab") {
+          e.preventDefault();
+          const target = e.target;
+          if (e.shiftKey) {
+            if (target === applyBtn) urlInput.focus();
+            else applyBtn.focus();
+          } else {
+            if (target === applyBtn) browseBtn.focus();
+            else urlInput.focus();
+          }
+        }
+      };
+      const onClickOutside = (e) => {
+        if (!isOpen || el.contains(e.target)) return;
+        if (toggleAnchor && (toggleAnchor === e.target || toggleAnchor.contains(e.target))) return;
+        hidePopover();
+      };
+      const onPreventBlur = (e) => {
+        e.preventDefault();
+      };
+      let dragCounter = 0;
+      const hasImageItems = (dt) => {
+        if (!dt?.items) return false;
+        for (const item of Array.from(dt.items)) {
+          if (item.kind === "file" && item.type.startsWith("image/")) return true;
+        }
+        return false;
+      };
+      plugins.push(new Plugin({
+        key: new PluginKey$1("imageFileBrowser"),
+        props: {
+          handleDOMEvents: {
+            dragenter(view, event) {
+              if (!hasImageItems(event.dataTransfer)) return false;
+              dragCounter++;
+              view.dom.closest(".dm-editor")?.classList.add("dm-dragover");
+              return false;
+            },
+            dragleave(view) {
+              dragCounter--;
+              if (dragCounter <= 0) {
+                dragCounter = 0;
+                view.dom.closest(".dm-editor")?.classList.remove("dm-dragover");
+              }
+              return false;
+            },
+            drop(view) {
+              dragCounter = 0;
+              view.dom.closest(".dm-editor")?.classList.remove("dm-dragover");
+              return false;
+            }
+          },
+          handlePaste(view, event) {
+            if (options.uploadHandler) return false;
+            const items = event.clipboardData?.items;
+            if (!items) return false;
+            for (const item of Array.from(items)) {
+              if (item.kind === "file" && item.type.startsWith("image/")) {
+                const file = item.getAsFile();
+                if (!file) continue;
+                if (!options.allowedMimeTypes.includes(file.type)) continue;
+                if (options.maxFileSize > 0 && file.size > options.maxFileSize) continue;
+                event.preventDefault();
+                void readFileAsDataURL(file).then((src) => {
+                  const { tr } = view.state;
+                  tr.replaceSelectionWith(nodeType.create({ src }));
+                  view.dispatch(tr);
+                });
+                return true;
+              }
+            }
+            return false;
+          },
+          handleDrop(view, event) {
+            if (options.uploadHandler) return false;
+            const files = event.dataTransfer?.files;
+            if (!files?.length) return false;
+            const file = files[0];
+            if (!file || !options.allowedMimeTypes.includes(file.type)) return false;
+            if (options.maxFileSize > 0 && file.size > options.maxFileSize) return false;
+            event.preventDefault();
+            const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+            if (!pos) return false;
+            void readFileAsDataURL(file).then((src) => {
+              const tr = view.state.tr;
+              tr.insert(pos.pos, nodeType.create({ src }));
+              view.dispatch(tr);
+            });
+            return true;
+          }
+        },
+        view() {
+          document.body.appendChild(el);
+          urlInput.addEventListener("keydown", onInputKeydown);
+          applyBtn.addEventListener("mousedown", onPreventBlur);
+          applyBtn.addEventListener("click", applyUrl);
+          applyBtn.addEventListener("keydown", onButtonKeydown);
+          browseBtn.addEventListener("mousedown", onPreventBlur);
+          browseBtn.addEventListener("click", openFileBrowser);
+          browseBtn.addEventListener("keydown", onButtonKeydown);
+          document.addEventListener("mousedown", onClickOutside);
+          const dynEditor = editor;
+          dynEditor.on("insertImage", onInsertImage);
+          return {
+            destroy() {
+              hidePopover();
+              urlInput.removeEventListener("keydown", onInputKeydown);
+              applyBtn.removeEventListener("mousedown", onPreventBlur);
+              applyBtn.removeEventListener("click", applyUrl);
+              applyBtn.removeEventListener("keydown", onButtonKeydown);
+              browseBtn.removeEventListener("mousedown", onPreventBlur);
+              browseBtn.removeEventListener("click", openFileBrowser);
+              browseBtn.removeEventListener("keydown", onButtonKeydown);
+              document.removeEventListener("mousedown", onClickOutside);
+              dynEditor.off("insertImage", onInsertImage);
+              el.remove();
+            }
+          };
+        }
+      }));
+    }
+    if (options.uploadHandler && nodeType) {
+      plugins.push(
+        imageUploadPlugin({
+          nodeType,
+          uploadHandler: options.uploadHandler,
+          allowedMimeTypes: options.allowedMimeTypes,
+          maxFileSize: options.maxFileSize,
+          onUploadStart: options.onUploadStart,
+          onUploadError: options.onUploadError
+        })
+      );
+    }
+    return plugins;
+  }
+});
+
+export { Image, imageUploadPluginKey };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map