Site Builder

Editing: promptinator-autobeforeh.js

writable 0666

/* promptinator‑auto v1.0  (c) 2025 • no dependencies */
(function () {

/*──────────────────────────────────────────────────────────
    1.  Shortcode templates  (labelKey  →  snippet string)
  ──────────────────────────────────────────────────────────*/
  const templates = {
    plain_input     : '[-labelfield-~Input~]',
    textarea_a      : '[A-labelfield-~Textarea~]',
    radio_b         : '[B-labelfield-|Choice 1|Choice 2|~Choice 2~]',
    checkbox_c      : '[C-labelfield-|Opt A|Opt B|~Opt A~]',
    dropdown_num_d  : '[D-labelfield-10~3~]',                       // 1–10, default 3
    dropdown_txt_d  : '[D-labelfield-|Opt A|Opt B|Opt C|~Opt B~]',
    url_picker_i    : '[I-labelfield-|https://site1.com|site2.com|~Pick a site~]',
    email_submit_e  : '[E-labelfield-~you@site.com~]',
    form_post_e     : '[E-labelfield-~https://example.com/endpoint~]'
  };

/* Human‑readable menu text – same order you provided */
  const menuItems = [
    { key: 'plain_input',    text: 'Plain input'               },
    { key: 'textarea_a',     text: 'Textarea (A)'              },
    { key: 'radio_b',        text: 'Radio buttons (B)'         },
    { key: 'checkbox_c',     text: 'Checkbox group (C)'        },
    { key: 'dropdown_num_d', text: 'Dropdown numeric (D)'      },
    { key: 'dropdown_txt_d', text: 'Dropdown text (D)'         },
    { key: 'url_picker_i',   text: 'URL picker + preview (I)'  },
    { key: 'email_submit_e', text: 'Email submit (E)'          },
    { key: 'form_post_e',    text: 'Form‑POST submit (E)'      }
  ];

/*──────────────────────────────────────────────────────────
    2.  Utility: insert snippet at caret
  ──────────────────────────────────────────────────────────*/
  function insertAtCaret(el, snippet) {
    el.focus();
    const start = el.selectionStart,
          end   = el.selectionEnd,
          text  = el.value;

el.value = text.slice(0, start) + snippet + text.slice(end);
    el.selectionStart = el.selectionEnd = start + snippet.length;

/* Fire input event so frameworks (e.g., React) notice the change */
    el.dispatchEvent(new Event('input', { bubbles: true }));
  }

/*──────────────────────────────────────────────────────────
    3.  Build the <select> element
  ──────────────────────────────────────────────────────────*/
  function buildDropdown(forTextarea) {
    const select = document.createElement('select');
    select.className = 'promptinator-select';

/* Placeholder option */
    const ph = document.createElement('option');
    ph.disabled = true; ph.selected = true; ph.textContent = 'Insert shortcode…';
    select.appendChild(ph);

/* Real options */
    menuItems.forEach(mi => {
      const opt = document.createElement('option');
      opt.value = mi.key;
      opt.textContent = mi.text;
      select.appendChild(opt);
    });

/* On change → insert & reset */
    select.addEventListener('change', () => {
      const tmpl = templates[select.value];
      if (tmpl) insertAtCaret(forTextarea, tmpl);
      select.selectedIndex = 0;   /* back to placeholder */
    });

return select;
  }

/*──────────────────────────────────────────────────────────
    4.  Enhance a textarea (only once)
  ──────────────────────────────────────────────────────────*/
  function enhanceTextarea(ta) {
    if (ta.dataset.promptinatorDone) return;      // already processed
    ta.dataset.promptinatorDone = 'yes';

/* Wrapper for nice layout */
    const wrapper = document.createElement('div');
    wrapper.className = 'promptinator-wrapper';
    ta.parentNode.insertBefore(wrapper, ta);
    wrapper.appendChild(buildDropdown(ta));
    wrapper.appendChild(ta);
  }

/*──────────────────────────────────────────────────────────
    5.  Initial scan + MutationObserver for future nodes
  ──────────────────────────────────────────────────────────*/
  function initAll() {
    document.querySelectorAll('textarea').forEach(enhanceTextarea);

/* Watch for dynamically‑added textareas */
    const mo = new MutationObserver(muts => {
      muts.forEach(m => m.addedNodes.forEach(node => {
        if (node.nodeType !== 1) return;
        if (node.tagName && node.tagName.toLowerCase() === 'textarea') {
          enhanceTextarea(node);
        }
        node.querySelectorAll && node.querySelectorAll('textarea').forEach(enhanceTextarea);
      }));
    });

mo.observe(document.body, { childList: true, subtree: true });
  }

/*──────────────────────────────────────────────────────────
    6.  Minimal styling
  ──────────────────────────────────────────────────────────*/
  const css = `
    .promptinator-wrapper              { margin-bottom: 1em; }
    .promptinator-select               { margin-bottom: .35em; padding: .3em .55em; }
    .promptinator-wrapper textarea     { width: 100%; box-sizing: border-box; }
  `;
  const style = document.createElement('style');
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);

/*──────────────────────────────────────────────────────────
    7.  Kick off once DOM is ready
  ──────────────────────────────────────────────────────────*/
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initAll);
  } else {
    initAll();
  }

})();

Site Builder

Editing: promptinator-autobeforeh.js

Site Builder