Merge branch 'add-notification-client-side' of https://github.com/5e-Cleric/homebrewery; branch 'master' of https://github.com/naturalcrit/homebrewery into add-notification-client-side

2025-12-24 20:42:43 +00:00 · 2024-10-23 19:33:14 +02:00
parent 999a96b5ce ef5e3ddf4c
commit 7a78408415
10 changed files with 235 additions and 194 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -77,6 +77,24 @@ const BrewRenderer = (props)=>{
 		rawPages = props.text.split(/^\\page$/gm);
 	}

+	const scrollToHash = (hash) => {
+		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
+		let anchor = iframeDoc.querySelector(hash);
+
+		if (anchor) {
+			anchor.scrollIntoView({ behavior: 'smooth' });
+		} else {
+			// Use MutationObserver to wait for the element if it's not immediately available
+			new MutationObserver((mutations, obs) => {
+				anchor = iframeDoc.querySelector(hash);	
+				if (anchor) {
+					anchor.scrollIntoView({ behavior: 'smooth' });
+					obs.disconnect();
+				}
+			}).observe(iframeDoc, { childList: true, subtree: true });
+		}
+	};
+
 	const updateCurrentPage = useCallback(_.throttle((e)=>{
 		const { scrollTop, clientHeight, scrollHeight } = e.target;
 		const totalScrollableHeight = scrollHeight - clientHeight;
@@ -150,6 +168,8 @@ const BrewRenderer = (props)=>{
 	};

 	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
+		scrollToHash(window.location.hash);
+
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
 			renderPages(); //Make sure page is renderable before showing
 			setState((prevState)=>({
@@ -179,8 +199,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]);
-	renderedPages = useMemo(() => renderPages(), [props.text?.length]);
+	const renderedStyle = useMemo(()=> renderStyle(), [props.style, props.themeBundle]);
+	renderedPages = useMemo(() => renderPages(), [props.text]);

 	return (
 		<>
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -18,6 +18,9 @@
 			margin-left   : auto;
 			box-shadow    : 1px 4px 14px #000000;
 		}
+		*[id] {
+			scroll-margin-top:100px;
+		}
 	}
 	&::-webkit-scrollbar {
 		width : 20px;
--- a/client/homebrew/editor/editor.less
+++ b/client/homebrew/editor/editor.less
@@ -2,6 +2,7 @@
 .editor {
 	position : relative;
 	width    : 100%;
+	container: editor / inline-size;

 	.codeEditor {
 		height            : 100%;
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/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 <SnippetGroup
-				brew={this.props.brew}
-				groupName={snippetGroup.groupName}
-				icon={snippetGroup.icon}
-				snippets={snippetGroup.snippets}
-				key={snippetGroup.groupName}
-				onSnippetClick={this.handleSnippetClick}
-				cursorPos={this.props.cursorPos}
-			/>;
-		});
+		return <div className='snippets'>
+			{_.map(snippets, (snippetGroup)=>{
+				return <SnippetGroup
+					brew={this.props.brew}
+					groupName={snippetGroup.groupName}
+					icon={snippetGroup.icon}
+					snippets={snippetGroup.snippets}
+					key={snippetGroup.groupName}
+					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' : ''}`}
-				onClick={this.toggleHistoryMenu} >
-				<i className='fas fa-clock-rotate-left' />
-				{ this.state.showHistory && this.renderHistoryItems() }
+			<div className='historyTools'>
+				<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+					onClick={this.toggleHistoryMenu} >
+					<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' : ''}`}
-				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 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 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={cx('text', { selected: this.props.view === 'text' })}
-				 onClick={()=>this.props.onViewChange('text')}>
-				<i className='fa fa-beer' />
-			</div>
-			<div className={cx('style', { selected: this.props.view === 'style' })}
-				 onClick={()=>this.props.onViewChange('style')}>
-				<i className='fa fa-paint-brush' />
-			</div>
-			<div className={cx('meta', { selected: this.props.view === 'meta' })}
-				onClick={()=>this.props.onViewChange('meta')}>
-				<i className='fas fa-info-circle' />
+
+			<div className='tabs'>
+				<div className={cx('text', { selected: this.props.view === 'text' })}
+					onClick={()=>this.props.onViewChange('text')}>
+					<i className='fa fa-beer' />
+				</div>
+				<div className={cx('style', { selected: this.props.view === 'style' })}
+					onClick={()=>this.props.onViewChange('style')}>
+					<i className='fa fa-paint-brush' />
+				</div>
+				<div className={cx('meta', { selected: this.props.view === 'meta' })}
+					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'>
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/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 {
-			width       : @menuHeight;
-			height      : @menuHeight;
-			line-height : @menuHeight;
-			text-align  : center;
-			cursor      : pointer;
-			&:hover,&.selected { background-color : #999999; }
-			&.text {
-				.tooltipLeft('Brew Editor');
-			}
-			&.style {
-				.tooltipLeft('Style Editor');
-			}
-			&.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');
-				font-size : 0.75em;
-				color     : grey;
-				position  : relative;
-				&.active {
-					color : inherit;
+		>div {
+			display         : flex;
+			flex            : 1;
+			justify-content : space-around;
+
+			&:first-child { border-left : none; }
+
+			& > div {
+				position    : relative;
+				width       : @menuHeight;
+				height      : @menuHeight;
+				line-height : @menuHeight;
+				text-align  : center;
+				cursor      : pointer;
+				&:hover,&.selected { background-color : #999999; }
+				&.text {
+					.tooltipLeft('Brew Editor');
 				}
-				&>.dropdown{
-					right         : -1px;
-					&>.snippet{
-						padding-right : 10px;
+				&.style {
+					.tooltipLeft('Style Editor');
+				}
+				&.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 {
-				.tooltipLeft('Editor Themes');
-				font-size : 0.75em;
-				color     : black;
-				&.active {
-					position         : relative;
-					background-color : #999999;
+				&.editorTheme {
+					.tooltipLeft('Editor Themes');
+					font-size : 0.75em;
+					color     : black;
+					&.active {
+						position         : relative;
+						background-color : #999999;
+					}
+				}
+				&.divider {
+					width      : 5px;
+					background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
+					&:hover { background-color : inherit; }
 				}
 			}
-			&.divider {
-				width      : 5px;
-				background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
-				&:hover { 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;
 			}
-		}
-		.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; }
+}
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -228,8 +228,8 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));

-		await updateHistory(this.state.brew);
-		await versionHistoryGarbageCollection();
+		await updateHistory(this.state.brew).catch(console.error);
+		await versionHistoryGarbageCollection().catch(console.error);

 		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);

--- a/package-lock.json
+++ b/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",
@@ -47,12 +47,12 @@
        "react-frame-component": "^4.1.3",
        "react-router-dom": "6.27.0",
        "sanitize-filename": "1.6.3",
-        "superagent": "^10.1.0",
+        "superagent": "^10.1.1",
        "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
      },
      "devDependencies": {
        "@stylistic/stylelint-plugin": "^3.1.1",
-        "eslint": "^9.12.0",
+        "eslint": "^9.13.0",
        "eslint-plugin-jest": "^28.8.3",
        "eslint-plugin-react": "^7.37.1",
        "globals": "^15.11.0",
@@ -1881,9 +1881,9 @@
      }
    },
    "node_modules/@eslint/core": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.6.0.tgz",
-      "integrity": "sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz",
+      "integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==",
      "dev": true,
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1927,9 +1927,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.12.0.tgz",
-      "integrity": "sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==",
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz",
+      "integrity": "sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==",
      "dev": true,
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5702,17 +5702,17 @@
      }
    },
    "node_modules/eslint": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.12.0.tgz",
-      "integrity": "sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==",
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.13.0.tgz",
+      "integrity": "sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==",
      "dev": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.11.0",
        "@eslint/config-array": "^0.18.0",
-        "@eslint/core": "^0.6.0",
+        "@eslint/core": "^0.7.0",
        "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.12.0",
+        "@eslint/js": "9.13.0",
        "@eslint/plugin-kit": "^0.2.0",
        "@humanfs/node": "^0.16.5",
        "@humanwhocodes/module-importer": "^1.0.1",
@@ -6551,13 +6551,12 @@
      }
    },
    "node_modules/formidable": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.1.tgz",
-      "integrity": "sha512-WJWKelbRHN41m5dumb0/k8TeAx7Id/y3a+Z7QfhxP/htI9Js5zYaEDtG8uMgG0vM0lOlqnmjE99/kfpOYi/0Og==",
-      "license": "MIT",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.2.tgz",
+      "integrity": "sha512-Jqc1btCy3QzRbJaICGwKcBfGWuLADRerLzDqi2NwSt/UkXLsHJw2TVResiaoBufHVHy9aSgClOHCeJsSsFLTbg==",
      "dependencies": {
        "dezalgo": "^1.0.4",
-        "hexoid": "^1.0.0",
+        "hexoid": "^2.0.0",
        "once": "^1.4.0"
      },
      "funding": {
@@ -7190,10 +7189,9 @@
      }
    },
    "node_modules/hexoid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz",
-      "integrity": "sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==",
-      "license": "MIT",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-2.0.0.tgz",
+      "integrity": "sha512-qlspKUK7IlSQv2o+5I7yhUd7TxlOG2Vr5LTa3ve2XSNVKAL/n/u/7KLvKmFNimomDIKvZFXWHv0T12mv7rT8Aw==",
      "engines": {
        "node": ">=8"
      }
@@ -10661,9 +10659,9 @@
      }
    },
    "node_modules/mongoose": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.7.1.tgz",
-      "integrity": "sha512-RpNMyhyzLVCVbf8xTVbrf/18G3MqQzNw5pJdvOJ60fzbCa3cOZzz9L+8XpqzBXtRlgZGWv0T7MmOtvrT8ocp1Q==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.7.2.tgz",
+      "integrity": "sha512-Ok4VzMds9p5G3ZSUhmvBm1GdxanbzhS29jpSn02SPj+IXEVFnIdfwAlHHXWkyNscZKlcn8GuMi68FH++jo0flg==",
      "dependencies": {
        "bson": "^6.7.0",
        "kareem": "2.6.3",
@@ -13597,16 +13595,16 @@
      }
    },
    "node_modules/superagent": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/superagent/-/superagent-10.1.0.tgz",
-      "integrity": "sha512-JMmik7PbnXGlq7g528Gi6apHbVbTz2vrE3du6fuG4kIPSb2PnLoSOPvfjKn8aQYuJcBWAKW6ZG90qPPsE5jZxQ==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/superagent/-/superagent-10.1.1.tgz",
+      "integrity": "sha512-9pIwrHrOj3uAnqg9gDlW7EA2xv+N5au/dSM0kM22HTqmUu8jBxNT+8uA7tA3UoCnmiqzpSbu8rasIUZvbyamMQ==",
      "dependencies": {
        "component-emitter": "^1.3.0",
        "cookiejar": "^2.1.4",
        "debug": "^4.3.4",
        "fast-safe-stringify": "^2.1.1",
        "form-data": "^4.0.0",
-        "formidable": "^3.5.1",
+        "formidable": "^3.5.2",
        "methods": "^1.1.2",
        "mime": "2.6.0",
        "qs": "^6.11.0"
--- a/package.json
+++ b/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",
@@ -123,12 +123,12 @@
    "react-frame-component": "^4.1.3",
    "react-router-dom": "6.27.0",
    "sanitize-filename": "1.6.3",
-    "superagent": "^10.1.0",
+    "superagent": "^10.1.1",
    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
  },
  "devDependencies": {
    "@stylistic/stylelint-plugin": "^3.1.1",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
    "eslint-plugin-jest": "^28.8.3",
    "eslint-plugin-react": "^7.37.1",
    "globals": "^15.11.0",
--- a/themes/V3/5ePHB/snippets.js
+++ b/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`,
+					},
+				]
+			}
 		]
 	},

--- a/themes/V3/5ePHB/style.less
+++ b/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) {
-	h4, h5 {--TOC: include; }
-}
-
-.pages:has(.tocGlobalH6) {
-	h4, h5, h6 {--TOC: include; }
-}
+//NOTE: DO NOT USE :HAS WITH .PAGES!!! EXTREMELY SLOW TO RENDER ON LARGE DOCS!

 // Block level inclusion changes
 // These include either a single  (include) or a range (depth)