bugfixes

readme.txt

@@ -301,9 +301,9 @@ Themes are rendered inside the editor as you type or make changes, so the code b
 - Tweak: Default to Jetbrains Mono font
 - Tweak: Remove line highlights on hover when blurred
 - Tweak: Add minor adjustments for fonts to normalize line heights
-- Fix: Block will be auto-focused on insert
+- Fix: Block will be auto-focused on insert - WP6.2 regression
 - Fix: Line highlight hover width was not rendering correctly
-- Performance: Line highlighter will fine the longest line once rather than always checking the container width on window resize.
+- Fix: Line highlighter will find the longest line to use as the highlighter width
 
 = 1.18.0 - 2023-05-29 =
 - Feature: Adds option to output html entities

src/editor/controls/Sidebar.tsx

@@ -310,7 +310,7 @@ export const SidebarControls = ({
  <div className="code-block-pro-editor" data-cy="clamp-fonts">
  <div className="mt-6">
  <CheckboxControl
- label={__('Clamp Values', 'code-block-pro')}
+ label={__('Clamp Font Sizes', 'code-block-pro')}
  help={__(
  'Check this if your font sizes are unusually large or tiny.',
  'code-block-pro',

src/front/front.js

@@ -27,7 +27,7 @@ const handleCopyButton = () => {
  b.classList.add('cbp-copying');
  setTimeout(() => {
  b.classList.remove('cbp-copying');
- }, 2000);
+ }, 2_000);
  };
  ['click', 'keydown'].forEach((evt) =>
  button.addEventListener(evt, handler),
@@ -55,17 +55,22 @@ const handleHighlighter = () => {
 
  if (!highlighters.size) return;
 
- // find the longest line
- const longestLine = Array.from(highlighters).reduce((a, b) =>
- a.offsetWidth > b.offsetWidth ? a : b,
- );
- codeBlock.style.setProperty(
- '--cbp-block-width',
- longestLine.offsetWidth + 'px',
- );
+ // If the code block expands, we need to recalculate the width
+ new ResizeObserver(() => {
+ // find the longest line
+ codeBlock.style.setProperty('--cbp-block-width', 'unset');
+ const longestLine = Array.from(highlighters).reduce((a, b) =>
+ a.offsetWidth > b.offsetWidth ? a : b,
+ );
+ codeBlock.style.setProperty(
+ '--cbp-block-width',
+ longestLine.offsetWidth + 'px',
+ );
+ }).observe(codeBlock);
 
- // add the highlighter
+ // Add the highlighter if not already there
  highlighters.forEach((highlighter) => {
+ if (highlighter.querySelector('.cbp-line-highlighter')) return;
  highlighter.insertAdjacentHTML(
  'beforeend',
  '<span aria-hidden="true" class="cbp-line-highlighter"></span>',
@@ -166,15 +171,12 @@ const init = () => {
  handleFontLoading();
  handleSeeMore();
  handleCopyButton();
+ handleHighlighter();
 };
 
-// Functions are idempotent, so we can run them on load and DOMContentLoaded
+// Functions are idempotent, so we can run them on load, DOMContentLoaded, et al.
 init();
 // Useful for when the DOM is modified or loaded in late
 window.codeBlockProInit = init;
 window.addEventListener('DOMContentLoaded', init);
-window.addEventListener('load', () => {
- init();
- // Always do this last
- handleHighlighter();
-});
+window.addEventListener('load', init);

src/front/style.css

@@ -78,27 +78,25 @@
  user-select: none;
  counter-increment: step;
 }
-.wp-block-kevinbatdorf-code-block-pro.cbp-highlight-hover {
- .line:hover,
+.wp-block-kevinbatdorf-code-block-pro {
+ &.cbp-highlight-hover:not(.cbp-blur-enabled:not(.cbp-unblur-on-hover)) .line:hover,
  .line.cbp-no-blur:hover,
  .line.cbp-line-highlight {
  .cbp-line-highlighter {
  @apply w-full pointer-events-none absolute top-0 h-full;
  background: var(--cbp-line-highlight-color, rgb(14 165 233/0.2));
  min-width: calc(var(--cbp-block-width, 100%) + 16px);
  left: -16px;
+ [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf']& {
+ top: -2.5px !important;
+ }
+ [data-code-block-pro-font-family='Code-Pro-Fira-Code']& {
+ top: -1.5px !important;
+ }
  }
  }
 }
-.wp-block-kevinbatdorf-code-block-pro.cbp-blur-enabled.cbp-highlight-hover:not(
- .cbp-unblur-on-hover
- )
- .line:not(.cbp-no-blur):hover
- .cbp-line-highlighter {
- @apply bg-transparent;
-}
-/* Some fonts will change the line height placement */
-[data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf'].cbp-highlight-hover {
+/* [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf'].cbp-highlight-hover {
  .line,
  .line:hover,
  .line.cbp-no-blur:hover,
@@ -107,8 +105,8 @@
  top: -2.5px !important;
  }
  }
-}
-[data-code-block-pro-font-family='Code-Pro-Fira-Code'].cbp-highlight-hover {
+} */
+/* [data-code-block-pro-font-family='Code-Pro-Fira-Code'].cbp-highlight-hover {
  .line,
  .line:hover,
  .line.cbp-no-blur:hover,
@@ -117,7 +115,7 @@
  top: -1.5px !important;
  }
  }
-}
+} */
 .wp-block-kevinbatdorf-code-block-pro:not(
  .code-block-pro-editor
  ).padding-disabled