@tiptap/extension-file-handler 2.22.0

package/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-file-handler
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-file-handler.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-file-handler)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-file-handler.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-file-handler.svg)](https://www.npmjs.com/package/@tiptap/extension-file-handler)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Official Documentation
+Documentation can be found on the [Tiptap website](https://tiptap.dev).
+
+## License
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/FileHandlePlugin.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from '@tiptap/pm/state';
+import { FileHandlePluginOptions } from './types.js';
+export declare const FileHandlePlugin: ({ key, editor, onPaste, onDrop, allowedMimeTypes, }: FileHandlePluginOptions) => Plugin<any>;
+//# sourceMappingURL=FileHandlePlugin.d.ts.map

package/dist/FileHandlePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileHandlePlugin.d.ts","sourceRoot":"","sources":["../src/FileHandlePlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAa,MAAM,kBAAkB,CAAA;AAEpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA;AAEpD,eAAO,MAAM,gBAAgB,wDAE1B,uBAAuB,gBA2EzB,CAAA"}

package/dist/fileHandler.d.ts

@@ -0,0 +1,3 @@
+import { Extension } from '@tiptap/core';
+export declare const FileHandler: Extension<Omit<import("./types.js").FileHandlePluginOptions, "key" | "editor">, any>;
+//# sourceMappingURL=fileHandler.d.ts.map

package/dist/fileHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileHandler.d.ts","sourceRoot":"","sources":["../src/fileHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAMxC,eAAO,MAAM,WAAW,sFAkBtB,CAAA"}

package/dist/index.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@tiptap/core');
+var state = require('@tiptap/pm/state');
+
+const FileHandlePlugin = ({ key, editor, onPaste, onDrop, allowedMimeTypes, }) => {
+    return new state.Plugin({
+        key: key || new state.PluginKey('fileHandler'),
+        props: {
+            handleDrop(_view, event) {
+                var _a;
+                if (!onDrop) {
+                    return false;
+                }
+                if (!((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files.length)) {
+                    return false;
+                }
+                const dropPos = _view.posAtCoords({
+                    left: event.clientX,
+                    top: event.clientY,
+                });
+                let filesArray = Array.from(event.dataTransfer.files);
+                if (allowedMimeTypes) {
+                    filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type));
+                }
+                if (filesArray.length === 0) {
+                    return false;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                onDrop(editor, filesArray, (dropPos === null || dropPos === void 0 ? void 0 : dropPos.pos) || 0);
+                return true;
+            },
+            handlePaste(_view, event) {
+                var _a;
+                if (!onPaste) {
+                    return false;
+                }
+                if (!((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.files.length)) {
+                    return false;
+                }
+                let filesArray = Array.from(event.clipboardData.files);
+                const htmlContent = event.clipboardData.getData('text/html');
+                if (allowedMimeTypes) {
+                    filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type));
+                }
+                if (filesArray.length === 0) {
+                    return false;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                onPaste(editor, filesArray, htmlContent);
+                // if there is also file data inside the clipboard html,
+                // we won't use the files array and instead get the file url from the html
+                // this mostly happens for gifs or webms as they are not copied correctly as a file
+                // and will always be transformed into a PNG
+                // in this case we will let other extensions handle the incoming html via their inputRules
+                if (htmlContent.length > 0) {
+                    return false;
+                }
+                return true;
+            },
+        },
+    });
+};
+
+const FileHandler = core.Extension.create({
+    name: 'fileHandler',
+    addOptions() {
+        return {
+            onPaste: undefined,
+            onDrop: undefined,
+            allowedMimeTypes: undefined,
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            FileHandlePlugin({
+                key: new state.PluginKey(this.name), editor: this.editor, allowedMimeTypes: this.options.allowedMimeTypes, onDrop: this.options.onDrop, onPaste: this.options.onPaste,
+            }),
+        ];
+    },
+});
+
+exports.FileHandlePlugin = FileHandlePlugin;
+exports.FileHandler = FileHandler;
+exports.default = FileHandler;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/FileHandlePlugin.ts","../src/fileHandler.ts"],"sourcesContent":["import { Plugin, PluginKey } from '@tiptap/pm/state'\n\nimport { FileHandlePluginOptions } from './types.js'\n\nexport const FileHandlePlugin = ({\n  key, editor, onPaste, onDrop, allowedMimeTypes,\n}: FileHandlePluginOptions) => {\n  return new Plugin({\n    key: key || new PluginKey('fileHandler'),\n\n    props: {\n      handleDrop(_view, event) {\n        if (!onDrop) {\n          return false\n        }\n\n        if (!event.dataTransfer?.files.length) {\n          return false\n        }\n\n        const dropPos = _view.posAtCoords({\n          left: event.clientX,\n          top: event.clientY,\n        })\n\n        let filesArray = Array.from(event.dataTransfer.files)\n\n        if (allowedMimeTypes) {\n          filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type))\n        }\n\n        if (filesArray.length === 0) {\n          return false\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n\n        onDrop(editor, filesArray, dropPos?.pos || 0)\n\n        return true\n      },\n\n      handlePaste(_view, event) {\n        if (!onPaste) {\n          return false\n        }\n\n        if (!event.clipboardData?.files.length) {\n          return false\n        }\n\n        let filesArray = Array.from(event.clipboardData.files)\n        const htmlContent = event.clipboardData.getData('text/html')\n\n        if (allowedMimeTypes) {\n          filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type))\n        }\n\n        if (filesArray.length === 0) {\n          return false\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n\n        onPaste(editor, filesArray, htmlContent)\n\n        // if there is also file data inside the clipboard html,\n        // we won't use the files array and instead get the file url from the html\n        // this mostly happens for gifs or webms as they are not copied correctly as a file\n        // and will always be transformed into a PNG\n        // in this case we will let other extensions handle the incoming html via their inputRules\n        if (htmlContent.length > 0) {\n          return false\n        }\n\n        return true\n      },\n    },\n  })\n}\n","import { Extension } from '@tiptap/core'\nimport { PluginKey } from '@tiptap/pm/state'\n\nimport { FileHandlePlugin } from './FileHandlePlugin.js'\nimport { FileHandlerOptions } from './types.js'\n\nexport const FileHandler = Extension.create<FileHandlerOptions>({\n  name: 'fileHandler',\n\n  addOptions() {\n    return {\n      onPaste: undefined,\n      onDrop: undefined,\n      allowedMimeTypes: undefined,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      FileHandlePlugin({\n        key: new PluginKey(this.name), editor: this.editor, allowedMimeTypes: this.options.allowedMimeTypes, onDrop: this.options.onDrop, onPaste: this.options.onPaste,\n      }),\n    ]\n  },\n})\n"],"names":["Plugin","PluginKey","Extension"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { FileHandler } from './fileHandler.js';
+export * from './FileHandlePlugin.js';
+export * from './types.js';
+export { FileHandler };
+export default FileHandler;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,WAAW,EAAE,CAAA;AAEtB,eAAe,WAAW,CAAA"}

package/dist/index.js

@@ -0,0 +1,84 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+const FileHandlePlugin = ({ key, editor, onPaste, onDrop, allowedMimeTypes, }) => {
+    return new Plugin({
+        key: key || new PluginKey('fileHandler'),
+        props: {
+            handleDrop(_view, event) {
+                var _a;
+                if (!onDrop) {
+                    return false;
+                }
+                if (!((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files.length)) {
+                    return false;
+                }
+                const dropPos = _view.posAtCoords({
+                    left: event.clientX,
+                    top: event.clientY,
+                });
+                let filesArray = Array.from(event.dataTransfer.files);
+                if (allowedMimeTypes) {
+                    filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type));
+                }
+                if (filesArray.length === 0) {
+                    return false;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                onDrop(editor, filesArray, (dropPos === null || dropPos === void 0 ? void 0 : dropPos.pos) || 0);
+                return true;
+            },
+            handlePaste(_view, event) {
+                var _a;
+                if (!onPaste) {
+                    return false;
+                }
+                if (!((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.files.length)) {
+                    return false;
+                }
+                let filesArray = Array.from(event.clipboardData.files);
+                const htmlContent = event.clipboardData.getData('text/html');
+                if (allowedMimeTypes) {
+                    filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type));
+                }
+                if (filesArray.length === 0) {
+                    return false;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                onPaste(editor, filesArray, htmlContent);
+                // if there is also file data inside the clipboard html,
+                // we won't use the files array and instead get the file url from the html
+                // this mostly happens for gifs or webms as they are not copied correctly as a file
+                // and will always be transformed into a PNG
+                // in this case we will let other extensions handle the incoming html via their inputRules
+                if (htmlContent.length > 0) {
+                    return false;
+                }
+                return true;
+            },
+        },
+    });
+};
+
+const FileHandler = Extension.create({
+    name: 'fileHandler',
+    addOptions() {
+        return {
+            onPaste: undefined,
+            onDrop: undefined,
+            allowedMimeTypes: undefined,
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            FileHandlePlugin({
+                key: new PluginKey(this.name), editor: this.editor, allowedMimeTypes: this.options.allowedMimeTypes, onDrop: this.options.onDrop, onPaste: this.options.onPaste,
+            }),
+        ];
+    },
+});
+
+export { FileHandlePlugin, FileHandler, FileHandler as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/FileHandlePlugin.ts","../src/fileHandler.ts"],"sourcesContent":["import { Plugin, PluginKey } from '@tiptap/pm/state'\n\nimport { FileHandlePluginOptions } from './types.js'\n\nexport const FileHandlePlugin = ({\n  key, editor, onPaste, onDrop, allowedMimeTypes,\n}: FileHandlePluginOptions) => {\n  return new Plugin({\n    key: key || new PluginKey('fileHandler'),\n\n    props: {\n      handleDrop(_view, event) {\n        if (!onDrop) {\n          return false\n        }\n\n        if (!event.dataTransfer?.files.length) {\n          return false\n        }\n\n        const dropPos = _view.posAtCoords({\n          left: event.clientX,\n          top: event.clientY,\n        })\n\n        let filesArray = Array.from(event.dataTransfer.files)\n\n        if (allowedMimeTypes) {\n          filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type))\n        }\n\n        if (filesArray.length === 0) {\n          return false\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n\n        onDrop(editor, filesArray, dropPos?.pos || 0)\n\n        return true\n      },\n\n      handlePaste(_view, event) {\n        if (!onPaste) {\n          return false\n        }\n\n        if (!event.clipboardData?.files.length) {\n          return false\n        }\n\n        let filesArray = Array.from(event.clipboardData.files)\n        const htmlContent = event.clipboardData.getData('text/html')\n\n        if (allowedMimeTypes) {\n          filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type))\n        }\n\n        if (filesArray.length === 0) {\n          return false\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n\n        onPaste(editor, filesArray, htmlContent)\n\n        // if there is also file data inside the clipboard html,\n        // we won't use the files array and instead get the file url from the html\n        // this mostly happens for gifs or webms as they are not copied correctly as a file\n        // and will always be transformed into a PNG\n        // in this case we will let other extensions handle the incoming html via their inputRules\n        if (htmlContent.length > 0) {\n          return false\n        }\n\n        return true\n      },\n    },\n  })\n}\n","import { Extension } from '@tiptap/core'\nimport { PluginKey } from '@tiptap/pm/state'\n\nimport { FileHandlePlugin } from './FileHandlePlugin.js'\nimport { FileHandlerOptions } from './types.js'\n\nexport const FileHandler = Extension.create<FileHandlerOptions>({\n  name: 'fileHandler',\n\n  addOptions() {\n    return {\n      onPaste: undefined,\n      onDrop: undefined,\n      allowedMimeTypes: undefined,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      FileHandlePlugin({\n        key: new PluginKey(this.name), editor: this.editor, allowedMimeTypes: this.options.allowedMimeTypes, onDrop: this.options.onDrop, onPaste: this.options.onPaste,\n      }),\n    ]\n  },\n})\n"],"names":[],"mappings":"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"}

package/dist/index.umd.js

@@ -0,0 +1,93 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('@tiptap/pm/state')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', '@tiptap/pm/state'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-file-handler"] = {}, global.core, global.state));
+})(this, (function (exports, core, state) { 'use strict';
+
+  const FileHandlePlugin = ({ key, editor, onPaste, onDrop, allowedMimeTypes, }) => {
+      return new state.Plugin({
+          key: key || new state.PluginKey('fileHandler'),
+          props: {
+              handleDrop(_view, event) {
+                  var _a;
+                  if (!onDrop) {
+                      return false;
+                  }
+                  if (!((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files.length)) {
+                      return false;
+                  }
+                  const dropPos = _view.posAtCoords({
+                      left: event.clientX,
+                      top: event.clientY,
+                  });
+                  let filesArray = Array.from(event.dataTransfer.files);
+                  if (allowedMimeTypes) {
+                      filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type));
+                  }
+                  if (filesArray.length === 0) {
+                      return false;
+                  }
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onDrop(editor, filesArray, (dropPos === null || dropPos === void 0 ? void 0 : dropPos.pos) || 0);
+                  return true;
+              },
+              handlePaste(_view, event) {
+                  var _a;
+                  if (!onPaste) {
+                      return false;
+                  }
+                  if (!((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.files.length)) {
+                      return false;
+                  }
+                  let filesArray = Array.from(event.clipboardData.files);
+                  const htmlContent = event.clipboardData.getData('text/html');
+                  if (allowedMimeTypes) {
+                      filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type));
+                  }
+                  if (filesArray.length === 0) {
+                      return false;
+                  }
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onPaste(editor, filesArray, htmlContent);
+                  // if there is also file data inside the clipboard html,
+                  // we won't use the files array and instead get the file url from the html
+                  // this mostly happens for gifs or webms as they are not copied correctly as a file
+                  // and will always be transformed into a PNG
+                  // in this case we will let other extensions handle the incoming html via their inputRules
+                  if (htmlContent.length > 0) {
+                      return false;
+                  }
+                  return true;
+              },
+          },
+      });
+  };
+
+  const FileHandler = core.Extension.create({
+      name: 'fileHandler',
+      addOptions() {
+          return {
+              onPaste: undefined,
+              onDrop: undefined,
+              allowedMimeTypes: undefined,
+          };
+      },
+      addProseMirrorPlugins() {
+          return [
+              FileHandlePlugin({
+                  key: new state.PluginKey(this.name), editor: this.editor, allowedMimeTypes: this.options.allowedMimeTypes, onDrop: this.options.onDrop, onPaste: this.options.onPaste,
+              }),
+          ];
+      },
+  });
+
+  exports.FileHandlePlugin = FileHandlePlugin;
+  exports.FileHandler = FileHandler;
+  exports.default = FileHandler;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/FileHandlePlugin.ts","../src/fileHandler.ts"],"sourcesContent":["import { Plugin, PluginKey } from '@tiptap/pm/state'\n\nimport { FileHandlePluginOptions } from './types.js'\n\nexport const FileHandlePlugin = ({\n  key, editor, onPaste, onDrop, allowedMimeTypes,\n}: FileHandlePluginOptions) => {\n  return new Plugin({\n    key: key || new PluginKey('fileHandler'),\n\n    props: {\n      handleDrop(_view, event) {\n        if (!onDrop) {\n          return false\n        }\n\n        if (!event.dataTransfer?.files.length) {\n          return false\n        }\n\n        const dropPos = _view.posAtCoords({\n          left: event.clientX,\n          top: event.clientY,\n        })\n\n        let filesArray = Array.from(event.dataTransfer.files)\n\n        if (allowedMimeTypes) {\n          filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type))\n        }\n\n        if (filesArray.length === 0) {\n          return false\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n\n        onDrop(editor, filesArray, dropPos?.pos || 0)\n\n        return true\n      },\n\n      handlePaste(_view, event) {\n        if (!onPaste) {\n          return false\n        }\n\n        if (!event.clipboardData?.files.length) {\n          return false\n        }\n\n        let filesArray = Array.from(event.clipboardData.files)\n        const htmlContent = event.clipboardData.getData('text/html')\n\n        if (allowedMimeTypes) {\n          filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type))\n        }\n\n        if (filesArray.length === 0) {\n          return false\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n\n        onPaste(editor, filesArray, htmlContent)\n\n        // if there is also file data inside the clipboard html,\n        // we won't use the files array and instead get the file url from the html\n        // this mostly happens for gifs or webms as they are not copied correctly as a file\n        // and will always be transformed into a PNG\n        // in this case we will let other extensions handle the incoming html via their inputRules\n        if (htmlContent.length > 0) {\n          return false\n        }\n\n        return true\n      },\n    },\n  })\n}\n","import { Extension } from '@tiptap/core'\nimport { PluginKey } from '@tiptap/pm/state'\n\nimport { FileHandlePlugin } from './FileHandlePlugin.js'\nimport { FileHandlerOptions } from './types.js'\n\nexport const FileHandler = Extension.create<FileHandlerOptions>({\n  name: 'fileHandler',\n\n  addOptions() {\n    return {\n      onPaste: undefined,\n      onDrop: undefined,\n      allowedMimeTypes: undefined,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      FileHandlePlugin({\n        key: new PluginKey(this.name), editor: this.editor, allowedMimeTypes: this.options.allowedMimeTypes, onDrop: this.options.onDrop, onPaste: this.options.onPaste,\n      }),\n    ]\n  },\n})\n"],"names":["Plugin","PluginKey","Extension"],"mappings":";;;;;;AAIa,QAAA,gBAAgB,GAAG,CAAC,EAC/B,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,gBAAgB,GACtB,KAAI;MAC5B,OAAO,IAAIA,YAAM,CAAC;EAChB,QAAA,GAAG,EAAE,GAAG,IAAI,IAAIC,eAAS,CAAC,aAAa,CAAC;EAExC,QAAA,KAAK,EAAE;cACL,UAAU,CAAC,KAAK,EAAE,KAAK,EAAA;;kBACrB,IAAI,CAAC,MAAM,EAAE;EACX,oBAAA,OAAO,KAAK;;EAGd,gBAAA,IAAI,EAAC,CAAA,EAAA,GAAA,KAAK,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,CAAC,MAAM,CAAA,EAAE;EACrC,oBAAA,OAAO,KAAK;;EAGd,gBAAA,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC;sBAChC,IAAI,EAAE,KAAK,CAAC,OAAO;sBACnB,GAAG,EAAE,KAAK,CAAC,OAAO;EACnB,iBAAA,CAAC;EAEF,gBAAA,IAAI,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;kBAErD,IAAI,gBAAgB,EAAE;EACpB,oBAAA,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;EAG9E,gBAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;EAC3B,oBAAA,OAAO,KAAK;;kBAGd,KAAK,CAAC,cAAc,EAAE;kBACtB,KAAK,CAAC,eAAe,EAAE;EAEvB,gBAAA,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAP,OAAO,CAAE,GAAG,KAAI,CAAC,CAAC;EAE7C,gBAAA,OAAO,IAAI;eACZ;cAED,WAAW,CAAC,KAAK,EAAE,KAAK,EAAA;;kBACtB,IAAI,CAAC,OAAO,EAAE;EACZ,oBAAA,OAAO,KAAK;;EAGd,gBAAA,IAAI,EAAC,CAAA,EAAA,GAAA,KAAK,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,CAAC,MAAM,CAAA,EAAE;EACtC,oBAAA,OAAO,KAAK;;EAGd,gBAAA,IAAI,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;kBACtD,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;kBAE5D,IAAI,gBAAgB,EAAE;EACpB,oBAAA,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;EAG9E,gBAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;EAC3B,oBAAA,OAAO,KAAK;;kBAGd,KAAK,CAAC,cAAc,EAAE;kBACtB,KAAK,CAAC,eAAe,EAAE;EAEvB,gBAAA,OAAO,CAAC,MAAM,EAAE,UAAU,EAAE,WAAW,CAAC;;;;;;EAOxC,gBAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;EAC1B,oBAAA,OAAO,KAAK;;EAGd,gBAAA,OAAO,IAAI;eACZ;EACF,SAAA;EACF,KAAA,CAAC;EACJ;;AC3Ea,QAAA,WAAW,GAAGC,cAAS,CAAC,MAAM,CAAqB;EAC9D,IAAA,IAAI,EAAE,aAAa;MAEnB,UAAU,GAAA;UACR,OAAO;EACL,YAAA,OAAO,EAAE,SAAS;EAClB,YAAA,MAAM,EAAE,SAAS;EACjB,YAAA,gBAAgB,EAAE,SAAS;WAC5B;OACF;MAED,qBAAqB,GAAA;UACnB,OAAO;EACL,YAAA,gBAAgB,CAAC;EACf,gBAAA,GAAG,EAAE,IAAID,eAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;eAChK,CAAC;WACH;OACF;EACF,CAAA;;;;;;;;;;;;"}

package/dist/types.d.ts

@@ -0,0 +1,36 @@
+import { Editor } from '@tiptap/core';
+import { PluginKey } from '@tiptap/pm/state';
+export type FileHandlePluginOptions = {
+    /**
+     * The plugin key.
+     * @default 'fileHandler'
+     */
+    key?: PluginKey;
+    /**
+     * The editor instance.
+     */
+    editor: Editor;
+    /**
+     * An array of allowed mimetypes
+     *
+     * example: ['image/jpeg', 'image/png']
+     */
+    allowedMimeTypes?: string[];
+    /**
+     * The onPaste callback that is called when a file is pasted.
+     * @param editor the editor instance
+     * @param files the File array including File objects
+     * @param pasteContent the pasted content as HTML string - this is only available if there is also html copied to the clipboard for example by copying from a website
+     * @returns Returns nothing.
+     */
+    onPaste?: (editor: Editor, files: File[], pasteContent?: string) => void;
+    /**
+     * The onDrop callback that is called when a file is dropped.
+     * @param editor the editor instance
+     * @param files the File array including File objects
+     * @returns Returns nothing.
+     */
+    onDrop?: (editor: Editor, files: File[], pos: number) => void;
+};
+export type FileHandlerOptions = {} & Omit<FileHandlePluginOptions, 'key' | 'editor'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,MAAM,MAAM,uBAAuB,GAAG;IACpC;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAA;IAEf;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IAEd;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAE3B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAExE;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9D,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,EAAE,GAAG,IAAI,CAAC,uBAAuB,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@tiptap/extension-file-handler",
+  "description": "file handler extension for tiptap",
+  "version": "2.22.0",
+  "homepage": "https://tiptap.dev/docs/editor/extensions/functionality/filehandler",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "umd": "dist/index.umd.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "devDependencies": {
+    "@tiptap/core": "^2.22.0",
+    "@tiptap/extension-text-style": "^2.22.0"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "^2.7.0",
+    "@tiptap/extension-text-style": "^2.7.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-file-handler"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c"
+  }
+}

package/src/FileHandlePlugin.ts

@@ -0,0 +1,82 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+import { FileHandlePluginOptions } from './types.js'
+
+export const FileHandlePlugin = ({
+  key, editor, onPaste, onDrop, allowedMimeTypes,
+}: FileHandlePluginOptions) => {
+  return new Plugin({
+    key: key || new PluginKey('fileHandler'),
+
+    props: {
+      handleDrop(_view, event) {
+        if (!onDrop) {
+          return false
+        }
+
+        if (!event.dataTransfer?.files.length) {
+          return false
+        }
+
+        const dropPos = _view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY,
+        })
+
+        let filesArray = Array.from(event.dataTransfer.files)
+
+        if (allowedMimeTypes) {
+          filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type))
+        }
+
+        if (filesArray.length === 0) {
+          return false
+        }
+
+        event.preventDefault()
+        event.stopPropagation()
+
+        onDrop(editor, filesArray, dropPos?.pos || 0)
+
+        return true
+      },
+
+      handlePaste(_view, event) {
+        if (!onPaste) {
+          return false
+        }
+
+        if (!event.clipboardData?.files.length) {
+          return false
+        }
+
+        let filesArray = Array.from(event.clipboardData.files)
+        const htmlContent = event.clipboardData.getData('text/html')
+
+        if (allowedMimeTypes) {
+          filesArray = filesArray.filter(file => allowedMimeTypes.includes(file.type))
+        }
+
+        if (filesArray.length === 0) {
+          return false
+        }
+
+        event.preventDefault()
+        event.stopPropagation()
+
+        onPaste(editor, filesArray, htmlContent)
+
+        // if there is also file data inside the clipboard html,
+        // we won't use the files array and instead get the file url from the html
+        // this mostly happens for gifs or webms as they are not copied correctly as a file
+        // and will always be transformed into a PNG
+        // in this case we will let other extensions handle the incoming html via their inputRules
+        if (htmlContent.length > 0) {
+          return false
+        }
+
+        return true
+      },
+    },
+  })
+}

package/src/fileHandler.ts

@@ -0,0 +1,25 @@
+import { Extension } from '@tiptap/core'
+import { PluginKey } from '@tiptap/pm/state'
+
+import { FileHandlePlugin } from './FileHandlePlugin.js'
+import { FileHandlerOptions } from './types.js'
+
+export const FileHandler = Extension.create<FileHandlerOptions>({
+  name: 'fileHandler',
+
+  addOptions() {
+    return {
+      onPaste: undefined,
+      onDrop: undefined,
+      allowedMimeTypes: undefined,
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      FileHandlePlugin({
+        key: new PluginKey(this.name), editor: this.editor, allowedMimeTypes: this.options.allowedMimeTypes, onDrop: this.options.onDrop, onPaste: this.options.onPaste,
+      }),
+    ]
+  },
+})

package/src/index.ts

@@ -0,0 +1,8 @@
+import { FileHandler } from './fileHandler.js'
+
+export * from './FileHandlePlugin.js'
+export * from './types.js'
+
+export { FileHandler }
+
+export default FileHandler

package/src/types.ts

@@ -0,0 +1,41 @@
+import { Editor } from '@tiptap/core'
+import { PluginKey } from '@tiptap/pm/state'
+
+export type FileHandlePluginOptions = {
+  /**
+   * The plugin key.
+   * @default 'fileHandler'
+   */
+  key?: PluginKey
+
+  /**
+   * The editor instance.
+   */
+  editor: Editor
+
+  /**
+   * An array of allowed mimetypes
+   *
+   * example: ['image/jpeg', 'image/png']
+   */
+  allowedMimeTypes?: string[]
+
+  /**
+   * The onPaste callback that is called when a file is pasted.
+   * @param editor the editor instance
+   * @param files the File array including File objects
+   * @param pasteContent the pasted content as HTML string - this is only available if there is also html copied to the clipboard for example by copying from a website
+   * @returns Returns nothing.
+   */
+  onPaste?: (editor: Editor, files: File[], pasteContent?: string) => void
+
+  /**
+   * The onDrop callback that is called when a file is dropped.
+   * @param editor the editor instance
+   * @param files the File array including File objects
+   * @returns Returns nothing.
+   */
+  onDrop?: (editor: Editor, files: File[], pos: number) => void
+}
+
+export type FileHandlerOptions = {} & Omit<FileHandlePluginOptions, 'key' | 'editor'>