gw-rich-text-html-fields.php: Added improvements for Rich Text HTML Fields Snippet.

Author: saifsultanc

gravity-forms/gw-rich-text-html-fields.php

@@ -60,7 +60,10 @@
 	</style>
 
 	<script>
+		var gwRichTextMode;
 		jQuery( document ).on( 'gform_load_field_settings', function( event, field ) {
+			gwRichTextMode = field.gwRichTextMode || 'tmce';
+
 			var id = 'field_rich_content';
 			wp.editor.remove( id );
 			jQuery( '#' + id ).val( field.content );
@@ -75,6 +78,7 @@
 				quicktags: true
 			} );
 		} );
+
 		jQuery( document).on( 'tinymce-editor-setup', function ( event, editor ) {
 			var editorId = 'field_rich_content';
 			if ( editor.id === editorId ) {
@@ -108,11 +112,49 @@
 					}
 				} );
 
+				// Wait until the TinyMCE editor is initialized before switching mode.
+				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);
+						}
+					}, 100);
+				};
+
+				waitForEditorToBeReady(() => window.switchEditors.go(editorId, gwRichTextMode === 'html' ? 'html' : 'tmce'));
+
+				// Set the content when save.
+				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)) {
+						content = tinymce.get(editorId).getContent();
+					}
+
+					SetFieldProperty('content', content);
+				};
+
+				// Update the content.
+				jQuery(document).on('change', `#${editorId}`, function () {
+					window.SetFieldContentProperty();
+				});
+
 				// Switch to visual/text mode.
 				jQuery(`#wp-${editorId}-wrap .switch-tmce, #wp-${editorId}-wrap .switch-html`).on('click', function() {
 					var mode = jQuery(this).hasClass('switch-tmce') ? 'tmce' : 'html';
 
 					window.switchEditors.go(editorId, mode);
+
+					// Save the current mode to field property.
+					SetFieldProperty('gwRichTextMode', mode)
 				});
 			}
 		} );