@happeouikit/content-renderer 3.0.3 → 3.0.7
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 +17 -0
- package/dist/ContentRenderer.js +7 -57
- package/dist/utils.js +9 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.0.7
|
|
4
|
+
|
|
5
|
+
- Publish
|
|
6
|
+
|
|
7
|
+
## 3.0.6
|
|
8
|
+
|
|
9
|
+
- [Added] Support for user defined font families and weights
|
|
10
|
+
|
|
11
|
+
## 3.0.5
|
|
12
|
+
|
|
13
|
+
- Publish
|
|
14
|
+
|
|
15
|
+
## 3.0.4
|
|
16
|
+
|
|
17
|
+
- [Fixed] ContentRenderer should now render content without applying links to domain-like text.
|
|
18
|
+
- [Updated] Updated ContentRenderer unit test with Testing Linkify hyper-link Features.
|
|
19
|
+
|
|
3
20
|
## 3.0.3
|
|
4
21
|
|
|
5
22
|
- [Added] Added prop `forceDefaultLinkTarget` that will force external links with `target="_blank"` and removes `target` from internal links.
|
package/dist/ContentRenderer.js
CHANGED
|
@@ -2,55 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
|
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
var data = _taggedTemplateLiteral(["\n margin-top: 8px;\n "]);
|
|
7
|
-
|
|
8
|
-
_templateObject5 = function _templateObject5() {
|
|
9
|
-
return data;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
return data;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function _templateObject4() {
|
|
16
|
-
var data = _taggedTemplateLiteral(["\n margin: 30px -150px;\n width: calc(100% + 300px) !important;\n max-width: none;\n "]);
|
|
17
|
-
|
|
18
|
-
_templateObject4 = function _templateObject4() {
|
|
19
|
-
return data;
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
return data;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function _templateObject3() {
|
|
26
|
-
var data = _taggedTemplateLiteral(["\n margin: 30px -150px 10px 30px;\n float: right;\n max-width: 75%;\n "]);
|
|
27
|
-
|
|
28
|
-
_templateObject3 = function _templateObject3() {
|
|
29
|
-
return data;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
return data;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function _templateObject2() {
|
|
36
|
-
var data = _taggedTemplateLiteral(["\n margin: 30px 30px 10px -150px;\n float: left;\n max-width: 75%;\n "]);
|
|
37
|
-
|
|
38
|
-
_templateObject2 = function _templateObject2() {
|
|
39
|
-
return data;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
return data;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function _templateObject() {
|
|
46
|
-
var data = _taggedTemplateLiteral([" \n max-width: 100%;\n "]);
|
|
47
|
-
|
|
48
|
-
_templateObject = function _templateObject() {
|
|
49
|
-
return data;
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
return data;
|
|
53
|
-
}
|
|
5
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
54
6
|
|
|
55
7
|
/* eslint-disable no-param-reassign */
|
|
56
8
|
|
|
@@ -79,10 +31,8 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
79
31
|
type = _ref.type,
|
|
80
32
|
_ref$widgetType = _ref.widgetType,
|
|
81
33
|
widgetType = _ref$widgetType === void 0 ? "post" : _ref$widgetType,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
_ref$bodyFont = _ref.bodyFont,
|
|
85
|
-
bodyFont = _ref$bodyFont === void 0 ? sansFamily : _ref$bodyFont,
|
|
34
|
+
headerFont = _ref.headerFont,
|
|
35
|
+
bodyFont = _ref.bodyFont,
|
|
86
36
|
createAnchors = _ref.createAnchors,
|
|
87
37
|
useHashAutoscroll = _ref.useHashAutoscroll,
|
|
88
38
|
_ref$hashAutoscrollTo = _ref.hashAutoscrollTopMargin,
|
|
@@ -248,12 +198,12 @@ var Wrapper = styled(BodyUI).attrs({
|
|
|
248
198
|
return createAnchors ? "\n h1, h2, h3, h4, h5, h6 {\n display: flex;\n align-items: center;\n :hover button {\n opacity: 0.4;\n }\n }\n " : "";
|
|
249
199
|
}, lighten(warn, 0.8), gray09, padding200, function (_ref3) {
|
|
250
200
|
var widgetType = _ref3.widgetType;
|
|
251
|
-
return widgetType === "page" ? "" : "\n * {\n font-family: ".concat(sansFamily, "
|
|
201
|
+
return widgetType === "page" ? "" : "\n * {\n font-family: ".concat(sansFamily, ";\n }\n\n h1 {\n font-family: var(--channels-h1-font-family, ").concat(sansFamily, ");\n font-weight: var(--channels-h1-font-weight, 500);\n font-size: 24px;\n letter-spacing: -0.5px;\n line-height: 32px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 16px;\n }\n }\n h2 {\n font-family: var(--channels-h2-font-family, ").concat(sansFamily, ");\n font-weight: var(--channels-h2-font-weight, 500);\n font-size: 20px;\n line-height: 28px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 14px;\n }\n }\n h3 {\n font-family: var(--channels-h3-font-family, ").concat(sansFamily, ");\n font-weight: var(--channels-h3-font-weight, 500);\n font-size: 16px;\n line-height: 24px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 12px;\n }\n }\n h4 {\n font-size: 16px;\n line-height: 24px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 12px;\n }\n }\n p {\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 12px;\n }\n }\n a {\n color: ").concat(active, ";\n text-decoration: none;\n :hover {\n text-decoration: underline;\n }\n }\n ul {\n list-style-type: disc;\n }\n ol {\n list-style-type: decimal;\n counter-reset: item;\n li {\n padding-left: 12px;\n text-indent: -33px;\n list-style-type: none;\n counter-increment: item;\n &:before {\n display: inline-block;\n width: 13px;\n padding-right: 15px;\n padding-left: 5px;\n font-weight: bold;\n text-align: right;\n content: counter(item) \".\";\n }\n }\n }\n ol,\n ul {\n font-size: 16px;\n line-height: 24px;\n margin: 18px 16px;\n display: block;\n -webkit-margin-before: 0.5em;\n -webkit-margin-after: 0.5em;\n -webkit-padding-start: 0.5em;\n li,\n li {\n margin-bottom: 5px;\n padding-left: 10px;\n > ul,\n > ol {\n -webkit-margin-before: 8px !important;\n -webkit-margin-after: 8px !important;\n }\n }\n\n &:first-child,\n &:first-child {\n -webkit-margin-before: 0;\n }\n &:last-child,\n &:last-child {\n -webkit-margin-after: 0;\n }\n }\n hr {\n -webkit-margin-before: 16px;\n -webkit-margin-after: 13px;\n border-color: @border-color;\n border-style: solid;\n height: 0px;\n border-width: 1px 0 0 0;\n }\n table {\n width: 100%;\n margin: 15px 0;\n text-align: left;\n thead th {\n background: @white;\n }\n th,\n td {\n border-width: 1px;\n border-style: solid;\n border-color: @border-color;\n padding: 0.5em;\n }\n tr:nth-child(even) {\n background: @almost-white;\n }\n tr:nth-child(odd) {\n background: @white;\n }\n }\n table.no-borders {\n th,\n td {\n border: none;\n }\n }\n table.padded-2 {\n th,\n td {\n padding: 2em;\n }\n }\n table.padded-1 {\n th,\n td {\n padding: 1em;\n }\n }\n img {\n max-width: 100%;\n margin: 15px 0;\n & + img {\n margin-top: 0;\n }\n }\n .xl-emoji * {\n font-size: 40px;\n line-height: 1.2;\n }\n \n blockquote {\n border-top: 2px solid ").concat(gray07, ";\n border-bottom: 2px solid ").concat(gray07, ";\n font-size: 18px;\n padding: 24px 48px;\n position: relative;\n text-align: center;\n margin: 48px 0;\n }\n ");
|
|
252
202
|
}, function (_ref4) {
|
|
253
203
|
var widgetType = _ref4.widgetType,
|
|
254
204
|
bodyFont = _ref4.bodyFont,
|
|
255
205
|
headerFont = _ref4.headerFont;
|
|
256
|
-
return widgetType === "article" && css(["h1,h2,h3{font-family:", "
|
|
206
|
+
return widgetType === "article" && css(["h1{font-family:", ";& *{font-family:", ";}}h2{font-family:", ";& *{font-family:", ";}}h3{font-family:", ";& *{font-family:", ";}}h4,h5,h6,p,ul,ol,li,table{font-family:", ";& *{font-family:", ";}}h1{font-size:32px;line-height:1.13;margin:0 0 20px;letter-spacing:-0.75px;}h2{font-size:24px;line-height:1.17;margin:0 0 16px;letter-spacing:-0.5px;}h3{font-size:20px;line-height:1.2;margin:0 0 14px;}h4,h5,h6,p,ul,ol,li{font-size:18px;line-height:1.56;margin-bottom:13px;margin-top:0;}hr{border-color:", ";}table{width:100% !important;margin:15px 0;font-size:18px !important;text-align:left;border-collapse:collapse;border-spacing:0;thead th{background:@white;}th,td{border-width:1px;border-style:solid;border-color:", ";padding:0.5em;word-wrap:break-word;}tr:nth-child(odd){background:", ";}tr:nth-child(even){background:@white;}}table.no-borders{th,td{border:none;}tr:nth-child(odd){background:", ";}tr:nth-child(even){background:@white;}}pre{position:relative;background-color:", ";padding:1em;margin:1em 0;border-radius:4px;white-space:pre;}img,span.fr-img-caption,span.fr-video{display:block;margin:30px 0;", ";&.article-align-left{margin:30px auto;display:block;max-width:100%;", "}&.article-align-center{margin:30px auto;display:block;}&.article-align-right{margin:30px auto;display:block;max-width:100%;", "}&.article-align-overflow{margin:30px auto;display:block;max-width:100%;", " img{width:100%;}}}img{&.image-border-radius{border-radius:6px;}&.image-box-shadow{box-shadow:0 4px 16px 0 #bacad5;}}span.fr-img-caption{&.image-border-radius img{border-radius:6px;}&.image-box-shadow img{box-shadow:0 4px 16px 0 #bacad5;}}p{img:first-child,span.fr-img-caption:first-child{&.article-align-left,&.article-align-right{", "}}}span.fr-img-caption{text-align:center;img{margin:0;}.fr-inner{font-weight:400;font-size:16px;margin:8px auto 0 auto;padding:0 8px;color:", ";display:block;max-width:671px;}}span.fr-video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;border-radius:6px;&.article-align-overflow{padding-top:170px;}iframe{position:absolute;top:0;left:0;width:100% !important;height:100% !important;}}blockquote{border-left:0 !important;padding-left:0 !important;margin:0 !important;color:inherit !important;p{line-height:30px;font-size:26px;text-align:center;margin:0 auto;}}.content-attachments{width:100%;}"], headerFont ? "".concat(headerFont, " !important;") : "var(--channels-h1-font-family, ".concat(sansFamily, ");"), headerFont ? "".concat(headerFont, " !important;") : "var(--channels-h1-font-family, ".concat(sansFamily, ");"), headerFont ? "".concat(headerFont, " !important;") : "var(--channels-h2-font-family, ".concat(sansFamily, ");"), headerFont ? "".concat(headerFont, " !important;") : "var(--channels-h2-font-family, ".concat(sansFamily, ");"), headerFont ? "".concat(headerFont, " !important;") : "var(--channels-h3-font-family, ".concat(sansFamily, ");"), headerFont ? "".concat(headerFont, " !important;") : "var(--channels-h3-font-family, ".concat(sansFamily, ");"), bodyFont ? "".concat(bodyFont, " !important;") : "var(--channels-body-font-family, ".concat(sansFamily, ");"), bodyFont ? "".concat(bodyFont, " !important;") : "var(--channels-body-font-family, ".concat(sansFamily, ");"), gray07, gray07, gray09, gray09, gray09, media.only.xs(_templateObject || (_templateObject = _taggedTemplateLiteral([" \n max-width: 100%;\n "]))), media.min.md(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin: 30px 30px 10px -150px;\n float: left;\n max-width: 75%;\n "]))), media.min.md(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 30px -150px 10px 30px;\n float: right;\n max-width: 75%;\n "]))), media.min.md(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin: 30px -150px;\n width: calc(100% + 300px) !important;\n max-width: none;\n "]))), media.min.md(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-top: 8px;\n "]))), gray04);
|
|
257
207
|
});
|
|
258
208
|
ContentRenderer.propTypes = {
|
|
259
209
|
content: PropTypes.string,
|
|
@@ -280,8 +230,8 @@ ContentRenderer.defaultProps = {
|
|
|
280
230
|
content: "",
|
|
281
231
|
type: "html",
|
|
282
232
|
widgetType: "post",
|
|
283
|
-
bodyFont: "
|
|
284
|
-
headerFont: "
|
|
233
|
+
bodyFont: "",
|
|
234
|
+
headerFont: "",
|
|
285
235
|
decodeHtmlEntitiesOnRender: false,
|
|
286
236
|
createAnchors: false,
|
|
287
237
|
useHashAutoscroll: true,
|
package/dist/utils.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
3
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
4
|
|
|
5
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
6
|
|
|
7
7
|
import linkifyHtml from "linkifyjs/html";
|
|
8
8
|
import xss from "xss";
|
|
@@ -41,7 +41,7 @@ var toSafeText = function toSafeText(text) {
|
|
|
41
41
|
return xss(text, {
|
|
42
42
|
whiteList: safeTagsAndAttributes,
|
|
43
43
|
css: {
|
|
44
|
-
whiteList: _objectSpread({}, xss.getDefaultCSSWhiteList(), {
|
|
44
|
+
whiteList: _objectSpread(_objectSpread({}, xss.getDefaultCSSWhiteList()), {}, {
|
|
45
45
|
"vertical-align": true
|
|
46
46
|
})
|
|
47
47
|
},
|
|
@@ -73,7 +73,12 @@ var toHtml = function toHtml() {
|
|
|
73
73
|
newString = toSafeText(newString);
|
|
74
74
|
return linkifyHtml(newString, {
|
|
75
75
|
target: "_blank",
|
|
76
|
-
ignoreTags: ["pre", "code", "script", "style"]
|
|
76
|
+
ignoreTags: ["pre", "code", "script", "style"],
|
|
77
|
+
validate: {
|
|
78
|
+
url: function url(value) {
|
|
79
|
+
return /^(http|ftp)s?:\/\//.test(value);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
77
82
|
});
|
|
78
83
|
};
|
|
79
84
|
|