@happeouikit/content-renderer 1.0.46 → 2.0.1
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 +15 -1
- package/dist/ContentRenderer.js +27 -16
- package/dist/htmlConverter.js +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,8 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.0.1
|
|
4
|
+
|
|
5
|
+
- [Added] Changed type to uppercase and to handle both upper and lowercase. Add warning if lowecase is used.
|
|
6
|
+
- [Added] Handle widgetType=`page` by removing forced styles from component.
|
|
7
|
+
|
|
8
|
+
## 2.0.0
|
|
9
|
+
|
|
10
|
+
- [Breaking change] Links rendered from markdown content now always open in a new tab (not configurable).
|
|
11
|
+
|
|
12
|
+
## 1.0.48
|
|
13
|
+
|
|
14
|
+
- [Fixed] Decode HTML entites causing crashes
|
|
15
|
+
|
|
3
16
|
## 1.0.46
|
|
4
17
|
|
|
5
|
-
- [Fixed] Use correct font-family for all the tags inside
|
|
18
|
+
- [Fixed] Use correct font-family for all the tags inside paragraphs and list elements etc.
|
|
19
|
+
|
|
6
20
|
## 1.0.45
|
|
7
21
|
|
|
8
22
|
- [Fixed] Removed some padding for tables without borders
|
package/dist/ContentRenderer.js
CHANGED
|
@@ -59,7 +59,7 @@ function _templateObject() {
|
|
|
59
59
|
* ContentRenderer
|
|
60
60
|
*
|
|
61
61
|
*/
|
|
62
|
-
import React, { useRef, useEffect, useState, useCallback } from "react";
|
|
62
|
+
import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
|
|
63
63
|
import ReactDOM from "react-dom";
|
|
64
64
|
import PropTypes from "prop-types";
|
|
65
65
|
import styled, { css } from "styled-components";
|
|
@@ -172,17 +172,16 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
172
172
|
scrollAndHighlightHash();
|
|
173
173
|
}
|
|
174
174
|
}, [element, createAnchors, useHashAutoscroll, scrollAndHighlightHash]);
|
|
175
|
-
var
|
|
175
|
+
var safeText = useMemo(function () {
|
|
176
|
+
var lowercaseType = type && typeof type === "string" ? type.toLowerCase() : "html";
|
|
177
|
+
var transformedContent = lowercaseType === "text" ? "<p>".concat(content, "</p>") : toHtml(content, lowercaseType);
|
|
176
178
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
if (decodeHtmlEntitiesOnRender) {
|
|
182
|
-
transformedContent = decodeHtmlEntities(transformedContent);
|
|
183
|
-
}
|
|
179
|
+
if (decodeHtmlEntitiesOnRender) {
|
|
180
|
+
transformedContent = decodeHtmlEntities(transformedContent);
|
|
181
|
+
}
|
|
184
182
|
|
|
185
|
-
|
|
183
|
+
return toSafeText(transformedContent);
|
|
184
|
+
}, [content, type, decodeHtmlEntitiesOnRender]); // Use dangerouslySetInnerHTML as there might be nested <p>'s header etc
|
|
186
185
|
// This requires that all content is run through the toSafeText filter
|
|
187
186
|
// before displaying. This will run it through xss filter.
|
|
188
187
|
|
|
@@ -222,18 +221,30 @@ var Wrapper = styled(BodyUI).attrs({
|
|
|
222
221
|
}).withConfig({
|
|
223
222
|
displayName: "ContentRenderer__Wrapper",
|
|
224
223
|
componentId: "sc-1mleu9k-1"
|
|
225
|
-
})(["
|
|
224
|
+
})(["", " h1.highlight,h2.highlight,h3.highlight,h4.highlight,h5.highlight,h6.highlight{border-radius:6px;position:relative;:after{content:\" \";position:absolute;top:-8px;bottom:-8px;left:-8px;right:-8px;border-radius:6px;border:5px solid ", ";}}pre{border-radius:4px;background:", ";padding:8px;margin-bottom:10px;overflow:auto;white-space:pre;position:relative;overflow:visible;*:not(p){font-weight:inherit;font-family:\"IBM Plex Mono\",monospace !important;}.content-copy-btn{position:absolute;top:0;right:0;padding:", " 0;}:hover button{opacity:1;}}.mention{border-radius:0.2em;background-color:#fff5cc;border:1px solid #fff5cc;color:#0f1621;font-weight:400;&:hover{text-decoration:none;border:1px solid #fabd24;}}.extraMention{cursor:inherit;}", " ", ""], function (_ref2) {
|
|
226
225
|
var createAnchors = _ref2.createAnchors;
|
|
227
226
|
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 " : "";
|
|
228
|
-
}, lighten(warn, 0.8),
|
|
229
|
-
var widgetType = _ref3.widgetType
|
|
230
|
-
|
|
231
|
-
|
|
227
|
+
}, lighten(warn, 0.8), gray09, padding200, function (_ref3) {
|
|
228
|
+
var widgetType = _ref3.widgetType;
|
|
229
|
+
return widgetType === "page" ? "" : "\n * {\n font-family: ".concat(sansFamily, " !important;\n }\n\n \n\n h1 {\n 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-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-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 ");
|
|
230
|
+
}, function (_ref4) {
|
|
231
|
+
var widgetType = _ref4.widgetType,
|
|
232
|
+
bodyFont = _ref4.bodyFont,
|
|
233
|
+
headerFont = _ref4.headerFont;
|
|
232
234
|
return widgetType === "article" && css(["h1,h2,h3{font-family:", " !important;& *{font-family:", " !important;}}h4,h5,h6,p,ul,ol,li,table{font-family:", " !important;& *{font-family:", " !important;}}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, headerFont, bodyFont, bodyFont, gray07, gray07, gray09, gray09, gray09, media.only.xs(_templateObject()), media.min.md(_templateObject2()), media.min.md(_templateObject3()), media.min.md(_templateObject4()), media.min.md(_templateObject5()), gray04);
|
|
233
235
|
});
|
|
234
236
|
ContentRenderer.propTypes = {
|
|
235
237
|
content: PropTypes.string,
|
|
236
|
-
type:
|
|
238
|
+
type: function type(props, propName) {
|
|
239
|
+
if (propName === "type" && props[propName] !== props[propName].toUpperCase()) {
|
|
240
|
+
// eslint-disable-next-line no-console
|
|
241
|
+
console.warn("Please use uppercase type 'HTML', 'MARKDOWN' or 'TEXT'");
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
if (propName === "type" && !["HTML", "MARKDOWN", "TEXT"].includes(props[propName].toUpperCase())) {
|
|
245
|
+
throw new Error("Invalid type, use 'HTML', 'MARKDOWN' or 'TEXT'");
|
|
246
|
+
}
|
|
247
|
+
},
|
|
237
248
|
widgetType: PropTypes.oneOf(["post", "article", "page"]),
|
|
238
249
|
bodyFont: PropTypes.string,
|
|
239
250
|
headerFont: PropTypes.string,
|
package/dist/htmlConverter.js
CHANGED