Interactive code Gutenberg block

.gitignore

@@ -12,6 +12,7 @@ dist.zip
 
 # dependencies
 node_modules
+/__interactive-code-batteries
 
 # IDEs and editors
 /.idea

package.json

@@ -37,6 +37,17 @@
 	},
 	"private": true,
 	"dependencies": {
+		"@codemirror/autocomplete": "6.4.2",
+		"@codemirror/commands": "6.2.2",
+		"@codemirror/lang-css": "6.1.1",
+		"@codemirror/lang-html": "6.4.2",
+		"@codemirror/lang-javascript": "6.1.4",
+		"@codemirror/lang-php": "6.0.1",
+		"@codemirror/lang-sql": "6.4.0",
+		"@codemirror/language": "6.6.0",
+		"@codemirror/state": "6.2.0",
+		"@codemirror/theme-one-dark": "6.1.1",
+		"@codemirror/view": "6.9.3",
 		"classnames": "^2.3.2",
 		"comlink": "^4.4.1",
 		"express-fileupload": "1.4.0",
@@ -47,6 +58,11 @@
 		"request": "2.88.2",
 		"unzipper": "0.10.11"
 	},
+	"resolutions": {
+		"@codemirror/state": "6.2.0",
+		"@codemirror/theme-one-dark": "6.1.1",
+		"@codemirror/view": "6.9.3"
+	},
 	"devDependencies": {
 		"@convex-dev/typedoc-plugin-markdown": "3.14.0",
 		"@knodes/typedoc-plugin-pages": "0.23.1",
@@ -74,11 +90,20 @@
 		"@types/react": "^18.0.28",
 		"@types/react-dom": "^18.0.11",
 		"@types/react-modal": "^3.13.1",
+		"@types/wordpress__block-editor": "11.5.0",
+		"@types/wordpress__blocks": "12.5.0",
 		"@typescript-eslint/eslint-plugin": "^5.36.1",
 		"@typescript-eslint/parser": "^5.36.1",
 		"@vitejs/plugin-react": "^3.1.0",
 		"@vitest/coverage-c8": "~0.25.8",
 		"@vitest/ui": "^0.25.8",
+		"@wordpress/block-editor": "11.6.0",
+		"@wordpress/blocks": "12.6.0",
+		"@wordpress/components": "23.6.0",
+		"@wordpress/core-data": "6.6.0",
+		"@wordpress/data": "8.6.0",
+		"@wordpress/element": "5.6.0",
+		"@wordpress/notices": "3.29.0",
 		"chalk": "5.2.0",
 		"dts-bundle-generator": "^7.2.0",
 		"esbuild": "^0.17.5",
@@ -104,6 +129,7 @@
 		"react-test-renderer": "18.2.0",
 		"rimraf": "^4.4.0",
 		"rollup-plugin-dts": "^5.2.0",
+		"rollup-plugin-external-globals": "0.7.3",
 		"rollup-plugin-ts": "^3.2.0",
 		"ts-jest": "^29.0.5",
 		"ts-json-schema-generator": "1.2.0",
@@ -116,7 +142,8 @@
 		"vite": "^4.0.1",
 		"vite-plugin-dts": "~1.7.1",
 		"vite-plugin-eslint": "^1.8.1",
-		"vite-plugin-static-copy": "^0.13.1",
+		"vite-plugin-external": "1.2.8",
+		"vite-plugin-static-copy": "0.13.1",
 		"vite-plugin-wasm": "^3.2.2",
 		"vite-tsconfig-paths": "^4.0.2",
 		"vitepress": "1.0.0-alpha.60",

packages/interactive-code-block/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"rules": {}
+		}
+	]
+}

packages/interactive-code-block/README.md

@@ -0,0 +1,11 @@
+# interactive-code-block
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build interactive-code-block` to build the library.
+
+## Running unit tests
+
+Run `nx test interactive-code-block` to execute the unit tests via [Jest](https://jestjs.io).

packages/interactive-code-block/package.json

@@ -0,0 +1,6 @@
+{
+	"name": "@wp-playground/interactive-code-block",
+	"version": "0.0.1",
+	"type": "module",
+	"private": true
+}

packages/interactive-code-block/project.json

@@ -0,0 +1,55 @@
+{
+	"name": "interactive-code-block",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "packages/interactive-code-block/src",
+	"projectType": "library",
+	"targets": {
+		"build": {
+			"executor": "nx:noop",
+			"dependsOn": ["build:zip"]
+		},
+		"build:zip": {
+			"executor": "@nrwl/workspace:run-commands",
+			"options": {
+				"cwd": "dist/packages",
+				"commands": [
+					"rm interactive-code-block.zip || true",
+					"zip interactive-code-block.zip -r interactive-code-block"
+				]
+			},
+			"dependsOn": ["build:bundle"]
+		},
+		"build:bundle": {
+			"executor": "@nrwl/vite:build",
+			"outputs": ["{options.outputPath}"],
+			"options": {
+				"outputPath": "dist/packages/interactive-code-block"
+			}
+		},
+		"dev": {
+			"executor": "@nrwl/vite:build",
+			"outputs": ["{options.outputPath}"],
+			"options": {
+				"outputPath": "dist/packages/interactive-code-block",
+				"watch": true,
+				"minify": false
+			}
+		},
+		"test": {
+			"executor": "@nrwl/vite:test",
+			"outputs": ["coverage/packages/interactive-code-block"],
+			"options": {
+				"passWithNoTests": true,
+				"reportsDirectory": "../../coverage/packages/interactive-code-block"
+			}
+		},
+		"lint": {
+			"executor": "@nrwl/linter:eslint",
+			"outputs": ["{options.outputFile}"],
+			"options": {
+				"lintFilePatterns": ["packages/interactive-code-block/**/*.ts"]
+			}
+		}
+	},
+	"tags": []
+}

packages/interactive-code-block/public/block.php

@@ -0,0 +1,115 @@
+<?php
+
+add_action('init', function () {
+    $asset_file = require plugin_dir_path(__FILE__) . 'index.asset.php';
+    foreach ($asset_file['dependencies'] as $dep) {
+        if (wp_script_is($dep, 'registered')) {
+            $deps[] = $dep;
+        }
+    }
+    // Register block scripts
+    $scripts = [
+        'interactive-code-block' => $asset_file['files']['view'],
+        'interactive-code-block-editor' => $asset_file['files']['editor'],
+    ];
+    foreach ($scripts as $script => $file) {
+        wp_register_script(
+            $script,
+            plugins_url($file, __FILE__),
+            $deps,
+            '' // Version is included in the file name
+        );
+    }
+
+    // Load block scripts as ES modules
+    add_filter('script_loader_tag', function ($tag, $handle, $src) use ($scripts) {
+        if (!array_key_exists($handle, $scripts)) {
+            return $tag;
+        }
+
+        // Remove any query string from the URL
+        $new_url = current(explode('?', $src));
+        $tag = '<script type="module" src="' . esc_url($new_url) . '"></script>';
+        return $tag;
+    }, 10, 3);
+
+    $asset_file = require plugin_dir_path(__FILE__) . 'index.asset.php';
+    $deps = [];
+    foreach ($asset_file['dependencies'] as $dep) {
+        if (wp_style_is($dep, 'registered')) {
+            $deps[] = $dep;
+        }
+    }
+
+    // Register block styles
+    $styles = [
+        'interactive-code-block' => 'view',
+        'interactive-code-block-editor' => 'editor',
+    ];
+    foreach ($styles as $style => $file) {
+        wp_register_style(
+            $style,
+            plugins_url('assets/' . $file . '.css', __FILE__),
+            $deps,
+            $asset_file['version']
+        );
+    }
+
+    // Register the block itself
+    register_block_type_from_metadata(__DIR__ . '/assets/block.json', [
+        'render_callback' => function ($attributes) {
+            if (!isset($attributes['code'])) {
+                return '';
+            }
+
+            $execution_scripts = get_option(LCS_Execution_Scripts_Endpoint::OPTION_KEY, []);
+            $script_id = $attributes['executionScript'];
+            $script = $execution_scripts[$script_id] ?? '';
+
+            $all_libraries = lcs_get_libraries_list();
+            $library_ids = array_unique(
+                array_merge(
+                    $attributes['libraries'],
+                    $script['libraries'] ?? []
+                )
+            );
+            $libraries = array_values(array_filter($all_libraries, function ($library) use ($library_ids) {
+                return in_array($library['id'], $library_ids);
+            }));
+
+            // The base64_decode is to prevent incorrect escaping by Gutenberg
+            // E.g. representing <h1 title="&lt;div&gt; &quot;html&quot;"> seems
+            // to be a problem for Gutenberg – it will store it as
+            // &lt;h1 title=&quot;&amp;lt;div&amp;gt; &amp;quot;html&amp;quot;&quot;$gt;
+            return '
+            <div 
+                class="wp-playground-interactive-code-snippet" 
+                data-code="' . esc_attr($attributes['code']) . '" 
+                data-file-type="' . esc_attr($attributes['fileType']) . '" 
+                data-libraries="' . esc_attr(json_encode($libraries)) . '"
+                data-execution-script="' . esc_attr(json_encode($script)) . '"
+                data-execution-script-id="' . esc_attr(json_encode($script_id)) . '"
+                data-cached-output="' . esc_attr($attributes['cachedOutput']) . '"
+                data-show-cached-output="' . esc_attr($attributes['showCachedOutput']) . '"
+            >
+                <b>Loading interactive code snippet...</b>     
+            </div>
+            ';
+        }
+        // Render a static code snippet while the interactive one is loading:
+        // Useful only for PHP and only if the PHP version >= webhost version.
+        // ' . highlight_string(base64_decode($attributes['code']), true) . '
+    ]);
+});
+
+
+function lce_editor_init($hook)
+{
+    global $current_screen;
+    if (!$current_screen->is_block_editor()) {
+        return;
+    }
+
+    lce_preload_endpoints_data();
+}
+add_action('admin_enqueue_scripts', 'lce_editor_init');