Site Builder

Editing: promptinator-pencil-only4.js

writable 0666

/* promptinator‑pencil‑only.js  v3‑help‑tokens  (2025‑07‑22)
 * Same as the previous “help link” build, plus extra profile tokens.
 * ------------------------------------------------------------------ */

const HELP_URL = 'https://promptinator.ai/shortcode-help.html';

/* ------------------------------------------------------------------ */
/* 1.  Snippet library                                                */
/* ------------------------------------------------------------------ */
const SNIPPETS = {
  /* profile field tokens */
  name         : '[name]',
  slogan       : '[slogan]',
  description  : '[description]',
  address      : '[address]',
  city         : '[city]',
  state        : '[state]',
  zip          : '[zip]',
  phone        : '[phone]',
  website      : '[website]',
  email        : '[email]',
  c_service    : '[C-service-]',
  c_location   : '[C-location-]',

/* original form‑component 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~]'
};

/* ------------------------------------------------------------------ */
/* 2.  Menu order & labels                                            */
/* ------------------------------------------------------------------ */
const MENU = [
  /* --- Profile tokens --------------------------------------------- */
  ['name',        'Name'],
  ['slogan',      'Slogan'],
  ['description', 'Description'],
  ['address',     'Street address'],
  ['city',        'City'],
  ['state',       'State'],
  ['zip',         'ZIP code'],
  ['phone',       'Phone number'],
  ['website',     'Website URL'],
  ['email',       'Email address'],
  ['c_service',   'Services (C)'],
  ['c_location',  'Locations (C)'],

/* --- Form components ------------------------------------------- */
  ['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)']
];

/* ------------------------------------------------------------------ */
/* 3.  Enhance a single <textarea>                                   */
/* ------------------------------------------------------------------ */
function enhanceTextarea(ta){
  if(!ta||ta.dataset.scMenu)return;
  ta.dataset.scMenu='yes';

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;
  };

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');
  };

const bar=document.createElement('div');
  bar.className='promptinator-bar';
  bar.append(sel,help);

ta.parentNode.insertBefore(bar,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}));
}

/* one‑time CSS */
(function(){
  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);
})();

/* pencil‑click delegation (unchanged) */
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);
  });
});

/* export for lazy‑import setups */
export{enhanceTextarea};
export default{enhanceTextarea};

Site Builder

Editing: promptinator-pencil-only4.js

Site Builder