Add QR-Code as snippet under Editor (#539)

* Add snippet for QR-code

* Add snippet for QR-code

* Refactor to expose metadata to snippets

* Lint

Co-authored-by: Rasmus Bækgaard <git@bakgaard.net>
Co-authored-by: Trevor Buckner <calculuschild@gmail.com>

client/homebrew/editor/editor.jsx

@@ -18,10 +18,9 @@ const SNIPPETBAR_HEIGHT = 25;
 const Editor = createClass({
 	getDefaultProps : function() {
 		return {
-			value    : '',
+			brew     : {},
 			onChange : ()=>{},
 
-			metadata         : {},
 			onMetadataChange : ()=>{},
 			showMetaButton   : true,
 			renderer         : 'legacy'
@@ -59,7 +58,7 @@ const Editor = createClass({
 		this.cursorPosition = curpos;
 	},
 	handleInject : function(injectText){
-		const lines = this.props.value.split('\n');
+		const lines = this.props.brew.text.split('\n');
 		lines[this.cursorPosition.line] = splice(lines[this.cursorPosition.line], this.cursorPosition.ch, injectText);
 
 		this.handleTextChange(lines.join('\n'));
@@ -72,7 +71,7 @@ const Editor = createClass({
 	},
 
 	getCurrentPage : function(){
-		const lines = this.props.value.split('\n').slice(0, this.cursorPosition.line + 1);
+		const lines = this.props.brew.text.split('\n').slice(0, this.cursorPosition.line + 1);
 		return _.reduce(lines, (r, line)=>{
 			if(line.indexOf('\\page') !== -1) r++;
 			return r;
@@ -87,7 +86,7 @@ const Editor = createClass({
 		const customHighlights = codeMirror.getAllMarks();
 		for (let i=0;i<customHighlights.length;i++) customHighlights[i].clear();
 
-		const lineNumbers = _.reduce(this.props.value.split('\n'), (r, line, lineNumber)=>{
+		const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
 
 			//reset custom line styles
 			codeMirror.removeLineClass(lineNumber, 'background');
@@ -159,7 +158,7 @@ const Editor = createClass({
 	renderMetadataEditor : function(){
 		if(!this.state.showMetadataEditor) return;
 		return <MetadataEditor
-			metadata={this.props.metadata}
+			metadata={this.props.brew}
 			onChange={this.props.onMetadataChange}
 		/>;
 	},
@@ -169,7 +168,7 @@ const Editor = createClass({
 		return (
 			<div className='editor' ref='main'>
 				<SnippetBar
-					brew={this.props.value}
+					brew={this.props.brew}
 					onInject={this.handleInject}
 					onToggle={this.handgleToggle}
 					showmeta={this.state.showMetadataEditor}
@@ -180,7 +179,7 @@ const Editor = createClass({
 					ref='codeEditor'
 					wrap={true}
 					language='gfm'
-					value={this.props.value}
+					value={this.props.brew.text}
 					onChange={this.handleTextChange}
 					onCursorActivity={this.handleCursorActivty} />
 

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -16,7 +16,7 @@ const execute = function(val, brew){
 const Snippetbar = createClass({
 	getDefaultProps : function() {
 		return {
-			brew           : '',
+			brew           : {},
 			onInject       : ()=>{},
 			onToggle       : ()=>{},
 			showmeta       : false,
@@ -80,7 +80,7 @@ module.exports = Snippetbar;
 const SnippetGroup = createClass({
 	getDefaultProps : function() {
 		return {
-			brew           : '',
+			brew           : {},
 			groupName      : '',
 			icon           : 'fas fa-rocket',
 			snippets       : [],

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -41,8 +41,21 @@ module.exports = [
 			},
 			{
 				name : 'Background Image',
-				icon : 'fas fa-times-circle',
-				gen  : ''
+				icon : 'fas fa-tree',
+				gen  : `<img src='http://i.imgur.com/hMna6G0.png' ` +
+							`style='position:absolute; top:50px; right:30px; width:280px'/>`
+			},
+			{
+				name : 'QR Code',
+				icon : 'fas fa-qrcode',
+				gen  : (brew)=>{
+					return `<img ` +
+							`src='https://api.qrserver.com/v1/create-qr-code/?data=` +
+							`https://homebrewery.naturalcrit.com/share/${brew.shareId}` +
+							`&amp;size=100x100' ` +
+							`style='width:100px;mix-blend-mode:multiply'/>`;
+				}
+
 			},
 			{
 				name : 'Page Number',

client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js

@@ -48,7 +48,7 @@ const getTOC = (pages)=>{
 };
 
 module.exports = function(brew){
-	const pages = brew.split('\\page');
+	const pages = brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);
@@ -69,4 +69,4 @@ module.exports = function(brew){
 ##### Table Of Contents
 ${markdown}
 </div>\n`;
-};
+};

client/homebrew/editor/snippetbar/snippetsLegacy/tableOfContents.gen.js

@@ -48,7 +48,7 @@ const getTOC = (pages)=>{
 };
 
 module.exports = function(brew){
-	const pages = brew.split('\\page');
+	const pages = brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);
@@ -69,4 +69,4 @@ module.exports = function(brew){
 ##### Table Of Contents
 ${markdown}
 </div>\n`;
-};
+};

client/homebrew/pages/editPage/editPage.jsx

@@ -392,9 +392,8 @@ const EditPage = createClass({
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor
 						ref='editor'
-						value={this.state.brew.text}
+						brew={this.state.brew}
 						onChange={this.handleTextChange}
-						metadata={this.state.brew}
 						onMetadataChange={this.handleMetadataChange}
 						renderer={this.state.brew.renderer}
 					/>