wp-seo-framework-title-inheritance.js

/*
	In Wordpress, using the "The SEO Framework" plugin, we want to break the inheritance
	between the Meta Title and that of OpenGraph/Twitter Title (we also do this for Description but the approach is the same).
  
	While the PHP code appears to work, the 'placeholder' 
	on the field INPUT and TEXTAREA elements still reflects the original behaviors.
  
	This (hacky) code solves for that though a better approach is desired.
	This would break if element IDs were to change in the future.
	You also need to ensure you DO NOT run this code until the element exists.

	Companion PHP code:
	https://gist.github.com/donohoe/a6cfcf5e920e4e3ee29f2bedc1847a53
*/

function() {
	var el = document.getElementById('tsf-inpost-box') || false;
	if (el) {

		var og_title = document.getElementById('autodescription_og_title') || {};
		var og_desc = document.getElementById('autodescription_og_description') || {};
		var tw_title = document.getElementById('autodescription_twitter_title') || {};
		var tw_desc = document.getElementById('autodescription_twitter_description') || {};
		var dekEl = document.querySelector('#row_dek_field textarea') || false;
		var hedEl = document.querySelector('h1.wp-block-post-title') || false;

		setInterval(function(){
			if (dekEl) {
				og_desc.placeholder = dekEl.value;
				tw_desc.placeholder = (og_desc.value.length > 0) ? og_desc.value : dekEl.value;
			}
			if (hedEl) {
				og_title.placeholder = hedEl.innerText;
				tw_title.placeholder = (og_title.value.length > 0) ? og_title.value : hedEl.innerText;
			}
		}, (1000/60))

	} else {
		console.log('Hiding SEO plugin social placeholders');
		document.body.className += ' hide-seo-plugin-placeholders';
	}
}

In case anyone is wondering, the fallback is to force hide the placeholder attribute vales on the INPUT and TEXTAREA elements. We attempt a JS-based solution (above) to over-write placeholder values. If that fails (like if you call the function before the HTML has been rendered for this part of the page), fallback invokes CSS-based solution by adding a new class on BODY. This CSS will suppress the placeholder values for OG and Twitter.

Use at your own risk. It's a total hack and will break if element ID names change in future releases.

.hide-seo-plugin-placeholders #autodescription_og_title::placeholder,
.hide-seo-plugin-placeholders #autodescription_og_description::placeholder,
.hide-seo-plugin-placeholders #autodescription_twitter_title::placeholder,
.hide-seo-plugin-placeholders #autodescription_twitter_description::placeholder,
.hide-seo-plugin-placeholders #autodescription_og_title:focus::placeholder,
.hide-seo-plugin-placeholders #autodescription_og_description:focus::placeholder,
.hide-seo-plugin-placeholders #autodescription_twitter_title:focus::placeholder,
.hide-seo-plugin-placeholders #autodescription_twitter_description:focus::placeholder {
	color: transparent !important;
	outline: none !important;
	box-shadow:none !important;
	text-shadow: none !important;
}

Instead of using intervals, you may like to use the more advanced https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver.
For performance, I then recommend assigning in config only:

const config = { attributes: true, childList: false, subtree: false };

Perhaps even attributes can be set to false because TSF invokes an onchange event after every update -- though I'm not sure if that also invokes a mutation by default.