Hello Matthias,
Thank you for reaching us!
I forwarded this to the development and after their investigation, the conclusion is that MutationObserver does not seem to detect changes made by React as implemented now.
However, we have noted your request and will implement it in the future when we have time.
Thank you for your understanding.
Have a great day ahead!
Cheers,
Hi again @sdenis !
This sounds a bit dismissive 🙁
Is there any alternative we can implement? The translations are all coming from our backend, can we somehow register them to the translation editor and afterwards listen to changes, so we can get it into the live preview?
Hi @sdenis !
More and more users of our plugin are running into this issue. Isn’t there an alternative so e.g. we can register a string, and it shows up in the translation editor? This would at least allow our users to create translations. 😊
Hi,
Are you are looking towards implementing your own way to replace the original strings with the translation? Do you just need our help to show those strings in TP Translation Editor and later use a server-side TP function to retrieve them?
If so, I can assist you.
Like @sdenis said, live detection in the front-end is just not possible for now if you are using React to output them. But if you want to translate your strings on server-side and prepare the translations to be used in front-end, then there is a workaround.
I assume you need translation for user-inputted strings, not for localized (gettext) strings.
/* This code is used to register a string that will be visible in the TP Translation Editor sidebar in the dropdown.
Can be placed anywhere inside the <body> tag, such as on the wp_footer hook.
Automatic translation will pick them up too, but only if Translation Editor was opened as least once so that these
strings got a chance to be registered. */
if ( isset( $_GET['trp-edit-translation'] ) && $_GET['trp-edit-translation'] == 'preview' ){
//$custom_content_1, $custom_content_2 are strings containing just text, no html
echo '<span style="display:none">' . $custom_content_1 .'</span>';
echo '<span style="display:none">' . $custom_content_2 .'</span>';
}
/* ------------------------------------- */
/* This code needs to be executed on the server-side, when preparing the content to be displayed to the user on the front-end. */
$trp = TRP_Translate_Press::get_trp_instance();
$trp_render = $trp->get_component( 'translation_render' );
// retrieves the translation of any original text in the currently displayed language.
$translated_custom_content_1 = $trp_render->translate_page( $custom_content_1 );
$translated_custom_content_2 = $trp_render->translate_page( $custom_content_2 );
I hope this code can get you started on creating a solution. If you have further questions, perhaps it would be better to write us an email.
Hi @razvanmo-1 !
Yeah, your coding could work. But I think about something else: Can I somehow listen to changes in the preview frame of a given translation “ID” so I can refresh the page automatically? I want to provide a “minimal” live preview to our customers?
Have you thought about a native implementation / hook for React? React is coming more and more to WordPress 😊
Regards,
Matthew 😊
Hi again @razvanmo-1 !
Do you have a workaround for my issue from the previous post with the live preview? 😊
