@bigbinary/neeto-editor-frontend 2.3.0-beta1 → 2.3.1

package/dist/cjs/v2/Editor.cjs.js

@@ -5,28 +5,31 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var neetoAtoms = require('@bigbinary/neeto-atoms');
 var useEditorStore = require('../chunk-CxKWZyHq.cjs.js');
 var classnames = require('classnames');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
 var ReactDOM$1 = require('react-dom');
-var getVideoDimension = require('../chunk-Df33Mipq.cjs.js');
-var constants = require('../chunk-BxKa_XOs.cjs.js');
+var getVideoDimension = require('../chunk-DoDh8RsI.cjs.js');
+var constants = require('../chunk-DO6eyguX.cjs.js');
 var markdown = require('../chunk-C_XHzWXy.cjs.js');
-require('../chunk-CQ-j2kAX.cjs.js');
+require('../chunk-G_6vNGIP.cjs.js');
 var ramda = require('ramda');
 var ReactDOM = require('react-dom/server');
 var common = require('../chunk-CU6dMPZV.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-var v2_Menu = require('../chunk-CAaxrndK.cjs.js');
-var Megaphone = require('@bigbinary/neeto-icons/misc/Megaphone');
+var v2_Menu = require('../chunk-DOiH1lXw.cjs.js');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var index = require('../chunk-CJIIbW7G.cjs.js');
+var i18n = require('i18next');
+var reactFileIcon_esm = require('../chunk-BhQA4bH9.cjs.js');
+var v2_Attachments = require('../chunk-DnoebPXq.cjs.js');
+var FileIcon = require('../chunk-Crr-dv3q.cjs.js');
 var lucideReact = require('lucide-react');
-var CopyToClipboardButton = require('@bigbinary/neeto-molecules/v2/CopyToClipboardButton');
 var reactI18next = require('react-i18next');
-var i18n = require('i18next');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var Megaphone = require('@bigbinary/neeto-icons/misc/Megaphone');
+var CopyToClipboardButton = require('@bigbinary/neeto-molecules/v2/CopyToClipboardButton');
 require('@babel/runtime/helpers/readOnlyError');
 var tippy = require('tippy.js');
 var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
@@ -36,7 +39,6 @@ var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
 var _inherits = require('@babel/runtime/helpers/inherits');
 var emojiMart = require('emoji-mart');
 var initializers = require('@bigbinary/neeto-commons-frontend/v2/initializers');
-var reactFileIcon_esm = require('../chunk-Cr0FBhRs.cjs.js');
 var Tippy = require('@tippyjs/react');
 var TextP = require('@bigbinary/neeto-icons/TextP');
 var TextH1 = require('@bigbinary/neeto-icons/TextH1');
@@ -61,12 +63,10 @@ var Underline = require('@bigbinary/neeto-icons/Underline');
 var Link$1 = require('@bigbinary/neeto-icons/Link');
 var Attachment = require('@bigbinary/neeto-icons/Attachment');
 var MessageSquare = require('@bigbinary/neeto-icons/MessageSquare');
-var File = require('@bigbinary/neeto-icons/File');
-var FileIcon = require('../chunk-CfiRFXt2.cjs.js');
+var File$1 = require('@bigbinary/neeto-icons/File');
 var _typeof = require('@babel/runtime/helpers/typeof');
 var Search = require('@bigbinary/neeto-molecules/v2/Search');
 var formik = require('@bigbinary/neeto-atoms/formik');
-var v2_Attachments = require('../chunk-Ct6vCCZ0.cjs.js');
 require('axios');
 require('@bigbinary/neeto-commons-frontend/react-utils');
 require('zustand');
@@ -81,6 +81,7 @@ require('react-colorful');
 require('@bigbinary/neeto-image-uploader-frontend/v2/ImageUploader');
 require('zustand/shallow');
 require('@bigbinary/neeto-molecules/v2/DynamicVariables');
+require('@bigbinary/neeto-commons-frontend/v2/react-utils/useOnClickOutside');
 require('@bigbinary/neeto-icons/LeftAlign');
 require('@bigbinary/neeto-icons/CenterAlign');
 require('@bigbinary/neeto-icons/RightAlign');
@@ -93,7 +94,6 @@ require('@bigbinary/neeto-icons/AspectRatio169');
 require('@bigbinary/neeto-icons/AspectRatio916');
 require('@bigbinary/neeto-icons/AspectRatio43');
 require('@bigbinary/neeto-icons/AspectRatio32');
-require('@bigbinary/neeto-commons-frontend/v2/react-utils/useOnClickOutside');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -104,9 +104,9 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWith
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefault(_asyncToGenerator);
 var Megaphone__default = /*#__PURE__*/_interopDefault(Megaphone);
 var CopyToClipboardButton__default = /*#__PURE__*/_interopDefault(CopyToClipboardButton);
-var _asyncToGenerator__default = /*#__PURE__*/_interopDefault(_asyncToGenerator);
 var tippy__default = /*#__PURE__*/_interopDefault(tippy);
 var _classCallCheck__default = /*#__PURE__*/_interopDefault(_classCallCheck);
 var _createClass__default = /*#__PURE__*/_interopDefault(_createClass);
@@ -137,7 +137,7 @@ var Underline__default = /*#__PURE__*/_interopDefault(Underline);
 var Link__default = /*#__PURE__*/_interopDefault(Link$1);
 var Attachment__default = /*#__PURE__*/_interopDefault(Attachment);
 var MessageSquare__default = /*#__PURE__*/_interopDefault(MessageSquare);
-var File__default = /*#__PURE__*/_interopDefault(File);
+var File__default = /*#__PURE__*/_interopDefault(File$1);
 var _typeof__default = /*#__PURE__*/_interopDefault(_typeof);
 var Search__default = /*#__PURE__*/_interopDefault(Search);
 
@@ -196,6 +196,604 @@ var CharacterCountWrapper = function CharacterCountWrapper(_ref) {
   });
 };
 
+var NODE_NAME = "attachment";
+
+// Files larger than this are shown as a chip, never as an inline preview.
+var DEFAULT_INLINE_PREVIEW_MAX_SIZE = 20 * 1024 * 1024;
+var PDF_THUMBNAIL_WIDTH = 800;
+var PREVIEW_TYPES = {
+  IMAGE: "image",
+  VIDEO: "video",
+  PDF: "pdf"
+};
+var INLINE_PREVIEW_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/gif", "image/webp"];
+var PDF_CONTENT_TYPE = "application/pdf";
+
+var _excluded$5 = ["data"];
+function _regenerator$4() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2$4(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = false, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = true, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), true), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2$4(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2$4(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2$4(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2$4(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2$4(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2$4(u), _regeneratorDefine2$4(u, o, "Generator"), _regeneratorDefine2$4(u, n, function () { return this; }), _regeneratorDefine2$4(u, "toString", function () { return "[object Generator]"; }), (_regenerator$4 = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2$4(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2$4 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2$4(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2$4(e, r, n, t); }
+
+// pdf.js normally runs in a web worker loaded from a separate file, which a
+// host app bundling this package can't be relied on to serve. Exposing the
+// worker module on `globalThis.pdfjsWorker` makes pdf.js run it in-page.
+var loadPdfjs = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator__default.default(/*#__PURE__*/_regenerator$4().m(function _callee() {
+    var _globalThis$pdfjsWork;
+    var _yield$Promise$all, _yield$Promise$all2, pdfjs, worker;
+    return _regenerator$4().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          _context.n = 1;
+          return Promise.all([Promise.resolve().then(function () { return require('../chunk-BIjq_wPr.cjs.js'); }), Promise.resolve().then(function () { return require('../chunk-CvnWF5Pm.cjs.js'); })]);
+        case 1:
+          _yield$Promise$all = _context.v;
+          _yield$Promise$all2 = _slicedToArray__default.default(_yield$Promise$all, 2);
+          pdfjs = _yield$Promise$all2[0];
+          worker = _yield$Promise$all2[1];
+          (_globalThis$pdfjsWork = globalThis.pdfjsWorker) !== null && _globalThis$pdfjsWork !== void 0 ? _globalThis$pdfjsWork : globalThis.pdfjsWorker = worker;
+          return _context.a(2, pdfjs);
+      }
+    }, _callee);
+  }));
+  return function loadPdfjs() {
+    return _ref.apply(this, arguments);
+  };
+}();
+var canvasToBlob = function canvasToBlob(canvas) {
+  return new Promise(function (resolve) {
+    return canvas.toBlob(resolve, "image/png");
+  });
+};
+var getPreviewType = function getPreviewType(_ref2, maxSize) {
+  var contentType = _ref2.contentType,
+    size = _ref2.size,
+    thumbnailUrl = _ref2.thumbnailUrl;
+  if (!contentType || neetoCist.isPresent(size) && Number(size) > maxSize) return null;
+  if (INLINE_PREVIEW_IMAGE_TYPES.includes(contentType)) {
+    return PREVIEW_TYPES.IMAGE;
+  }
+  if (contentType.startsWith("video/")) return PREVIEW_TYPES.VIDEO;
+  if (contentType === PDF_CONTENT_TYPE && neetoCist.isPresent(thumbnailUrl)) {
+    return PREVIEW_TYPES.PDF;
+  }
+  return null;
+};
+var getPreviewSrc = function getPreviewSrc(_ref3, previewType) {
+  var url = _ref3.url,
+    thumbnailUrl = _ref3.thumbnailUrl;
+  return previewType === PREVIEW_TYPES.PDF ? thumbnailUrl : url;
+};
+var uploadFile = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator__default.default(/*#__PURE__*/_regenerator$4().m(function _callee2(file, endpoint) {
+    var _data$blob_url, _data$signed_id;
+    var _yield$DirectUpload$c, _yield$DirectUpload$c2, data, response;
+    return _regenerator$4().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          _context2.n = 1;
+          return new reactFileIcon_esm.DirectUpload({
+            file: file,
+            url: endpoint
+          }).create();
+        case 1:
+          _yield$DirectUpload$c = _context2.v;
+          _yield$DirectUpload$c2 = _yield$DirectUpload$c.data;
+          data = _yield$DirectUpload$c2 === void 0 ? {} : _yield$DirectUpload$c2;
+          response = _objectWithoutProperties__default.default(_yield$DirectUpload$c, _excluded$5);
+          return _context2.a(2, {
+            url: (_data$blob_url = data.blob_url) !== null && _data$blob_url !== void 0 ? _data$blob_url : response.blob_url,
+            signedId: (_data$signed_id = data.signed_id) !== null && _data$signed_id !== void 0 ? _data$signed_id : response.signed_id
+          });
+      }
+    }, _callee2);
+  }));
+  return function uploadFile(_x, _x2) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+var generatePdfThumbnail = /*#__PURE__*/function () {
+  var _ref5 = _asyncToGenerator__default.default(/*#__PURE__*/_regenerator$4().m(function _callee3(file) {
+    var pdfjs, pdf, page, _page$getViewport, width, viewport, canvas, blob, name, _t, _t2;
+    return _regenerator$4().w(function (_context3) {
+      while (1) switch (_context3.p = _context3.n) {
+        case 0:
+          _context3.n = 1;
+          return loadPdfjs();
+        case 1:
+          pdfjs = _context3.v;
+          _t = pdfjs;
+          _context3.n = 2;
+          return file.arrayBuffer();
+        case 2:
+          _t2 = _context3.v;
+          _context3.n = 3;
+          return _t.getDocument.call(_t, {
+            data: _t2
+          }).promise;
+        case 3:
+          pdf = _context3.v;
+          _context3.p = 4;
+          _context3.n = 5;
+          return pdf.getPage(1);
+        case 5:
+          page = _context3.v;
+          _page$getViewport = page.getViewport({
+            scale: 1
+          }), width = _page$getViewport.width;
+          viewport = page.getViewport({
+            scale: PDF_THUMBNAIL_WIDTH / width
+          });
+          canvas = document.createElement("canvas");
+          canvas.width = viewport.width;
+          canvas.height = viewport.height;
+          _context3.n = 6;
+          return page.render({
+            canvasContext: canvas.getContext("2d"),
+            viewport: viewport
+          }).promise;
+        case 6:
+          _context3.n = 7;
+          return canvasToBlob(canvas);
+        case 7:
+          blob = _context3.v;
+          if (blob) {
+            _context3.n = 8;
+            break;
+          }
+          return _context3.a(2, null);
+        case 8:
+          name = "".concat(file.name.replace(/\.pdf$/i, ""), "-preview.png");
+          return _context3.a(2, new File([blob], name, {
+            type: "image/png"
+          }));
+        case 9:
+          _context3.p = 9;
+          pdf.destroy();
+          return _context3.f(9);
+        case 10:
+          return _context3.a(2);
+      }
+    }, _callee3, null, [[4,, 9, 10]]);
+  }));
+  return function generatePdfThumbnail(_x3) {
+    return _ref5.apply(this, arguments);
+  };
+}();
+var findNodePosByUploadId = function findNodePosByUploadId(doc, uploadId) {
+  var foundPos = -1;
+  doc.descendants(function (node, pos) {
+    var _node$attrs;
+    if (foundPos !== -1) return false;
+    if (((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.uploadId) === uploadId) foundPos = pos;
+    return foundPos === -1;
+  });
+  return foundPos;
+};
+var countAttachmentNodes = function countAttachmentNodes(doc, nodeName) {
+  var count = 0;
+  doc.descendants(function (node) {
+    if (node.type.name === nodeName) count += 1;
+  });
+  return count;
+};
+
+var Preview = /*#__PURE__*/React.lazy(function () {
+  return Promise.resolve().then(function () { return require('../chunk-CE1t-vbx.cjs.js'); });
+});
+var AttachmentComponent = function AttachmentComponent(_ref) {
+  var node = _ref.node,
+    extension = _ref.extension,
+    editor = _ref.editor,
+    deleteNode = _ref.deleteNode;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    isPreviewOpen = _useState2[0],
+    setIsPreviewOpen = _useState2[1];
+  var _node$attrs = node.attrs,
+    url = _node$attrs.url,
+    filename = _node$attrs.filename,
+    contentType = _node$attrs.contentType,
+    size = _node$attrs.size,
+    signedId = _node$attrs.signedId,
+    uploadId = _node$attrs.uploadId;
+  var attachment = {
+    url: url,
+    filename: filename,
+    contentType: contentType,
+    size: size,
+    signedId: signedId
+  };
+  var previewType = getPreviewType(node.attrs, extension.options.previewMaxSize);
+  var previewSrc = getPreviewSrc(node.attrs, previewType);
+  var canView = v2_Attachments.checkPreviewAvailability(contentType);
+  var actions = [canView && {
+    key: "view",
+    icon: lucideReact.Eye,
+    label: t("neetoEditor.attachments.view"),
+    onClick: function onClick() {
+      return setIsPreviewOpen(true);
+    }
+  }, {
+    key: "download",
+    icon: lucideReact.Download,
+    label: t("neetoEditor.common.download"),
+    onClick: function onClick() {
+      return v2_Attachments.downloadFile(url, filename);
+    }
+  }, {
+    key: "open",
+    icon: lucideReact.ExternalLink,
+    label: t("neetoEditor.common.openInNewTab"),
+    onClick: function onClick() {
+      return window.open(url, "_blank", "noopener,noreferrer");
+    }
+  }, editor.isEditable && {
+    key: "delete",
+    icon: lucideReact.Trash2,
+    label: t("neetoEditor.menu.delete"),
+    onClick: deleteNode
+  }].filter(Boolean);
+  if (uploadId) {
+    return /*#__PURE__*/jsxRuntime.jsx(useEditorStore.NodeViewWrapper, {
+      className: "neeto-editor__attachment neeto-editor__attachment--uploading",
+      "data-testid": "neeto-editor-attachment-uploading",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-editor__attachment-file",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "neeto-editor__attachment-name",
+          children: filename
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "neeto-editor__attachment-size",
+          children: t("neetoEditor.attachments.uploading")
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(useEditorStore.NodeViewWrapper, {
+    "data-drag-handle": true,
+    className: "neeto-editor__attachment",
+    "data-testid": "neeto-editor-attachment",
+    children: [previewType && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-editor__attachment-preview",
+      onClick: previewType === PREVIEW_TYPES.VIDEO ? neetoCist.noop : function () {
+        return setIsPreviewOpen(true);
+      },
+      children: previewType === PREVIEW_TYPES.VIDEO ? /*#__PURE__*/jsxRuntime.jsx("video", {
+        controls: true,
+        playsInline: true,
+        preload: "metadata",
+        src: previewSrc
+      }) : /*#__PURE__*/jsxRuntime.jsx("img", {
+        alt: filename,
+        draggable: false,
+        src: previewSrc
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor__attachment-file",
+      children: [/*#__PURE__*/jsxRuntime.jsx(FileIcon.File, {
+        className: "neeto-editor__attachment-icon",
+        fileName: filename
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "neeto-editor__attachment-name",
+        children: filename
+      }), size && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "neeto-editor__attachment-size",
+        children: FileIcon.convertToFileSize(Number(size))
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-editor__attachment-actions",
+        children: actions.map(function (_ref2) {
+          var key = _ref2.key,
+            icon = _ref2.icon,
+            label = _ref2.label,
+            onClick = _ref2.onClick;
+          return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
+            content: label,
+            position: "top",
+            children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+              icon: icon,
+              onClick: onClick,
+              "aria-label": label,
+              "data-testid": "neeto-editor-attachment-".concat(key, "-button"),
+              size: "sm",
+              variant: "ghost"
+            })
+          }, key);
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
+      fallback: /*#__PURE__*/jsxRuntime.jsx("span", {}),
+      children: isPreviewOpen && /*#__PURE__*/jsxRuntime.jsx(Preview, {
+        attachments: [attachment],
+        selectedAttachment: attachment,
+        setDidFetchPreviewBundle: neetoCist.noop,
+        setSelectedAttachment: neetoCist.noop,
+        onClose: function onClose() {
+          return setIsPreviewOpen(false);
+        }
+      })
+    })]
+  });
+};
+
+function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _regenerator$3() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2$3(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = false, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = true, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), true), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2$3(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2$3(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2$3(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2$3(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2$3(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2$3(u), _regeneratorDefine2$3(u, o, "Generator"), _regeneratorDefine2$3(u, n, function () { return this; }), _regeneratorDefine2$3(u, "toString", function () { return "[object Generator]"; }), (_regenerator$3 = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2$3(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2$3 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2$3(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2$3(e, r, n, t); }
+var dataAttribute = function dataAttribute(name, attribute) {
+  return {
+    "default": null,
+    parseHTML: function parseHTML(element) {
+      return element.getAttribute(attribute);
+    },
+    renderHTML: function renderHTML(attributes) {
+      return attributes[name] ? _defineProperty__default.default({}, attribute, attributes[name]) : {};
+    }
+  };
+};
+var uploadThumbnail = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator__default.default(/*#__PURE__*/_regenerator$3().m(function _callee(file, endpoint) {
+    var thumbnail, _t, _t2;
+    return _regenerator$3().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          _context.p = 0;
+          _context.n = 1;
+          return generatePdfThumbnail(file);
+        case 1:
+          thumbnail = _context.v;
+          if (!thumbnail) {
+            _context.n = 3;
+            break;
+          }
+          _context.n = 2;
+          return uploadFile(thumbnail, endpoint);
+        case 2:
+          _t = _context.v.url;
+          _context.n = 4;
+          break;
+        case 3:
+          _t = null;
+        case 4:
+          return _context.a(2, _t);
+        case 5:
+          _context.p = 5;
+          _t2 = _context.v;
+          // A missing thumbnail only means the PDF is shown as a chip.
+          // eslint-disable-next-line no-console
+          console.error("Failed to generate the PDF thumbnail", _t2);
+          return _context.a(2, null);
+      }
+    }, _callee, null, [[0, 5]]);
+  }));
+  return function uploadThumbnail(_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var AttachmentExtension = useEditorStore.Node.create({
+  name: NODE_NAME,
+  group: "block",
+  atom: true,
+  draggable: true,
+  selectable: true,
+  addOptions: function addOptions() {
+    return {
+      config: {},
+      previewMaxSize: DEFAULT_INLINE_PREVIEW_MAX_SIZE,
+      getExternalAttachmentsCount: function getExternalAttachmentsCount() {
+        return 0;
+      },
+      setIsUploading: function setIsUploading() {}
+    };
+  },
+  addStorage: function addStorage() {
+    return {
+      pendingUploadsCount: 0
+    };
+  },
+  addAttributes: function addAttributes() {
+    return {
+      url: dataAttribute("url", "data-url"),
+      filename: dataAttribute("filename", "data-filename"),
+      contentType: dataAttribute("contentType", "data-content-type"),
+      size: dataAttribute("size", "data-size"),
+      signedId: dataAttribute("signedId", "data-signed-id"),
+      thumbnailUrl: dataAttribute("thumbnailUrl", "data-thumbnail-url"),
+      uploadId: {
+        "default": null,
+        rendered: false
+      }
+    };
+  },
+  parseHTML: function parseHTML() {
+    return [{
+      tag: "div[data-attachment]"
+    }];
+  },
+  renderHTML: function renderHTML(_ref3) {
+    var node = _ref3.node,
+      HTMLAttributes = _ref3.HTMLAttributes;
+    var _node$attrs = node.attrs,
+      url = _node$attrs.url,
+      filename = _node$attrs.filename,
+      size = _node$attrs.size;
+
+    // Still uploading: leave nothing behind in the saved HTML.
+    if (!url) return ["span"];
+    var previewType = getPreviewType(node.attrs, this.options.previewMaxSize);
+    var linkAttrs = {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    };
+    var previewSrc = getPreviewSrc(node.attrs, previewType);
+    var preview = previewType === PREVIEW_TYPES.VIDEO ? ["video", {
+      src: previewSrc,
+      controls: true,
+      playsinline: true,
+      preload: "metadata"
+    }] : ["a", linkAttrs, ["img", {
+      src: previewSrc,
+      alt: filename,
+      loading: "lazy"
+    }]];
+    var file = ["a", _objectSpread$j(_objectSpread$j({}, linkAttrs), {}, {
+      "class": "neeto-editor__attachment-file"
+    }), ["span", {
+      "class": "neeto-editor__attachment-name"
+    }, filename]].concat(_toConsumableArray__default.default(size ? [["span", {
+      "class": "neeto-editor__attachment-size"
+    }, FileIcon.convertToFileSize(Number(size))]] : []));
+    return ["div", _objectSpread$j(_objectSpread$j({}, HTMLAttributes), {}, {
+      "data-attachment": "",
+      "class": "neeto-editor__attachment"
+    })].concat(_toConsumableArray__default.default(previewType ? [["div", {
+      "class": "neeto-editor__attachment-preview"
+    }, preview]] : []), [file]);
+  },
+  addNodeView: function addNodeView() {
+    return useEditorStore.ReactNodeViewRenderer(AttachmentComponent);
+  },
+  addCommands: function addCommands() {
+    var _this = this;
+    return {
+      uploadAttachments: function uploadAttachments(files, position) {
+        return function (_ref4) {
+          var editor = _ref4.editor;
+          _this.storage.uploadFiles(editor, Array.from(files), position);
+          return true;
+        };
+      }
+    };
+  },
+  onCreate: function onCreate() {
+    var options = this.options,
+      storage = this.storage;
+    var config = v2_Attachments.buildFileUploadConfig(options.config);
+    var endpoint = config.directUploadEndpoint;
+    var updateUploadingState = function updateUploadingState(delta) {
+      storage.pendingUploadsCount += delta;
+      options.setIsUploading(storage.pendingUploadsCount > 0);
+    };
+    var replacePlaceholder = function replacePlaceholder(editor, uploadId, attrs) {
+      if (editor.isDestroyed) return;
+      var state = editor.state,
+        view = editor.view;
+      var pos = findNodePosByUploadId(state.doc, uploadId);
+      if (pos === -1) return; // Removed by the user while uploading.
+
+      var node = state.doc.nodeAt(pos);
+      var tr = attrs ? state.tr.setNodeMarkup(pos, undefined, _objectSpread$j(_objectSpread$j({}, node.attrs), attrs)) : state.tr["delete"](pos, pos + node.nodeSize);
+      view.dispatch(tr.setMeta("addToHistory", false));
+    };
+    var uploadPlaceholder = /*#__PURE__*/function () {
+      var _ref6 = _asyncToGenerator__default.default(/*#__PURE__*/_regenerator$3().m(function _callee2(editor, _ref5) {
+        var file, uploadId, shouldGenerateThumbnail, _yield$Promise$all, _yield$Promise$all2, uploaded, thumbnailUrl, _t3;
+        return _regenerator$3().w(function (_context2) {
+          while (1) switch (_context2.p = _context2.n) {
+            case 0:
+              file = _ref5.file, uploadId = _ref5.uploadId;
+              _context2.p = 1;
+              shouldGenerateThumbnail = file.type === PDF_CONTENT_TYPE && file.size <= options.previewMaxSize;
+              _context2.n = 2;
+              return Promise.all([uploadFile(file, endpoint), shouldGenerateThumbnail ? uploadThumbnail(file, endpoint) : null]);
+            case 2:
+              _yield$Promise$all = _context2.v;
+              _yield$Promise$all2 = _slicedToArray__default.default(_yield$Promise$all, 2);
+              uploaded = _yield$Promise$all2[0];
+              thumbnailUrl = _yield$Promise$all2[1];
+              replacePlaceholder(editor, uploadId, _objectSpread$j(_objectSpread$j({}, uploaded), {}, {
+                thumbnailUrl: thumbnailUrl,
+                uploadId: null
+              }));
+              _context2.n = 4;
+              break;
+            case 3:
+              _context2.p = 3;
+              _t3 = _context2.v;
+              // eslint-disable-next-line no-console
+              console.error("Attachment upload failed", _t3);
+              replacePlaceholder(editor, uploadId, null);
+              neetoAtoms.Toastr.error(i18n.t("neetoEditor.error.uploadFileFailed"));
+            case 4:
+              _context2.p = 4;
+              updateUploadingState(-1);
+              return _context2.f(4);
+            case 5:
+              return _context2.a(2);
+          }
+        }, _callee2, null, [[1, 3, 4, 5]]);
+      }));
+      return function uploadPlaceholder(_x3, _x4) {
+        return _ref6.apply(this, arguments);
+      };
+    }();
+    storage.uploadFiles = function (editor, files, position) {
+      var selectedFiles = FileIcon.selectFiles({
+        previousAttachmentsCount: countAttachmentNodes(editor.state.doc, NODE_NAME) + options.getExternalAttachmentsCount(),
+        config: config,
+        files: files
+      });
+      if (ramda.isEmpty(selectedFiles)) return;
+      var placeholders = selectedFiles.map(function (file) {
+        return {
+          file: file,
+          uploadId: reactFileIcon_esm.getRandomString()
+        };
+      });
+      var nodes = placeholders.map(function (_ref7) {
+        var file = _ref7.file,
+          uploadId = _ref7.uploadId;
+        return {
+          type: NODE_NAME,
+          attrs: {
+            uploadId: uploadId,
+            filename: file.name,
+            contentType: file.type,
+            size: file.size
+          }
+        };
+      });
+      editor.chain().focus().insertContentAt(position !== null && position !== void 0 ? position : editor.state.selection, nodes).run();
+      updateUploadingState(placeholders.length);
+      placeholders.forEach(function (placeholder) {
+        return uploadPlaceholder(editor, placeholder);
+      });
+    };
+  },
+  addProseMirrorPlugins: function addProseMirrorPlugins() {
+    var editor = this.editor,
+      storage = this.storage;
+    return [new index.Plugin({
+      props: {
+        handleDrop: function handleDrop(view, event, _slice, moved) {
+          var _event$dataTransfer$f, _event$dataTransfer;
+          var files = Array.from((_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : []);
+          if (moved || ramda.isEmpty(files)) return false;
+          var coordinates = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY
+          });
+          event.preventDefault();
+          storage.uploadFiles(editor, files, coordinates === null || coordinates === void 0 ? void 0 : coordinates.pos);
+          return true;
+        },
+        // Pasted images are handled by the image extension.
+        handlePaste: function handlePaste(_view, event) {
+          var _event$clipboardData$, _event$clipboardData;
+          var files = Array.from((_event$clipboardData$ = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.files) !== null && _event$clipboardData$ !== void 0 ? _event$clipboardData$ : []).filter(function (file) {
+            return !/image/i.test(file.type);
+          });
+          if (ramda.isEmpty(files)) return false;
+          storage.uploadFiles(editor, files);
+          return true;
+        }
+      }
+    })];
+  }
+});
+
 var HighlightInternal = useEditorStore.Extension.create({
   name: "HighlightInternal",
   addOptions: function addOptions() {
@@ -4898,7 +5496,8 @@ var useCustomExtensions = function useCustomExtensions(_ref) {
     collaborationProvider = _ref.collaborationProvider,
     setIsNeetoKbArticleActive = _ref.setIsNeetoKbArticleActive,
     containerRef = _ref.containerRef,
-    appendSuggestionsToBody = _ref.appendSuggestionsToBody;
+    appendSuggestionsToBody = _ref.appendSuggestionsToBody,
+    inlineAttachmentsOptions = _ref.inlineAttachmentsOptions;
   var customExtensions = [EditorContainer.configure({
     containerRef: containerRef,
     appendSuggestionsToBody: appendSuggestionsToBody
@@ -4945,6 +5544,9 @@ var useCustomExtensions = function useCustomExtensions(_ref) {
   if (options.includes(constants.EDITOR_OPTIONS.VIDEO_UPLOAD)) {
     customExtensions.push(UnifiedVideoExtension);
   }
+  if (options.includes(constants.EDITOR_OPTIONS.INLINE_ATTACHMENTS)) {
+    customExtensions.push(AttachmentExtension.configure(inlineAttachmentsOptions));
+  }
   if (options.includes(constants.EDITOR_OPTIONS.NEETO_KB_ARTICLE)) {
     customExtensions.push(DeletedArticleDecoration.configure({
       deletedArticleIds: new Set()
@@ -6039,7 +6641,7 @@ var _excluded = ["addonCommands", "addons", "attachments", "attachmentsConfig",
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Editor$1 = function Editor(_ref, ref) {
-  var _wrapperRef$current;
+  var _attachmentsConfig$re, _attachmentsConfig$re2, _wrapperRef$current;
   var _ref$addonCommands = _ref.addonCommands,
     addonCommands = _ref$addonCommands === void 0 ? [] : _ref$addonCommands,
     _ref$addons = _ref.addons,
@@ -6128,6 +6730,10 @@ var Editor$1 = function Editor(_ref, ref) {
   var wrapperRef = React.useRef(null);
   var isArticleOptActive = addons.includes(constants.EDITOR_OPTIONS.NEETO_KB_ARTICLE);
   var isAttachmentsActive = addons.includes(constants.EDITOR_OPTIONS.ATTACHMENTS);
+  var isInlineAttachmentsActive = addons.includes(constants.EDITOR_OPTIONS.INLINE_ATTACHMENTS);
+
+  // Inline attachments reuse the attachments toolbar button and slash command.
+  var menuAddons = isInlineAttachmentsActive && !isAttachmentsActive ? [].concat(_toConsumableArray__default.default(addons), [constants.EDITOR_OPTIONS.ATTACHMENTS]) : addons;
   var isMediaUploaderActive = addons.includes(constants.EDITOR_OPTIONS.IMAGE_UPLOAD) || addons.includes(constants.EDITOR_OPTIONS.VIDEO_UPLOAD);
   var isFixedMenuActive = menuType === "fixed";
   var isBubbleMenuActive = menuType === "bubble";
@@ -6154,13 +6760,23 @@ var Editor$1 = function Editor(_ref, ref) {
     neetoKbArticleState = _useState8[0],
     setNeetoKbArticleState = _useState8[1];
   var addAttachmentsRef = React.useRef(null);
+  var inlineAttachmentInputRef = React.useRef(null);
+  var attachmentsCountRef = React.useRef(attachments.length);
+  attachmentsCountRef.current = attachments.length;
   var attachmentProps = {
     handleUploadAttachments: function handleUploadAttachments() {
-      var _addAttachmentsRef$cu;
-      return (_addAttachmentsRef$cu = addAttachmentsRef.current) === null || _addAttachmentsRef$cu === void 0 ? void 0 : _addAttachmentsRef$cu.handleUploadAttachments();
+      var _inlineAttachmentInpu, _addAttachmentsRef$cu;
+      return isInlineAttachmentsActive ? (_inlineAttachmentInpu = inlineAttachmentInputRef.current) === null || _inlineAttachmentInpu === void 0 ? void 0 : _inlineAttachmentInpu.click() : (_addAttachmentsRef$cu = addAttachmentsRef.current) === null || _addAttachmentsRef$cu === void 0 ? void 0 : _addAttachmentsRef$cu.handleUploadAttachments();
     },
     isDisabled: isAttachmentsUploading
   };
+  var inlineAttachmentsOptions = {
+    config: attachmentsConfig,
+    getExternalAttachmentsCount: function getExternalAttachmentsCount() {
+      return attachmentsCountRef.current;
+    },
+    setIsUploading: setIsAttachmentsUploading
+  };
   var debouncedOnChangeHandler = reactUtils.useFuncDebounce(function (_ref2) {
     var editor = _ref2.editor;
     if (!editor.isDestroyed) onChange(editor.getHTML());
@@ -6183,7 +6799,7 @@ var Editor$1 = function Editor(_ref, ref) {
     mentions: mentions,
     variables: variables,
     isSlashCommandsActive: isSlashCommandsActive,
-    options: [].concat(_toConsumableArray__default.default(defaults), _toConsumableArray__default.default(addons)),
+    options: [].concat(_toConsumableArray__default.default(defaults), _toConsumableArray__default.default(menuAddons)),
     addonCommands: addonCommands,
     onSubmit: onSubmit,
     keyboardShortcuts: keyboardShortcuts,
@@ -6196,7 +6812,8 @@ var Editor$1 = function Editor(_ref, ref) {
     collaborationProvider: collaborationProvider,
     setIsNeetoKbArticleActive: setNeetoKbArticleState,
     containerRef: wrapperRef,
-    appendSuggestionsToBody: appendSuggestionsToBody
+    appendSuggestionsToBody: appendSuggestionsToBody,
+    inlineAttachmentsOptions: inlineAttachmentsOptions
   });
   getVideoDimension.useEditorWarnings({
     initialValue: initialValue
@@ -6281,6 +6898,10 @@ var Editor$1 = function Editor(_ref, ref) {
     if (!editor || !deletedArticlesHook.deletedArticleIds.size) return;
     editor.commands.updateDeletedArticles(deletedArticlesHook.deletedArticleIds);
   }, [editor, deletedArticlesHook.deletedArticleIds]);
+  var handleInlineAttachmentsChange = function handleInlineAttachmentsChange(event) {
+    editor === null || editor === void 0 || editor.commands.uploadAttachments(event.target.files);
+    event.target.value = null;
+  };
   useEditorStore.EditorView.prototype.updateState = function updateState(state) {
     if (!this.docView) return;
     this.updateStateInner(state, this.state.plugins !== state.plugins);
@@ -6300,7 +6921,6 @@ var Editor$1 = function Editor(_ref, ref) {
       children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [menuType !== "none" && /*#__PURE__*/jsxRuntime.jsx(v2_Menu.Menu, {
           addonCommands: addonCommands,
-          addons: addons,
           attachmentProps: attachmentProps,
           defaults: defaults,
           editor: editor,
@@ -6312,6 +6932,7 @@ var Editor$1 = function Editor(_ref, ref) {
           showAssetLibrary: showAssetLibrary,
           tooltips: tooltips,
           variables: variables,
+          addons: menuAddons,
           className: menuClassName,
           containerRef: wrapperRef,
           isIndependant: isMenuIndependent,
@@ -6337,10 +6958,18 @@ var Editor$1 = function Editor(_ref, ref) {
               video: false
             });
           }
-        }), isAttachmentsActive && /*#__PURE__*/jsxRuntime.jsx(v2_Attachments.Attachments, _objectSpread({
+        }), isInlineAttachmentsActive && /*#__PURE__*/jsxRuntime.jsx("input", {
+          hidden: true,
+          "data-testid": "neeto-editor-inline-attachments-input",
+          multiple: ((_attachmentsConfig$re = attachmentsConfig.restrictions) === null || _attachmentsConfig$re === void 0 ? void 0 : _attachmentsConfig$re.maxNumberOfFiles) !== 1,
+          ref: inlineAttachmentInputRef,
+          type: "file",
+          accept: (_attachmentsConfig$re2 = attachmentsConfig.restrictions) === null || _attachmentsConfig$re2 === void 0 || (_attachmentsConfig$re2 = _attachmentsConfig$re2.allowedFileTypes) === null || _attachmentsConfig$re2 === void 0 ? void 0 : _attachmentsConfig$re2.join(","),
+          onChange: handleInlineAttachmentsChange
+        }), isAttachmentsActive && (!isInlineAttachmentsActive || neetoCist.isNotEmpty(attachments)) && /*#__PURE__*/jsxRuntime.jsx(v2_Attachments.Attachments, _objectSpread({
           attachments: attachments,
           config: attachmentsConfig,
-          dragDropRef: wrapperRef,
+          dragDropRef: isInlineAttachmentsActive ? null : wrapperRef,
           isIndependent: false,
           ref: addAttachmentsRef,
           setIsUploading: setIsAttachmentsUploading,