Interactive code Gutenberg block

[adamziel]

Here I'm open sourcing the Gutenberg block behind my interactive Tag Processor tutorial

CleanShot.2023-03-24.at.16.58.38.mp4

Note how it supports multiple highlighting and execution modes!

Remaining tasks:

• A few timing issues where you can get an infinite loading indicator
• Using CodeMirror keyboard shortcuts interferes with Gutenberg, e.g. cmd+z

Follow-up tasks:

• PHP script to serve gzip- compressed .wasm files via a PHP script – for those environments where the server doesn't support compressing .wasm files
• Add lazy loading to avoid serving 6MB to every visitor
• Extensibility: Allow custom output formatters and entire bundles of execution scripts+libraries+formatters. (example: https://github.com/adamziel/interactive-code-batteries)

[eliot-akira]

Using CodeMirror keyboard shortcuts interferes with Gutenberg, e.g. cmd+z

Here's a solution I found when I encountered the same issue with an instance of CodeMirror 5 inside a Gutenberg block. It's based on this issue comment in the Gutenberg repo: Undo / redo (keyboard shortcuts) affecting the whole document rather than the focussed TextControl.

import { KeyboardShortcuts } from '@wordpress/components'
import { rawShortcut } from '@wordpress/keycodes'

const stop = (e) => e.stopImmediatePropagation()
const shortcutOverrides = {
  tab: stop,
  [rawShortcut.shift('tab')]: stop,
  [rawShortcut.primary('[')]: stop,
  [rawShortcut.primary(']')]: stop,
  [rawShortcut.primary('a')]: stop,
  [rawShortcut.primary('d')]: stop,
  [rawShortcut.primary('z')]: stop,
  [rawShortcut.primaryShift('z')]: stop,
  // ...
}

<KeyboardShortcuts shortcuts={ shortcutOverrides }>
  <CodeMirror />
</KeyboardShortcuts>

The workaround probably belongs in packages/interactive-code-block/src/lib/components/live-code-snippet/index.tsx.

For a list of keycodes and modifiers provided by the rawShortcut object, I found it helpful to read through the source for the keycodes package.

[adamziel]

This is amazing @eliot-akira, thank you!

[adamziel]

@eliot-akira that was it – plus a global 'cut' event handler (73d181e)

[eliot-akira]

Glad to hear the little tip about Gutenberg keyboard shortcuts was useful. And good to know about capturing browser cut/copy/paste events - I'll be copying that snippet for my own use. :)

From the issue where I got the idea, I think other people could benefit from the wrapper component WithoutGutenbergKeyboardShortcuts (in the file packages/interactive-code-block/src/lib/block/without-gutenberg-keyboard-shortcuts.tsx) - maybe even in the Gutenberg repo itself, so that block authors have a standard way to suppress/override keyboard shortcuts. In one of the last comments, someone mentioned that the popular plugin Advanced Custom Fields was having the same issue.

[adamziel]

npm run lint errors out for some reason AND markdown formatting rules somehow changed.

Other than that, this one seems good for merging.

>  NX   Failed to load plugin '@nrwl/nx' declared in 'packages/playground/client/.eslintrc.json » ../../../.eslintrc.json#overrides[1]': 
Cannot find module 'nx/src/plugins/js/project-graph/build-dependencies/target-project-locator'

[adamziel]

This one is not ready for plugin directory yet (see the follow-up tasks at the top), but it's ready for trunk. Let's merge!