Merge branch 'master' into catchIDBErrors

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -179,8 +179,8 @@ const BrewRenderer = (props)=>{
 		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${global.config.deployment}</text></svg>")`;
 	}
 
-	const renderedStyle = useMemo(()=> renderStyle(), [props.style?.length, props.themeBundle]);
+	const renderedStyle = useMemo(()=> renderStyle(), [props.style, props.themeBundle]);
-	renderedPages = useMemo(() => renderPages(), [props.text?.length]);
+	renderedPages = useMemo(() => renderPages(), [props.text]);
 
 	return (
 		<>

client/homebrew/editor/editor.less

@@ -2,6 +2,7 @@
 .editor {
 	position : relative;
 	width    : 100%;
+	container: editor / inline-size;
 
 	.codeEditor {
 		height            : 100%;

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -151,17 +151,20 @@ const Snippetbar = createClass({
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
-		return _.map(snippets, (snippetGroup)=>{
+		return <div className='snippets'>
-			return <SnippetGroup
+			{_.map(snippets, (snippetGroup)=>{
-				brew={this.props.brew}
+				return <SnippetGroup
-				groupName={snippetGroup.groupName}
+					brew={this.props.brew}
-				icon={snippetGroup.icon}
+					groupName={snippetGroup.groupName}
-				snippets={snippetGroup.snippets}
+					icon={snippetGroup.icon}
-				key={snippetGroup.groupName}
+					snippets={snippetGroup.snippets}
-				onSnippetClick={this.handleSnippetClick}
+					key={snippetGroup.groupName}
-				cursorPos={this.props.cursorPos}
+					onSnippetClick={this.handleSnippetClick}
-			/>;
+					cursorPos={this.props.cursorPos}
-		});
+				/>;
+			})
+			}
+		</div>;
 	},
 
 	replaceContent : function(item){
@@ -220,40 +223,46 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
-			<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+			<div className='historyTools'>
-				onClick={this.toggleHistoryMenu} >
+				<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
-				<i className='fas fa-clock-rotate-left' />
+					onClick={this.toggleHistoryMenu} >
-				{ this.state.showHistory && this.renderHistoryItems() }
+					<i className='fas fa-clock-rotate-left' />
+					{ this.state.showHistory && this.renderHistoryItems() }
+				</div>
+				<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
+					onClick={this.props.undo} >
+					<i className='fas fa-undo' />
+				</div>
+				<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+					onClick={this.props.redo} >
+					<i className='fas fa-redo' />
+				</div>
 			</div>
-			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
+			<div className='codeTools'>
-				onClick={this.props.undo} >
+				{foldButtons}
-				<i className='fas fa-undo' />
+				<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-			</div>
+					onClick={this.toggleThemeSelector} >
-			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+					<i className='fas fa-palette' />
-				onClick={this.props.redo} >
+					{this.state.themeSelector && this.renderThemeSelector()}
-				<i className='fas fa-redo' />
+				</div>
-			</div>
-			<div className='divider'></div>
-			{foldButtons}
-			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-				onClick={this.toggleThemeSelector} >
-				<i className='fas fa-palette' />
-				{this.state.themeSelector && this.renderThemeSelector()}
 			</div>
 
-			<div className='divider'></div>
+
-			<div className={cx('text', { selected: this.props.view === 'text' })}
+			<div className='tabs'>
-				 onClick={()=>this.props.onViewChange('text')}>
+				<div className={cx('text', { selected: this.props.view === 'text' })}
-				<i className='fa fa-beer' />
+					onClick={()=>this.props.onViewChange('text')}>
-			</div>
+					<i className='fa fa-beer' />
-			<div className={cx('style', { selected: this.props.view === 'style' })}
+				</div>
-				 onClick={()=>this.props.onViewChange('style')}>
+				<div className={cx('style', { selected: this.props.view === 'style' })}
-				<i className='fa fa-paint-brush' />
+					onClick={()=>this.props.onViewChange('style')}>
-			</div>
+					<i className='fa fa-paint-brush' />
-			<div className={cx('meta', { selected: this.props.view === 'meta' })}
+				</div>
-				onClick={()=>this.props.onViewChange('meta')}>
+				<div className={cx('meta', { selected: this.props.view === 'meta' })}
-				<i className='fas fa-info-circle' />
+					onClick={()=>this.props.onViewChange('meta')}>
+					<i className='fas fa-info-circle' />
+				</div>
 			</div>
+
 		</div>;
 	},
 
@@ -291,8 +300,9 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				<span className='name'title={snippet.name}>{snippet.name}</span>
+				<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
 				{snippet.experimental && <span className='beta'>beta</span>}
+				{snippet.disabled     && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>
 					<div className='dropdown side'>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -4,97 +4,108 @@
 .snippetBar {
 	@menuHeight      : 25px;
 	position         : relative;
-	height           : @menuHeight;
+	display          : flex;
+	flex-wrap        : wrap-reverse;
+	justify-content  : space-between;
+	min-width        : 331px;
+	height           : auto;
 	color            : black;
 	background-color : #DDDDDD;
 
+	.snippets {
+		display         : flex;
+		justify-content : space-evenly;
+	}
+
 	.editors {
-		position        : absolute;
-		top             : 0px;
-		right           : 0px;
 		display         : flex;
 		justify-content : space-between;
-		height          : @menuHeight;
+		>div {
-		& > div {
+			display         : flex;
-			width       : @menuHeight;
+			flex            : 1;
-			height      : @menuHeight;
+			justify-content : space-around;
-			line-height : @menuHeight;
+
-			text-align  : center;
+			&:first-child { border-left : none; }
-			cursor      : pointer;
+
-			&:hover,&.selected { background-color : #999999; }
+			& > div {
-			&.text {
+				position    : relative;
-				.tooltipLeft('Brew Editor');
+				width       : @menuHeight;
-			}
+				height      : @menuHeight;
-			&.style {
+				line-height : @menuHeight;
-				.tooltipLeft('Style Editor');
+				text-align  : center;
-			}
+				cursor      : pointer;
-			&.meta {
+				&:hover,&.selected { background-color : #999999; }
-				.tooltipLeft('Properties');
+				&.text {
-			}
+					.tooltipLeft('Brew Editor');
-			&.undo {
-				.tooltipLeft('Undo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active { color : inherit; }
-			}
-			&.redo {
-				.tooltipLeft('Redo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active { color : inherit; }
-			}
-			&.foldAll {
-				.tooltipLeft('Fold All');
-				font-size : 0.75em;
-				color     : inherit;
-			}
-			&.unfoldAll {
-				.tooltipLeft('Unfold All');
-				font-size : 0.75em;
-				color     : inherit;
-			}
-			&.history {
-				.tooltipLeft('History');
-				font-size : 0.75em;
-				color     : grey;
-				position  : relative;
-				&.active {
-					color : inherit;
 				}
-				&>.dropdown{
+				&.style {
-					right         : -1px;
+					.tooltipLeft('Style Editor');
-					&>.snippet{
+				}
-						padding-right : 10px;
+				&.meta {
+					.tooltipLeft('Properties');
+				}
+				&.undo {
+					.tooltipLeft('Undo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.redo {
+					.tooltipLeft('Redo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.foldAll {
+					.tooltipLeft('Fold All');
+					font-size : 0.75em;
+					color     : inherit;
+				}
+				&.unfoldAll {
+					.tooltipLeft('Unfold All');
+					font-size : 0.75em;
+					color     : inherit;
+				}
+				&.history {
+					.tooltipLeft('History');
+					position  : relative;
+					font-size : 0.75em;
+					color     : grey;
+					border    : none;
+					&.active { color : inherit; }
+					& > .dropdown {
+						right : -1px;
+						& > .snippet { padding-right : 10px; }
 					}
 				}
-			}
+				&.editorTheme {
-			&.editorTheme {
+					.tooltipLeft('Editor Themes');
-				.tooltipLeft('Editor Themes');
+					font-size : 0.75em;
-				font-size : 0.75em;
+					color     : black;
-				color     : black;
+					&.active {
-				&.active {
+						position         : relative;
-					position         : relative;
+						background-color : #999999;
-					background-color : #999999;
+					}
+				}
+				&.divider {
+					width      : 5px;
+					background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
+					&:hover { background-color : inherit; }
 				}
 			}
-			&.divider {
+			.themeSelector {
-				width      : 5px;
+				position         : absolute;
-				background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
+				top              : 25px;
-				&:hover { background-color : inherit; }
+				right            : 0;
+				z-index          : 10;
+				display          : flex;
+				align-items      : center;
+				justify-content  : center;
+				width            : 170px;
+				height           : inherit;
+				background-color : inherit;
 			}
-		}
+		}		
-		.themeSelector {
-			position         : absolute;
-			top              : 25px;
-			right            : 0;
-			z-index          : 10;
-			display          : flex;
-			align-items      : center;
-			justify-content  : center;
-			width            : 170px;
-			height           : inherit;
-			background-color : inherit;
-		}
 	}
 	.snippetBarButton {
 		display        : inline-block;
@@ -104,6 +115,7 @@
 		font-weight    : 800;
 		line-height    : @menuHeight;
 		text-transform : uppercase;
+		text-wrap      : nowrap;
 		cursor         : pointer;
 		&:hover, &.selected { background-color : #999999; }
 		i {
@@ -120,7 +132,7 @@
 		.tooltipLeft('Edit Brew Properties');
 	}
 	.snippetGroup {
-		border-right   : 1px solid currentColor;
+
 		&:hover {
 			& > .dropdown { visibility : visible; }
 		}
@@ -142,11 +154,11 @@
 				cursor      : pointer;
 				.animate(background-color);
 				i {
+					min-width    : 25px;
 					height       : 1.2em;
 					margin-right : 8px;
 					font-size    : 1.2em;
-					min-width: 25px;
+					text-align   : center;
-					text-align: center;
 					& ~ i {
 						margin-right : 0;
 						margin-left  : 5px;
@@ -179,6 +191,7 @@
 					}
 				}
 				.name { margin-right : auto; }
+				.disabled { text-decoration : line-through; }
 				.beta {
 					align-self    : center;
 					padding       : 4px 6px;
@@ -204,4 +217,10 @@
 			}
 		}
 	}
-}
+}
+
+@container editor (width < 553px) {
+	.editors,.snippets { flex : 1; }
+	.editors { border-bottom : 1px solid;}
+	.snippetBar .editors > div.history > .dropdown { right : unset; }
+}

package-lock.json

@@ -39,7 +39,7 @@
         "marked-smartypants-lite": "^1.0.2",
         "markedLegacy": "npm:marked@^0.3.19",
         "moment": "^2.30.1",
-        "mongoose": "^8.7.1",
+        "mongoose": "^8.7.2",
         "nanoid": "3.3.4",
         "nconf": "^0.12.1",
         "react": "^18.3.1",
@@ -10661,9 +10661,9 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "8.7.1",
+      "version": "8.7.2",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.7.2.tgz",
-      "integrity": "sha512-RpNMyhyzLVCVbf8xTVbrf/18G3MqQzNw5pJdvOJ60fzbCa3cOZzz9L+8XpqzBXtRlgZGWv0T7MmOtvrT8ocp1Q==",
+      "integrity": "sha512-Ok4VzMds9p5G3ZSUhmvBm1GdxanbzhS29jpSn02SPj+IXEVFnIdfwAlHHXWkyNscZKlcn8GuMi68FH++jo0flg==",
       "dependencies": {
         "bson": "^6.7.0",
         "kareem": "2.6.3",

package.json

@@ -115,7 +115,7 @@
     "marked-smartypants-lite": "^1.0.2",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.7.1",
+    "mongoose": "^8.7.2",
     "nanoid": "3.3.4",
     "nconf": "^0.12.1",
     "react": "^18.3.1",

themes/V3/5ePHB/snippets.js

@@ -154,28 +154,6 @@ module.exports = [
 						]
 					},
 
-					{
-						name        : 'Table of Contents Toggles',
-						icon        : 'fas fa-book',
-						gen         : `{{tocGlobalH4}}\n\n`,
-						subsnippets : [
-							{
-								name : 'Enable H1-H4 all pages',
-								icon : 'fas fa-dice-four',
-								gen  : `{{tocGlobalH4}}\n\n`,
-							},
-							{
-								name : 'Enable H1-H5 all pages',
-								icon : 'fas fa-dice-five',
-								gen  : `{{tocGlobalH5}}\n\n`,
-							},
-							{
-								name : 'Enable H1-H6 all pages',
-								icon : 'fas fa-dice-six',
-								gen  : `{{tocGlobalH6}}\n\n`,
-							},
-						]
-					}
 				]
 			},
 			{
@@ -214,6 +192,27 @@ module.exports = [
 							line-height: 1em;
 						}\n\n`
 			},
+			{
+				name        : 'Table of Contents Toggles',
+				icon        : 'fas fa-book',
+				subsnippets : [
+					{
+						name : 'Enable H1-H4 all pages',
+						icon : 'fas fa-dice-four',
+						gen  : `.page {\n\th4 {--TOC: include; }\n}\n\n`,
+					},
+					{
+						name : 'Enable H1-H5 all pages',
+						icon : 'fas fa-dice-five',
+						gen  : `.page {\n\th4, h5 {--TOC: include; }\n}\n\n`,
+					},
+					{
+						name : 'Enable H1-H6 all pages',
+						icon : 'fas fa-dice-six',
+						gen  : `.page {\n\th4, h5, h6 {--TOC: include; }\n}\n\n`,
+					},
+				]
+			}
 		]
 	},
 

themes/V3/5ePHB/style.less

@@ -812,17 +812,8 @@ h6,
 
 // Brew level default inclusion changes.
 // These add Headers 'back' to inclusion.
-.pages:has(.tocGlobalH4) {
-	h4 {--TOC: include; }
-}
 
-.pages:has(.tocGlobalH5) {
+//NOTE: DO NOT USE :HAS WITH .PAGES!!! EXTREMELY SLOW TO RENDER ON LARGE DOCS!
-	h4, h5 {--TOC: include; }
-}
-
-.pages:has(.tocGlobalH6) {
-	h4, h5, h6 {--TOC: include; }
-}
 
 // Block level inclusion changes
 // These include either a single  (include) or a range (depth)