devel_wizard-2.x-dev/js/spell/paragraph_behavior.js

(function (document, Drupal, once) {

  /**
   * @todo This is the same as image_effect.js and layout.js.
   *
   * @type {{attach: Drupal.behaviors.develWizardSpellParagraphBehavior.attach}}
   */
  Drupal.behaviors.develWizardSpellParagraphBehavior = {
    attach: function () {
      const sourceSelector = Drupal.develWizardSpellParagraphBehavior.wrapperSelector
        + ' '
        + Drupal.develWizardSpellParagraphBehavior.fieldPrefixSourceSelector;
      once('develWizardSpellParagraphBehavior', sourceSelector)
        .forEach(
          /**
           * @param {HTMLInputElement} element
           */
          function (element) {
            element.addEventListener('input', Drupal.develWizardSpellParagraphBehavior.onModuleInput);
            element.addEventListener('change', Drupal.develWizardSpellParagraphBehavior.onModuleInput);
          },
        );
    },
  };

  Drupal.develWizardSpellParagraphBehavior = Drupal.develWizardSpellParagraphBehavior || {};

  Drupal.develWizardSpellParagraphBehavior.wrapperSelector = '.dws--paragraph-behavior';

  /**
   * Inside the wrapper.
   *
   * @type {string}
   */
  Drupal.develWizardSpellParagraphBehavior.fieldPrefixSourceSelector = '*[name*="[extension][machineName]"]';

  /**
   * Inside the wrapper.
   *
   * @type {string}
   */
  Drupal.develWizardSpellParagraphBehavior.fieldPrefixTargetsSelector = '*[name*="[plugin][id]"]';

  /**
   * @param {InputEvent} event
   */
  Drupal.develWizardSpellParagraphBehavior.onModuleInput = function (event) {
    const extensionMachineName = event.currentTarget.value;
    const wrapperElement = event.currentTarget.closest(Drupal.develWizardSpellParagraphBehavior.wrapperSelector);
    const targetInputElements = wrapperElement.querySelectorAll(Drupal.develWizardSpellParagraphBehavior.fieldPrefixTargetsSelector)
    /**
     * @param {HTMLInputElement} targetInputElement
     */
    targetInputElements.forEach(function (targetInputElement) {
      targetInputElement
        .closest('.form-item')
        .querySelector('.form-item__prefix')
        .textContent = `${extensionMachineName}_`;
    });
  };

})(document, Drupal, once);