Site Builder

Editing: promptinator-bkk.js

writable 0666

/* WP‑Promptinator – 2025‑07‑05  (adds _formTitle hidden field, pencil toggles edit/save) */
const __ = (window?.wp?.i18n?.__) || (s => s);      // i18n helper

export default class Promptinator {
  static _lastMeta  = [];
  static _lastState = [];

/* ------------------------------------------------ init */
  static init({ mount, defaultPrompt }) {
    const prompt   = mount.dataset.prompt || defaultPrompt || mount.textContent.trim();
    let   template = prompt;

const RX = /\[(?:([A-DEI]?)-)?([^~|\-\]]*)(?:-([^~\]]*))?(?:~([^~]+)~)?\]/ig;
    const state = {}, meta = [];

const allowEdit  = mount.dataset.edit  !== "0" && mount.dataset.edit  !== "false";
    const allowThink = !("think" in mount.dataset) ||
                       (mount.dataset.think !== "0" && mount.dataset.think !== "false");

/* -------------- render ------------------------- */
    function render() {
      meta.length = 0;
      let idx = 0;

template.replace(RX, (_, cmd='', lab='', ops='', def='') => {
        lab = lab.trim(); const opts = ops.split('|').filter(Boolean);
        if (!(idx in state)) {
          state[idx] = cmd === 'C'
            ? (def ? def.split(',').map(v=>v.trim()) : opts.slice(0,1))
            : (def || opts[0] || lab);
        }
        meta.push({ cmd, lab, opts, def }); idx++; return '';
      });

idx = 0;
      const html = template.replace(RX, (_, cmd='', lab='', ops='', def='') => {
        lab = lab.trim();
        const val = state[idx];
        let out;

if (cmd === 'C') {
          out = (Array.isArray(val)?val:[val])
            .map(v => `<span class="token" data-i="${idx}" data-label="${lab}">[${v}]</span>`).join(', ');
        } else if (cmd === 'E') {
          const isEmail = /^\S+@\S+\.\S+$/.test(val);
          out = `<button class="token e-btn" data-i="${idx}" data-label="${lab}">` +
                (isEmail ? __( 'Send', 'promptinator' ) : __( 'Submit', 'promptinator' )) +
                `</button>`;
        } else {
          out = `<span class="token" data-i="${idx}" data-label="${lab}">[${val}]</span>`;
        }
        idx++; return out;
      });

promptText.innerHTML = html.replace(/\n/g,'<br>') + aiButtons;

if (showAI) {
        let i = 0;
        const full = template.replace(RX, () => {
          const v = state[i++]; return Array.isArray(v)?v.join(', '):v;
        });
        promptText.querySelector('.chatgpt')  .href = 'https://chat.openai.com/?prompt='   + encodeURIComponent(full);
        promptText.querySelector('.perplexity').href = 'https://www.perplexity.ai/search?q=' + encodeURIComponent(full);
        promptText.querySelector('.copilot')  .href = 'https://copilot.microsoft.com/?q='   + encodeURIComponent(full);
      }
    }

/* -------------- mount editor ------------------ */
    const editor = document.createElement('div');
    editor.innerHTML = `
      <div style="display:flex;align-items:baseline;gap:.5em;">
        ${allowEdit ? `<span id="edit-link" title="${__( 'Edit prompt', 'promptinator' )}"
          style="cursor:pointer;font-size:1em;color:#5c3bff;display:inline-flex;align-items:center;margin-right:.25em;">✏️</span>` : ''}
        <div class="prompt-text" style="flex:1 1 auto;"></div>
      </div>
      ${allowEdit ? `<form id="edit-form" style="display:none;margin-top:.6em;">
        <textarea style="width:100%;font-family:monospace;min-height:90px;"></textarea>
        <div style="text-align:right;margin-top:.7em;"><button type="submit">${__( 'Save & Update', 'promptinator' )}</button></div>
      </form>` : ''}`;
    mount.innerHTML = ''; mount.append(editor);
    const promptText = editor.querySelector('.prompt-text');

if (allowEdit) {
      const link = editor.querySelector('#edit-link'),
            form = editor.querySelector('#edit-form'),
            ta   = form.querySelector('textarea');
      link.onclick  = () => {
        if (form.style.display === 'block') {
          // Save and close form if already open
          template = ta.value.trim();
          Object.keys(state).forEach(k=>delete state[k]);
          form.style.display='none';
          render();
        } else {
          // Open the form
          form.style.display = 'block';
          ta.value = template;
          ta.focus();
        }
      };
      form.onsubmit = e => {
        e.preventDefault();
        template = ta.value.trim();
        Object.keys(state).forEach(k=>delete state[k]);
        form.style.display='none';
        render();
      };
    }

render();

mount.addEventListener('click', e => {
      if (!e.target.classList.contains('token')) return;
      const i     = +e.target.dataset.i;
      const info  = meta[i];
      const value = state[i];

if (info.cmd === 'E') {
        Promptinator._lastMeta  = meta.slice();
        Promptinator._lastState = Object.assign([], state);
      }

Promptinator._popup(
        info,
        Array.isArray(value)?value.join(', '):value,
        v => { state[i] = info.cmd==='C' ? v.split(',').map(s=>s.trim()).filter(Boolean) : v; render(); }
      );
    });
  } /* init */

/* ------------------------------------------------ popup */
  static _popup(meta, cur, done) {
    let dlg = document.getElementById('promptinator-dlg');
    if (!dlg) {
      dlg = document.createElement('dialog'); dlg.id='promptinator-dlg'; document.body.append(dlg);
      dlg.addEventListener('click',e=>{ if(e.target===dlg) dlg.close(); });
      dlg.addEventListener('cancel',e=>{ e.preventDefault(); dlg.close(); });
    }

const prettify = s => s.replace(/[-_]/g,' ').replace(/\b\w/g,c=>c.toUpperCase());

const nice = meta.lab && meta.lab.trim()
      ? prettify(meta.lab)
      : (cur || {A:'Text Input',B:'Choice',C:'Options',D:'Dropdown',I:'URL Picker',E:'Send'}[meta.cmd] || 'Input');

dlg.innerHTML=`<div class="popup-body">${inner}</div>`; dlg.showModal();
    const pb=dlg.querySelector('.popup-body');

/* ---------- command‑specific handlers ---------- */
    if(meta.cmd==='E'){
      const btn=pb.querySelector('button');
      const isEmail=/^\S+@\S+\.\S+$/.test(cur);
      if(isEmail){
        const body=Promptinator._lastMeta.map((m,i)=>
            `${prettify(m.lab)}: ${Promptinator._lastState[i]}`).join('\n');
        btn.onclick=()=>{ window.location.href=`mailto:${cur}?subject=${encodeURIComponent(nice)}&body=${encodeURIComponent(body)}`; dlg.close(); };
      }else{
        const form=document.createElement('form'); form.method='post'; form.action=cur;

/* --- hidden title we just added --- */
        const t=document.createElement('input'); t.type='hidden'; t.name='_formTitle'; t.value=nice; form.append(t);

Promptinator._lastMeta.forEach((m,i)=>{
          const inp=document.createElement('input'); inp.type='hidden';
          inp.name=prettify(m.lab).replace(/\s+/g,'-').toLowerCase();
          inp.value=Promptinator._lastState[i]; form.append(inp);
        });
        pb.append(form);
        btn.onclick=()=>{ form.submit(); dlg.close(); };
      }
      return;
    }

const commit=v=>{ done(v); dlg.close(); };

if(meta.cmd==='A'){ const ta=pb.querySelector('textarea'); ta.focus(); ta.onblur=()=>commit(ta.value); pb.querySelector('button').onclick=()=>dlg.close(); return; }
    if(meta.cmd==='B'){ pb.onclick=e=>{ if(e.target.name==='r') commit(e.target.value); }; return; }
    if(meta.cmd==='C'){ pb.querySelector('button').onclick=()=>commit([...pb.querySelectorAll('input:checked')].map(i=>i.value).join(', ')||cur); return; }
    if(meta.cmd==='D'){ pb.querySelector('select').onchange=e=>commit(e.target.value); return; }
    if(meta.cmd==='I'){ const sel=pb.querySelector('select'),fr=pb.querySelector('iframe'); sel.onchange=()=>{ fr.hidden=false; fr.src=sel.value; }; pb.querySelector('button').onclick=()=>commit(sel.value); return; }

/* default input */
    const inp=pb.querySelector('input'); inp.focus(); inp.onblur=()=>commit(inp.value);
    inp.onkeydown=e=>{ if(e.key==='Enter') commit(inp.value); };
    pb.querySelector('button').onclick=()=>dlg.close();
  }
}

Site Builder

Editing: promptinator-bkk.js

Site Builder