Site Builder

Editing: promptinator-pencil-only.js

writable 0666

/* promptinator‑pencil‑only.js  – adds shortcode menu
   right above the <textarea> that opens when a ✏️ is clicked.
   No other textareas are touched.                       */
(function () {

/* 1.  Shortcode snippets ------------------------------------------- */
  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~]',
    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 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.  Build one <select> element (re‑used for every textarea) ------ */
  function buildDropdown(forTA) {
    const sel = document.createElement('select');
    sel.className = 'promptinator-select';
    sel.innerHTML =
      '<option disabled selected>Insert shortcode…</option>' +
      menuItems.map(mi => `<option value="${mi.key}">${mi.text}</option>`).join('');
    sel.onchange = () => {
      insertAtCaret(forTA, templates[sel.value] || '');
      sel.selectedIndex = 0;
    };
    return sel;
  }

/* 3.  Caret‑aware insertion ---------------------------------------- */
  function insertAtCaret(ta, snippet) {
    ta.focus();
    const { selectionStart:s, selectionEnd:e, value:t } = ta;
    ta.value = t.slice(0, s) + snippet + t.slice(e);
    ta.selectionStart = ta.selectionEnd = s + snippet.length;
    ta.dispatchEvent(new Event('input', { bubbles:true }));
  }

/* 4.  Attach dropdown above a textarea (idempotent) ----------------- */
  function enhance(ta) {
    if (ta.dataset.scMenu) return;        // already done
    ta.dataset.scMenu = 'yes';
    const dd = buildDropdown(ta);
    ta.parentNode.insertBefore(dd, ta);
  }

/* 5.  When a ✏️ is clicked, wait for the form to *open* ------------- */
  document.addEventListener('click', e => {
    const pencil = e.target.closest('#edit-link');   // each Promptinator uses this id
    if (!pencil) return;

// form lives right next to the pencil inside the same wrapper
    const wrapper = pencil.closest('.promptinator-wrapper') || pencil.parentNode;
    const form    = wrapper.querySelector('#edit-form');
    if (!form) return;

// small delay: the original code toggles display in the click handler
    requestAnimationFrame(() => {
      if (getComputedStyle(form).display === 'none') return;   // form *collapsed*
      const ta = form.querySelector('textarea');
      if (ta) enhance(ta);
    });
  });

/* 6.  Basic styling (optional, lightweight) ------------------------ */
  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);

})();

Site Builder

Editing: promptinator-pencil-only.js

Site Builder