Issue #3489170: Added a popup warning when the content inside html embed is not saved.

Closes #3489170

js/html-embed-warning.js

+(function (Drupal) {
+  'use strict';
+
+  let hasUnsavedChanges = false;
+  let originalContent = '';
+  let warningPopup = null;
+
+  function createWarningPopup() {
+    const popup = document.createElement('div');
+    popup.className = 'form-item--error-message';
+    popup.style.cssText = `
+      position: absolute;
+      background: #fff;
+      color: #d72222;
+      padding: 0.3em 0.45em;
+      border: 1px solid #d72222;
+      border-radius: 2px;
+      font-size: 0.75rem;
+      margin-top: 0.15em;
+      animation: fade-in 0.2s ease-out;
+    `;
+
+    // Add keyframes for animation.
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes fade-in {
+        from { opacity: 0; transform: translateY(-5px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+    `;
+    document.head.appendChild(style);
+
+    popup.textContent = Drupal.t('Please save your changes.');
+    return popup;
+  }
+
+  function showWarning(targetElement) {
+    if (!warningPopup) {
+      warningPopup = createWarningPopup();
+      document.body.appendChild(warningPopup);
+    }
+
+    // Position below the HTML embed area.
+    const rect = targetElement.getBoundingClientRect();
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+    warningPopup.style.top = `${rect.bottom + scrollTop + 5}px`;
+    warningPopup.style.left = `${rect.left + scrollLeft}px`;
+    warningPopup.style.display = 'block';
+
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+      if (warningPopup) {
+        warningPopup.style.display = 'none';
+      }
+    }, 5000);
+
+    // Focus on textarea.
+    targetElement.focus();
+  }
+
+  Drupal.behaviors.htmlEmbedWarning = {
+    attach: function (context, settings) {
+      // Track when HTML embed dialog opens (both from edit button and toolbar).
+      document.addEventListener('click', function(e) {
+        // Handle edit source button.
+        const editButton = e.target.closest('button[data-cke-tooltip-text="Edit source"]');
+        // Handle toolbar HTML embed button.
+        const toolbarButton = e.target.closest('.ck-button[data-cke-tooltip-text="Insert HTML"]');
+
+        if (editButton || toolbarButton) {
+          setTimeout(() => {
+            const textarea = document.querySelector('.ck-reset .ck-input-text.raw-html-embed__source');
+            if (textarea) {
+              originalContent = textarea.value;
+              hasUnsavedChanges = false;
+
+              textarea.addEventListener('input', function() {
+                hasUnsavedChanges = this.value !== originalContent;
+              });
+            }
+          }, 100);
+        }
+      });
+
+      // Handle dialog buttons.
+      document.addEventListener('click', function(e) {
+        const textarea = document.querySelector('.ck-reset .ck-input-text.raw-html-embed__source');
+
+        // Save button.
+        if (e.target.closest('.raw-html-embed__save-button')) {
+          hasUnsavedChanges = false;
+          originalContent = textarea?.value || '';
+        }
+        // Cancel/Close button.
+        if (e.target.closest('.raw-html-embed__cancel-button') || e.target.closest('.ck-button[aria-label="Close"]')) {
+          if (textarea) {
+            textarea.value = originalContent; // Restore original content
+          }
+          hasUnsavedChanges = false;
+        }
+      });
+
+      // Form submit handler.
+      once('html-embed-form', 'form.node-form', context).forEach(function(form) {
+        form.addEventListener('submit', function(e) {
+          if (hasUnsavedChanges) {
+            const textarea = document.querySelector('.ck-reset .ck-input-text.raw-html-embed__source');
+            if (textarea) {
+              e.preventDefault();
+              e.stopPropagation();
+              showWarning(textarea);
+              return false;
+            }
+          }
+        });
+      });
+    }
+  };
+})(Drupal);