@ctzhian/tiptap 1.2.1 → 1.3.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 +1 -1
- package/dist/component/CustomBubbleMenu/SelectionText.js +6 -13
- package/dist/component/Icons/index.d.ts +1 -0
- package/dist/component/Icons/index.js +2 -1
- package/dist/component/Icons/window-fill-icon.d.ts +6 -0
- package/dist/component/Icons/window-fill-icon.js +13 -0
- package/dist/contants/enums.d.ts +1 -0
- package/dist/contants/enums.js +4 -1
- package/dist/contants/slash-commands.js +29 -29
- package/dist/extension/component/Iframe/Insert.d.ts +14 -0
- package/dist/extension/component/Iframe/Insert.js +112 -0
- package/dist/extension/component/Iframe/Readonly.d.ts +10 -0
- package/dist/extension/component/Iframe/Readonly.js +14 -0
- package/dist/extension/component/Iframe/index.d.ts +5 -0
- package/dist/extension/component/Iframe/index.js +290 -0
- package/dist/extension/component/SlashCommandsList/index.js +1 -3
- package/dist/extension/index.js +3 -1
- package/dist/extension/node/FileHandler.d.ts +1 -1
- package/dist/extension/node/Iframe.d.ts +16 -0
- package/dist/extension/node/Iframe.js +118 -0
- package/dist/extension/node/index.d.ts +1 -0
- package/dist/extension/node/index.js +1 -0
- package/dist/extension/suggestion/slash.js +0 -1
- package/package.json +1 -1
package/dist/Editor/demo.js
CHANGED
|
@@ -81,7 +81,7 @@ var Reader = function Reader() {
|
|
|
81
81
|
}
|
|
82
82
|
return onUpload;
|
|
83
83
|
}(),
|
|
84
|
-
content: "<
|
|
84
|
+
content: "<iframe class=\"iframe-wrapper\" width=\"760\" height=\"400\" src=\"https://bbs.chaitin.cn/user/signin?ref=%2F\" frameborder=\"0\" allowfullscreen=\"true\"></iframe><p></p>"
|
|
85
85
|
}),
|
|
86
86
|
editor = _useTiptap.editor;
|
|
87
87
|
return /*#__PURE__*/React.createElement(EditorThemeProvider, {
|
|
@@ -15,11 +15,7 @@ var SelectionText = function SelectionText(_ref) {
|
|
|
15
15
|
var theme = useTheme();
|
|
16
16
|
var THEME_TEXT_COLOR = [theme.palette.primary.main, theme.palette.success.main, theme.palette.warning.main, theme.palette.error.main, '#D8A47F', '#73B5F0', '#CDDFA0', theme.palette.text.primary, theme.palette.text.secondary, theme.palette.text.disabled, theme.palette.common.white];
|
|
17
17
|
var THEME_TEXT_BG_COLOR = ['#e7bdff', '#FFE0B2', '#F8BBD0', '#FFCDD2', '#FFECB3', '#FFCCBC', '#B3E5FC', '#C8E6C9', '#B2EBF2', '#BBDEFB', '#DCEDC8'];
|
|
18
|
-
var _useState = useState(
|
|
19
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
20
|
-
hideColor = _useState2[0],
|
|
21
|
-
setHideColor = _useState2[1];
|
|
22
|
-
var _useState3 = useState({
|
|
18
|
+
var _useState = useState({
|
|
23
19
|
quote: false,
|
|
24
20
|
bold: false,
|
|
25
21
|
italic: false,
|
|
@@ -29,11 +25,9 @@ var SelectionText = function SelectionText(_ref) {
|
|
|
29
25
|
superscript: false,
|
|
30
26
|
subscript: false
|
|
31
27
|
}),
|
|
32
|
-
|
|
33
|
-
active =
|
|
34
|
-
setActive =
|
|
35
|
-
// const [showColorPicker, setShowColorPicker] = useState(false)
|
|
36
|
-
|
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
+
active = _useState2[0],
|
|
30
|
+
setActive = _useState2[1];
|
|
37
31
|
var updateSelection = function updateSelection() {
|
|
38
32
|
setActive({
|
|
39
33
|
quote: editor.isActive('blockquote'),
|
|
@@ -45,7 +39,6 @@ var SelectionText = function SelectionText(_ref) {
|
|
|
45
39
|
superscript: editor.isActive('superscript'),
|
|
46
40
|
subscript: editor.isActive('subscript')
|
|
47
41
|
});
|
|
48
|
-
setHideColor(editor.isActive('codeBlock') || editor.isActive('horizontalRule') || editor.isActive('inlineMath') || editor.isActive('blockMath'));
|
|
49
42
|
};
|
|
50
43
|
useEffect(function () {
|
|
51
44
|
editor.on('selectionUpdate', updateSelection);
|
|
@@ -55,7 +48,7 @@ var SelectionText = function SelectionText(_ref) {
|
|
|
55
48
|
editor.off('transaction', updateSelection);
|
|
56
49
|
};
|
|
57
50
|
}, [editor]);
|
|
58
|
-
if (!editor.isEditable
|
|
51
|
+
if (!editor.isEditable) {
|
|
59
52
|
return null;
|
|
60
53
|
}
|
|
61
54
|
return /*#__PURE__*/React.createElement(BubbleMenu, {
|
|
@@ -69,7 +62,7 @@ var SelectionText = function SelectionText(_ref) {
|
|
|
69
62
|
var editorProps = _ref2.editor,
|
|
70
63
|
from = _ref2.from,
|
|
71
64
|
to = _ref2.to;
|
|
72
|
-
if (editorProps.state.selection.empty || editorProps.isActive('image') || editorProps.isActive('video') || editorProps.isActive('audio') || editorProps.isActive('emoji') || editorProps.isActive('codeBlock') || editorProps.isActive('blockLink') || editorProps.isActive('inlineLink') || editorProps.isActive('blockAttachment') || editorProps.isActive('inlineAttachment') || editorProps.isActive('horizontalRule')) {
|
|
65
|
+
if (editorProps.state.selection.empty || editorProps.isActive('image') || editorProps.isActive('video') || editorProps.isActive('audio') || editorProps.isActive('emoji') || editorProps.isActive('codeBlock') || editorProps.isActive('blockMath') || editorProps.isActive('inlineMath') || editorProps.isActive('blockLink') || editorProps.isActive('inlineLink') || editorProps.isActive('blockAttachment') || editorProps.isActive('inlineAttachment') || editorProps.isActive('horizontalRule') || editorProps.isActive('iframe')) {
|
|
73
66
|
return false;
|
|
74
67
|
}
|
|
75
68
|
return true;
|
|
@@ -114,3 +114,4 @@ export { UploadCloud2LineIcon } from './upload-cloud-2-line-icon';
|
|
|
114
114
|
export { UploadIcon } from './upload-icon';
|
|
115
115
|
export { VolumeMuteLineIcon } from './volume-mute-line-icon';
|
|
116
116
|
export { VolumeUpLineIcon } from './volume-up-line-icon';
|
|
117
|
+
export { WindowFillIcon } from './window-fill-icon';
|
|
@@ -116,4 +116,5 @@ export { UnderlineIcon } from "./underline-icon";
|
|
|
116
116
|
export { UploadCloud2LineIcon } from "./upload-cloud-2-line-icon";
|
|
117
117
|
export { UploadIcon } from "./upload-icon";
|
|
118
118
|
export { VolumeMuteLineIcon } from "./volume-mute-line-icon";
|
|
119
|
-
export { VolumeUpLineIcon } from "./volume-up-line-icon";
|
|
119
|
+
export { VolumeUpLineIcon } from "./volume-up-line-icon";
|
|
120
|
+
export { WindowFillIcon } from "./window-fill-icon";
|
|
@@ -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 WindowFillIcon = function WindowFillIcon(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: "M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 10H4V19H20V10ZM5 6V8H7V6H5ZM9 6V8H11V6H9Z"
|
|
11
|
+
}));
|
|
12
|
+
};
|
|
13
|
+
WindowFillIcon.displayName = 'icon-window-fill';
|
package/dist/contants/enums.d.ts
CHANGED
package/dist/contants/enums.js
CHANGED
|
@@ -21,6 +21,7 @@ export var NodeTypeEnum = /*#__PURE__*/function (NodeTypeEnum) {
|
|
|
21
21
|
NodeTypeEnum["Video"] = "video";
|
|
22
22
|
NodeTypeEnum["Audio"] = "audio";
|
|
23
23
|
NodeTypeEnum["Link"] = "link";
|
|
24
|
+
NodeTypeEnum["Iframe"] = "iframe";
|
|
24
25
|
NodeTypeEnum["Code"] = "code";
|
|
25
26
|
NodeTypeEnum["InlineMath"] = "inlineMath";
|
|
26
27
|
NodeTypeEnum["BlockMath"] = "blockMath";
|
|
@@ -96,10 +97,12 @@ export var NODE_TYPE_LABEL = (_NODE_TYPE_LABEL = {}, _defineProperty(_defineProp
|
|
|
96
97
|
label: '链接'
|
|
97
98
|
}), NodeTypeEnum.Image, {
|
|
98
99
|
label: '图片'
|
|
100
|
+
}), NodeTypeEnum.Iframe, {
|
|
101
|
+
label: 'iframe'
|
|
99
102
|
}), NodeTypeEnum.InlineMath, {
|
|
100
103
|
label: '行内公式'
|
|
101
104
|
}), NodeTypeEnum.InlineAttachment, {
|
|
102
105
|
label: '附件'
|
|
103
|
-
}), NodeTypeEnum.HorizontalRule, {
|
|
106
|
+
}), _defineProperty(_NODE_TYPE_LABEL, NodeTypeEnum.HorizontalRule, {
|
|
104
107
|
label: '分割线'
|
|
105
108
|
}));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { AttachmentLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2LineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, TextWrapIcon } from "../component/Icons";
|
|
2
|
+
import { AttachmentLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2LineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, TextWrapIcon, WindowFillIcon } from "../component/Icons";
|
|
3
3
|
export var slashCommands = [{
|
|
4
4
|
title: '一级标题',
|
|
5
5
|
icon: /*#__PURE__*/React.createElement(H1Icon, {
|
|
@@ -223,36 +223,40 @@ export var slashCommands = [{
|
|
|
223
223
|
}).run();
|
|
224
224
|
}
|
|
225
225
|
}, {
|
|
226
|
-
title: '
|
|
227
|
-
icon: /*#__PURE__*/React.createElement(
|
|
226
|
+
title: 'iframe',
|
|
227
|
+
icon: /*#__PURE__*/React.createElement(WindowFillIcon, {
|
|
228
228
|
sx: {
|
|
229
229
|
fontSize: '1rem'
|
|
230
230
|
}
|
|
231
231
|
}),
|
|
232
232
|
command: function command(_ref18) {
|
|
233
233
|
var editor = _ref18.editor,
|
|
234
|
-
range = _ref18.range
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
234
|
+
range = _ref18.range;
|
|
235
|
+
editor.chain().focus().deleteRange(range).setIframe({
|
|
236
|
+
src: '',
|
|
237
|
+
width: 760,
|
|
238
|
+
height: 400
|
|
239
239
|
}).run();
|
|
240
240
|
}
|
|
241
241
|
}, {
|
|
242
|
-
title: '
|
|
243
|
-
icon: /*#__PURE__*/React.createElement(
|
|
242
|
+
title: '警告提示',
|
|
243
|
+
icon: /*#__PURE__*/React.createElement(Information2LineIcon, {
|
|
244
244
|
sx: {
|
|
245
245
|
fontSize: '1rem'
|
|
246
246
|
}
|
|
247
247
|
}),
|
|
248
248
|
command: function command(_ref19) {
|
|
249
249
|
var editor = _ref19.editor,
|
|
250
|
-
range = _ref19.range
|
|
251
|
-
|
|
250
|
+
range = _ref19.range,
|
|
251
|
+
attrs = _ref19.attrs;
|
|
252
|
+
editor.chain().focus().deleteRange(range).toggleAlert({
|
|
253
|
+
type: (attrs === null || attrs === void 0 ? void 0 : attrs.type) || 'icon',
|
|
254
|
+
variant: (attrs === null || attrs === void 0 ? void 0 : attrs.variant) || 'info'
|
|
255
|
+
}).run();
|
|
252
256
|
}
|
|
253
257
|
}, {
|
|
254
|
-
title: '
|
|
255
|
-
icon: /*#__PURE__*/React.createElement(
|
|
258
|
+
title: '折叠块',
|
|
259
|
+
icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
|
|
256
260
|
sx: {
|
|
257
261
|
fontSize: '1rem'
|
|
258
262
|
}
|
|
@@ -260,11 +264,11 @@ export var slashCommands = [{
|
|
|
260
264
|
command: function command(_ref20) {
|
|
261
265
|
var editor = _ref20.editor,
|
|
262
266
|
range = _ref20.range;
|
|
263
|
-
editor.chain().focus().deleteRange(range).
|
|
267
|
+
editor.chain().focus().deleteRange(range).setDetails().run();
|
|
264
268
|
}
|
|
265
269
|
}, {
|
|
266
|
-
title: '
|
|
267
|
-
icon: /*#__PURE__*/React.createElement(
|
|
270
|
+
title: '代码块',
|
|
271
|
+
icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
|
|
268
272
|
sx: {
|
|
269
273
|
fontSize: '1rem'
|
|
270
274
|
}
|
|
@@ -272,13 +276,11 @@ export var slashCommands = [{
|
|
|
272
276
|
command: function command(_ref21) {
|
|
273
277
|
var editor = _ref21.editor,
|
|
274
278
|
range = _ref21.range;
|
|
275
|
-
editor.chain().focus().deleteRange(range).
|
|
276
|
-
latex: ''
|
|
277
|
-
}).run();
|
|
279
|
+
editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
|
|
278
280
|
}
|
|
279
281
|
}, {
|
|
280
|
-
title: '
|
|
281
|
-
icon: /*#__PURE__*/React.createElement(
|
|
282
|
+
title: '行内数学公式',
|
|
283
|
+
icon: /*#__PURE__*/React.createElement(SquareRootIcon, {
|
|
282
284
|
sx: {
|
|
283
285
|
fontSize: '1rem'
|
|
284
286
|
}
|
|
@@ -286,13 +288,13 @@ export var slashCommands = [{
|
|
|
286
288
|
command: function command(_ref22) {
|
|
287
289
|
var editor = _ref22.editor,
|
|
288
290
|
range = _ref22.range;
|
|
289
|
-
editor.chain().focus().deleteRange(range).
|
|
291
|
+
editor.chain().focus().deleteRange(range).setInlineMath({
|
|
290
292
|
latex: ''
|
|
291
293
|
}).run();
|
|
292
294
|
}
|
|
293
295
|
}, {
|
|
294
|
-
title: '
|
|
295
|
-
icon: /*#__PURE__*/React.createElement(
|
|
296
|
+
title: '块级数学公式',
|
|
297
|
+
icon: /*#__PURE__*/React.createElement(FunctionsIcon, {
|
|
296
298
|
sx: {
|
|
297
299
|
fontSize: '1rem'
|
|
298
300
|
}
|
|
@@ -300,10 +302,8 @@ export var slashCommands = [{
|
|
|
300
302
|
command: function command(_ref23) {
|
|
301
303
|
var editor = _ref23.editor,
|
|
302
304
|
range = _ref23.range;
|
|
303
|
-
editor.chain().focus().deleteRange(range).
|
|
304
|
-
|
|
305
|
-
cols: 4,
|
|
306
|
-
withHeaderRow: true
|
|
305
|
+
editor.chain().focus().deleteRange(range).setBlockMath({
|
|
306
|
+
latex: ''
|
|
307
307
|
}).run();
|
|
308
308
|
}
|
|
309
309
|
}, {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { EditorFnProps } from "../../../type";
|
|
2
|
+
import React from "react";
|
|
3
|
+
export type IframeAttributes = {
|
|
4
|
+
src: string;
|
|
5
|
+
width: number;
|
|
6
|
+
height: number;
|
|
7
|
+
};
|
|
8
|
+
type InsertIframeProps = {
|
|
9
|
+
selected: boolean;
|
|
10
|
+
attrs: IframeAttributes;
|
|
11
|
+
updateAttributes: (attrs: IframeAttributes) => void;
|
|
12
|
+
} & EditorFnProps;
|
|
13
|
+
declare const InsertIframe: ({ selected, attrs, updateAttributes }: InsertIframeProps) => React.JSX.Element;
|
|
14
|
+
export default InsertIframe;
|
|
@@ -0,0 +1,112 @@
|
|
|
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; }
|
|
7
|
+
import { FloatingPopover } from "../../../component/FloatingPopover";
|
|
8
|
+
import { WindowFillIcon } from "../../../component/Icons";
|
|
9
|
+
import { Box, Button, Stack, TextField } from "@mui/material";
|
|
10
|
+
import { NodeViewWrapper } from "@tiptap/react";
|
|
11
|
+
import React, { useState } from "react";
|
|
12
|
+
var InsertIframe = function InsertIframe(_ref) {
|
|
13
|
+
var selected = _ref.selected,
|
|
14
|
+
attrs = _ref.attrs,
|
|
15
|
+
updateAttributes = _ref.updateAttributes;
|
|
16
|
+
var _useState = useState(attrs.src || ''),
|
|
17
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
18
|
+
editUrl = _useState2[0],
|
|
19
|
+
setEditUrl = _useState2[1];
|
|
20
|
+
var _useState3 = useState(null),
|
|
21
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
22
|
+
anchorEl = _useState4[0],
|
|
23
|
+
setAnchorEl = _useState4[1];
|
|
24
|
+
var handleShowPopover = function handleShowPopover(event) {
|
|
25
|
+
return setAnchorEl(event.currentTarget);
|
|
26
|
+
};
|
|
27
|
+
var handleClosePopover = function handleClosePopover() {
|
|
28
|
+
return setAnchorEl(null);
|
|
29
|
+
};
|
|
30
|
+
var handleInsert = function handleInsert() {
|
|
31
|
+
if (!editUrl.trim()) return;
|
|
32
|
+
updateAttributes({
|
|
33
|
+
src: editUrl.trim(),
|
|
34
|
+
width: attrs.width,
|
|
35
|
+
height: attrs.height
|
|
36
|
+
});
|
|
37
|
+
handleClosePopover();
|
|
38
|
+
};
|
|
39
|
+
return /*#__PURE__*/React.createElement(NodeViewWrapper, {
|
|
40
|
+
className: "iframe-wrapper",
|
|
41
|
+
"data-drag-handle": true
|
|
42
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
43
|
+
direction: 'row',
|
|
44
|
+
alignItems: 'center',
|
|
45
|
+
gap: 2,
|
|
46
|
+
onClick: handleShowPopover,
|
|
47
|
+
sx: {
|
|
48
|
+
border: '1px dashed',
|
|
49
|
+
borderColor: 'divider',
|
|
50
|
+
borderRadius: 'var(--mui-shape-borderRadius)',
|
|
51
|
+
px: 2,
|
|
52
|
+
py: 1.5,
|
|
53
|
+
minWidth: 200,
|
|
54
|
+
textAlign: 'center',
|
|
55
|
+
color: 'text.secondary',
|
|
56
|
+
bgcolor: 'action.default',
|
|
57
|
+
position: 'relative',
|
|
58
|
+
overflow: 'hidden',
|
|
59
|
+
cursor: 'pointer',
|
|
60
|
+
'&:hover': {
|
|
61
|
+
bgcolor: 'action.hover'
|
|
62
|
+
},
|
|
63
|
+
'&:active': {
|
|
64
|
+
bgcolor: 'action.selected'
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}, /*#__PURE__*/React.createElement(WindowFillIcon, {
|
|
68
|
+
sx: {
|
|
69
|
+
fontSize: '1rem',
|
|
70
|
+
position: 'relative',
|
|
71
|
+
flexShrink: 0
|
|
72
|
+
}
|
|
73
|
+
}), /*#__PURE__*/React.createElement(Box, {
|
|
74
|
+
sx: {
|
|
75
|
+
fontSize: '0.875rem',
|
|
76
|
+
position: 'relative',
|
|
77
|
+
flexGrow: 1,
|
|
78
|
+
textAlign: 'left'
|
|
79
|
+
}
|
|
80
|
+
}, "\u70B9\u51FB\u6B64\u5904\u5D4C\u5165 iframe")), /*#__PURE__*/React.createElement(FloatingPopover, {
|
|
81
|
+
open: Boolean(anchorEl),
|
|
82
|
+
anchorEl: anchorEl,
|
|
83
|
+
onClose: handleClosePopover,
|
|
84
|
+
placement: "bottom"
|
|
85
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
86
|
+
gap: 2,
|
|
87
|
+
sx: {
|
|
88
|
+
p: 2,
|
|
89
|
+
width: 350
|
|
90
|
+
}
|
|
91
|
+
}, /*#__PURE__*/React.createElement(TextField, {
|
|
92
|
+
fullWidth: true,
|
|
93
|
+
size: "small",
|
|
94
|
+
value: editUrl,
|
|
95
|
+
onChange: function onChange(e) {
|
|
96
|
+
return setEditUrl(e.target.value);
|
|
97
|
+
},
|
|
98
|
+
placeholder: "\u8F93\u5165\u8981\u5D4C\u5165\u7684 URL"
|
|
99
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
|
100
|
+
direction: 'row',
|
|
101
|
+
gap: 1
|
|
102
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
103
|
+
variant: "outlined",
|
|
104
|
+
fullWidth: true,
|
|
105
|
+
onClick: handleClosePopover
|
|
106
|
+
}, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
|
|
107
|
+
variant: "contained",
|
|
108
|
+
fullWidth: true,
|
|
109
|
+
onClick: handleInsert
|
|
110
|
+
}, "\u5D4C\u5165")))));
|
|
111
|
+
};
|
|
112
|
+
export default InsertIframe;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
var ReadonlyIframe = function ReadonlyIframe(_ref) {
|
|
3
|
+
var attrs = _ref.attrs;
|
|
4
|
+
return /*#__PURE__*/React.createElement("iframe", {
|
|
5
|
+
src: attrs.src,
|
|
6
|
+
width: attrs.width,
|
|
7
|
+
height: attrs.height,
|
|
8
|
+
style: {
|
|
9
|
+
display: 'block',
|
|
10
|
+
border: 0
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
export default ReadonlyIframe;
|
|
@@ -0,0 +1,290 @@
|
|
|
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; }
|
|
7
|
+
import { FloatingPopover } from "../../../component/FloatingPopover";
|
|
8
|
+
import { DeleteLineIcon, EditBoxLineIcon } from "../../../component/Icons";
|
|
9
|
+
import { Box, Button, IconButton, Stack, TextField, Tooltip } from "@mui/material";
|
|
10
|
+
import { NodeViewWrapper } from '@tiptap/react';
|
|
11
|
+
import React, { useEffect, useState } from "react";
|
|
12
|
+
import InsertIframe from "./Insert";
|
|
13
|
+
import ReadonlyIframe from "./Readonly";
|
|
14
|
+
var IframeViewWrapper = function IframeViewWrapper(_ref) {
|
|
15
|
+
var editor = _ref.editor,
|
|
16
|
+
node = _ref.node,
|
|
17
|
+
updateAttributes = _ref.updateAttributes,
|
|
18
|
+
deleteNode = _ref.deleteNode,
|
|
19
|
+
selected = _ref.selected;
|
|
20
|
+
var attrs = node.attrs;
|
|
21
|
+
var _useState = useState(false),
|
|
22
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
+
isHovering = _useState2[0],
|
|
24
|
+
setIsHovering = _useState2[1];
|
|
25
|
+
var _useState3 = useState(false),
|
|
26
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
27
|
+
isDraggingWidth = _useState4[0],
|
|
28
|
+
setIsDraggingWidth = _useState4[1];
|
|
29
|
+
var _useState5 = useState(false),
|
|
30
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
31
|
+
isDraggingHeight = _useState6[0],
|
|
32
|
+
setIsDraggingHeight = _useState6[1];
|
|
33
|
+
var _useState7 = useState(0),
|
|
34
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
35
|
+
dragStartX = _useState8[0],
|
|
36
|
+
setDragStartX = _useState8[1];
|
|
37
|
+
var _useState9 = useState(0),
|
|
38
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
39
|
+
dragStartY = _useState10[0],
|
|
40
|
+
setDragStartY = _useState10[1];
|
|
41
|
+
var _useState11 = useState(0),
|
|
42
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
43
|
+
dragStartWidth = _useState12[0],
|
|
44
|
+
setDragStartWidth = _useState12[1];
|
|
45
|
+
var _useState13 = useState(0),
|
|
46
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
47
|
+
dragStartHeight = _useState14[0],
|
|
48
|
+
setDragStartHeight = _useState14[1];
|
|
49
|
+
var _useState15 = useState(null),
|
|
50
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
51
|
+
anchorEl = _useState16[0],
|
|
52
|
+
setAnchorEl = _useState16[1];
|
|
53
|
+
var _useState17 = useState(attrs.src),
|
|
54
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
|
55
|
+
editSrc = _useState18[0],
|
|
56
|
+
setEditSrc = _useState18[1];
|
|
57
|
+
var handleShowPopover = function handleShowPopover(event) {
|
|
58
|
+
return setAnchorEl(event.currentTarget);
|
|
59
|
+
};
|
|
60
|
+
var handleClosePopover = function handleClosePopover() {
|
|
61
|
+
return setAnchorEl(null);
|
|
62
|
+
};
|
|
63
|
+
var handleSave = function handleSave() {
|
|
64
|
+
if (editSrc.trim()) {
|
|
65
|
+
updateAttributes({
|
|
66
|
+
src: editSrc.trim(),
|
|
67
|
+
width: attrs.width,
|
|
68
|
+
height: attrs.height
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
handleClosePopover();
|
|
72
|
+
};
|
|
73
|
+
var handleMouseDownWidth = function handleMouseDownWidth(e) {
|
|
74
|
+
e.preventDefault();
|
|
75
|
+
setIsDraggingWidth(true);
|
|
76
|
+
setDragStartX(e.clientX);
|
|
77
|
+
setDragStartWidth(attrs.width);
|
|
78
|
+
};
|
|
79
|
+
var handleMouseDownHeight = function handleMouseDownHeight(e) {
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
setIsDraggingHeight(true);
|
|
82
|
+
setDragStartY(e.clientY);
|
|
83
|
+
setDragStartHeight(attrs.height);
|
|
84
|
+
};
|
|
85
|
+
var handleMouseMove = function handleMouseMove(e) {
|
|
86
|
+
if (isDraggingWidth) {
|
|
87
|
+
var deltaX = e.clientX - dragStartX;
|
|
88
|
+
var newWidth = Math.max(200, Math.min(1920, dragStartWidth + deltaX));
|
|
89
|
+
updateAttributes({
|
|
90
|
+
width: newWidth,
|
|
91
|
+
height: attrs.height,
|
|
92
|
+
src: attrs.src
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
if (isDraggingHeight) {
|
|
96
|
+
var deltaY = e.clientY - dragStartY;
|
|
97
|
+
var newHeight = Math.max(100, Math.min(2000, dragStartHeight + deltaY));
|
|
98
|
+
updateAttributes({
|
|
99
|
+
width: attrs.width,
|
|
100
|
+
height: newHeight,
|
|
101
|
+
src: attrs.src
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
var handleMouseUp = function handleMouseUp() {
|
|
106
|
+
setIsDraggingWidth(false);
|
|
107
|
+
setIsDraggingHeight(false);
|
|
108
|
+
};
|
|
109
|
+
useEffect(function () {
|
|
110
|
+
if (isDraggingWidth || isDraggingHeight) {
|
|
111
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
112
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
113
|
+
return function () {
|
|
114
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
115
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
}, [isDraggingWidth, isDraggingHeight]);
|
|
119
|
+
if (!attrs.src && !editor.isEditable) return null;
|
|
120
|
+
if (!editor.isEditable) {
|
|
121
|
+
return /*#__PURE__*/React.createElement(ReadonlyIframe, {
|
|
122
|
+
attrs: attrs
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
if (!attrs.src) {
|
|
126
|
+
return /*#__PURE__*/React.createElement(InsertIframe, {
|
|
127
|
+
selected: selected,
|
|
128
|
+
attrs: attrs,
|
|
129
|
+
updateAttributes: updateAttributes
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
return /*#__PURE__*/React.createElement(NodeViewWrapper, {
|
|
133
|
+
className: "iframe-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
|
|
134
|
+
"data-drag-handle": true
|
|
135
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
136
|
+
sx: {
|
|
137
|
+
position: 'relative',
|
|
138
|
+
display: 'inline-block',
|
|
139
|
+
border: '1px solid',
|
|
140
|
+
borderColor: 'divider',
|
|
141
|
+
borderRadius: 'var(--mui-shape-borderRadius)',
|
|
142
|
+
p: '0.25rem',
|
|
143
|
+
bgcolor: 'background.paper',
|
|
144
|
+
'&:hover .iframe-controls': {
|
|
145
|
+
opacity: 1
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
onMouseEnter: function onMouseEnter() {
|
|
149
|
+
return setIsHovering(true);
|
|
150
|
+
},
|
|
151
|
+
onMouseLeave: function onMouseLeave() {
|
|
152
|
+
return setIsHovering(false);
|
|
153
|
+
}
|
|
154
|
+
}, (isDraggingWidth || isDraggingHeight) && /*#__PURE__*/React.createElement(Box, {
|
|
155
|
+
sx: {
|
|
156
|
+
position: 'absolute',
|
|
157
|
+
inset: 0,
|
|
158
|
+
zIndex: 8,
|
|
159
|
+
cursor: isDraggingWidth ? 'ew-resize' : 'ns-resize',
|
|
160
|
+
backgroundColor: 'transparent'
|
|
161
|
+
}
|
|
162
|
+
}), /*#__PURE__*/React.createElement("iframe", {
|
|
163
|
+
src: attrs.src,
|
|
164
|
+
width: attrs.width,
|
|
165
|
+
height: attrs.height,
|
|
166
|
+
style: {
|
|
167
|
+
display: 'block',
|
|
168
|
+
border: 0,
|
|
169
|
+
maxWidth: '100%',
|
|
170
|
+
pointerEvents: isDraggingWidth || isDraggingHeight ? 'none' : 'auto'
|
|
171
|
+
}
|
|
172
|
+
}), (isHovering || isDraggingWidth) && /*#__PURE__*/React.createElement(Box, {
|
|
173
|
+
onMouseDown: handleMouseDownWidth,
|
|
174
|
+
sx: {
|
|
175
|
+
position: 'absolute',
|
|
176
|
+
right: -2,
|
|
177
|
+
top: '50%',
|
|
178
|
+
transform: 'translateY(-50%)',
|
|
179
|
+
width: 4,
|
|
180
|
+
height: 50,
|
|
181
|
+
bgcolor: isDraggingWidth ? 'primary.main' : 'text.primary',
|
|
182
|
+
cursor: 'ew-resize',
|
|
183
|
+
borderRadius: 2,
|
|
184
|
+
'&:hover': {
|
|
185
|
+
bgcolor: 'primary.main'
|
|
186
|
+
},
|
|
187
|
+
transition: 'background-color 0.2s ease',
|
|
188
|
+
zIndex: 10
|
|
189
|
+
}
|
|
190
|
+
}), (isHovering || isDraggingHeight) && /*#__PURE__*/React.createElement(Box, {
|
|
191
|
+
onMouseDown: handleMouseDownHeight,
|
|
192
|
+
sx: {
|
|
193
|
+
position: 'absolute',
|
|
194
|
+
left: '50%',
|
|
195
|
+
bottom: -2,
|
|
196
|
+
transform: 'translateX(-50%)',
|
|
197
|
+
height: 4,
|
|
198
|
+
width: 60,
|
|
199
|
+
bgcolor: isDraggingHeight ? 'primary.main' : 'text.primary',
|
|
200
|
+
cursor: 'ns-resize',
|
|
201
|
+
borderRadius: 2,
|
|
202
|
+
'&:hover': {
|
|
203
|
+
bgcolor: 'primary.main'
|
|
204
|
+
},
|
|
205
|
+
transition: 'background-color 0.2s ease',
|
|
206
|
+
zIndex: 10
|
|
207
|
+
}
|
|
208
|
+
}), (isHovering || !!anchorEl) && /*#__PURE__*/React.createElement(Box, {
|
|
209
|
+
className: "iframe-controls",
|
|
210
|
+
sx: {
|
|
211
|
+
position: 'absolute',
|
|
212
|
+
top: '0.5rem',
|
|
213
|
+
right: '0.5rem',
|
|
214
|
+
display: 'flex',
|
|
215
|
+
gap: '0.25rem'
|
|
216
|
+
}
|
|
217
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
218
|
+
arrow: true,
|
|
219
|
+
title: "\u66F4\u6362\u94FE\u63A5"
|
|
220
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
221
|
+
size: "small",
|
|
222
|
+
onClick: handleShowPopover,
|
|
223
|
+
sx: {
|
|
224
|
+
color: 'text.primary',
|
|
225
|
+
bgcolor: 'background.paper'
|
|
226
|
+
}
|
|
227
|
+
}, /*#__PURE__*/React.createElement(EditBoxLineIcon, {
|
|
228
|
+
sx: {
|
|
229
|
+
fontSize: 18
|
|
230
|
+
}
|
|
231
|
+
}))), /*#__PURE__*/React.createElement(Tooltip, {
|
|
232
|
+
arrow: true,
|
|
233
|
+
title: "\u5220\u9664"
|
|
234
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
235
|
+
size: "small",
|
|
236
|
+
onClick: deleteNode,
|
|
237
|
+
sx: {
|
|
238
|
+
color: 'text.primary',
|
|
239
|
+
bgcolor: 'background.paper'
|
|
240
|
+
}
|
|
241
|
+
}, /*#__PURE__*/React.createElement(DeleteLineIcon, {
|
|
242
|
+
sx: {
|
|
243
|
+
fontSize: 18
|
|
244
|
+
}
|
|
245
|
+
}))))), /*#__PURE__*/React.createElement(FloatingPopover, {
|
|
246
|
+
open: Boolean(anchorEl),
|
|
247
|
+
anchorEl: anchorEl,
|
|
248
|
+
onClose: handleClosePopover,
|
|
249
|
+
placement: "bottom"
|
|
250
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
251
|
+
sx: {
|
|
252
|
+
p: 2,
|
|
253
|
+
width: 350
|
|
254
|
+
}
|
|
255
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
256
|
+
sx: {
|
|
257
|
+
fontSize: '0.875rem',
|
|
258
|
+
color: 'text.secondary',
|
|
259
|
+
lineHeight: '1.5',
|
|
260
|
+
mb: 1
|
|
261
|
+
}
|
|
262
|
+
}, "\u94FE\u63A5\u5730\u5740"), /*#__PURE__*/React.createElement(TextField, {
|
|
263
|
+
fullWidth: true,
|
|
264
|
+
size: "small",
|
|
265
|
+
value: editSrc,
|
|
266
|
+
onChange: function onChange(e) {
|
|
267
|
+
return setEditSrc(e.target.value);
|
|
268
|
+
},
|
|
269
|
+
placeholder: "\u8F93\u5165\u8981\u5D4C\u5165\u7684 URL"
|
|
270
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
|
271
|
+
direction: 'row',
|
|
272
|
+
gap: 1,
|
|
273
|
+
alignItems: 'center',
|
|
274
|
+
sx: {
|
|
275
|
+
mt: 2
|
|
276
|
+
}
|
|
277
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
278
|
+
variant: "outlined",
|
|
279
|
+
size: "small",
|
|
280
|
+
fullWidth: true,
|
|
281
|
+
onClick: handleClosePopover
|
|
282
|
+
}, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
|
|
283
|
+
variant: "contained",
|
|
284
|
+
size: "small",
|
|
285
|
+
fullWidth: true,
|
|
286
|
+
onClick: handleSave,
|
|
287
|
+
disabled: !editSrc.trim()
|
|
288
|
+
}, "\u4FDD\u5B58")))));
|
|
289
|
+
};
|
|
290
|
+
export default IframeViewWrapper;
|
|
@@ -18,8 +18,6 @@ var SlashCommandsList = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
18
18
|
return /*#__PURE__*/React.createElement(Paper, {
|
|
19
19
|
elevation: 8,
|
|
20
20
|
sx: {
|
|
21
|
-
// maxHeight: '300px',
|
|
22
|
-
// overflow: 'auto',
|
|
23
21
|
borderRadius: 'var(--mui-shape-borderRadius)',
|
|
24
22
|
width: '224px',
|
|
25
23
|
p: 0.5
|
|
@@ -27,7 +25,7 @@ var SlashCommandsList = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
27
25
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
28
26
|
direction: 'row',
|
|
29
27
|
flexWrap: 'wrap'
|
|
30
|
-
}, items.slice(0,
|
|
28
|
+
}, items.slice(0, 18).map(function (item, index) {
|
|
31
29
|
return /*#__PURE__*/React.createElement(ToolbarItem, {
|
|
32
30
|
key: index,
|
|
33
31
|
onClick: function onClick() {
|
package/dist/extension/index.js
CHANGED
|
@@ -15,7 +15,7 @@ import StarterKit from '@tiptap/starter-kit';
|
|
|
15
15
|
import { PLACEHOLDER } from "../contants/placeholder";
|
|
16
16
|
import { SlashCommands, StructuredDiffExtension } from "./extension";
|
|
17
17
|
import { CodeExtension } from "./mark/Code";
|
|
18
|
-
import { AlertExtension, AudioExtension, BlockAttachmentExtension, BlockLinkExtension, CodeBlockLowlightExtension, CustomBlockMathExtension, CustomInlineMathExtension, DetailsContentExtension, DetailsExtension, DetailsSummaryExtension, EmojiExtension, FileHandlerExtension, ImageExtension, InlineAttachmentExtension, InlineLinkExtension, ListExtension, MentionExtension, TableExtension, TableOfContents, UploadProgressExtension, VerticalAlign, VideoExtension, YoutubeExtension } from "./node";
|
|
18
|
+
import { AlertExtension, AudioExtension, BlockAttachmentExtension, BlockLinkExtension, CodeBlockLowlightExtension, CustomBlockMathExtension, CustomInlineMathExtension, DetailsContentExtension, DetailsExtension, DetailsSummaryExtension, EmojiExtension, FileHandlerExtension, IframeExtension, ImageExtension, InlineAttachmentExtension, InlineLinkExtension, ListExtension, MentionExtension, TableExtension, TableOfContents, UploadProgressExtension, VerticalAlign, VideoExtension, YoutubeExtension } from "./node";
|
|
19
19
|
export var getExtensions = function getExtensions(_ref) {
|
|
20
20
|
var limit = _ref.limit,
|
|
21
21
|
exclude = _ref.exclude,
|
|
@@ -76,6 +76,8 @@ export var getExtensions = function getExtensions(_ref) {
|
|
|
76
76
|
onError: onError
|
|
77
77
|
}), CustomBlockMathExtension({
|
|
78
78
|
onError: onError
|
|
79
|
+
}), IframeExtension({
|
|
80
|
+
onError: onError
|
|
79
81
|
}), VideoExtension({
|
|
80
82
|
onUpload: onUpload,
|
|
81
83
|
onError: onError
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { UploadFunction } from "../../type";
|
|
2
2
|
export declare const FileHandlerExtension: (props: {
|
|
3
3
|
onUpload?: UploadFunction;
|
|
4
|
-
}) => import("@tiptap/core").Extension<Omit<import("@tiptap/extension-file-handler").FileHandlePluginOptions, "
|
|
4
|
+
}) => import("@tiptap/core").Extension<Omit<import("@tiptap/extension-file-handler").FileHandlePluginOptions, "key" | "editor">, any>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { EditorFnProps } from "../../type";
|
|
2
|
+
import { Node } from '@tiptap/core';
|
|
3
|
+
declare module '@tiptap/core' {
|
|
4
|
+
interface Commands<ReturnType> {
|
|
5
|
+
iframe: {
|
|
6
|
+
setIframe: (options: {
|
|
7
|
+
src: string;
|
|
8
|
+
width?: number;
|
|
9
|
+
height?: number;
|
|
10
|
+
}) => ReturnType;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
export type IframeExtensionProps = EditorFnProps;
|
|
15
|
+
export declare const IframeExtension: (props: IframeExtensionProps) => Node<any, any>;
|
|
16
|
+
export default IframeExtension;
|
|
@@ -0,0 +1,118 @@
|
|
|
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
|
+
var _excluded = ["src"];
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
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; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
|
+
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); }
|
|
8
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
9
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
10
|
+
import { mergeAttributes, Node } from '@tiptap/core';
|
|
11
|
+
import { ReactNodeViewRenderer } from '@tiptap/react';
|
|
12
|
+
import IframeViewWrapper from "../component/Iframe";
|
|
13
|
+
export var IframeExtension = function IframeExtension(props) {
|
|
14
|
+
return Node.create({
|
|
15
|
+
name: 'iframe',
|
|
16
|
+
group: 'block',
|
|
17
|
+
atom: true,
|
|
18
|
+
selectable: true,
|
|
19
|
+
draggable: true,
|
|
20
|
+
addAttributes: function addAttributes() {
|
|
21
|
+
return {
|
|
22
|
+
class: {
|
|
23
|
+
default: 'iframe-wrapper'
|
|
24
|
+
},
|
|
25
|
+
src: {
|
|
26
|
+
default: null,
|
|
27
|
+
parseHTML: function parseHTML(element) {
|
|
28
|
+
return element.getAttribute('src');
|
|
29
|
+
},
|
|
30
|
+
renderHTML: function renderHTML(attributes) {
|
|
31
|
+
if (!attributes.src) return {};
|
|
32
|
+
return {
|
|
33
|
+
src: attributes.src
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
width: {
|
|
38
|
+
default: 760,
|
|
39
|
+
parseHTML: function parseHTML(element) {
|
|
40
|
+
var width = element.getAttribute('width');
|
|
41
|
+
return width ? parseInt(width, 10) : 760;
|
|
42
|
+
},
|
|
43
|
+
renderHTML: function renderHTML(attributes) {
|
|
44
|
+
return {
|
|
45
|
+
width: attributes.width
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
height: {
|
|
50
|
+
default: 400,
|
|
51
|
+
parseHTML: function parseHTML(element) {
|
|
52
|
+
var height = element.getAttribute('height');
|
|
53
|
+
return height ? parseInt(height, 10) : 400;
|
|
54
|
+
},
|
|
55
|
+
renderHTML: function renderHTML(attributes) {
|
|
56
|
+
return {
|
|
57
|
+
height: attributes.height
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
},
|
|
63
|
+
parseHTML: function parseHTML() {
|
|
64
|
+
return [{
|
|
65
|
+
tag: 'iframe',
|
|
66
|
+
getAttrs: function getAttrs(dom) {
|
|
67
|
+
if (!(dom instanceof HTMLElement)) return false;
|
|
68
|
+
var src = dom.getAttribute('src');
|
|
69
|
+
if (!src) return false;
|
|
70
|
+
var width = dom.getAttribute('width') ? parseInt(dom.getAttribute('width'), 10) : dom.style.width ? parseInt(dom.style.width, 10) : 760;
|
|
71
|
+
var height = dom.getAttribute('height') ? parseInt(dom.getAttribute('height'), 10) : dom.style.height ? parseInt(dom.style.height, 10) : 400;
|
|
72
|
+
return {
|
|
73
|
+
src: src,
|
|
74
|
+
width: width,
|
|
75
|
+
height: height
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
}];
|
|
79
|
+
},
|
|
80
|
+
renderHTML: function renderHTML(_ref) {
|
|
81
|
+
var HTMLAttributes = _ref.HTMLAttributes;
|
|
82
|
+
var _ref2 = HTMLAttributes,
|
|
83
|
+
src = _ref2.src,
|
|
84
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
85
|
+
return ['iframe', mergeAttributes(this.options.HTMLAttributes, _objectSpread(_objectSpread({}, rest), {}, {
|
|
86
|
+
src: src,
|
|
87
|
+
frameborder: '0',
|
|
88
|
+
allowfullscreen: 'true'
|
|
89
|
+
}))];
|
|
90
|
+
},
|
|
91
|
+
addCommands: function addCommands() {
|
|
92
|
+
var _this = this;
|
|
93
|
+
return {
|
|
94
|
+
setIframe: function setIframe(options) {
|
|
95
|
+
return function (_ref3) {
|
|
96
|
+
var commands = _ref3.commands;
|
|
97
|
+
return commands.insertContent({
|
|
98
|
+
type: _this.name,
|
|
99
|
+
attrs: {
|
|
100
|
+
src: options.src,
|
|
101
|
+
width: options.width || 760,
|
|
102
|
+
height: options.height || 400
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
},
|
|
109
|
+
addNodeView: function addNodeView() {
|
|
110
|
+
return ReactNodeViewRenderer(function (renderProps) {
|
|
111
|
+
return IframeViewWrapper(_objectSpread(_objectSpread({}, renderProps), {}, {
|
|
112
|
+
onError: props.onError
|
|
113
|
+
}));
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
};
|
|
118
|
+
export default IframeExtension;
|