Merge pull request #70 from KevinBatdorf/fix-highlight-resize-bug

Fix resize bug
KevinBatdorf · Nov 21, 2022 · fcb6a29 · fcb6a29
2 parents cc490fd + 1d4ab62
commit fcb6a29
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/code-block-pro.php b/code-block-pro.php
@@ -4,7 +4,7 @@
  * Description: Code highlighting powered by the VS Code engine
  * Requires at least: 6.0
  * Requires PHP: 7.0
- * Version: 1.9.0
+ * Version: 1.9.1
  * Author: Kevin Batdorf
  * License: GPL-2.0-or-later
  * License URI: https://www.gnu.org/licenses/gpl-2.0.html

diff --git a/readme.txt b/readme.txt
@@ -2,7 +2,7 @@
 Contributors: kbat82
 Tags: block, code, syntax, highlighting, snippet, highlighter, JavaScript, php, vs code, editor, torchlight, shiki
 Tested up to: 6.1
-Stable tag: 1.9.0
+Stable tag: 1.9.1
 License: GPL-2.0-or-later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -232,6 +232,9 @@ Themes are rendered inside the editor as you type or make changes, so the code b
 
 == Changelog ==
 
+= 1.9.1 - 2022-11-21 =
+- Fix: Fixed a situations where the highlighter was miscalculating its width
+
 = 1.9.0 - 2022-11-20 =
 - Feature: Added line highlights
 - Feature: Added blur effect to highlight lines

diff --git a/src/front/front.js b/src/front/front.js
@@ -37,13 +37,13 @@ addEventListener('DOMContentLoaded', () => {
  const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
  // get width of inner code block
+ codeBlock.style.setProperty('--cbp-block-width', '0');
  const codeWidth =
  entry.target.querySelector('code').offsetWidth;
  const computed =
  codeWidth + 16 === entry.target.scrollWidth
  ? codeWidth + 16
  : entry.target.scrollWidth + 16;
- codeBlock.style.setProperty('--cbp-block-width', '0');
  codeBlock.style.setProperty(
  '--cbp-block-width',
  `${computed}px`,