@happeouikit/content-renderer 3.1.1 → 3.1.3
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 +9 -1
- package/dist/ContentRenderer.js +28 -50
- package/dist/constants.js +1 -1
- package/dist/htmlConverter.js +0 -6
- package/dist/utils.js +6 -20
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/ContentRenderer.js
CHANGED
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
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
|
-
|
|
5
4
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
6
|
-
|
|
7
5
|
/* eslint-disable no-nested-ternary */
|
|
8
|
-
|
|
9
6
|
/* eslint-disable no-param-reassign */
|
|
10
|
-
|
|
11
7
|
/**
|
|
12
8
|
*
|
|
13
9
|
* ContentRenderer
|
|
14
10
|
*
|
|
15
11
|
*/
|
|
12
|
+
|
|
16
13
|
import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
|
|
17
14
|
import ReactDOM from "react-dom";
|
|
18
15
|
import PropTypes from "prop-types";
|
|
@@ -27,35 +24,31 @@ import { ELEMENT_TYPE_PRE, ELEMENT_TYPE_CODE, HIGHLIGHJS_CSS, HIGHLIGHJS_JS, COD
|
|
|
27
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
28
25
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
29
26
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
|
-
|
|
31
27
|
var ContentRenderer = function ContentRenderer(_ref) {
|
|
32
28
|
var content = _ref.content,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
29
|
+
type = _ref.type,
|
|
30
|
+
_ref$widgetType = _ref.widgetType,
|
|
31
|
+
widgetType = _ref$widgetType === void 0 ? "post" : _ref$widgetType,
|
|
32
|
+
createAnchors = _ref.createAnchors,
|
|
33
|
+
useHashAutoscroll = _ref.useHashAutoscroll,
|
|
34
|
+
_ref$hashAutoscrollTo = _ref.hashAutoscrollTopMargin,
|
|
35
|
+
hashAutoscrollTopMargin = _ref$hashAutoscrollTo === void 0 ? 0 : _ref$hashAutoscrollTo,
|
|
36
|
+
decodeHtmlEntitiesOnRender = _ref.decodeHtmlEntitiesOnRender,
|
|
37
|
+
forceDefaultLinkTarget = _ref.forceDefaultLinkTarget,
|
|
38
|
+
_ref$inheritBrandingS = _ref.inheritBrandingStyles,
|
|
39
|
+
inheritBrandingStyles = _ref$inheritBrandingS === void 0 ? false : _ref$inheritBrandingS;
|
|
44
40
|
var element = useRef({});
|
|
45
|
-
|
|
46
41
|
var _useState = useState([]),
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
43
|
+
copyBtns = _useState2[0],
|
|
44
|
+
setCopyBtns = _useState2[1];
|
|
51
45
|
|
|
46
|
+
// Autoscroll to hashes
|
|
52
47
|
var scrollAndHighlightHash = useCallback(function () {
|
|
53
48
|
try {
|
|
54
49
|
var hash = window.location.hash;
|
|
55
|
-
|
|
56
50
|
if (hash) {
|
|
57
51
|
var hashEl = element.current.querySelector(hash);
|
|
58
|
-
|
|
59
52
|
if (hashEl) {
|
|
60
53
|
setTimeout(function () {
|
|
61
54
|
window.scrollTo({
|
|
@@ -76,25 +69,20 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
76
69
|
useEffect(function () {
|
|
77
70
|
if (!element.current) return;
|
|
78
71
|
var headerElems = createAnchors ? element.current.querySelectorAll("h1, h2, h3, h4, h5, h6") : [];
|
|
79
|
-
|
|
80
72
|
if (headerElems.length > 0) {
|
|
81
73
|
headerElems.forEach(function (header) {
|
|
82
74
|
var _header$textContent = header.textContent,
|
|
83
|
-
|
|
84
|
-
|
|
75
|
+
textContent = _header$textContent === void 0 ? "" : _header$textContent;
|
|
85
76
|
if (textContent.length > 0) {
|
|
86
77
|
header.id = header.id || removeSpecialCharacters(textContent.toLowerCase().replace(/\s/g, "-"));
|
|
87
78
|
}
|
|
88
79
|
});
|
|
89
80
|
}
|
|
90
|
-
|
|
91
81
|
var linkElems = forceDefaultLinkTarget ? element.current.querySelectorAll("a") : [];
|
|
92
|
-
|
|
93
82
|
if (linkElems.length > 0) {
|
|
94
83
|
var currentOrigin = window.origin;
|
|
95
84
|
linkElems.forEach(function (link) {
|
|
96
85
|
var href = link.href;
|
|
97
|
-
|
|
98
86
|
if (href.startsWith(currentOrigin)) {
|
|
99
87
|
delete link.target;
|
|
100
88
|
} else {
|
|
@@ -102,15 +90,12 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
102
90
|
}
|
|
103
91
|
});
|
|
104
92
|
}
|
|
105
|
-
|
|
106
93
|
var blockElems = element.current.querySelectorAll(ELEMENT_TYPE_PRE);
|
|
107
|
-
|
|
108
94
|
if (blockElems.length > 0) {
|
|
109
95
|
if (!loadjs.isDefined("highlightjs")) {
|
|
110
96
|
loadCodeFont();
|
|
111
97
|
loadjs([].concat(_toConsumableArray(HIGHLIGHJS_JS), _toConsumableArray(HIGHLIGHJS_CSS)), "highlightjs");
|
|
112
98
|
}
|
|
113
|
-
|
|
114
99
|
loadjs.ready("highlightjs", function () {
|
|
115
100
|
// highlight.js register only languages we want to support?
|
|
116
101
|
window.hljs.configure({
|
|
@@ -118,16 +103,15 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
118
103
|
useBr: true
|
|
119
104
|
});
|
|
120
105
|
blockElems.forEach(function (elem) {
|
|
121
|
-
var plainCode = elem.innerText;
|
|
106
|
+
var plainCode = elem.innerText;
|
|
107
|
+
|
|
108
|
+
// Take the inner content and put inside single code block
|
|
122
109
|
// This will ensure nice readability.
|
|
123
110
|
// Needs to be done since editor will generate multiple lines for code for ease of editing
|
|
124
|
-
|
|
125
111
|
var codeBlock = document.createElement(ELEMENT_TYPE_CODE);
|
|
126
112
|
var decodedText = decodeHtmlEntities(plainCode);
|
|
127
113
|
codeBlock.textContent = decodedText; // Done like this to prevent xss
|
|
128
|
-
|
|
129
114
|
elem.innerHTML = ""; // Clear content so we can set just the single code block there
|
|
130
|
-
|
|
131
115
|
elem.appendChild(codeBlock);
|
|
132
116
|
window.hljs.highlightBlock(elem);
|
|
133
117
|
});
|
|
@@ -136,9 +120,7 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
136
120
|
});
|
|
137
121
|
});
|
|
138
122
|
}
|
|
139
|
-
|
|
140
123
|
setCopyBtns(_toConsumableArray(headerElems));
|
|
141
|
-
|
|
142
124
|
if (useHashAutoscroll) {
|
|
143
125
|
scrollAndHighlightHash();
|
|
144
126
|
}
|
|
@@ -146,16 +128,15 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
146
128
|
var safeText = useMemo(function () {
|
|
147
129
|
var lowercaseType = type && typeof type === "string" ? type.toLowerCase() : "html";
|
|
148
130
|
var transformedContent = lowercaseType === "text" ? toSafeText("<p>".concat(content, "</p>")) : toHtml(content, lowercaseType);
|
|
149
|
-
|
|
150
131
|
if (decodeHtmlEntitiesOnRender) {
|
|
151
132
|
transformedContent = decodeHtmlEntities(transformedContent);
|
|
152
133
|
}
|
|
153
|
-
|
|
154
134
|
return transformedContent;
|
|
155
|
-
}, [content, type, decodeHtmlEntitiesOnRender]);
|
|
135
|
+
}, [content, type, decodeHtmlEntitiesOnRender]);
|
|
136
|
+
|
|
137
|
+
// Use dangerouslySetInnerHTML as there might be nested <p>'s header etc
|
|
156
138
|
// This requires that all content is run through the toSafeText filter
|
|
157
139
|
// before displaying. This will run it through xss filter.
|
|
158
|
-
|
|
159
140
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
160
141
|
children: [/*#__PURE__*/_jsx(Wrapper, {
|
|
161
142
|
className: "content-renderer ".concat(widgetType === "page" ? "fr-view pages-text" : ""),
|
|
@@ -168,12 +149,11 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
168
149
|
inheritBrandingStyles: inheritBrandingStyles
|
|
169
150
|
}), copyBtns.map(function (el) {
|
|
170
151
|
var clipboardContent = el.textContent || "";
|
|
171
|
-
|
|
172
152
|
if (el.tagName !== ELEMENT_TYPE_PRE) {
|
|
173
153
|
clipboardContent = "".concat(window.location.href.split("#")[0], "#").concat(el.id);
|
|
174
|
-
}
|
|
175
|
-
|
|
154
|
+
}
|
|
176
155
|
|
|
156
|
+
// eslint-disable-next-line no-control-regex
|
|
177
157
|
clipboardContent = removeSpecialCharacters(clipboardContent);
|
|
178
158
|
return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(BtnContainer, {
|
|
179
159
|
className: "content-copy-btn",
|
|
@@ -184,7 +164,6 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
184
164
|
})]
|
|
185
165
|
});
|
|
186
166
|
};
|
|
187
|
-
|
|
188
167
|
var BtnContainer = styled.div.withConfig({
|
|
189
168
|
displayName: "ContentRenderer__BtnContainer",
|
|
190
169
|
componentId: "sc-1mleu9k-0"
|
|
@@ -199,11 +178,11 @@ var Wrapper = styled(BodyUI).attrs({
|
|
|
199
178
|
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 " : "";
|
|
200
179
|
}, lighten(warn, 0.8), gray09, padding200, function (_ref3) {
|
|
201
180
|
var widgetType = _ref3.widgetType,
|
|
202
|
-
|
|
203
|
-
return widgetType === "page" ? "" : "\n * {\n font-family: ".concat(sansFamily, ";\n }\n\n h1 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-weight, 500)" : "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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", "; \n }\n }\n h2 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-weight, 500)" : "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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", "; \n }\n }\n h3 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-weight, 500)" : "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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert);" : "revert", " \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: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\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 & * {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n }\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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert);" : "revert", ";\n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\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 ");
|
|
181
|
+
inheritBrandingStyles = _ref3.inheritBrandingStyles;
|
|
182
|
+
return widgetType === "page" ? "" : "\n * {\n font-family: ".concat(sansFamily, ";\n }\n\n h1 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-weight, 500)" : "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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", "; \n }\n }\n h2 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-weight, 500)" : "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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", "; \n }\n }\n h3 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-weight, 500)" : "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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert);" : "revert", " \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: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\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 & * {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n }\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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\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 font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert);" : "revert", ";\n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\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 &[type=\"custom-emoji\"] {\n height: 1em;\n display: inline;\n margin: 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
183
|
}, function (_ref4) {
|
|
205
184
|
var widgetType = _ref4.widgetType,
|
|
206
|
-
|
|
185
|
+
inheritBrandingStyles = _ref4.inheritBrandingStyles;
|
|
207
186
|
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%;}"], inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", 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);
|
|
208
187
|
});
|
|
209
188
|
ContentRenderer.propTypes = {
|
|
@@ -213,7 +192,6 @@ ContentRenderer.propTypes = {
|
|
|
213
192
|
// eslint-disable-next-line no-console
|
|
214
193
|
console.warn("Please use uppercase type 'HTML', 'MARKDOWN' or 'TEXT'");
|
|
215
194
|
}
|
|
216
|
-
|
|
217
195
|
if (propName === "type" && !["HTML", "MARKDOWN", "TEXT"].includes(props[propName].toUpperCase())) {
|
|
218
196
|
throw new Error("Invalid type, use 'HTML', 'MARKDOWN' or 'TEXT'");
|
|
219
197
|
}
|
package/dist/constants.js
CHANGED
|
@@ -36,7 +36,7 @@ export var safeTagsAndAttributes = {
|
|
|
36
36
|
header: ["style"],
|
|
37
37
|
hr: ["style", "class"],
|
|
38
38
|
i: [],
|
|
39
|
-
img: ["src", "alt", "title", "width", "height", "style", "class"],
|
|
39
|
+
img: ["src", "alt", "title", "width", "height", "style", "class", "type"],
|
|
40
40
|
ins: ["datetime"],
|
|
41
41
|
li: ["style"],
|
|
42
42
|
mark: [],
|
package/dist/htmlConverter.js
CHANGED
|
@@ -19,13 +19,11 @@ var customRules = {
|
|
|
19
19
|
var r = s.match(mentioningRegexCaseInsensitive);
|
|
20
20
|
var id = r && r.length > 1 && r[1];
|
|
21
21
|
var name = r && r.length > 2 && r[2];
|
|
22
|
-
|
|
23
22
|
if (extraMentioning.find(function (mentioning) {
|
|
24
23
|
return mentioning.toLowerCase() === String(id).toLowerCase();
|
|
25
24
|
})) {
|
|
26
25
|
return "<a class=\"mention extraMention\" data-user-id=\"".concat(id, "\">@").concat(name, "</a>");
|
|
27
26
|
}
|
|
28
|
-
|
|
29
27
|
return "<a class=\"mention\" data-user-id=\"".concat(id, "\">@").concat(name, "</a>");
|
|
30
28
|
}
|
|
31
29
|
},
|
|
@@ -41,7 +39,6 @@ var customRules = {
|
|
|
41
39
|
}
|
|
42
40
|
}
|
|
43
41
|
};
|
|
44
|
-
|
|
45
42
|
function getConverter() {
|
|
46
43
|
if (converter) return converter;
|
|
47
44
|
showdown.extension("color", customRules.color);
|
|
@@ -51,11 +48,8 @@ function getConverter() {
|
|
|
51
48
|
extensions: ["color", "mention", "usermentiotag"]
|
|
52
49
|
});
|
|
53
50
|
converter.setOption("strikethrough", true); // <del>
|
|
54
|
-
|
|
55
51
|
converter.setOption("tables", true); // <table>
|
|
56
|
-
|
|
57
52
|
converter.setOption("openLinksInNewWindow", true);
|
|
58
53
|
return converter;
|
|
59
54
|
}
|
|
60
|
-
|
|
61
55
|
export default getConverter();
|
package/dist/utils.js
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
|
|
3
2
|
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
|
-
|
|
5
3
|
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
|
-
|
|
7
4
|
import linkifyHtml from "linkifyjs/html";
|
|
8
5
|
import xss from "xss";
|
|
9
6
|
import { decode as decodeHtmlEntities } from "html-entities";
|
|
@@ -13,21 +10,19 @@ import htmlConverter from "./htmlConverter";
|
|
|
13
10
|
import { extraMentioning, mentioningRegex } from "./mentioningUtils";
|
|
14
11
|
var mentioningRegexGroupCaseInsensitive = new RegExp(mentioningRegex, "gi");
|
|
15
12
|
var mentioningHtmlRegexGroupCaseInsensitive = new RegExp(/<user-mentio[^>]*data-user-id=["']([^"]+)["'][^>]*>(?:@|(?:@))(.+?)<\/user-mentio>/, "gi");
|
|
16
|
-
|
|
17
13
|
var processMatch = function processMatch(match, id, name) {
|
|
18
14
|
if (extraMentioning.find(function (mentioning) {
|
|
19
15
|
return mentioning.toLowerCase() === String(id).toLowerCase();
|
|
20
16
|
})) {
|
|
21
17
|
return "<a class=\"mention extraMention\" data-user-id=\"".concat(id, "\">@").concat(name, "</a>");
|
|
22
18
|
}
|
|
23
|
-
|
|
24
19
|
return "<a class=\"mention\" data-user-id=\"".concat(id, "\">@").concat(name, "</a>");
|
|
25
20
|
};
|
|
26
|
-
|
|
27
21
|
var processMentions = function processMentions() {
|
|
28
22
|
var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
|
|
29
23
|
return str.replace(mentioningRegexGroupCaseInsensitive, processMatch).replace(mentioningHtmlRegexGroupCaseInsensitive, processMatch);
|
|
30
24
|
};
|
|
25
|
+
|
|
31
26
|
/**
|
|
32
27
|
* @name toSafeText
|
|
33
28
|
* @description Returns filtered text with filterXSS library
|
|
@@ -35,8 +30,6 @@ var processMentions = function processMentions() {
|
|
|
35
30
|
* @param {String} - Text to whitelist
|
|
36
31
|
* @returns {String}
|
|
37
32
|
*/
|
|
38
|
-
|
|
39
|
-
|
|
40
33
|
var toSafeText = function toSafeText(text) {
|
|
41
34
|
return xss(text, {
|
|
42
35
|
whiteList: safeTagsAndAttributes,
|
|
@@ -48,6 +41,7 @@ var toSafeText = function toSafeText(text) {
|
|
|
48
41
|
stripIgnoreTag: true
|
|
49
42
|
}).replace(/ /g, " ").replace(/\u2060/g, ""); // Replaces a hidden character that resulted in a "?"-character in backend
|
|
50
43
|
};
|
|
44
|
+
|
|
51
45
|
/**
|
|
52
46
|
* @name toHtml
|
|
53
47
|
* @description Converts markdown to html, adds space to end of String
|
|
@@ -57,19 +51,16 @@ var toSafeText = function toSafeText(text) {
|
|
|
57
51
|
* @returns {String} - Html
|
|
58
52
|
*/
|
|
59
53
|
|
|
60
|
-
|
|
61
54
|
var toHtml = function toHtml() {
|
|
62
55
|
var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
|
|
63
56
|
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "html";
|
|
64
57
|
var newString = shortToUnicode(str);
|
|
65
58
|
newString = fixEmojioneBug(newString);
|
|
66
|
-
|
|
67
59
|
if (type === "markdown") {
|
|
68
60
|
newString = htmlConverter.makeHtml(newString);
|
|
69
61
|
} else {
|
|
70
62
|
newString = processMentions(newString);
|
|
71
63
|
}
|
|
72
|
-
|
|
73
64
|
newString = toSafeText(newString);
|
|
74
65
|
return linkifyHtml(newString, {
|
|
75
66
|
target: "_blank",
|
|
@@ -81,10 +72,8 @@ var toHtml = function toHtml() {
|
|
|
81
72
|
}
|
|
82
73
|
});
|
|
83
74
|
};
|
|
84
|
-
|
|
85
75
|
var loadCodeFont = function loadCodeFont() {
|
|
86
76
|
var id = "ibmMonoOnDemand";
|
|
87
|
-
|
|
88
77
|
if (!document.getElementById(id)) {
|
|
89
78
|
var style = document.createElement("style");
|
|
90
79
|
style.id = id;
|
|
@@ -92,25 +81,22 @@ var loadCodeFont = function loadCodeFont() {
|
|
|
92
81
|
document.head.appendChild(style);
|
|
93
82
|
}
|
|
94
83
|
};
|
|
95
|
-
|
|
96
84
|
var getNearestRelativeParent = function getNearestRelativeParent(el) {
|
|
97
85
|
if (!el) return null;
|
|
98
86
|
var elStyle = el.currentStyle || window.getComputedStyle(el, "");
|
|
99
87
|
var positionStyle = elStyle.position;
|
|
100
|
-
|
|
101
88
|
if (["relative", "absolute"].includes(positionStyle)) {
|
|
102
89
|
return el;
|
|
103
90
|
}
|
|
104
|
-
|
|
105
91
|
return getNearestRelativeParent(el.parentNode);
|
|
106
|
-
};
|
|
107
|
-
|
|
92
|
+
};
|
|
108
93
|
|
|
94
|
+
// Remove special and hidden characters from string
|
|
109
95
|
var removeSpecialCharacters = function removeSpecialCharacters() {
|
|
110
96
|
var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
|
|
111
|
-
return (
|
|
97
|
+
return (
|
|
98
|
+
// eslint-disable-next-line no-control-regex
|
|
112
99
|
str.replace(/[^\u0000-\u007E]/g, "")
|
|
113
100
|
);
|
|
114
101
|
};
|
|
115
|
-
|
|
116
102
|
export { toHtml, toSafeText, loadCodeFont, decodeHtmlEntities, getNearestRelativeParent, removeSpecialCharacters };
|