Add support for JavaScript in Modal

Author: doekenorg

assets/css/dataview.css

@@ -17,7 +17,7 @@
 		"@types/react-dom": "^18.3.0",
 		"@vitejs/plugin-react": "^4.3.0",
 		"@wordpress/data": "^10.2.0",
-		"@wordpress/dataviews": "^4.3.0",
+		"@wordpress/dataviews": "^4.6.0",
 		"eslint": "^8.57.0",
 		"eslint-plugin-react": "^7.34.2",
 		"eslint-plugin-react-hooks": "^4.6.2",

assets/js/dataview.js

@@ -6,13 +6,13 @@
  *
  * @since $ver$
  */
-import { get, replace_tags, datakit_fetch } from '@src/helpers';
-import { useState } from 'react';
+import { get, replace_tags, datakit_fetch, extract_javascript_fn, strip_javascript } from '@src/helpers';
+import { useEffect, useState } from 'react';
 
 export default function Modal( { items, closeModal, context } ) {
     const [ body, setBody ] = useState( null );
     const [ busy, setBusy ] = useState( false );
-
+    const [ script_fn, setScriptFn ] = useState( null );
     // Close modal on any element that has `data-close-modal` as a data-attribute.
     const handleClick = ( e ) => e.target.matches( '[data-close-modal]' ) && closeModal();
 
@@ -22,6 +22,7 @@ export default function Modal( { items, closeModal, context } ) {
     }
 
     const data = items[ 0 ];
+    const is_scripts_allowed = get( context, 'is_scripts_allowed', false );
     let url = get( context, 'url', null );
 
     if ( url === null ) {
@@ -41,11 +42,28 @@ export default function Modal( { items, closeModal, context } ) {
 
                 return response.json();
             } )
-            .then( ( { html } ) => setBody( html ) )
-            .catch( e => console.error( e ) )
+            .then( ( { html } ) => {
+                if ( is_scripts_allowed ) {
+                    setScriptFn( () => extract_javascript_fn( html ) );
+                } else {
+                    html = strip_javascript( html );
+                }
+                setBody( html );
+            } )
+            .catch( e => {
+                console.error( e );
+                setBody( 'Something went wrong.' );
+            } )
             .finally( () => setBusy( false ) )
     }
 
+    // Execute JavaScript.
+    useEffect( () => {
+        if ( 'function' === typeof script_fn && is_scripts_allowed ) {
+            script_fn();
+        }
+    }, [ body ] );
+
     if ( busy ) {
         return <div className='loading'>Loading...</div>;
     }

frontend/package.json

@@ -1,36 +1,24 @@
 import { useEffect } from 'react';
-import { get } from '@src/helpers.js';
+import { get, extract_javascript_fn, strip_javascript } from '@src/helpers.js';
 
 /**
  * JavaScript side of the HTML field.
  *
  * @since $ver$
  */
-
-const script_tag_regex = /(?:\r\n)*<script[^>]*>(.*?)<\/[\r\n\s]*script>(?:\r\n)*/isg;
-const script_inline_regex = /\s(on\w+\s*=\s*".*?"|href\s*=\s*"\s*javascript:.*?")/isg;
-
 export default function Html( { name, item, context } ) {
     const is_script_allowed = get( context, 'is_scripts_allowed', false );
     let content = item[ name ] || '';
-    let script_body = '';
+    let script_func = null;
 
     if ( is_script_allowed ) {
-        // Record all scripts from the tags
-        const scripts = content.match( script_tag_regex );
-        if ( scripts ) {
-            for ( const script of scripts ) {
-                script_body += script.replace( script_tag_regex, '$1' );
-            }
-        }
+        script_func = extract_javascript_fn( content );
     } else {
-        // Remove script tags from the html.
-        content = content.replace( script_tag_regex, '' ).replace( script_inline_regex, '' );
+        content = strip_javascript( content );
     }
 
     useEffect( () => {
-        if ( is_script_allowed && script_body ) {
-            const script_func = new Function( script_body );
+        if ( is_script_allowed && typeof script_func === 'function' ) {
             script_func();
         }
     }, [ content ] );

frontend/src/Components/Modal.jsx

@@ -60,3 +60,43 @@ export function datakit_fetch( url, options ) {
 
     return fetch( url, merged_options );
 }
+
+const script_tag_regex = /(?:\r\n)*<script[^>]*>(.*?)<\/[\r\n\s]*script>(?:\r\n)*/isg;
+const script_inline_regex = /\s(on\w+\s*=\s*".*?"|href\s*=\s*"\s*javascript:.*?")/isg;
+
+/**
+ * Returns a custom function containing the javascript from the content.
+ *
+ * @since $ver$
+ *
+ * @param {String} content The HTML content.
+ *
+ * @return {Function|null} The function or null.
+ */
+export function extract_javascript_fn( content ) {
+    let script_body = '';
+    const scripts = content.match( script_tag_regex );
+    if ( scripts ) {
+        for ( const script of scripts ) {
+            script_body += script.replace( script_tag_regex, '$1' );
+        }
+    }
+
+    if ( !script_body ) {
+        return null;
+    }
+    return new Function( script_body );
+}
+
+/**
+ * Returns the content stripped of JavaScripts.
+ *
+ * @since $ver$
+ *
+ * @param {String} content The HTML content.
+ *
+ * @return {String} The cleaned content.
+ */
+export function strip_javascript( content ) {
+    return content.replace( script_tag_regex, '' ).replace( script_inline_regex, '' );
+}

frontend/src/Fields/Html.jsx

@@ -284,6 +284,32 @@ public function bulk(): self {
 		return $action;
 	}
 
+	/**
+	 * Returns an instance that allows scripts to be executed.
+	 *
+	 * @since $ver$
+	 * @return self The action.
+	 */
+	public function allow_scripts(): self {
+		$clone                                = clone $this;
+		$clone->context['is_scripts_allowed'] = true;
+
+		return $clone;
+	}
+
+	/**
+	 * Returns an instance that removes scripts from the content.
+	 *
+	 * @since $ver$
+	 * @return self The action.
+	 */
+	public function deny_scripts(): self {
+		$clone                                = clone $this;
+		$clone->context['is_scripts_allowed'] = false;
+
+		return $clone;
+	}
+
 	/**
 	 * Returns an action that can be performed one item at a time.
 	 *

frontend/src/helpers.js

@@ -585,12 +585,13 @@ public function to_js( bool $is_pretty = false ): string {
 	 *
 	 * @since $ver$
 	 *
-	 * @param array  $fields The fields to show.
-	 * @param string $label  The label to call the action.
+	 * @param array         $fields   The fields to show.
+	 * @param string        $label    The label to call the action.
+	 * @param callable|null $callback Callback that receives the action as the single argument to perform changes on.
 	 *
 	 * @return self The DataView with the view action.
 	 */
-	public function viewable( array $fields, string $label = 'View' ): self {
+	public function viewable( array $fields, string $label = 'View', ?callable $callback = null ): self {
 		$this->add_view_fields( ...$fields );
 
 		$actions       = $this->actions ? iterator_to_array( $this->actions ) : [];
@@ -599,6 +600,13 @@ public function viewable( array $fields, string $label = 'View' ): self {
 		$view_action = Action::modal( 'view', $label, $view_rest_url, true )
 			->primary( 'info' );
 
+		if ( $callback ) {
+			$view_action = $callback( $view_action );
+			if ( ! $view_action instanceof Action ) {
+				throw new InvalidArgumentException( 'The provided callback should return an Action object.' );
+			}
+		}
+
 		$actions[] = $view_action;
 
 		$this->actions = Actions::of( ...$actions );