@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
181 lines (180 loc) • 10.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState } from "react";
import { sanitizeHTML } from "./HUDHTMLSanitizer.js";
import { marked } from "marked";
import "../HUDStyles/markdownStyles.css";
var baseSectionsStyles = {
blockquote: {
fontStyle: "italic",
borderLeft: "4px solid #ff6f61",
color: "#888",
padding: "10px 15px",
margin: "10px 0"
},
heading: {
fontWeight: "bold",
color: "#ff6f61"
},
image: {
borderRadius: "8px",
maxWidth: "100%",
height: "auto"
},
code: {
overflow: "auto",
fontFamily: "'Courier New', monospace",
lineHeight: "1.569",
borderRadius: "8px",
backgroundColor: "rgba(0, 0, 0, 0.8)",
color: "#00ff00",
padding: "10px"
},
link: {
textDecoration: "underline",
color: "#61dafb"
},
list: {
color: "#fff",
paddingLeft: "20px"
}
};
function HUDMarkdownViewer(hudMarkdownViewerConfigurationSettings) {
var _hudMarkdownViewerCon = hudMarkdownViewerConfigurationSettings.markDownViewerContainerConfigurationSettings,
markDownViewerContainerConfigurationSettings = _hudMarkdownViewerCon === void 0 ? {} : _hudMarkdownViewerCon,
_hudMarkdownViewerCon2 = hudMarkdownViewerConfigurationSettings.markDownViewerEditorConfigurationSettings,
markDownViewerEditorConfigurationSettings = _hudMarkdownViewerCon2 === void 0 ? {} : _hudMarkdownViewerCon2,
_hudMarkdownViewerCon3 = hudMarkdownViewerConfigurationSettings.markDownViewerConfigurationSettings,
markDownViewerConfigurationSettings = _hudMarkdownViewerCon3 === void 0 ? {} : _hudMarkdownViewerCon3,
_hudMarkdownViewerCon4 = hudMarkdownViewerConfigurationSettings.blockQuoteSectionConfigurationSettings,
blockQuoteSectionConfigurationSettings = _hudMarkdownViewerCon4 === void 0 ? {} : _hudMarkdownViewerCon4,
_hudMarkdownViewerCon5 = hudMarkdownViewerConfigurationSettings.headingSectionConfigurationSettings,
headingSectionConfigurationSettings = _hudMarkdownViewerCon5 === void 0 ? {} : _hudMarkdownViewerCon5,
_hudMarkdownViewerCon6 = hudMarkdownViewerConfigurationSettings.imageSectionConfigurationSettings,
imageSectionConfigurationSettings = _hudMarkdownViewerCon6 === void 0 ? {} : _hudMarkdownViewerCon6,
_hudMarkdownViewerCon7 = hudMarkdownViewerConfigurationSettings.codeSectionConfigurationSettings,
codeSectionConfigurationSettings = _hudMarkdownViewerCon7 === void 0 ? {} : _hudMarkdownViewerCon7,
_hudMarkdownViewerCon8 = hudMarkdownViewerConfigurationSettings.linkSectionConfigurationSettings,
linkSectionConfigurationSettings = _hudMarkdownViewerCon8 === void 0 ? {} : _hudMarkdownViewerCon8,
_hudMarkdownViewerCon9 = hudMarkdownViewerConfigurationSettings.listSectionConfigurationSettings,
listSectionConfigurationSettings = _hudMarkdownViewerCon9 === void 0 ? {} : _hudMarkdownViewerCon9,
_hudMarkdownViewerCon10 = hudMarkdownViewerConfigurationSettings.displayMarkdownEditor,
displayMarkdownEditor = _hudMarkdownViewerCon10 === void 0 ? false : _hudMarkdownViewerCon10,
_hudMarkdownViewerCon11 = hudMarkdownViewerConfigurationSettings.currentMarkdown,
currentMarkdown = _hudMarkdownViewerCon11 === void 0 ? "" : _hudMarkdownViewerCon11;
var _useState = useState(currentMarkdown),
_useState2 = _slicedToArray(_useState, 2),
markdown = _useState2[0],
setMarkdown = _useState2[1];
var mergedSectionsConfigurationSettings = {
blockquote: _objectSpread(_objectSpread({}, baseSectionsStyles.blockquote), blockQuoteSectionConfigurationSettings),
heading: _objectSpread(_objectSpread({}, baseSectionsStyles.heading), headingSectionConfigurationSettings),
image: _objectSpread(_objectSpread({}, baseSectionsStyles.image), imageSectionConfigurationSettings),
code: _objectSpread(_objectSpread({}, baseSectionsStyles.code), codeSectionConfigurationSettings),
link: _objectSpread(_objectSpread({}, baseSectionsStyles.link), linkSectionConfigurationSettings),
list: _objectSpread(_objectSpread({}, baseSectionsStyles.list), listSectionConfigurationSettings)
};
var mdRenderer = new marked.Renderer();
mdRenderer.heading = function (text, level) {
var style = mergedSectionsConfigurationSettings.heading;
return "\n <h".concat(level, " style=\"\n color : ").concat(style.color, ";\n font-weight : ").concat(style.fontWeight, ";\n \">\n ").concat(text, "\n </h").concat(level, ">");
};
mdRenderer.code = function (code) {
var style = mergedSectionsConfigurationSettings.code;
return "\n <pre style=\"\n background-color : ".concat(style.backgroundColor, ";\n color : ").concat(style.color, ";\n padding : ").concat(style.padding, ";\n border-radius : ").concat(style.borderRadius, ";\n overflow : ").concat(style.overflow, ";\n font-family : ").concat(style.fontFamily, ";\n line-height : ").concat(style.lineHeight, ";\n \">\n <code>").concat(code, "</code>\n </pre>");
};
mdRenderer.link = function (href, title, text) {
var style = mergedSectionsConfigurationSettings.link;
return "\n <a href=\"".concat(href, "\" title=\"").concat(title, "\" style=\"\n color : ").concat(style.color, ";\n text-decoration : ").concat(style.textDecoration, ";\n \">\n ").concat(text, "\n </a>");
};
mdRenderer.blockquote = function (quote) {
var style = mergedSectionsConfigurationSettings.blockquote;
return "\n <blockquote style=\"\n font-style: ".concat(style.fontStyle, ";\n color: ").concat(style.color, ";\n border-left: ").concat(style.borderLeft, ";\n padding: ").concat(style.padding, ";\n margin: ").concat(style.margin, ";\n \">\n ").concat(quote, "\n </blockquote>");
};
mdRenderer.list = function (body) {
var style = mergedSectionsConfigurationSettings.list;
return "\n <ul style=\"\n color: ".concat(style.color, ";\n padding-left: ").concat(style.paddingLeft, ";\n \">\n ").concat(body, "\n </ul>");
};
mdRenderer.image = function (href, title, text) {
var style = mergedSectionsConfigurationSettings.image;
return "\n <img src=\"".concat(href, "\" alt=\"").concat(text, "\" title=\"").concat(title, "\" style=\"\n max-width: ").concat(style.maxWidth, ";\n height: ").concat(style.height, ";\n border-radius: ").concat(style.borderRadius, ";\n \"/>");
};
marked.setOptions({
renderer: mdRenderer,
gfm: true,
breaks: true,
sanitize: false,
smartLists: true,
smartypants: true,
xhtml: true
});
var styles = {
container: _objectSpread({
display: "flex",
justifyContent: "space-around",
padding: "20px"
}, markDownViewerContainerConfigurationSettings),
textarea: _objectSpread({
fontSize: "16px",
lineHeight: "1.5",
height: "90vh",
width: "40%",
padding: "10px"
}, markDownViewerEditorConfigurationSettings),
preview: _objectSpread({
overflow: "auto",
lineHeight: "1.569",
fontSize: "1.069rem",
fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
textAlign: "left",
border: "1px solid #ccc",
borderRadius: "0.469rem",
backgroundColor: "#111314",
color: "rgba(255, 237, 255, 0.5869)",
padding: "1rem"
}, markDownViewerConfigurationSettings)
};
var handleChange = function handleChange(event) {
setMarkdown(event.target.value);
};
var getMarkdownText = function getMarkdownText() {
var rawMarkup = marked(markdown);
var purifiedMarkup = sanitizeHTML(rawMarkup);
return {
__html: purifiedMarkup
};
};
return /*#__PURE__*/React.createElement("div", {
style: styles.container
}, displayMarkdownEditor ? /*#__PURE__*/React.createElement("textarea", {
style: styles.textarea,
value: markdown,
onChange: handleChange,
rows: "10",
cols: "50",
placeholder: "Enter Markdown text..."
}) : null, /*#__PURE__*/React.createElement("div", {
className: "markdown-preview",
style: styles.preview,
dangerouslySetInnerHTML: getMarkdownText()
}));
}
/*
* Allows for editing / displaying of markdown text in real-time.
*
* @params
* @param {React.Props} hudMarkdownViewerConfigurationSettings - Facilitates the HUDMarkdownViewer's settings
* @param {Object} hudMarkdownViewerConfigurationSettings.markDownViewerContainerConfigurationSettings - Allows for direct adding / adjusting of the viewer's container style.
* @param {Object} hudMarkdownViewerConfigurationSettings.markDownViewerEditorConfigurationSettings - Allows for direct adding / adjusting of the viewer's editor styling.
* @param {Object} hudMarkdownViewerConfigurationSettings.markDownViewerConfigurationSettings - Allows for direct adding / adjusting of the viewer's styling.
* @param {boolean} hudMarkdownViewerConfigurationSettings.displayMarkdownEditor - Allows for one to decide to allows viewer edits or not.
* @param {string} hudMarkdownViewerConfigurationSettings.currentMarkdown - Allows to directly display markdown text into the viewer on component mount.
*
* @example
* <HUDMarkdownViewer
* currentMarkdown = "## LegendaryBuilderProReact-UI by Steven Compton"
* />
*/
export default HUDMarkdownViewer;