debug: add comprehensive TinyMCE timing and markdown testing
- Improved TinyMCE initialization detection with hvacTinyMCEReady flag - Added robust retry mechanism for content insertion (20 attempts with 250ms intervals) - Enhanced debugging with console logging for markdown conversion process - Added global testMarkdownConversion() function for browser console testing - Implemented proper timing coordination between WordPress editor and AI Assistant 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
d5239d7a3f
commit
875315e2f5
2 changed files with 104 additions and 12 deletions
|
|
@ -571,19 +571,47 @@ jQuery(document).ready(function($) {
|
||||||
// Convert markdown to HTML for proper rich text editor formatting
|
// Convert markdown to HTML for proper rich text editor formatting
|
||||||
const htmlContent = this.markdownToHtml(data.description);
|
const htmlContent = this.markdownToHtml(data.description);
|
||||||
|
|
||||||
// Try TinyMCE first if available
|
console.log('Original markdown:', data.description);
|
||||||
if (typeof tinyMCE !== 'undefined' && tinyMCE.get('event_description')) {
|
console.log('Converted HTML:', htmlContent);
|
||||||
tinyMCE.get('event_description').setContent(htmlContent);
|
|
||||||
} else {
|
|
||||||
// Update the hidden textarea with HTML content
|
|
||||||
$('#event_description, [name="event_description"]').val(htmlContent);
|
|
||||||
|
|
||||||
// Also update the visible rich text editor div if it exists
|
// Wait for TinyMCE to be fully initialized
|
||||||
const $richEditor = $('#event-description-editor');
|
const applyToTinyMCE = () => {
|
||||||
if ($richEditor.length && $richEditor.is('[contenteditable]')) {
|
if (typeof tinyMCE !== 'undefined' && tinyMCE.get('event_description') && window.hvacTinyMCEReady) {
|
||||||
$richEditor.html(htmlContent);
|
console.log('Setting TinyMCE content');
|
||||||
|
tinyMCE.get('event_description').setContent(htmlContent);
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
}
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Use a more robust waiting mechanism
|
||||||
|
const waitForTinyMCE = (maxAttempts = 20) => {
|
||||||
|
let attempts = 0;
|
||||||
|
const tryApply = () => {
|
||||||
|
attempts++;
|
||||||
|
if (applyToTinyMCE()) {
|
||||||
|
console.log(`TinyMCE content applied successfully on attempt ${attempts}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (attempts < maxAttempts) {
|
||||||
|
setTimeout(tryApply, 250);
|
||||||
|
} else {
|
||||||
|
console.log('TinyMCE not available after maximum attempts, falling back to textarea');
|
||||||
|
// Update the hidden textarea with HTML content
|
||||||
|
$('#event_description, [name="event_description"]').val(htmlContent);
|
||||||
|
|
||||||
|
// Also update the visible rich text editor div if it exists
|
||||||
|
const $richEditor = $('#event-description-editor');
|
||||||
|
if ($richEditor.length && $richEditor.is('[contenteditable]')) {
|
||||||
|
$richEditor.html(htmlContent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
tryApply();
|
||||||
|
};
|
||||||
|
|
||||||
|
waitForTinyMCE();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply start date and time (combine into datetime-local format)
|
// Apply start date and time (combine into datetime-local format)
|
||||||
|
|
@ -714,6 +742,11 @@ jQuery(document).ready(function($) {
|
||||||
* Convert markdown to HTML for rich text editor
|
* Convert markdown to HTML for rich text editor
|
||||||
*/
|
*/
|
||||||
markdownToHtml: function(markdown) {
|
markdownToHtml: function(markdown) {
|
||||||
|
// Test the function with sample input
|
||||||
|
if (window.hvacDebugMarkdown) {
|
||||||
|
console.log('Testing markdown conversion:');
|
||||||
|
console.log('Input:', markdown);
|
||||||
|
}
|
||||||
let html = markdown;
|
let html = markdown;
|
||||||
|
|
||||||
// Convert headers (#### -> h4, ### -> h3, ## -> h2, # -> h1)
|
// Convert headers (#### -> h4, ### -> h3, ## -> h2, # -> h1)
|
||||||
|
|
@ -818,7 +851,13 @@ jQuery(document).ready(function($) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return formattedParagraphs.join('\n');
|
const result = formattedParagraphs.join('\n');
|
||||||
|
|
||||||
|
if (window.hvacDebugMarkdown) {
|
||||||
|
console.log('Output:', result);
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -833,4 +872,38 @@ jQuery(document).ready(function($) {
|
||||||
|
|
||||||
// Initialize when document is ready
|
// Initialize when document is ready
|
||||||
HVACAIAssist.init();
|
HVACAIAssist.init();
|
||||||
|
|
||||||
|
// Add global test function for debugging
|
||||||
|
window.testMarkdownConversion = function(testMarkdown) {
|
||||||
|
window.hvacDebugMarkdown = true;
|
||||||
|
console.log('=== MARKDOWN CONVERSION TEST ===');
|
||||||
|
|
||||||
|
const testInput = testMarkdown || `## Event Overview
|
||||||
|
|
||||||
|
This is a **bold** text and *italic* text example.
|
||||||
|
|
||||||
|
#### Key Details
|
||||||
|
* First item in list
|
||||||
|
* Second item in list
|
||||||
|
* Third item in list
|
||||||
|
|
||||||
|
### Additional Information
|
||||||
|
Here's a regular paragraph with more details.`;
|
||||||
|
|
||||||
|
const result = HVACAIAssist.markdownToHtml(testInput);
|
||||||
|
console.log('=== TEST COMPLETE ===');
|
||||||
|
|
||||||
|
// Also test setting it to TinyMCE if available
|
||||||
|
if (typeof tinyMCE !== 'undefined' && tinyMCE.get('event_description')) {
|
||||||
|
console.log('Setting test content to TinyMCE...');
|
||||||
|
tinyMCE.get('event_description').setContent(result);
|
||||||
|
} else {
|
||||||
|
console.log('TinyMCE not available for testing');
|
||||||
|
}
|
||||||
|
|
||||||
|
window.hvacDebugMarkdown = false;
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('HVAC AI Assist loaded. Use testMarkdownConversion() to test markdown conversion.');
|
||||||
});
|
});
|
||||||
|
|
@ -1673,6 +1673,25 @@ HTML;
|
||||||
wp_editor('', 'event_description', $editor_settings);
|
wp_editor('', 'event_description', $editor_settings);
|
||||||
?>
|
?>
|
||||||
<small class="description">Use the editor above to format your event description with headings, lists, and formatting.</small>
|
<small class="description">Use the editor above to format your event description with headings, lists, and formatting.</small>
|
||||||
|
<script>
|
||||||
|
// Ensure TinyMCE is ready for AI Assistant
|
||||||
|
jQuery(document).ready(function($) {
|
||||||
|
// Store reference for AI Assistant
|
||||||
|
window.hvacTinyMCEReady = false;
|
||||||
|
|
||||||
|
// Check if TinyMCE is ready
|
||||||
|
function checkTinyMCEReady() {
|
||||||
|
if (typeof tinyMCE !== 'undefined' && tinyMCE.get('event_description')) {
|
||||||
|
window.hvacTinyMCEReady = true;
|
||||||
|
console.log('TinyMCE ready for event_description');
|
||||||
|
} else {
|
||||||
|
setTimeout(checkTinyMCEReady, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkTinyMCEReady();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</div>
|
</div>
|
||||||
<?php
|
<?php
|
||||||
return ob_get_clean();
|
return ob_get_clean();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue