add image selector field type, modal component, and new snippet widgets

shared/naturalcrit/codeEditor/helpers/widget-elements/modal/modal.jsx

@@ -0,0 +1,49 @@
+require('./modal.less');
+const React = require('react');
+const createClass = require('create-react-class');
+
+const Modal = createClass({
+	getDefaultProps : function () {
+		return {
+			header : '',
+			save   : ()=>{},
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			visible : false,
+		};
+	},
+
+	setVisible : function(visible) {
+		this.setState({
+			visible
+		});
+	},
+
+	save : function() {
+		this.props.save();
+		this.setVisible(false);
+	},
+
+	render : function () {
+		const { children, header } = this.props;
+		const { visible } = this.state;
+		return <React.Fragment>
+			{visible ? <div className={'bg-cover'}>
+				<div className={'modal'}>
+					<h1>{header}</h1>
+					<hr/>
+					{children}
+					<div className={'action-row'}>
+						<button id={'save'} onClick={()=>this.save()}>Save</button>
+						<button id={'cancel'} onClick={()=>this.setVisible(false)}>Cancel</button>
+					</div>
+				</div>
+			</div> : null}
+		</React.Fragment>;
+	}
+});
+
+module.exports = Modal;

shared/naturalcrit/codeEditor/helpers/widget-elements/modal/modal.less

@@ -0,0 +1,58 @@
+@import 'naturalcrit/styles/colors.less';
+
+.bg-cover {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  z-index: 10000000;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .5);
+}
+
+.modal {
+  position: absolute;
+  top: 10vh;
+  left: 25vw;
+  width: 50vw;
+  min-height: 50vh;
+  max-height: 80vh;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 5px 5px 50px black;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  h1 {
+    margin-top: 5px;
+    margin-left: 5px;
+    font-size: 2em;
+  }
+
+  >* {
+    flex: 0 0 auto;
+  }
+
+  .action-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: left;
+
+    >* {
+      flex: 0 0 auto;
+      margin-left: 5px;
+    }
+  }
+
+  button {
+    &#cancel {
+      background-color: @redLight;
+
+      &:hover {
+        background-color: @red;
+      }
+    }
+  }
+}