Merge pull request #69 from KevinBatdorf/release/1.9.0

Release/1.9.0

README.md

@@ -5,17 +5,26 @@ Code highlighting powered by the VS Code engine
 View this block plugin [on WordPress.org](https://wordpress.org/plugins/code-block-pro)
 
 ## Features
-- Includes 28 themes built in to choose from.
+- Includes 25+ built-in themes to choose from.
 - Supports over 140 programming languages
 - Optionally load programming fonts
-- Various header styles (more coming soon)
+- Line numbers
+- Line highlighting
+- Blur highlighting
+- Header styles (more coming)
+- Footer styles (more coming)
 - Optionally add a copy button to let users copy the code
 - Native Gutenberg block output - no special requirements
-- No frontend JavaScript required - works in headless mode
+- Core functionality works in headless mode (see FAQ)
 - Supports converting from the default code block
 
 
+## Tips
+- Try combining line highlighting with the blur effect to add some extra depth
+- All settings are per block, but some settings are remembered when you add the next block.
+- Add a link in the code footer (some footers support this, not all) that points to a https://codepen.io demo
+
 ## Example Screenshots
-![alt text](.wordpress-org/screenshot-1.png "Example")
-![alt text](.wordpress-org/screenshot-2.gif "Example 2")
 ![alt text](.wordpress-org/screenshot-3.png "Example 3")
+![alt text](.wordpress-org/screenshot-4.png "Example 4")
+![alt text](.wordpress-org/screenshot-2.gif "Example 2")

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.8.0
+ * Version: 1.9.0
  * Author: Kevin Batdorf
  * License: GPL-2.0-or-later
  * License URI: https://www.gnu.org/licenses/gpl-2.0.html

readme.txt

@@ -1,35 +1,42 @@
-=== Code Block Pro - Pixel Perfect Syntax Highlighting ===
+=== Code Block Pro - Beautiful Syntax Highlighting ===
 Contributors: kbat82
-Tags: block, code, syntax, highlighting, snippet, highlighter, JavaScript, php, vs code, editor
+Tags: block, code, syntax, highlighting, snippet, highlighter, JavaScript, php, vs code, editor, torchlight, shiki
 Tested up to: 6.1
-Stable tag: 1.8.0
+Stable tag: 1.9.0
 License: GPL-2.0-or-later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
-Code highlighting powered by the VS Code engine
+Code highlighting powered by the VS Code engine. Highly performance. No bloat.
 
 == Description ==
 
-Show off your beautiful code. This plugin provides you with an editor that runs your code directly through the same rendering engine that is used by the popular VS Code editor. This block provides fast, native, code highlighting that renders perfectly in any language and theme supported by VS Code.
+Show off your beautiful code, don't just display it! This block plugin provides you with a code block editor that runs your code directly through the same rendering engine that is used by the popular VS Code editor. This block provides fast, native, code highlighting that renders perfectly in any language and theme supported by VS Code.
 
 Beautiful syntax highlighting made easy.
 
 = Features =
-- Includes 28 built-in themes to choose from.
+- Includes 25+ built-in themes to choose from.
 - Supports over 140 programming languages
 - Optionally load programming fonts
-- Line numbers (custom starting number)
+- Line numbers
+- Line highlighting
+- Blur highlighting
 - Header styles (more coming)
 - Footer styles (more coming)
 - Optionally add a copy button to let users copy the code
 - Native Gutenberg block output - no special requirements
-- No frontend JavaScript required - works in headless mode
+- Core functionality works in headless mode (see FAQ)
 - Supports converting from the default code block
 
 = More info =
 - Follow [@kevinbatdorf](https://twitter.com/kevinbatdorf) on Twitter
 - View on [GitHub](https://github.com/KevinBatdorf/code-block-pro)
 
+= Tips =
+- Try combining line highlighting with the blur effect to add some extra depth
+- All settings are per block, but some settings are remembered when you add the next block.
+- Add a link in the code footer (some footers support this, not all) that points to a https://codepen.io demo
+
 = Included VS Code Themes =
 - Dark Plus
 - Dracula Soft
@@ -208,19 +215,30 @@ Beautiful syntax highlighting made easy.
 
 == Frequently Asked Questions ==
 
-= Font size is too small =
+= Font size is too small/big =
 
 Look under the "Styling" tab and turn on "Clamp Values", which will compute the rem values relative to a 16px-24px base * the selected rem values. e.g. clamp(20px, 1.25rem, 30px).
 
+= How to use in headless =
+
+Themes are rendered inside the editor as you type or make changes, so the code block itself will work without CSS or JavaScript. However, the font loading, copy button, and line highlighting require a tiny bit of JavaScript to funciton. Additionally, line blur uses a tiny bit of CSS which you will need to load in yourself or impliment your own. The code tokens and theme styles are inline though, so no need to manipulate the DOM.
+
 == Screenshots ==
 
 1. Choose from more than 25 themes.
 2. Customize fonts, themes, and behavior.
-3. Example showing light theme with padding disabled.
-4. Example showing a header with a string using Palenight theme.
+3. Disable padding and inline the code for a fluent experience.
+4. Use highlighting and blur to focus on parts of the code.
 
 == Changelog ==
 
+= 1.9.0 - 2022-11-20 =
+- Feature: Added line highlights
+- Feature: Added blur effect to highlight lines
+- Tweak: Added the copy button to the editor preview
+- Tweak: Removed HC Light - will follow up on rendering issues
+- Fix: Selected text no longer leaves padding exposed on the right
+
 = 1.8.0 - 2022-11-17 =
 - Feature: Added footer styles
 - Accessibility: Increased line number color contrast

src/block.json

@@ -3,9 +3,9 @@
  "apiVersion": 2,
  "name": "kevinbatdorf/code-block-pro",
  "version": "1.2.0",
- "title": "Code Block Pro",
+ "title": "Code Block Pro - Beautiful syntax highlighting",
  "category": "common",
- "description": "Code highlighting powered by the VS Code engine",
+ "description": "Code highlighting powered by the VS Code engine. No overhead.",
  "attributes": {
  "code": { "type": "string" },
  "codeHTML": { "type": "string" },

src/editor/Edit.tsx

@@ -160,7 +160,7 @@ export const Edit = ({
  top: disablePadding ? 0 : 16,
  bottom: disablePadding || hasFooter ? 0 : 16,
  left:
- (disablePadding ? 0 : 16) +
+ (disablePadding && !lineNumbersWidth ? 0 : 16) +
  // If line numbers are disabled, just offset the 12px padding
  (lineNumbersWidth ?? -12) +
  12,

src/editor/editor.css

@@ -46,6 +46,9 @@
 .code-block-pro-editor:not(.padding-disabled) pre .line:empty {
  @apply block;
 }
+.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre .line:empty {
+ @apply block;
+}
 .code-block-pro-editor.cbp-has-line-numbers pre .line:not(.cbp-line-number-disabled)::before {
  @apply inline-block text-right opacity-50 absolute;
  margin-right: 12px;
@@ -57,10 +60,12 @@
  left: calc(var(--cbp-line-number-width, 0) * -1 - 16px);
 }
 
-.code-block-pro-editor.cbp-has-line-numbers.padding-disabled pre .line:not(.cbp-line-number-disabled)::before {
- @apply static;
+.code-block-pro-editor.padding-disabled:not(.cbp-has-line-numbers) pre {
+ @apply p-0;
+}
+.code-block-pro-editor.padding-disabled.cbp-has-line-numbers pre {
+ @apply py-0;
 }
-
 /* Will make sure the line numbers are full width before calculating */
 .code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-width-forced,
 .code-block-pro-editor.cbp-has-line-numbers pre .line.cbp-line-number-disabled {
@@ -74,8 +79,11 @@
  @apply pointer-events-none no-underline;
 }
 
+/* Just to make it look similar to the front end */
 .code-block-pro-editor pre .line.cbp-line-highlight::after {
- /* Just to make it look similar to the front end */
+ content: '';
+ background: var(--cbp-line-highlight-color, rgb(14 165 233/.2));
+ @apply absolute top-0 h-full;
  left: -100% !important;
  width: 1000%!important;
  min-height: var(--cbp-line-height) !important;

src/front/front.js

@@ -21,6 +21,47 @@ addEventListener('DOMContentLoaded', () => {
  });
 });
 
+// Handle highlighter
+addEventListener('DOMContentLoaded', () => {
+ const codeBlocks = Array.from(
+ document.querySelectorAll('.wp-block-kevinbatdorf-code-block-pro pre'),
+ );
+
+ codeBlocks.forEach((codeBlock) => {
+ // search for highlights
+ const highlighters = codeBlock.querySelectorAll('.cbp-line-highlight');
+ if (!highlighters.length) 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
+ 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`,
+ );
+ });
+ });
+ resizeObserver.observe(codeBlock);
+
+ // add the highlighter
+ highlighters.forEach((highlighter) => {
+ highlighter.insertAdjacentHTML(
+ 'beforeend',
+ '<span aria-hidden="true" class="cbp-line-highlighter"></span>',
+ );
+ });
+ });
+});
+
 // Handle font loading
 addEventListener('DOMContentLoaded', () => {
  if (!window.codeBlockPro?.pluginUrl) return;

src/front/style.css

@@ -20,7 +20,7 @@
  font-family: inherit;
  @apply overflow-auto text-inherit text-left m-0 whitespace-pre bg-none border-none border-0 rounded-none shadow-none;
 }
-.wp-block-kevinbatdorf-code-block-pro.padding-disabled pre {
+.wp-block-kevinbatdorf-code-block-pro.padding-disabled:not(.code-block-pro-editor) pre {
  @apply p-0;
 }
 .wp-block-kevinbatdorf-code-block-pro.padding-bottom-disabled pre {
@@ -61,10 +61,10 @@
 /* .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 pre .line.cbp-line-highlight::after {
- content: '';
+.wp-block-kevinbatdorf-code-block-pro pre .line.cbp-line-highlight .cbp-line-highlighter {
  background: var(--cbp-line-highlight-color, rgb(14 165 233/.2));
- width: calc(100% + 32px);
+ width: 100%;
+ min-width: calc(var(--cbp-block-width, 100%));
  left: -16px;
  @apply absolute top-0 h-full;
 }

src/util/arrayHelpers.ts

@@ -8,7 +8,7 @@ export const parseJSONArrayWithRanges = (
  .map((inner: number | number[]) => {
  // offset by startingLineNumber
  const offset = isNaN(Number(startingLineNumber))
- ? 1
+ ? 0
  : Math.max(Number(startingLineNumber) - 1, 0);
  // incoming might look like 1, 3, or [4, 8]
  if (typeof inner === 'number') return inner - offset;