@happeouikit/content-renderer 3.0.5 → 3.0.10
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 +20 -0
- package/dist/ContentRenderer.js +6 -8
- package/package.json +2 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.0.10
|
|
4
|
+
|
|
5
|
+
- [Fixed] paragraph styles
|
|
6
|
+
|
|
7
|
+
## 3.0.9
|
|
8
|
+
|
|
9
|
+
- [Fixed] paragraph styles
|
|
10
|
+
|
|
11
|
+
## 3.0.8
|
|
12
|
+
|
|
13
|
+
- Publish
|
|
14
|
+
|
|
15
|
+
## 3.0.7
|
|
16
|
+
|
|
17
|
+
- Publish
|
|
18
|
+
|
|
19
|
+
## 3.0.6
|
|
20
|
+
|
|
21
|
+
- [Added] Support for user defined font families and weights
|
|
22
|
+
|
|
3
23
|
## 3.0.5
|
|
4
24
|
|
|
5
25
|
- Publish
|
package/dist/ContentRenderer.js
CHANGED
|
@@ -31,10 +31,8 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
31
31
|
type = _ref.type,
|
|
32
32
|
_ref$widgetType = _ref.widgetType,
|
|
33
33
|
widgetType = _ref$widgetType === void 0 ? "post" : _ref$widgetType,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
_ref$bodyFont = _ref.bodyFont,
|
|
37
|
-
bodyFont = _ref$bodyFont === void 0 ? sansFamily : _ref$bodyFont,
|
|
34
|
+
headerFont = _ref.headerFont,
|
|
35
|
+
bodyFont = _ref.bodyFont,
|
|
38
36
|
createAnchors = _ref.createAnchors,
|
|
39
37
|
useHashAutoscroll = _ref.useHashAutoscroll,
|
|
40
38
|
_ref$hashAutoscrollTo = _ref.hashAutoscrollTopMargin,
|
|
@@ -200,12 +198,12 @@ var Wrapper = styled(BodyUI).attrs({
|
|
|
200
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 " : "";
|
|
201
199
|
}, lighten(warn, 0.8), gray09, padding200, function (_ref3) {
|
|
202
200
|
var widgetType = _ref3.widgetType;
|
|
203
|
-
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-family: var(--channels-body-font-family, ").concat(sansFamily, ");\n font-weight: var(--channels-body-font-weight, 500);\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 ");
|
|
204
202
|
}, function (_ref4) {
|
|
205
203
|
var widgetType = _ref4.widgetType,
|
|
206
204
|
bodyFont = _ref4.bodyFont,
|
|
207
205
|
headerFont = _ref4.headerFont;
|
|
208
|
-
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);
|
|
209
207
|
});
|
|
210
208
|
ContentRenderer.propTypes = {
|
|
211
209
|
content: PropTypes.string,
|
|
@@ -232,8 +230,8 @@ ContentRenderer.defaultProps = {
|
|
|
232
230
|
content: "",
|
|
233
231
|
type: "html",
|
|
234
232
|
widgetType: "post",
|
|
235
|
-
bodyFont: "
|
|
236
|
-
headerFont: "
|
|
233
|
+
bodyFont: "",
|
|
234
|
+
headerFont: "",
|
|
237
235
|
decodeHtmlEntitiesOnRender: false,
|
|
238
236
|
createAnchors: false,
|
|
239
237
|
useHashAutoscroll: true,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@happeouikit/content-renderer",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.10",
|
|
4
4
|
"description": "Rendering html and markdown content",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -34,6 +34,5 @@
|
|
|
34
34
|
},
|
|
35
35
|
"publishConfig": {
|
|
36
36
|
"access": "public"
|
|
37
|
-
}
|
|
38
|
-
"gitHead": "c6e071c11114cf6725a7dd83bb32cd07aa9b71ef"
|
|
37
|
+
}
|
|
39
38
|
}
|