@ctzhian/tiptap 1.13.3 → 1.13.5
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/Editor/demo.js +2 -1
- package/dist/EditorToolbar/index.d.ts +8 -1
- package/dist/EditorToolbar/index.js +70 -15
- package/dist/component/Icons/collapse-horizontal-line.d.ts +6 -0
- package/dist/component/Icons/collapse-horizontal-line.js +13 -0
- package/dist/component/Icons/expand-horizontal-line.d.ts +6 -0
- package/dist/component/Icons/expand-horizontal-line.js +13 -0
- package/dist/component/Icons/index.d.ts +2 -0
- package/dist/component/Icons/index.js +3 -1
- package/dist/extension/component/Attachment/AttachmentContent.js +1 -1
- package/dist/extension/component/Attachment/index.js +2 -3
- package/dist/extension/index.js +8 -11
- package/dist/extension/node/Attachment.js +47 -2
- package/dist/extension/node/Link/index.d.ts +3 -0
- package/dist/extension/node/Link/index.js +75 -5
- package/package.json +1 -1
- package/dist/extension/mark/Link.d.ts +0 -2
- package/dist/extension/mark/Link.js +0 -85
- package/dist/extension/mark/index.d.ts +0 -0
- package/dist/extension/mark/index.js +0 -1
package/dist/Editor/demo.js
CHANGED
|
@@ -173,7 +173,8 @@ var Reader = function Reader() {
|
|
|
173
173
|
marginBottom: '30px'
|
|
174
174
|
}
|
|
175
175
|
}, /*#__PURE__*/React.createElement(EditorToolbar, {
|
|
176
|
-
editor: editor
|
|
176
|
+
editor: editor,
|
|
177
|
+
mode: "advanced"
|
|
177
178
|
})), /*#__PURE__*/React.createElement(Box, {
|
|
178
179
|
sx: {
|
|
179
180
|
'.tiptap': {
|
|
@@ -4,6 +4,13 @@ import { ToolbarItemType } from '../type';
|
|
|
4
4
|
interface EditorToolbarProps {
|
|
5
5
|
editor: Editor;
|
|
6
6
|
menuInToolbarMore?: ToolbarItemType[];
|
|
7
|
+
/**
|
|
8
|
+
* Toolbar 模式
|
|
9
|
+
* - advanced:展示全部工具
|
|
10
|
+
* - simple:只展示常用工具,并尽量保持单行
|
|
11
|
+
*/
|
|
12
|
+
mode?: 'simple' | 'advanced';
|
|
13
|
+
onModeChange?: (mode: 'simple' | 'advanced') => void;
|
|
7
14
|
}
|
|
8
|
-
declare const EditorToolbar: ({ editor, menuInToolbarMore }: EditorToolbarProps) => React.JSX.Element;
|
|
15
|
+
declare const EditorToolbar: ({ editor, menuInToolbarMore, mode, onModeChange, }: EditorToolbarProps) => React.JSX.Element;
|
|
9
16
|
export default EditorToolbar;
|
|
@@ -1,12 +1,37 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
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); }
|
|
4
|
+
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
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
1
7
|
import { Box, Divider, Stack } from '@mui/material';
|
|
2
8
|
import { useEditorState } from '@tiptap/react';
|
|
3
9
|
import React from 'react';
|
|
4
|
-
import { AiGenerate2Icon, ArrowGoBackLineIcon, ArrowGoForwardLineIcon, BoldIcon, EraserLineIcon, ItalicIcon, LinkIcon, MarkPenLineIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, UnderlineIcon } from "../component/Icons";
|
|
10
|
+
import { AiGenerate2Icon, ArrowGoBackLineIcon, ArrowGoForwardLineIcon, BoldIcon, CodeBoxLineIcon, CollapseHorizontalLine, EraserLineIcon, ExpandHorizontalLineIcon, ItalicIcon, LinkIcon, MarkPenLineIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, UnderlineIcon } from "../component/Icons";
|
|
5
11
|
import { EditorAlignSelect, EditorFontBgColor, EditorFontColor, EditorFontSize, EditorHeading, EditorInsert, EditorListSelect, EditorMore, EditorVerticalAlignSelect, ToolbarItem } from "../component/Toolbar";
|
|
6
12
|
import { hasMarksInSelection } from "../util";
|
|
7
13
|
var EditorToolbar = function EditorToolbar(_ref) {
|
|
8
14
|
var editor = _ref.editor,
|
|
9
|
-
menuInToolbarMore = _ref.menuInToolbarMore
|
|
15
|
+
menuInToolbarMore = _ref.menuInToolbarMore,
|
|
16
|
+
mode = _ref.mode,
|
|
17
|
+
onModeChange = _ref.onModeChange;
|
|
18
|
+
var _React$useState = React.useState(function () {
|
|
19
|
+
return mode !== null && mode !== void 0 ? mode : 'advanced';
|
|
20
|
+
}),
|
|
21
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
22
|
+
toolbarMode = _React$useState2[0],
|
|
23
|
+
setToolbarMode = _React$useState2[1];
|
|
24
|
+
React.useEffect(function () {
|
|
25
|
+
if (typeof mode !== 'undefined') {
|
|
26
|
+
setToolbarMode(mode);
|
|
27
|
+
}
|
|
28
|
+
}, [mode]);
|
|
29
|
+
var isSimpleMode = toolbarMode === 'simple';
|
|
30
|
+
var handleToggleMode = React.useCallback(function () {
|
|
31
|
+
var nextMode = isSimpleMode ? 'advanced' : 'simple';
|
|
32
|
+
setToolbarMode(nextMode);
|
|
33
|
+
onModeChange === null || onModeChange === void 0 || onModeChange(nextMode);
|
|
34
|
+
}, [isSimpleMode, onModeChange]);
|
|
10
35
|
var _useEditorState = useEditorState({
|
|
11
36
|
editor: editor,
|
|
12
37
|
selector: function selector(ctx) {
|
|
@@ -23,7 +48,8 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
23
48
|
isSubscript: ctx.editor.isActive('subscript'),
|
|
24
49
|
isLink: ctx.editor.isActive('link'),
|
|
25
50
|
isHighlight: ctx.editor.isActive('highlight'),
|
|
26
|
-
isAiWriting: !!((_ctx$editor$storage = ctx.editor.storage) !== null && _ctx$editor$storage !== void 0 && (_ctx$editor$storage = _ctx$editor$storage.aiWriting) !== null && _ctx$editor$storage !== void 0 && _ctx$editor$storage.enabled)
|
|
51
|
+
isAiWriting: !!((_ctx$editor$storage = ctx.editor.storage) !== null && _ctx$editor$storage !== void 0 && (_ctx$editor$storage = _ctx$editor$storage.aiWriting) !== null && _ctx$editor$storage !== void 0 && _ctx$editor$storage.enabled),
|
|
52
|
+
isCodeBlock: ctx.editor.isActive('codeBlock')
|
|
27
53
|
};
|
|
28
54
|
}
|
|
29
55
|
}),
|
|
@@ -38,16 +64,19 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
38
64
|
isSubscript = _useEditorState.isSubscript,
|
|
39
65
|
isLink = _useEditorState.isLink,
|
|
40
66
|
isAiWriting = _useEditorState.isAiWriting,
|
|
41
|
-
isHighlight = _useEditorState.isHighlight
|
|
67
|
+
isHighlight = _useEditorState.isHighlight,
|
|
68
|
+
isCodeBlock = _useEditorState.isCodeBlock;
|
|
42
69
|
return /*#__PURE__*/React.createElement(Box, {
|
|
43
70
|
className: "editor-toolbar"
|
|
44
71
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
45
72
|
direction: "row",
|
|
46
73
|
alignItems: "center",
|
|
47
|
-
justifyContent:
|
|
48
|
-
flexWrap: 'wrap',
|
|
74
|
+
justifyContent: isSimpleMode ? 'flex-start' : 'center',
|
|
75
|
+
flexWrap: isSimpleMode ? 'nowrap' : 'wrap',
|
|
49
76
|
sx: {
|
|
50
77
|
minHeight: '44px',
|
|
78
|
+
overflowX: isSimpleMode ? 'auto' : 'visible',
|
|
79
|
+
columnGap: 0.5,
|
|
51
80
|
'.MuiSelect-root': {
|
|
52
81
|
minWidth: '36px',
|
|
53
82
|
bgcolor: 'background.paper',
|
|
@@ -72,7 +101,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
72
101
|
}
|
|
73
102
|
}
|
|
74
103
|
}
|
|
75
|
-
}, editor.options.extensions.find(function (it) {
|
|
104
|
+
}, !isSimpleMode && editor.options.extensions.find(function (it) {
|
|
76
105
|
return it.name === 'aiWriting';
|
|
77
106
|
}) && /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
78
107
|
text: 'AI 伴写',
|
|
@@ -86,7 +115,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
86
115
|
return editor.chain().focus().setAiWriting(!isAiWriting).run();
|
|
87
116
|
},
|
|
88
117
|
className: isAiWriting ? 'tool-active' : ''
|
|
89
|
-
}), /*#__PURE__*/React.createElement(EditorInsert, {
|
|
118
|
+
}), !isSimpleMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorInsert, {
|
|
90
119
|
editor: editor
|
|
91
120
|
}), /*#__PURE__*/React.createElement(Divider, {
|
|
92
121
|
orientation: "vertical",
|
|
@@ -96,7 +125,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
96
125
|
height: 20,
|
|
97
126
|
alignSelf: 'center'
|
|
98
127
|
}
|
|
99
|
-
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
128
|
+
})), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
100
129
|
tip: '撤销',
|
|
101
130
|
shortcutKey: ['ctrl', 'Z'],
|
|
102
131
|
icon: /*#__PURE__*/React.createElement(ArrowGoBackLineIcon, {
|
|
@@ -141,7 +170,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
141
170
|
}
|
|
142
171
|
}), /*#__PURE__*/React.createElement(EditorHeading, {
|
|
143
172
|
editor: editor
|
|
144
|
-
}), /*#__PURE__*/React.createElement(EditorFontSize, {
|
|
173
|
+
}), !isSimpleMode && /*#__PURE__*/React.createElement(EditorFontSize, {
|
|
145
174
|
editor: editor
|
|
146
175
|
}), /*#__PURE__*/React.createElement(Divider, {
|
|
147
176
|
orientation: "vertical",
|
|
@@ -175,7 +204,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
175
204
|
return editor.chain().focus().toggleItalic().run();
|
|
176
205
|
},
|
|
177
206
|
className: isItalic ? 'tool-active' : ''
|
|
178
|
-
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
207
|
+
}), !isSimpleMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
179
208
|
tip: '删除线',
|
|
180
209
|
shortcutKey: ['ctrl', 'shift', 'S'],
|
|
181
210
|
icon: /*#__PURE__*/React.createElement(StrikethroughIcon, {
|
|
@@ -199,7 +228,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
199
228
|
return editor.chain().focus().toggleUnderline().run();
|
|
200
229
|
},
|
|
201
230
|
className: isUnderline ? 'tool-active' : ''
|
|
202
|
-
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
231
|
+
})), !isSimpleMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
203
232
|
tip: '高亮',
|
|
204
233
|
shortcutKey: ['ctrl', 'shift', 'H'],
|
|
205
234
|
icon: /*#__PURE__*/React.createElement(MarkPenLineIcon, {
|
|
@@ -247,9 +276,21 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
247
276
|
height: 20,
|
|
248
277
|
alignSelf: 'center'
|
|
249
278
|
}
|
|
250
|
-
}), /*#__PURE__*/React.createElement(EditorListSelect, {
|
|
279
|
+
})), /*#__PURE__*/React.createElement(EditorListSelect, {
|
|
251
280
|
editor: editor
|
|
252
|
-
}), /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
281
|
+
}), isSimpleMode ? /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
282
|
+
tip: '代码块',
|
|
283
|
+
shortcutKey: ['ctrl', 'alt', 'C'],
|
|
284
|
+
icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
|
|
285
|
+
sx: {
|
|
286
|
+
fontSize: '1rem'
|
|
287
|
+
}
|
|
288
|
+
}),
|
|
289
|
+
onClick: function onClick() {
|
|
290
|
+
return editor.chain().focus().toggleCodeBlock().run();
|
|
291
|
+
},
|
|
292
|
+
className: isCodeBlock ? 'tool-active' : ''
|
|
293
|
+
}) : /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
253
294
|
tip: '链接',
|
|
254
295
|
shortcutKey: ['ctrl', '1'],
|
|
255
296
|
icon: /*#__PURE__*/React.createElement(LinkIcon, {
|
|
@@ -268,7 +309,7 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
268
309
|
}).run();
|
|
269
310
|
},
|
|
270
311
|
className: isLink ? 'tool-active' : ''
|
|
271
|
-
}), /*#__PURE__*/React.createElement(EditorAlignSelect, {
|
|
312
|
+
}), !isSimpleMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorAlignSelect, {
|
|
272
313
|
editor: editor
|
|
273
314
|
}), /*#__PURE__*/React.createElement(EditorVerticalAlignSelect, {
|
|
274
315
|
editor: editor
|
|
@@ -282,6 +323,20 @@ var EditorToolbar = function EditorToolbar(_ref) {
|
|
|
282
323
|
}
|
|
283
324
|
}), /*#__PURE__*/React.createElement(EditorMore, {
|
|
284
325
|
more: menuInToolbarMore
|
|
326
|
+
})), isSimpleMode && menuInToolbarMore !== null && menuInToolbarMore !== void 0 && menuInToolbarMore.length ? /*#__PURE__*/React.createElement(EditorMore, {
|
|
327
|
+
more: menuInToolbarMore
|
|
328
|
+
}) : null, mode === 'simple' && /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
329
|
+
tip: isSimpleMode ? '切换为复杂模式' : '切换为简单模式',
|
|
330
|
+
icon: isSimpleMode ? /*#__PURE__*/React.createElement(ExpandHorizontalLineIcon, {
|
|
331
|
+
sx: {
|
|
332
|
+
fontSize: '1rem'
|
|
333
|
+
}
|
|
334
|
+
}) : /*#__PURE__*/React.createElement(CollapseHorizontalLine, {
|
|
335
|
+
sx: {
|
|
336
|
+
fontSize: '1rem'
|
|
337
|
+
}
|
|
338
|
+
}),
|
|
339
|
+
onClick: handleToggleMode
|
|
285
340
|
})));
|
|
286
341
|
};
|
|
287
342
|
export default EditorToolbar;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import { SvgIcon } from "@mui/material";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
export var CollapseHorizontalLine = function CollapseHorizontalLine(props) {
|
|
5
|
+
return /*#__PURE__*/React.createElement(SvgIcon, _extends({
|
|
6
|
+
viewBox: "0 0 24 24",
|
|
7
|
+
version: "1.1",
|
|
8
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
9
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
10
|
+
d: "M13.5 12 18.4497 7.05029 19.864 8.46451 17.3284 11H23V13H17.3284L19.8615 15.5331 18.4473 16.9473 13.5 12ZM1 13H6.67084L4.13584 15.535 5.55005 16.9493 10.5 11.9996 5.55025 7.0498 4.13604 8.46402 6.67206 11H1V13Z"
|
|
11
|
+
}));
|
|
12
|
+
};
|
|
13
|
+
CollapseHorizontalLine.displayName = 'collapse-horizontal-line';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import { SvgIcon } from '@mui/material';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
export var ExpandHorizontalLineIcon = function ExpandHorizontalLineIcon(props) {
|
|
5
|
+
return /*#__PURE__*/React.createElement(SvgIcon, _extends({
|
|
6
|
+
viewBox: "0 0 24 24",
|
|
7
|
+
version: "1.1",
|
|
8
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
9
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
10
|
+
d: "M0.5 12L5.44975 7.05029L6.86396 8.46451L4.32843 11H10V13H4.32843L6.86148 15.5331L5.44727 16.9473L0.5 12ZM14 13H19.6708L17.1358 15.535L18.55 16.9493L23.5 11.9996L18.5503 7.0498L17.136 8.46402L19.6721 11H14V13Z"
|
|
11
|
+
}));
|
|
12
|
+
};
|
|
13
|
+
ExpandHorizontalLineIcon.displayName = 'expand-horizontal-line';
|
|
@@ -134,3 +134,5 @@ export { UserSmileFillIcon } from './user-smile-fill-icon';
|
|
|
134
134
|
export { VolumeMuteLineIcon } from './volume-mute-line-icon';
|
|
135
135
|
export { VolumeUpLineIcon } from './volume-up-line-icon';
|
|
136
136
|
export { WindowFillIcon } from './window-fill-icon';
|
|
137
|
+
export { CollapseHorizontalLine } from './collapse-horizontal-line';
|
|
138
|
+
export { ExpandHorizontalLineIcon } from './expand-horizontal-line';
|
|
@@ -136,4 +136,6 @@ export { UploadIcon } from "./upload-icon";
|
|
|
136
136
|
export { UserSmileFillIcon } from "./user-smile-fill-icon";
|
|
137
137
|
export { VolumeMuteLineIcon } from "./volume-mute-line-icon";
|
|
138
138
|
export { VolumeUpLineIcon } from "./volume-up-line-icon";
|
|
139
|
-
export { WindowFillIcon } from "./window-fill-icon";
|
|
139
|
+
export { WindowFillIcon } from "./window-fill-icon";
|
|
140
|
+
export { CollapseHorizontalLine } from "./collapse-horizontal-line";
|
|
141
|
+
export { ExpandHorizontalLineIcon } from "./expand-horizontal-line";
|
|
@@ -91,7 +91,7 @@ export var AttachmentContent = function AttachmentContent(_ref) {
|
|
|
91
91
|
fontSize: '0.875rem',
|
|
92
92
|
fontWeight: 'bold'
|
|
93
93
|
}
|
|
94
|
-
}, attrs.title), /*#__PURE__*/React.createElement(Box, {
|
|
94
|
+
}, attrs.title), Number(attrs.size) > 0 && /*#__PURE__*/React.createElement(Box, {
|
|
95
95
|
sx: {
|
|
96
96
|
fontSize: '0.75rem',
|
|
97
97
|
color: 'text.secondary'
|
|
@@ -24,7 +24,6 @@ var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
|
|
|
24
24
|
_ref$attachmentType = _ref.attachmentType,
|
|
25
25
|
attachmentType = _ref$attachmentType === void 0 ? 'icon' : _ref$attachmentType,
|
|
26
26
|
getPos = _ref.getPos;
|
|
27
|
-
var isMarkdown = editor.options.contentType === 'markdown';
|
|
28
27
|
var attrs = node.attrs;
|
|
29
28
|
var attachmentDisplayType = attachmentType || attrs.type || 'icon';
|
|
30
29
|
var _useState = useState(''),
|
|
@@ -117,7 +116,7 @@ var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
|
|
|
117
116
|
}),
|
|
118
117
|
tip: "\u5220\u9664",
|
|
119
118
|
onClick: handleDeleteAttachment
|
|
120
|
-
}),
|
|
119
|
+
}), /*#__PURE__*/React.createElement(Divider, {
|
|
121
120
|
orientation: "vertical",
|
|
122
121
|
flexItem: true,
|
|
123
122
|
sx: {
|
|
@@ -154,7 +153,7 @@ var AttachmentViewWrapper = function AttachmentViewWrapper(_ref) {
|
|
|
154
153
|
return handleConvertAttachmentType('block');
|
|
155
154
|
}
|
|
156
155
|
}]
|
|
157
|
-
}))
|
|
156
|
+
}));
|
|
158
157
|
};
|
|
159
158
|
var handleSave = function handleSave() {
|
|
160
159
|
updateAttributes === null || updateAttributes === void 0 || updateAttributes({
|
package/dist/extension/index.js
CHANGED
|
@@ -14,7 +14,6 @@ import StarterKit from '@tiptap/starter-kit';
|
|
|
14
14
|
import { PLACEHOLDER } from "../contants/placeholder";
|
|
15
15
|
import { AiWritingExtension, SlashCommands, StructuredDiffExtension } from "./extension";
|
|
16
16
|
import { CodeExtension } from "./mark/Code";
|
|
17
|
-
import CustomLink from "./mark/Link";
|
|
18
17
|
import { AlertExtension, AudioExtension, BlockAttachmentExtension, BlockLinkExtension, CodeBlockLowlightExtension, CustomBlockMathExtension, CustomHorizontalRule, CustomInlineMathExtension, CustomSubscript, CustomSuperscript, DetailsContentExtension, DetailsExtension, DetailsSummaryExtension, EmojiExtension, FileHandlerExtension, FlowExtension, IframeExtension, ImageExtension, Indent, InlineAttachmentExtension, InlineLinkExtension, InlineUploadProgressExtension, ListExtension, MentionExtension, TableExtension, TableOfContentsExtension, UploadProgressExtension, VerticalAlign, VideoExtension, YamlFormat, YoutubeExtension } from "./node";
|
|
19
18
|
export var getExtensions = function getExtensions(_ref) {
|
|
20
19
|
var contentType = _ref.contentType,
|
|
@@ -44,7 +43,7 @@ export var getExtensions = function getExtensions(_ref) {
|
|
|
44
43
|
color: 'var(--mui-palette-primary-main)',
|
|
45
44
|
width: 2
|
|
46
45
|
}
|
|
47
|
-
}), TextStyleKit, CodeExtension, ListExtension, EmojiExtension, AlertExtension, CustomSubscript, DetailsExtension, CustomSuperscript, DetailsContentExtension, DetailsSummaryExtension, CodeBlockLowlightExtension, InlineUploadProgressExtension, YamlFormat, CustomHorizontalRule, IframeExtension({
|
|
46
|
+
}), TextStyleKit, CodeExtension, ListExtension, EmojiExtension, AlertExtension, CustomSubscript, DetailsExtension, CustomSuperscript, DetailsContentExtension, DetailsSummaryExtension, CodeBlockLowlightExtension, InlineUploadProgressExtension, YamlFormat, InlineLinkExtension, BlockLinkExtension, CustomHorizontalRule, IframeExtension({
|
|
48
47
|
onError: onError,
|
|
49
48
|
onValidateUrl: onValidateUrl
|
|
50
49
|
}), VideoExtension({
|
|
@@ -67,6 +66,12 @@ export var getExtensions = function getExtensions(_ref) {
|
|
|
67
66
|
onError: onError
|
|
68
67
|
}), CustomInlineMathExtension({
|
|
69
68
|
onError: onError
|
|
69
|
+
}), InlineAttachmentExtension({
|
|
70
|
+
onUpload: onUpload,
|
|
71
|
+
onError: onError
|
|
72
|
+
}), BlockAttachmentExtension({
|
|
73
|
+
onUpload: onUpload,
|
|
74
|
+
onError: onError
|
|
70
75
|
}), Highlight.configure({
|
|
71
76
|
multicolor: true
|
|
72
77
|
}), CharacterCount.configure({
|
|
@@ -104,7 +109,7 @@ export var getExtensions = function getExtensions(_ref) {
|
|
|
104
109
|
}
|
|
105
110
|
})]);
|
|
106
111
|
if (contentType === 'markdown') {
|
|
107
|
-
defaultExtensions.push(
|
|
112
|
+
defaultExtensions.push(Markdown.configure({
|
|
108
113
|
indentation: {
|
|
109
114
|
style: 'space',
|
|
110
115
|
size: 2
|
|
@@ -115,14 +120,6 @@ export var getExtensions = function getExtensions(_ref) {
|
|
|
115
120
|
pedantic: false
|
|
116
121
|
}
|
|
117
122
|
}));
|
|
118
|
-
} else {
|
|
119
|
-
defaultExtensions.push.apply(defaultExtensions, [InlineLinkExtension, BlockLinkExtension, InlineAttachmentExtension({
|
|
120
|
-
onUpload: onUpload,
|
|
121
|
-
onError: onError
|
|
122
|
-
}), BlockAttachmentExtension({
|
|
123
|
-
onUpload: onUpload,
|
|
124
|
-
onError: onError
|
|
125
|
-
})]);
|
|
126
123
|
}
|
|
127
124
|
if (!(exclude !== null && exclude !== void 0 && exclude.includes('indent'))) {
|
|
128
125
|
defaultExtensions.push(Indent.configure({
|
|
@@ -73,6 +73,25 @@ export var InlineAttachmentExtension = function InlineAttachmentExtension(props)
|
|
|
73
73
|
size: dom.getAttribute('data-size') || '0'
|
|
74
74
|
};
|
|
75
75
|
}
|
|
76
|
+
}, {
|
|
77
|
+
tag: 'a[download]',
|
|
78
|
+
getAttrs: function getAttrs(dom) {
|
|
79
|
+
if (!(dom instanceof HTMLElement)) return false;
|
|
80
|
+
var download = dom.getAttribute('download');
|
|
81
|
+
var type = dom.getAttribute('type');
|
|
82
|
+
|
|
83
|
+
// 只解析 type 不是 block 的带 download 的 <a> 标签
|
|
84
|
+
if (download === null || type === 'block') {
|
|
85
|
+
return false;
|
|
86
|
+
}
|
|
87
|
+
var href = dom.getAttribute('href') || '';
|
|
88
|
+
var title = dom.textContent || dom.getAttribute('title') || dom.getAttribute('download') || '';
|
|
89
|
+
return {
|
|
90
|
+
url: href,
|
|
91
|
+
title: title,
|
|
92
|
+
size: '0'
|
|
93
|
+
};
|
|
94
|
+
}
|
|
76
95
|
}];
|
|
77
96
|
},
|
|
78
97
|
renderHTML: function renderHTML(_ref) {
|
|
@@ -195,6 +214,25 @@ export var BlockAttachmentExtension = function BlockAttachmentExtension(props) {
|
|
|
195
214
|
size: dom.getAttribute('data-size') || '0'
|
|
196
215
|
};
|
|
197
216
|
}
|
|
217
|
+
}, {
|
|
218
|
+
tag: 'a[download][type="block"]',
|
|
219
|
+
getAttrs: function getAttrs(dom) {
|
|
220
|
+
if (!(dom instanceof HTMLElement)) return false;
|
|
221
|
+
var download = dom.getAttribute('download');
|
|
222
|
+
var type = dom.getAttribute('type');
|
|
223
|
+
|
|
224
|
+
// 只解析 type="block" 的带 download 的 <a> 标签
|
|
225
|
+
if (download === null || type !== 'block') {
|
|
226
|
+
return false;
|
|
227
|
+
}
|
|
228
|
+
var href = dom.getAttribute('href') || '';
|
|
229
|
+
var title = dom.textContent || dom.getAttribute('title') || dom.getAttribute('download') || '';
|
|
230
|
+
return {
|
|
231
|
+
url: href,
|
|
232
|
+
title: title,
|
|
233
|
+
size: '0'
|
|
234
|
+
};
|
|
235
|
+
}
|
|
198
236
|
}];
|
|
199
237
|
},
|
|
200
238
|
renderHTML: function renderHTML(_ref4) {
|
|
@@ -203,12 +241,19 @@ export var BlockAttachmentExtension = function BlockAttachmentExtension(props) {
|
|
|
203
241
|
'data-tag': 'attachment'
|
|
204
242
|
}, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes))];
|
|
205
243
|
},
|
|
244
|
+
renderMarkdown: function renderMarkdown(node) {
|
|
245
|
+
var _ref5 = node.attrs,
|
|
246
|
+
url = _ref5.url,
|
|
247
|
+
title = _ref5.title;
|
|
248
|
+
if (!url) return '';
|
|
249
|
+
return "<a href=\"".concat(url, "\" type=\"block\" target=\"_blank\" download=\"").concat(title, "\">").concat(title, "</a>");
|
|
250
|
+
},
|
|
206
251
|
addCommands: function addCommands() {
|
|
207
252
|
var _this3 = this;
|
|
208
253
|
return {
|
|
209
254
|
setBlockAttachment: function setBlockAttachment(options) {
|
|
210
|
-
return function (
|
|
211
|
-
var commands =
|
|
255
|
+
return function (_ref6) {
|
|
256
|
+
var commands = _ref6.commands;
|
|
212
257
|
return commands.insertContent({
|
|
213
258
|
type: _this3.name,
|
|
214
259
|
attrs: {
|
|
@@ -119,6 +119,7 @@ declare module '@tiptap/core' {
|
|
|
119
119
|
class?: string | null;
|
|
120
120
|
title?: string | null;
|
|
121
121
|
type?: string | null;
|
|
122
|
+
download?: string | null;
|
|
122
123
|
}) => ReturnType;
|
|
123
124
|
/**
|
|
124
125
|
* Toggle a link mark
|
|
@@ -132,6 +133,7 @@ declare module '@tiptap/core' {
|
|
|
132
133
|
class?: string | null;
|
|
133
134
|
title?: string | null;
|
|
134
135
|
type?: string | null;
|
|
136
|
+
download?: string | null;
|
|
135
137
|
}) => ReturnType;
|
|
136
138
|
/**
|
|
137
139
|
* Unset a link mark
|
|
@@ -152,6 +154,7 @@ declare module '@tiptap/core' {
|
|
|
152
154
|
class?: string | null;
|
|
153
155
|
title?: string | null;
|
|
154
156
|
type?: string | null;
|
|
157
|
+
download?: string | null;
|
|
155
158
|
}) => ReturnType;
|
|
156
159
|
};
|
|
157
160
|
}
|
|
@@ -6,6 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
|
6
6
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
7
|
import { getLinkTitle } from "../../../util";
|
|
8
8
|
import { mergeAttributes, Node, nodePasteRule } from '@tiptap/core';
|
|
9
|
+
import { Plugin, PluginKey } from '@tiptap/pm/state';
|
|
9
10
|
import { ReactNodeViewRenderer } from '@tiptap/react';
|
|
10
11
|
import { find as _find, registerCustomProtocol, reset } from 'linkifyjs';
|
|
11
12
|
import LinkViewWrapper from "../../component/Link";
|
|
@@ -68,7 +69,8 @@ export var InlineLinkExtension = Node.create({
|
|
|
68
69
|
class: null,
|
|
69
70
|
type: 'icon',
|
|
70
71
|
rel: null,
|
|
71
|
-
title: null
|
|
72
|
+
title: null,
|
|
73
|
+
download: null
|
|
72
74
|
},
|
|
73
75
|
isAllowedUri: function isAllowedUri(url, ctx) {
|
|
74
76
|
return !!_isAllowedUri(url, ctx.protocols);
|
|
@@ -148,6 +150,20 @@ export var InlineLinkExtension = Node.create({
|
|
|
148
150
|
'type': attributes.type
|
|
149
151
|
};
|
|
150
152
|
}
|
|
153
|
+
},
|
|
154
|
+
download: {
|
|
155
|
+
default: null,
|
|
156
|
+
parseHTML: function parseHTML(element) {
|
|
157
|
+
return element.getAttribute('download');
|
|
158
|
+
},
|
|
159
|
+
renderHTML: function renderHTML(attributes) {
|
|
160
|
+
if (!attributes.download) {
|
|
161
|
+
return {};
|
|
162
|
+
}
|
|
163
|
+
return {
|
|
164
|
+
download: attributes.download
|
|
165
|
+
};
|
|
166
|
+
}
|
|
151
167
|
}
|
|
152
168
|
};
|
|
153
169
|
},
|
|
@@ -158,6 +174,12 @@ export var InlineLinkExtension = Node.create({
|
|
|
158
174
|
getAttrs: function getAttrs(dom) {
|
|
159
175
|
var href = dom.getAttribute('href');
|
|
160
176
|
var dataType = dom.getAttribute('type');
|
|
177
|
+
var download = dom.getAttribute('download');
|
|
178
|
+
|
|
179
|
+
// 如果存在 download 属性,认为是附件,不解析为链接
|
|
180
|
+
if (download !== null) {
|
|
181
|
+
return false;
|
|
182
|
+
}
|
|
161
183
|
if (dataType === 'block') {
|
|
162
184
|
return false;
|
|
163
185
|
}
|
|
@@ -179,7 +201,8 @@ export var InlineLinkExtension = Node.create({
|
|
|
179
201
|
class: dom.getAttribute('class') || _this.options.HTMLAttributes.class,
|
|
180
202
|
rel: dom.getAttribute('rel'),
|
|
181
203
|
title: dom.textContent || dom.getAttribute('title'),
|
|
182
|
-
type: dom.getAttribute('type') || 'icon'
|
|
204
|
+
type: dom.getAttribute('type') || 'icon',
|
|
205
|
+
download: dom.getAttribute('download')
|
|
183
206
|
};
|
|
184
207
|
}
|
|
185
208
|
}];
|
|
@@ -270,7 +293,32 @@ export var InlineLinkExtension = Node.create({
|
|
|
270
293
|
},
|
|
271
294
|
addProseMirrorPlugins: function addProseMirrorPlugins() {
|
|
272
295
|
var _this5 = this;
|
|
273
|
-
var plugins = [
|
|
296
|
+
var plugins = [new Plugin({
|
|
297
|
+
key: new PluginKey('linkDownloadHandler'),
|
|
298
|
+
props: {
|
|
299
|
+
handleDOMEvents: {
|
|
300
|
+
click: function click(view, event) {
|
|
301
|
+
var target = event.target;
|
|
302
|
+
var link = target.closest('a[download]');
|
|
303
|
+
if (link) {
|
|
304
|
+
var downloadAttr = link.getAttribute('download');
|
|
305
|
+
var href = link.getAttribute('href');
|
|
306
|
+
if (href && downloadAttr !== null) {
|
|
307
|
+
event.preventDefault();
|
|
308
|
+
var downloadLink = document.createElement('a');
|
|
309
|
+
downloadLink.href = href;
|
|
310
|
+
downloadLink.download = downloadAttr === '' ? href.split('/').pop() || 'download' : downloadAttr;
|
|
311
|
+
document.body.appendChild(downloadLink);
|
|
312
|
+
downloadLink.click();
|
|
313
|
+
document.body.removeChild(downloadLink);
|
|
314
|
+
return true;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
return false;
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
})];
|
|
274
322
|
var _this$options = this.options,
|
|
275
323
|
protocols = _this$options.protocols,
|
|
276
324
|
defaultProtocol = _this$options.defaultProtocol;
|
|
@@ -332,7 +380,8 @@ export var BlockLinkExtension = Node.create({
|
|
|
332
380
|
HTMLAttributes: {
|
|
333
381
|
target: '_blank',
|
|
334
382
|
class: null,
|
|
335
|
-
type: 'block'
|
|
383
|
+
type: 'block',
|
|
384
|
+
download: null
|
|
336
385
|
}
|
|
337
386
|
};
|
|
338
387
|
},
|
|
@@ -418,6 +467,20 @@ export var BlockLinkExtension = Node.create({
|
|
|
418
467
|
'type': attributes.type
|
|
419
468
|
};
|
|
420
469
|
}
|
|
470
|
+
},
|
|
471
|
+
download: {
|
|
472
|
+
default: null,
|
|
473
|
+
parseHTML: function parseHTML(element) {
|
|
474
|
+
return element.getAttribute('download');
|
|
475
|
+
},
|
|
476
|
+
renderHTML: function renderHTML(attributes) {
|
|
477
|
+
if (!attributes.download) {
|
|
478
|
+
return {};
|
|
479
|
+
}
|
|
480
|
+
return {
|
|
481
|
+
download: attributes.download
|
|
482
|
+
};
|
|
483
|
+
}
|
|
421
484
|
}
|
|
422
485
|
};
|
|
423
486
|
},
|
|
@@ -427,13 +490,20 @@ export var BlockLinkExtension = Node.create({
|
|
|
427
490
|
tag: 'a[type="block"]',
|
|
428
491
|
getAttrs: function getAttrs(dom) {
|
|
429
492
|
if (!(dom instanceof HTMLElement)) return false;
|
|
493
|
+
var download = dom.getAttribute('download');
|
|
494
|
+
|
|
495
|
+
// 如果存在 download 属性,认为是附件,不解析为链接
|
|
496
|
+
if (download !== null) {
|
|
497
|
+
return false;
|
|
498
|
+
}
|
|
430
499
|
return {
|
|
431
500
|
href: dom.getAttribute('href') || '',
|
|
432
501
|
target: dom.getAttribute('target') || _this7.options.HTMLAttributes.target,
|
|
433
502
|
class: dom.getAttribute('class') || _this7.options.HTMLAttributes.class,
|
|
434
503
|
title: dom.textContent || dom.getAttribute('title') || '',
|
|
435
504
|
rel: dom.getAttribute('rel') || '',
|
|
436
|
-
type: dom.getAttribute('type') || 'block'
|
|
505
|
+
type: dom.getAttribute('type') || 'block',
|
|
506
|
+
download: dom.getAttribute('download')
|
|
437
507
|
};
|
|
438
508
|
}
|
|
439
509
|
}];
|
package/package.json
CHANGED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
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; }
|
|
3
|
-
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; }
|
|
4
|
-
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; }
|
|
5
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
-
// @ts-nocheck
|
|
8
|
-
|
|
9
|
-
import { Link } from "@tiptap/extension-link";
|
|
10
|
-
import { Plugin, PluginKey } from '@tiptap/pm/state';
|
|
11
|
-
import { ReactMarkViewRenderer } from "@tiptap/react";
|
|
12
|
-
import LinkViewWrapper from "../component/Link/Markdown";
|
|
13
|
-
var CustomLink = Link.extend({
|
|
14
|
-
addMarkView: function addMarkView() {
|
|
15
|
-
return ReactMarkViewRenderer(LinkViewWrapper);
|
|
16
|
-
},
|
|
17
|
-
addAttributes: function addAttributes() {
|
|
18
|
-
var _this$parent;
|
|
19
|
-
return _objectSpread(_objectSpread({}, (_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.call(this)), {}, {
|
|
20
|
-
download: {
|
|
21
|
-
default: null,
|
|
22
|
-
parseHTML: function parseHTML(element) {
|
|
23
|
-
return element.getAttribute('download');
|
|
24
|
-
},
|
|
25
|
-
renderHTML: function renderHTML(attributes) {
|
|
26
|
-
if (!attributes.download) {
|
|
27
|
-
return {};
|
|
28
|
-
}
|
|
29
|
-
return {
|
|
30
|
-
download: attributes.download
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
},
|
|
36
|
-
// 确保能够解析 HTML 中的 <a> 标签
|
|
37
|
-
parseHTML: function parseHTML() {
|
|
38
|
-
return [{
|
|
39
|
-
tag: 'a[href]',
|
|
40
|
-
getAttrs: function getAttrs(element) {
|
|
41
|
-
if (typeof element === 'string') return false;
|
|
42
|
-
var href = element.getAttribute('href');
|
|
43
|
-
if (!href) return false;
|
|
44
|
-
return {
|
|
45
|
-
href: href,
|
|
46
|
-
target: element.getAttribute('target') || '_blank',
|
|
47
|
-
download: element.getAttribute('download')
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
}];
|
|
51
|
-
},
|
|
52
|
-
renderHTML: function renderHTML(_ref) {
|
|
53
|
-
var HTMLAttributes = _ref.HTMLAttributes;
|
|
54
|
-
return ['a', HTMLAttributes, 0];
|
|
55
|
-
},
|
|
56
|
-
addProseMirrorPlugins: function addProseMirrorPlugins() {
|
|
57
|
-
return [new Plugin({
|
|
58
|
-
key: new PluginKey('linkDownloadHandler'),
|
|
59
|
-
props: {
|
|
60
|
-
handleDOMEvents: {
|
|
61
|
-
click: function click(view, event) {
|
|
62
|
-
var target = event.target;
|
|
63
|
-
var link = target.closest('a[download]');
|
|
64
|
-
if (link) {
|
|
65
|
-
var downloadAttr = link.getAttribute('download');
|
|
66
|
-
var href = link.getAttribute('href');
|
|
67
|
-
if (href && downloadAttr !== null) {
|
|
68
|
-
event.preventDefault();
|
|
69
|
-
var downloadLink = document.createElement('a');
|
|
70
|
-
downloadLink.href = href;
|
|
71
|
-
downloadLink.download = downloadAttr === '' ? href.split('/').pop() || 'download' : downloadAttr;
|
|
72
|
-
document.body.appendChild(downloadLink);
|
|
73
|
-
downloadLink.click();
|
|
74
|
-
document.body.removeChild(downloadLink);
|
|
75
|
-
return true;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
return false;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
})];
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
export default CustomLink;
|
|
File without changes
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
// export * from './Link';
|