@atlaskit/help-article 4.0.35 → 4.0.36
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/CHANGELOG.md +6 -0
- package/dist/cjs/components/ArticleBody/index.js +3 -29
- package/dist/cjs/components/ArticleBody/resetCss.js +0 -7
- package/dist/cjs/components/ArticleBody/styled.js +0 -6
- package/dist/cjs/components/HelpArticle.js +7 -15
- package/dist/cjs/components/styled.js +0 -11
- package/dist/cjs/index.js +0 -3
- package/dist/cjs/model/HelpArticle.js +0 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/ArticleBody/index.js +3 -14
- package/dist/es2019/components/HelpArticle.js +0 -2
- package/dist/es2019/model/HelpArticle.js +0 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/ArticleBody/index.js +3 -15
- package/dist/esm/components/ArticleBody/styled.js +0 -2
- package/dist/esm/components/HelpArticle.js +7 -9
- package/dist/esm/components/styled.js +0 -2
- package/dist/esm/model/HelpArticle.js +0 -1
- package/dist/esm/version.json +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,52 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = exports.ArticleBody = void 0;
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
10
|
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
15
|
-
|
|
16
11
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
17
|
-
|
|
18
12
|
var _renderer = require("@atlaskit/renderer");
|
|
19
|
-
|
|
20
13
|
var _HelpArticle = require("../../model/HelpArticle");
|
|
21
|
-
|
|
22
14
|
var _resetCss = _interopRequireDefault(require("./resetCss"));
|
|
23
|
-
|
|
24
15
|
var _styled = require("./styled");
|
|
25
|
-
|
|
26
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
-
|
|
28
17
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
-
|
|
30
18
|
var IFRAME_CONTAINER_ID = 'help-iframe-container';
|
|
31
19
|
var IFRAME_ID = 'help-iframe';
|
|
32
|
-
|
|
33
20
|
var ArticleBody = function ArticleBody(props) {
|
|
34
21
|
/**
|
|
35
22
|
* Set article height
|
|
36
23
|
*/
|
|
37
24
|
var resizeIframe = function resizeIframe(onArticleRenderDone) {
|
|
38
25
|
var currentIframe = document.getElementById(IFRAME_ID);
|
|
39
|
-
|
|
40
26
|
if (!currentIframe) {
|
|
41
27
|
return;
|
|
42
28
|
}
|
|
43
|
-
|
|
44
29
|
if (currentIframe !== null && currentIframe.contentWindow !== null) {
|
|
45
30
|
if (currentIframe.contentWindow.document.body) {
|
|
46
31
|
var iframeContent = currentIframe.contentWindow.document.body.firstElementChild;
|
|
47
32
|
/* if the iframe has content, set the height of the iframe body
|
|
48
33
|
and of the iframe itself */
|
|
49
|
-
|
|
50
34
|
if (iframeContent) {
|
|
51
35
|
var contentHeight = iframeContent.scrollHeight;
|
|
52
36
|
currentIframe.style.height = contentHeight + 10 + 'px';
|
|
@@ -55,20 +39,19 @@ var ArticleBody = function ArticleBody(props) {
|
|
|
55
39
|
}
|
|
56
40
|
}
|
|
57
41
|
};
|
|
42
|
+
|
|
58
43
|
/**
|
|
59
44
|
* When the article content changes, update the content of the iframe and
|
|
60
45
|
* resize the iframe based on the new content
|
|
61
46
|
*/
|
|
62
|
-
|
|
63
|
-
|
|
64
47
|
(0, _react.useEffect)(function () {
|
|
65
48
|
/**
|
|
66
49
|
* Set iframe content
|
|
67
50
|
*/
|
|
51
|
+
|
|
68
52
|
var setIframeContent = function setIframeContent() {
|
|
69
53
|
var body = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
70
54
|
var onArticleRenderBegin = arguments.length > 1 ? arguments[1] : undefined;
|
|
71
|
-
|
|
72
55
|
/**
|
|
73
56
|
* We update the content this way because we can't use srcdoc (Edge and IE don't support it)
|
|
74
57
|
* Every time the article content changes we replace the iframe with an empty div and right after the
|
|
@@ -76,30 +59,26 @@ var ArticleBody = function ArticleBody(props) {
|
|
|
76
59
|
* fire the iframe's onload function (we need it to resize the iframe after all content is loaded).
|
|
77
60
|
* If we replace the content of the iframe directly, the onload function won't be fired
|
|
78
61
|
*/
|
|
62
|
+
|
|
79
63
|
var currentIframe = document.getElementById(IFRAME_ID);
|
|
80
64
|
var divSyle = {
|
|
81
65
|
height: 'auto'
|
|
82
66
|
};
|
|
83
|
-
|
|
84
67
|
if (currentIframe !== null && currentIframe.contentWindow !== null) {
|
|
85
68
|
divSyle = {
|
|
86
69
|
height: "".concat(currentIframe.contentWindow.document.body.scrollHeight, "px")
|
|
87
70
|
};
|
|
88
71
|
}
|
|
89
|
-
|
|
90
72
|
var iframeContainer = document.getElementById(IFRAME_CONTAINER_ID);
|
|
91
|
-
|
|
92
73
|
if (!iframeContainer) {
|
|
93
74
|
return;
|
|
94
75
|
}
|
|
95
|
-
|
|
96
76
|
_reactDom.default.render( /*#__PURE__*/_react.default.createElement("div", {
|
|
97
77
|
style: divSyle
|
|
98
78
|
}), iframeContainer, function () {
|
|
99
79
|
if (!iframeContainer) {
|
|
100
80
|
return;
|
|
101
81
|
}
|
|
102
|
-
|
|
103
82
|
_reactDom.default.render( /*#__PURE__*/_react.default.createElement(_styled.ArticleFrame, {
|
|
104
83
|
id: IFRAME_ID,
|
|
105
84
|
name: IFRAME_ID,
|
|
@@ -109,10 +88,8 @@ var ArticleBody = function ArticleBody(props) {
|
|
|
109
88
|
sandbox: "allow-same-origin allow-popups allow-popups-to-escape-sandbox"
|
|
110
89
|
}), iframeContainer, function () {
|
|
111
90
|
var iframeContainer = document.getElementById(IFRAME_CONTAINER_ID);
|
|
112
|
-
|
|
113
91
|
if (iframeContainer) {
|
|
114
92
|
var newIframe = frames[IFRAME_ID];
|
|
115
|
-
|
|
116
93
|
if (newIframe !== null) {
|
|
117
94
|
var iframeDocument = newIframe.document;
|
|
118
95
|
iframeDocument.open();
|
|
@@ -123,7 +100,6 @@ var ArticleBody = function ArticleBody(props) {
|
|
|
123
100
|
style.innerText = _resetCss.default;
|
|
124
101
|
head.appendChild(style);
|
|
125
102
|
resizeIframe();
|
|
126
|
-
|
|
127
103
|
if (onArticleRenderBegin) {
|
|
128
104
|
onArticleRenderBegin();
|
|
129
105
|
}
|
|
@@ -132,7 +108,6 @@ var ArticleBody = function ArticleBody(props) {
|
|
|
132
108
|
});
|
|
133
109
|
});
|
|
134
110
|
};
|
|
135
|
-
|
|
136
111
|
if (props.bodyFormat === _HelpArticle.BODY_FORMAT_TYPES.html && typeof props.body === 'string') {
|
|
137
112
|
setIframeContent(props.body, props.onArticleRenderBegin);
|
|
138
113
|
}
|
|
@@ -165,7 +140,6 @@ var ArticleBody = function ArticleBody(props) {
|
|
|
165
140
|
}
|
|
166
141
|
}) : null;
|
|
167
142
|
};
|
|
168
|
-
|
|
169
143
|
exports.ArticleBody = ArticleBody;
|
|
170
144
|
var _default = ArticleBody;
|
|
171
145
|
exports.default = _default;
|
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _base = _interopRequireDefault(require("@atlaskit/css-reset/base"));
|
|
11
|
-
|
|
12
9
|
var _browserFixes = _interopRequireDefault(require("@atlaskit/css-reset/browser-fixes"));
|
|
13
|
-
|
|
14
10
|
var _reset = _interopRequireDefault(require("@atlaskit/css-reset/reset"));
|
|
15
|
-
|
|
16
11
|
var _tables = _interopRequireDefault(require("@atlaskit/css-reset/tables"));
|
|
17
|
-
|
|
18
12
|
var _utils = _interopRequireDefault(require("@atlaskit/css-reset/utils"));
|
|
19
|
-
|
|
20
13
|
var IFRAME_FIX_CSS = "\n html{\n width: calc(100% - 10px);\n padding: 5px;\n overflow: hidden;\n height: auto;\n }\n\n body {\n margin: 0;\n padding: 0;\n }";
|
|
21
14
|
var DEFAULT_CSS = _reset.default + _base.default + _utils.default + _browserFixes.default + _browserFixes.default + _tables.default + IFRAME_FIX_CSS;
|
|
22
15
|
var _default = DEFAULT_CSS;
|
|
@@ -1,18 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.ArticleFrame = void 0;
|
|
9
|
-
|
|
10
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
|
-
|
|
12
9
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
13
|
-
|
|
14
10
|
var _templateObject;
|
|
15
|
-
|
|
16
11
|
var ArticleFrame = _styled.default.iframe(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n width: calc(100% + 10px);\n margin: -5px;\n border: none;\n"])));
|
|
17
|
-
|
|
18
12
|
exports.ArticleFrame = ArticleFrame;
|
|
@@ -1,31 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
|
|
13
|
-
|
|
14
10
|
var _HelpArticle = require("../model/HelpArticle");
|
|
15
|
-
|
|
16
11
|
var _styled = require("./styled");
|
|
17
|
-
|
|
18
12
|
var _ArticleBody = _interopRequireDefault(require("./ArticleBody"));
|
|
19
|
-
|
|
20
13
|
var HelpArticle = function HelpArticle(props) {
|
|
21
14
|
var _props$title = props.title,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
15
|
+
title = _props$title === void 0 ? '' : _props$title,
|
|
16
|
+
body = props.body,
|
|
17
|
+
_props$bodyFormat = props.bodyFormat,
|
|
18
|
+
bodyFormat = _props$bodyFormat === void 0 ? _HelpArticle.BODY_FORMAT_TYPES.html : _props$bodyFormat,
|
|
19
|
+
titleLinkUrl = props.titleLinkUrl,
|
|
20
|
+
onArticleRenderBegin = props.onArticleRenderBegin,
|
|
21
|
+
onArticleRenderDone = props.onArticleRenderDone;
|
|
29
22
|
return /*#__PURE__*/_react.default.createElement(_styled.ArticleContentInner, null, title && /*#__PURE__*/_react.default.createElement(_styled.ArticleContentTitle, null, titleLinkUrl ? /*#__PURE__*/_react.default.createElement(_styled.ArticleContentTitleLink, {
|
|
30
23
|
href: titleLinkUrl,
|
|
31
24
|
target: "_blank"
|
|
@@ -39,6 +32,5 @@ var HelpArticle = function HelpArticle(props) {
|
|
|
39
32
|
onArticleRenderDone: onArticleRenderDone
|
|
40
33
|
}));
|
|
41
34
|
};
|
|
42
|
-
|
|
43
35
|
var _default = HelpArticle;
|
|
44
36
|
exports.default = _default;
|
|
@@ -1,28 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.ArticleContentTitleLink = exports.ArticleContentTitle = exports.ArticleContentInner = void 0;
|
|
9
|
-
|
|
10
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
|
-
|
|
12
9
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
13
|
-
|
|
14
10
|
var _constants = require("@atlaskit/theme/constants");
|
|
15
|
-
|
|
16
11
|
var _templateObject, _templateObject2, _templateObject3;
|
|
17
|
-
|
|
18
12
|
var ArticleContentInner = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding-bottom: ", "px;\n position: relative;\n"])), 2 * (0, _constants.gridSize)());
|
|
19
|
-
|
|
20
13
|
exports.ArticleContentInner = ArticleContentInner;
|
|
21
|
-
|
|
22
14
|
var ArticleContentTitle = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding-bottom: ", "px;\n"])), 2 * (0, _constants.gridSize)());
|
|
23
|
-
|
|
24
15
|
exports.ArticleContentTitle = ArticleContentTitle;
|
|
25
|
-
|
|
26
16
|
var ArticleContentTitleLink = _styled.default.a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n &:hover {\n text-decoration: none;\n }\n"])));
|
|
27
|
-
|
|
28
17
|
exports.ArticleContentTitleLink = ArticleContentTitleLink;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "default", {
|
|
|
17
16
|
return _HelpArticle.default;
|
|
18
17
|
}
|
|
19
18
|
});
|
|
20
|
-
|
|
21
19
|
var _HelpArticle = _interopRequireDefault(require("./components/HelpArticle"));
|
|
22
|
-
|
|
23
20
|
var _HelpArticle2 = require("./model/HelpArticle");
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.BODY_FORMAT_TYPES = void 0;
|
|
7
7
|
var BODY_FORMAT_TYPES;
|
|
8
8
|
exports.BODY_FORMAT_TYPES = BODY_FORMAT_TYPES;
|
|
9
|
-
|
|
10
9
|
(function (BODY_FORMAT_TYPES) {
|
|
11
10
|
BODY_FORMAT_TYPES["adf"] = "adf";
|
|
12
11
|
BODY_FORMAT_TYPES["html"] = "html";
|
package/dist/cjs/version.json
CHANGED
|
@@ -13,17 +13,14 @@ export const ArticleBody = props => {
|
|
|
13
13
|
*/
|
|
14
14
|
const resizeIframe = onArticleRenderDone => {
|
|
15
15
|
const currentIframe = document.getElementById(IFRAME_ID);
|
|
16
|
-
|
|
17
16
|
if (!currentIframe) {
|
|
18
17
|
return;
|
|
19
18
|
}
|
|
20
|
-
|
|
21
19
|
if (currentIframe !== null && currentIframe.contentWindow !== null) {
|
|
22
20
|
if (currentIframe.contentWindow.document.body) {
|
|
23
21
|
const iframeContent = currentIframe.contentWindow.document.body.firstElementChild;
|
|
24
22
|
/* if the iframe has content, set the height of the iframe body
|
|
25
23
|
and of the iframe itself */
|
|
26
|
-
|
|
27
24
|
if (iframeContent) {
|
|
28
25
|
const contentHeight = iframeContent.scrollHeight;
|
|
29
26
|
currentIframe.style.height = contentHeight + 10 + 'px';
|
|
@@ -32,16 +29,16 @@ export const ArticleBody = props => {
|
|
|
32
29
|
}
|
|
33
30
|
}
|
|
34
31
|
};
|
|
32
|
+
|
|
35
33
|
/**
|
|
36
34
|
* When the article content changes, update the content of the iframe and
|
|
37
35
|
* resize the iframe based on the new content
|
|
38
36
|
*/
|
|
39
|
-
|
|
40
|
-
|
|
41
37
|
useEffect(() => {
|
|
42
38
|
/**
|
|
43
39
|
* Set iframe content
|
|
44
40
|
*/
|
|
41
|
+
|
|
45
42
|
const setIframeContent = (body = '', onArticleRenderBegin) => {
|
|
46
43
|
/**
|
|
47
44
|
* We update the content this way because we can't use srcdoc (Edge and IE don't support it)
|
|
@@ -50,30 +47,26 @@ export const ArticleBody = props => {
|
|
|
50
47
|
* fire the iframe's onload function (we need it to resize the iframe after all content is loaded).
|
|
51
48
|
* If we replace the content of the iframe directly, the onload function won't be fired
|
|
52
49
|
*/
|
|
50
|
+
|
|
53
51
|
const currentIframe = document.getElementById(IFRAME_ID);
|
|
54
52
|
let divSyle = {
|
|
55
53
|
height: 'auto'
|
|
56
54
|
};
|
|
57
|
-
|
|
58
55
|
if (currentIframe !== null && currentIframe.contentWindow !== null) {
|
|
59
56
|
divSyle = {
|
|
60
57
|
height: `${currentIframe.contentWindow.document.body.scrollHeight}px`
|
|
61
58
|
};
|
|
62
59
|
}
|
|
63
|
-
|
|
64
60
|
const iframeContainer = document.getElementById(IFRAME_CONTAINER_ID);
|
|
65
|
-
|
|
66
61
|
if (!iframeContainer) {
|
|
67
62
|
return;
|
|
68
63
|
}
|
|
69
|
-
|
|
70
64
|
ReactDOM.render( /*#__PURE__*/React.createElement("div", {
|
|
71
65
|
style: divSyle
|
|
72
66
|
}), iframeContainer, () => {
|
|
73
67
|
if (!iframeContainer) {
|
|
74
68
|
return;
|
|
75
69
|
}
|
|
76
|
-
|
|
77
70
|
ReactDOM.render( /*#__PURE__*/React.createElement(ArticleFrame, {
|
|
78
71
|
id: IFRAME_ID,
|
|
79
72
|
name: IFRAME_ID,
|
|
@@ -83,10 +76,8 @@ export const ArticleBody = props => {
|
|
|
83
76
|
sandbox: "allow-same-origin allow-popups allow-popups-to-escape-sandbox"
|
|
84
77
|
}), iframeContainer, () => {
|
|
85
78
|
const iframeContainer = document.getElementById(IFRAME_CONTAINER_ID);
|
|
86
|
-
|
|
87
79
|
if (iframeContainer) {
|
|
88
80
|
const newIframe = frames[IFRAME_ID];
|
|
89
|
-
|
|
90
81
|
if (newIframe !== null) {
|
|
91
82
|
const iframeDocument = newIframe.document;
|
|
92
83
|
iframeDocument.open();
|
|
@@ -97,7 +88,6 @@ export const ArticleBody = props => {
|
|
|
97
88
|
style.innerText = resetCSS;
|
|
98
89
|
head.appendChild(style);
|
|
99
90
|
resizeIframe();
|
|
100
|
-
|
|
101
91
|
if (onArticleRenderBegin) {
|
|
102
92
|
onArticleRenderBegin();
|
|
103
93
|
}
|
|
@@ -106,7 +96,6 @@ export const ArticleBody = props => {
|
|
|
106
96
|
});
|
|
107
97
|
});
|
|
108
98
|
};
|
|
109
|
-
|
|
110
99
|
if (props.bodyFormat === BODY_FORMAT_TYPES.html && typeof props.body === 'string') {
|
|
111
100
|
setIframeContent(props.body, props.onArticleRenderBegin);
|
|
112
101
|
}
|
|
@@ -3,7 +3,6 @@ import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
|
|
|
3
3
|
import { BODY_FORMAT_TYPES } from '../model/HelpArticle';
|
|
4
4
|
import { ArticleContentInner, ArticleContentTitle, ArticleContentTitleLink } from './styled';
|
|
5
5
|
import ArticleBody from './ArticleBody';
|
|
6
|
-
|
|
7
6
|
const HelpArticle = props => {
|
|
8
7
|
const {
|
|
9
8
|
title = '',
|
|
@@ -26,5 +25,4 @@ const HelpArticle = props => {
|
|
|
26
25
|
onArticleRenderDone: onArticleRenderDone
|
|
27
26
|
}));
|
|
28
27
|
};
|
|
29
|
-
|
|
30
28
|
export default HelpArticle;
|
package/dist/es2019/version.json
CHANGED
|
@@ -13,17 +13,14 @@ export var ArticleBody = function ArticleBody(props) {
|
|
|
13
13
|
*/
|
|
14
14
|
var resizeIframe = function resizeIframe(onArticleRenderDone) {
|
|
15
15
|
var currentIframe = document.getElementById(IFRAME_ID);
|
|
16
|
-
|
|
17
16
|
if (!currentIframe) {
|
|
18
17
|
return;
|
|
19
18
|
}
|
|
20
|
-
|
|
21
19
|
if (currentIframe !== null && currentIframe.contentWindow !== null) {
|
|
22
20
|
if (currentIframe.contentWindow.document.body) {
|
|
23
21
|
var iframeContent = currentIframe.contentWindow.document.body.firstElementChild;
|
|
24
22
|
/* if the iframe has content, set the height of the iframe body
|
|
25
23
|
and of the iframe itself */
|
|
26
|
-
|
|
27
24
|
if (iframeContent) {
|
|
28
25
|
var contentHeight = iframeContent.scrollHeight;
|
|
29
26
|
currentIframe.style.height = contentHeight + 10 + 'px';
|
|
@@ -32,20 +29,19 @@ export var ArticleBody = function ArticleBody(props) {
|
|
|
32
29
|
}
|
|
33
30
|
}
|
|
34
31
|
};
|
|
32
|
+
|
|
35
33
|
/**
|
|
36
34
|
* When the article content changes, update the content of the iframe and
|
|
37
35
|
* resize the iframe based on the new content
|
|
38
36
|
*/
|
|
39
|
-
|
|
40
|
-
|
|
41
37
|
useEffect(function () {
|
|
42
38
|
/**
|
|
43
39
|
* Set iframe content
|
|
44
40
|
*/
|
|
41
|
+
|
|
45
42
|
var setIframeContent = function setIframeContent() {
|
|
46
43
|
var body = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
47
44
|
var onArticleRenderBegin = arguments.length > 1 ? arguments[1] : undefined;
|
|
48
|
-
|
|
49
45
|
/**
|
|
50
46
|
* We update the content this way because we can't use srcdoc (Edge and IE don't support it)
|
|
51
47
|
* Every time the article content changes we replace the iframe with an empty div and right after the
|
|
@@ -53,30 +49,26 @@ export var ArticleBody = function ArticleBody(props) {
|
|
|
53
49
|
* fire the iframe's onload function (we need it to resize the iframe after all content is loaded).
|
|
54
50
|
* If we replace the content of the iframe directly, the onload function won't be fired
|
|
55
51
|
*/
|
|
52
|
+
|
|
56
53
|
var currentIframe = document.getElementById(IFRAME_ID);
|
|
57
54
|
var divSyle = {
|
|
58
55
|
height: 'auto'
|
|
59
56
|
};
|
|
60
|
-
|
|
61
57
|
if (currentIframe !== null && currentIframe.contentWindow !== null) {
|
|
62
58
|
divSyle = {
|
|
63
59
|
height: "".concat(currentIframe.contentWindow.document.body.scrollHeight, "px")
|
|
64
60
|
};
|
|
65
61
|
}
|
|
66
|
-
|
|
67
62
|
var iframeContainer = document.getElementById(IFRAME_CONTAINER_ID);
|
|
68
|
-
|
|
69
63
|
if (!iframeContainer) {
|
|
70
64
|
return;
|
|
71
65
|
}
|
|
72
|
-
|
|
73
66
|
ReactDOM.render( /*#__PURE__*/React.createElement("div", {
|
|
74
67
|
style: divSyle
|
|
75
68
|
}), iframeContainer, function () {
|
|
76
69
|
if (!iframeContainer) {
|
|
77
70
|
return;
|
|
78
71
|
}
|
|
79
|
-
|
|
80
72
|
ReactDOM.render( /*#__PURE__*/React.createElement(ArticleFrame, {
|
|
81
73
|
id: IFRAME_ID,
|
|
82
74
|
name: IFRAME_ID,
|
|
@@ -86,10 +78,8 @@ export var ArticleBody = function ArticleBody(props) {
|
|
|
86
78
|
sandbox: "allow-same-origin allow-popups allow-popups-to-escape-sandbox"
|
|
87
79
|
}), iframeContainer, function () {
|
|
88
80
|
var iframeContainer = document.getElementById(IFRAME_CONTAINER_ID);
|
|
89
|
-
|
|
90
81
|
if (iframeContainer) {
|
|
91
82
|
var newIframe = frames[IFRAME_ID];
|
|
92
|
-
|
|
93
83
|
if (newIframe !== null) {
|
|
94
84
|
var iframeDocument = newIframe.document;
|
|
95
85
|
iframeDocument.open();
|
|
@@ -100,7 +90,6 @@ export var ArticleBody = function ArticleBody(props) {
|
|
|
100
90
|
style.innerText = resetCSS;
|
|
101
91
|
head.appendChild(style);
|
|
102
92
|
resizeIframe();
|
|
103
|
-
|
|
104
93
|
if (onArticleRenderBegin) {
|
|
105
94
|
onArticleRenderBegin();
|
|
106
95
|
}
|
|
@@ -109,7 +98,6 @@ export var ArticleBody = function ArticleBody(props) {
|
|
|
109
98
|
});
|
|
110
99
|
});
|
|
111
100
|
};
|
|
112
|
-
|
|
113
101
|
if (props.bodyFormat === BODY_FORMAT_TYPES.html && typeof props.body === 'string') {
|
|
114
102
|
setIframeContent(props.body, props.onArticleRenderBegin);
|
|
115
103
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
|
|
3
2
|
var _templateObject;
|
|
4
|
-
|
|
5
3
|
/** @jsx jsx */
|
|
6
4
|
import styled from '@emotion/styled';
|
|
7
5
|
export var ArticleFrame = styled.iframe(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: block;\n width: calc(100% + 10px);\n margin: -5px;\n border: none;\n"])));
|
|
@@ -3,16 +3,15 @@ import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
|
|
|
3
3
|
import { BODY_FORMAT_TYPES } from '../model/HelpArticle';
|
|
4
4
|
import { ArticleContentInner, ArticleContentTitle, ArticleContentTitleLink } from './styled';
|
|
5
5
|
import ArticleBody from './ArticleBody';
|
|
6
|
-
|
|
7
6
|
var HelpArticle = function HelpArticle(props) {
|
|
8
7
|
var _props$title = props.title,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
title = _props$title === void 0 ? '' : _props$title,
|
|
9
|
+
body = props.body,
|
|
10
|
+
_props$bodyFormat = props.bodyFormat,
|
|
11
|
+
bodyFormat = _props$bodyFormat === void 0 ? BODY_FORMAT_TYPES.html : _props$bodyFormat,
|
|
12
|
+
titleLinkUrl = props.titleLinkUrl,
|
|
13
|
+
onArticleRenderBegin = props.onArticleRenderBegin,
|
|
14
|
+
onArticleRenderDone = props.onArticleRenderDone;
|
|
16
15
|
return /*#__PURE__*/React.createElement(ArticleContentInner, null, title && /*#__PURE__*/React.createElement(ArticleContentTitle, null, titleLinkUrl ? /*#__PURE__*/React.createElement(ArticleContentTitleLink, {
|
|
17
16
|
href: titleLinkUrl,
|
|
18
17
|
target: "_blank"
|
|
@@ -26,5 +25,4 @@ var HelpArticle = function HelpArticle(props) {
|
|
|
26
25
|
onArticleRenderDone: onArticleRenderDone
|
|
27
26
|
}));
|
|
28
27
|
};
|
|
29
|
-
|
|
30
28
|
export default HelpArticle;
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/help-article",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.36",
|
|
4
4
|
"description": "A cross-product help-article component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@atlaskit/css-reset": "^6.3.0",
|
|
27
27
|
"@atlaskit/icon": "^21.11.0",
|
|
28
|
-
"@atlaskit/renderer": "^
|
|
28
|
+
"@atlaskit/renderer": "^106.0.0",
|
|
29
29
|
"@atlaskit/theme": "^12.2.0",
|
|
30
30
|
"@babel/runtime": "^7.0.0",
|
|
31
31
|
"@emotion/styled": "^10.0.7",
|