@seafile/sdoc-editor 3.0.219 → 3.0.220
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/assets/css/sdoc-editor-plugins.css +70 -0
- package/dist/extension/plugins/html/rules/link.js +40 -0
- package/dist/extension/plugins/image/helpers.js +33 -1
- package/dist/extension/plugins/image/hover-menu/index.js +122 -30
- package/dist/extension/plugins/image/link-helpers.js +58 -0
- package/dist/extension/plugins/image/plugin.js +3 -2
- package/dist/extension/plugins/image/popover/image-link-popover/helpers.js +80 -0
- package/dist/extension/plugins/image/popover/image-link-popover/index.css +135 -0
- package/dist/extension/plugins/image/popover/image-link-popover/index.js +143 -0
- package/dist/extension/plugins/image/render-elem.js +124 -47
- package/dist/slate-convert/html-to-slate/rules/link.js +40 -0
- package/dist/slate-convert/md-to-slate/transform.js +22 -2
- package/dist/slate-convert/slate-to-md/transform.js +17 -1
- package/package.json +2 -2
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
.sdoc-image-hover-menu-container .sdoc-image-link-popover {
|
|
2
|
+
position: absolute;
|
|
3
|
+
top: 32px;
|
|
4
|
+
left: 0;
|
|
5
|
+
z-index: 102;
|
|
6
|
+
width: 360px;
|
|
7
|
+
max-width: calc(100vw - 24px);
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
padding: 12px;
|
|
10
|
+
color: #212529;
|
|
11
|
+
background: #fff;
|
|
12
|
+
border: 1px solid #e5e5e5;
|
|
13
|
+
border-radius: 8px;
|
|
14
|
+
cursor: default;
|
|
15
|
+
font-family: inherit;
|
|
16
|
+
font-size: 14px;
|
|
17
|
+
font-weight: 400;
|
|
18
|
+
line-height: 20px;
|
|
19
|
+
text-align: left;
|
|
20
|
+
white-space: normal;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.sdoc-image-link-input-row {
|
|
24
|
+
display: flex;
|
|
25
|
+
gap: 8px;
|
|
26
|
+
align-items: flex-end;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.sdoc-image-link-input-wrapper {
|
|
30
|
+
flex: 1;
|
|
31
|
+
min-width: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.sdoc-image-link-input-wrapper label {
|
|
35
|
+
display: flex;
|
|
36
|
+
gap: 6px;
|
|
37
|
+
align-items: center;
|
|
38
|
+
margin-bottom: 6px;
|
|
39
|
+
color: #666;
|
|
40
|
+
font-size: 12px;
|
|
41
|
+
font-weight: 400;
|
|
42
|
+
line-height: 16px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.sdoc-image-link-input-row .sdoc-image-link-input,
|
|
46
|
+
.sdoc-image-link-input-row .sdoc-image-link-submit {
|
|
47
|
+
box-sizing: border-box;
|
|
48
|
+
height: 36px;
|
|
49
|
+
min-height: 36px;
|
|
50
|
+
font-size: 14px;
|
|
51
|
+
line-height: 20px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.sdoc-image-link-input-row .sdoc-image-link-submit {
|
|
55
|
+
display: inline-flex;
|
|
56
|
+
padding-right: 14px;
|
|
57
|
+
padding-left: 14px;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
font-weight: 400;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.sdoc-image-link-results {
|
|
64
|
+
max-height: 280px;
|
|
65
|
+
padding-top: 8px;
|
|
66
|
+
margin: 10px -4px -4px;
|
|
67
|
+
overflow-y: auto;
|
|
68
|
+
border-top: 1px solid #eee;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.sdoc-image-link-results-title {
|
|
72
|
+
padding: 4px 8px;
|
|
73
|
+
color: #868e96;
|
|
74
|
+
font-size: 12px;
|
|
75
|
+
font-weight: 500;
|
|
76
|
+
line-height: 16px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.sdoc-image-link-result {
|
|
80
|
+
display: flex;
|
|
81
|
+
width: 100%;
|
|
82
|
+
min-height: 36px;
|
|
83
|
+
padding: 6px 8px;
|
|
84
|
+
color: #212529;
|
|
85
|
+
font: inherit;
|
|
86
|
+
font-weight: 400;
|
|
87
|
+
text-align: left;
|
|
88
|
+
background: transparent;
|
|
89
|
+
border: 0;
|
|
90
|
+
border-radius: 4px;
|
|
91
|
+
align-items: center;
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.sdoc-image-link-result:hover,
|
|
96
|
+
.sdoc-image-link-result.is-active {
|
|
97
|
+
background: #f5f5f5;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.sdoc-image-link-result:focus-visible {
|
|
101
|
+
background: #f5f5f5;
|
|
102
|
+
outline: 2px solid #1991eb;
|
|
103
|
+
outline-offset: -2px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.sdoc-image-link-result-icon {
|
|
107
|
+
display: inline-flex;
|
|
108
|
+
flex: 0 0 24px;
|
|
109
|
+
width: 24px;
|
|
110
|
+
height: 24px;
|
|
111
|
+
margin-right: 6px;
|
|
112
|
+
align-items: center;
|
|
113
|
+
justify-content: center;
|
|
114
|
+
color: #666;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.sdoc-image-link-result-content {
|
|
118
|
+
display: flex;
|
|
119
|
+
flex: 1;
|
|
120
|
+
min-width: 0;
|
|
121
|
+
flex-direction: column;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.sdoc-image-link-result-name {
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
text-overflow: ellipsis;
|
|
127
|
+
white-space: nowrap;
|
|
128
|
+
font: inherit;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.sdoc-image-link-no-results {
|
|
132
|
+
padding: 8px;
|
|
133
|
+
color: #868e96;
|
|
134
|
+
font-size: 13px;
|
|
135
|
+
}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _reactI18next = require("react-i18next");
|
|
12
|
+
var _reactstrap = require("reactstrap");
|
|
13
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
|
+
var _constants = require("../../../../../constants");
|
|
15
|
+
var _context = _interopRequireDefault(require("../../../../../context"));
|
|
16
|
+
var _helpers = require("./helpers");
|
|
17
|
+
require("./index.css");
|
|
18
|
+
var ImageLinkPopover = function ImageLinkPopover(_ref) {
|
|
19
|
+
var editor = _ref.editor,
|
|
20
|
+
_ref$href = _ref.href,
|
|
21
|
+
href = _ref$href === void 0 ? '' : _ref$href,
|
|
22
|
+
_ref$linkedPageId = _ref.linkedPageId,
|
|
23
|
+
linkedPageId = _ref$linkedPageId === void 0 ? '' : _ref$linkedPageId,
|
|
24
|
+
_ref$linkedWikiId = _ref.linkedWikiId,
|
|
25
|
+
linkedWikiId = _ref$linkedWikiId === void 0 ? '' : _ref$linkedWikiId,
|
|
26
|
+
onRemove = _ref.onRemove,
|
|
27
|
+
onSelectPage = _ref.onSelectPage,
|
|
28
|
+
onSubmit = _ref.onSubmit;
|
|
29
|
+
var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
|
|
30
|
+
t = _useTranslation.t;
|
|
31
|
+
var isWiki = editor.editorType === _constants.WIKI_EDITOR;
|
|
32
|
+
var currentWikiId = _context["default"].getSetting('wikiId');
|
|
33
|
+
var isCurrentWikiPageLink = isWiki && linkedWikiId === currentWikiId && Boolean(linkedPageId);
|
|
34
|
+
var _useState = (0, _react.useState)(isCurrentWikiPageLink ? '' : href),
|
|
35
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
36
|
+
url = _useState2[0],
|
|
37
|
+
setUrl = _useState2[1];
|
|
38
|
+
var resultsRef = (0, _react.useRef)(null);
|
|
39
|
+
var hasLink = Boolean(href);
|
|
40
|
+
var isValidUrl = (0, _helpers.isValidWebUrl)(url);
|
|
41
|
+
var wikiPages = (0, _react.useMemo)(function () {
|
|
42
|
+
var _context$getSetting;
|
|
43
|
+
return isWiki ? ((_context$getSetting = _context["default"].getSetting('navConfig')) === null || _context$getSetting === void 0 ? void 0 : _context$getSetting.pages) || [] : [];
|
|
44
|
+
}, [isWiki]);
|
|
45
|
+
var _useMemo = (0, _react.useMemo)(function () {
|
|
46
|
+
return (0, _helpers.getWikiPageLinkOptions)(wikiPages, url, isCurrentWikiPageLink ? linkedPageId : '');
|
|
47
|
+
}, [isCurrentWikiPageLink, linkedPageId, url, wikiPages]),
|
|
48
|
+
linkedPage = _useMemo.linkedPage,
|
|
49
|
+
pageResults = _useMemo.pageResults,
|
|
50
|
+
hasPageMatch = _useMemo.hasPageMatch;
|
|
51
|
+
var showNoPageResults = isWiki && Boolean(url) && !isValidUrl && !hasPageMatch;
|
|
52
|
+
var showResults = hasLink || Boolean(linkedPage) || pageResults.length > 0 || showNoPageResults;
|
|
53
|
+
(0, _react.useEffect)(function () {
|
|
54
|
+
if (resultsRef.current) resultsRef.current.scrollTop = 0;
|
|
55
|
+
}, [url]);
|
|
56
|
+
var submit = (0, _react.useCallback)(function () {
|
|
57
|
+
if (!isValidUrl) return;
|
|
58
|
+
onSubmit(url.trim());
|
|
59
|
+
}, [isValidUrl, onSubmit, url]);
|
|
60
|
+
var onKeyDown = (0, _react.useCallback)(function (event) {
|
|
61
|
+
if (event.key !== 'Enter') return;
|
|
62
|
+
event.preventDefault();
|
|
63
|
+
submit();
|
|
64
|
+
}, [submit]);
|
|
65
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
66
|
+
className: "sdoc-image-link-popover sdoc-popover-box-shadow",
|
|
67
|
+
onClick: function onClick(event) {
|
|
68
|
+
return event.stopPropagation();
|
|
69
|
+
},
|
|
70
|
+
onMouseDown: function onMouseDown(event) {
|
|
71
|
+
return event.stopPropagation();
|
|
72
|
+
}
|
|
73
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
74
|
+
className: "sdoc-image-link-input-row"
|
|
75
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
76
|
+
className: "sdoc-image-link-input-wrapper"
|
|
77
|
+
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
78
|
+
htmlFor: "sdoc-image-link-input"
|
|
79
|
+
}, isWiki ? "".concat(t(hasLink ? 'Edit_link' : 'Insert_link'), " / ").concat(t('Page')) : t(hasLink ? 'Edit_link' : 'Insert_link')), /*#__PURE__*/_react["default"].createElement("input", {
|
|
80
|
+
autoFocus: true,
|
|
81
|
+
id: "sdoc-image-link-input",
|
|
82
|
+
className: "form-control sdoc-image-link-input",
|
|
83
|
+
onChange: function onChange(event) {
|
|
84
|
+
return setUrl(event.target.value);
|
|
85
|
+
},
|
|
86
|
+
onKeyDown: onKeyDown,
|
|
87
|
+
placeholder: "https://example.com",
|
|
88
|
+
type: isWiki ? 'text' : 'url',
|
|
89
|
+
value: url
|
|
90
|
+
})), /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
|
|
91
|
+
className: "sdoc-image-link-submit",
|
|
92
|
+
color: "primary",
|
|
93
|
+
disabled: !isValidUrl,
|
|
94
|
+
onClick: submit
|
|
95
|
+
}, t('Submit'))), showResults && /*#__PURE__*/_react["default"].createElement("div", {
|
|
96
|
+
className: "sdoc-image-link-results",
|
|
97
|
+
ref: resultsRef
|
|
98
|
+
}, hasLink && /*#__PURE__*/_react["default"].createElement("button", {
|
|
99
|
+
className: "sdoc-image-link-result is-remove",
|
|
100
|
+
onClick: onRemove,
|
|
101
|
+
type: "button"
|
|
102
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
103
|
+
className: "sdoc-image-link-result-icon"
|
|
104
|
+
}, /*#__PURE__*/_react["default"].createElement("i", {
|
|
105
|
+
className: "sdocfont sdoc-unlink"
|
|
106
|
+
})), /*#__PURE__*/_react["default"].createElement("span", {
|
|
107
|
+
className: "sdoc-image-link-result-content"
|
|
108
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
109
|
+
className: "sdoc-image-link-result-name"
|
|
110
|
+
}, t('Remove_link')))), isWiki && linkedPage && /*#__PURE__*/_react["default"].createElement("div", {
|
|
111
|
+
className: "sdoc-image-link-result is-active"
|
|
112
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
113
|
+
className: "sdoc-image-link-result-icon"
|
|
114
|
+
}, (linkedPage === null || linkedPage === void 0 ? void 0 : linkedPage.icon) || /*#__PURE__*/_react["default"].createElement("i", {
|
|
115
|
+
className: (0, _classnames["default"])('sdocfont', linkedPage !== null && linkedPage !== void 0 && linkedPage.isDir ? 'sdoc-wiki-files' : 'sdoc-wiki-file')
|
|
116
|
+
})), /*#__PURE__*/_react["default"].createElement("span", {
|
|
117
|
+
className: "sdoc-image-link-result-content"
|
|
118
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
119
|
+
className: "sdoc-image-link-result-name"
|
|
120
|
+
}, linkedPage.name))), isWiki && pageResults.length > 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
121
|
+
className: "sdoc-image-link-results-title"
|
|
122
|
+
}, t('Link_to_page')), pageResults.map(function (page) {
|
|
123
|
+
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
124
|
+
className: "sdoc-image-link-result",
|
|
125
|
+
key: page.id,
|
|
126
|
+
onClick: function onClick() {
|
|
127
|
+
return onSelectPage(page.id, currentWikiId);
|
|
128
|
+
},
|
|
129
|
+
type: "button"
|
|
130
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
131
|
+
className: "sdoc-image-link-result-icon"
|
|
132
|
+
}, page.icon || /*#__PURE__*/_react["default"].createElement("i", {
|
|
133
|
+
className: (0, _classnames["default"])('sdocfont', page.isDir ? 'sdoc-wiki-files' : 'sdoc-wiki-file')
|
|
134
|
+
})), /*#__PURE__*/_react["default"].createElement("span", {
|
|
135
|
+
className: "sdoc-image-link-result-content"
|
|
136
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
137
|
+
className: "sdoc-image-link-result-name"
|
|
138
|
+
}, page.name)));
|
|
139
|
+
})), showNoPageResults && /*#__PURE__*/_react["default"].createElement("div", {
|
|
140
|
+
className: "sdoc-image-link-no-results"
|
|
141
|
+
}, t('No_page_results'))));
|
|
142
|
+
};
|
|
143
|
+
var _default = exports["default"] = ImageLinkPopover;
|
|
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.renderImage = renderImage;
|
|
9
9
|
exports.renderImageBlock = renderImageBlock;
|
|
10
|
-
var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
|
|
11
10
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
12
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
13
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -16,19 +15,23 @@ var _slate = require("@seafile/slate");
|
|
|
16
15
|
var _slateReact = require("@seafile/slate-react");
|
|
17
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
18
17
|
var _imagePlaceholder = _interopRequireDefault(require("../../../assets/images/image-placeholder.png"));
|
|
18
|
+
var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
|
|
19
19
|
var _constants = require("../../../constants");
|
|
20
|
+
var _context = _interopRequireDefault(require("../../../context"));
|
|
20
21
|
var _useScrollContext = require("../../../hooks/use-scroll-context");
|
|
21
22
|
var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
|
|
22
23
|
var _constants2 = require("../../constants");
|
|
23
24
|
var _constants3 = require("./constants");
|
|
24
25
|
var _copyImageErrorSvg = _interopRequireDefault(require("./copy-image-error-svg"));
|
|
26
|
+
var _imagePreviewer = _interopRequireDefault(require("./dialogs/image-previewer"));
|
|
25
27
|
var _helpers = require("./helpers");
|
|
26
28
|
var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
|
|
27
29
|
var _imageLoader = _interopRequireDefault(require("./image-loader"));
|
|
30
|
+
var _linkHelpers = require("./link-helpers");
|
|
28
31
|
var _useCopyImage2 = _interopRequireDefault(require("./use-copy-image"));
|
|
29
32
|
var _useUploadImage2 = _interopRequireDefault(require("./use-upload-image"));
|
|
30
33
|
var Image = function Image(_ref) {
|
|
31
|
-
var _imageRef$current, _imageRef$current2;
|
|
34
|
+
var _context$getSetting, _imageRef$current, _imageRef$current2;
|
|
32
35
|
var element = _ref.element,
|
|
33
36
|
editor = _ref.editor,
|
|
34
37
|
style = _ref.style,
|
|
@@ -53,6 +56,7 @@ var Image = function Image(_ref) {
|
|
|
53
56
|
};
|
|
54
57
|
var readOnly = (0, _slateReact.useReadOnly)();
|
|
55
58
|
var imageRef = (0, _react.useRef)(null);
|
|
59
|
+
var imageHoverMenuRef = (0, _react.useRef)(null);
|
|
56
60
|
var urlRef = (0, _react.useRef)(element === null || element === void 0 ? void 0 : element.data);
|
|
57
61
|
var resizerRef = (0, _react.useRef)(null);
|
|
58
62
|
var imageCaptionInputRef = (0, _react.useRef)(null);
|
|
@@ -73,14 +77,18 @@ var Image = function Image(_ref) {
|
|
|
73
77
|
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
74
78
|
isShowImageHoverMenu = _useState8[0],
|
|
75
79
|
setIsShowImageHoverMenu = _useState8[1];
|
|
76
|
-
var _useState9 = (0, _react.useState)(
|
|
80
|
+
var _useState9 = (0, _react.useState)(false),
|
|
77
81
|
_useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
var _useState1 = (0, _react.useState)(
|
|
82
|
+
isShowReadOnlyImagePreview = _useState0[0],
|
|
83
|
+
setIsShowReadOnlyImagePreview = _useState0[1];
|
|
84
|
+
var _useState1 = (0, _react.useState)({}),
|
|
81
85
|
_useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
|
|
82
|
-
|
|
83
|
-
|
|
86
|
+
menuPosition = _useState10[0],
|
|
87
|
+
setMenuPosition = _useState10[1];
|
|
88
|
+
var _useState11 = (0, _react.useState)((data === null || data === void 0 ? void 0 : data.caption) || ''),
|
|
89
|
+
_useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
|
|
90
|
+
caption = _useState12[0],
|
|
91
|
+
setCaption = _useState12[1];
|
|
84
92
|
var _useCopyImage = (0, _useCopyImage2["default"])({
|
|
85
93
|
editor: editor,
|
|
86
94
|
element: element
|
|
@@ -94,10 +102,10 @@ var Image = function Image(_ref) {
|
|
|
94
102
|
}),
|
|
95
103
|
isUploadLoading = _useUploadImage.isUploadLoading,
|
|
96
104
|
isUploadError = _useUploadImage.isUploadError;
|
|
97
|
-
var
|
|
98
|
-
|
|
99
|
-
canEditable =
|
|
100
|
-
setCanEditable =
|
|
105
|
+
var _useState13 = (0, _react.useState)(true),
|
|
106
|
+
_useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
|
|
107
|
+
canEditable = _useState14[0],
|
|
108
|
+
setCanEditable = _useState14[1];
|
|
101
109
|
var registerEvent = (0, _react.useCallback)(function (eventList) {
|
|
102
110
|
eventList.forEach(function (element) {
|
|
103
111
|
document.addEventListener(element.eventName, element.event);
|
|
@@ -166,11 +174,12 @@ var Image = function Image(_ref) {
|
|
|
166
174
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
167
175
|
}, []);
|
|
168
176
|
var onHideImageHoverMenu = (0, _react.useCallback)(function (e) {
|
|
169
|
-
var _imagePreviewer$;
|
|
177
|
+
var _imageHoverMenuRef$cu, _imagePreviewer$;
|
|
170
178
|
if (isResizing) return;
|
|
171
179
|
var imagePreviewer = document.getElementsByClassName('sf-editor-image-previewer');
|
|
172
180
|
var isCaptionInput = e.target.id === 'sdoc-image-caption-input';
|
|
173
|
-
|
|
181
|
+
var isHoverMenu = (_imageHoverMenuRef$cu = imageHoverMenuRef.current) === null || _imageHoverMenuRef$cu === void 0 ? void 0 : _imageHoverMenuRef$cu.contains(e.target);
|
|
182
|
+
if (e.target === imageRef.current || (_imagePreviewer$ = imagePreviewer[0]) !== null && _imagePreviewer$ !== void 0 && _imagePreviewer$.contains(e.target) || isCaptionInput || isHoverMenu) return;
|
|
174
183
|
setIsShowImageHoverMenu(false);
|
|
175
184
|
}, [isResizing]);
|
|
176
185
|
(0, _react.useEffect)(function () {
|
|
@@ -178,38 +187,27 @@ var Image = function Image(_ref) {
|
|
|
178
187
|
var resizeObserver = null;
|
|
179
188
|
if (isShowImageHoverMenu) {
|
|
180
189
|
registerEvent([{
|
|
181
|
-
'eventName': '
|
|
190
|
+
'eventName': 'mousedown',
|
|
182
191
|
'event': onHideImageHoverMenu
|
|
183
192
|
}]);
|
|
184
193
|
scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
|
|
185
194
|
observerRefValue = scrollRef.current;
|
|
186
|
-
resizeObserver = new ResizeObserver(function (
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
try {
|
|
190
|
-
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
191
|
-
var entry = _step.value;
|
|
192
|
-
if (resizeObserver) {
|
|
193
|
-
onScroll();
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
} catch (err) {
|
|
197
|
-
_iterator.e(err);
|
|
198
|
-
} finally {
|
|
199
|
-
_iterator.f();
|
|
195
|
+
resizeObserver = new ResizeObserver(function () {
|
|
196
|
+
if (resizeObserver) {
|
|
197
|
+
onScroll();
|
|
200
198
|
}
|
|
201
199
|
});
|
|
202
200
|
resizeObserver.observe(scrollRef.current);
|
|
203
201
|
} else {
|
|
204
202
|
unregisterEvent([{
|
|
205
|
-
'eventName': '
|
|
203
|
+
'eventName': 'mousedown',
|
|
206
204
|
'event': onHideImageHoverMenu
|
|
207
205
|
}]);
|
|
208
206
|
scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
|
|
209
207
|
}
|
|
210
208
|
return function () {
|
|
211
209
|
unregisterEvent([{
|
|
212
|
-
'eventName': '
|
|
210
|
+
'eventName': 'mousedown',
|
|
213
211
|
'event': onHideImageHoverMenu
|
|
214
212
|
}]);
|
|
215
213
|
if (observerRefValue) {
|
|
@@ -247,10 +245,34 @@ var Image = function Image(_ref) {
|
|
|
247
245
|
});
|
|
248
246
|
}
|
|
249
247
|
}, []);
|
|
250
|
-
var
|
|
248
|
+
var imageHref = (0, _linkHelpers.normalizeWebUrl)(data.href);
|
|
249
|
+
var onClickImage = (0, _react.useCallback)(function () {
|
|
250
|
+
if (readOnly) return;
|
|
251
251
|
setPosition();
|
|
252
252
|
setIsShowImageHoverMenu(true);
|
|
253
|
-
}, [setPosition]);
|
|
253
|
+
}, [readOnly, setPosition]);
|
|
254
|
+
var isWikiPageLink = Boolean(imageHref && data.linked_wiki_id && data.linked_wiki_page_id);
|
|
255
|
+
var currentWikiId = _context["default"].getSetting('wikiId');
|
|
256
|
+
var linkedWikiPage = isWikiPageLink && data.linked_wiki_id === currentWikiId ? (((_context$getSetting = _context["default"].getSetting('navConfig')) === null || _context$getSetting === void 0 ? void 0 : _context$getSetting.pages) || []).find(function (page) {
|
|
257
|
+
return page.id === data.linked_wiki_page_id;
|
|
258
|
+
}) : null;
|
|
259
|
+
var imageLinkName = (linkedWikiPage === null || linkedWikiPage === void 0 ? void 0 : linkedWikiPage.name) || imageHref.replace(/^https?:\/\/(?:www\.)?/i, '');
|
|
260
|
+
var isInternalLink = !isWikiPageLink && (0, _linkHelpers.isCurrentServerUrl)(imageHref);
|
|
261
|
+
var readOnlyFullscreenTargetId = "sdoc_image_readonly_fullscreen_".concat(element.id);
|
|
262
|
+
var isCurrentWikiPageLink = isWikiPageLink && editor.editorType === _constants.WIKI_EDITOR && data.linked_wiki_id === currentWikiId && (0, _linkHelpers.isCurrentServerUrl)(imageHref);
|
|
263
|
+
var onOpenLinkedWikiPage = (0, _react.useCallback)(function (event) {
|
|
264
|
+
if (!isCurrentWikiPageLink) return;
|
|
265
|
+
event.preventDefault();
|
|
266
|
+
event.stopPropagation();
|
|
267
|
+
var eventBus = _eventBus["default"].getInstance();
|
|
268
|
+
eventBus.dispatch('open_wiki_page_id_link', {
|
|
269
|
+
page_id: data.linked_wiki_page_id
|
|
270
|
+
});
|
|
271
|
+
}, [data.linked_wiki_page_id, isCurrentWikiPageLink]);
|
|
272
|
+
var onLinkedWikiPageKeyDown = (0, _react.useCallback)(function (event) {
|
|
273
|
+
if (event.key !== 'Enter' && event.key !== ' ') return;
|
|
274
|
+
onOpenLinkedWikiPage(event);
|
|
275
|
+
}, [onOpenLinkedWikiPage]);
|
|
254
276
|
var reloadImage = (0, _react.useCallback)(function () {
|
|
255
277
|
setIsShowImagePlaceholder(false);
|
|
256
278
|
}, []);
|
|
@@ -297,6 +319,22 @@ var Image = function Image(_ref) {
|
|
|
297
319
|
}
|
|
298
320
|
setCanEditable(true);
|
|
299
321
|
}, [data, editor, element]);
|
|
322
|
+
var image = /*#__PURE__*/_react["default"].createElement("img", {
|
|
323
|
+
ref: imageRef,
|
|
324
|
+
className: (0, _classnames["default"])({
|
|
325
|
+
'image-selected': !readOnly && isSelected
|
|
326
|
+
}),
|
|
327
|
+
onClick: onClickImage,
|
|
328
|
+
src: (0, _helpers.getImageURL)(data, editor),
|
|
329
|
+
style: getImageStyle(),
|
|
330
|
+
draggable: false,
|
|
331
|
+
onLoad: onImageLoaded,
|
|
332
|
+
onError: onImageLoadError,
|
|
333
|
+
alt: ""
|
|
334
|
+
});
|
|
335
|
+
var preventImageLinkNavigation = (0, _react.useCallback)(function (event) {
|
|
336
|
+
if (!readOnly) event.preventDefault();
|
|
337
|
+
}, [readOnly]);
|
|
300
338
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isShowImagePlaceholder && /*#__PURE__*/_react["default"].createElement("span", Object.assign({
|
|
301
339
|
className: (0, _classnames["default"])('sdoc-image-wrapper', className)
|
|
302
340
|
}, attributes, {
|
|
@@ -345,20 +383,51 @@ var Image = function Image(_ref) {
|
|
|
345
383
|
'upload-error': isUploadError
|
|
346
384
|
})
|
|
347
385
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
386
|
+
className: "sdoc-image-visual",
|
|
348
387
|
style: imageStyle
|
|
349
|
-
}, /*#__PURE__*/_react["default"].createElement("
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
388
|
+
}, isWikiPageLink ? /*#__PURE__*/_react["default"].createElement("a", {
|
|
389
|
+
className: "sdoc-image-page-link",
|
|
390
|
+
href: imageHref,
|
|
391
|
+
onClick: readOnly ? onOpenLinkedWikiPage : preventImageLinkNavigation,
|
|
392
|
+
onKeyDown: readOnly ? onLinkedWikiPageKeyDown : undefined
|
|
393
|
+
}, image) : isInternalLink ? /*#__PURE__*/_react["default"].createElement("a", {
|
|
394
|
+
href: imageHref,
|
|
395
|
+
onClick: preventImageLinkNavigation
|
|
396
|
+
}, image) : imageHref ? /*#__PURE__*/_react["default"].createElement("a", {
|
|
397
|
+
href: imageHref,
|
|
398
|
+
target: "_blank",
|
|
399
|
+
rel: "noopener noreferrer",
|
|
400
|
+
onClick: preventImageLinkNavigation
|
|
401
|
+
}, image) : image, readOnly && imageHref && /*#__PURE__*/_react["default"].createElement("span", {
|
|
402
|
+
className: "sdoc-image-readonly-link-indicator"
|
|
403
|
+
}, /*#__PURE__*/_react["default"].createElement("i", {
|
|
404
|
+
className: "sdocfont sdoc-link-file"
|
|
405
|
+
}), /*#__PURE__*/_react["default"].createElement("span", {
|
|
406
|
+
className: "sdoc-image-readonly-link-name"
|
|
407
|
+
}, imageLinkName)), readOnly && /*#__PURE__*/_react["default"].createElement("span", {
|
|
408
|
+
className: "sdoc-image-hover-menu-container sdoc-image-readonly-fullscreen-container"
|
|
409
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
410
|
+
className: "hover-menu-container"
|
|
411
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
412
|
+
className: "op-group-item"
|
|
413
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
414
|
+
"aria-label": t('Full_screen_mode'),
|
|
415
|
+
className: "op-item",
|
|
416
|
+
id: readOnlyFullscreenTargetId,
|
|
417
|
+
onClick: function onClick(event) {
|
|
418
|
+
event.preventDefault();
|
|
419
|
+
event.stopPropagation();
|
|
420
|
+
setIsShowReadOnlyImagePreview(true);
|
|
421
|
+
},
|
|
422
|
+
role: "button",
|
|
423
|
+
tabIndex: 0
|
|
424
|
+
}, /*#__PURE__*/_react["default"].createElement("i", {
|
|
425
|
+
className: "sdocfont sdoc-fullscreen"
|
|
426
|
+
}), /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
|
|
427
|
+
target: readOnlyFullscreenTargetId,
|
|
428
|
+
placement: "top",
|
|
429
|
+
fade: true
|
|
430
|
+
}, t('Full_screen_mode')))))), (isCopyImageLoading || isUploadLoading) && /*#__PURE__*/_react["default"].createElement(_imageLoader["default"], {
|
|
362
431
|
copyright: t('Image_is_uploading')
|
|
363
432
|
}), isUploadError && /*#__PURE__*/_react["default"].createElement(_imageLoader["default"], {
|
|
364
433
|
copyright: t('Image_is_upload_error'),
|
|
@@ -388,8 +457,9 @@ var Image = function Image(_ref) {
|
|
|
388
457
|
onCompositionStart: function onCompositionStart(e) {
|
|
389
458
|
e.stopPropagation();
|
|
390
459
|
}
|
|
391
|
-
}))), children), isShowImageHoverMenu && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
|
|
460
|
+
}))), children), !readOnly && isShowImageHoverMenu && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
|
|
392
461
|
editor: editor,
|
|
462
|
+
menuRef: imageHoverMenuRef,
|
|
393
463
|
menuPosition: menuPosition,
|
|
394
464
|
element: element,
|
|
395
465
|
parentNodeEntry: nodeEntry,
|
|
@@ -398,6 +468,13 @@ var Image = function Image(_ref) {
|
|
|
398
468
|
onHideImageHoverMenu: function onHideImageHoverMenu() {
|
|
399
469
|
setIsShowImageHoverMenu(false);
|
|
400
470
|
}
|
|
471
|
+
}), isShowReadOnlyImagePreview && /*#__PURE__*/_react["default"].createElement(_imagePreviewer["default"], {
|
|
472
|
+
imageUrl: (0, _helpers.getImageURL)(data, editor),
|
|
473
|
+
editor: editor,
|
|
474
|
+
toggleImagePreviewer: function toggleImagePreviewer() {
|
|
475
|
+
return setIsShowReadOnlyImagePreview(false);
|
|
476
|
+
},
|
|
477
|
+
t: t
|
|
401
478
|
})));
|
|
402
479
|
};
|
|
403
480
|
var SdocImage = (0, _reactI18next.withTranslation)('sdoc-editor')(Image);
|
|
@@ -5,12 +5,52 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports["default"] = void 0;
|
|
8
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
8
9
|
var _slugid = _interopRequireDefault(require("slugid"));
|
|
10
|
+
var _linkHelpers = require("../../../extension/plugins/image/link-helpers");
|
|
9
11
|
var _constants = require("../constants");
|
|
10
12
|
var linkRule = function linkRule(element, parseChild) {
|
|
11
13
|
var nodeName = element.nodeName;
|
|
12
14
|
var content = element.textContent || element.getAttribute('title') || element.getAttribute('href');
|
|
13
15
|
if (nodeName === 'A') {
|
|
16
|
+
var image = (0, _linkHelpers.getOnlyImageChild)(element);
|
|
17
|
+
if (image) {
|
|
18
|
+
var href = (0, _linkHelpers.normalizeWebUrl)(element.getAttribute('href'));
|
|
19
|
+
return {
|
|
20
|
+
id: _slugid["default"].nice(),
|
|
21
|
+
type: _constants.IMAGE,
|
|
22
|
+
data: (0, _objectSpread2["default"])({
|
|
23
|
+
src: image.getAttribute('src')
|
|
24
|
+
}, href && {
|
|
25
|
+
href: href
|
|
26
|
+
}),
|
|
27
|
+
children: [{
|
|
28
|
+
text: '',
|
|
29
|
+
id: _slugid["default"].nice()
|
|
30
|
+
}]
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
if (element.querySelector('img')) {
|
|
34
|
+
var _href = (0, _linkHelpers.normalizeWebUrl)(element.getAttribute('href'));
|
|
35
|
+
return parseChild(element.childNodes).map(function (child) {
|
|
36
|
+
if (!_href) return child;
|
|
37
|
+
if (child.type === _constants.IMAGE) return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, child), {}, {
|
|
38
|
+
data: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, child.data), {}, {
|
|
39
|
+
href: _href
|
|
40
|
+
})
|
|
41
|
+
});
|
|
42
|
+
if (typeof child.text === 'string') {
|
|
43
|
+
return {
|
|
44
|
+
id: _slugid["default"].nice(),
|
|
45
|
+
type: _constants.LINK,
|
|
46
|
+
href: _href,
|
|
47
|
+
title: element.getAttribute('title'),
|
|
48
|
+
children: [child]
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
return child;
|
|
52
|
+
});
|
|
53
|
+
}
|
|
14
54
|
return {
|
|
15
55
|
id: _slugid["default"].nice(),
|
|
16
56
|
type: _constants.LINK,
|
|
@@ -9,6 +9,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
|
|
|
9
9
|
var _slugid = _interopRequireDefault(require("slugid"));
|
|
10
10
|
var _elementType = require("../../extension/constants/element-type");
|
|
11
11
|
var _core = require("../../extension/core");
|
|
12
|
+
var _linkHelpers = require("../../extension/plugins/image/link-helpers");
|
|
12
13
|
var _htmlToSlate = _interopRequireDefault(require("../html-to-slate"));
|
|
13
14
|
var INLINE_KEY_MAP = {
|
|
14
15
|
strong: 'bold',
|
|
@@ -27,6 +28,25 @@ var _applyMarkForInlineItem = function applyMarkForInlineItem(result, item) {
|
|
|
27
28
|
type: 'text',
|
|
28
29
|
value: ''
|
|
29
30
|
} : children[0];
|
|
31
|
+
if (child.type === _elementType.IMAGE) {
|
|
32
|
+
var href = (0, _linkHelpers.normalizeWebUrl)(item.url);
|
|
33
|
+
var image = {
|
|
34
|
+
id: _slugid["default"].nice(),
|
|
35
|
+
type: _elementType.IMAGE,
|
|
36
|
+
data: (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
37
|
+
src: child.url
|
|
38
|
+
}, child.title && {
|
|
39
|
+
title: child.title
|
|
40
|
+
}), child.alt && {
|
|
41
|
+
alt: child.alt
|
|
42
|
+
}), href && {
|
|
43
|
+
href: href
|
|
44
|
+
}),
|
|
45
|
+
children: [(0, _core.generateDefaultText)()]
|
|
46
|
+
};
|
|
47
|
+
result.push([(0, _core.generateDefaultText)(), image, (0, _core.generateDefaultText)()]);
|
|
48
|
+
return result;
|
|
49
|
+
}
|
|
30
50
|
|
|
31
51
|
// Mention node
|
|
32
52
|
if ((_item$title = item.title) !== null && _item$title !== void 0 && (_item$title$startsWit = _item$title.startsWith) !== null && _item$title$startsWit !== void 0 && _item$title$startsWit.call(_item$title, '__sdoc_mention__username')) {
|
|
@@ -69,13 +89,13 @@ var _applyMarkForInlineItem = function applyMarkForInlineItem(result, item) {
|
|
|
69
89
|
}), item.height && {
|
|
70
90
|
height: item.height
|
|
71
91
|
});
|
|
72
|
-
var
|
|
92
|
+
var _image = {
|
|
73
93
|
id: _slugid["default"].nice(),
|
|
74
94
|
data: data,
|
|
75
95
|
type: _elementType.IMAGE,
|
|
76
96
|
children: [(0, _core.generateDefaultText)()]
|
|
77
97
|
};
|
|
78
|
-
result.push([(0, _core.generateDefaultText)(),
|
|
98
|
+
result.push([(0, _core.generateDefaultText)(), _image, (0, _core.generateDefaultText)()]);
|
|
79
99
|
return result;
|
|
80
100
|
}
|
|
81
101
|
|