codogo-react-widgets/lib/components/markdown/index.js

Provides a unified way to access the styling of commonly used widgets across different apps

import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _desc, _value, _class;

var _templateObject = _taggedTemplateLiteral(["\n\n\tdiv {\n\t\tdisplay: inline-block;\n\t\tmargin: 0;\n\t\toutline: 0px solid transparent;\n\t\tpointer-events: all;\n\t\ttabSize: 4;\n\t\twhite-space: pre-wrap;\n\t\twidth: 100%;\n\n\t\t&:empty {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t&:empty::before {\n\t\t\tcontent: \"", "\";\n\t\t\topacity: 0.33;\n\t\t}\n\t}\n\n\ta,\n\ta:hover,\n\ta:visited,\n\ta:active,\n\ta:link {\n\t\tcolor: ", ";\n\t\tmax-width: 100%;\n\t\tcursor: pointer;\n\t\ttext-decoration: underline;\n\t\tword-wrap: break-word;\n\t}\n\n\t.hljs-emphasis {\n\t\tcolor: ", ";\n\t}\n\t.hljs-strong {\n\t\tcolor: ", ";\n\t}\n\t.hljs-string {\n\t\tcolor: ", ";\n\t}\n\t.hljs-link {\n\t\tcolor: ", ";\n\t}\n\t.hljs-code {\n\t\tcolor: ", ";\n\t}\n"], ["\n\n\tdiv {\n\t\tdisplay: inline-block;\n\t\tmargin: 0;\n\t\toutline: 0px solid transparent;\n\t\tpointer-events: all;\n\t\ttabSize: 4;\n\t\twhite-space: pre-wrap;\n\t\twidth: 100%;\n\n\t\t&:empty {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t&:empty::before {\n\t\t\tcontent: \"", "\";\n\t\t\topacity: 0.33;\n\t\t}\n\t}\n\n\ta,\n\ta:hover,\n\ta:visited,\n\ta:active,\n\ta:link {\n\t\tcolor: ", ";\n\t\tmax-width: 100%;\n\t\tcursor: pointer;\n\t\ttext-decoration: underline;\n\t\tword-wrap: break-word;\n\t}\n\n\t.hljs-emphasis {\n\t\tcolor: ", ";\n\t}\n\t.hljs-strong {\n\t\tcolor: ", ";\n\t}\n\t.hljs-string {\n\t\tcolor: ", ";\n\t}\n\t.hljs-link {\n\t\tcolor: ", ";\n\t}\n\t.hljs-code {\n\t\tcolor: ", ";\n\t}\n"]);

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
	var desc = {};
	Object['ke' + 'ys'](descriptor).forEach(function (key) {
		desc[key] = descriptor[key];
	});
	desc.enumerable = !!desc.enumerable;
	desc.configurable = !!desc.configurable;

	if ('value' in desc || desc.initializer) {
		desc.writable = true;
	}

	desc = decorators.slice().reverse().reduce(function (desc, decorator) {
		return decorator(target, property, desc) || desc;
	}, desc);

	if (context && desc.initializer !== void 0) {
		desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
		desc.initializer = undefined;
	}

	if (desc.initializer === void 0) {
		Object['define' + 'Property'](target, property, desc);
		desc = null;
	}

	return desc;
}

import selectionManipulator from "selection-range";
import autobind from "autobind-decorator";
import hljs from "highlight.js";
import styled from "styled-components";

import { keyCodesToForwardOnChange } from "./constants";

var MarkdownStyler = styled.div(_templateObject, R.prop("placeholder"), R.path(["theme", "colors", "primary"]), R.path(["theme", "colors", "red"]), R.path(["theme", "colors", "yellow"]), R.path(["theme", "colors", "green"]), R.path(["theme", "colors", "blue"]), R.path(["theme", "colors", "orange"]));

var selectionEq = function selectionEq() {
	var lhs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
	var rhs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
	return lhs.start === rhs.start && lhs.end === rhs.end;
};

var isFirefox = typeof InstallTrigger !== "undefined";
//const isOpera = (!!window.opr && !!window.opr.addons) || !!window.opera || navigator.userAgent.indexOf(" OPR/") >= 0;
//const isSafari = /constructor/i.test(window.HTMLElement) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })( !window["safari"] || (typeof safari !== "undefined" && safari.pushNotification),);
//const isIE = [>@cc_on!@<] false || !!document.documentMode;
//const isEdge = !isIE && !!window.StyleMedia;
//const isChrome = !!window.chrome && !!window.chrome.webstore;
//const isBlink = (isChrome || isOpera) && !!window.CSS;

var Markdown = (_class = function (_React$Component) {
	_inherits(Markdown, _React$Component);

	function Markdown() {
		_classCallCheck(this, Markdown);

		return _possibleConstructorReturn(this, (Markdown.__proto__ || Object.getPrototypeOf(Markdown)).apply(this, arguments));
	}

	_createClass(Markdown, [{
		key: "componentDidMount",
		value: function componentDidMount() {
			if (this.ref) {
				this.ref.innerHTML = hljs.highlight("markdown", this.props.value).value;
			}
			this.componentDidX();
		}
	}, {
		key: "componentDidUpdate",
		value: function componentDidUpdate() {
			this.componentDidX();
		}
	}, {
		key: "componentDidX",
		value: function componentDidX() {
			var domElement = this.ref;

			if (this.props.focus) {
				if (document.activeElement !== domElement) {
					domElement.focus();
				}

				var oldValue = domElement.textContent;

				if (oldValue !== this.props.value) {
					domElement.textContent = this.props.value;
					domElement.innerHTML = hljs.highlight("markdown", this.props.value).value;
				}

				var oldSelection = selectionManipulator(domElement);
				if (!selectionEq(oldSelection, this.props.selection) && this.props.value.length) {
					selectionManipulator(domElement, this.props.selection || {});
				}
			} else {
				domElement.textContent = this.props.value;
				domElement.blur();
			}
		}
	}, {
		key: "onRef",
		value: function onRef(ref) {
			if (ref) {
				this.ref = ref;
			}
		}
	}, {
		key: "onKeyDown",
		value: function onKeyDown() {}
	}, {
		key: "onChange",
		value: function onChange(event) {
			var domElement = this.ref;

			if (domElement) {
				var selection = selectionManipulator(domElement);
				var value = domElement.innerText;

				if (isFirefox && event.keyCode === 13) {
					selection.start = selection.start + 1;
					selection.end = selection.end + 1;
				}

				var selectionChanged = !selectionEq(selection, this.props.selection);

				var valueChanged = value !== this.props.value;

				console.log("onChange", {
					event: event,
					value: valueChanged ? value : this.props.value,
					selection: selectionChanged ? selection : this.props.selection
				});

				this.props.onChange({
					event: event,
					value: valueChanged ? value : this.props.value,
					selection: selectionChanged ? selection : this.props.selection
				});
			}
		}
	}, {
		key: "onClick",
		value: function onClick(event) {
			this.onChange(event);
		}
	}, {
		key: "onKeyUp",
		value: function onKeyUp(event) {
			//any key has been pressed,
			//but this handler only deals with non-text-mutating actions
			//so we'll need to weed those out

			if (this.lastCalled !== this.onInput && keyCodesToForwardOnChange.has(event.keyCode)) {
				this.onChange(event);
			}

			this.lastCalled = this.onKeyUp;
		}
	}, {
		key: "onInput",
		value: function onInput(event) {
			this.onChange(event);

			this.lastCalled = this.onInput;
		}
	}, {
		key: "render",
		value: function render() {
			return React.createElement(
				MarkdownStyler,
				{ placeholder: this.props.placeholder },
				React.createElement("div", {
					className: "markdown",
					contentEditable: true,
					onKeyUp: this.onKeyUp,
					onInput: this.onInput,
					ref: this.onRef
				})
			);
		}
	}]);

	return Markdown;
}(React.Component), (_applyDecoratedDescriptor(_class.prototype, "componentDidX", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "componentDidX"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onRef", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "onRef"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onKeyDown", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "onKeyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onChange", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "onChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onClick", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "onClick"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onKeyUp", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "onKeyUp"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onInput", [autobind], Object.getOwnPropertyDescriptor(_class.prototype, "onInput"), _class.prototype)), _class);
export { Markdown as default };