MediaWiki:Gadget-PageBuilder.js: Difference between revisions

const MARKUP = "<div class=\"app\">\n  <header class=\"top\">\n    <h1 class=\"brand\">Page builder</h1>\n    <div class=\"title-field\">\n      <label for=\"pb-pageTitle\">Page</label>\n      <input type=\"text\" id=\"pb-pageTitle\" readonly>\n    </div>\n    <div class=\"top-actions\">\n      <span class=\"hist\"><button class=\"btn\" id=\"pb-undoBtn\" type=\"button\" title=\"Undo (Ctrl+Z)\" disabled>Undo</button><button class=\"btn\" id=\"pb-redoBtn\" type=\"button\" title=\"Redo (Ctrl+Y)\" disabled>Redo</button></span>\n      <button class=\"btn\" id=\"pb-importBtn\" type=\"button\">Import</button>\n      <button class=\"btn\" id=\"pb-presetsBtn\" type=\"button\">Presets</button>\n     <button class=\"btn danger\" id=\"pb-clearPage\" type=\"button\">Clear page</button>\n      <button class=\"btn\" id=\"pb-cancelBuilder\" type=\"button\">Cancel</button>\n      <button class=\"btn\" id=\"pb-doneBuilder\" type=\"button\" title=\"Put your changes in the edit box and go back to the editor\">Done</button>\n     <button class=\"btn primary\" id=\"pb-saveBuilder\" type=\"button\">Save page…</button>\n   </div>\n </header>\n\n  <div class=\"main\">\n    <aside class=\"pane palette\" aria-label=\"Blocks\">\n      <div class=\"pal-groups\" id=\"pb-palette\"></div>\n      <p class=\"pal-hint\">Drag a block onto the page, or click it to add it at the end. Press / to find one by name.</p>\n     <nav class=\"outline\" aria-labelledby=\"pb-outlineHeading\">\n       <div class=\"outline-head\"><h2 id=\"pb-outlineHeading\">Outline</h2><span class=\"outline-tools\"><button type=\"button\" class=\"linkbtn\" id=\"pb-collapseAll\">Collapse all</button><button type=\"button\" class=\"linkbtn\" id=\"pb-expandAll\">Expand all</button></span></div>\n        <ul class=\"outline-list\" id=\"pb-outline\"></ul>\n      </nav>\n   </aside>\n\n    <main class=\"pane canvas\" id=\"pb-canvas\" aria-label=\"Page layout\">\n     <div class=\"canvas-inner\">\n        <div class=\"banner\" id=\"pb-draftBanner\" role=\"status\" hidden><p id=\"pb-draftMsg\"></p><span class=\"banner-actions\"><button class=\"btn primary\" id=\"pb-draftRestore\" type=\"button\">Restore it</button><button class=\"btn\" id=\"pb-draftDiscard\" type=\"button\">Discard it</button></span></div>\n       <div class=\"blocks\" id=\"pb-blocks\"></div>\n      </div>\n    </main>\n\n    <section class=\"pane output\" aria-label=\"Output\">\n      <div class=\"out-head\">\n        <div class=\"tabs\" role=\"tablist\">\n          <button class=\"tab\" role=\"tab\" id=\"pb-tab-code\" aria-controls=\"pb-panel-code\" aria-selected=\"true\" type=\"button\">Wikitext</button>\n         <button class=\"tab\" role=\"tab\" id=\"pb-tab-prev\" aria-controls=\"pb-panel-prev\" aria-selected=\"false\" type=\"button\">Preview</button>\n         <button class=\"tab\" role=\"tab\" id=\"pb-tab-chk\" aria-controls=\"pb-panel-chk\" aria-selected=\"false\" type=\"button\">Checks</button>\n        </div>\n        <div class=\"out-tools\">\n          <span class=\"meta\" id=\"pb-meta\"></span>\n         <button class=\"btn\" id=\"pb-copyBtn\" type=\"button\">Copy wikitext</button>\n        </div>\n      </div>\n     <div class=\"panel\" id=\"pb-panel-code\" role=\"tabpanel\" aria-labelledby=\"pb-tab-code\"><pre class=\"wikitext\" id=\"pb-code\"></pre></div>\n      <div class=\"panel\" id=\"pb-panel-prev\" role=\"tabpanel\" aria-labelledby=\"pb-tab-prev\" hidden><p class=\"pb-status\" id=\"pb-liveStatus\" role=\"status\"></p><div class=\"pb-live mw-body-content\" id=\"pb-live\"></div><div class=\"wiki\" id=\"pb-preview\" hidden></div></div>\n     <div class=\"panel\" id=\"pb-panel-chk\" role=\"tabpanel\" aria-labelledby=\"pb-tab-chk\" hidden><div class=\"checks-panel\" id=\"pb-checks\"></div></div>\n    </section>\n  </div>\n</div>\n<dialog class=\"dlg\" id=\"pb-importDlg\" aria-labelledby=\"pb-importHeading\">\n  <div class=\"dlg-body\">\n    <h2 id=\"pb-importHeading\">Import wikitext</h2>\n    <p class=\"note\">Paste wikitext from another page or open a file. Anything the editor doesn’t have a block for is kept as raw wikitext, so nothing is lost.</p>\n    <textarea id=\"pb-importText\" class=\"mono\" spellcheck=\"false\" aria-label=\"Wikitext to import\" placeholder=\"{\u007BInfobox&#10;| title = …&#10;}}&#10;&#10;'''Page''' is …&#10;&#10;== Section ==\"></textarea>\n    <div class=\"dlg-row\"><label class=\"btn filebtn\">Open a file<input type=\"file\" id=\"pb-importFile\" class=\"sr-only\" accept=\".txt,.wiki,.wikitext,.mediawiki,text/plain\"></label><span class=\"meta\" id=\"pb-importFileName\"></span></div>\n    <input type=\"hidden\" id=\"pb-importTitleInput\">\n    <fieldset class=\"dlg-mode\"><legend>Where should it go?</legend><label class=\"check\"><input type=\"radio\" name=\"importMode\" value=\"replace\" checked><span>Replace the current page</span></label><label class=\"check\"><input type=\"radio\" name=\"importMode\" value=\"append\"><span>Add to the end</span></label></fieldset>\n    <p class=\"dlg-err\" id=\"pb-importErr\" role=\"alert\"></p>\n    <div class=\"dlg-actions\"><button class=\"btn\" id=\"pb-importCancel\" type=\"button\">Cancel</button><button class=\"btn primary\" id=\"pb-importGo\" type=\"button\">Import</button></div>\n  </div>\n</dialog>\n<dialog class=\"dlg\" id=\"pb-presetDlg\" aria-labelledby=\"pb-presetHeading\">\n  <div class=\"dlg-body\">\n    <h2 id=\"pb-presetHeading\">Start from a preset</h2>\n    <p class=\"note\" id=\"pb-presetNote\"></p>\n    <div class=\"presets\" id=\"pb-presetList\"></div>\n    <div class=\"dlg-actions\"><button class=\"btn\" id=\"pb-presetCancel\" type=\"button\">Cancel</button></div>\n  </div>\n</dialog>\n<dialog class=\"dlg\" id=\"pb-citeDlg\" aria-labelledby=\"pb-citeHeading\">\n  <div class=\"dlg-body\">\n    <h2 id=\"pb-citeHeading\">Add a reference</h2>\n    <div id=\"pb-citeReuse\"></div>\n    <div class=\"row\"><label class=\"field\"><span>Kind of source</span><select id=\"pb-citeKind\"><option value=\"web\">Web page</option><option value=\"book\">Book</option><option value=\"other\">Something else</option></select></label><label class=\"field\" id=\"pb-citeFmtWrap\"><span>Format</span><select id=\"pb-citeFmt\"><option value=\"plain\">Plain text (works on any wiki)</option><option value=\"tpl\">Cite templates (cite web, cite book)</option></select></label></div>\n    <label class=\"field\" data-for=\"web book\"><span>Title</span><input type=\"text\" id=\"pb-citeTitle\"></label>\n    <label class=\"field\" data-for=\"web\"><span>Link</span><input type=\"text\" id=\"pb-citeUrl\" placeholder=\"https://\"></label>\n    <div class=\"row\" data-for=\"web book\"><label class=\"field\"><span>Author</span><input type=\"text\" id=\"pb-citeAuthor\"></label><label class=\"field\"><span id=\"pb-citeWorkLabel\">Website</span><input type=\"text\" id=\"pb-citeWork\"></label></div>\n    <div class=\"row\" data-for=\"web book\"><label class=\"field\"><span>Published</span><input type=\"text\" id=\"pb-citeDate\" placeholder=\"2026-10-24\"></label><label class=\"field\" data-for=\"web\"><span>Accessed</span><input type=\"text\" id=\"pb-citeAccess\"></label></div>\n    <label class=\"field\" data-for=\"other\"><span>Reference text</span><textarea id=\"pb-citeText\" rows=\"3\"></textarea></label>\n    <label class=\"field\"><span>Name (optional)</span><input type=\"text\" id=\"pb-citeName\" placeholder=\"Lets you use this reference again elsewhere on the page\"></label>\n    <p class=\"dlg-err\" id=\"pb-citeErr\" role=\"alert\"></p>\n    <div class=\"dlg-actions\"><button class=\"btn\" id=\"pb-citeCancel\" type=\"button\">Cancel</button><button class=\"btn primary\" id=\"pb-citeGo\" type=\"button\">Add reference</button></div>\n  </div>\n</dialog>\n<dialog class=\"dlg\" id=\"pb-upDlg\" aria-labelledby=\"pb-upHeading\">\n  <div class=\"dlg-body\">\n    <h2 id=\"pb-upHeading\">Upload to your wiki</h2>\n    <div id=\"pb-upList\"></div>\n    <label class=\"field\"><span>Description</span><input type=\"text\" id=\"pb-upDesc\" placeholder=\"What the picture shows, and where it came from\"></label>\n    <p class=\"dlg-err\" id=\"pb-upErr\" role=\"alert\"></p>\n    <div class=\"dlg-actions\"><button class=\"btn\" id=\"pb-upCancel\" type=\"button\">Cancel</button><button class=\"btn primary\" id=\"pb-upGo\" type=\"button\">Upload</button></div>\n  </div>\n</dialog>\n<div class=\"qi\" id=\"pb-qiBox\" role=\"dialog\" aria-label=\"Add a block\" hidden><input type=\"text\" id=\"pb-qiInput\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=\"true\" aria-controls=\"pb-qiList\" placeholder=\"Type to find a block\" autocomplete=\"off\"><div class=\"qi-list\" id=\"pb-qiList\" role=\"listbox\" aria-label=\"Blocks\"></div></div>\n<dialog class=\"dlg\" id=\"pb-saveDlg\" aria-labelledby=\"pb-saveHeading\">\n  <div class=\"dlg-body\">\n    <h2 id=\"pb-saveHeading\">Save page</h2>\n    <label class=\"field\"><span>Summary</span><input type=\"text\" id=\"pb-saveSummary\" maxlength=\"500\" placeholder=\"Briefly describe your changes\"></label>\n    <div class=\"checks\"><label class=\"check\" id=\"pb-saveMinorWrap\"><input type=\"checkbox\" id=\"pb-saveMinor\"><span>This is a minor edit</span></label><label class=\"check\"><input type=\"checkbox\" id=\"pb-saveWatch\"><span>Watch this page</span></label></div>\n    <details class=\"tplcode\" id=\"pb-saveReview\"><summary>Review your changes</summary><div class=\"pb-live pb-diff\" id=\"pb-saveDiff\"></div></details>\n    <p class=\"dlg-err\" id=\"pb-saveErr\" role=\"alert\"></p>\n    <div class=\"dlg-actions\"><button class=\"btn\" id=\"pb-saveCancel\" type=\"button\">Keep editing</button><button class=\"btn primary\" id=\"pb-saveGo\" type=\"button\">Save page</button></div>\n  </div>\n</dialog>\n<div class=\"ac\" id=\"pb-acList\" role=\"listbox\" aria-label=\"Suggestions\" hidden></div>\n<div class=\"toast\" id=\"pb-toast\" role=\"status\" hidden><span id=\"pb-toastMsg\"></span><button type=\"button\" id=\"pb-toastUndo\">Undo</button></div>";

const kvRows=(arr,listKey,delAct,kPh,vPh,keep)=>`<div class="kv-list">${arr.map((r,i)=>keep&&!keep(r)?'':`<div class="kv"><input type="text" data-path="${listKey}.${i}.k" value="${esc(r.k)}" placeholder="${esc(kPh)}" aria-label="Name ${i+1}"><input type="text" data-path="${listKey}.${i}.v" value="${esc(r.v)}" placeholder="${esc(vPh)}" aria-label="Value ${i+1}"><button type="button" class="icon del" data-act="${delAct}" data-i="${i}" aria-label="Remove row ${i+1}">${ICON.x}</button></div>`).join('')}</div>`;

    for(let i=1;i<=n;i++)head.push(`  <data source="data${i}"><label>{\u007B{label${i}|}}}</label></data>`);

    head.push('</infobox>');

    return head.join('\n');

  const body=[];let open=false;

  b.rows.filter(r=>r.k.trim()).forEach(r=>{const lab=String(r.label||'').trim()||niceKey(r.k);params[r.k.trim()]={label:lab,type:'string'};

    const h=String(r.header||'').trim();

    if(h){if(open)body.push('  </group>');body.push('  <group>',`   <header>${esc(h)}</header>`);open=true}

    body.push(`${open?'    ':' '}<data source="${esc(r.k.trim())}"><label>${esc(lab)}</label></data>`)});

  return head.concat(body,['</infobox><noinclude>','<templatedata>',JSON.stringify({params,format:'block'},null,2),'</templatedata>','</noinclude>']).join('\n');

  return h;

  +`<span class="fgrp">${FB('link','Wiki link','Wiki link','Wiki link (Ctrl+K)')}${FB('ext','Web link','Web link')}${FB('ref','Reference','Reference')}${FB('tpl','Template','{\u007B }}','Template')}</span>`

 

const GROUPS=[['text','Text',['heading','paragraph','bullets','numbers','quote','note','collapsible','code']],

  form:b=>`${fmtBar()}${fArea('Quotation','text',b.text,'',3)}<div class="row">${fText('Source (optional)','source',b.source,'Who said it')}${fSelect('Markup','fmt',b.fmt,[['blockquote','<blockquote> (any wiki)'],['template','{\u007BQuote}} (needs that template)']])}</div>`,

  wiki:b=>{const t=b.text.trim(),s=b.source.trim();return b.fmt==='template'?`{\u007BQuote|text=${t}${s?`|author=${s}`:''}}}`:`<blockquote>${t}${s?`<br />— ${s}`:''}</blockquote>`},

  init:()=>({mode:'generic',template:'Infobox',name:'',image:'',caption:'',rows:[{k:'',v:''}],layout:'',accentOn:false,accent:'#3366cc'}),

  form:b=>{const g=b.mode!=='dedicated';const nm=tdKey(b.template)||'Infobox';const tn=`<b data-tplname>Template:${esc(nm)}</b>`;

    return `<div class="row">${fSelect('Kind','mode',b.mode,[['generic','Generic: any labels'],['dedicated','Dedicated: fixed field names']],true)}${fText('Template name','template',b.template,g?'Infobox':'Infobox character')}</div><div class="row">${fText('Title','name',b.name,'Leave blank to use the page name')}${fText('Image file','image',b.image,'Example.jpg')}</div>${fText('Image caption','caption',b.caption)}${fmtBar()}<p class="sub">${g?'Rows: type any label you like':'Fields'}</p>${kvRows(b.rows,'rows','delrow',g?'Label':'field_name',g?'Value':'value')}<div><button type="button" class="add" data-act="addrow">${g?'Add row':'Add field'}</button></div>${g?'':tdFillBtn(b)}<details class="tplcode"${openTpl.has(b.id)?' open':''}><summary>Design the template</summary><p class="note">${g?`This is the code for ${tn}. Save it to the wiki once, and any page can use the box with its own labels. It holds ${Math.max(20,b.rows.length)} rows, and grows if a page ever needs more.`:`This is the code for ${tn}. Save it to the wiki once and every page of this kind can use it. Its TemplateData gives VisualEditor and this builder a form for the fields.`}</p>${infoboxDesigner(b)}<pre class="mini" data-tplcode>${esc(infoboxTemplate(b))}</pre><div class="btnrow"><button type="button" class="btn" data-act="copytpl">Copy template code</button>${hooks.saveTemplate?`<button type="button" class="btn primary" data-act="savetpl">Save to Template:${esc(nm)}</button>`:''}</div></details>`},

    return [`{\u007B${b.template.trim()||'Infobox'}`,...pairs.map(([k,v])=>`| ${k.padEnd(w)} = ${String(v).trim()}`),'}}'].join('\n')},

  html:(b,c)=>{const g=b.mode!=='dedicated';

    const rows=g?b.rows.filter(r=>r.v.trim()).map(r=>`<tr><th scope="row">${c.inl(r.k)}</th><td>${c.inl(r.v)}</td></tr>`).join('')

      :b.rows.filter(r=>r.k.trim()).map(r=>`${String(r.header||'').trim()?`<tr><th colspan="2" class="ib-head">${esc(r.header.trim())}</th></tr>`:''}<tr><th scope="row">${esc(String(r.label||'').trim()||niceKey(r.k))}</th><td>${c.inl(r.v)}</td></tr>`).join('');

    return `<table class="infobox"${b.accentOn&&b.accent?` style="border-top:4px solid ${esc(b.accent)}"`:''}><caption>${b.name.trim()?c.inl(b.name):esc(state.title.trim()||'Page name')}</caption>${b.image.trim()?`<tr><td colspan="2" class="ib-img">${ph(stripFile(b.image))}${b.caption.trim()?`<div class="ib-cap">${c.inl(b.caption)}</div>`:''}</td></tr>`:''}${rows}</table>`}},

image:{label:'Image',tok:'[\u005BFile:]]',desc:'A picture with an optional caption',

  form:b=>`<div class="row">${fText('File name','file',b.file,'Example.jpg')}${fText('Caption','caption',b.caption)}</div><div class="row r-3">${fSelect('Style','frame',b.frame,[['thumb','Thumbnail'],['frame','Framed'],['frameless','Frameless'],['','Plain']])}${fSelect('Position','align',b.align,[['','Default'],['right','Right'],['left','Left'],['center','Centre'],['none','None']])}${fText('Width (px)','size',b.size,'250')}</div>${hooks.upload?UPBTN(false):''}${THUMBS}`,

    const s=b.size.trim().replace(/px$/i,'');if(s)p.push(/^\d+$/.test(s)?s+'px':b.size.trim());if(b.caption.trim())p.push(b.caption.trim());return `[\u005B${p.join('|')}]]`},

gallery:{label:'Gallery',tok:'<gallery>',desc:'A grid or slideshow of images',

  init:()=>({items:'Example.jpg|First caption\nExample2.jpg|Second caption',mode:'',heights:'',caption:''}),

  form:b=>`<div class="row r-3">${fSelect('Style','mode',b.mode||'',GALLERY_MODES)}${fText('Caption (optional)','caption',b.caption||'')}${fText('Row height (px)','heights',b.heights||'','150')}</div>`+fArea('Images','items',b.items,'One image per line: File name.jpg|Caption',4,true)+(hooks.upload?UPBTN(true):'')+THUMBS,

  wiki:b=>{let a='';if(b.mode)a+=` mode="${b.mode}"`;const h=String(b.heights||'').trim().replace(/px$/i,'');if(h)a+=` heights="${/^\d+$/.test(h)?h+'px':h}"`;

    return `<gallery${a}>\n${lines(b.items).map(l=>l.trim()).join('\n')}\n</gallery>`},

  html:(b,c)=>`${String(b.caption||'').trim()?`<p class="gallery-cap">${c.inl(b.caption)}</p>`:''}<div class="gallery">${lines(b.items).map(l=>{const [f,...cap]=l.split('|');return `<figure>${ph(stripFile(f))}<figcaption>${c.inl(cap.join('|'))}</figcaption></figure>`}).join('')}</div>`},

  init:()=>({caption:'',header:true,sortable:false,cells:[['Header 1','Header 2'],['','']],align:[]}),

  form:b=>{const w=(b.cells[0]||[]).length,al=b.align||[];

    return `${fText('Caption (optional)','caption',b.caption)}<div class="checks">${fCheck('First row is a header','header',b.header,true)}${fCheck('Sortable columns','sortable',b.sortable)}</div>${fmtBar()}<div class="grid-wrap"><table class="cells"><tr class="alignrow">${Array.from({length:w},(x,j)=>`<td><select data-path="align.${j}" aria-label="Alignment of column ${j+1}">${[['','Align left'],['center','Centre'],['right','Align right']].map(([v,t])=>`<option value="${v}"${(al[j]||'')===v?' selected':''}>${t}</option>`).join('')}</select></td>`).join('')}<td></td></tr>${b.cells.map((r,i)=>`<tr>${r.map((v,j)=>`<td><input type="text" data-path="cells.${i}.${j}" value="${esc(v)}" aria-label="Row ${i+1}, column ${j+1}"${i===0&&b.header?' class="hcell"':''}></td>`).join('')}<td class="trow-tools"><button type="button" class="icon" data-act="trowup" data-i="${i}" aria-label="Move row ${i+1} up" title="Move row up">${ICON.up}</button><button type="button" class="icon" data-act="trowdown" data-i="${i}" aria-label="Move row ${i+1} down" title="Move row down">${ICON.down}</button><button type="button" class="icon del" data-act="trowdel" data-i="${i}" aria-label="Remove row ${i+1}" title="Remove row">${ICON.x}</button></td></tr>`).join('')}</table></div><p class="hint">Tip: copy cells from a spreadsheet and paste them into any cell here.</p><div class="btnrow"><button type="button" class="add" data-act="addtrow">Add row</button><button type="button" class="add" data-act="addcol">Add column</button><button type="button" class="add" data-act="delcol">Remove last column</button></div>`},

  wiki:b=>{const out=[`{| class="wikitable${b.sortable?' sortable':''}"`];if(b.caption.trim())out.push('|+ '+b.caption.trim());const al=b.align||[];

    b.cells.forEach((r,i)=>{if(i>0)out.push('|-');out.push(i===0&&b.header?'! '+r.map(x=>x.trim()).join(' !! '):'| '+r.map((x,j)=>al[j]?`style="text-align:${al[j]}" | ${x.trim()}`:x.trim()).join(' || '))});

  html:(b,c)=>{const al=b.align||[];return `<div class="tablewrap"><table class="wikitable">${b.caption.trim()?`<caption>${c.inl(b.caption)}</caption>`:''}${b.cells.map((r,i)=>`<tr>${r.map((x,j)=>i===0&&b.header?`<th>${c.inl(x)}</th>`:`<td${al[j]?` style="text-align:${al[j]}"`:''}>${c.inl(x)}</td>`).join('')}</tr>`).join('')}</table></div>`}},

template:{label:'Template',tok:'{\u007B }}',desc:'Any template from your wiki',

  form:templateForm,

  wiki:b=>{const ps=b.params.filter(p=>(p.k.trim()||p.v.trim())&&!(p.td&&!p.v.trim()));const n=b.name.trim()||'Template name';

    if(ps.filter(p=>p.k.trim()).length>=3)return `{\u007B${n}\n${ps.map(p=>`| ${p.k.trim()?p.k.trim()+' = ':''}${p.v.trim()}`).join('\n')}\n}}`;

    return `{\u007B${n}${ps.map(p=>'|'+(p.k.trim()?p.k.trim()+'=':'')+p.v.trim()).join('')}}}`},

  html:b=>`<div class="tpl"><code>{\u007B${esc(b.name.trim()||'Template name')}}}</code> renders here once the page is saved on your wiki.</div>`},

 

 

  html:(b,c)=>`<div class="coll"><div class="coll-title">${c.inl(b.title.trim()||'Details')} <span class="muted">[${b.collapsed?'show':'hide'}]</span></div>${b.collapsed?'':b.text.trim().split(/\n\s*\n/).map(x=>`<p>${c.inl(x)}</p>`).join('')}</div>`},

  form:b=>`<div class="row">${fSelect('Type','kind',b.kind,[['Main','Main article'],['See also','See also'],['Further','Further information']])}${fText('Page name','target',b.target,'Detailed page')}</div>${fSelect('Markup','markup',b.markup,[['plain','Plain wikitext (works now)'],['template','{\u007BMain}} / {\u007BSee also}} / {\u007BFurther}} (needs those templates)']])}`,

  wiki:b=>{const t=b.target.trim()||'Page name';return b.markup==='template'?`{\u007B${b.kind}|${t}}}`:`:''${({Main:'Main article','See also':'See also',Further:'Further information'})[b.kind]}: [\u005B${t}]]''`},

  sum:b=>b.style==='reflist'?'{\u007BReflist}}':'<references />',

  form:b=>`<div class="row">${fSelect('Markup','style',b.style,[['references','<references /> (any wiki)'],['reflist','{\u007BReflist}} (needs that template)']])}<div class="field"><span>&nbsp;</span>${fCheck('Add a “References” heading','heading',b.heading)}</div></div>`,

  wiki:b=>`${b.heading?'== References ==\n':''}${b.style==='reflist'?'{\u007BReflist}}':'<references />'}`,

categories:{label:'Categories',tok:'[\u005BCategory:]]',desc:'File the page under categories',

  wiki:b=>lines(b.items).map(l=>`[\u005BCategory:${l.trim().replace(/^Category:/i,'')}]]`).join('\n'),

      rows:[{k:'Type',v:'Bread'},{k:'Main ingredient',v:'Flour, water, salt'},{k:'Leavening',v:'Wild yeast and [\u005Blactic acid bacteria]]'}]}),

    mk('paragraph',{text:"'''Sourdough''' is a [\u005Bbread]] leavened by a naturally fermented starter rather than commercial [\u005Byeast]].<ref>Replace this with your source.</ref> The bacteria in the starter give the loaf its mildly sour flavour and help it keep longer."}),

    mk('bullets',{items:'[\u005BRye bread]]\n[\u005BSoda bread]]'}),

function blockText(b){let w;try{w=DEFS[b.type].wiki(b)}catch(e){w=''}return b.src!=null&&w===b._g?b.src:w}

function gen(){

  state.blocks.forEach(b=>{const w=blockText(b);if(!w||!w.trim())return;

    if(out)out+=prev&&b.prevId===prev.id&&b.sep!=null?b.sep:'\n\n';

    out+=w;prev=b});

}

    .replace(/\{\{([^{}]+)\}\}/g,'<span class="tpl-inline">{\u007B$1}}</span>')

  renderPreview();renderOutline();scheduleChecks();

    <button type="button" class="b-title" data-act="toggle" aria-expanded="${!isC}"><span class="name">${d.label}</span><span class="summary">${esc(String(d.sum(b)||'').slice(0,80))}</span><span class="foldnote"></span></button>

    <span class="tools">${b.type==='heading'?`

 

function commit(){renderCanvas();updateOutput();save();record()}

 

 

 

  const f=c.querySelector('.block-body [data-path], .block-body [data-tdkey]');if(f)f.focus({preventScroll:true})}

  const b=mk(type);state.blocks.splice(idx,0,b);commit();revealBlock(b.id);

function setPath(o,path,v){const p=path.split('.');let t=o;for(let i=0;i<p.length-1;i++){if(t[p[i]]==null)t[p[i]]=/^\d+$/.test(p[i+1])?[]:{};t=t[p[i]]}t[p[p.length-1]]=v}

    const tn=card.querySelector('[data-tplname]');if(tn)tn.textContent='Template:'+(tdKey(b.template)||'Infobox');

    const sb=card.querySelector('[data-act="savetpl"]');if(sb&&!sb.classList.contains('armed'))sb.textContent='Save to Template:'+(tdKey(b.template)||'Infobox')}

  updateOutput();save();recordSoon();

  link:['[\u005B',']]','Page name'],ext:['[https://example.com ',']','link text'],ref:['<ref>','</ref>','Source details'],tpl:['{\u007B','}}','Template name'],nowiki:['<nowiki>','</nowiki>','text']};

    case 'delcol':if(b.cells[0].length>1){b.cells.forEach(r=>r.pop());if(b.align&&b.align.length>=b.cells[0].length+1)b.align.length=b.cells[0].length;commit()}return;

    if(two==='{\u007B'||two==='[\u005B'){d++;cur+=two;i+=2}

  if(two==='{\u007B'||two==='[\u005B'){d++;i++}else if((two==='}}'||two===']]')&&d>0){d--;i++}else if(s[i]==='='&&d===0)return i}return -1}

      if(!cur){cur={c:[],h:[],a:[]};rows.push(cur)}

      for(const c of cells){const parts=splitTop(c);if(parts.length>2)return null;

        if(parts.length===2){const am=parts[0].trim().match(/^style\s*=\s*"\s*text-align\s*:\s*(left|center|right)\s*;?\s*"$/i);if(!am||h)return null;cur.c.push(parts[1].trim());cur.a.push(am[1].toLowerCase()==='left'?'':am[1].toLowerCase())}

        else{cur.c.push(c.trim());cur.a.push('')}

        cur.h.push(h)}continue}

  const w=Math.max(...rows.map(r=>r.c.length));const align=[];

  return {caption,header,sortable:cls.includes('sortable'),cells:rows.map(r=>r.c.concat(Array(w-r.c.length).fill(''))),align};

    case 'gallery':{if(keys.some(k=>!['mode','heights','caption'].includes(k)))return null;const mode=a.mode&&a.mode!==true?String(a.mode).toLowerCase():'';

      if(mode&&!GALLERY_MODES.some(x=>x[0]===mode))return null;

      return ['gallery',{items:lines(inner).map(l=>l.trim()).join('\n'),mode,heights:a.heights&&a.heights!==true?String(a.heights):'',caption:a.caption&&a.caption!==true?String(a.caption).replace(/&quot;/g,'"'):''}]}

    if(l.startsWith('{\u007B'))return span(r,matchPair(r,0,'{\u007B','}}'))>0;

    if(/^\[\[\s*(File|Image)\s*:/i.test(l))return span(r,matchPair(r,0,'[\u005B',']]'))>0;

  function step(){

    if(t.startsWith('<!--')){r=rest();e=r.indexOf('-->');n=e<0?0:span(r,e+3);if(n){raw(take(n));return}}

    if(/^[ \t]/.test(line)){let k=i;while(k<L.length&&/^[ \t]/.test(L[k])&&L[k].trim())k++;raw(take(k-i));return}

    if(/^#redirect/i.test(t)){raw(take(1));return}

    if((m=line.match(/^(={2,5})\s*([^=].*?)\s*\1\s*$/))){add('heading',{text:m[2],level:String(m[1].length)});i++;return}

    if(/^__(NO|FORCE)?TOC__$/.test(t)){add('toc',{mode:t});i++;return}

    if(/^-{4,}$/.test(t)){add('rule');i++;return}

      add('categories',{items:names.join('\n')});return}

      add('hatnote',{kind:{'Main article':'Main','See also':'See also','Further information':'Further'}[m[1]],target:m[2].trim(),markup:'plain'});i++;return}

      return}

      if(k>=L.length){raw(take(L.length-i));return}

      const ls=L.slice(i,k+1);const p=parseTable(ls);i=k+1;if(p)add('table',p);else raw(ls.join('\n'));return}

      if(n){const inner=r.slice(m[0].length,innerEnd);const whole=take(n);const blk=tagBlock(tag,attrsOf(attr),inner,attr.trim());if(blk)add(blk[0],blk[1]);else raw(whole);return}

    if((m=line.match(blockTagRe))){r=rest();e=tagSpan(r,m[1]);n=span(r,e);if(n){raw(take(n));return}if(e<0){raw(take(1));return}}

    if(line.startsWith('{\u007B')){r=rest();e=matchPair(r,0,'{\u007B','}}');n=span(r,e);

      if(n){const whole=r.slice(0,e);i+=n;const blk=templateBlock(whole.slice(2,-2));if(blk)add(blk[0],blk[1]);else raw(whole);return}}

    if(/^\[\[\s*(File|Image)\s*:/i.test(line)){r=rest();e=matchPair(r,0,'[\u005B',']]');n=span(r,e);

      if(n){const whole=r.slice(0,e);i+=n;const p=imageBlock(whole.slice(2,-2));if(p)add('image',p);else raw(whole);return}}

    if(prev&&b.type==='raw'&&prev.type==='raw'){prev._e=b._e;continue}

    if(prev&&b.type==='categories'&&prev.type==='categories'){prev.items+='\n'+b.items;prev._e=b._e;continue}

    if(prev&&b.type==='refs'&&!b.heading&&prev.type==='heading'&&prev.level==='2'&&prev.text.trim()==='References'){res.pop();b.heading=true;b._s=prev._s}

titleEl.addEventListener('input',()=>{state.title=titleEl.value;renderPreview();save();recordSoon()});

$('#pb-expandAll').addEventListener('click',()=>{collapsed.clear();renderCanvas()});

const tabs=[[$('#pb-tab-code'),$('#pb-panel-code')],[$('#pb-tab-prev'),$('#pb-panel-prev')],[$('#pb-tab-chk'),$('#pb-panel-chk')]];

  const i=tabs.findIndex(([t])=>t.getAttribute('aria-selected')==='true');const n=tabs[(i+(e.key==='ArrowRight'?1:tabs.length-1))%tabs.length][0];n.click();n.focus();

    state={title:title||'',blocks};collapsed.clear();titleEl.value=state.title;commit();resetHistory();

  showToast,

 

const hooks = {

onChange: () => {

scheduleLive();

};