domma-cms 1.6.29 → 1.6.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{SHORTCODES as A}from"./shortcode-registry.js";import{EFFECTS as w,CELEBRATION_THEMES as Q,getEffectAttrs as z}from"./effect-defs.js";import{boolState as Z,boolValue as ee,findEnclosingShortcode as H,setAttr as P,setAttrs as D,effectAttrKeys as te}from"./shortcode-tags.js";import{insertAtCursor as O,replaceRange as ne}from"./markdown-toolbar.js";import{clearLookupCache as oe,lookupOptions as se}from"./shortcode-lookups.js";import{insertMenuGroups as ie,insertShortcodeByName as ae}from"./shortcode-insert.js";import{openShortcodeForm as $}from"./shortcode-form.js";function ce(e){return se(e,a?.span?.attrs||{})}const le=A.map(e=>({name:e.name,selfClosing:!!e.selfClosing})),re=new Map(A.map(e=>[e.name,e])),j=new Map(w.map(e=>[e.name,e])),de=w.map(e=>({name:e.name,selfClosing:!!e.selfClosing})),W=[...le,...de],Y=new Set(["card","box","hero","banner","col","button"]);let a=null;const B="position:fixed;z-index:10000;min-width:210px;max-height:70vh;overflow-y:auto;background:var(--dm-surface,#1c1c30);border:1px solid var(--dm-border,#2a2a40);border-radius:6px;box-shadow:var(--dm-shadow-lg);padding:.3rem;font-size:.83rem;color:var(--dm-text,#e5e5e5);",p="display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;padding:.35rem .55rem;border:none;background:transparent;color:inherit;border-radius:4px;cursor:pointer;font-size:.83rem;",S="padding:.3rem .55rem;color:var(--dm-text-muted,#8a8a9a);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;",F="flex:1;min-width:0;padding:.2rem .4rem;background:var(--dm-input-bg,#12121e);border:1px solid var(--dm-border,#333);border-radius:3px;color:var(--dm-text,#eee);font-size:.8rem;",ue="height:1px;background:var(--dm-border,#2a2a40);margin:.3rem .2rem;";function f(e){return e.addEventListener("mouseenter",()=>{e.style.background="var(--dm-primary,#4338ca)",e.style.color="var(--dm-primary-text,#fff)"}),e.addEventListener("mouseleave",()=>{e.style.background="transparent",e.style.color="inherit"}),e}export function attachContextMenu(e){return typeof Domma>"u"||!Domma.elements?.contextMenu?(e.addEventListener("contextmenu",n=>{n.preventDefault(),d();const t=H(e,W);M(e,t,n.clientX,n.clientY)}),null):Domma.elements.contextMenu(e,{inherit:!1,cursor:!1,render:n=>{d();const t=H(e,W);M(e,t,n.x,n.y)}})}function d(){a&&(v(),a.root.remove(),document.removeEventListener("mousedown",q,!0),document.removeEventListener("keydown",U,!0),window.removeEventListener("scroll",K,!0),a=null)}const q=e=>{a&&!a.root.contains(e.target)&&!(a.submenu&&a.submenu.contains(e.target))&&d()},K=e=>{a&&!a.root.contains(e.target)&&!(a.submenu&&a.submenu.contains(e.target))&&d()},U=e=>{e.key==="Escape"&&d()};function M(e,n,t,o){oe();const s=document.createElement("div");s.className="dm-sc-menu",s.style.cssText=B,a={root:s,textarea:e,span:n,submenu:null};const i=n&&(re.get(n.name)||j.get(n.name)),c=n&&Y.has(n.name)?w.filter(r=>r.name in n.attrs):[];i&&pe(s,i);for(const r of c)Ee(s,r);(i||c.length)&&s.appendChild(N()),s.appendChild(y("Celebrations\u2026",()=>ge())),s.appendChild(y("Add effect\u2026",()=>Ce())),s.appendChild(y("Insert\u2026",()=>ve()));const l=e.selectionStart!==e.selectionEnd;(n||l)&&s.appendChild(y(l?"Wrap selection in\u2026":"Wrap in\u2026",()=>we())),document.body.appendChild(s),J(s,t,o),document.addEventListener("mousedown",q,!0),document.addEventListener("keydown",U,!0),window.addEventListener("scroll",K,!0),window.I&&I.scan(s)}function N(){const e=document.createElement("div");return e.style.cssText=ue,e}function C(e){const n=document.createElement("div");return n.style.cssText=S,n.textContent=e,n}function pe(e,n){e.appendChild(C(`${n.label} options`));const t=f(document.createElement("button"));t.type="button",t.style.cssText=p,t.innerHTML='<span data-icon="edit" data-icon-size="13" style="display:inline-flex;align-items:center;"></span>',t.appendChild(document.createTextNode(`Edit ${n.label}\u2026`)),t.addEventListener("click",()=>{const{textarea:i,span:c}=a;d(),$(i,{...n,attrs:z(n,c.attrs)},{span:c})}),e.appendChild(t);for(const i of n.actions||[]){const c=f(document.createElement("button"));c.type="button",c.style.cssText=p,c.innerHTML=`<span data-icon="${i.icon||"zap"}" data-icon-size="13" style="display:inline-flex;align-items:center;"></span>`,c.appendChild(document.createTextNode(i.label)),c.addEventListener("click",()=>{const{textarea:l,span:r}=a;if(i.remove){ne(l,r.openTagStart,r.openTagEnd,""),d();return}a.span=D(l,r,i.set||{}),d()}),e.appendChild(c)}const o=Array.isArray(n.quickAttrs)?new Set(n.quickAttrs):null,s=z(n,a.span.attrs).filter(i=>!o||o.has(i.name));(n.actions||[]).length&&s.length&&e.appendChild(N());for(const i of s)e.appendChild(V(i))}function V(e,n=e.name){const t=a.span.attrs[n];switch(e.type){case"checkbox":return me(e,n,Z(t,e.default));case"select":return be(e,n,t);case"lookup":return ye(e,n,t);case"colour":return he(e,n,t);case"icon":return xe(e,n,t);default:return fe(e,n,t)}}function x(e,n){if(a.span=P(a.textarea,a.span,e,n),e==="theme"){const{textarea:t,span:o,root:s}=a,i=s.getBoundingClientRect();d(),M(t,o,i.left,i.top)}}function me(e,n,t){const o=f(document.createElement("label"));o.style.cssText=p;const s=document.createElement("input");return s.type="checkbox",s.checked=t,s.addEventListener("change",()=>x(n,ee(e,s.checked))),o.appendChild(s),o.appendChild(document.createTextNode(e.label)),o}function fe(e,n,t){const o=document.createElement("div");o.style.cssText=p+"cursor:default;";const s=document.createElement("span");s.textContent=e.label,s.style.cssText="white-space:nowrap;color:var(--dm-text-muted,#9a9aac);";const i=document.createElement("input");i.type=e.type==="number"?"number":"text",i.value=t===!0||t==null?"":t,e.default!=null&&e.default!==""&&(i.placeholder=String(e.default)),i.style.cssText=F;let c=null;return i.addEventListener("input",()=>{clearTimeout(c),c=setTimeout(()=>x(n,i.value.trim()),180)}),i.addEventListener("mousedown",l=>l.stopPropagation()),o.appendChild(s),o.appendChild(i),o}function he(e,n,t){const o=document.createElement("div");o.style.cssText=p+"cursor:default;";const s=document.createElement("span");s.textContent=e.label,s.style.flex="1";const i=document.createElement("input");return i.type="color",typeof t=="string"&&/^#/.test(t)?i.value=t:typeof e.default=="string"&&/^#/.test(e.default)&&(i.value=e.default),i.addEventListener("input",()=>x(n,i.value)),o.appendChild(s),o.appendChild(i),o}function be(e,n,t){const o=t==null||t===!0?e.default??"":t;return y(`${e.label}${o!==""?`: ${o}`:""}`,()=>{const s=g();for(const[i,c]of e.options||[]){const l=f(document.createElement("button"));l.type="button",l.style.cssText=p,l.textContent=c,i===o&&(l.style.fontWeight="700"),l.addEventListener("click",()=>{x(n,i),v()}),s.appendChild(l)}return s})}function xe(e,n,t){const o=t==null||t===!0?"":String(t),s=o?`${e.label}: ${o}`:e.label;return y(s,()=>{const i=g();i.style.width="232px";const c=document.createElement("input");c.type="text",c.placeholder="Search icons\u2026",c.style.cssText=F+"margin:6px;width:calc(100% - 12px);",c.addEventListener("mousedown",L=>L.stopPropagation()),i.appendChild(c);const l=f(document.createElement("button"));l.type="button",l.style.cssText=p,l.textContent="- none -",o||(l.style.fontWeight="700"),l.addEventListener("click",()=>{x(n,null),v()}),i.appendChild(l);const r=document.createElement("div");r.style.cssText="display:flex;flex-wrap:wrap;gap:2px;padding:4px 6px;max-height:220px;overflow-y:auto;",i.appendChild(r);const m=96,T=()=>{const L=typeof I<"u"&&typeof I.list=="function"?I.list():[],R=c.value.trim().toLowerCase(),_=R?L.filter(u=>u.toLowerCase().includes(R)):L;r.replaceChildren();for(const u of _.slice(0,m)){const b=f(document.createElement("button"));b.type="button",b.title=u,b.style.cssText="width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:4px;cursor:pointer;color:inherit;",u===o&&(b.style.borderColor="var(--dm-primary,#5b8cff)");const k=document.createElement("span");k.setAttribute("data-icon",u),k.setAttribute("data-icon-size","15"),k.style.cssText="display:inline-flex;align-items:center;",b.appendChild(k),b.addEventListener("click",()=>{x(n,u),v()}),r.appendChild(b)}if(_.length>m){const u=document.createElement("div");u.style.cssText=S,u.textContent=`${_.length-m} more - refine search`,r.appendChild(u)}if(!_.length){const u=document.createElement("div");u.style.cssText=S,u.textContent="No icons match",r.appendChild(u)}window.I&&I.scan(r)};let h=null;return c.addEventListener("input",()=>{clearTimeout(h),h=setTimeout(T,120)}),T(),setTimeout(()=>c.focus(),0),i})}function ye(e,n,t){const o=t==null||t===!0?e.default??"":t;return y(`${e.label}${o!==""?`: ${o}`:""}`,()=>{const s=g();s.style.minHeight="48px";const i=typeof E<"u"&&E.loader?E.loader(s,{type:"dots"}):null;return ce(e.source).then(c=>{if(i&&i.destroy(),!a||a.submenu!==s)return;if(s.style.minHeight="",!c.length){const m=document.createElement("div");m.style.cssText=S,m.textContent="Nothing found",s.appendChild(m)}const l=c.some(([m])=>m===o),r=[["","- none -"],...c];o!==""&&!l&&r.push([o,`${o} (missing)`]);for(const[m,T]of r){const h=f(document.createElement("button"));h.type="button",h.style.cssText=p,h.textContent=T,m===o&&(h.style.fontWeight="700"),h.addEventListener("click",()=>{x(n,m===""?null:m),v()}),s.appendChild(h)}}),s})}function Ee(e,n){e.appendChild(C(`Effect: ${n.label}`));for(const o of n.attrs||[])e.appendChild(V(o,`${n.name}-${o.name}`));const t=f(document.createElement("button"));t.type="button",t.style.cssText=p,t.innerHTML='<span data-icon="trash" data-icon-size="13" style="display:inline-flex;align-items:center;"></span> Remove effect',t.addEventListener("click",()=>{const o={};for(const s of te(a.span.attrs,n.name))o[s]=null;D(a.textarea,a.span,o),d()}),e.appendChild(t)}function ge(){const e=g();e.appendChild(C("Seasonal themes"));for(const[n,t]of[["auto","Auto (date-detected)"],...Object.entries(Q).map(([o,s])=>[o,s.label])]){const o=f(document.createElement("button"));o.type="button",o.style.cssText=p,o.textContent=t,o.addEventListener("click",()=>{O(a.textarea,`[celebrate theme="${n}" /]`),d()}),e.appendChild(o)}e.appendChild(N()),e.appendChild(C("Celebration effects"));for(const n of["butterflies","ticker-tape","firework","fireworks"]){const t=j.get(n),o=f(document.createElement("button"));o.type="button",o.style.cssText=p,o.textContent=t.label,o.addEventListener("click",()=>{const s=a.textarea;d(),$(s,t)}),e.appendChild(o)}return e}function Ce(){const e=g(),n=a.span,t=n&&Y.has(n.name)?n.name:null;for(const o of[...new Set(w.map(s=>s.category))]){const s=w.filter(i=>i.category===o);if(s.length){e.appendChild(C(o));for(const i of s){const c=t&&(i.hosts||[]).includes(t)&&!(i.name in n.attrs),l=f(document.createElement("button"));if(l.type="button",l.style.cssText=p+"justify-content:space-between;",l.appendChild(document.createTextNode(i.label)),c){const r=document.createElement("span");r.textContent=`inject \u2192 [${t}]`,r.style.cssText="opacity:.6;font-size:.7rem;",l.appendChild(r)}l.addEventListener("click",()=>{if(c)P(a.textarea,a.span,i.name,!0);else{const r=i.selfClosing?`[${i.name} /]`:`[${i.name}]
|
|
1
|
+
import{SHORTCODES as A}from"./shortcode-registry.js";import{EFFECTS as T,CELEBRATION_THEMES as Q,getEffectAttrs as P}from"./effect-defs.js";import{boolState as Z,boolValue as ee,findEnclosingShortcode as H,setAttr as $,setAttrs as D,effectAttrKeys as te}from"./shortcode-tags.js";import{insertAtCursor as O,replaceRange as ne}from"./markdown-toolbar.js";import{clearLookupCache as oe,lookupOptions as se}from"./shortcode-lookups.js";import{insertMenuGroups as ie,insertShortcodeByName as ae}from"./shortcode-insert.js";import{openShortcodeForm as M}from"./shortcode-form.js";import{pickMedia as ce}from"./media-picker.js";function re(e){return se(e,a?.span?.attrs||{})}const le=A.map(e=>({name:e.name,selfClosing:!!e.selfClosing})),de=new Map(A.map(e=>[e.name,e])),j=new Map(T.map(e=>[e.name,e])),ue=T.map(e=>({name:e.name,selfClosing:!!e.selfClosing})),B=[...le,...ue],W=new Set(["card","box","hero","banner","col","button"]);let a=null;const Y="position:fixed;z-index:10000;min-width:210px;max-height:70vh;overflow-y:auto;background:var(--dm-surface,#1c1c30);border:1px solid var(--dm-border,#2a2a40);border-radius:6px;box-shadow:var(--dm-shadow-lg);padding:.3rem;font-size:.83rem;color:var(--dm-text,#e5e5e5);",m="display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;padding:.35rem .55rem;border:none;background:transparent;color:inherit;border-radius:4px;cursor:pointer;font-size:.83rem;",S="padding:.3rem .55rem;color:var(--dm-text-muted,#8a8a9a);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;",F="flex:1;min-width:0;padding:.2rem .4rem;background:var(--dm-input-bg,#12121e);border:1px solid var(--dm-border,#333);border-radius:3px;color:var(--dm-text,#eee);font-size:.8rem;",pe="height:1px;background:var(--dm-border,#2a2a40);margin:.3rem .2rem;";function f(e){return e.addEventListener("mouseenter",()=>{e.style.background="var(--dm-primary,#4338ca)",e.style.color="var(--dm-primary-text,#fff)"}),e.addEventListener("mouseleave",()=>{e.style.background="transparent",e.style.color="inherit"}),e}export function attachContextMenu(e){return typeof Domma>"u"||!Domma.elements?.contextMenu?(e.addEventListener("contextmenu",n=>{n.preventDefault(),d();const t=H(e,B);N(e,t,n.clientX,n.clientY)}),null):Domma.elements.contextMenu(e,{inherit:!1,cursor:!1,render:n=>{d();const t=H(e,B);N(e,t,n.x,n.y)}})}function d(){a&&(w(),a.root.remove(),document.removeEventListener("mousedown",q,!0),document.removeEventListener("keydown",U,!0),window.removeEventListener("scroll",K,!0),a=null)}const q=e=>{a&&!a.root.contains(e.target)&&!(a.submenu&&a.submenu.contains(e.target))&&d()},K=e=>{a&&!a.root.contains(e.target)&&!(a.submenu&&a.submenu.contains(e.target))&&d()},U=e=>{e.key==="Escape"&&d()};function N(e,n,t,o){oe();const s=document.createElement("div");s.className="dm-sc-menu",s.style.cssText=Y,a={root:s,textarea:e,span:n,submenu:null};const i=n&&(de.get(n.name)||j.get(n.name)),r=n&&W.has(n.name)?T.filter(l=>l.name in n.attrs):[];i&&me(s,i);for(const l of r)ge(s,l);(i||r.length)&&s.appendChild(R()),s.appendChild(g("Celebrations\u2026",()=>Ce())),s.appendChild(g("Add effect\u2026",()=>ve())),s.appendChild(g("Insert\u2026",()=>we()));const c=e.selectionStart!==e.selectionEnd;(n||c)&&s.appendChild(g(c?"Wrap selection in\u2026":"Wrap in\u2026",()=>Te())),document.body.appendChild(s),J(s,t,o),document.addEventListener("mousedown",q,!0),document.addEventListener("keydown",U,!0),window.addEventListener("scroll",K,!0),window.I&&I.scan(s)}function R(){const e=document.createElement("div");return e.style.cssText=pe,e}function v(e){const n=document.createElement("div");return n.style.cssText=S,n.textContent=e,n}function me(e,n){e.appendChild(v(`${n.label} options`));const t=f(document.createElement("button"));t.type="button",t.style.cssText=m,t.innerHTML='<span data-icon="edit" data-icon-size="13" style="display:inline-flex;align-items:center;"></span>',t.appendChild(document.createTextNode(`Edit ${n.label}\u2026`)),t.addEventListener("click",()=>{const{textarea:i,span:r}=a;d(),M(i,{...n,attrs:P(n,r.attrs)},{span:r})}),e.appendChild(t);for(const i of n.actions||[]){const r=f(document.createElement("button"));r.type="button",r.style.cssText=m,r.innerHTML=`<span data-icon="${i.icon||"zap"}" data-icon-size="13" style="display:inline-flex;align-items:center;"></span>`,r.appendChild(document.createTextNode(i.label)),r.addEventListener("click",()=>{const{textarea:c,span:l}=a;if(i.remove){ne(c,l.openTagStart,l.openTagEnd,""),d();return}a.span=D(c,l,i.set||{}),d()}),e.appendChild(r)}const o=Array.isArray(n.quickAttrs)?new Set(n.quickAttrs):null,s=P(n,a.span.attrs).filter(i=>!o||o.has(i.name));(n.actions||[]).length&&s.length&&e.appendChild(R());for(const i of s)e.appendChild(V(i))}function V(e,n=e.name){const t=a.span.attrs[n];switch(e.type){case"checkbox":return fe(e,n,Z(t,e.default));case"select":return xe(e,n,t);case"lookup":return Ee(e,n,t);case"colour":return be(e,n,t);case"icon":return ye(e,n,t);default:return he(e,n,t)}}function y(e,n){if(a.span=$(a.textarea,a.span,e,n),e==="theme"){const{textarea:t,span:o,root:s}=a,i=s.getBoundingClientRect();d(),N(t,o,i.left,i.top)}}function fe(e,n,t){const o=f(document.createElement("label"));o.style.cssText=m;const s=document.createElement("input");return s.type="checkbox",s.checked=t,s.addEventListener("change",()=>y(n,ee(e,s.checked))),o.appendChild(s),o.appendChild(document.createTextNode(e.label)),o}function he(e,n,t){const o=document.createElement("div");o.style.cssText=m+"cursor:default;";const s=document.createElement("span");s.textContent=e.label,s.style.cssText="white-space:nowrap;color:var(--dm-text-muted,#9a9aac);";const i=document.createElement("input");i.type=e.type==="number"?"number":"text",i.value=t===!0||t==null?"":t,e.default!=null&&e.default!==""&&(i.placeholder=String(e.default)),i.style.cssText=F;let r=null;if(i.addEventListener("input",()=>{clearTimeout(r),r=setTimeout(()=>y(n,i.value.trim()),180)}),i.addEventListener("mousedown",c=>c.stopPropagation()),o.appendChild(s),o.appendChild(i),e.type==="image"){const c=document.createElement("button");c.type="button",c.textContent="Browse",c.title="Choose from Media",c.style.cssText="padding:2px 8px;background:transparent;border:1px solid var(--dm-border,#333);border-radius:4px;color:inherit;cursor:pointer;flex-shrink:0;font:inherit;",c.addEventListener("mousedown",l=>l.stopPropagation()),c.addEventListener("click",async()=>{const{textarea:l,span:u}=a;d();const b=await ce({current:i.value.trim()});b&&l.isConnected&&$(l,u,n,b)}),o.appendChild(c)}return o}function be(e,n,t){const o=document.createElement("div");o.style.cssText=m+"cursor:default;";const s=document.createElement("span");s.textContent=e.label,s.style.flex="1";const i=document.createElement("input");return i.type="color",typeof t=="string"&&/^#/.test(t)?i.value=t:typeof e.default=="string"&&/^#/.test(e.default)&&(i.value=e.default),i.addEventListener("input",()=>y(n,i.value)),o.appendChild(s),o.appendChild(i),o}function xe(e,n,t){const o=t==null||t===!0?e.default??"":t;return g(`${e.label}${o!==""?`: ${o}`:""}`,()=>{const s=C();for(const[i,r]of e.options||[]){const c=f(document.createElement("button"));c.type="button",c.style.cssText=m,c.textContent=r,i===o&&(c.style.fontWeight="700"),c.addEventListener("click",()=>{y(n,i),w()}),s.appendChild(c)}return s})}function ye(e,n,t){const o=t==null||t===!0?"":String(t),s=o?`${e.label}: ${o}`:e.label;return g(s,()=>{const i=C();i.style.width="232px";const r=document.createElement("input");r.type="text",r.placeholder="Search icons\u2026",r.style.cssText=F+"margin:6px;width:calc(100% - 12px);",r.addEventListener("mousedown",L=>L.stopPropagation()),i.appendChild(r);const c=f(document.createElement("button"));c.type="button",c.style.cssText=m,c.textContent="- none -",o||(c.style.fontWeight="700"),c.addEventListener("click",()=>{y(n,null),w()}),i.appendChild(c);const l=document.createElement("div");l.style.cssText="display:flex;flex-wrap:wrap;gap:2px;padding:4px 6px;max-height:220px;overflow-y:auto;",i.appendChild(l);const u=96,b=()=>{const L=typeof I<"u"&&typeof I.list=="function"?I.list():[],z=r.value.trim().toLowerCase(),_=z?L.filter(p=>p.toLowerCase().includes(z)):L;l.replaceChildren();for(const p of _.slice(0,u)){const x=f(document.createElement("button"));x.type="button",x.title=p,x.style.cssText="width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:4px;cursor:pointer;color:inherit;",p===o&&(x.style.borderColor="var(--dm-primary,#5b8cff)");const k=document.createElement("span");k.setAttribute("data-icon",p),k.setAttribute("data-icon-size","15"),k.style.cssText="display:inline-flex;align-items:center;",x.appendChild(k),x.addEventListener("click",()=>{y(n,p),w()}),l.appendChild(x)}if(_.length>u){const p=document.createElement("div");p.style.cssText=S,p.textContent=`${_.length-u} more - refine search`,l.appendChild(p)}if(!_.length){const p=document.createElement("div");p.style.cssText=S,p.textContent="No icons match",l.appendChild(p)}window.I&&I.scan(l)};let h=null;return r.addEventListener("input",()=>{clearTimeout(h),h=setTimeout(b,120)}),b(),setTimeout(()=>r.focus(),0),i})}function Ee(e,n,t){const o=t==null||t===!0?e.default??"":t;return g(`${e.label}${o!==""?`: ${o}`:""}`,()=>{const s=C();s.style.minHeight="48px";const i=typeof E<"u"&&E.loader?E.loader(s,{type:"dots"}):null;return re(e.source).then(r=>{if(i&&i.destroy(),!a||a.submenu!==s)return;if(s.style.minHeight="",!r.length){const u=document.createElement("div");u.style.cssText=S,u.textContent="Nothing found",s.appendChild(u)}const c=r.some(([u])=>u===o),l=[["","- none -"],...r];o!==""&&!c&&l.push([o,`${o} (missing)`]);for(const[u,b]of l){const h=f(document.createElement("button"));h.type="button",h.style.cssText=m,h.textContent=b,u===o&&(h.style.fontWeight="700"),h.addEventListener("click",()=>{y(n,u===""?null:u),w()}),s.appendChild(h)}}),s})}function ge(e,n){e.appendChild(v(`Effect: ${n.label}`));for(const o of n.attrs||[])e.appendChild(V(o,`${n.name}-${o.name}`));const t=f(document.createElement("button"));t.type="button",t.style.cssText=m,t.innerHTML='<span data-icon="trash" data-icon-size="13" style="display:inline-flex;align-items:center;"></span> Remove effect',t.addEventListener("click",()=>{const o={};for(const s of te(a.span.attrs,n.name))o[s]=null;D(a.textarea,a.span,o),d()}),e.appendChild(t)}function Ce(){const e=C();e.appendChild(v("Seasonal themes"));for(const[n,t]of[["auto","Auto (date-detected)"],...Object.entries(Q).map(([o,s])=>[o,s.label])]){const o=f(document.createElement("button"));o.type="button",o.style.cssText=m,o.textContent=t,o.addEventListener("click",()=>{O(a.textarea,`[celebrate theme="${n}" /]`),d()}),e.appendChild(o)}e.appendChild(R()),e.appendChild(v("Celebration effects"));for(const n of["butterflies","ticker-tape","firework","fireworks"]){const t=j.get(n),o=f(document.createElement("button"));o.type="button",o.style.cssText=m,o.textContent=t.label,o.addEventListener("click",()=>{const s=a.textarea;d(),M(s,t)}),e.appendChild(o)}return e}function ve(){const e=C(),n=a.span,t=n&&W.has(n.name)?n.name:null;for(const o of[...new Set(T.map(s=>s.category))]){const s=T.filter(i=>i.category===o);if(s.length){e.appendChild(v(o));for(const i of s){const r=t&&(i.hosts||[]).includes(t)&&!(i.name in n.attrs),c=f(document.createElement("button"));if(c.type="button",c.style.cssText=m+"justify-content:space-between;",c.appendChild(document.createTextNode(i.label)),r){const l=document.createElement("span");l.textContent=`inject \u2192 [${t}]`,l.style.cssText="opacity:.6;font-size:.7rem;",c.appendChild(l)}c.addEventListener("click",()=>{if(r)$(a.textarea,a.span,i.name,!0);else{const l=i.selfClosing?`[${i.name} /]`:`[${i.name}]
|
|
2
2
|
Content
|
|
3
|
-
[/${i.name}]`;O(a.textarea,
|
|
3
|
+
[/${i.name}]`;O(a.textarea,l)}d()}),e.appendChild(c)}}}return e}function g(e,n){const t=f(document.createElement("button"));t.type="button",t.style.cssText=m+"justify-content:space-between;",t.appendChild(document.createTextNode(e));const o=document.createElement("span");return o.setAttribute("data-icon","chevron-right"),o.setAttribute("data-icon-size","12"),o.style.cssText="opacity:.6;display:inline-flex;align-items:center;flex-shrink:0;",t.appendChild(o),t.addEventListener("mouseenter",()=>G(t,n)),t.addEventListener("click",s=>{s.stopPropagation(),G(t,n)}),t}function C(){const e=document.createElement("div");return e.className="dm-sc-submenu",e.style.cssText=Y,e}function G(e,n){w();const t=n();a.submenu=t,document.body.appendChild(t);const o=e.getBoundingClientRect();J(t,o.right+2,o.top,o.left-2),window.I&&I.scan(t)}function w(){a&&a.submenu&&(a.submenu.remove(),a.submenu=null)}function X(e){const n=f(document.createElement("button"));if(n.type="button",n.style.cssText=m,e.icon){const t=document.createElement("span");t.setAttribute("data-icon",e.icon),t.setAttribute("data-icon-size","14"),t.style.cssText="opacity:.75;display:inline-flex;align-items:center;flex-shrink:0;",n.appendChild(t)}return n.appendChild(document.createTextNode(e.label)),n}function we(){const e=C();for(const{category:n,items:t}of ie()){e.appendChild(v(n));for(const o of t){const s=X(o);s.addEventListener("click",()=>{const i=a.textarea;d(),ae(o.name,i)}),e.appendChild(s)}}return e}function Te(){const e=C();for(const n of A.filter(t=>t.wrappable||t.container)){const t=X(n);t.addEventListener("click",()=>{const o=a.textarea;d(),M(o,n)}),e.appendChild(t)}return e}function J(e,n,t,o){e.style.left="0px",e.style.top="0px";const s=e.getBoundingClientRect();let i=n;n+s.width>window.innerWidth-8&&(i=o!=null?o-s.width:n-s.width);let r=t;t+s.height>window.innerHeight-8&&(r=Math.max(8,window.innerHeight-s.height-8)),e.style.left=`${Math.max(8,i)}px`,e.style.top=`${Math.max(8,r)}px`}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{replaceRange as
|
|
1
|
+
import{replaceRange as te}from"./markdown-toolbar.js";import{boolState as ne,boolValue as oe,parseAttrs as J,serialiseTag as Q,setAttrs as le}from"./shortcode-tags.js";import{SHORTCODES as se}from"./shortcode-registry.js";import{clearLookupCache as re,lookupOptions as ie}from"./shortcode-lookups.js";import{PREVIEW_RENDERERS as ce}from"./shortcode-preview.js";import{makeCheckbox as ae,makeColourInput as de,makeField as y,makeIconInput as U,makeImageInput as X,makeLivePreview as pe,makeSelect as M,makeTextInput as D}from"./shortcode-modal.js";const ue=new Map(se.map(e=>[e.name,e])),Z=6;export function templateAttrs(e){const n=String(e.template||"").match(new RegExp(`^\\[${e.name}([\\s\\S]*?)\\s*/?\\]`));return n?J(n[1]):{}}export function templateBody(e){if(e.selfClosing)return"";const n=String(e.template||"").match(new RegExp(`^\\[${e.name}[^\\]]*\\]([\\s\\S]*)\\[/${e.name}\\]$`));return n?n[1].replace(/^\n/,"").replace(/\n$/,""):""}export function templateChildren(e){if(!e.children)return[];const n=e.children.name,i=new RegExp(`\\[${n}([^\\]]*)\\]([\\s\\S]*?)\\[/${n}\\]`,"g"),d=[];for(const s of templateBody(e).matchAll(i))d.push({attrs:J(s[1]),body:s[2].replace(/^\n/,"").replace(/\n$/,"")});return d}const me=new Set(["lookup","url"]);export function seedAttrs(e,n){const i=new Map((e.attrs||[]).map(s=>[s.name,s.type])),d={};for(const[s,c]of Object.entries(n))me.has(i.get(s))||(d[s]=c);return d}export function buildSnippet(e,n,i=""){const d=Q(e.name,n,e.selfClosing);if(e.selfClosing)return d;const s=`[/${e.name}]`;return e.inline?`${d}${i}${s}`:`${d}
|
|
2
2
|
${i}
|
|
3
3
|
${s}`}export function buildChildrenBody(e,n){return n.map(i=>buildSnippet(e,i.attrs,i.body)).join(`
|
|
4
|
-
`)}export function emitSnippet(e,n,i,d){const s=(e.formats||[]).find(
|
|
4
|
+
`)}export function emitSnippet(e,n,i,d){const s=(e.formats||[]).find(c=>c.value===d);if(s&&typeof s.emit=="function"){const c=s.emit(n,i);if(c!=null)return c}return buildSnippet(e,n,i)}const fe="display:block;font-size:.7rem;font-weight:600;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;";function he(e,n,i,d){const s=n===!0||n==null?"":String(n);if(e.type==="checkbox"){const l=ae(e.label),r=l.querySelector("input");return r.checked=ne(n,e.default),r.addEventListener("change",i),{el:l,bare:!0,get:()=>oe(e,r.checked)}}if(e.type==="select"){const l=e.options.some(([C])=>C==="")?e.options:[["","- none -"],...e.options],r=M(l);return r.value=s,r.addEventListener("change",i),{el:y(e.label,r),get:()=>r.value||null}}if(e.type==="icon"){const{el:l,input:r}=U("icon name (optional)",s);return r.addEventListener("input",i),{el:y(e.label,l),get:()=>r.value.trim()||null}}if(e.type==="image"){const{el:l,input:r}=X("/media/photo.jpg",s);return r.addEventListener("input",i),{el:y(e.label,l),get:()=>r.value.trim()||null}}if(e.type==="colour"){const{el:l,input:r}=de("#0f172a or a theme colour",s);return r.addEventListener("input",i),{el:y(e.label,l),get:()=>r.value.trim()||null}}if(e.type==="lookup"){const l=M([["","Loading\u2026"]]);l.disabled=!0,l.addEventListener("change",i);let r;const C=()=>{const h=d(),z=e.source==="collection-fields"?String(h.slug??""):e.source;z!==r&&(r=z,l.disabled=!0,ie(e.source,h).then(u=>{const v=l.value||s,b=u.some(([S])=>S===v),w=[["","- none -"],...u];v&&!b&&w.push([v,`${v} (missing)`]),l.replaceChildren();for(const[S,x]of w){const T=document.createElement("option");T.value=S,T.textContent=x,l.appendChild(T)}l.value=v,l.disabled=!1,i()}))};return C(),{el:y(e.label,l),get:()=>l.value||null,refresh:e.source==="collection-fields"?C:null}}const c=D(e.type==="url"?"/about or https://example.com":"",s);return e.type==="number"&&(c.type="number"),c.addEventListener("input",i),{el:y(e.label,c),get:()=>c.value.trim()||null}}export function openShortcodeForm(e,n,i={}){const{span:d=null,defaults:s=null}=i,c=!!d;re();const l=e.selectionStart,r=e.selectionEnd,C=e.value.slice(l,r),h=n.children?ue.get(n.children.name):null,z={...seedAttrs(n,templateAttrs(n)),...s||{}},u=document.createElement("div");u.style.cssText="padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;";const v=[],b=[];let w=()=>{};const S=()=>{const t={};for(const{attr:o,w:p}of v){const a=p.get();a!=null&&a!==""&&(t[o.name]=a)}return t},x=()=>w(),T=()=>S();let O=null;!c&&n.formats?.length&&(O=M(n.formats.map(t=>[t.value,t.label])),O.addEventListener("change",x),u.appendChild(y("Format",O)));const $=n.attrs||[],P=$.length>Z+2?Z:$.length,F=(t,o)=>{const p=c?d.attrs[t.name]:z[t.name],a=he(t,p,x,T);v.push({attr:t,w:a,initial:a.get()}),o.appendChild(a.el)};for(const t of $.slice(0,P))F(t,u);if(P<$.length){const t=document.createElement("details");t.style.cssText="border-top:1px solid var(--dm-border,#333);padding-top:.6rem;";const o=document.createElement("summary");o.textContent=`More options (${$.length-P})`,o.style.cssText="cursor:pointer;font-size:.75rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;",t.appendChild(o);const p=document.createElement("div");p.style.cssText="display:flex;flex-direction:column;gap:.75rem;padding-top:.75rem;",t.appendChild(p);for(const a of $.slice(P))F(a,p);u.appendChild(t)}let k=null,L=null;const N=document.createElement("div");if(!c&&h){const t=document.createElement("div");t.style.cssText=fe,t.textContent=`${h.label}s`,u.appendChild(t),N.style.cssText="display:flex;flex-direction:column;gap:.4rem;",u.appendChild(N),L=document.createElement("button"),L.type="button",L.textContent=`+ Add ${h.label.toLowerCase()}`,L.style.cssText="padding:.35rem .75rem;background:transparent;border:1px dashed var(--dm-border,#555);border-radius:4px;color:var(--dm-text-muted,#aaa);cursor:pointer;font-size:.85em;align-self:flex-start;",L.addEventListener("click",()=>{q({attrs:{},body:templateBody(h)||"Content"}),w()}),u.appendChild(L);const o=templateChildren(n),p=o.length?o:[{attrs:{},body:"Content"}];for(const a of p)q({attrs:seedAttrs(h,a.attrs),body:a.body});C&&(b[0].bodyInput.value=C)}else!c&&!n.selfClosing&&(k=document.createElement("textarea"),k.rows=n.inline?2:4,k.value=C||templateBody(n),k.style.cssText="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;font-family:inherit;box-sizing:border-box;resize:vertical;",k.addEventListener("input",x),u.appendChild(y("Content",k)));function q(t){if(b.length>=(n.children.max??20))return;const o=document.createElement("div");o.style.cssText="display:flex;gap:.35rem;align-items:center;";const p=[];for(const m of h.attrs||[])if(m.type==="icon"){const{el:f,input:B}=U(m.label.toLowerCase(),t.attrs[m.name]||"");f.style.flex=".7",B.addEventListener("input",x),p.push({attr:m,get:()=>B.value.trim()||null}),o.appendChild(f)}else if(m.type==="image"){const{el:f,input:B}=X(m.label,t.attrs[m.name]||"");f.style.flex="1",B.addEventListener("input",x),p.push({attr:m,get:()=>B.value.trim()||null}),o.appendChild(f)}else if(m.type==="select"){const f=M(m.options);f.value=t.attrs[m.name]||m.options[0][0],f.style.flex=".7",f.addEventListener("change",x),p.push({attr:m,get:()=>f.value||null}),o.appendChild(f)}else{const f=D(m.label,t.attrs[m.name]||"");f.style.flex="1",f.addEventListener("input",x),p.push({attr:m,get:()=>f.value.trim()||null}),o.appendChild(f)}const a=D("Content",t.body||"");a.style.flex="1.2",a.addEventListener("input",x),o.appendChild(a);const g=document.createElement("button");g.type="button",g.textContent="\xD7",g.style.cssText="padding:.3rem .5rem;background:transparent;border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text-muted,#aaa);cursor:pointer;font-size:.85em;flex-shrink:0;";const G={row:o,fields:p,bodyInput:a,remove:g};g.addEventListener("click",()=>{b.length<=(n.children.min??1)||(b.splice(b.indexOf(G),1),o.remove(),w())}),o.appendChild(g),b.push(G),N.appendChild(o),window.I?.scan?.(o)}const Y=ce[n.preview];let R=null;if(Y){const t=document.createElement("div");t.style.cssText="background:var(--dm-background-alt,#111);border:1px solid var(--dm-border,#333);border-radius:4px;padding:.75rem;min-height:2.5rem;display:flex;align-items:center;overflow-x:auto;",R=document.createElement("span"),t.appendChild(R),u.appendChild(y("Preview",t))}const H=pe();u.appendChild(y(c?"Tag preview":"Shortcode preview",H.el));const W=document.createElement("div");W.style.cssText="display:flex;justify-content:flex-end;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--dm-border,#333);";const A=document.createElement("button");A.type="button",A.className="btn btn-ghost",A.textContent="Cancel";const I=document.createElement("button");I.type="button",I.className="btn btn-primary",I.textContent=c?"Apply":`Insert ${n.label}`,W.appendChild(A),W.appendChild(I),u.appendChild(W);const V=()=>h&&b.length?buildChildrenBody(h,b.map(t=>({attrs:Object.fromEntries(t.fields.map(o=>[o.attr.name,o.get()]).filter(([,o])=>o!=null)),body:t.bodyInput.value}))):k?k.value:templateBody(n),K=()=>emitSnippet(n,S(),V(),O?.value),ee=t=>{if(n.inline||n.selfClosing||!t.startsWith("["))return t;const o=e.value.slice(0,l),p=e.value.slice(r),a=o===""||o.endsWith(`
|
|
5
5
|
`)?"":`
|
|
6
6
|
`,g=p===""||p.startsWith(`
|
|
7
7
|
`)?"":`
|
|
8
|
-
`;return`${a}${t}${g}`};w=()=>{L&&(L.disabled=b.length>=(n.children.max??20));for(const{w:t}of v)t.refresh?.();if(R){const t=
|
|
8
|
+
`;return`${a}${t}${g}`};w=()=>{L&&(L.disabled=b.length>=(n.children.max??20));for(const{w:t}of v)t.refresh?.();if(R){const t=Y(c?{...d.attrs,..._()}:S(),c?"":V());R.style.cssText=t.css,R.textContent=t.text}H.update(c?Q(n.name,{...d.attrs,..._()},d.selfClosing):K())};function _(){const t={};for(const{attr:o,w:p,initial:a}of v){const g=p.get();g!==a&&(t[o.name]=g)}return t}const j=E.slideover({title:c?`Edit ${n.label}`:`Insert ${n.label}`,size:h?"lg":"md",position:"right",content:u});return j.open(),window.I?.scan?.(u),w(),A.addEventListener("click",()=>j.close()),I.addEventListener("click",()=>{if(j.close(),c)le(e,d,_());else{const t=ee(K());te(e,l,r,t),e.setSelectionRange(l+t.length,l+t.length)}e.dispatchEvent(new Event("input",{bubbles:!0})),e.focus()}),requestAnimationFrame(()=>{u.querySelector("input:not([type=checkbox]):not([type=color]), select, textarea")?.focus()}),j}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{openIconPicker as
|
|
1
|
+
import{openIconPicker as s}from"./card-builder.js";import{pickMedia as c}from"./media-picker.js";const l="display:block;font-size:.7rem;font-weight:600;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;",d="width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;box-sizing:border-box;";export function makeField(a,r){const t=document.createElement("div"),e=document.createElement("label");return e.style.cssText=l,e.textContent=a,t.appendChild(e),t.appendChild(r),t}export function makeSelect(a){const r=document.createElement("select");return r.style.cssText=d,a.forEach(([t,e])=>{const n=document.createElement("option");n.value=t,n.textContent=e,r.appendChild(n)}),r}export function makeTextInput(a="",r=""){const t=document.createElement("input");return t.type="text",t.placeholder=a,t.value=r,t.style.cssText=d,t}export function makeCheckbox(a){const r=document.createElement("label");r.style.cssText="display:flex;align-items:center;gap:.5rem;cursor:pointer;";const t=document.createElement("input");t.type="checkbox";const e=document.createElement("span");return e.style.cssText="font-size:.85em;color:var(--dm-text,#eee);",e.textContent=a,r.appendChild(t),r.appendChild(e),r}export function makeIconInput(a="",r=""){const t=document.createElement("div");t.style.cssText="display:flex;gap:.35rem;";const e=makeTextInput(a,r);e.style.flex="1";const n=document.createElement("button");n.type="button",n.title="Browse icons";const o=document.createElement("span");return o.setAttribute("data-icon","grid"),o.setAttribute("data-icon-size","14"),o.style.cssText="display:inline-flex;align-items:center;vertical-align:middle;",n.appendChild(o),n.style.cssText="padding:.35rem .55rem;background:transparent;border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text-muted,#aaa);cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;",window.I?.scan?.(n),n.addEventListener("click",()=>s(i=>{e.value=i,e.dispatchEvent(new Event("input",{bubbles:!0}))})),t.appendChild(e),t.appendChild(n),{el:t,input:e}}export function makeImageInput(a="",r=""){const t=document.createElement("div");t.style.cssText="display:flex;gap:.35rem;";const e=makeTextInput(a,r);e.style.flex="1";const n=document.createElement("button");n.type="button",n.title="Choose from Media";const o=document.createElement("span");return o.setAttribute("data-icon","image"),o.setAttribute("data-icon-size","14"),o.style.cssText="display:inline-flex;align-items:center;vertical-align:middle;",n.appendChild(o),n.style.cssText="padding:.35rem .55rem;background:transparent;border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text-muted,#aaa);cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;",window.I?.scan?.(n),n.addEventListener("click",async()=>{const i=await c({current:e.value.trim()});i&&(e.value=i,e.dispatchEvent(new Event("input",{bubbles:!0})))}),t.appendChild(e),t.appendChild(n),{el:t,input:e}}export function makeLivePreview(){const a=document.createElement("pre");return a.style.cssText="background:var(--dm-background-alt,#111);border:1px solid var(--dm-border,#333);border-radius:4px;padding:.5rem .75rem;font-size:.75em;color:var(--dm-text-muted,#aaa);white-space:pre-wrap;word-break:break-all;margin:0;max-height:120px;overflow:auto;",a.textContent="",{el:a,update(r){a.textContent=r}}}export function makeColourInput(a="",r=""){const t=document.createElement("div");t.style.cssText="display:flex;gap:.35rem;";const e=makeTextInput(a,r);e.style.flex="1";const n=document.createElement("input");return n.type="color",n.title="Pick a colour",n.style.cssText="width:2.2rem;height:auto;padding:0;background:none;border:1px solid var(--dm-border,#333);border-radius:4px;cursor:pointer;flex-shrink:0;",/^#[0-9a-f]{3,8}$/i.test(r)&&(n.value=r),n.addEventListener("input",()=>{e.value=n.value,e.dispatchEvent(new Event("input",{bubbles:!0}))}),e.addEventListener("input",()=>{/^#[0-9a-f]{6}$/i.test(e.value)&&(n.value=e.value)}),t.appendChild(e),t.appendChild(n),{el:t,input:e}}
|
|
@@ -33,11 +33,11 @@ Banner content
|
|
|
33
33
|
[/accordion]`,children:{name:"item",min:2,max:12},attrs:[{name:"multiple",type:"checkbox",label:"Allow multiple open"},{name:"id",type:"text",label:"ID"}]},{name:"item",label:"Item",icon:"list",category:"Components",child:!0,selfClosing:!1,container:!0,wrappable:!1,template:'[item title="Item title"]Content[/item]',inline:!0,attrs:[{name:"title",type:"text",label:"Title"}]},{name:"carousel",label:"Carousel",icon:"carousel-insert",category:"Components",selfClosing:!1,container:!0,wrappable:!1,template:`[carousel autoplay="true" interval="5000"]
|
|
34
34
|
[slide title="Slide 1" image="/media/photo.jpg"]Caption.[/slide]
|
|
35
35
|
[slide title="Slide 2"]Text-only slide.[/slide]
|
|
36
|
-
[/carousel]`,children:{name:"slide",min:2,max:12},attrs:[{name:"autoplay",type:"checkbox",label:"Autoplay"},{name:"interval",type:"number",label:"Interval (ms)"},{name:"loop",type:"checkbox",label:"Loop"},{name:"animation",type:"select",label:"Animation",options:[["slide","Slide"],["fade","Fade"],["crossfade","Crossfade"]]},{name:"animation-duration",type:"number",label:"Animation duration (ms)"},{name:"animation-easing",type:"text",label:"Animation easing"},{name:"id",type:"text",label:"ID"}]},{name:"slide",label:"Slide",icon:"image",category:"Components",child:!0,selfClosing:!1,container:!0,wrappable:!1,template:'[slide title="Slide title" image="/media/photo.jpg"]Caption[/slide]',inline:!0,attrs:[{name:"title",type:"text",label:"Title"},{name:"image",type:"
|
|
36
|
+
[/carousel]`,children:{name:"slide",min:2,max:12},attrs:[{name:"autoplay",type:"checkbox",label:"Autoplay"},{name:"interval",type:"number",label:"Interval (ms)"},{name:"loop",type:"checkbox",label:"Loop"},{name:"animation",type:"select",label:"Animation",options:[["slide","Slide"],["fade","Fade"],["crossfade","Crossfade"]]},{name:"animation-duration",type:"number",label:"Animation duration (ms)"},{name:"animation-easing",type:"text",label:"Animation easing"},{name:"id",type:"text",label:"ID"}]},{name:"slide",label:"Slide",icon:"image",category:"Components",child:!0,selfClosing:!1,container:!0,wrappable:!1,template:'[slide title="Slide title" image="/media/photo.jpg"]Caption[/slide]',inline:!0,attrs:[{name:"title",type:"text",label:"Title"},{name:"image",type:"image",label:"Image"}]},{name:"countdown",label:"Countdown",icon:"stopwatch",category:"Components",selfClosing:!0,container:!1,wrappable:!1,template:'[countdown to="2026-12-31" format="DD:HH:mm:ss" /]',attrs:[{name:"to",type:"text",label:"Target date (ISO)"},{name:"duration",type:"number",label:"Duration (seconds)"},{name:"format",type:"select",label:"Format",options:[["mm:ss","mm:ss"],["HH:mm:ss","HH:mm:ss"],["DD:HH:mm:ss","DD:HH:mm:ss"]]},{name:"id",type:"text",label:"ID"}]},{name:"timeline",label:"Timeline",icon:"activity",category:"Components",selfClosing:!1,container:!0,wrappable:!1,template:`[timeline layout="vertical" theme="modern"]
|
|
37
37
|
[event title="Launch" date="2025-01-15" status="completed"]Launched.[/event]
|
|
38
38
|
[/timeline]`,children:{name:"event",min:1,max:20},custom:"timeline",attrs:[{name:"layout",type:"select",label:"Layout",options:[["vertical","Vertical"],["centred","Centred"],["horizontal","Horizontal"]]},{name:"theme",type:"select",label:"Theme",options:[["minimal","Minimal"],["corporate","Corporate"],["modern","Modern"]]},{name:"mode",type:"select",label:"Mode",options:[["timeline","Timeline"],["roadmap","Roadmap"]]},{name:"class",type:"text",label:"CSS class"},{name:"id",type:"text",label:"ID"}]},{name:"event",label:"Event",icon:"dot",category:"Components",child:!0,selfClosing:!1,container:!0,wrappable:!1,template:'[event title="Milestone" date="2025-01-15" status="completed"]Description[/event]',inline:!0,attrs:[{name:"title",type:"text",label:"Title"},{name:"date",type:"text",label:"Date"},{name:"status",type:"select",label:"Status",options:[["planned","Planned"],["in-progress","In progress"],["completed","Completed"],["blocked","Blocked"]]},{name:"icon",type:"icon",label:"Icon"}]},{name:"hero",label:"Hero",icon:"hero",category:"Content",selfClosing:!1,container:!0,wrappable:!0,template:`[hero title="Welcome" tagline="Build something great" size="lg" variant="gradient-blue"]
|
|
39
39
|
Optional body content.
|
|
40
|
-
[/hero]`,attrs:[{name:"title",type:"text",label:"Title"},{name:"tagline",type:"text",label:"Tagline"},{name:"size",type:"select",label:"Size",options:[["","Default"],["sm","Small"],["lg","Large"],["xl","Extra large"],["full","Full"]]},{name:"fullwidth",type:"checkbox",label:"Break out full-width"},{name:"variant",type:"select",label:"Variant",options:[["","None"],["dark","Dark"],["primary","Primary"],["gradient-purple","Gradient purple"],["gradient-blue","Gradient blue"],["gradient-green","Gradient green"],["gradient-sunset","Gradient sunset"],["gradient-ocean","Gradient ocean"],["gradient-rose","Gradient rose"],["gradient-forest","Gradient forest"],["gradient-night","Gradient night"]]},{name:"image",type:"
|
|
40
|
+
[/hero]`,attrs:[{name:"title",type:"text",label:"Title"},{name:"tagline",type:"text",label:"Tagline"},{name:"size",type:"select",label:"Size",options:[["","Default"],["sm","Small"],["lg","Large"],["xl","Extra large"],["full","Full"]]},{name:"fullwidth",type:"checkbox",label:"Break out full-width"},{name:"variant",type:"select",label:"Variant",options:[["","None"],["dark","Dark"],["primary","Primary"],["gradient-purple","Gradient purple"],["gradient-blue","Gradient blue"],["gradient-green","Gradient green"],["gradient-sunset","Gradient sunset"],["gradient-ocean","Gradient ocean"],["gradient-rose","Gradient rose"],["gradient-forest","Gradient forest"],["gradient-night","Gradient night"]]},{name:"image",type:"image",label:"Background image"},{name:"overlay",type:"select",label:"Overlay",options:[["","None"],["light","Light"],["dark","Dark"],["darker","Darker"],["gradient","Gradient"],["gradient-reverse","Gradient reverse"]]},{name:"align",type:"select",label:"Content alignment",options:[["center","Centre"],["left","Left"]]},{name:"bg-fit",type:"select",label:"Background fit",options:[["","Fill area (default)"],["contain","Show whole image"],["cover","Fill area (crop)"]]},{name:"bg-x",type:"select",label:"Background horizontal position",options:[["center","Centre"],["left","Left"],["right","Right"]]},{name:"bg-y",type:"select",label:"Background vertical position",options:[["center","Centre"],["top","Top"],["bottom","Bottom"]]},{name:"bg",type:"colour",label:"Background colour"},{name:"color",type:"colour",label:"Background colour (alias)"},{name:"min-height",type:"text",label:"Min height"},{name:"twinkle",type:"checkbox",label:"Twinkle particles"},{name:"twinkle-count",type:"number",label:"Twinkle count"},{name:"twinkle-colour",type:"colour",label:"Twinkle colour"},{name:"blobs",type:"checkbox",label:"Ambient blobs"},{name:"blobs-type",type:"text",label:"Blobs type"},{name:"class",type:"text",label:"CSS class"},{name:"id",type:"text",label:"ID"}]},{name:"table",label:"Table",icon:"grid",category:"Content",selfClosing:!1,container:!1,wrappable:!1,template:`[table striped="true"]
|
|
41
41
|
| Product | Price |
|
|
42
42
|
| ------- | ----: |
|
|
43
43
|
| Widget | $9.99 |
|