@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.
@@ -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: "center",
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,6 @@
1
+ import { SvgIconProps } from "@mui/material";
2
+ import * as React from "react";
3
+ export declare const CollapseHorizontalLine: {
4
+ (props: SvgIconProps): React.JSX.Element;
5
+ displayName: string;
6
+ };
@@ -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,6 @@
1
+ import { SvgIconProps } from '@mui/material';
2
+ import * as React from 'react';
3
+ export declare const ExpandHorizontalLineIcon: {
4
+ (props: SvgIconProps): React.JSX.Element;
5
+ displayName: string;
6
+ };
@@ -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
- }), !isMarkdown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
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({
@@ -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(CustomLink, Markdown.configure({
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 (_ref5) {
211
- var commands = _ref5.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,6 +1,6 @@
1
1
  {
2
2
  "name": "@ctzhian/tiptap",
3
- "version": "1.13.3",
3
+ "version": "1.13.5",
4
4
  "description": "基于 Tiptap 二次开发的编辑器组件",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -1,2 +0,0 @@
1
- declare const CustomLink: import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any>;
2
- export default CustomLink;
@@ -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';