react-codepen-editor
Version:
281 lines (257 loc) • 9.54 kB
JavaScript
import React, { useState, useEffect } from 'react';
import { highlight, languages } from 'prismjs';
import uuid from 'react-uuid';
import Editor from 'react-simple-code-editor';
import { BsArrowCounterclockwise } from 'react-icons/bs';
import { createGlobalStyle } from 'styled-components';
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
var colors = [{
'--text': ['rgb(14,20,27)', 'rgb(245,245,245)']
}, {
'--color-gray-500:': ['hsl(225deg, 7%, 60%)', 'hsl(210deg, 8%, 50%)']
}, {
'--color-gray-600:': ['hsl(225deg, 15%, 50%)', 'hsl(210deg, 12%, 55%)']
}, {
'--prism-base': ['#25414e', '#f8f8f2']
}, {
'--prism-background': ['#eeeff1', '#172028']
}, {
'--prism-comment': ['#aabfc9', '#8292a2']
}, {
'--prism-prolog': ['#aabfc9', '#8292a2']
}, {
'--prism-doctype': ['#aabfc9', '#8292a2']
}, {
'--prism-cdata': ['#39adb5', '#8292a2']
}, {
'--prism-punctuation': ['#39adb5', '#f8f8f2']
}, {
'--prism-namespace': ['#90a4ae', '#f8f8f2']
}, {
'--prism-property': ['#0eb6c2', '#f92672']
}, {
'--prism-tag': ['#e53935', '#ee5f93']
}, {
'--prism-constant': ['#7c4dff', '#f92672']
}, {
'--prism-symbol': ['#7c4dff', '#f92672']
}, {
'--prism-deleted': ['#e53935', '#f92672']
}, {
'--prism-boolean': ['#7c4dff', '#f92672']
}, {
'--prism-number': ['#f76d47', '#ae81ff']
}, {
'--prism-selector': ['#17242c', '#a6e22e']
}, {
'--prism-attr-name': ['#1950c2', '#a6e22e']
}, {
'--prism-string': ['#474545', '#e6db74']
}, {
'--prism-char': ['#39adb5', '#a6e22e']
}, {
'--prism-builtin': ['#39adb5', '#a6e22e']
}, {
'--prism-inserted': ['#39adb5', '#a6e22e']
}, {
'--prism-operator': ['#39adb5', '#f8f8f2']
}, {
'--prism-entity': ['#393566', '#f8f8f2']
}, {
'--prism-url': ['#e53935', '#f8f8f2']
}, {
'--prism-variable': ['#e53935', '#fd971f']
}, {
'--prism-atrule': ['#7c4dff', '#e6db74']
}, {
'--prism-attr-value': ['#3c77b1', '#e6db74']
}, {
'--prism-function': ['#ff7c4d', '#e6db74']
}, {
'--prism-class-name': ['#ca3253', '#e46e86']
}, {
'--prism-keyword': ['#0a14f5', '#66d9ef']
}, {
'--prism-regex': ['#6182b8', '#e90']
}, {
'--prism-important': ['#7c4dff', '#fd971f']
}, {
'--playground-top': ['rgb(223, 223, 223)', 'rgb(32, 40, 48)']
}];
var setTheme = function setTheme(theme) {
colors.forEach(function (value) {
document.documentElement.style.setProperty(Object.keys(value)[0], theme === 'light' ? Object.values(value)[0][0] : Object.values(value)[0][1]);
});
};
var _templateObject;
var CreateDynamicStyles = function CreateDynamicStyles(themeTransitionSpeed, mobileQuery) {
return createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n .td {\n transition: background-color ", "ms;\n }\n @media screen and (max-width: ", "px) {\n .codepen-display {\n flex-direction: column;\n }\n .codepen-editors {\n width: 100%;\n margin: 0;\n }\n .codepen-textareas {\n margin-bottom: 10px;\n } \n .codepen-results {\n width: 100%;\n padding: 10px 10px 6px 10px;\n box-sizing: border-box;\n }\n .codepen-display {\n height: fit-content !important;\n }\n .codepen-iframe-container {\n height: fit-content;\n padding: 0;\n }\n .codepen-results-title {\n padding: 10px 0px;\n }\n }\n"])), themeTransitionSpeed || 0, mobileQuery || 0);
};
function CodepenEditor(_ref) {
var HTML = _ref.HTML,
CSS = _ref.CSS,
JS = _ref.JS,
initial = _ref.initial,
theme = _ref.theme,
resettable = _ref.resettable,
height = _ref.height,
themeTransitionSpeed = _ref.themeTransitionSpeed,
mobileQuery = _ref.mobileQuery;
var DynamicStyles = CreateDynamicStyles(themeTransitionSpeed, mobileQuery);
var _resettable = resettable !== undefined ? resettable : true;
var _useState = useState(HTML || ''),
_HTML = _useState[0],
setHTML = _useState[1];
var _useState2 = useState(CSS || ''),
_CSS = _useState2[0],
setCSS = _useState2[1];
var _useState3 = useState(JS || ''),
_JS = _useState3[0],
setJS = _useState3[1];
var _useState4 = useState(initial || 'HTML'),
selected = _useState4[0],
setSelected = _useState4[1];
var iFrameId = uuid();
var _useState5 = useState(null),
iFrame = _useState5[0],
setIFrame = _useState5[1];
useEffect(function () {
setTheme(theme);
}, [theme]);
useEffect(function () {
if (document) {
var frame = document.getElementById('codepen-iframe-' + iFrameId).contentWindow.document;
setIFrame(frame);
writeInFrame(frame, _HTML, _CSS, _JS);
}
}, []);
var resetIFrame = function resetIFrame() {
var resetButton = document.getElementById('codepen-reset-' + iFrameId);
resetButton.classList.add('codepen-reset-active');
setTimeout(function () {
resetButton.classList.remove('codepen-reset-active');
}, 400);
setHTML(HTML || '');
setCSS(CSS || '');
setJS(JS || '');
writeInFrame(iFrame, HTML, CSS, JS);
checkForUndefined();
};
var checkForUndefined = function checkForUndefined() {
var frame = document.getElementById('codepen-iframe-' + iFrameId).contentWindow.document;
if (frame.body.innerHTML.includes('undefined')) {
frame.body.innerHTML = '';
}
};
var writeInFrame = function writeInFrame(frame, HTML, CSS, JS) {
frame.open();
frame.writeln(HTML + '<style>' + CSS + '</style>' + '<script>' + JS + '</script>');
frame.close();
};
var updateTextArea = function updateTextArea(type, val) {
var tmpHTML = _HTML;
var tmpCSS = _CSS;
var tmpJS = _JS;
if (type === 'HTML') {
setHTML(val);
tmpHTML = val;
} else if (type === 'CSS') {
setCSS(val);
tmpCSS = val;
} else if (type === 'JS') {
setJS(val);
tmpJS = val;
}
writeInFrame(iFrame, tmpHTML, tmpCSS, tmpJS);
};
return /*#__PURE__*/React.createElement("div", {
className: "codepen"
}, /*#__PURE__*/React.createElement(DynamicStyles, null), /*#__PURE__*/React.createElement("div", {
className: "codepen-title-flex td"
}, /*#__PURE__*/React.createElement("span", {
className: "codepen-title td"
}, "Code playground"), _resettable && /*#__PURE__*/React.createElement(BsArrowCounterclockwise, {
id: 'codepen-reset-' + iFrameId,
title: "Reset code",
onClick: resetIFrame,
className: "codepen-reset",
size: 23
})), /*#__PURE__*/React.createElement("div", {
style: {
height: height || '350px'
},
className: "codepen-display td"
}, /*#__PURE__*/React.createElement("div", {
className: "codepen-editors"
}, /*#__PURE__*/React.createElement("div", {
className: "codepen-editor-picker td"
}, /*#__PURE__*/React.createElement("button", {
className: "td " + (selected === 'HTML' ? 'codepen-title-selected ' : ''),
onClick: function onClick() {
return setSelected('HTML');
}
}, "HTML"), /*#__PURE__*/React.createElement("button", {
className: "td " + (selected === 'CSS' ? 'codepen-title-selected ' : ''),
onClick: function onClick() {
return setSelected('CSS');
}
}, "CSS"), /*#__PURE__*/React.createElement("button", {
className: "td " + (selected === 'JS' ? 'codepen-title-selected ' : ''),
onClick: function onClick() {
return setSelected('JS');
}
}, "JS")), /*#__PURE__*/React.createElement("div", {
className: "codepen-textareas td"
}, /*#__PURE__*/React.createElement("div", {
className: "codepen-editor td " + (selected === 'CSS' ? '' : 'codepen-editor-inactive')
}, selected === 'CSS' && /*#__PURE__*/React.createElement(Editor, {
value: _CSS,
onValueChange: function onValueChange(newVal) {
return updateTextArea('CSS', newVal);
},
highlight: function highlight$1(code) {
return highlight(code, languages.css);
}
})), /*#__PURE__*/React.createElement("div", {
className: "codepen-editor td " + (selected === 'HTML' ? '' : 'codepen-editor-inactive')
}, selected === 'HTML' && /*#__PURE__*/React.createElement(Editor, {
value: _HTML,
onValueChange: function onValueChange(newVal) {
return updateTextArea('HTML', newVal);
},
highlight: function highlight$1(code) {
return highlight(code, languages.html, 'html');
}
})), /*#__PURE__*/React.createElement("div", {
className: "codepen-editor td " + (selected === 'JS' ? '' : 'codepen-editor-inactive')
}, selected === 'JS' && /*#__PURE__*/React.createElement(Editor, {
value: _JS,
onValueChange: function onValueChange(newVal) {
return updateTextArea('JS', newVal);
},
highlight: function highlight$1(code) {
return highlight(code, languages.js, 'js');
}
})))), /*#__PURE__*/React.createElement("div", {
className: "codepen-results td"
}, /*#__PURE__*/React.createElement("div", {
className: "codepen-results-title td"
}, "Results"), /*#__PURE__*/React.createElement("div", {
className: "codepen-iframe-container td"
}, /*#__PURE__*/React.createElement("iframe", {
scrolling: "yes",
title: "react-codepen-editor",
marginWidth: "0",
marginHeight: "0",
className: "td",
id: 'codepen-iframe-' + iFrameId
})))));
}
export default CodepenEditor;
//# sourceMappingURL=index.modern.js.map