build: Support custom mobile Demo editor setup configuration (#54957)

* build: Support custom mobile Demo editor setup configuration

Applying optional setup configuration files allows developers to modify
the Demo editor environment via Hooks, e.g. to set custom `initialHtml`
for the editor.

* test: Disable local Demo editor configuration for tests

The `require.context` function is undefined in the test environment, as
it is a Metro-specific capability. The most straightforward way to avoid
test failures is to disable this code that relates to the local
development workflow.

* docs: Document Demo editor customization

Contributors will likely never discover or benefit from this
customization ability if it is not documented.

.gitignore

@@ -48,3 +48,4 @@ test/storybook-playwright/specs/__snapshots__
 test/storybook-playwright/specs/*-snapshots/**
 test/gutenberg-test-themes/twentytwentyone
 test/gutenberg-test-themes/twentytwentythree
+packages/react-native-editor/src/setup-local.js

docs/contributors/code/react-native/getting-started-react-native.md

@@ -71,6 +71,40 @@ npm run native ios -- -- --simulator="iPhone Xs Max"
 
 To see a list of all of your available iOS devices, use `xcrun simctl list devices`.
 
+### Customizing the Demo Editor
+
+By default, the Demo editor renders most of the supported core blocks. This is helpful to showcase the editor's capabilities, but can be distracting when focusing on a specific block or feature. One can customize the editor's intial state by leveraging the `native.block_editor_props` hook in a `packages/react-native-editor/src/setup-local.js` file.
+
+<details><summary>Example setup-local.js</summary>
+
+```js
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
+export default () => {
+	addFilter(
+		'native.block_editor_props',
+		'core/react-native-editor',
+		( props ) => {
+			return {
+				...props,
+				initialHtml,
+			};
+		}
+	);
+};
+
+const initialHtml = `
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Just a Heading</h2>
+<!-- /wp:heading -->
+`;
+```
+
+</details>
+
 ### Troubleshooting
 
 If the Android emulator doesn't start correctly, or compiling fails with `Could not initialize class org.codehaus.groovy.runtime.InvokerHelper` or similar, it may help to double check the set up of your development environment against the latest requirements in [React Native's documentation](https://reactnative.dev/docs/environment-setup). With Android Studio, for example, you will need to configure the `ANDROID_HOME` environment variable and ensure that your version of JDK matches the latest requirements.

packages/react-native-editor/metro.config.js

@@ -27,6 +27,7 @@ module.exports = {
 				inlineRequires: false,
 			},
 		} ),
+		unstable_allowRequireContext: true, // Used for optional setup configuration.
 	},
 	server: {
 		enhanceMiddleware: ( middleware ) => ( req, res, next ) => {

packages/react-native-editor/src/index.js

@@ -51,6 +51,12 @@ const registerGutenberg = ( {
 			// Initialize editor
 			this.editorComponent = setup();
 
+			// Apply optional setup configuration, enabling modification via hooks.
+			if ( typeof require.context === 'function' ) {
+				const req = require.context( './', false, /setup-local\.js$/ );
+				req.keys().forEach( ( key ) => req( key ).default() );
+			}
+
 			// Dispatch pre-render hooks.
 			doAction( 'native.pre-render', parentProps );