@seafile/sdoc-editor 3.0.130 → 3.0.131
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.
|
@@ -3,8 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.EMBED_LINK_SOURCE = void 0;
|
|
6
|
+
exports.MIN_EMBED_LINK_HEIGHT = exports.MAX_EMBED_LINK_HEIGHT = exports.EMBED_LINK_SOURCE = exports.DEFAULT_EMBED_LINK_HEIGHT = void 0;
|
|
7
7
|
var EMBED_LINK_SOURCE = exports.EMBED_LINK_SOURCE = {
|
|
8
8
|
SEATABLE: 'seatable',
|
|
9
9
|
FIGMA: 'figma'
|
|
10
|
-
};
|
|
10
|
+
};
|
|
11
|
+
var DEFAULT_EMBED_LINK_HEIGHT = exports.DEFAULT_EMBED_LINK_HEIGHT = 300;
|
|
12
|
+
var MIN_EMBED_LINK_HEIGHT = exports.MIN_EMBED_LINK_HEIGHT = 300;
|
|
13
|
+
var MAX_EMBED_LINK_HEIGHT = exports.MAX_EMBED_LINK_HEIGHT = 550;
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.normalizeFigmaEmbedLink = exports.isInsertEmbedLinkDisabled = exports.insertEmbedLink = exports.getEmbedLinkType = exports.generateEmbedLinkNode = void 0;
|
|
7
|
+
exports.updateEmbedLink = exports.normalizeFigmaEmbedLink = exports.isInsertEmbedLinkDisabled = exports.insertEmbedLink = exports.getEmbedLinkType = exports.generateEmbedLinkNode = void 0;
|
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
9
9
|
var _slate = require("@seafile/slate");
|
|
10
10
|
var _slateReact = require("@seafile/slate-react");
|
|
@@ -131,4 +131,15 @@ var insertEmbedLink = exports.insertEmbedLink = function insertEmbedLink(editor,
|
|
|
131
131
|
(0, _core.focusEditor)(editor, range);
|
|
132
132
|
return;
|
|
133
133
|
}
|
|
134
|
+
};
|
|
135
|
+
var updateEmbedLink = exports.updateEmbedLink = function updateEmbedLink(editor, data) {
|
|
136
|
+
_slate.Transforms.setNodes(editor, {
|
|
137
|
+
data: data
|
|
138
|
+
}, {
|
|
139
|
+
match: function match(n) {
|
|
140
|
+
return (0, _core.getNodeType)(n) === _elementType.EMBED_LINK;
|
|
141
|
+
},
|
|
142
|
+
at: editor.selection,
|
|
143
|
+
voids: true
|
|
144
|
+
});
|
|
134
145
|
};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
.sdoc-embed-link-container {
|
|
2
2
|
position: relative;
|
|
3
|
-
width: 100%;
|
|
4
|
-
height: 300px;
|
|
5
3
|
border: 1px solid #ccc;
|
|
6
4
|
margin: 5px 0;
|
|
5
|
+
width: 100%;
|
|
7
6
|
}
|
|
8
7
|
|
|
9
8
|
.sdoc-embed-link-container.isSelected {
|
|
@@ -40,6 +39,11 @@
|
|
|
40
39
|
z-index: 1;
|
|
41
40
|
}
|
|
42
41
|
|
|
42
|
+
.sdoc-embed-link-container.isSelected .image-resizer {
|
|
43
|
+
z-index: 1;
|
|
44
|
+
cursor: ns-resize;
|
|
45
|
+
}
|
|
46
|
+
|
|
43
47
|
.embed-link-zoom-out-container {
|
|
44
48
|
position: fixed;
|
|
45
49
|
inset: 0;
|
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.renderEmbedLink = renderEmbedLink;
|
|
9
9
|
var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
10
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
11
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
13
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
@@ -23,13 +24,18 @@ var _helper = require("./helper");
|
|
|
23
24
|
var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
|
|
24
25
|
require("./index.css");
|
|
25
26
|
var EmbedLink = function EmbedLink(_ref) {
|
|
27
|
+
var _element$data2;
|
|
26
28
|
var editor = _ref.editor,
|
|
27
29
|
element = _ref.element;
|
|
28
30
|
var EmbedLinkRef = (0, _react.useRef)();
|
|
31
|
+
var embedLinkContainerRef = (0, _react.useRef)(null);
|
|
29
32
|
var fullscreenRef = (0, _react.useRef)();
|
|
30
33
|
var scrollRef = (0, _useScrollContext.useScrollContext)();
|
|
31
34
|
var isSelected = (0, _slateReact.useSelected)();
|
|
32
35
|
var readOnly = (0, _slateReact.useReadOnly)();
|
|
36
|
+
var resizerRef = (0, _react.useRef)(null);
|
|
37
|
+
var resizeStartYRef = (0, _react.useRef)(0);
|
|
38
|
+
var resizeStartHeightRef = (0, _react.useRef)(0);
|
|
33
39
|
var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
|
|
34
40
|
t = _useTranslation.t;
|
|
35
41
|
var _useState = (0, _react.useState)({
|
|
@@ -43,6 +49,14 @@ var EmbedLink = function EmbedLink(_ref) {
|
|
|
43
49
|
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
44
50
|
isShowZoomOut = _useState4[0],
|
|
45
51
|
setIsShowZoomOut = _useState4[1];
|
|
52
|
+
var _useState5 = (0, _react.useState)(null),
|
|
53
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
54
|
+
movingHeight = _useState6[0],
|
|
55
|
+
setMovingHeight = _useState6[1];
|
|
56
|
+
var _useState7 = (0, _react.useState)(false),
|
|
57
|
+
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
58
|
+
isResizing = _useState8[0],
|
|
59
|
+
setIsResizing = _useState8[1];
|
|
46
60
|
var originalLink = element.link,
|
|
47
61
|
link_type = element.link_type;
|
|
48
62
|
var link = originalLink;
|
|
@@ -52,6 +66,76 @@ var EmbedLink = function EmbedLink(_ref) {
|
|
|
52
66
|
var isValidUrl = (0, _react.useMemo)(function () {
|
|
53
67
|
return (0, _isUrl["default"])(link);
|
|
54
68
|
}, [link]);
|
|
69
|
+
var registerEvent = (0, _react.useCallback)(function (eventList) {
|
|
70
|
+
eventList.forEach(function (element) {
|
|
71
|
+
document.addEventListener(element.eventName, element.event);
|
|
72
|
+
});
|
|
73
|
+
}, []);
|
|
74
|
+
var getEmbedLinkHeight = (0, _react.useCallback)(function () {
|
|
75
|
+
var _element$data;
|
|
76
|
+
var height = movingHeight !== null && movingHeight !== void 0 ? movingHeight : element === null || element === void 0 ? void 0 : (_element$data = element.data) === null || _element$data === void 0 ? void 0 : _element$data.height;
|
|
77
|
+
var parsedHeight = Number(height);
|
|
78
|
+
if (parsedHeight > 0) {
|
|
79
|
+
return Math.min(Math.max(parsedHeight, _constants.MIN_EMBED_LINK_HEIGHT), _constants.MAX_EMBED_LINK_HEIGHT);
|
|
80
|
+
}
|
|
81
|
+
return _constants.DEFAULT_EMBED_LINK_HEIGHT;
|
|
82
|
+
}, [element === null || element === void 0 ? void 0 : (_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.height, movingHeight]);
|
|
83
|
+
var onMouseMove = (0, _react.useCallback)(function (event) {
|
|
84
|
+
event.preventDefault();
|
|
85
|
+
event.stopPropagation();
|
|
86
|
+
var changeY = event.clientY - resizeStartYRef.current;
|
|
87
|
+
var embedLinkHeight = resizeStartHeightRef.current + changeY;
|
|
88
|
+
embedLinkHeight = Math.min(Math.max(embedLinkHeight, _constants.MIN_EMBED_LINK_HEIGHT), _constants.MAX_EMBED_LINK_HEIGHT);
|
|
89
|
+
if (embedLinkContainerRef.current) {
|
|
90
|
+
embedLinkContainerRef.current.style.height = "".concat(embedLinkHeight, "px");
|
|
91
|
+
}
|
|
92
|
+
setMovingHeight(embedLinkHeight);
|
|
93
|
+
}, []);
|
|
94
|
+
var onResizeEnd = (0, _react.useCallback)(function (event) {
|
|
95
|
+
var _ref2, _embedLinkContainerRe;
|
|
96
|
+
event.preventDefault();
|
|
97
|
+
event.stopPropagation();
|
|
98
|
+
unregisterEvent([{
|
|
99
|
+
'eventName': 'mousemove',
|
|
100
|
+
'event': onMouseMove
|
|
101
|
+
}, {
|
|
102
|
+
'eventName': 'mouseup',
|
|
103
|
+
'event': onResizeEnd
|
|
104
|
+
}]);
|
|
105
|
+
var resolvedHeight = (_ref2 = movingHeight !== null && movingHeight !== void 0 ? movingHeight : (_embedLinkContainerRe = embedLinkContainerRef.current) === null || _embedLinkContainerRe === void 0 ? void 0 : _embedLinkContainerRe.getBoundingClientRect().height) !== null && _ref2 !== void 0 ? _ref2 : getEmbedLinkHeight();
|
|
106
|
+
var finalHeight = Math.min(Math.max(Number(resolvedHeight) || _constants.DEFAULT_EMBED_LINK_HEIGHT, _constants.MIN_EMBED_LINK_HEIGHT), _constants.MAX_EMBED_LINK_HEIGHT);
|
|
107
|
+
var newData = (0, _objectSpread2["default"])({}, element.data || {});
|
|
108
|
+
delete newData.width;
|
|
109
|
+
newData.height = finalHeight;
|
|
110
|
+
(0, _helper.updateEmbedLink)(editor, newData);
|
|
111
|
+
|
|
112
|
+
// Reset hover menu position
|
|
113
|
+
setTimeout(function () {
|
|
114
|
+
setIsResizing(false);
|
|
115
|
+
}, 100);
|
|
116
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
117
|
+
}, [editor, element.data, getEmbedLinkHeight, movingHeight, onMouseMove]);
|
|
118
|
+
var unregisterEvent = (0, _react.useCallback)(function (eventList) {
|
|
119
|
+
eventList.forEach(function (element) {
|
|
120
|
+
document.removeEventListener(element.eventName, element.event);
|
|
121
|
+
});
|
|
122
|
+
}, []);
|
|
123
|
+
var onResizeStart = (0, _react.useCallback)(function (event) {
|
|
124
|
+
var _embedLinkContainerRe2;
|
|
125
|
+
event.preventDefault();
|
|
126
|
+
event.stopPropagation();
|
|
127
|
+
setIsResizing(true);
|
|
128
|
+
resizeStartYRef.current = event.clientY;
|
|
129
|
+
var currentHeight = ((_embedLinkContainerRe2 = embedLinkContainerRef.current) === null || _embedLinkContainerRe2 === void 0 ? void 0 : _embedLinkContainerRe2.getBoundingClientRect().height) || getEmbedLinkHeight();
|
|
130
|
+
resizeStartHeightRef.current = currentHeight;
|
|
131
|
+
registerEvent([{
|
|
132
|
+
'eventName': 'mousemove',
|
|
133
|
+
'event': onMouseMove
|
|
134
|
+
}, {
|
|
135
|
+
'eventName': 'mouseup',
|
|
136
|
+
'event': onResizeEnd
|
|
137
|
+
}]);
|
|
138
|
+
}, [getEmbedLinkHeight, onMouseMove, onResizeEnd, registerEvent]);
|
|
55
139
|
var onDeleteEmbedLink = (0, _react.useCallback)(function () {
|
|
56
140
|
var path = _slateReact.ReactEditor.findPath(editor, element);
|
|
57
141
|
_slate.Transforms.removeNodes(editor, {
|
|
@@ -99,7 +183,9 @@ var EmbedLink = function EmbedLink(_ref) {
|
|
|
99
183
|
resizeObserver.observe(scrollRef.current);
|
|
100
184
|
}
|
|
101
185
|
return function () {
|
|
102
|
-
observerRefValue
|
|
186
|
+
if (observerRefValue) {
|
|
187
|
+
observerRefValue.removeEventListener('scroll', handleScroll);
|
|
188
|
+
}
|
|
103
189
|
if (resizeObserver) {
|
|
104
190
|
resizeObserver.disconnect();
|
|
105
191
|
}
|
|
@@ -130,9 +216,14 @@ var EmbedLink = function EmbedLink(_ref) {
|
|
|
130
216
|
};
|
|
131
217
|
}, [isShowZoomOut, setIsShowZoomOut]);
|
|
132
218
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
219
|
+
ref: embedLinkContainerRef,
|
|
133
220
|
className: (0, _classnames["default"])('sdoc-embed-link-container', {
|
|
134
221
|
'isSelected': isSelected
|
|
135
222
|
}),
|
|
223
|
+
style: {
|
|
224
|
+
height: getEmbedLinkHeight(),
|
|
225
|
+
maxHeight: _constants.MAX_EMBED_LINK_HEIGHT
|
|
226
|
+
},
|
|
136
227
|
onDoubleClick: handleDoubleClick,
|
|
137
228
|
scrolling: "no"
|
|
138
229
|
}, isValidUrl && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("iframe", {
|
|
@@ -144,10 +235,14 @@ var EmbedLink = function EmbedLink(_ref) {
|
|
|
144
235
|
className: "iframe-overlay",
|
|
145
236
|
onDoubleClick: handleDoubleClick,
|
|
146
237
|
onClick: handleOnClick
|
|
238
|
+
}), !readOnly && isSelected && /*#__PURE__*/_react["default"].createElement("span", {
|
|
239
|
+
className: "image-resizer",
|
|
240
|
+
ref: resizerRef,
|
|
241
|
+
onMouseDown: onResizeStart
|
|
147
242
|
})), !isValidUrl && /*#__PURE__*/_react["default"].createElement("div", {
|
|
148
243
|
ref: EmbedLinkRef,
|
|
149
244
|
className: "sdoc-embed-link-tip"
|
|
150
|
-
}, t('Embed_link_invalid_tip'))), isSelected && !readOnly && !isShowZoomOut && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
|
|
245
|
+
}, t('Embed_link_invalid_tip'))), isSelected && !readOnly && !isShowZoomOut && !isResizing && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
|
|
151
246
|
isValidUrl: isValidUrl,
|
|
152
247
|
menuPosition: menuPosition,
|
|
153
248
|
onOpen: handleDoubleClick,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seafile/sdoc-editor",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.131",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "jest",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"publishConfig": {
|
|
73
73
|
"access": "public"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "54650092847c7bca405447086d738b39d5f0c895"
|
|
76
76
|
}
|