froala editor config staging

jQuery(document).ready(function($) {
  var fieldSelector = '.fn_froala_front textarea';
  var froalaActivationKey = 'vYA6mA5C4C4I4I4B9A8eMRPYf1h1REb1BGQOQIc2CDBREJImA11C8D6E6B1G4H3F2H3A8=='; 

  if (typeof FroalaEditor !== 'undefined') {
    $(fieldSelector).each(function() {
      new FroalaEditor(this, {
        // Add your Froala editor options here
        key: froalaActivationKey,
        zIndex: 99999,
        attribution: false,
        charCounterCount: false,
        toolbarInline: true,
        placeholderText: 'Type something beautiful...',
        toolbarVisibleWithoutSelection: true,
        quickInsertEnabled: false,
        dragInline: false,
        imageUploadURL: 'https://forestnation.com/upload.php',
        imageEditButtons: ['imageReplace', 'imageAlign', 'imageDisplay', 'imageStyle', 'imageRemove'],
        imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'],
        imageStyles: {
          fnFrImgShadow: 'Shadow',
          fnFrImgBackBlur: 'Background Blur'
        },
        fontSizeDefaultSelection: '20',
        fontFamily: {
          "Roboto,sans-serif": 'Roboto',
          "Oswald,sans-serif": 'Oswald',
          "Montserrat,sans-serif": 'Montserrat',
          "'Open Sans Condensed',sans-serif": 'Open Sans',
          'Arial,Helvetica,sans-serif': 'Arial',
          'Georgia,serif': 'Georgia', 'Impact,Charcoal,sans-serif': 'Impact',
          'Tahoma,Geneva,sans-serif': 'Tahoma',
          "'Times New Roman',Times,serif": 'Times New Roman',
          'Verdana,Geneva,sans-serif': 'Verdana'
        },
        fontFamilySelection: true,
        linkInsertButtons: ['linkBack'],
        paragraphStyles: {
          fnFrPclasskaraoke1: 'karaoke 1',
          fnFrPclassGreenBack: 'Green Back',
          fnFrPclassWhiteBack: 'White Back',
          fnFrPclassBlackBack: 'Black Back',
          fnFrPclassTransparency: 'Transparent Back'
        },
        toolbarButtons: {
          'moreText': {
            'buttons': ['align', 'fontSize', 'textColor', 'backgroundColor', 'bold', 'italic', 'underline', 'fontFamily'],
            'buttonsVisible': 4
          },
          'moreRich': {
            'buttons': ['insertImage', 'insertLink', 'emoticons', 'paragraphStyle'],
            'buttonsVisible': 0
          },
        }
      });
    });

    if (typeof acf !== 'undefined') {
      acf.addAction('append', function($el) {
        $el.find(fieldSelector).each(function() {
          new FroalaEditor(this, {
            // Add your Froala editor options here
            key: froalaActivationKey,
            zIndex: 99999,
            attribution: false,
            charCounterCount: false,
            toolbarInline: false,
            placeholderText: 'Type something beautiful...',
            toolbarVisibleWithoutSelection: true,
            quickInsertEnabled: false,
            dragInline: false,
            imageUploadURL: 'https://forestnation.com/upload.php',
            imageEditButtons: ['imageReplace', 'imageAlign', 'imageDisplay', 'imageRemove'],
            imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'],
            fontSizeDefaultSelection: '20',
            linkInsertButtons: ['linkBack'],
            paragraphStyles: {
              fnFrPclasskaraoke1: 'karaoke 1',
              fnFrPclassGreenBack: 'Green Back',
              fnFrPclassWhiteBack: 'White Back',
              fnFrPclassBlackBack: 'Black Back',
              fnFrPclassTransparency: 'Transparent Back'
            },
            toolbarButtons: {
              'moreText': {
                'buttons': ['align', 'fontSize', 'textColor', 'backgroundColor', 'bold', 'italic', 'underline', 'fontFamily'],
                'buttonsVisible': 4
              },
              'moreRich': {
                'buttons': ['insertImage', 'insertLink', 'emoticons', 'paragraphStyle'],
                'buttonsVisible': 0
              },
            }
          });
        });
      });
    }
  }

  // Add the new code here
  // Function to convert RGB to hex within the editor content
  function rgbToHex(rgbColor) {
    const rgb = rgbColor.match(/\d+/g);
    const hex = rgb.map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
    return `#${hex}`;
  }
  
  // Function to convert RGB to hex within the editor content
function convertRgbToHex(editor) {
  const elements = editor.$el[0].querySelectorAll('[style*="rgb("]');

  elements.forEach((element) => {
      const style = element.getAttribute('style');
      const updatedStyle = style.replace(/rgb\(\d+,\s?\d+,\s?\d+\)/g, (rgbColor) => rgbToHex(rgbColor));
      element.setAttribute('style', updatedStyle);
  });

  // Update the editor's content state
  editor.html.set(editor.$el[0].innerHTML);
}


  // Add the event listener to all submit buttons
  const submitButtons = document.querySelectorAll('.acf-button.froalaconvertRgbToHex');

  submitButtons.forEach((button) => {
    button.addEventListener('click', () => {
      // Loop through all Froala editor instances on the page
      FroalaEditor.INSTANCES.forEach((editorInstance) => {
        // Convert RGB to hex for each instance
        convertRgbToHex(editorInstance);
      });
    });
  });
});