Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Inline mode in scrolling container, toolbar incorrectly positioned

See original GitHub issue

This seems to occur if the scroll container has been scrolled so that the top of the scroll container is above the top of the page, and neither the top or the bottom of the editor is visible.

The bug appears to be in the modern theme within the reposition function, moveRel in the panel handles positioning of the toolbar after the editor, but then moveBy is called which causes the toolbar to be moved beyond the bottom of the page.

Here is a simple repro (you’ll need to npm install tinymce), I did try to reproduce with tinymce fiddle but I couldn’t get it to work, possibly something related to how the layout for that page works.

<!DOCTYPE html>
<html>
	<head>
		<title>Hello, World!</title>
		<style type="text/css">
			#scroll-container {
				overflow-y: scroll;
				
				width: 70vw;
				height: 70vh;
				
				margin: 50px;
				border: 1px solid red;
			}
			
			#textInput {
				height: 150%;
				width: 90%;
				
				border: 1px solid green;
			}
		</style>
		<!-- TinyMCE version 4.8.3 -->
		<script src="node_modules/tinymce/tinymce.min.js"></script>
		<script>
		tinymce.init({
			selector: '#textInput',
			theme: "modern",
			skin: 'lightgray',
			inline: true
		});
		</script>
	</head>
	<body>
		<p>Red border = scroll container, green border = text area</p>
		<div id="scroll-container">
			<div id="textInput">
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			</div>
		</div>
	</body>
</html>

I would expect that if the top and bottom of the editor are both off screen, the toolbar be shown either at the top or bottom of the visible portion, I’ve found that by changing the reposition function to the following in modern/theme.js, this functions correctly.

var reposition = function () {
      if (panel && panel.moveRel && panel.visible() && !panel._fixed) {
        var scrollContainer = editor.selection.getScrollContainer(), body = editor.getBody();
        var deltaX = 0, deltaY = 0;
        if (scrollContainer) {
          var bodyPos = DOM.getPos(body), scrollContainerPos = DOM.getPos(scrollContainer);
          deltaX = Math.max(0, scrollContainerPos.x - bodyPos.x);
          deltaY = Math.max(0, scrollContainerPos.y - bodyPos.y);
        }

        var rel =  editor.rtl ? [
          'tr-br',
          'br-tr'
        ] : [
          'tl-bl',
          'bl-tl',
          'tr-br'
        ];

        rel = panel.fixed(false).testMoveRel(body, rel);

        if (rel === 'bl-tl') {
          deltaY = 0;
        }

        panel.fixed(false).moveRel(body, rel).moveBy(deltaX, deltaY);
      }
};

I’ve seen this issue with tinymce 4.8.3 in Chrome 68 on Windows.