@happeouikit/content-renderer 3.0.16 → 3.1.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/ContentRenderer.js +1 -11
  3. package/dist/htmlConverter.js +1 -1
  4. package/dist/mentioningUtils.js +2 -0
  5. package/dist/utils.js +1 -1
  6. package/package.json +4 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.0.11
4
+
5
+ - [Remove] @universe dependencies
6
+
3
7
  ## 3.0.10
4
8
 
5
9
  - [Fixed] paragraph styles
package/dist/ContentRenderer.js CHANGED
@@ -33,8 +33,6 @@ var ContentRenderer = function ContentRenderer(_ref) {
33
33
  type = _ref.type,
34
34
  _ref$widgetType = _ref.widgetType,
35
35
  widgetType = _ref$widgetType === void 0 ? "post" : _ref$widgetType,
36
- headerFont = _ref.headerFont,
37
- bodyFont = _ref.bodyFont,
38
36
  createAnchors = _ref.createAnchors,
39
37
  useHashAutoscroll = _ref.useHashAutoscroll,
40
38
  _ref$hashAutoscrollTo = _ref.hashAutoscrollTopMargin,
@@ -163,8 +161,6 @@ var ContentRenderer = function ContentRenderer(_ref) {
163
161
  className: "content-renderer ".concat(widgetType === "page" ? "fr-view pages-text" : ""),
164
162
  ref: element,
165
163
  widgetType: widgetType,
166
- headerFont: headerFont,
167
- bodyFont: bodyFont,
168
164
  createAnchors: createAnchors,
169
165
  dangerouslySetInnerHTML: {
170
166
  __html: safeText
@@ -207,10 +203,8 @@ var Wrapper = styled(BodyUI).attrs({
207
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 ");
208
204
  }, function (_ref4) {
209
205
  var widgetType = _ref4.widgetType,
210
- bodyFont = _ref4.bodyFont,
211
- headerFont = _ref4.headerFont,
212
206
  inheritBrandingStyles = _ref4.inheritBrandingStyles;
213
- 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;") : inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", headerFont ? "".concat(headerFont, " !important;") : inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", headerFont ? "".concat(headerFont, " !important;") : inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", headerFont ? "".concat(headerFont, " !important") : inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", headerFont ? "".concat(headerFont, " !important;") : inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", headerFont ? "".concat(headerFont, " !important") : inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", bodyFont ? "".concat(bodyFont, " !important") : inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", bodyFont ? "".concat(bodyFont, " !important") : 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);
207
+ 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);
214
208
  });
215
209
  ContentRenderer.propTypes = {
216
210
  content: PropTypes.string,
@@ -225,8 +219,6 @@ ContentRenderer.propTypes = {
225
219
  }
226
220
  },
227
221
  widgetType: PropTypes.oneOf(["post", "article", "page"]),
228
- bodyFont: PropTypes.string,
229
- headerFont: PropTypes.string,
230
222
  decodeHtmlEntitiesOnRender: PropTypes.bool,
231
223
  createAnchors: PropTypes.bool,
232
224
  forceDefaultLinkTarget: PropTypes.bool,
@@ -237,8 +229,6 @@ ContentRenderer.defaultProps = {
237
229
  content: "",
238
230
  type: "html",
239
231
  widgetType: "post",
240
- bodyFont: "",
241
- headerFont: "",
242
232
  decodeHtmlEntitiesOnRender: false,
243
233
  createAnchors: false,
244
234
  useHashAutoscroll: true,
package/dist/htmlConverter.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import showdown from "showdown";
2
- import { extraMentioning, mentioningRegex } from "@universe/frontend-utils";
2
+ import { extraMentioning, mentioningRegex } from "./mentioningUtils";
3
3
  var mentioningRegexCaseInsensitive = new RegExp(mentioningRegex, "i");
4
4
  var mentioningRegexGroupCaseInsensitive = new RegExp(mentioningRegex, "gi");
5
5
  var converter;
package/dist/mentioningUtils.js ADDED
@@ -0,0 +1,2 @@
1
+ export var mentioningRegex = /@(\d*|channel|editors):\((.*?)\)/;
2
+ export var extraMentioning = ["channel", "editors"];
package/dist/utils.js CHANGED
@@ -7,10 +7,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
7
7
  import linkifyHtml from "linkifyjs/html";
8
8
  import xss from "xss";
9
9
  import { decode as decodeHtmlEntities } from "html-entities";
10
- import { extraMentioning, mentioningRegex } from "@universe/frontend-utils";
11
10
  import { fixEmojioneBug, shortToUnicode } from "@happeouikit/emojis";
12
11
  import { MONOSPACE_FONT_URL, safeTagsAndAttributes } from "./constants";
13
12
  import htmlConverter from "./htmlConverter";
13
+ import { extraMentioning, mentioningRegex } from "./mentioningUtils";
14
14
  var mentioningRegexGroupCaseInsensitive = new RegExp(mentioningRegex, "gi");
15
15
  var mentioningHtmlRegexGroupCaseInsensitive = new RegExp(/<user-mentio[^>]*data-user-id=["']([^"]+)["'][^>]*>(?:@|(?:&#64;))(.+?)<\/user-mentio>/, "gi");
16
16
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@happeouikit/content-renderer",
3
- "version": "3.0.16",
3
+ "version": "3.1.1",
4
4
  "description": "Rendering html and markdown content",
5
5
  "main": "dist/index.js",
6
6
  "module": "src/index.js",
@@ -15,11 +15,10 @@
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
17
  "@happeouikit/colors": "^1.0.4",
18
- "@happeouikit/copy-to-clipboard-button": "^1.0.4",
19
- "@happeouikit/emojis": "^1.2.7",
18
+ "@happeouikit/copy-to-clipboard-button": "^3.0.0",
19
+ "@happeouikit/emojis": "^1.3.0",
20
20
  "@happeouikit/layout": "^1.1.11",
21
- "@happeouikit/typography": "^1.0.7",
22
- "@universe/frontend-utils": "^0.35.1",
21
+ "@happeouikit/typography": "^1.1.0",
23
22
  "html-entities": "^2.3.2",
24
23
  "linkifyjs": "^2.1.8",
25
24
  "loadjs": "^4.2.0",