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,7 +151,8 @@ 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'>
+			{_.map(snippets, (snippetGroup)=>{
 				return <SnippetGroup
 					brew={this.props.brew}
 					groupName={snippetGroup.groupName}
@@ -161,7 +162,9 @@ const Snippetbar = createClass({
 					onSnippetClick={this.handleSnippetClick}
 					cursorPos={this.props.cursorPos}
 				/>;
-		});
+			})
+			}
+		</div>;
 	},
 
 	replaceContent : function(item){
@@ -220,6 +223,7 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
+			<div className='historyTools'>
 				<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
 					onClick={this.toggleHistoryMenu} >
 					<i className='fas fa-clock-rotate-left' />
@@ -233,15 +237,18 @@ const Snippetbar = createClass({
 					onClick={this.props.redo} >
 					<i className='fas fa-redo' />
 				</div>
-			<div className='divider'></div>
+			</div>
+			<div className='codeTools'>
 				{foldButtons}
 				<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 					onClick={this.toggleThemeSelector} >
 					<i className='fas fa-palette' />
 					{this.state.themeSelector && this.renderThemeSelector()}
 				</div>
+			</div>
 
-			<div className='divider'></div>
+
+			<div className='tabs'>
 				<div className={cx('text', { selected: this.props.view === 'text' })}
 					onClick={()=>this.props.onViewChange('text')}>
 					<i className='fa fa-beer' />
@@ -254,6 +261,8 @@ const Snippetbar = createClass({
 					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,18 +4,31 @@
 .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 {
+			display         : flex;
+			flex            : 1;
+			justify-content : space-around;
+
+			&:first-child { border-left : none; }
+
 			& > div {
+				position    : relative;
 				width       : @menuHeight;
 				height      : @menuHeight;
 				line-height : @menuHeight;
@@ -55,17 +68,14 @@
 				}
 				&.history {
 					.tooltipLeft('History');
+					position  : relative;
 					font-size : 0.75em;
 					color     : grey;
-				position  : relative;
+					border    : none;
-				&.active {
+					&.active { color : inherit; }
-					color : inherit;
-				}
 					& > .dropdown {
 						right : -1px;
-					&>.snippet{
+						& > .snippet { padding-right : 10px; }
-						padding-right : 10px;
-					}
 					}
 				}
 				&.editorTheme {
@@ -96,6 +106,7 @@
 				background-color : inherit;
 			}
 		}		
+	}
 	.snippetBarButton {
 		display        : inline-block;
 		height         : @menuHeight;
@@ -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,10 +154,10 @@
 				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;
 					& ~ i {
 						margin-right : 0;
@@ -179,6 +191,7 @@
 					}
 				}
 				.name { margin-right : auto; }
+				.disabled { text-decoration : line-through; }
 				.beta {
 					align-self    : center;
 					padding       : 4px 6px;
@@ -205,3 +218,9 @@
 		}
 	}
 }
+
+@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)