Merge branch 'editor-widgets' of https://github.com/naturalcrit/homebrewery into editor-widgets

2026-01-27 20:23:08 +00:00 · 2023-07-16 01:53:24 -04:00
parent 314275122d e6055bd417
commit c113b8dd1f
34 changed files with 1461 additions and 1152 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,7 +15,7 @@ module.exports = {
 	rules   : {
 		/** Errors **/
 		'camelcase'              : ['error', { properties: 'never' }],
-		'func-style'             : ['error', 'expression', { allowArrowFunctions: true }],
+		//'func-style'             : ['error', 'expression', { allowArrowFunctions: true }],
 		'no-array-constructor'   : 'error',
 		'no-iterator'            : 'error',
 		'no-nested-ternary'      : 'error',
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -108,6 +108,12 @@ const BrewRenderer = createClass({
 		return false;
 	},

+	sanitizeScriptTags : function(content) {
+		return content
+			.replace(/<script/ig, '&lt;script')
+			.replace(/<\/script>/ig, '&lt;/script&gt;');
+	},
+
 	renderPageInfo : function(){
 		return <div className='pageInfo' ref='main'>
 			<div>
@@ -135,18 +141,20 @@ const BrewRenderer = createClass({

 	renderStyle : function() {
 		if(!this.props.style) return;
-		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.props.style}\n</style>` }} />;
+		const cleanStyle = this.sanitizeScriptTags(this.props.style);
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.sanitizeScriptTags(this.props.style)}\n} </style>` }} />;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${cleanStyle} </style>` }} />;
 	},

 	renderPage : function(pageText, index){
+		const cleanPageText = this.sanitizeScriptTags(pageText);
 		if(this.props.renderer == 'legacy')
-			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
+			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(cleanPageText) }} key={index} />;
 		else {
 			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 			return (
 				<div className='page' id={`p${index + 1}`} key={index} >
-					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
+					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />
 				</div>
 			);
 		}
@@ -185,6 +193,12 @@ const BrewRenderer = createClass({
 		}, 100);
 	},

+	emitClick : function(){
+		// console.log('iFrame clicked');
+		if(!window || !document) return;
+		document.dispatchEvent(new MouseEvent('click'));
+	},
+
 	render : function(){
 		//render in iFrame so broken code doesn't crash the site.
 		//Also render dummy page while iframe is mounting.
@@ -203,7 +217,9 @@ const BrewRenderer = createClass({

 				<Frame id='BrewRenderer' initialContent={this.state.initialContent}
 					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
-					contentDidMount={this.frameDidMount}>
+					contentDidMount={this.frameDidMount}
+					onClick={()=>{this.emitClick();}}
+				>
 					<div className={'brewRenderer'}
 						onScroll={this.handleScroll}
 						style={{ height: this.state.height }}>
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -323,7 +323,8 @@ const Editor = createClass({
 					theme={this.props.brew.theme}
 					undo={this.undo}
 					redo={this.redo}
-					historySize={this.historySize()} />
+					historySize={this.historySize()}
+					cursorPos={this.refs.codeEditor?.getCursorPosition() || {}} />

 				{this.renderEditor()}
 			</div>
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -15,8 +15,8 @@ ThemeSnippets['V3_5eDMG']     = require('themes/V3/5eDMG/snippets.js');
 ThemeSnippets['V3_Journal']   = require('themes/V3/Journal/snippets.js');
 ThemeSnippets['V3_Blank']     = require('themes/V3/Blank/snippets.js');

-const execute = function(val, brew){
-	if(_.isFunction(val)) return val(brew);
+const execute = function(val, props){
+	if(_.isFunction(val)) return val(props);
 	return val;
 };

@@ -33,7 +33,8 @@ const Snippetbar = createClass({
 			renderer        : 'legacy',
 			undo            : ()=>{},
 			redo            : ()=>{},
-			historySize     : ()=>{}
+			historySize     : ()=>{},
+			cursorPos       : {}
 		};
 	},

@@ -105,6 +106,7 @@ const Snippetbar = createClass({
 				snippets={snippetGroup.snippets}
 				key={snippetGroup.groupName}
 				onSnippetClick={this.handleSnippetClick}
+				cursorPos={this.props.cursorPos}
 			/>;
 		});
 	},
@@ -165,7 +167,7 @@ const SnippetGroup = createClass({
 	},
 	handleSnippetClick : function(e, snippet){
 		e.stopPropagation();
-		this.props.onSnippetClick(execute(snippet.gen, this.props.brew));
+		this.props.onSnippetClick(execute(snippet.gen, this.props));
 	},
 	renderSnippets : function(snippets){
 		return _.map(snippets, (snippet)=>{
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -81,35 +81,15 @@
 			color              : pink;
 		}
 	}
-	.recent.navItem {
+	.recent.navDropdownContainer {
 		position : relative;
-		.dropdown {
-			position        : absolute;
-			z-index         : 10000;
-			top             : 28px;
-			left            : 0;
+		.navDropdown .navItem {
 			overflow        : hidden auto;
-			width           : 100%;
 			max-height      : ~"calc(100vh - 28px)";
 			scrollbar-color : #666 #333;
 			scrollbar-width : thin;
-			h4 {
-				font-size        : 0.8em;
-				display          : block;
-				box-sizing       : border-box;
-				padding          : 5px 0;
-				text-align       : center;
-				color            : #BBB;
-				border-top       : 1px solid #888;
-				background-color : #333;
-				&:nth-of-type(1) {
-					background-color : darken(@teal, 20%);
-				}
-				&:nth-of-type(2) {
-					background-color : darken(@purple, 30%);
-				}
-			}
-			.item {
+			
+
 			#backgroundColorsHover;
 			.animate(background-color);
 			position         : relative;
@@ -164,6 +144,20 @@
 				bottom    : 2px;
 				color     : #888;
 			}
+			&.header {
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 5px 0;
+				text-align       : center;
+				color            : #BBB;
+				border-top       : 1px solid #888;
+				background-color : #333;
+				&:nth-of-type(1) {
+					background-color : darken(@teal, 20%);
+				}
+				&:nth-of-type(2) {
+					background-color : darken(@purple, 30%);
+				}
 			}
 		}
 	}
--- a/client/homebrew/navbar/recent.navitem.jsx
+++ b/client/homebrew/navbar/recent.navitem.jsx
@@ -121,6 +121,7 @@ const RecentItems = createClass({

 	removeItem : function(url, evt){
 		evt.preventDefault();
+		evt.stopPropagation();

 		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
 		let viewed = JSON.parse(localStorage.getItem(VIEW_KEY) || '[]');
@@ -139,11 +140,11 @@ const RecentItems = createClass({
 	},

 	renderDropdown : function(){
-		if(!this.state.showDropdown) return null;
+		// if(!this.state.showDropdown) return null;

 		const makeItems = (brews)=>{
 			return _.map(brews, (brew, i)=>{
-				return <a href={brew.url} className='item' key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
+				return <a className='navItem' href={brew.url} key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
 					<span className='title'>{brew.title || '[ no title ]'}</span>
 					<span className='time'>{Moment(brew.ts).fromNow()}</span>
 					<div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div>
@@ -151,25 +152,25 @@ const RecentItems = createClass({
 			});
 		};

-		return <div className='dropdown'>
+		return <>
 			{(this.props.showEdit && this.props.showView) ?
-				<h4>edited</h4> : null }
+				<Nav.item className='header'>edited</Nav.item> : null }
 			{this.props.showEdit ?
 				makeItems(this.state.edit) : null }
 			{(this.props.showEdit && this.props.showView) ?
-				<h4>viewed</h4>	: null }
+				<Nav.item className='header'>viewed</Nav.item>	: null }
 			{this.props.showView ?
 				makeItems(this.state.view) : null }
-		</div>;
+		</>;
 	},

 	render : function(){
-		return <Nav.item icon='fas fa-history' color='grey' className='recent'
-			onMouseEnter={()=>this.handleDropdown(true)}
-			onMouseLeave={()=>this.handleDropdown(false)}>
+		return <Nav.dropdown className='recent'>
+			<Nav.item icon='fas fa-history' color='grey' >
 				{this.props.text}
+			</Nav.item>
 			{this.renderDropdown()}
-		</Nav.item>;
+		</Nav.dropdown>;
 	}

 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -78,9 +78,9 @@
    ]
  },
  "dependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-transform-runtime": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/core": "^7.22.8",
+    "@babel/plugin-transform-runtime": "^7.22.7",
+    "@babel/preset-env": "^7.22.7",
    "@babel/preset-react": "^7.22.5",
    "@googleapis/drive": "^5.1.0",
    "body-parser": "^1.20.2",
@@ -97,18 +97,18 @@
    "jwt-simple": "^0.5.6",
    "less": "^3.13.1",
    "lodash": "^4.17.21",
-    "marked": "5.1.0",
+    "marked": "5.1.1",
    "marked-extended-tables": "^1.0.6",
    "marked-gfm-heading-id": "^3.0.4",
    "marked-smartypants-lite": "^1.0.0",
    "markedLegacy": "npm:marked@^0.3.19",
    "moment": "^2.29.4",
-    "mongoose": "^7.3.1",
+    "mongoose": "^7.3.2",
    "nanoid": "3.3.4",
    "nconf": "^0.12.0",
-    "npm": "^9.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "npm": "^9.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
    "react-frame-component": "^4.1.3",
    "react-router-dom": "6.14.1",
    "sanitize-filename": "1.6.3",
@@ -119,13 +119,13 @@
    "eslint": "^8.44.0",
    "eslint-plugin-jest": "^27.2.2",
    "eslint-plugin-react": "^7.32.2",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
    "jest-expect-message": "^1.1.3",
    "postcss-less": "^6.0.0",
-    "stylelint": "^15.9.0",
-    "stylelint-config-recess-order": "^4.2.0",
-    "stylelint-config-recommended": "^12.0.0",
-    "stylelint-stylistic": "^0.4.2",
+    "stylelint": "^15.10.1",
+    "stylelint-config-recess-order": "^4.3.0",
+    "stylelint-config-recommended": "^13.0.0",
+    "stylelint-stylistic": "^0.4.3",
    "supertest": "^6.3.3"
  }
 }
--- a/scripts/buildHomebrew.js
+++ b/scripts/buildHomebrew.js
@@ -135,12 +135,12 @@ fs.emptyDirSync('./build');

 })().catch(console.error);

-//In development set up a watch server and livereload
+//In development, set up LiveReload (refreshes browser), and Nodemon (restarts server)
 if(isDev){
-	livereload('./build');
-	watchFile('./server.js', { // Rebuild when change detected to this file or any nested directory from here
-		ignore : ['./build'],    // Ignore ./build or it will rebuild again
-		ext    : 'less',             // Other extensions to watch (only .js/.json/.jsx by default)
-		//watch: ['./client', './server', './themes'], // Watch additional folders if you want
+	livereload('./build');     // Install the Chrome extension LiveReload to automatically refresh the browser
+	watchFile('./server.js', { // Restart server when change detected to this file or any nested directory from here
+		ignore : ['./build', './client', './themes'],  // Ignore folders that are not running server code / avoids unneeded restarts
+		ext    : 'js json'                             // Extensions to watch (only .js/.json by default)
+		//watch : ['./server', './themes'],            // Watch additional folders if needed
 	});
 }
--- a/server/app.js
+++ b/server/app.js
@@ -324,8 +324,8 @@ app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, r
 	};

 	if(req.params.id.length > 12 && !brew._id) {
-		const googleId = req.params.id.slice(0, -12);
-		const shareId = req.params.id.slice(-12);
+		const googleId = brew.googleId;
+		const shareId = brew.shareId;
 		await GoogleActions.increaseView(googleId, shareId, 'share', brew)
 			.catch((err)=>{next(err);});
 	} else {
--- a/server/googleActions.js
+++ b/server/googleActions.js
@@ -100,12 +100,12 @@ const GoogleActions = {
 		const drive = googleDrive.drive({ version: 'v3', auth });

 		const fileList = [];
-		let NextPageToken = "";
+		let NextPageToken = '';

 		do {
 			const obj = await drive.files.list({
 				pageSize  : 1000,
-				pageToken : NextPageToken || "",
+				pageToken : NextPageToken || '',
 				fields    : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties)',
 				q         : 'mimeType != \'application/vnd.google-apps.folder\' and trashed = false'
 			})
@@ -243,9 +243,9 @@ const GoogleActions = {

 		if(obj) {
 			if(accessType == 'edit' && obj.data.properties.editId != accessId){
-				throw ('Edit ID does not match');
+				throw ({ message: 'Edit ID does not match' });
 			} else if(accessType == 'share' && obj.data.properties.shareId != accessId){
-				throw ('Share ID does not match');
+				throw ({ message: 'Share ID does not match' });
 			}

 			const file = await drive.files.get({
--- a/server/homebrew.api.js
+++ b/server/homebrew.api.js
@@ -27,8 +27,13 @@ const api = {

 		// If the id is longer than 12, then it's a google id + the edit id. This splits the longer id up.
 		if(id.length > 12) {
-			googleId = id.slice(0, -12);
-			id = id.slice(-12);
+			if(id.length >= (33 + 12)) {    // googleId is minimum 33 chars (may increase)
+				googleId = id.slice(0, -12);  // current editId is 12 chars
+			} else {                        // old editIds used to be 10 chars;
+				googleId = id.slice(0, -10);  // if total string is too short, must be old brew
+				console.log('Old brew, using 10-char Id');
+			}
+			id = id.slice(googleId.length);
 		}
 		return { id, googleId };
 	},
--- a/server/homebrew.api.spec.js
+++ b/server/homebrew.api.spec.js
@@ -111,15 +111,26 @@ describe('Tests for api', ()=>{
 			expect(googleId).toEqual('12345');
 		});

-		it('should return id and google id from params', ()=>{
+		it('should return 12-char id and google id from params', ()=>{
 			const { id, googleId } = api.getId({
 				params : {
-					id : '123456789012abcdefghijkl'
+					id : '123456789012345678901234567890123abcdefghijkl'
 				}
 			});
 			
+			expect(googleId).toEqual('123456789012345678901234567890123');
 			expect(id).toEqual('abcdefghijkl');
-			expect(googleId).toEqual('123456789012');
+		});
+
+		it('should return 10-char id and google id from params', ()=>{
+			const { id, googleId } = api.getId({
+				params : {
+					id : '123456789012345678901234567890123abcdefghij'
+				}
+			});
+			
+			expect(googleId).toEqual('123456789012345678901234567890123');
+			expect(id).toEqual('abcdefghij');
 		});
 	});

--- a/shared/naturalcrit/codeEditor/code-mirror.js
+++ b/shared/naturalcrit/codeEditor/code-mirror.js
@@ -0,0 +1,36 @@
+let CodeMirror;
+if(typeof navigator !== 'undefined'){
+	CodeMirror = require('codemirror');
+
+	//Language Modes
+	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
+	require('codemirror/mode/css/css.js');
+	require('codemirror/mode/javascript/javascript.js');
+
+	//Addons
+	//Code folding
+	require('codemirror/addon/fold/foldcode.js');
+	require('codemirror/addon/fold/foldgutter.js');
+	//Search and replace
+	require('codemirror/addon/search/search.js');
+	require('codemirror/addon/search/searchcursor.js');
+	require('codemirror/addon/search/jump-to-line.js');
+	require('codemirror/addon/search/match-highlighter.js');
+	require('codemirror/addon/search/matchesonscrollbar.js');
+	require('codemirror/addon/dialog/dialog.js');
+	//Trailing space highlighting
+	// require('codemirror/addon/edit/trailingspace.js');
+	//Active line highlighting
+	// require('codemirror/addon/selection/active-line.js');
+	//Scroll past last line
+	require('codemirror/addon/scroll/scrollpastend.js');
+	//Auto-closing
+	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
+	require('codemirror/addon/fold/xml-fold.js');
+	require('codemirror/addon/edit/closetag.js');
+
+	const foldCode = require('./helpers/fold-code');
+	foldCode.registerHomebreweryHelper(CodeMirror);
+}
+
+module.exports = CodeMirror;
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -5,43 +5,8 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 const closeTag = require('./helpers/close-tag');
-const { WIDGET_TYPE, FIELD_TYPE } = require('./helpers/widget-elements/constants');
 const Hints = require('./helpers/widget-elements/hints/hints.jsx');
-
-let CodeMirror;
-if(typeof navigator !== 'undefined'){
-	CodeMirror = require('codemirror');
-
-	//Language Modes
-	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
-	require('codemirror/mode/css/css.js');
-	require('codemirror/mode/javascript/javascript.js');
-
-	//Addons
-	//Code folding
-	require('codemirror/addon/fold/foldcode.js');
-	require('codemirror/addon/fold/foldgutter.js');
-	//Search and replace
-	require('codemirror/addon/search/search.js');
-	require('codemirror/addon/search/searchcursor.js');
-	require('codemirror/addon/search/jump-to-line.js');
-	require('codemirror/addon/search/match-highlighter.js');
-	require('codemirror/addon/search/matchesonscrollbar.js');
-	require('codemirror/addon/dialog/dialog.js');
-	//Trailing space highlighting
-	// require('codemirror/addon/edit/trailingspace.js');
-	//Active line highlighting
-	// require('codemirror/addon/selection/active-line.js');
-	//Scroll past last line
-	require('codemirror/addon/scroll/scrollpastend.js');
-	//Auto-closing
-	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
-	require('codemirror/addon/fold/xml-fold.js');
-	require('codemirror/addon/edit/closetag.js');
-
-	const foldCode = require('./helpers/fold-code');
-	foldCode.registerHomebreweryHelper(CodeMirror);
-}
+const CodeMirror = require('./code-mirror.js');

 const themeWidgets = require('../../../themes/V3/5ePHB/widgets');

@@ -62,7 +27,7 @@ const CodeEditor = createClass({
 		return {
 			docs        : {},
 			widgetUtils : {},
-			widgets     : [],
+			widgets     : {},
 			hints       : [],
 			hintsField  : undefined,
 		};
@@ -182,7 +147,7 @@ const CodeEditor = createClass({
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);

 		this.setState({
-			widgetUtils : require('./helpers/widgets')(CodeMirror, themeWidgets, this.codeMirror, (hints, field)=>{
+			widgetUtils : require('./helpers/widgets')(themeWidgets, this.codeMirror, (hints, field)=>{
 				this.setState({
 					hints,
 					hintsField : field
@@ -196,6 +161,26 @@ const CodeEditor = createClass({
 			this.state.widgetUtils.updateWidgetGutter();
 		});

+		this.codeMirror.on('cursorActivity', (cm)=>{
+			const { line } = cm.getCursor();
+			for (const key in this.state.widgets) {
+				if(key != line) {
+					this.state.widgets[key]?.clear();
+				}
+			}
+			const { widgets } = this.codeMirror.lineInfo(line);
+			if(!widgets) {
+				const widget = this.state.widgetUtils.updateLineWidgets(line);
+				if(widget) {
+					this.setState({
+						widgets : {
+							[line] : widget
+						}
+					});
+				}
+			}
+		});
+
 		this.updateSize();

 		this.codeMirror.on('gutterClick', (cm, n)=>{
@@ -206,9 +191,13 @@ const CodeEditor = createClass({
 					const widget = this.state.widgetUtils.updateLineWidgets(n);
 					if(widget) {
 						this.setState({
-							widgets : [...this.state.widgets, widget]
+							widgets : { ...this.state.widgets, [n]: widget }
 						});
 					}
+				} else {
+					for (const widget of widgets) {
+						widget.clear();
+					}
 				}
 			}
 		});
@@ -443,17 +432,6 @@ const CodeEditor = createClass({
 			}
 		};
 	},
-	handleMouseDown : function(e) {
-		// Close open widgets if click outside of a widget
-		if(!e.target.matches('.CodeMirror-linewidget *')) {
-			for (const widget of this.state.widgets) {
-				widget.clear();
-			}
-			this.setState({
-				widgets : []
-			});
-		}
-	},
 	keyDown : function(e) {
 		if(this.hintsRef.current) {
 			this.hintsRef.current.keyDown(e);
@@ -464,7 +442,7 @@ const CodeEditor = createClass({
 	render : function(){
 		const { hints, hintsField } = this.state;
 		return <React.Fragment>
-			<div className='codeEditor' ref='editor' style={this.props.style} onMouseDown={this.handleMouseDown} onKeyDown={this.keyDown}/>
+			<div className='codeEditor' ref='editor' style={this.props.style} onKeyDown={this.keyDown}/>
 			<Hints ref={this.hintsRef} hints={hints} field={hintsField}/>
 		</React.Fragment>;
 	}
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx
@@ -0,0 +1,43 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+require('./checkbox.less');
+const CodeMirror = require('../../../code-mirror.js');
+
+const Checkbox = createClass({
+	getDefaultProps : function() {
+		return {
+			value  : '',
+			prefix : '',
+			cm     : {},
+			n      : -1
+		};
+	},
+
+	handleChange : function (e) {
+		const { cm, n, value, prefix } = this.props;
+		const { text } = cm.lineInfo(n);
+		const updatedPrefix = `{{${prefix}`;
+		if(e.target?.checked)
+			cm.replaceRange(`,${value}`, CodeMirror.Pos(n, updatedPrefix.length), CodeMirror.Pos(n, updatedPrefix.length), '+insert');
+		else {
+			const start = text.indexOf(`,${value}`);
+			if(start > -1)
+				cm.replaceRange('', CodeMirror.Pos(n, start), CodeMirror.Pos(n, start + value.length + 1), '-delete');
+		}
+	},
+
+	render : function() {
+		const { cm, n, value, prefix } = this.props;
+		const { text } = cm.lineInfo(n);
+		const id = [prefix, value, n].join('-');
+		return <React.Fragment>
+			<div className='widget-checkbox'>
+				<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
+				<label htmlFor={id}>{_.startCase(value)}</label>
+			</div>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Checkbox;
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.less
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.less
@@ -0,0 +1,7 @@
+.widget-checkbox {
+  display: inline-block;
+  flex: 0 0 auto;
+  background-color: #ddd;
+  border-radius: 10px;
+  padding: 4px 2px;
+}
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js
@@ -5,26 +5,27 @@ export const HINT_TYPE = {
 	NUMBER_SUFFIX : 1
 };

-export const WIDGET_TYPE = {
-	SNIPPET        : 0,
-	INLINE_SNIPPET : 1,
-	IMAGE          : 2,
+export const SNIPPET_TYPE = {
+	BLOCK    : 0,
+	INLINE   : 1,
+	INJECTOR : 2,
 };

 export const FIELD_TYPE = {
-	STYLE : 0
+	TEXT     : 0,
+	CHECKBOX : 1
 };

 export const PATTERNS = {
-	widget : {
-		[WIDGET_TYPE.SNIPPET]        : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`),
-		[WIDGET_TYPE.INLINE_SNIPPET] : (name)=>new RegExp(`{{${name}`),
-		[WIDGET_TYPE.IMAGE]          : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`),
+	snippet : {
+		[SNIPPET_TYPE.BLOCK]    : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`),
+		[SNIPPET_TYPE.INLINE]   : (name)=>new RegExp(`{{${name}`),
+		[SNIPPET_TYPE.INJECTOR] : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`),
 	},
 	field : {
-		[FIELD_TYPE.STYLE] : (name)=>new RegExp(`[{,;](${name}):("[^},;"]*"|[^},;]*)`),
+		[FIELD_TYPE.TEXT] : (name)=>new RegExp(`[{,;](${name}):([^};,"\\(]*\\((?!,)[^};"\\)]*\\)|"[^},;"]*"|[^},;]*)`),
 	},
-	collectStyles : new RegExp(`(?:([a-zA-Z-]+):)+`, 'g'),
+	collectStyles : new RegExp(`(?:([a-zA-Z-]+):(?!\\/))+`, 'g'),
 };

 export const NUMBER_PATTERN = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})?(.*)`);
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx
@@ -1,7 +1,5 @@
 const React = require('react');
-const ReactDOM = require('react-dom');
 const createClass = require('create-react-class');
-const _ = require('lodash');
 const { NUMBER_PATTERN } = require('../constants');

 const Hints = createClass({
@@ -42,24 +40,23 @@ const Hints = createClass({
 		}
 	},

-	componentDidMount : function() {
-	},
+	componentDidMount : function() {},

 	keyDown : function(e) {
 		const { code } = e;
 		const { activeHint } = this.state;
 		const { hints, field } = this.props;
-		const match = field.state.value.match(NUMBER_PATTERN);
+		const match = field?.state?.value?.match(NUMBER_PATTERN);
 		if(code === 'ArrowDown') {
 			e.preventDefault();
-			if(!match) {
+			if(!match || !match?.at(3)) {
 				this.setState({
 					activeHint : activeHint === hints.length - 1 ? 0 : activeHint + 1
 				});
 			}
 		} else if(code === 'ArrowUp') {
 			e.preventDefault();
-			if(!match) {
+			if(!match || !match?.at(3)) {
 				this.setState({
 					activeHint : activeHint === 0 ? hints.length - 1 : activeHint - 1
 				});
@@ -79,7 +76,8 @@ const Hints = createClass({
 		const { activeHint } = this.state;
 		const { hints, field } = this.props;
 		if(!field) return null;
-		const bounds = field.fieldRef[field.state.id].current?.getBoundingClientRect();
+		const bounds = field.fieldRef[field.state.id]?.current?.getBoundingClientRect();
+		if(!bounds) return null;

 		const hintElements = hints
 			.filter((h)=>h.hint !== field.state.value)
@@ -88,6 +86,7 @@ const Hints = createClass({
 				if(activeHint === i) {
 					className += ' CodeMirror-hint-active';
 					return <li key={i}
+						role={'option'}
 						className={className}
 						onMouseDown={(e)=>field.hintSelected(h, e)}
 						ref={this.activeHintRef}>
@@ -95,6 +94,7 @@ const Hints = createClass({
 					</li>;
 				}
 				return <li key={i}
+					role={'option'}
 					className={className}
 					onMouseDown={(e)=>field.hintSelected(h, e)}>
 					{h.hint}
@@ -104,7 +104,7 @@ const Hints = createClass({
 		let style = {
 			display : 'none'
 		};
-		if(hintElements.length > 1) {
+		if(hintElements.length > 0) {
 			style = {
 				...style,
 				display : 'block',
@@ -118,7 +118,6 @@ const Hints = createClass({
 				aria-expanded={true}
 				className={'CodeMirror-hints default'}
 				style={style}
-				onKeyDown={this.keyDown}
 				ref={this.hintsRef}>
 				{hintElements}
 			</ul>
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/index.js
@@ -1,119 +1,7 @@
-const React = require('react');
-const _ = require('lodash');
-const Field = require('./field/field.jsx');
-const { PATTERNS, UNITS, HINT_TYPE } = require('./constants');
+const Text = require('./text/text.jsx');
+const Checkbox = require('./checkbox/checkbox.jsx');

-// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
-const pseudoClasses = { 'active'           : 1, 'after'            : 1, 'before'           : 1, 'checked'          : 1, 'default'          : 1,
-	'disabled'         : 1, 'empty'            : 1, 'enabled'          : 1, 'first-child'      : 1, 'first-letter'     : 1,
-	'first-line'       : 1, 'first-of-type'    : 1, 'focus'            : 1, 'hover'            : 1, 'in-range'         : 1,
-	'indeterminate'    : 1, 'invalid'          : 1, 'lang'             : 1, 'last-child'       : 1, 'last-of-type'     : 1,
-	'link'             : 1, 'not'              : 1, 'nth-child'        : 1, 'nth-last-child'   : 1, 'nth-last-of-type' : 1,
-	'nth-of-type'      : 1, 'only-of-type'     : 1, 'only-child'       : 1, 'optional'         : 1, 'out-of-range'     : 1,
-	'placeholder'      : 1, 'read-only'        : 1, 'read-write'       : 1, 'required'         : 1, 'root'             : 1,
-	'selection'        : 1, 'target'           : 1, 'valid'            : 1, 'visited'          : 1
-};
-
-module.exports = function(CodeMirror, setHints) {
-	const spec = CodeMirror.resolveMode('text/css');
-	const headless = CodeMirror(()=>{});
-
-	const makeTempCSSDoc = (value)=>CodeMirror.Doc(`.selector {\n${value}\n}`, 'text/css');
-
-	// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
-	const getStyleHints = (field, value)=>{
-		const tempDoc = makeTempCSSDoc(`${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
-		headless.swapDoc(tempDoc);
-		const pos = CodeMirror.Pos(1, field.name.length + 1 + (value?.length ?? 0), false);
-		const token = headless.getTokenAt(pos);
-		const inner = CodeMirror.innerMode(tempDoc.getMode(), token?.state);
-
-		if(inner.mode.name !== 'css') return;
-
-		if(token.type === 'keyword' && '!important'.indexOf(token.string) === 0)
-			return { list : ['!important'], from : CodeMirror.Pos(pos.line, token.start),
-				to   : CodeMirror.Pos(pos.line, token.end) };
-
-		let start = token.start, end = pos.ch, word = token.string.slice(0, end - start);
-		if(/[^\w$_-]/.test(word)) {
-			word = ''; start = end = pos.ch;
-		}
-
-		let result = [];
-		const add = (keywords)=>{
-			for (const name in keywords)
-				if(!word || name.lastIndexOf(word, 0) === 0)
-					result.push(name);
-		};
-
-		const st = inner.state.state;
-		if(st === 'pseudo' || token.type === 'variable-3') {
-			add(pseudoClasses);
-		} else if(st === 'block' || st === 'maybeprop') {
-			add(spec.propertyKeywords);
-		} else if(st === 'prop' || st === 'parens' || st === 'at' || st === 'params') {
-			add(spec.valueKeywords);
-			add(spec.colorKeywords);
-		} else if(st === 'media' || st === 'media_parens') {
-			add(spec.mediaTypes);
-			add(spec.mediaFeatures);
-		}
-		result = result.map((h)=>({ hint: h, type: HINT_TYPE.VALUE }))
-			.filter((h)=>CSS.supports(field.name, h.hint));
-
-		const numberSuffix = word.slice(-4).replaceAll(/\d/g, '');
-		if(token.type === 'number' && !UNITS.includes(numberSuffix)) {
-			result.push(...UNITS
-				.filter((u)=>u.includes(numberSuffix) && CSS.supports(field.name, `${value.replaceAll(/\D/g, '') ?? ''}${u}`))
-				.map((u)=>({ hint: u, type: HINT_TYPE.NUMBER_SUFFIX }))
-			);
-		}
-
-		return result;
-	};
-
-	return {
-		// checkbox widget
-		cClass : function(cm, n, prefix, cClass) {
-			const { text } = cm.lineInfo(n);
-			const id = _.kebabCase(prefix + '-' + cClass + '-' + n);
-			prefix = `{{${prefix}`;
-			const handleChange = (e)=>{
-				if(e.target?.checked)
-					cm.replaceRange(`,${cClass}`, CodeMirror.Pos(n, prefix.length), CodeMirror.Pos(n, prefix.length), '+insert');
-				else {
-					const start = text.indexOf(`,${cClass}`);
-					if(start > -1)
-						cm.replaceRange('', CodeMirror.Pos(n, start), CodeMirror.Pos(n, start + cClass.length + 1), '-delete');
-					else
-						e.target.checked = true;
-				}
-			};
-			return <React.Fragment key={id}>
-				<input type='checkbox' id={id} onChange={handleChange} checked={_.includes(text, `,${cClass}`)}/>
-				<label htmlFor={id}>{_.startCase(cClass)}</label>
-			</React.Fragment>;
-		},
-		field : function(cm, n, field) {
-			const { text } = cm.lineInfo(n);
-			const pattern = PATTERNS.field[field.type](field.name);
-			const [_, __, value] = text.match(pattern) ?? [];
-
-			const inputChange = (e)=>{
-				const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
-				let index = text.indexOf(`${label}:${current}`);
-				let value = e.target.value;
-				if(index === -1) {
-					index = text.length;
-					value = `,${field.name}:${value}`;
-				} else {
-					index = index + 1 + field.name.length;
-				}
-				cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
-			};
-			return <React.Fragment key={`${field.name}-${n}`}>
-				<Field field={field} value={value} n={n} onChange={inputChange} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>
-			</React.Fragment>;
-		}
-	};
+module.exports = {
+	Text     : Text,
+	Checkbox : Checkbox,
 };
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.jsx
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.jsx
@@ -0,0 +1,161 @@
+require('./text.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const { NUMBER_PATTERN, HINT_TYPE, PATTERNS } = require('../constants');
+const CodeMirror = require('../../../code-mirror.js');
+
+const DEFAULT_WIDTH = '30px';
+
+const STYLE_FN = (value)=>({
+	width : `calc(${value?.length ?? 0}ch + ${value?.length ? `${DEFAULT_WIDTH} / 2` : DEFAULT_WIDTH})`
+});
+
+const Text = createClass({
+	fieldRef : {},
+
+	getDefaultProps : function() {
+		return {
+			field         : {},
+			text          : '',
+			n             : 0,
+			setHints      : ()=>{},
+			onChange      : ()=>{},
+			getStyleHints : ()=>{}
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			value : '',
+			style : STYLE_FN(),
+			id    : ''
+		};
+	},
+
+	componentDidUpdate : function({ text }, { value }) {
+		if(this.props.text !== text) {
+			const { field, n } = this.props;
+			const pattern = PATTERNS.field[field.type](field.name);
+			const [_, __, value] = this.props.text.match(pattern) ?? [];
+			this.setState({
+				value : value,
+				style : STYLE_FN(value),
+				id    : `${field?.name}-${n}`
+			});
+		}
+
+		if(this.state.value !== value) {
+			const { field } = this.props;
+			this.props.setHints(this, this.props.getStyleHints(field, field.hints ? this.state.value : []));
+		}
+	},
+
+	componentDidMount : function() {
+		const { field, text, n } = this.props;
+		const id = `${field?.name}-${n}`;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, __, value] = text.match(pattern) ?? [];
+		this.setState({
+			value : value,
+			style : STYLE_FN(value),
+			id
+		});
+		this.fieldRef[id] = React.createRef();
+	},
+
+	componentWillUnmount : function() {
+		this.fieldRef = undefined;
+		this.fieldRef = {};
+		this.fieldRef[this.state.id]?.remove();
+	},
+
+	setFocus : function(e) {
+		const { type } = e;
+		const { field } = this.props;
+		this.props.setHints(this, type === 'focus' && field.hints ? this.props.getStyleHints(field, this.state.value) : []);
+	},
+
+	hintSelected : function(h, e) {
+		let value;
+		if(h.type === HINT_TYPE.VALUE) {
+			value = h.hint;
+		} else if(h.type === HINT_TYPE.NUMBER_SUFFIX) {
+			const match = this.state.value.match(NUMBER_PATTERN);
+			let suffix = match?.at(4) ?? '';
+			for (const char of h.hint) {
+				if(suffix.at(0) === char) {
+					suffix = suffix.slice(1);
+				}
+			}
+			value = `${match?.at(1) ?? ''}${match?.at(2) ?? ''}${h.hint}${suffix}`;
+		}
+		this.onChange({
+			target : {
+				value
+			}
+		});
+	},
+	keyDown : function(e) {
+		const { code } = e;
+		const { field } = this.props;
+		const { value } = this.state;
+		const match = value?.match(NUMBER_PATTERN);
+		if(code === 'ArrowDown') {
+			if(match && match[3] && CSS.supports(field.name, value)) {
+				e.preventDefault();
+				this.onChange({
+					target : {
+						value : `${match.at(1) ?? ''}${Number(match[2]) - field.increment}${match[3]}${match.at(4) ?? ''}`
+					}
+				});
+			}
+		} else if(code === 'ArrowUp') {
+			if(match && match[3] && CSS.supports(field.name, value)) {
+				e.preventDefault();
+				this.onChange({
+					target : {
+						value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3]}${match.at(4) ?? ''}`
+					}
+				});
+			}
+		}
+	},
+	onChange : function (e){
+		const { cm, text, field, n } = this.props;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
+		let index = text.indexOf(`${label}:${current}`);
+		let value = e.target.value;
+		if(index === -1) {
+			index = text.length;
+			value = `,${field.name}:${value}`;
+		} else {
+			index = index + 1 + field.name.length;
+		}
+		cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
+		this.setState({
+			value : e.target.value,
+			style : STYLE_FN(e.target.value)
+		});
+	},
+	render : function() {
+		const { value, id, style } = this.state;
+		const { field } = this.props;
+
+		return <React.Fragment>
+			<div className='widget-field'>
+				<label htmlFor={id}>{field.name}:</label>
+				<input id={id} type='text' value={value}
+					   style={style}
+					   ref={this.fieldRef[id]}
+					   onChange={this.onChange}
+					   onFocus={this.setFocus}
+					   onBlur={this.setFocus}
+					   onKeyDown={this.keyDown}/>
+			</div>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Text;
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.less
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.less
@@ -0,0 +1,37 @@
+.widget-field {
+  display: inline-block;
+  flex: 0 0 auto;
+  background-color: #ddd;
+  border-radius: 10px;
+  padding: 4px 2px;
+
+  >label {
+    display: inline;
+    width: 50px;
+    margin: 0 0;
+  }
+
+  >input {
+    background-color: #ddd;
+    border: none;
+  }
+
+  >.hints {
+    position: relative;
+    left: 30px;
+    max-height: 100px;
+    overflow-y: scroll;
+    background-color: white;
+
+    >.hint {
+      margin: 0 0;
+      padding: 2px;
+      cursor: default;
+
+      &:hover,
+      &.active {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}
--- a/shared/naturalcrit/codeEditor/helpers/widgets.js
+++ b/shared/naturalcrit/codeEditor/helpers/widgets.js
@@ -1,38 +1,111 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
-const { PATTERNS, FIELD_TYPE } = require('./widget-elements/constants');
+const { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants');
 require('./widget-elements/hints/hints.jsx');
+const { Text, Checkbox } = require('./widget-elements');
+const CodeMirror = require('../code-mirror.js');

-module.exports = function(CodeMirror, widgets, cm, setHints) {
-	const hintsEl = document.createElement('ul');
-	hintsEl.id = 'hints';
-	hintsEl.role = 'listbox';
-	hintsEl.ariaExpanded = 'true';
-	hintsEl.className = 'CodeMirror-hints default';
-	hintsEl.style = 'display: none;';
-	document.body.append(hintsEl);
+// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
+const pseudoClasses = { 'active'           : 1, 'after'            : 1, 'before'           : 1, 'checked'          : 1, 'default'          : 1,
+	'disabled'         : 1, 'empty'            : 1, 'enabled'          : 1, 'first-child'      : 1, 'first-letter'     : 1,
+	'first-line'       : 1, 'first-of-type'    : 1, 'focus'            : 1, 'hover'            : 1, 'in-range'         : 1,
+	'indeterminate'    : 1, 'invalid'          : 1, 'lang'             : 1, 'last-child'       : 1, 'last-of-type'     : 1,
+	'link'             : 1, 'not'              : 1, 'nth-child'        : 1, 'nth-last-child'   : 1, 'nth-last-of-type' : 1,
+	'nth-of-type'      : 1, 'only-of-type'     : 1, 'only-child'       : 1, 'optional'         : 1, 'out-of-range'     : 1,
+	'placeholder'      : 1, 'read-only'        : 1, 'read-write'       : 1, 'required'         : 1, 'root'             : 1,
+	'selection'        : 1, 'target'           : 1, 'valid'            : 1, 'visited'          : 1
+};
+
+const genKey = (...args)=>args.join('-');
+
+module.exports = function(widgets, cm, setHints) {
+	const spec = CodeMirror.resolveMode('text/css');
+	const headless = CodeMirror(()=>{});
+
+	const makeTempCSSDoc = (value)=>CodeMirror.Doc(`.selector {\n${value}\n}`, 'text/css');
+
+	// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
+	const getStyleHints = (field, value)=>{
+		const tempDoc = makeTempCSSDoc(`${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
+		headless.swapDoc(tempDoc);
+		const pos = CodeMirror.Pos(1, field.name.length + 1 + (value?.length ?? 0), false);
+		const token = headless.getTokenAt(pos);
+		const inner = CodeMirror.innerMode(tempDoc.getMode(), token?.state);
+
+		if(inner.mode.name !== 'css') return;
+
+		if(token.type === 'keyword' && '!important'.indexOf(token.string) === 0)
+			return { list : ['!important'], from : CodeMirror.Pos(pos.line, token.start),
+				to   : CodeMirror.Pos(pos.line, token.end) };
+
+		let start = token.start, end = pos.ch, word = token.string.slice(0, end - start);
+		if(/[^\w$_-]/.test(word)) {
+			word = ''; start = end = pos.ch;
+		}
+
+		let result = [];
+		const add = (keywords)=>{
+			for (const name in keywords)
+				if(!word || name.lastIndexOf(word, 0) === 0)
+					result.push(name);
+		};
+
+		const st = inner.state.state;
+		if(st === 'pseudo' || token.type === 'variable-3') {
+			add(pseudoClasses);
+		} else if(st === 'block' || st === 'maybeprop') {
+			add(spec.propertyKeywords);
+		} else if(st === 'prop' || st === 'parens' || st === 'at' || st === 'params') {
+			add(spec.valueKeywords);
+			add(spec.colorKeywords);
+		} else if(st === 'media' || st === 'media_parens') {
+			add(spec.mediaTypes);
+			add(spec.mediaFeatures);
+		}
+		result = result.map((h)=>({ hint: h, type: HINT_TYPE.VALUE }))
+			.filter((h)=>CSS.supports(field.name, h.hint) && h.hint.includes(value ?? ''));
+
+		const numberSuffix = word.slice(-4).replaceAll(/\d/g, '');
+		if(token.type === 'number' && !UNITS.includes(numberSuffix)) {
+			result.push(...UNITS
+				.filter((u)=>u.includes(numberSuffix) && CSS.supports(field.name, `${value.replaceAll(/\D/g, '') ?? ''}${u}`))
+				.map((u)=>({ hint: u, type: HINT_TYPE.NUMBER_SUFFIX }))
+			);
+		}
+
+		return result;
+	};

-	const { cClass, field } = require('./widget-elements')(CodeMirror, setHints);
 	const widgetOptions = widgets.map((widget)=>({
 		name         : widget.name,
-		pattern      : PATTERNS.widget[widget.type](widget.name),
-		createWidget : (n, node)=>{
+		pattern      : PATTERNS.snippet[widget.type](widget.name),
+		renderWidget : (n, node)=>{
 			const parent = document.createElement('div');
-			const classes = (widget.classes || []).map((c, i)=>cClass(cm, n, `${widget.name}`, c));
-			const fieldNames = (widget.fields || []).map((f)=>f.name);
-			const fields = (widget.fields || []).map((f, i)=>field(cm, n, f)).filter((f)=>!!f);
+			const textFieldNames = (widget.fields || []).filter((f)=>f.type === FIELD_TYPE.TEXT).map((f)=>f.name);
 			const { text } = cm.lineInfo(n);
+
+			const fields = (widget.fields || []).map((field)=>{
+				if(field.type === FIELD_TYPE.CHECKBOX) {
+					return <Checkbox key={genKey(widget.name, n, field.name)} cm={cm} CodeMirror={CodeMirror} n={n} prefix={widget.name} value={field.name}/>;
+				} else if(field.type === FIELD_TYPE.TEXT) {
+					return <Text key={genKey(widget.name, n, field.name)} cm={cm} CodeMirror={CodeMirror} field={field} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>;
+				} else {
+					return null;
+				}
+			}).filter(Boolean);
+
 			const styles = [...text.matchAll(PATTERNS.collectStyles)].map(([_, style])=>{
-				if(fieldNames.includes(style)) return false;
-				return field(cm, n, {
+				if(textFieldNames.includes(style)) return false;
+				const field = {
 					name      : style,
-					type      : FIELD_TYPE.STYLE,
-					increment : 5
-				});
-			}).filter((s)=>!!s);
+					type      : FIELD_TYPE.TEXT,
+					increment : 5,
+					hints     : true,
+				};
+				return <Text key={genKey(widget.name, n, style)} cm={cm} CodeMirror={CodeMirror} field={field} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>;
+			}).filter(Boolean);

 			ReactDOM.render(<React.Fragment>
-				{classes}
 				{fields}
 				{styles}
 			</React.Fragment>, node || parent);
@@ -41,16 +114,16 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
 		}
 	}));

-	const updateLineWidgets = (n, remove)=>{
+	const updateLineWidgets = (n)=>{
 		const { text, widgets } =  cm.lineInfo(n);
 		const widgetOption = widgetOptions.find((option)=>!!text.match(option.pattern));
 		if(!widgetOption) return;
 		if(!!widgets) {
 			for (const widget of widgets) {
-				widgetOption.createWidget(n, widget.node);
+				widgetOption.renderWidget(n, widget.node);
 			}
 		} else {
-			return cm.addLineWidget(n, widgetOption.createWidget(n), {
+			return cm.addLineWidget(n, widgetOption.renderWidget(n), {
 				above       : false,
 				coverGutter : false,
 				noHScroll   : true,
@@ -60,7 +133,7 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
 	};

 	return {
-		removeLineWidgets : (widget)=>{
+		removeLineWidget : (widget)=>{
 			cm.removeLineWidget(widget);
 		},
 		updateLineWidgets,
@@ -75,9 +148,12 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
 		updateWidgetGutter : ()=>{
 			cm.operation(()=>{
 				for (let i = 0; i < cm.lineCount(); i++) {
-					const line = cm.getLine(i);
+					const { text, widgets } = cm.lineInfo(i);

-					if(widgetOptions.some((option)=>line.match(option.pattern))) {
+					if(widgetOptions.some((option)=>text.match(option.pattern))) {
+						if(widgets) {
+							continue;
+						}
 						const optionsMarker = document.createElement('div');
 						optionsMarker.style.color = '#822';
 						optionsMarker.style.cursor = 'pointer';
--- a/shared/naturalcrit/markdown.js
+++ b/shared/naturalcrit/markdown.js
@@ -313,12 +313,6 @@ const escape = function (html, encode) {
 	return html;
 };

-const sanatizeScriptTags = (content)=>{
-	return content
-		.replace(/<script/ig, '&lt;script')
-		.replace(/<\/script>/ig, '&lt;/script&gt;');
-};
-
 const tagTypes = ['div', 'span', 'a'];
 const tagRegex = new RegExp(`(${
 	_.map(tagTypes, (type)=>{
@@ -349,7 +343,7 @@ module.exports = {
 	render : (rawBrewText)=>{
 		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
 														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
-		return Marked.parse(sanatizeScriptTags(rawBrewText));
+		return Marked.parse(rawBrewText);
 	},

 	validate : (rawBrewText)=>{
--- a/shared/naturalcrit/markdownLegacy.js
+++ b/shared/naturalcrit/markdownLegacy.js
@@ -90,12 +90,6 @@ const escape = function (html, encode) {
 	return html;
 };

-const sanatizeScriptTags = (content)=>{
-	return content
-		.replace(/<script/ig, '&lt;script')
-		.replace(/<\/script>/ig, '&lt;/script&gt;');
-};
-
 const tagTypes = ['div', 'span', 'a'];
 const tagRegex = new RegExp(`(${
 	_.map(tagTypes, (type)=>{
@@ -113,7 +107,7 @@ module.exports = {
 	marked : Markdown,
 	render : (rawBrewText)=>{
 		return Markdown(
-			sanatizeScriptTags(rawBrewText),
+			rawBrewText,
 			{ renderer: renderer }
 		);
 	},
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -1,5 +1,6 @@
 require('./nav.less');
 const React = require('react');
+const { useState, useRef, useEffect } = React;
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
@@ -71,64 +72,49 @@ const Nav = {
 		}
 	}),

-	dropdown : createClass({
-		displayName     : 'Nav.dropdown',
-		getDefaultProps : function() {
-			return {
-				trigger : 'hover'
-			};
-		},
-		getInitialState : function() {
-			return {
-				showDropdown : false
-			};
-		},
-		componentDidMount : function() {
-			if(this.props.trigger == 'click')
-				document.addEventListener('click', this.handleClickOutside);
-		},
-		componentWillUnmount : function() {
-			if(this.props.trigger == 'click')
-				document.removeEventListener('click', this.handleClickOutside);
-		},
-		handleClickOutside : function(e){
-			// Close dropdown when clicked outside
-			if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
-				this.handleDropdown(false);
-			}
-		},
-		handleDropdown : function(show){
-			this.setState({
-				showDropdown : show
+	dropdown : function dropdown(props) {
+		props = Object.assign({}, props, {
+			trigger : 'hover click'
 		});
-		},
-		renderDropdown : function(dropdownChildren){
-			if(!this.state.showDropdown) return null;

-			return (
-				<div className='navDropdown'>
-					{dropdownChildren}
-				</div>
-			);
-		},
-		render : function () {
-			const dropdownChildren = React.Children.map(this.props.children, (child, i)=>{
-				// Ignore the first child
+		const myRef = useRef(null);
+		const [showDropdown, setShowDropdown] = useState(false);
+
+		useEffect(()=>{
+			document.addEventListener('click', handleClickOutside);
+			return ()=>{
+				document.removeEventListener('click', handleClickOutside);
+			};
+		}, []);
+
+		function handleClickOutside(e) {
+			// Close dropdown when clicked outside
+			if(!myRef.current?.contains(e.target)) {
+				handleDropdown(false);
+			}
+		}
+
+		function handleDropdown(show) {
+			setShowDropdown(show ?? !showDropdown);
+		}
+
+		const dropdownChildren = React.Children.map(props.children, (child, i)=>{
 			if(i < 1) return;
 			return child;
 		});
+
 		return (
-				<div className={`navDropdownContainer ${this.props.className}`}
-					ref='dropdown'
-					onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
-					onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
-					onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}>
-					{this.props.children[0] || this.props.children /*children is not an array when only one child*/}
-					{this.renderDropdown(dropdownChildren)}
+			<div className={`navDropdownContainer ${props.className}`}
+				ref={myRef}
+				onMouseEnter = { props.trigger.includes('hover') ? ()=>handleDropdown(true)  : undefined }
+				onMouseLeave = { props.trigger.includes('hover') ? ()=>handleDropdown(false) : undefined }
+				onClick      = { props.trigger.includes('click') ? ()=>handleDropdown(true)  : undefined }
+			>
+				{props.children[0] || props.children /*children is not an array when only one child*/}
+				{showDropdown && <div className='navDropdown'>{dropdownChildren}</div>}
 			</div>
 		);
 	}
-	})

 };

--- a/shared/naturalcrit/nav/nav.less
+++ b/shared/naturalcrit/nav/nav.less
@@ -79,6 +79,8 @@ nav{
 			left     : 0px;
 			z-index  : 10000;
 			width    : 100%;
+			overflow : hidden auto;
+			max-height : calc(100vh - 28px);
 			.navItem{
 				animation-name: glideDropDown;
 				animation-duration: 0.4s;
--- a/tests/markdown/basic.test.js
+++ b/tests/markdown/basic.test.js
@@ -2,12 +2,6 @@

 const Markdown = require('naturalcrit/markdown.js');

-test('Escapes <script> tag', function() {
-	const source = '<script></script>';
-	const rendered = Markdown.render(source);
-	expect(rendered).toMatch('<p>&lt;script>&lt;/script&gt;</p>\n');
-});
-
 test('Processes the markdown within an HTML block if its just a class wrapper', function() {
 	const source = '<div>*Bold text*</div>';
 	const rendered = Markdown.render(source);
--- a/themes/Legacy/5ePHB/snippets/tableOfContents.gen.js
+++ b/themes/Legacy/5ePHB/snippets/tableOfContents.gen.js
@@ -47,8 +47,8 @@ const getTOC = (pages)=>{
 	return res;
 };

-module.exports = function(brew){
-	const pages = brew.text.split('\\page');
+module.exports = function(props){
+	const pages = props.brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);
--- a/themes/V3/5ePHB/snippets.js
+++ b/themes/V3/5ePHB/snippets.js
@@ -19,16 +19,6 @@ module.exports = [
 		icon      : 'fas fa-pencil-alt',
 		view      : 'text',
 		snippets  : [
-			{
-				name : 'Page Number',
-				icon : 'fas fa-bookmark',
-				gen  : '{{pageNumber 1}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
-			},
-			{
-				name : 'Auto-incrementing Page Number',
-				icon : 'fas fa-sort-numeric-down',
-				gen  : '{{pageNumber,auto}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
-			},
 			{
 				name : 'Table of Contents',
 				icon : 'fas fa-book',
--- a/themes/V3/5ePHB/snippets/tableOfContents.gen.js
+++ b/themes/V3/5ePHB/snippets/tableOfContents.gen.js
@@ -48,8 +48,8 @@ const getTOC = (pages)=>{
 	return res;
 };

-module.exports = function(brew){
-	const pages = brew.text.split('\\page');
+module.exports = function(props){
+	const pages = props.brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		if(g1.title !== null) {
--- a/themes/V3/5ePHB/widgets.js
+++ b/themes/V3/5ePHB/widgets.js
@@ -1,24 +1,39 @@
-const { WIDGET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');
+const { SNIPPET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');

 module.exports = [{
 	name   : 'monster',
-	type    : WIDGET_TYPE.SNIPPET,
-	classes : ['frame', 'wide']
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}]
 }, {
 	name   : 'classTable',
-	type    : WIDGET_TYPE.SNIPPET,
-	classes : ['frame', 'decoration', 'wide']
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'decoration',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}]
 }, {
 	name   : 'image',
-	type   : WIDGET_TYPE.IMAGE,
+	type   : SNIPPET_TYPE.INJECTOR,
 	fields : []
 }, {
 	name   : 'artist',
-	type   : WIDGET_TYPE.SNIPPET,
+	type   : SNIPPET_TYPE.BLOCK,
 	fields : [{
 		name      : 'top',
-		type      : FIELD_TYPE.STYLE,
+		type      : FIELD_TYPE.TEXT,
 		increment : 5,
-		lineBreak : true
+		hints     : true
 	}]
 }];
--- a/themes/V3/Blank/snippets.js
+++ b/themes/V3/Blank/snippets.js
@@ -2,6 +2,7 @@

 const WatercolorGen = require('./snippets/watercolor.gen.js');
 const ImageMaskGen  = require('./snippets/imageMask.gen.js');
+const FooterGen     = require('./snippets/footer.gen.js');
 const dedent        = require('dedent-tabs').default;

 module.exports = [
@@ -21,6 +22,53 @@ module.exports = [
 				icon : 'fas fa-file-alt',
 				gen  : '\n\\page\n'
 			},
+			{
+				name : 'Page Number',
+				icon : 'fas fa-bookmark',
+				gen  : '{{pageNumber 1}}\n'
+			},
+			{
+				name : 'Auto-incrementing Page Number',
+				icon : 'fas fa-sort-numeric-down',
+				gen  : '{{pageNumber,auto}}\n'
+			},
+			{
+				name        : 'Footer',
+				icon        : 'fas fa-shoe-prints',
+				gen         : FooterGen.createFooterFunc(),
+				subsnippets : [
+					{
+						name : 'Footer from H1',
+						icon : 'fas fa-dice-one',
+						gen  : FooterGen.createFooterFunc(1)
+					},
+					{
+						name : 'Footer from H2',
+						icon : 'fas fa-dice-two',
+						gen  : FooterGen.createFooterFunc(2)
+					},
+					{
+						name : 'Footer from H3',
+						icon : 'fas fa-dice-three',
+						gen  : FooterGen.createFooterFunc(3)
+					},
+					{
+						name : 'Footer from H4',
+						icon : 'fas fa-dice-four',
+						gen  : FooterGen.createFooterFunc(4)
+					},
+					{
+						name : 'Footer from H5',
+						icon : 'fas fa-dice-five',
+						gen  : FooterGen.createFooterFunc(5)
+					},
+					{
+						name : 'Footer from H6',
+						icon : 'fas fa-dice-six',
+						gen  : FooterGen.createFooterFunc(6)
+					}
+				]
+			},
 			{
 				name : 'Vertical Spacing',
 				icon : 'fas fa-arrows-alt-v',
--- a/themes/V3/Blank/snippets/footer.gen.js
+++ b/themes/V3/Blank/snippets/footer.gen.js
@@ -0,0 +1,17 @@
+const Markdown = require('../../../../shared/naturalcrit/markdown.js');
+
+module.exports = {
+	createFooterFunc : function(headerSize=1){
+		return (props)=>{
+			const cursorPos = props.cursorPos;
+
+			const markdownText = props.brew.text.split('\n').slice(0, cursorPos.line).join('\n');
+			const markdownTokens = Markdown.marked.lexer(markdownText);
+			const headerToken = markdownTokens.findLast((lexerToken)=>{ return lexerToken.type === 'heading' && lexerToken.depth === headerSize; });
+			const headerText = headerToken?.tokens.map((token)=>{ return token.text; }).join('');
+			const outputText = headerText || 'PART 1 | SECTION NAME';
+
+			return `\n{{footnote ${outputText}}}\n`;
+		};
+	}
+};