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";

var _desc, _value, _class;

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 PropTypes from "prop-types";
import selectionManipulator from "selection-range";
import autobind from "autobind-decorator";
import hljs from "highlight.js";

import { keyCodesToForwardOnChange } from "./constants";
import { isFirefox } from "./browsers";
import MarkdownStyler from "./MarkdownStyler";

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 Markdown = (_class = function (_React$Component) {
	_inherits(Markdown, _React$Component);

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

		var _this = _possibleConstructorReturn(this, (Markdown.__proto__ || Object.getPrototypeOf(Markdown)).call(this, props));

		_this.oldProps = {};
		return _this;
	}

	_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();
				}

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

				if (!selectionEq(this.oldProps.selection, this.props.selection) && this.props.value.length) {
					selectionManipulator(domElement, this.props.selection || {});
				}
			} else {
				domElement.innerHTML = hljs.highlight("markdown", this.props.value).value;
				domElement.blur();
			}

			this.oldProps = this.props;
		}
	}, {
		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);


Markdown.propTypes = {
	value: PropTypes.string.isRequired,
	selection: PropTypes.shape({
		start: PropTypes.number.isRequired,
		end: PropTypes.number.isRequired
	}).isRequired
};

export default Markdown;