@ctzhian/tiptap 1.11.3 → 1.12.0
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 +16 -21
- package/dist/EditorMarkdown/index.js +2 -2
- package/dist/asset/css/index.css +19 -8
- package/dist/component/ActionDropdown/index.d.ts +25 -0
- package/dist/component/ActionDropdown/index.js +147 -0
- package/dist/component/CustomDragHandle/index.js +2 -2
- package/dist/component/FloatingPopover/index.d.ts +2 -0
- package/dist/component/FloatingPopover/index.js +7 -1
- package/dist/component/HoverPopover/index.d.ts +29 -0
- package/dist/component/HoverPopover/index.js +143 -0
- package/dist/component/Icons/chrome-icon.d.ts +6 -0
- package/dist/component/Icons/chrome-icon.js +31 -0
- package/dist/component/Icons/edit-line-icon.d.ts +6 -0
- package/dist/component/Icons/edit-line-icon.js +13 -0
- package/dist/component/Icons/file-icon.d.ts +6 -0
- package/dist/component/Icons/file-icon.js +20 -0
- package/dist/component/Icons/index.d.ts +3 -0
- package/dist/component/Icons/index.js +3 -0
- package/dist/component/index.d.ts +2 -0
- package/dist/component/index.js +2 -0
- package/dist/extension/component/Alert/index.js +73 -85
- package/dist/extension/component/Attachment/AttachmentContent.d.ts +14 -0
- package/dist/extension/component/Attachment/AttachmentContent.js +142 -0
- package/dist/extension/component/Attachment/index.js +144 -201
- package/dist/extension/component/CodeBlock/Readonly.js +43 -35
- package/dist/extension/component/CodeBlock/index.js +139 -90
- package/dist/extension/component/Image/Insert.js +41 -26
- package/dist/extension/component/Image/Readonly.js +13 -6
- package/dist/extension/component/Image/index.d.ts +1 -0
- package/dist/extension/component/Image/index.js +234 -92
- package/dist/extension/component/Link/Insert.js +1 -1
- package/dist/extension/component/Link/LinkContent.d.ts +13 -0
- package/dist/extension/component/Link/LinkContent.js +169 -0
- package/dist/extension/component/Link/index.js +182 -264
- package/dist/extension/component/MentionList/index.js +1 -1
- package/dist/extension/component/UploadProgress/index.d.ts +1 -1
- package/dist/extension/index.js +1 -1
- package/dist/index.css +64 -63
- package/dist/themes/dark.js +2 -2
- package/dist/themes/light.d.ts +1 -1
- package/dist/themes/light.js +2 -2
- package/dist/themes/palette.d.ts +1 -1
- package/package.json +1 -1
- package/dist/extension/component/Attachment/Readonly.d.ts +0 -9
- package/dist/extension/component/Attachment/Readonly.js +0 -91
- package/dist/extension/component/CustomLink/Insert.d.ts +0 -0
- package/dist/extension/component/CustomLink/Insert.js +0 -176
- package/dist/extension/component/CustomLink/Readonly.d.ts +0 -0
- package/dist/extension/component/CustomLink/Readonly.js +0 -106
- package/dist/extension/component/CustomLink/index.d.ts +0 -0
- package/dist/extension/component/CustomLink/index.js +0 -440
- package/dist/extension/component/Link/Readonly.d.ts +0 -8
- package/dist/extension/component/Link/Readonly.js +0 -110
|
@@ -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 EditLineIcon = function EditLineIcon(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: "M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z"
|
|
11
|
+
}));
|
|
12
|
+
};
|
|
13
|
+
EditLineIcon.displayName = 'icon-edit-line';
|
|
@@ -0,0 +1,20 @@
|
|
|
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 FileIcon = function FileIcon(props) {
|
|
5
|
+
return /*#__PURE__*/React.createElement(SvgIcon, _extends({
|
|
6
|
+
viewBox: "0 0 1024 1024",
|
|
7
|
+
version: "1.1",
|
|
8
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
9
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
10
|
+
d: "M929.391304 927.538087c0 51.222261-41.527652 92.749913-92.755478 92.749913H187.364174C136.136348 1020.288 94.608696 978.760348 94.608696 927.538087v-834.782609C94.608696 41.527652 136.136348 0 187.364174 0h440.709565a55.652174 55.652174 0 0 1 39.357218 16.300522L913.085217 261.954783A55.652174 55.652174 0 0 1 929.391304 301.312v626.226087z",
|
|
11
|
+
fill: "#1E89FF",
|
|
12
|
+
"p-id": "10217"
|
|
13
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
14
|
+
d: "M268.521739 301.45113h301.451131c23.184696 0 34.782609 11.592348 34.782608 34.782609 0 23.184696-11.597913 34.782609-34.782608 34.782609H268.521739c-23.190261 0-34.782609-11.597913-34.782609-34.782609 0-23.190261 11.592348-34.782609 34.782609-34.782609zM268.521739 510.146783h440.581565c23.184696 0 34.782609 11.592348 34.782609 34.782608 0 23.184696-11.597913 34.782609-34.782609 34.782609H268.521739c-23.190261 0-34.782609-11.597913-34.782609-34.782609 0-23.190261 11.592348-34.782609 34.782609-34.782608zM268.521739 718.842435h440.581565c23.184696 0 34.782609 11.592348 34.782609 34.782608 0 23.184696-11.597913 34.782609-34.782609 34.782609H268.521739c-23.190261 0-34.782609-11.597913-34.782609-34.782609 0-23.190261 11.592348-34.782609 34.782609-34.782608z",
|
|
15
|
+
fill: "#FFFFFF",
|
|
16
|
+
fillOpacity: ".881",
|
|
17
|
+
"p-id": "10218"
|
|
18
|
+
}));
|
|
19
|
+
};
|
|
20
|
+
FileIcon.displayName = 'icon-file';
|
|
@@ -23,6 +23,7 @@ export { CarouselViewIcon } from './carousel-view-icon';
|
|
|
23
23
|
export { CheckboxBlankCircleLineIcon } from './checkbox-blank-circle-line-icon';
|
|
24
24
|
export { CheckboxCircleFillIcon } from './checkbox-circle-fill-icon';
|
|
25
25
|
export { CheckboxCircleLineIcon } from './checkbox-circle-line-icon';
|
|
26
|
+
export { ChromeIcon } from './chrome-icon';
|
|
26
27
|
export { ClockwiseLineIcon } from './clockwise-line-icon';
|
|
27
28
|
export { CloseCircleFillIcon } from './close-circle-fill-icon';
|
|
28
29
|
export { CodeBoxLineIcon } from './code-box-line-icon';
|
|
@@ -39,11 +40,13 @@ export { DoubleQuotesLIcon } from './double-quotes-l-icon';
|
|
|
39
40
|
export { DownloadLineIcon } from './download-line-icon';
|
|
40
41
|
export { DraggableIcon } from './draggable-icon';
|
|
41
42
|
export { EditBoxLineIcon } from './edit-box-line-icon';
|
|
43
|
+
export { EditLineIcon } from './edit-line-icon';
|
|
42
44
|
export { EraserLineIcon } from './eraser-line-icon';
|
|
43
45
|
export { ErrorWarningFillIcon } from './error-warning-fill-icon';
|
|
44
46
|
export { ExpendIcon } from './expend-icon';
|
|
45
47
|
export { ExportLineIcon } from './export-line-icon';
|
|
46
48
|
export { FileCopyLineIcon } from './file-copy-line-icon';
|
|
49
|
+
export { FileIcon } from './file-icon';
|
|
47
50
|
export { FileUploadLineIcon } from './file-upload-line-icon';
|
|
48
51
|
export { FlipHorizontal2LineIcon } from './flip-horizontal-2-line-icon';
|
|
49
52
|
export { FlowChartIcon } from './flow-chart-icon';
|
|
@@ -26,6 +26,7 @@ export { CarouselViewIcon } from "./carousel-view-icon";
|
|
|
26
26
|
export { CheckboxBlankCircleLineIcon } from "./checkbox-blank-circle-line-icon";
|
|
27
27
|
export { CheckboxCircleFillIcon } from "./checkbox-circle-fill-icon";
|
|
28
28
|
export { CheckboxCircleLineIcon } from "./checkbox-circle-line-icon";
|
|
29
|
+
export { ChromeIcon } from "./chrome-icon";
|
|
29
30
|
export { ClockwiseLineIcon } from "./clockwise-line-icon";
|
|
30
31
|
export { CloseCircleFillIcon } from "./close-circle-fill-icon";
|
|
31
32
|
export { CodeBoxLineIcon } from "./code-box-line-icon";
|
|
@@ -42,11 +43,13 @@ export { DoubleQuotesLIcon } from "./double-quotes-l-icon";
|
|
|
42
43
|
export { DownloadLineIcon } from "./download-line-icon";
|
|
43
44
|
export { DraggableIcon } from "./draggable-icon";
|
|
44
45
|
export { EditBoxLineIcon } from "./edit-box-line-icon";
|
|
46
|
+
export { EditLineIcon } from "./edit-line-icon";
|
|
45
47
|
export { EraserLineIcon } from "./eraser-line-icon";
|
|
46
48
|
export { ErrorWarningFillIcon } from "./error-warning-fill-icon";
|
|
47
49
|
export { ExpendIcon } from "./expend-icon";
|
|
48
50
|
export { ExportLineIcon } from "./export-line-icon";
|
|
49
51
|
export { FileCopyLineIcon } from "./file-copy-line-icon";
|
|
52
|
+
export { FileIcon } from "./file-icon";
|
|
50
53
|
export { FileUploadLineIcon } from "./file-upload-line-icon";
|
|
51
54
|
export { FlipHorizontal2LineIcon } from "./flip-horizontal-2-line-icon";
|
|
52
55
|
export { FlowChartIcon } from "./flow-chart-icon";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { default as ActionDropdown } from './ActionDropdown';
|
|
1
2
|
export { default as FloatingPopover } from './FloatingPopover';
|
|
3
|
+
export { default as HoverPopover } from './HoverPopover';
|
|
2
4
|
export { default as Menu } from './Menu';
|
|
3
5
|
export { default as NestedList } from './Menu/NestedList';
|
package/dist/component/index.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { default as ActionDropdown } from "./ActionDropdown";
|
|
1
2
|
export { default as FloatingPopover } from "./FloatingPopover";
|
|
3
|
+
export { default as HoverPopover } from "./HoverPopover";
|
|
2
4
|
export { default as Menu } from "./Menu";
|
|
3
5
|
export { default as NestedList } from "./Menu/NestedList";
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
|
|
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; }
|
|
7
|
-
import { FloatingPopover } from "../../../component";
|
|
1
|
+
import { ActionDropdown, HoverPopover } from "../../../component";
|
|
8
2
|
import { CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, Information2FillIcon, ScrollToBottomLineIcon, TextIcon, UserSmileFillIcon } from "../../../component/Icons";
|
|
9
3
|
import { ToolbarItem } from "../../../component/Toolbar";
|
|
10
4
|
import { Box, Divider, Stack } from '@mui/material';
|
|
11
5
|
import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
|
|
12
|
-
import React, { useMemo, useRef
|
|
6
|
+
import React, { useMemo, useRef } from 'react';
|
|
13
7
|
var VARIANT_DATA = {
|
|
14
8
|
info: {
|
|
15
9
|
icon: /*#__PURE__*/React.createElement(Information2FillIcon, {
|
|
@@ -60,62 +54,11 @@ var AlertView = function AlertView(_ref) {
|
|
|
60
54
|
selected = _ref.selected;
|
|
61
55
|
var attrs = node.attrs;
|
|
62
56
|
var containerRef = useRef(null);
|
|
63
|
-
var _useState = useState(null),
|
|
64
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
65
|
-
anchorEl = _useState2[0],
|
|
66
|
-
setAnchorEl = _useState2[1];
|
|
67
57
|
var showIcon = attrs.type !== 'text';
|
|
68
58
|
var variantData = useMemo(function () {
|
|
69
59
|
return VARIANT_DATA[attrs.variant || 'info'];
|
|
70
60
|
}, [attrs.variant]);
|
|
71
|
-
var
|
|
72
|
-
return setAnchorEl(event.currentTarget);
|
|
73
|
-
};
|
|
74
|
-
var handleCloseOperationPopover = function handleCloseOperationPopover() {
|
|
75
|
-
return setAnchorEl(null);
|
|
76
|
-
};
|
|
77
|
-
return /*#__PURE__*/React.createElement(NodeViewWrapper, {
|
|
78
|
-
ref: containerRef,
|
|
79
|
-
className: "alert-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
|
|
80
|
-
"data-drag-handle": true,
|
|
81
|
-
as: 'div',
|
|
82
|
-
style: {
|
|
83
|
-
marginLeft: (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.indent ? node.attrs.indent * 32 : undefined,
|
|
84
|
-
border: '1px solid',
|
|
85
|
-
borderColor: variantData.color,
|
|
86
|
-
// color: attrs.variant === 'default' ? 'var(--mui-palette-text-primary)' : variantData.color,
|
|
87
|
-
borderRadius: '10px',
|
|
88
|
-
padding: '12px 16px',
|
|
89
|
-
lineHeight: 1.625,
|
|
90
|
-
display: 'flex',
|
|
91
|
-
alignItems: 'flex-start',
|
|
92
|
-
gap: '16px',
|
|
93
|
-
background: attrs.variant === 'default' ? 'var(--mui-palette-background-paper3)' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
|
|
94
|
-
},
|
|
95
|
-
onClick: handleShowOperationPopover
|
|
96
|
-
}, showIcon && /*#__PURE__*/React.createElement(Box, {
|
|
97
|
-
sx: {
|
|
98
|
-
pt: '2px',
|
|
99
|
-
lineHeight: 1,
|
|
100
|
-
color: attrs.variant === 'default' ? 'text.disabled' : variantData.color
|
|
101
|
-
}
|
|
102
|
-
}, variantData.icon), /*#__PURE__*/React.createElement(Box, {
|
|
103
|
-
sx: {
|
|
104
|
-
flex: 1,
|
|
105
|
-
width: 0,
|
|
106
|
-
'code': {
|
|
107
|
-
borderColor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 30%, transparent) !important"),
|
|
108
|
-
bgcolor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent) !important")
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
}, /*#__PURE__*/React.createElement(NodeViewContent, {
|
|
112
|
-
as: 'div'
|
|
113
|
-
})), editor.isEditable && /*#__PURE__*/React.createElement(FloatingPopover, {
|
|
114
|
-
open: Boolean(anchorEl),
|
|
115
|
-
anchorEl: anchorEl,
|
|
116
|
-
onClose: handleCloseOperationPopover,
|
|
117
|
-
placement: "top"
|
|
118
|
-
}, /*#__PURE__*/React.createElement(Stack, {
|
|
61
|
+
var operationMenu = /*#__PURE__*/React.createElement(Stack, {
|
|
119
62
|
direction: 'row',
|
|
120
63
|
alignItems: 'center',
|
|
121
64
|
sx: {
|
|
@@ -200,33 +143,78 @@ var AlertView = function AlertView(_ref) {
|
|
|
200
143
|
alignSelf: 'center',
|
|
201
144
|
borderColor: 'divider'
|
|
202
145
|
}
|
|
203
|
-
}), /*#__PURE__*/React.createElement(
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
146
|
+
}), /*#__PURE__*/React.createElement(ActionDropdown, {
|
|
147
|
+
list: [{
|
|
148
|
+
key: 'text',
|
|
149
|
+
label: '文字',
|
|
150
|
+
icon: /*#__PURE__*/React.createElement(TextIcon, {
|
|
151
|
+
sx: {
|
|
152
|
+
fontSize: '1rem'
|
|
153
|
+
}
|
|
154
|
+
}),
|
|
155
|
+
onClick: function onClick() {
|
|
156
|
+
return updateAttributes({
|
|
157
|
+
type: 'text'
|
|
158
|
+
});
|
|
207
159
|
}
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
160
|
+
}, {
|
|
161
|
+
key: 'icon',
|
|
162
|
+
label: '图标文字',
|
|
163
|
+
icon: /*#__PURE__*/React.createElement(ScrollToBottomLineIcon, {
|
|
164
|
+
sx: {
|
|
165
|
+
transform: 'rotate(90deg)',
|
|
166
|
+
fontSize: '1rem'
|
|
167
|
+
}
|
|
168
|
+
}),
|
|
169
|
+
onClick: function onClick() {
|
|
170
|
+
return updateAttributes({
|
|
171
|
+
type: 'icon'
|
|
172
|
+
});
|
|
221
173
|
}
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
174
|
+
}],
|
|
175
|
+
selected: attrs.type || 'icon',
|
|
176
|
+
tip: "\u7C7B\u578B"
|
|
177
|
+
}));
|
|
178
|
+
return /*#__PURE__*/React.createElement(HoverPopover, {
|
|
179
|
+
actions: operationMenu,
|
|
180
|
+
hoverDelay: 500,
|
|
181
|
+
closeDelay: 300,
|
|
182
|
+
placement: "top",
|
|
183
|
+
disabled: !editor.isEditable
|
|
184
|
+
}, /*#__PURE__*/React.createElement(NodeViewWrapper, {
|
|
185
|
+
ref: containerRef,
|
|
186
|
+
className: "alert-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
|
|
187
|
+
"data-drag-handle": true,
|
|
188
|
+
as: 'div',
|
|
189
|
+
style: {
|
|
190
|
+
marginLeft: (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.indent ? node.attrs.indent * 32 : undefined,
|
|
191
|
+
border: '1px solid',
|
|
192
|
+
borderColor: "color-mix(in srgb, ".concat(variantData.color, " 50%, transparent)"),
|
|
193
|
+
borderRadius: '10px',
|
|
194
|
+
padding: '16px',
|
|
195
|
+
lineHeight: 1.625,
|
|
196
|
+
display: 'flex',
|
|
197
|
+
alignItems: 'flex-start',
|
|
198
|
+
gap: '16px',
|
|
199
|
+
background: attrs.variant === 'default' ? 'var(--mui-palette-background-paper3)' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
|
|
200
|
+
}
|
|
201
|
+
}, showIcon && /*#__PURE__*/React.createElement(Box, {
|
|
202
|
+
sx: {
|
|
203
|
+
pt: '2px',
|
|
204
|
+
lineHeight: 1,
|
|
205
|
+
color: attrs.variant === 'default' ? 'text.disabled' : variantData.color
|
|
206
|
+
}
|
|
207
|
+
}, variantData.icon), /*#__PURE__*/React.createElement(Box, {
|
|
208
|
+
sx: {
|
|
209
|
+
flex: 1,
|
|
210
|
+
width: 0,
|
|
211
|
+
'code': {
|
|
212
|
+
borderColor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 30%, transparent) !important"),
|
|
213
|
+
bgcolor: attrs.variant === 'default' ? '' : "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent) !important")
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}, /*#__PURE__*/React.createElement(NodeViewContent, {
|
|
217
|
+
as: 'div'
|
|
230
218
|
}))));
|
|
231
219
|
};
|
|
232
220
|
export default AlertView;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AttachmentAttributes } from ".";
|
|
3
|
+
interface AttachmentContentProps {
|
|
4
|
+
attrs: AttachmentAttributes;
|
|
5
|
+
type: 'icon' | 'block';
|
|
6
|
+
/** 是否为编辑模式 */
|
|
7
|
+
editable?: boolean;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* 附件内容组件
|
|
11
|
+
* 用于渲染附件的实际内容,支持编辑和只读模式
|
|
12
|
+
*/
|
|
13
|
+
export declare const AttachmentContent: React.FC<AttachmentContentProps>;
|
|
14
|
+
export default AttachmentContent;
|
|
@@ -0,0 +1,142 @@
|
|
|
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 { FileIcon } from "../../../component/Icons";
|
|
3
|
+
import { Box, Stack } from "@mui/material";
|
|
4
|
+
import React from "react";
|
|
5
|
+
/**
|
|
6
|
+
* 附件内容组件
|
|
7
|
+
* 用于渲染附件的实际内容,支持编辑和只读模式
|
|
8
|
+
*/
|
|
9
|
+
export var AttachmentContent = function AttachmentContent(_ref) {
|
|
10
|
+
var attrs = _ref.attrs,
|
|
11
|
+
type = _ref.type,
|
|
12
|
+
_ref$editable = _ref.editable,
|
|
13
|
+
editable = _ref$editable === void 0 ? false : _ref$editable;
|
|
14
|
+
// 编辑模式和只读模式的样式差异
|
|
15
|
+
var blockStyles = editable ? {
|
|
16
|
+
display: 'flex',
|
|
17
|
+
border: '1px solid',
|
|
18
|
+
borderColor: attrs.url === 'error' ? 'error.main' : 'divider',
|
|
19
|
+
cursor: 'pointer',
|
|
20
|
+
borderRadius: 'var(--mui-shape-borderRadius)',
|
|
21
|
+
bgcolor: 'background.paper',
|
|
22
|
+
p: 2,
|
|
23
|
+
color: 'inherit',
|
|
24
|
+
':hover': {
|
|
25
|
+
borderColor: attrs.url === 'error' ? 'error.main' : 'primary.main'
|
|
26
|
+
}
|
|
27
|
+
} : {
|
|
28
|
+
display: 'block'
|
|
29
|
+
};
|
|
30
|
+
var blockInnerStyles = editable ? {
|
|
31
|
+
width: '100%'
|
|
32
|
+
} : {
|
|
33
|
+
border: '1px solid',
|
|
34
|
+
borderColor: attrs.url === 'error' ? 'error.main' : 'divider',
|
|
35
|
+
color: 'text.primary',
|
|
36
|
+
cursor: 'pointer',
|
|
37
|
+
borderRadius: 'var(--mui-shape-borderRadius)',
|
|
38
|
+
bgcolor: 'background.paper',
|
|
39
|
+
p: 2,
|
|
40
|
+
':hover': {
|
|
41
|
+
borderColor: attrs.url === 'error' ? 'error.main' : 'primary.main'
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
var inlineStyles = editable ? {
|
|
45
|
+
color: 'primary.main',
|
|
46
|
+
cursor: 'pointer',
|
|
47
|
+
borderRadius: 'var(--mui-shape-borderRadius)',
|
|
48
|
+
transition: 'background-color 0.2s ease',
|
|
49
|
+
display: 'inline',
|
|
50
|
+
':hover': {
|
|
51
|
+
bgcolor: 'background.paper'
|
|
52
|
+
}
|
|
53
|
+
} : {
|
|
54
|
+
display: 'inline-flex',
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
gap: 0.5,
|
|
57
|
+
color: 'primary.main',
|
|
58
|
+
cursor: 'pointer'
|
|
59
|
+
};
|
|
60
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, type === 'block' ? /*#__PURE__*/React.createElement(Box, _extends({
|
|
61
|
+
component: "a",
|
|
62
|
+
href: attrs.url,
|
|
63
|
+
target: "_blank",
|
|
64
|
+
download: attrs.title
|
|
65
|
+
}, !editable && {
|
|
66
|
+
'data-title': attrs.title,
|
|
67
|
+
'data-type': attrs.type
|
|
68
|
+
}, {
|
|
69
|
+
sx: blockStyles
|
|
70
|
+
}), /*#__PURE__*/React.createElement(Stack, _extends({
|
|
71
|
+
direction: 'row',
|
|
72
|
+
alignItems: 'center',
|
|
73
|
+
gap: 2,
|
|
74
|
+
sx: blockInnerStyles
|
|
75
|
+
}, !editable && {
|
|
76
|
+
'data-title': attrs.title,
|
|
77
|
+
'data-type': type
|
|
78
|
+
}), /*#__PURE__*/React.createElement(FileIcon, {
|
|
79
|
+
sx: {
|
|
80
|
+
fontSize: '2rem',
|
|
81
|
+
cursor: 'grab',
|
|
82
|
+
color: attrs.url === 'error' ? 'error.main' : 'primary.main',
|
|
83
|
+
alignSelf: 'center',
|
|
84
|
+
':active': {
|
|
85
|
+
cursor: 'grabbing'
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
|
89
|
+
sx: {
|
|
90
|
+
flex: 1
|
|
91
|
+
},
|
|
92
|
+
gap: 0.5
|
|
93
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
94
|
+
sx: {
|
|
95
|
+
fontSize: '0.875rem',
|
|
96
|
+
fontWeight: 'bold'
|
|
97
|
+
}
|
|
98
|
+
}, attrs.title), /*#__PURE__*/React.createElement(Box, {
|
|
99
|
+
sx: {
|
|
100
|
+
fontSize: '0.75rem',
|
|
101
|
+
color: 'text.secondary'
|
|
102
|
+
}
|
|
103
|
+
}, attrs.size)))) : /*#__PURE__*/React.createElement(Box, _extends({
|
|
104
|
+
component: "a",
|
|
105
|
+
href: attrs.url,
|
|
106
|
+
target: "_blank",
|
|
107
|
+
download: attrs.title
|
|
108
|
+
}, !editable && {
|
|
109
|
+
'data-title': attrs.title,
|
|
110
|
+
'data-type': attrs.type
|
|
111
|
+
}, {
|
|
112
|
+
sx: inlineStyles
|
|
113
|
+
}), editable ? /*#__PURE__*/React.createElement(Box, {
|
|
114
|
+
component: 'span',
|
|
115
|
+
sx: {
|
|
116
|
+
display: 'inline-flex',
|
|
117
|
+
alignItems: 'center',
|
|
118
|
+
gap: 0.5
|
|
119
|
+
}
|
|
120
|
+
}, /*#__PURE__*/React.createElement(FileIcon, {
|
|
121
|
+
sx: {
|
|
122
|
+
fontSize: '0.875rem',
|
|
123
|
+
cursor: 'grab',
|
|
124
|
+
color: 'primary.main',
|
|
125
|
+
alignSelf: 'center',
|
|
126
|
+
':active': {
|
|
127
|
+
cursor: 'grabbing'
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}), attrs.title) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FileIcon, {
|
|
131
|
+
sx: {
|
|
132
|
+
fontSize: '0.875rem',
|
|
133
|
+
cursor: 'grab',
|
|
134
|
+
color: 'primary.main',
|
|
135
|
+
alignSelf: 'center',
|
|
136
|
+
':active': {
|
|
137
|
+
cursor: 'grabbing'
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}), attrs.title)));
|
|
141
|
+
};
|
|
142
|
+
export default AttachmentContent;
|