@seafile/sdoc-editor 3.0.37 → 3.0.38
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.
|
@@ -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.updateFileView = exports.insertFileView = exports.getWikiSettings = exports.getFileUrl = exports.getAccessibleRepos = exports.genFileViewNode = void 0;
|
|
7
|
+
exports.updateFileView = exports.insertFileView = exports.getWikiSettings = exports.getFileUrl = exports.getAccessibleRepos = exports.genFileViewNode = exports.calculateSize = void 0;
|
|
8
8
|
var _slate = require("@seafile/slate");
|
|
9
9
|
var _slateReact = require("@seafile/slate-react");
|
|
10
10
|
var _slugid = _interopRequireDefault(require("slugid"));
|
|
@@ -74,4 +74,16 @@ var updateFileView = exports.updateFileView = function updateFileView(newData, e
|
|
|
74
74
|
}, {
|
|
75
75
|
at: nodePath
|
|
76
76
|
});
|
|
77
|
+
};
|
|
78
|
+
var calculateSize = exports.calculateSize = function calculateSize(e, position) {
|
|
79
|
+
var clientX = e.clientX,
|
|
80
|
+
clientY = e.clientY;
|
|
81
|
+
var left = position.left,
|
|
82
|
+
top = position.top;
|
|
83
|
+
var rightWidth = clientX - left;
|
|
84
|
+
var bottomHeight = clientY - top;
|
|
85
|
+
return {
|
|
86
|
+
width: rightWidth < 300 ? 300 : rightWidth,
|
|
87
|
+
height: bottomHeight < 200 ? 200 : bottomHeight
|
|
88
|
+
};
|
|
77
89
|
};
|
|
@@ -2,14 +2,6 @@
|
|
|
2
2
|
position: relative;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
|
-
border: 2px;
|
|
6
|
-
border: 2px solid #eee;
|
|
7
|
-
border-radius: 4px;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.sdoc-file-view-container.is-selected {
|
|
11
|
-
border: 2px solid rgb(0, 123, 255);
|
|
12
|
-
border-radius: 4px;
|
|
13
5
|
}
|
|
14
6
|
|
|
15
7
|
.sdoc-file-view-container .sdoc-file-view-title {
|
|
@@ -27,9 +19,30 @@
|
|
|
27
19
|
|
|
28
20
|
.sdoc-file-view-container .sdoc-file-view-content {
|
|
29
21
|
position: relative;
|
|
22
|
+
border: 2px solid #eee;
|
|
23
|
+
border-radius: 4px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.sdoc-file-view-container .sdoc-file-view-content.is-selected {
|
|
27
|
+
border: 2px solid rgb(0, 123, 255);
|
|
28
|
+
border-radius: 4px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.sdoc-file-view-container .sdoc-file-view-content {
|
|
32
|
+
height: 400;
|
|
30
33
|
}
|
|
31
34
|
|
|
32
|
-
.sdoc-file-view-container .sdoc-file-view-content,
|
|
33
35
|
.sdoc-file-view-container .sdoc-file-view-content .sea-metadata {
|
|
34
|
-
height:
|
|
36
|
+
height: 396px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.sdoc-file-view-container .sdoc-file-view-content .file-view-resizer {
|
|
40
|
+
width: 10px;
|
|
41
|
+
height: 10px;
|
|
42
|
+
position: absolute;
|
|
43
|
+
right: -5px;
|
|
44
|
+
bottom: -5px;
|
|
45
|
+
background-color: #007bff;
|
|
46
|
+
border: 1px solid #fff;
|
|
47
|
+
cursor: se-resize;
|
|
35
48
|
}
|
|
@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.renderFileView = void 0;
|
|
9
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
10
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _reactI18next = require("react-i18next");
|
|
11
13
|
var _seafileDatabase = require("@seafile/seafile-database");
|
|
12
14
|
var _slateReact = require("@seafile/slate-react");
|
|
13
15
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
@@ -25,17 +27,34 @@ var FileView = function FileView(_ref) {
|
|
|
25
27
|
var data = element.data;
|
|
26
28
|
var editor = (0, _slateReact.useSlateStatic)();
|
|
27
29
|
var isSelected = (0, _slateReact.useSelected)();
|
|
30
|
+
var _useReadOnly = (0, _slateReact.useReadOnly)(),
|
|
31
|
+
readOnly = _useReadOnly.readOnly;
|
|
32
|
+
var wrapperRef = (0, _react.useRef)(null);
|
|
33
|
+
var resizerRef = (0, _react.useRef)(null);
|
|
34
|
+
var databaseRef = (0, _react.useRef)(null);
|
|
35
|
+
var _useState = (0, _react.useState)(false),
|
|
36
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
37
|
+
isResizing = _useState2[0],
|
|
38
|
+
setIsResizing = _useState2[1];
|
|
39
|
+
var _useState3 = (0, _react.useState)(null),
|
|
40
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
41
|
+
movingSize = _useState4[0],
|
|
42
|
+
setMovingSize = _useState4[1];
|
|
43
|
+
var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
|
|
44
|
+
t = _useTranslation.t;
|
|
28
45
|
var viewSettings = (0, _react.useMemo)(function () {
|
|
29
46
|
var settings = _context["default"].getFileViewSetting();
|
|
30
47
|
var viewSettings = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, settings), {}, {
|
|
31
48
|
repoID: data.link_repo_id,
|
|
32
49
|
view_data: {
|
|
33
50
|
view_id: data.view_id,
|
|
34
|
-
wiki_id: data.wiki_id
|
|
51
|
+
wiki_id: data.wiki_id,
|
|
52
|
+
height: data.height,
|
|
53
|
+
width: data.width
|
|
35
54
|
}
|
|
36
55
|
});
|
|
37
56
|
return viewSettings;
|
|
38
|
-
}, [data.link_repo_id, data.view_id, data.wiki_id]);
|
|
57
|
+
}, [data.height, data.link_repo_id, data.view_id, data.width, data.wiki_id]);
|
|
39
58
|
(0, _react.useEffect)(function () {
|
|
40
59
|
var copyContent = _localStorageUtils["default"].getItem(_constants.RECENT_COPY_CONTENT);
|
|
41
60
|
var wikiId = _context["default"].getSetting('wikiId');
|
|
@@ -57,21 +76,108 @@ var FileView = function FileView(_ref) {
|
|
|
57
76
|
}
|
|
58
77
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
59
78
|
}, []);
|
|
79
|
+
var registerEvent = (0, _react.useCallback)(function (eventList) {
|
|
80
|
+
eventList.forEach(function (element) {
|
|
81
|
+
document.addEventListener(element.eventName, element.event);
|
|
82
|
+
});
|
|
83
|
+
}, []);
|
|
84
|
+
var unregisterEvent = (0, _react.useCallback)(function (eventList) {
|
|
85
|
+
eventList.forEach(function (element) {
|
|
86
|
+
document.removeEventListener(element.eventName, element.event);
|
|
87
|
+
});
|
|
88
|
+
}, []);
|
|
89
|
+
var onMouseMove = (0, _react.useCallback)(function (event) {
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
event.stopPropagation();
|
|
92
|
+
var wrapperElement = wrapperRef.current;
|
|
93
|
+
var _wrapperElement$getBo = wrapperElement.getBoundingClientRect(),
|
|
94
|
+
left = _wrapperElement$getBo.left,
|
|
95
|
+
right = _wrapperElement$getBo.right,
|
|
96
|
+
top = _wrapperElement$getBo.top,
|
|
97
|
+
bottom = _wrapperElement$getBo.bottom;
|
|
98
|
+
var size = (0, _helpers.calculateSize)(event, {
|
|
99
|
+
left: left,
|
|
100
|
+
right: right,
|
|
101
|
+
top: top,
|
|
102
|
+
bottom: bottom
|
|
103
|
+
});
|
|
104
|
+
var style = wrapperElement.style;
|
|
105
|
+
style.width = size.width + 'px';
|
|
106
|
+
style.height = size.height + 'px';
|
|
107
|
+
var databaseStyle = databaseRef.current.style;
|
|
108
|
+
databaseStyle.width = size.width - 4 + 'px';
|
|
109
|
+
databaseStyle.height = size.height - 4 + 'px';
|
|
110
|
+
setMovingSize(size);
|
|
111
|
+
}, []);
|
|
112
|
+
var onResizeEnd = (0, _react.useCallback)(function (event) {
|
|
113
|
+
event.preventDefault();
|
|
114
|
+
event.stopPropagation();
|
|
115
|
+
unregisterEvent([{
|
|
116
|
+
'eventName': 'mousemove',
|
|
117
|
+
'event': onMouseMove
|
|
118
|
+
}, {
|
|
119
|
+
'eventName': 'mouseup',
|
|
120
|
+
'event': onResizeEnd
|
|
121
|
+
}]);
|
|
122
|
+
var style = wrapperRef.current.style;
|
|
123
|
+
var newData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.data), {}, {
|
|
124
|
+
width: parseFloat(style.width),
|
|
125
|
+
height: parseFloat(style.height)
|
|
126
|
+
});
|
|
127
|
+
(0, _helpers.updateFileView)(newData, editor, element);
|
|
128
|
+
// Reset hover menu position
|
|
129
|
+
setTimeout(function () {
|
|
130
|
+
setIsResizing(false);
|
|
131
|
+
}, 100);
|
|
132
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
133
|
+
}, [editor, element.data, wrapperRef.current]);
|
|
134
|
+
var onResizeStart = (0, _react.useCallback)(function (event) {
|
|
135
|
+
event.preventDefault();
|
|
136
|
+
event.stopPropagation();
|
|
137
|
+
setIsResizing(true);
|
|
138
|
+
registerEvent([{
|
|
139
|
+
'eventName': 'mousemove',
|
|
140
|
+
'event': onMouseMove
|
|
141
|
+
}, {
|
|
142
|
+
'eventName': 'mouseup',
|
|
143
|
+
'event': onResizeEnd
|
|
144
|
+
}]);
|
|
145
|
+
}, [onMouseMove, onResizeEnd, registerEvent]);
|
|
146
|
+
var style = (0, _react.useMemo)(function () {
|
|
147
|
+
var width = data.width,
|
|
148
|
+
height = data.height;
|
|
149
|
+
if (width && height) {
|
|
150
|
+
return {
|
|
151
|
+
width: width,
|
|
152
|
+
height: height
|
|
153
|
+
};
|
|
154
|
+
}
|
|
155
|
+
return null;
|
|
156
|
+
}, [data]);
|
|
60
157
|
return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
|
|
61
158
|
"data-id": element.id
|
|
62
159
|
}, attributes, {
|
|
63
|
-
className:
|
|
64
|
-
'is-selected': isSelected
|
|
65
|
-
}),
|
|
160
|
+
className: "sdoc-file-view-container",
|
|
66
161
|
contentEditable: "false",
|
|
67
162
|
suppressContentEditableWarning: true
|
|
68
163
|
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
69
164
|
className: "sdoc-file-view-title"
|
|
70
165
|
}, data.view_name), /*#__PURE__*/_react["default"].createElement("div", {
|
|
71
|
-
className: "sdoc-file-view-content
|
|
166
|
+
className: (0, _classnames["default"])('sdoc-file-view-content', {
|
|
167
|
+
'is-selected': isSelected
|
|
168
|
+
}),
|
|
169
|
+
ref: wrapperRef,
|
|
170
|
+
style: style
|
|
72
171
|
}, /*#__PURE__*/_react["default"].createElement(_seafileDatabase.Database, {
|
|
73
|
-
settings: viewSettings
|
|
74
|
-
|
|
172
|
+
settings: viewSettings,
|
|
173
|
+
ref: databaseRef
|
|
174
|
+
}), !readOnly && isSelected && /*#__PURE__*/_react["default"].createElement("span", {
|
|
175
|
+
className: "file-view-resizer",
|
|
176
|
+
ref: resizerRef,
|
|
177
|
+
onMouseDown: onResizeStart
|
|
178
|
+
}), isResizing && movingSize && /*#__PURE__*/_react["default"].createElement("span", {
|
|
179
|
+
className: "image-size"
|
|
180
|
+
}, /*#__PURE__*/_react["default"].createElement("span", null, t('Width'), ':', parseInt(movingSize.width)), /*#__PURE__*/_react["default"].createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react["default"].createElement("span", null, t('Height'), ':', parseInt(movingSize.height)))), children);
|
|
75
181
|
};
|
|
76
182
|
var renderFileView = exports.renderFileView = function renderFileView(props) {
|
|
77
183
|
return /*#__PURE__*/_react["default"].createElement(FileView, props);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seafile/sdoc-editor",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.38",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "jest",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"@seafile/comment-editor": "1.0.3",
|
|
21
21
|
"@seafile/print-js": "1.6.6",
|
|
22
22
|
"@seafile/react-image-lightbox": "^5.0.2",
|
|
23
|
-
"@seafile/seafile-database": "0.0.
|
|
23
|
+
"@seafile/seafile-database": "0.0.15",
|
|
24
24
|
"@seafile/slate": "0.91.8",
|
|
25
25
|
"@seafile/slate-history": "0.86.2",
|
|
26
26
|
"@seafile/slate-hyperscript": "0.81.7",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"publishConfig": {
|
|
73
73
|
"access": "public"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "c89a3c31a2f1885ca2f237d98f70affbd8981102"
|
|
76
76
|
}
|