Toolbar: Adjusted the way the menu is positioned

plugins/toolbar/prism-toolbar.css

@@ -2,33 +2,42 @@ div.code-toolbar {
 	position: relative;
 }
 
-div.code-toolbar > .toolbar {
+div.code-toolbar > div.toolbar-positioner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 0;
+	overflow: visible;
+}
+
+div.toolbar-positioner > .toolbar {
 	position: absolute;
 	top: .3em;
 	right: .2em;
 	transition: opacity 0.3s ease-in-out;
 	opacity: 0;
 }
 
-div.code-toolbar:hover > .toolbar {
+div.code-toolbar:hover > div.toolbar-positioner > .toolbar {
 	opacity: 1;
 }
 
 /* Separate line b/c rules are thrown out if selector is invalid.
    IE11 and old Edge versions don't support :focus-within. */
-div.code-toolbar:focus-within > .toolbar {
+div.code-toolbar:focus-within > div.toolbar-positioner > .toolbar {
 	opacity: 1;
 }
 
-div.code-toolbar > .toolbar .toolbar-item {
+div.toolbar-positioner > .toolbar .toolbar-item {
 	display: inline-block;
 }
 
-div.code-toolbar > .toolbar a {
+div.toolbar-positioner > .toolbar a {
 	cursor: pointer;
 }
 
-div.code-toolbar > .toolbar button {
+div.toolbar-positioner > .toolbar button {
 	background: none;
 	border: 0;
 	color: inherit;
@@ -41,9 +50,9 @@ div.code-toolbar > .toolbar button {
 	-ms-user-select: none;
 }
 
-div.code-toolbar > .toolbar a,
-div.code-toolbar > .toolbar button,
-div.code-toolbar > .toolbar span {
+div.toolbar-positioner > .toolbar a,
+div.toolbar-positioner > .toolbar button,
+div.toolbar-positioner > .toolbar span {
 	color: #bbb;
 	font-size: .8em;
 	padding: 0 .5em;
@@ -53,12 +62,12 @@ div.code-toolbar > .toolbar span {
 	border-radius: .5em;
 }
 
-div.code-toolbar > .toolbar a:hover,
-div.code-toolbar > .toolbar a:focus,
-div.code-toolbar > .toolbar button:hover,
-div.code-toolbar > .toolbar button:focus,
-div.code-toolbar > .toolbar span:hover,
-div.code-toolbar > .toolbar span:focus {
+div.toolbar-positioner > .toolbar a:hover,
+div.toolbar-positioner > .toolbar a:focus,
+div.toolbar-positioner > .toolbar button:hover,
+div.toolbar-positioner > .toolbar button:focus,
+div.toolbar-positioner > .toolbar span:hover,
+div.toolbar-positioner > .toolbar span:focus {
 	color: inherit;
 	text-decoration: none;
 }

plugins/toolbar/prism-toolbar.js

@@ -7,7 +7,25 @@
 	var map = {};
 	var noop = function() {};
 
-	Prism.plugins.toolbar = {};
+	Prism.plugins.toolbar = {
+		registerButton: registerButton,
+		hook: hook,
+
+		/**
+		 * Adjusts the layout of the toolbar of the given `pre` element.
+		 *
+		 * @param {HTMLElement} pre
+		 */
+		resize: function (pre) {
+			if (!pre || !/pre/i.test(pre.nodeName)) {
+				return;
+			}
+			var toolbar = pre.parentElement;
+			if (toolbar && toolbar.classList.contains('code-toolbar')) {
+				refreshLayout(toolbar);
+			}
+		}
+	};
 
 	/**
 	 * @typedef ButtonOptions
@@ -23,7 +41,7 @@
 	 * @param {string} key
 	 * @param {ButtonOptions|Function} opts
 	 */
-	var registerButton = Prism.plugins.toolbar.registerButton = function (key, opts) {
+	function registerButton(key, opts) {
 		var callback;
 
 		if (typeof opts === 'function') {
@@ -89,8 +107,9 @@
 	 *
 	 * @param env
 	 */
-	var hook = Prism.plugins.toolbar.hook = function (env) {
+	function hook(env) {
 		// Check if inline or actual code block (credit to line-numbers plugin)
+		/** @type {HTMLPreElement} */
 		var pre = env.element.parentNode;
 		if (!pre || !/pre/i.test(pre.nodeName)) {
 			return;
@@ -107,6 +126,12 @@
 		pre.parentNode.insertBefore(wrapper, pre);
 		wrapper.appendChild(pre);
 
+		// Additional wrapper to align the toolbar properly
+		var toolbarPositioner = document.createElement('div');
+		toolbarPositioner.classList.add('toolbar-positioner');
+		wrapper.appendChild(toolbarPositioner);
+
+
 		// Setup the toolbar
 		var toolbar = document.createElement('div');
 		toolbar.classList.add('toolbar');
@@ -135,9 +160,33 @@
 		});
 
 		// Add our toolbar to the currently created wrapper of <pre> tag
-		wrapper.appendChild(toolbar);
+		toolbarPositioner.appendChild(toolbar);
+		refreshLayout(wrapper);
 	};
 
+
+	/**
+	 * This will adjust the width of the toolbar positioner on size changes.
+	 *
+	 * @param {HTMLElement} codeToolbar
+	 */
+	function refreshLayout(codeToolbar) {
+		/** @type {HTMLPreElement} */
+		var pre = codeToolbar.querySelector('div.code-toolbar > pre');
+		/** @type {HTMLDivElement} */
+		var toolbarWrapperElement = codeToolbar.querySelector('div.code-toolbar > div.toolbar-positioner');
+		if (toolbarWrapperElement) {
+			toolbarWrapperElement.style.marginRight = (codeToolbar.clientWidth - pre.clientWidth) + 'px';
+		}
+	}
+	window.addEventListener('resize', function () {
+		/** @type {NodeListOf<HTMLDivElement>} */
+		var codeToolbars = document.querySelectorAll('div.code-toolbar');
+		for (var i = 0; i < codeToolbars.length; i++) {
+			refreshLayout(codeToolbars[i]);
+		}
+	});
+
 	registerButton('label', function(env) {
 		var pre = env.element.parentNode;
 		if (!pre || !/pre/i.test(pre.nodeName)) {