Fix ACF

Author: nextgenthemes

changelog.md

@@ -3,6 +3,10 @@
 * [ARVE Pro changelog](https://nextgenthemes.com/plugins/arve-pro/#changelog)
 * [ARVE Random Videos changelog](https://nextgenthemes.com/plugins/arve-random-video/#changelog)
 
+### 2025-03-16 10.6.7 ###
+
+* Fixed: Compatibility with Advanced Custom Fields WYSIWYG editors. The ARVE shortcode creation button now finally works there.
+
 ### 2025-03-15 10.6.6 ###
 
 * Improved: Tested with WP 6.8-beta2

php/Admin/fn-admin.php

@@ -388,9 +388,8 @@ function add_action_links( array $links ): array {
 
 function admin_enqueue_styles(): void {
 
-	if ( did_action( 'wp_enqueue_editor' ) ) {
-		return;
-	}
+	// This shit prevents 'arve-admin-css was added to the iframe incorrectly.' error but it doesn't work with enqueue_block_editor_assets
+	// if ( did_action( 'wp_enqueue_editor' ) ) { return; }
 
 	wp_enqueue_style(
 		'arve-admin',
@@ -431,13 +430,11 @@ function admin_enqueue_scripts(): void {
 		ver( PLUGIN_DIR . '/build/admin.js', VERSION ),
 		array( 'strategy' => 'defer' ),
 	);
-
 	wp_add_inline_script(
 		'arve-admin',
 		'var arveSCSettings = ' . wp_json_encode( $settings_data ) . ';',
 		'before'
 	);
-
 	wp_enqueue_script( 'arve-admin' );
 
 	if ( is_plugin_active( 'shortcode-ui/shortcode-ui.php' ) ) {

php/Admin/fn-shortcode-creator.php

@@ -11,7 +11,14 @@
 
 const DIALOG_NAMESPACE = 'nextgenthemes_arve_dialog';
 
-function add_media_button(): void {
+/**
+ * Adds a media button to the Classic Editor or other editors that use the same API.
+ *
+ * The button triggers a shortcode creator dialog when clicked.
+ *
+ * @param string $editor_id The ID of the editor to add the button to.
+ */
+function add_media_button( string $editor_id ): void {
 
 	dialog_interactivity();
 
@@ -29,6 +36,7 @@ function add_media_button(): void {
 			),
 			'data-wp-interactive' => DIALOG_NAMESPACE,
 			'data-wp-on--click'   => 'actions.openShortcodeDialog',
+			'data-editor'         => $editor_id,
 		],
 	);
 
@@ -79,6 +87,13 @@ function create_shortcode_dialog(): void {
 	ob_start();
 
 	?>
+	<button 
+		type="button"
+		data-wp-interactive="<?= esc_attr( DIALOG_NAMESPACE ); ?>"
+		data-wp-on--click="actions.openShortcodeDialog"
+		data-editor="content"
+		hidden
+	></button>
 	<dialog 
 		class="arve-sc-dialog"
 		data-wp-interactive="<?= esc_attr( DIALOG_NAMESPACE ); ?>"
@@ -91,15 +106,15 @@ class="arve-sc-dialog"
 				<button type="button" class="media-modal-close" data-wp-on--click="actions.toggleHelp">
 					<span class="media-modal-icon dashicons dashicons-editor-help">
 						<span class="screen-reader-text">
-							Toggle Help
+							<?php esc_html_e( 'Toggle Help', 'advanced-responsive-video-embedder' ); ?>
 						</span>
 					</span>
 				</button>
 
 				<button type="button" class="media-modal-close" data-wp-on--click="actions.closeShortcodeDialog">
 					<span class="media-modal-icon">
 						<span class="screen-reader-text">
-							Close dialog
+							<?php esc_html_e( 'Close dialog', 'advanced-responsive-video-embedder' ); ?>
 						</span>
 					</span>
 				</button>

vendor/nextgenthemes/wp-settings/src/settings.ts

@@ -4,6 +4,7 @@ import { store, getContext, getConfig } from '@wordpress/interactivity';
 const domParser = new DOMParser();
 const d = document;
 const qs = d.querySelector.bind( d ) as typeof document.querySelector;
+const dialog = qs< HTMLDialogElement >( 'dialog[data-wp-interactive="nextgenthemes_arve_dialog"]' );
 
 setupInteractivityApi();
 setBodyBackgroundColorAsCssVar();
@@ -17,6 +18,23 @@ function setBodyBackgroundColorAsCssVar() {
 	}
 }
 
+// ACF
+window.jQuery( document ).on( 'click', '.arve-btn:not([data-editor="content"])', ( e: Event ) => {
+	e.preventDefault();
+
+	const openBtn = qs< HTMLButtonElement >(
+		'[data-wp-on--click="actions.openShortcodeDialog"][data-editor="content"]'
+	);
+	const insertBtn = qs< HTMLButtonElement >( '[data-wp-on--click="actions.insertShortcode"]' );
+
+	if ( ! openBtn || ! insertBtn || ! dialog ) {
+		console.error( 'Open btn, insert btn od dialog not found' ); // eslint-disable-line
+		return;
+	}
+
+	openBtn.dispatchEvent( new Event( 'click' ) );
+} );
+
 function setupInteractivityApi() {
 	const namespace = qs< HTMLElement >( '[data-wp-interactive^="nextgenthemes"]' )?.dataset
 		?.wpInteractive;
@@ -51,18 +69,43 @@ function setupInteractivityApi() {
 			toggleHelp: () => {
 				state.help = ! state.help;
 			},
-			openShortcodeDialog: () => {
-				state.dialog = document.querySelector(
-					'dialog[data-wp-interactive="nextgenthemes_arve_dialog"]'
-				);
-				state.dialog.showModal();
+			openShortcodeDialog: ( event: Event ) => {
+				const editorId = event.target instanceof HTMLElement && event.target.dataset.editor;
+
+				if ( ! dialog || ! editorId ) {
+					console.error( 'Dialog or editorId not found' ); // eslint-disable-line
+					return;
+				}
+
+				dialog.dataset.editor = editorId;
+				dialog.showModal();
 			},
 			insertShortcode: () => {
-				window.wp.media.editor.insert( state.shortcode );
-				state.dialog.close();
+				const editorId = dialog?.dataset.editor;
+
+				if ( ! editorId ) {
+					console.error( 'Editor ID not found' ); // eslint-disable-line
+				} else if ( 'content' === editorId ) {
+					window.wp.media.editor.insert( state.shortcode );
+				} else {
+					// Ensure TinyMCE is loaded and the editor exists
+					if (
+						typeof window.tinymce === 'undefined' ||
+						! window.tinymce.get( editorId )
+					) {
+						console.error( 'TinyMCE not initialized for field: ' + editorId ); // eslint-disable-line
+						return;
+					}
+
+					window.tinymce.get( editorId ).insertContent( state.shortcode );
+				}
+
+				actions.closeShortcodeDialog();
 			},
 			closeShortcodeDialog: () => {
-				state.dialog.close();
+				if ( dialog ) {
+					dialog.close();
+				}
 			},
 			changeTab: () => {
 				const context = getContext< optionContext >();
@@ -101,8 +144,8 @@ function setupInteractivityApi() {
 				}
 			},
 			selectImage: () => {
-				if ( state.dialog ) {
-					state.dialog.close();
+				if ( dialog ) {
+					dialog.close();
 				}
 
 				const context = getContext< optionContext >();
@@ -118,13 +161,13 @@ function setupInteractivityApi() {
 						// We convert uploadedImage to a JSON object to make accessing it easier
 						const attachmentID = uploadedImage.toJSON().id;
 						state.options[ context.option_key ] = attachmentID;
-						if ( state.dialog ) {
-							state.dialog.showModal();
+						if ( dialog ) {
+							dialog.showModal();
 						}
 					} )
 					.on( 'close', function () {
-						if ( state.dialog ) {
-							state.dialog.showModal();
+						if ( dialog ) {
+							dialog.showModal();
 						}
 					} );
 			},
@@ -301,6 +344,10 @@ declare global {
 		wp: {
 			media: wpMedia;
 		};
+		jQuery: any;
+		tinymce: {
+			get: ( id: string ) => any;
+		};
 	}
 }
 
@@ -317,7 +364,6 @@ interface storeInterface {
 	state: {
 		options: Record< string, string | number | boolean >;
 		help: boolean;
-		dialog: HTMLDialogElement;
 		isSaving: boolean;
 		message: string;
 		shortcode: string;