Merge pull request #203 from KevinBatdorf/add-fonts

Add additional fonts

readme.txt

@@ -296,7 +296,14 @@ Themes are rendered inside the editor as you type or make changes, so the code b
 
 == Changelog ==
 
-- Fix: Block will be auto-focused on insert
+- Feature: Add Fantasque Sans Mono (https://github.com/belluzj/fantasque-sans)
+- Feature: Add Comic Mono font (https://github.com/dtinth/comic-mono-font)
+- 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 - WP6.2 regression
+- Fix: Line highlight hover width was not rendering correctly
+- 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/components/FontSelect.tsx

@@ -112,9 +112,11 @@ export const FontFamilySelect = ({
  onChange: (v: string) => void;
 }) => {
  const fonts = {
- '': __('System Default', 'code-block-pro'),
- 'Code-Pro-JetBrains-Mono': 'JetBrains Mono',
+ 'Code-Pro-Comic-Mono.ttf': 'Comic Mono',
+ 'Code-Pro-Fantasque-Sans-Mono': 'Fantasque Sans Mono',
  'Code-Pro-Fira-Code': 'Fira Code',
+ 'Code-Pro-JetBrains-Mono': 'JetBrains Mono',
+ '': __('System Default', 'code-block-pro'),
  };
  return (
  <SelectControl

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/editor/editor.css

@@ -121,12 +121,3 @@
  monospace; /* no !important */
  direction: ltr;
 }
-
-@font-face {
- font-family: 'Code-Pro-Fira-Code';
- src: url('../fonts/Code-Pro-Fira-Code.woff2') format('woff2');
-}
-@font-face {
- font-family: 'Code-Pro-JetBrains-Mono';
- src: url('../fonts/Code-Pro-JetBrains-Mono.woff2') format('woff2');
-}

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),
@@ -50,35 +50,27 @@ const handleHighlighter = () => {
  if (codeBlock.classList.contains('cbp-highlight-hover')) {
  codeBlock
  .querySelectorAll('span.line')
- .forEach((line) => console.log(line) || highlighters.add(line));
+ .forEach((line) => highlighters.add(line));
  }
 
  if (!highlighters.size) return;
 
- // We need to track the block width so we can adjust the
- // highlighter width in case of overflow
- 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',
- `${computed}px`,
- );
- });
- });
- resizeObserver.observe(codeBlock);
-
- console.log(highlighters);
+ // 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>',
@@ -99,11 +91,12 @@ const handleFontLoading = () => {
  elements.map((f) => f.dataset.codeBlockProFontFamily).filter(Boolean),
  );
  [...fontsToLoad].forEach(async (fontName) => {
- const font = new FontFace(
- fontName,
- `url(${window.codeBlockPro.pluginUrl}/build/fonts/${fontName}.woff2)`,
- );
- await font.load();
+ const [name, ext] = fontName.split('.');
+ const url = `url(${window.codeBlockPro.pluginUrl}/build/fonts/${name}.${
+ ext || 'woff2'
+ })`;
+ const font = new FontFace(name, url);
+ await font.load().catch((e) => console.error(e));
  document.fonts.add(font);
  });
 };
@@ -175,13 +168,13 @@ const handleSeeMore = () => {
 };
 
 const init = () => {
+ handleFontLoading();
  handleSeeMore();
  handleCopyButton();
  handleHighlighter();
- handleFontLoading();
 };
 
-// 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;

src/front/style.css

@@ -4,14 +4,15 @@
  monospace; /* no !important */
  direction: ltr;
  @apply relative box-border;
+ * {
+ @apply box-border;
+ }
 }
-.wp-block-kevinbatdorf-code-block-pro * {
- @apply box-border;
-}
-.wp-block-kevinbatdorf-code-block-pro pre,
-.wp-block-kevinbatdorf-code-block-pro pre * {
- font-size: inherit;
- line-height: inherit;
+.wp-block-kevinbatdorf-code-block-pro {
+ pre, pre * {
+ font-size: inherit;
+ line-height: inherit;
+ }
 }
 .wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre {
  border: 0;
@@ -41,7 +42,8 @@
  pre
  code
  .line {
- @apply inline-block w-full;
+ @apply inline-block;
+ min-width: calc(var(--cbp-block-width, 100%));
 }
 .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(
  .code-block-pro-editor
@@ -76,29 +78,44 @@
  user-select: none;
  counter-increment: step;
 }
-/* Temporary removed until I can make this an option */
-/* .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(.code-block-pro-editor) pre code .line:hover::before {
- @apply opacity-100;
+.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;
+ }
+ }
+ }
+}
+/* [data-code-block-pro-font-family='Code-Pro-Comic-Mono.ttf'].cbp-highlight-hover {
+ .line,
+ .line:hover,
+ .line.cbp-no-blur:hover,
+ .line.cbp-line-highlight {
+ .cbp-line-highlighter {
+ top: -2.5px !important;
+ }
+ }
+} */
+/* [data-code-block-pro-font-family='Code-Pro-Fira-Code'].cbp-highlight-hover {
+ .line,
+ .line:hover,
+ .line.cbp-no-blur:hover,
+ .line.cbp-line-highlight {
+ .cbp-line-highlighter {
+ top: -1.5px !important;
+ }
+ }
 } */
-.wp-block-kevinbatdorf-code-block-pro:not(
- .cbp-blur-enabled:not(.cbp-unblur-on-hover)
- )
- pre
- .line:hover
- .cbp-line-highlighter,
-.wp-block-kevinbatdorf-code-block-pro.cbp-highlight-hover
- pre
- .line.cbp-no-blur:hover
- .cbp-line-highlighter,
-.wp-block-kevinbatdorf-code-block-pro
- pre
- .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%));
- left: -16px;
-}
 .wp-block-kevinbatdorf-code-block-pro:not(
  .code-block-pro-editor
  ).padding-disabled
@@ -143,17 +160,21 @@
 .wp-block-kevinbatdorf-code-block-pro .code-block-pro-copy-button:hover {
  @apply opacity-90;
 }
-.code-block-pro-copy-button .without-check {
- @apply block;
-}
-.code-block-pro-copy-button .with-check {
- @apply hidden;
-}
-.code-block-pro-copy-button.cbp-copying .without-check {
- @apply hidden;
-}
-.code-block-pro-copy-button.cbp-copying .with-check {
- @apply block;
+.code-block-pro-copy-button {
+ .without-check {
+ @apply block;
+ }
+ .with-check {
+ @apply hidden;
+ }
+}
+.code-block-pro-copy-button.cbp-copying {
+ .without-check {
+ @apply hidden;
+ }
+ .with-check {
+ @apply block;
+ }
 }
 .cbp-footer-link {
  @apply hover:underline;

src/state/theme.ts

@@ -29,7 +29,7 @@ const getSettings = async (name: string) => {
 const defaultSettings = {
  previousTheme: 'nord',
  previousLineHeight: '1.25rem',
- previousFontFamily: undefined,
+ previousFontFamily: 'Code-Pro-JetBrains-Mono',
  previousFontSize: '.875rem',
  previousHeaderType: 'headlights',
  previousFooterType: undefined,

src/util/fonts.ts

@@ -1,7 +1,7 @@
 export const fontFamilyLong = (family: string) => {
  if (!family) return;
  return [
- family,
+ family.split('.')[0],
  'ui-monospace',
  'SFMono-Regular',
  'Menlo',