LynetteCullens
commented
3 weeks ago https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues/291#issuecomment-2251944924
Work Around Script that is Referenced in the above comment for anyone who is interested. Should Be Set to Run on Note Open Modified 8/22/24 To ONLY Work in Callout Elements
(() => {
console.log("Meta Bind Input in Live Preview script for callouts is running");
function setupListeners() {
function handleClick(e) {
if (e.target instanceof HTMLElement) {
let parent = e.target;
// Check if the clicked element is inside a callout
const callout = parent.closest('[data-callout]');
if (!callout) {
return; // Exit if not in a callout
}
while (parent !== null) {
if (parent.classList.contains('mb-input') || parent.classList.contains('editor-input')) {
e.stopPropagation();
e.preventDefault();
const editorInput = parent.closest('.editor-input');
if (editorInput) {
const textarea = editorInput.querySelector('textarea');
const displayDiv = editorInput.querySelector('div.svelte-1tfnqy0');
if (textarea && displayDiv) {
// Get the original Markdown content from the textarea
const originalContent = textarea.value;
// Hide the display div and show the textarea
displayDiv.style.display = 'none';
textarea.style.display = 'block';
textarea.value = originalContent;
textarea.focus();
// Set up events to handle the editing
textarea.onblur = () => {
textarea.style.display = 'none';
displayDiv.style.display = 'block';
};
}
}
break;
}
parent = parent.parentElement;
}
}
}
function handleKeydown(e) {
if (e.target instanceof HTMLElement && e.target.tagName === 'TEXTAREA') {
// Check if the textarea is inside a callout
const callout = e.target.closest('[data-callout]');
if (!callout) {
return; // Exit if not in a callout
}
let parent = e.target;
while (parent !== null) {
if (parent.classList.contains('mb-input') || parent.classList.contains('editor-input')) {
e.stopPropagation();
break;
}
parent = parent.parentElement;
}
}
}
document.addEventListener('click', handleClick, true);
document.addEventListener('keydown', handleKeydown, true);
console.log("Event listeners for callouts attached");
}
// Delay setup slightly to ensure DOM is ready
setTimeout(setupListeners, 2000);
// Return a cleanup function
return () => {
document.removeEventListener('click', handleClick, true);
document.removeEventListener('keydown', handleKeydown, true);
console.log("Event listeners for callouts removed");
};
})();
Please fill out these Check-boxes
Plugin Version
1.1.3
This Issue Occurs on
Debug Info
Describe the Issue
Can't interact with input fields when they're placed inside of callouts in Live Preview mode.
Steps to Reproduce
Expected Behavior
I used to be able to interact with the field in Live Preview Mode. So, I expected the field to be interactable without having to switch to Reading View.
Reference: #291