Site Builder

Editing: promptinator-pencil-only3.js

writable 0666

/* promptinator‑pencil‑only.js  v3‑help  (2025‑07‑17)
 * Original v3 functionality + a small “Help” link that opens the
 * hosted helper in a single popup window.
 * ------------------------------------------------------------------ */

const HELP_URL = 'https://promptinator.ai/shortcode-help.html';   // change here if needed

/* ────────────────────────────────────────────────────────────────── */
/* 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 ONE <textarea>                                        */
/* ────────────────────────────────────────────────────────────────── */
function enhanceTextarea(ta) {
  if (!ta || ta.dataset.scMenu) return;       // already enhanced
  ta.dataset.scMenu = 'yes';

/* ▼ dropdown */
  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;
  };

/* ⓘ help link */
  const help = document.createElement('a');
  help.className = 'promptinator-help';
  help.textContent = 'Help';
  help.href = HELP_URL;
  help.title = 'Open shortcode helper';
  help.onclick = e => {
    e.preventDefault();
    window.open(
      HELP_URL,
      'promptinatorHelp',
      'popup=yes,width=520,height=720,scrollbars=yes,resizable=yes'
    );
  };

/* bar (flex) → dropdown + help on same line */
  const bar = document.createElement('div');
  bar.className = 'promptinator-bar';
  bar.append(sel, help);

/* place bar right above the textarea */
  ta.parentNode.insertBefore(bar, 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-bar    { display:flex; align-items:center; gap:.55em; margin-bottom:.35em; }
    .promptinator-select { flex:1 1 auto; padding:.3em .55em; }
    .promptinator-help   { flex:0 0 auto; font-size:.9rem; color:#176edc;
                           text-decoration:underline; cursor:pointer; }
    .promptinator-bar + textarea { width:100%; box-sizing:border-box; }
  `;
  const st = document.createElement('style');
  st.appendChild(document.createTextNode(css));
  document.head.appendChild(st);
})();

/* ────────────────────────────────────────────────────────────────── */
/* 4.  Listen for ✏️  clicks, then decorate the revealed textarea     */
/* ────────────────────────────────────────────────────────────────── */
document.addEventListener('click', e => {
  const pencil = e.target.closest('#edit-link');
  if (!pencil) return;

const container = pencil.closest('.Promptinator') || document.body;
  const form      = container.querySelector('#edit-form');
  if (!form) return;

requestAnimationFrame(() => {
    if (getComputedStyle(form).display === 'none') return;
    const ta = form.querySelector('textarea');
    if (ta) enhanceTextarea(ta);
  });
});

/* ────────────────────────────────────────────────────────────────── */
/* 5.  Optional ES‑module export                                     */
/* ────────────────────────────────────────────────────────────────── */
export { enhanceTextarea };
export default { enhanceTextarea };

Site Builder

Editing: promptinator-pencil-only3.js

Site Builder