Site Builder

Editing: promptinator-pencil-only2.js

writable 0666

/* promptinator‑pencil‑only.js  v3  (2025‑07‑11)
 * Adds a shortcode <select> directly above EVERY textarea that becomes
 * visible after the user clicks a ✏️  (id="edit-link") inside a
 * .Promptinator block.  Multiple editors can stay open side‑by‑side.
 * -------------------------------------------------------------------- */

/* ------------------------------------------------------------------ */
/* 1.  Shortcode presets                                              */
/* ------------------------------------------------------------------ */
const SNIPPETS = {
  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~]',
  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~]'
};

const MENU = [
  ['plain_input',    'Plain input'],
  ['textarea_a',     'Textarea (A)'],
  ['radio_b',        'Radio buttons (B)'],
  ['checkbox_c',     'Checkbox group (C)'],
  ['dropdown_num_d', 'Dropdown numeric (D)'],
  ['dropdown_txt_d', 'Dropdown text (D)'],
  ['url_picker_i',   'URL picker + preview (I)'],
  ['email_submit_e', 'Email submit (E)'],
  ['form_post_e',    'Form‑POST submit (E)']
];

/* ------------------------------------------------------------------ */
/* 2.  Enhance a single <textarea> (safe to call multiple times)      */
/* ------------------------------------------------------------------ */
function enhanceTextarea(ta) {
  if (!ta || ta.dataset.scMenu) return;          // already enhanced
  ta.dataset.scMenu = 'yes';

/* build drop‑down specific to this textarea */
  const sel = document.createElement('select');
  sel.className = 'promptinator-select';
  sel.innerHTML =
    '<option disabled selected>Insert shortcode…</option>' +
    MENU.map(([k, t]) => `<option value="${k}">${t}</option>`).join('');

sel.onchange = () => {
    const snip = SNIPPETS[sel.value];
    if (snip) insertAtCaret(ta, snip);
    sel.selectedIndex = 0;
  };

ta.parentNode.insertBefore(sel, ta);

if (window.PROMPTINATOR_DEBUG)
    console.log('[Promptinator] enhanced textarea', ta);
}

/* helper */
function insertAtCaret(el, snippet) {
  el.focus();
  const { selectionStart:s, selectionEnd:e, value:t } = el;
  el.value = t.slice(0, s) + snippet + t.slice(e);
  const p = s + snippet.length;
  el.selectionStart = el.selectionEnd = p;
  el.dispatchEvent(new Event('input', { bubbles:true }));
}

/* ------------------------------------------------------------------ */
/* 3.  One‑time CSS injection                                         */
/* ------------------------------------------------------------------ */
(function injectCSS() {
  const css = `
    .promptinator-select { margin-bottom:.35em; padding:.3em .55em; }
    .promptinator-select + textarea { width:100%; box-sizing:border-box; }
  `;
  const st  = document.createElement('style');
  st.appendChild(document.createTextNode(css));
  document.head.appendChild(st);
})();

/* ------------------------------------------------------------------ */
/* 4.  Global click delegation on every ✏️                            */
/* ------------------------------------------------------------------ */
document.addEventListener('click', e => {
  const pencil = e.target.closest('#edit-link');
  if (!pencil) return;

/* container that holds BOTH the pencil and the hidden form */
  const container = pencil.closest('.Promptinator') || document.body;
  const form      = container.querySelector('#edit-form');
  if (!form) return;

/* wait one frame – the original code toggles display in the same click */
  requestAnimationFrame(() => {
    if (getComputedStyle(form).display === 'none') return;   // form is collapsed
    const ta = form.querySelector('textarea');
    if (ta) enhanceTextarea(ta);
  });
});

/* ------------------------------------------------------------------ */
/* 5.  (Optional) re‑export for ES‑module lazy‑import use             */
/* ------------------------------------------------------------------ */
export { enhanceTextarea };
export default { enhanceTextarea };

Site Builder

Editing: promptinator-pencil-only2.js

Site Builder