gw-rich-text-html-fields.php: Added improvements for Rich Text HTML Fields Snippet.
#1132
Conversation
… Fields Snippet.
WalkthroughThis update introduces a mechanism to track and synchronize the TinyMCE editor mode ('visual' or 'HTML') in the Gravity Forms rich text field. It adds a global variable for editor mode, a function to save editor content based on mode, and ensures mode state is preserved and updated during user interactions. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI (Editor Tabs)
participant JS Script
participant TinyMCE
participant Field Properties
User->>UI (Editor Tabs): Switches editor mode (Visual/HTML)
UI (Editor Tabs)->>JS Script: Detects mode change
JS Script->>gwRichTextMode: Updates mode variable
JS Script->>TinyMCE: Waits for editor to be ready (polling)
JS Script->>TinyMCE: Switches editor mode
JS Script->>Field Properties: Saves current mode to field property
User->>TinyMCE: Edits content
TinyMCE->>JS Script: Triggers content change event
JS Script->>Field Properties: Calls SetFieldContentProperty to save content based on current mode
Possibly related PRs
Suggested reviewers
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
gravity-forms/gw-rich-text-html-fields.php (3)
63-66: Consider using a more scoped approach to avoid global variable pollution.The global variable
gwRichTextModecould potentially conflict with other scripts. Consider using a namespace or scoping it within an IIFE to avoid global pollution.- var gwRichTextMode; + var GWRichText = GWRichText || {}; jQuery( document ).on( 'gform_load_field_settings', function( event, field ) { - gwRichTextMode = field.gwRichTextMode || 'tmce'; + GWRichText.mode = field.gwRichTextMode || 'tmce';
115-130: Improve timeout handling in the polling mechanism.The polling mechanism is well-implemented, but the timeout case doesn't provide any fallback behavior or error handling. Consider adding a callback or logging when the timeout occurs.
const waitForEditorToBeReady = (callback, timeout = 5000) => { const start = Date.now(); const interval = setInterval(() => { const editor = typeof tinymce !== 'undefined' && tinymce.get(editorId); if (editor) { clearInterval(interval); callback(); } else if (Date.now() - start > timeout) { clearInterval(interval); + console.warn('TinyMCE editor initialization timed out'); } }, 100); };
131-148: Add error handling and consider scoping the global function.The function logic is correct, but it lacks error handling for the TinyMCE editor instance and uses global scope.
// Set the content when save. - window.SetFieldContentProperty = function () { + window.SetFieldContentProperty = function () { var mode = jQuery('#wp-' + editorId + '-wrap').hasClass('html-active') ? 'html' : 'tmce'; var content = ''; if (mode === 'html') { content = jQuery('#' + editorId).val(); - } else if (tinymce.get(editorId)) { + } else { + var editor = tinymce.get(editorId); + if (editor) { - content = tinymce.get(editorId).getContent(); + content = editor.getContent(); + } } SetFieldProperty('content', content); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
gravity-forms/gw-rich-text-html-fields.php(3 hunks)
🔇 Additional comments (2)
gravity-forms/gw-rich-text-html-fields.php (2)
150-158: Good improvement for mode state persistence.The addition of saving the current mode to the field property ensures state persistence across form editor sessions. The implementation correctly identifies the clicked button and updates the field property accordingly.
129-129: Ensure consistent renaming ofgwRichTextModewhen adding a namespaceIf you introduce a namespaced global (e.g.
window.MyPlugin.richTextMode), be sure to update every reference ingravity-forms/gw-rich-text-html-fields.php:
- Declaration:
var gwRichTextMode;- Initialization from field settings:
gwRichTextMode = field.gwRichTextMode || 'tmce';- Mode switch call:
waitForEditorToBeReady(() => window.switchEditors.go(editorId, gwRichTextMode === 'html' ? 'html' : 'tmce' ) );- Saving back to the field property:
SetFieldProperty('gwRichTextMode', mode)Verify that each instance is updated to use your chosen namespace.
|
@saifsultanc A few issues:
|
Context
⛑️ Ticket(s): https://secure.helpscout.net/conversation/2987432785/86002
Summary
Primarily inspired from #1071, with some improvements. Takes into account the recent updates to the snippet here 55c2438
https://www.loom.com/share/fbb020ebea884e76a1ed2fe0eae1e9fb