@ctzhian/tiptap 2.12.6 → 2.12.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/extension/node/FileHandler.js +61 -51
- package/dist/extension/node/Image.js +204 -100
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ export var FileHandlerExtension = function FileHandlerExtension(props) {
|
|
|
9
9
|
return FileHandler.configure({
|
|
10
10
|
onDrop: function () {
|
|
11
11
|
var _onDrop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(editor, files, pos) {
|
|
12
|
-
var findNodePosition, _loop, i;
|
|
12
|
+
var findNodePosition, baseTime, content, _loop, i;
|
|
13
13
|
return _regeneratorRuntime().wrap(function _callee$(_context2) {
|
|
14
14
|
while (1) switch (_context2.prev = _context2.next) {
|
|
15
15
|
case 0:
|
|
@@ -30,29 +30,39 @@ export var FileHandlerExtension = function FileHandlerExtension(props) {
|
|
|
30
30
|
});
|
|
31
31
|
return targetPos;
|
|
32
32
|
};
|
|
33
|
+
baseTime = Date.now();
|
|
34
|
+
content = files.map(function (file, i) {
|
|
35
|
+
var fileType = getFileType(file);
|
|
36
|
+
var tempId = "upload-".concat(baseTime, "-").concat(i);
|
|
37
|
+
var isImage = fileType === 'image';
|
|
38
|
+
var progressNode = {
|
|
39
|
+
type: isImage ? 'inlineUploadProgress' : 'uploadProgress',
|
|
40
|
+
attrs: {
|
|
41
|
+
fileName: file.name,
|
|
42
|
+
fileType: fileType,
|
|
43
|
+
progress: 0,
|
|
44
|
+
tempId: tempId
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
return isImage ? {
|
|
48
|
+
type: 'paragraph',
|
|
49
|
+
content: [progressNode]
|
|
50
|
+
} : progressNode;
|
|
51
|
+
});
|
|
52
|
+
editor.chain().insertContentAt(pos, content).focus().run();
|
|
33
53
|
_loop = /*#__PURE__*/_regeneratorRuntime().mark(function _loop() {
|
|
34
|
-
var file, fileType, tempId,
|
|
54
|
+
var file, fileType, tempId, isImage, progressNodeType, progressPos, url, chain, dimensions, fallbackChain, _progressPos, _chain;
|
|
35
55
|
return _regeneratorRuntime().wrap(function _loop$(_context) {
|
|
36
56
|
while (1) switch (_context.prev = _context.next) {
|
|
37
57
|
case 0:
|
|
38
58
|
file = files[i];
|
|
39
59
|
fileType = getFileType(file);
|
|
40
|
-
tempId = "upload-".concat(
|
|
41
|
-
insertPosition = pos + i;
|
|
60
|
+
tempId = "upload-".concat(baseTime, "-").concat(i);
|
|
42
61
|
isImage = fileType === 'image';
|
|
43
62
|
progressNodeType = isImage ? 'inlineUploadProgress' : 'uploadProgress';
|
|
44
|
-
_context.prev =
|
|
45
|
-
editor.chain().insertContentAt(insertPosition, {
|
|
46
|
-
type: progressNodeType,
|
|
47
|
-
attrs: {
|
|
48
|
-
fileName: file.name,
|
|
49
|
-
fileType: fileType,
|
|
50
|
-
progress: 0,
|
|
51
|
-
tempId: tempId
|
|
52
|
-
}
|
|
53
|
-
}).focus().run();
|
|
63
|
+
_context.prev = 5;
|
|
54
64
|
progressPos = findNodePosition(progressNodeType, tempId);
|
|
55
|
-
_context.next =
|
|
65
|
+
_context.next = 9;
|
|
56
66
|
return props.onUpload(file, function (progressEvent) {
|
|
57
67
|
var progressValue = progressEvent.progress;
|
|
58
68
|
if (isImage) {
|
|
@@ -61,7 +71,7 @@ export var FileHandlerExtension = function FileHandlerExtension(props) {
|
|
|
61
71
|
editor.chain().updateUploadProgress(tempId, progressValue).focus().run();
|
|
62
72
|
}
|
|
63
73
|
});
|
|
64
|
-
case
|
|
74
|
+
case 9:
|
|
65
75
|
url = _context.sent;
|
|
66
76
|
if (isImage) {
|
|
67
77
|
editor.chain().removeInlineUploadProgress(tempId).focus().run();
|
|
@@ -73,23 +83,23 @@ export var FileHandlerExtension = function FileHandlerExtension(props) {
|
|
|
73
83
|
chain.setTextSelection(progressPos);
|
|
74
84
|
}
|
|
75
85
|
_context.t0 = fileType;
|
|
76
|
-
_context.next = _context.t0 === 'image' ?
|
|
86
|
+
_context.next = _context.t0 === 'image' ? 16 : _context.t0 === 'video' ? 29 : 31;
|
|
77
87
|
break;
|
|
78
|
-
case
|
|
79
|
-
_context.prev =
|
|
80
|
-
_context.next =
|
|
88
|
+
case 16:
|
|
89
|
+
_context.prev = 16;
|
|
90
|
+
_context.next = 19;
|
|
81
91
|
return getImageDimensionsFromFile(file);
|
|
82
|
-
case
|
|
92
|
+
case 19:
|
|
83
93
|
dimensions = _context.sent;
|
|
84
94
|
chain.setImage({
|
|
85
95
|
src: url,
|
|
86
96
|
width: Math.min(dimensions.width, 760)
|
|
87
97
|
}).run();
|
|
88
|
-
_context.next =
|
|
98
|
+
_context.next = 28;
|
|
89
99
|
break;
|
|
90
|
-
case
|
|
91
|
-
_context.prev =
|
|
92
|
-
_context.t1 = _context["catch"](
|
|
100
|
+
case 23:
|
|
101
|
+
_context.prev = 23;
|
|
102
|
+
_context.t1 = _context["catch"](16);
|
|
93
103
|
fallbackChain = editor.chain().focus();
|
|
94
104
|
if (progressPos !== null) {
|
|
95
105
|
fallbackChain.setTextSelection(progressPos);
|
|
@@ -98,29 +108,29 @@ export var FileHandlerExtension = function FileHandlerExtension(props) {
|
|
|
98
108
|
src: url,
|
|
99
109
|
width: 760
|
|
100
110
|
}).run();
|
|
101
|
-
case
|
|
102
|
-
return _context.abrupt("break",
|
|
103
|
-
case
|
|
111
|
+
case 28:
|
|
112
|
+
return _context.abrupt("break", 33);
|
|
113
|
+
case 29:
|
|
104
114
|
chain.setVideo({
|
|
105
115
|
src: url,
|
|
106
116
|
width: 760,
|
|
107
117
|
controls: true,
|
|
108
118
|
autoplay: false
|
|
109
119
|
}).run();
|
|
110
|
-
return _context.abrupt("break",
|
|
111
|
-
case
|
|
120
|
+
return _context.abrupt("break", 33);
|
|
121
|
+
case 31:
|
|
112
122
|
chain.setBlockAttachment({
|
|
113
123
|
url: url,
|
|
114
124
|
title: file.name,
|
|
115
125
|
size: formatFileSize(file.size)
|
|
116
126
|
}).run();
|
|
117
|
-
return _context.abrupt("break",
|
|
118
|
-
case
|
|
119
|
-
_context.next =
|
|
127
|
+
return _context.abrupt("break", 33);
|
|
128
|
+
case 33:
|
|
129
|
+
_context.next = 51;
|
|
120
130
|
break;
|
|
121
|
-
case
|
|
122
|
-
_context.prev =
|
|
123
|
-
_context.t2 = _context["catch"](
|
|
131
|
+
case 35:
|
|
132
|
+
_context.prev = 35;
|
|
133
|
+
_context.t2 = _context["catch"](5);
|
|
124
134
|
console.error('文件上传失败:', _context.t2);
|
|
125
135
|
if (isImage) {
|
|
126
136
|
editor.chain().removeInlineUploadProgress(tempId).focus().run();
|
|
@@ -133,47 +143,47 @@ export var FileHandlerExtension = function FileHandlerExtension(props) {
|
|
|
133
143
|
_chain.setTextSelection(_progressPos);
|
|
134
144
|
}
|
|
135
145
|
_context.t3 = fileType;
|
|
136
|
-
_context.next = _context.t3 === 'image' ?
|
|
146
|
+
_context.next = _context.t3 === 'image' ? 45 : _context.t3 === 'video' ? 47 : 49;
|
|
137
147
|
break;
|
|
138
|
-
case
|
|
148
|
+
case 45:
|
|
139
149
|
_chain.setImage({
|
|
140
150
|
src: '',
|
|
141
151
|
width: 760
|
|
142
152
|
}).run();
|
|
143
|
-
return _context.abrupt("break",
|
|
144
|
-
case
|
|
153
|
+
return _context.abrupt("break", 51);
|
|
154
|
+
case 47:
|
|
145
155
|
_chain.setVideo({
|
|
146
156
|
src: '',
|
|
147
157
|
width: 760,
|
|
148
158
|
controls: true,
|
|
149
159
|
autoplay: false
|
|
150
160
|
}).run();
|
|
151
|
-
return _context.abrupt("break",
|
|
152
|
-
case
|
|
161
|
+
return _context.abrupt("break", 51);
|
|
162
|
+
case 49:
|
|
153
163
|
_chain.setBlockAttachment({
|
|
154
164
|
url: 'error',
|
|
155
165
|
title: "\u4E0A\u4F20\u5931\u8D25: ".concat(file.name),
|
|
156
166
|
size: formatFileSize(file.size)
|
|
157
167
|
}).run();
|
|
158
|
-
return _context.abrupt("break",
|
|
159
|
-
case
|
|
168
|
+
return _context.abrupt("break", 51);
|
|
169
|
+
case 51:
|
|
160
170
|
case "end":
|
|
161
171
|
return _context.stop();
|
|
162
172
|
}
|
|
163
|
-
}, _loop, null, [[
|
|
173
|
+
}, _loop, null, [[5, 35], [16, 23]]);
|
|
164
174
|
});
|
|
165
175
|
i = 0;
|
|
166
|
-
case
|
|
176
|
+
case 8:
|
|
167
177
|
if (!(i < files.length)) {
|
|
168
|
-
_context2.next =
|
|
178
|
+
_context2.next = 13;
|
|
169
179
|
break;
|
|
170
180
|
}
|
|
171
|
-
return _context2.delegateYield(_loop(), "t0",
|
|
172
|
-
case
|
|
181
|
+
return _context2.delegateYield(_loop(), "t0", 10);
|
|
182
|
+
case 10:
|
|
173
183
|
i++;
|
|
174
|
-
_context2.next =
|
|
184
|
+
_context2.next = 8;
|
|
175
185
|
break;
|
|
176
|
-
case
|
|
186
|
+
case 13:
|
|
177
187
|
case "end":
|
|
178
188
|
return _context2.stop();
|
|
179
189
|
}
|
|
@@ -2,6 +2,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
2
2
|
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
3
3
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
4
4
|
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
5
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
6
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
9
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
10
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
11
|
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; }
|
|
6
12
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(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; }
|
|
7
13
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -11,7 +17,58 @@ import { getFileType, removeBaseUrl, withBaseUrl } from "../../util";
|
|
|
11
17
|
import Image from "@tiptap/extension-image";
|
|
12
18
|
import { Plugin, PluginKey } from "@tiptap/pm/state";
|
|
13
19
|
import { ReactNodeViewRenderer } from "@tiptap/react";
|
|
20
|
+
import { generateJSON } from "@tiptap/html";
|
|
14
21
|
import ImageViewWrapper, { getImageDimensionsFromFile } from "../component/Image";
|
|
22
|
+
/** 在 JSON 结构中用 progress 节点替换 image 节点,按顺序匹配 Files */
|
|
23
|
+
function replaceImagesWithProgressNodes(node, imageFiles, fileIndex, tempIds) {
|
|
24
|
+
if (node.type === 'image' && fileIndex.current < imageFiles.length) {
|
|
25
|
+
var idx = fileIndex.current++;
|
|
26
|
+
var tempId = "upload-".concat(Date.now(), "-").concat(idx);
|
|
27
|
+
tempIds.push(tempId);
|
|
28
|
+
return {
|
|
29
|
+
type: 'inlineUploadProgress',
|
|
30
|
+
attrs: {
|
|
31
|
+
fileName: imageFiles[idx].name,
|
|
32
|
+
fileType: 'image',
|
|
33
|
+
progress: 0,
|
|
34
|
+
tempId: tempId
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
if (node.content && Array.isArray(node.content)) {
|
|
39
|
+
return _objectSpread(_objectSpread({}, node), {}, {
|
|
40
|
+
content: node.content.map(function (child) {
|
|
41
|
+
return replaceImagesWithProgressNodes(child, imageFiles, fileIndex, tempIds);
|
|
42
|
+
})
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
return node;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/** 在 doc 末尾追加多余的图片(当 Files 数量多于 HTML 中的 img 时) */
|
|
49
|
+
function appendExtraImagesToDoc(doc, imageFiles, startIndex, tempIds) {
|
|
50
|
+
var content = _toConsumableArray(doc.content || []);
|
|
51
|
+
for (var i = startIndex; i < imageFiles.length; i++) {
|
|
52
|
+
var tempId = "upload-".concat(Date.now(), "-").concat(i);
|
|
53
|
+
tempIds.push(tempId);
|
|
54
|
+
var progressNode = {
|
|
55
|
+
type: 'inlineUploadProgress',
|
|
56
|
+
attrs: {
|
|
57
|
+
fileName: imageFiles[i].name,
|
|
58
|
+
fileType: 'image',
|
|
59
|
+
progress: 0,
|
|
60
|
+
tempId: tempId
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
content.push({
|
|
64
|
+
type: 'paragraph',
|
|
65
|
+
content: [progressNode]
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
return _objectSpread(_objectSpread({}, doc), {}, {
|
|
69
|
+
content: content
|
|
70
|
+
});
|
|
71
|
+
}
|
|
15
72
|
var customImage = function customImage(props) {
|
|
16
73
|
return Image.extend({
|
|
17
74
|
addAttributes: function addAttributes() {
|
|
@@ -57,7 +114,7 @@ var customImage = function customImage(props) {
|
|
|
57
114
|
key: new PluginKey('imagePasteHandler'),
|
|
58
115
|
props: {
|
|
59
116
|
handlePaste: function handlePaste(view, event) {
|
|
60
|
-
var _event$clipboardData, _event$clipboardData2
|
|
117
|
+
var _event$clipboardData, _event$clipboardData2;
|
|
61
118
|
if (!props.onUpload) return false;
|
|
62
119
|
var items = Array.from(((_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.items) || []);
|
|
63
120
|
var imageFiles = items.map(function (item) {
|
|
@@ -73,17 +130,9 @@ var customImage = function customImage(props) {
|
|
|
73
130
|
return false;
|
|
74
131
|
}
|
|
75
132
|
}
|
|
76
|
-
var
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
var hasTab = trimmedText.includes('\t');
|
|
80
|
-
var lineCount = trimmedText.split('\n').length;
|
|
81
|
-
var isLikelyFileName = /\.(jpg|jpeg|png|gif|webp|svg|bmp)$/i.test(trimmedText);
|
|
82
|
-
if ((hasTab || lineCount > 2) && !isLikelyFileName) {
|
|
83
|
-
return false;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
var from = view.state.selection.from;
|
|
133
|
+
var _view$state$selection = view.state.selection,
|
|
134
|
+
from = _view$state$selection.from,
|
|
135
|
+
to = _view$state$selection.to;
|
|
87
136
|
var editor = _this2.editor;
|
|
88
137
|
var findNodePosition = function findNodePosition(typeName, tempId) {
|
|
89
138
|
var targetPos = null;
|
|
@@ -96,108 +145,163 @@ var customImage = function customImage(props) {
|
|
|
96
145
|
});
|
|
97
146
|
return targetPos;
|
|
98
147
|
};
|
|
99
|
-
|
|
100
|
-
var
|
|
101
|
-
|
|
148
|
+
var uploadSingleImage = /*#__PURE__*/function () {
|
|
149
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, tempId) {
|
|
150
|
+
var progressPos, url, chain, dimensions, fallbackChain, _progressPos, _chain;
|
|
151
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
152
|
+
while (1) switch (_context.prev = _context.next) {
|
|
153
|
+
case 0:
|
|
154
|
+
_context.prev = 0;
|
|
155
|
+
progressPos = findNodePosition('inlineUploadProgress', tempId);
|
|
156
|
+
_context.next = 4;
|
|
157
|
+
return props.onUpload(file, function (progressEvent) {
|
|
158
|
+
editor.chain().updateInlineUploadProgress(tempId, progressEvent.progress).focus().run();
|
|
159
|
+
});
|
|
160
|
+
case 4:
|
|
161
|
+
url = _context.sent;
|
|
162
|
+
editor.chain().removeInlineUploadProgress(tempId).focus().run();
|
|
163
|
+
chain = editor.chain().focus();
|
|
164
|
+
if (progressPos !== null) {
|
|
165
|
+
chain.setTextSelection(progressPos);
|
|
166
|
+
}
|
|
167
|
+
_context.prev = 8;
|
|
168
|
+
_context.next = 11;
|
|
169
|
+
return getImageDimensionsFromFile(file);
|
|
170
|
+
case 11:
|
|
171
|
+
dimensions = _context.sent;
|
|
172
|
+
chain.setImage({
|
|
173
|
+
src: url,
|
|
174
|
+
width: Math.min(dimensions.width, 760)
|
|
175
|
+
}).run();
|
|
176
|
+
_context.next = 20;
|
|
177
|
+
break;
|
|
178
|
+
case 15:
|
|
179
|
+
_context.prev = 15;
|
|
180
|
+
_context.t0 = _context["catch"](8);
|
|
181
|
+
fallbackChain = editor.chain().focus();
|
|
182
|
+
if (progressPos !== null) {
|
|
183
|
+
fallbackChain.setTextSelection(progressPos);
|
|
184
|
+
}
|
|
185
|
+
fallbackChain.setImage({
|
|
186
|
+
src: url,
|
|
187
|
+
width: 760
|
|
188
|
+
}).run();
|
|
189
|
+
case 20:
|
|
190
|
+
_context.next = 29;
|
|
191
|
+
break;
|
|
192
|
+
case 22:
|
|
193
|
+
_context.prev = 22;
|
|
194
|
+
_context.t1 = _context["catch"](0);
|
|
195
|
+
editor.chain().removeInlineUploadProgress(tempId).focus().run();
|
|
196
|
+
_progressPos = findNodePosition('inlineUploadProgress', tempId);
|
|
197
|
+
_chain = editor.chain().focus();
|
|
198
|
+
if (_progressPos !== null) {
|
|
199
|
+
_chain.setTextSelection(_progressPos);
|
|
200
|
+
}
|
|
201
|
+
_chain.setImage({
|
|
202
|
+
src: '',
|
|
203
|
+
width: 760
|
|
204
|
+
}).run();
|
|
205
|
+
case 29:
|
|
206
|
+
case "end":
|
|
207
|
+
return _context.stop();
|
|
208
|
+
}
|
|
209
|
+
}, _callee, null, [[0, 22], [8, 15]]);
|
|
210
|
+
}));
|
|
211
|
+
return function uploadSingleImage(_x, _x2) {
|
|
212
|
+
return _ref.apply(this, arguments);
|
|
213
|
+
};
|
|
214
|
+
}();
|
|
215
|
+
_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
216
|
+
var _htmlTrimmed$match;
|
|
217
|
+
var htmlTrimmed, hasRichHtml, _parsed$content, extensions, parsed, tempIds, fileIndex, modifiedDoc, finalDoc, i, useSimpleInsert;
|
|
218
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
102
219
|
while (1) switch (_context2.prev = _context2.next) {
|
|
103
220
|
case 0:
|
|
221
|
+
useSimpleInsert = function _useSimpleInsert() {
|
|
222
|
+
var baseTime = Date.now();
|
|
223
|
+
var content = imageFiles.map(function (file, i) {
|
|
224
|
+
return {
|
|
225
|
+
type: 'paragraph',
|
|
226
|
+
content: [{
|
|
227
|
+
type: 'inlineUploadProgress',
|
|
228
|
+
attrs: {
|
|
229
|
+
fileName: file.name,
|
|
230
|
+
fileType: 'image',
|
|
231
|
+
progress: 0,
|
|
232
|
+
tempId: "upload-".concat(baseTime, "-").concat(i)
|
|
233
|
+
}
|
|
234
|
+
}]
|
|
235
|
+
};
|
|
236
|
+
});
|
|
237
|
+
editor.chain().insertContentAt({
|
|
238
|
+
from: from,
|
|
239
|
+
to: to
|
|
240
|
+
}, content).focus().run();
|
|
241
|
+
imageFiles.forEach(function (file, i) {
|
|
242
|
+
uploadSingleImage(file, "upload-".concat(baseTime, "-").concat(i));
|
|
243
|
+
});
|
|
244
|
+
};
|
|
104
245
|
if (props.onUpload) {
|
|
105
|
-
_context2.next =
|
|
246
|
+
_context2.next = 3;
|
|
106
247
|
break;
|
|
107
248
|
}
|
|
108
249
|
return _context2.abrupt("return");
|
|
109
|
-
case
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
url = _context.sent;
|
|
136
|
-
editor.chain().removeInlineUploadProgress(tempId).focus().run();
|
|
137
|
-
chain = editor.chain().focus();
|
|
138
|
-
if (progressPos !== null) {
|
|
139
|
-
chain.setTextSelection(progressPos);
|
|
140
|
-
}
|
|
141
|
-
_context.prev = 12;
|
|
142
|
-
_context.next = 15;
|
|
143
|
-
return getImageDimensionsFromFile(file);
|
|
144
|
-
case 15:
|
|
145
|
-
dimensions = _context.sent;
|
|
146
|
-
chain.setImage({
|
|
147
|
-
src: url,
|
|
148
|
-
width: Math.min(dimensions.width, 760)
|
|
149
|
-
}).run();
|
|
150
|
-
_context.next = 24;
|
|
151
|
-
break;
|
|
152
|
-
case 19:
|
|
153
|
-
_context.prev = 19;
|
|
154
|
-
_context.t0 = _context["catch"](12);
|
|
155
|
-
fallbackChain = editor.chain().focus();
|
|
156
|
-
if (progressPos !== null) {
|
|
157
|
-
fallbackChain.setTextSelection(progressPos);
|
|
158
|
-
}
|
|
159
|
-
fallbackChain.setImage({
|
|
160
|
-
src: url,
|
|
161
|
-
width: 760
|
|
162
|
-
}).run();
|
|
163
|
-
case 24:
|
|
164
|
-
_context.next = 33;
|
|
165
|
-
break;
|
|
166
|
-
case 26:
|
|
167
|
-
_context.prev = 26;
|
|
168
|
-
_context.t1 = _context["catch"](3);
|
|
169
|
-
editor.chain().removeInlineUploadProgress(tempId).focus().run();
|
|
170
|
-
_progressPos = findNodePosition('inlineUploadProgress', tempId);
|
|
171
|
-
_chain = editor.chain().focus();
|
|
172
|
-
if (_progressPos !== null) {
|
|
173
|
-
_chain.setTextSelection(_progressPos);
|
|
174
|
-
}
|
|
175
|
-
_chain.setImage({
|
|
176
|
-
src: '',
|
|
177
|
-
width: 760
|
|
178
|
-
}).run();
|
|
179
|
-
case 33:
|
|
180
|
-
case "end":
|
|
181
|
-
return _context.stop();
|
|
182
|
-
}
|
|
183
|
-
}, _loop, null, [[3, 26], [12, 19]]);
|
|
184
|
-
});
|
|
250
|
+
case 3:
|
|
251
|
+
htmlTrimmed = (htmlData === null || htmlData === void 0 ? void 0 : htmlData.trim()) || '';
|
|
252
|
+
hasRichHtml = htmlTrimmed.length > 0 && (htmlTrimmed.includes('<p') || htmlTrimmed.includes('<div') || htmlTrimmed.includes('<br') || htmlTrimmed.includes('<span') || ((_htmlTrimmed$match = htmlTrimmed.match(/<img/gi)) === null || _htmlTrimmed$match === void 0 ? void 0 : _htmlTrimmed$match.length) !== 1);
|
|
253
|
+
if (!hasRichHtml) {
|
|
254
|
+
_context2.next = 30;
|
|
255
|
+
break;
|
|
256
|
+
}
|
|
257
|
+
_context2.prev = 6;
|
|
258
|
+
extensions = editor.extensionManager.extensions;
|
|
259
|
+
parsed = generateJSON(htmlTrimmed, extensions);
|
|
260
|
+
if (parsed !== null && parsed !== void 0 && (_parsed$content = parsed.content) !== null && _parsed$content !== void 0 && _parsed$content.length) {
|
|
261
|
+
_context2.next = 11;
|
|
262
|
+
break;
|
|
263
|
+
}
|
|
264
|
+
throw new Error('Empty parsed content');
|
|
265
|
+
case 11:
|
|
266
|
+
tempIds = [];
|
|
267
|
+
fileIndex = {
|
|
268
|
+
current: 0
|
|
269
|
+
};
|
|
270
|
+
modifiedDoc = replaceImagesWithProgressNodes(parsed, imageFiles, fileIndex, tempIds);
|
|
271
|
+
finalDoc = appendExtraImagesToDoc(modifiedDoc, imageFiles, fileIndex.current, tempIds);
|
|
272
|
+
editor.chain().insertContentAt({
|
|
273
|
+
from: from,
|
|
274
|
+
to: to
|
|
275
|
+
}, finalDoc).focus().run();
|
|
185
276
|
i = 0;
|
|
186
|
-
case
|
|
187
|
-
if (!(i <
|
|
188
|
-
_context2.next =
|
|
277
|
+
case 17:
|
|
278
|
+
if (!(i < tempIds.length)) {
|
|
279
|
+
_context2.next = 23;
|
|
189
280
|
break;
|
|
190
281
|
}
|
|
191
|
-
|
|
192
|
-
|
|
282
|
+
_context2.next = 20;
|
|
283
|
+
return uploadSingleImage(imageFiles[i], tempIds[i]);
|
|
284
|
+
case 20:
|
|
193
285
|
i++;
|
|
194
|
-
_context2.next =
|
|
286
|
+
_context2.next = 17;
|
|
287
|
+
break;
|
|
288
|
+
case 23:
|
|
289
|
+
_context2.next = 28;
|
|
290
|
+
break;
|
|
291
|
+
case 25:
|
|
292
|
+
_context2.prev = 25;
|
|
293
|
+
_context2.t0 = _context2["catch"](6);
|
|
294
|
+
useSimpleInsert();
|
|
295
|
+
case 28:
|
|
296
|
+
_context2.next = 31;
|
|
195
297
|
break;
|
|
196
|
-
case
|
|
298
|
+
case 30:
|
|
299
|
+
useSimpleInsert();
|
|
300
|
+
case 31:
|
|
197
301
|
case "end":
|
|
198
302
|
return _context2.stop();
|
|
199
303
|
}
|
|
200
|
-
},
|
|
304
|
+
}, _callee2, null, [[6, 25]]);
|
|
201
305
|
}))();
|
|
202
306
|
return true;
|
|
203
307
|
}
|