mokelay-editor 0.0.1

package/assets/EditorPanel-B97wXLqG.js

@@ -0,0 +1 @@
+import{d as m,r as l,o as g,c as p,a as k,w,b as a,t as c,u as x,e as y,f as C,_ as E}from"./index-C0VPLP4t.js";import{M as _,_ as N}from"./storage-tTDw43ui.js";import"./editorjs-hCuh8vdW.js";function S(r){const s=localStorage.getItem(_);if(!s)return[{type:"paragraph",data:{text:r("editor.defaultParagraph")}}];try{const t=JSON.parse(s);return Array.isArray(t.blocks)?t.blocks:[]}catch{return[{type:"paragraph",data:{text:r("editor.defaultParagraph")}}]}}const I={"data-testid":"editor-panel",class:"flex min-h-[520px] flex-1 flex-col rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900"},O={"data-testid":"config-dialog",class:"w-full max-w-3xl rounded-xl bg-white p-4 shadow-2xl dark:bg-slate-900"},P={class:"mb-3 flex items-center justify-between"},B={"data-testid":"config-dialog-title",class:"text-base font-semibold text-slate-800 dark:text-slate-100"},A={"data-testid":"config-json",class:"max-h-[60vh] overflow-auto rounded bg-slate-100 p-3 text-xs text-slate-700 dark:bg-slate-950 dark:text-slate-300"},J=m({__name:"EditorPanel",setup(r,{expose:s}){const t=l(null),f=l(""),n=l(!1),{t:i}=C(),o=l(S(i));async function h(){var d;const e=await((d=t.value)==null?void 0:d.saveEditor())??{blocks:o.value};o.value=e.blocks,localStorage.setItem(_,JSON.stringify(e)),f.value=JSON.stringify(e,null,2),n.value=!0}function v(e){o.value=e}function b(){window.location.hash="/preview"}function u(){n.value=!1}return s({save:h,openPreview:b}),(e,d)=>(g(),p("section",I,[k(N,{ref_key:"pageRef",ref:t,edit:!0,value:o.value,onChange:v},null,8,["value"]),n.value?(g(),p("div",{key:0,"data-testid":"config-dialog-overlay",class:"fixed inset-0 z-50 flex items-center justify-center bg-slate-950/50 px-4",onClick:w(u,["self"])},[a("div",O,[a("div",P,[a("h3",B,c(x(i)("editor.configJson")),1),a("button",{"data-testid":"config-dialog-close",class:"rounded bg-slate-200 px-3 py-1 text-sm font-medium text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600",onClick:u},c(x(i)("editor.close")),1)]),a("pre",A,c(f.value),1)])])):y("",!0)]))}}),R=E(J,[["__scopeId","data-v-4e7b6cf4"]]);export{R as default};

package/assets/EditorPanel-bZ_ztq4l.css

@@ -0,0 +1 @@
+[data-v-4e7b6cf4] .mokelay-editor-tool{position:relative}[data-v-4e7b6cf4] .mokelay-editor-tool__property-dialog{width:min(100%,480px);border:0;border-radius:16px;padding:0;box-shadow:0 24px 80px #0f172a52}[data-v-4e7b6cf4] .mokelay-editor-tool__property-dialog::backdrop{background:#0f172a73}[data-v-4e7b6cf4] .mokelay-editor-tool__property-panel{margin:0;padding:20px;background:#fff}[data-v-4e7b6cf4] .mokelay-editor-tool__property-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}[data-v-4e7b6cf4] .mokelay-editor-tool__property-title{margin:0;color:#0f172a;font-size:18px;font-weight:600}[data-v-4e7b6cf4] .mokelay-editor-tool__property-close{border:0;border-radius:10px;padding:8px 12px;background:#e2e8f0;color:#334155;cursor:pointer}[data-v-4e7b6cf4] .mokelay-editor-tool__property-body{display:flex;flex-direction:column;gap:14px}[data-v-4e7b6cf4] .mokelay-editor-tool__property-field{display:flex;flex-direction:column;gap:6px}[data-v-4e7b6cf4] .mokelay-editor-tool__property-field--checkbox{flex-direction:row;align-items:center;gap:10px}[data-v-4e7b6cf4] .mokelay-editor-tool__property-label{color:#334155;font-size:13px;font-weight:600}[data-v-4e7b6cf4] .mokelay-editor-tool__property-checkbox{width:16px;height:16px;margin:0}[data-v-4e7b6cf4] .mokelay-editor-tool__property-input{width:100%;border:1px solid rgb(148 163 184 / .65);border-radius:10px;padding:10px 12px;background:#fff;color:#0f172a;font-size:14px;line-height:20px}[data-v-4e7b6cf4] .mokelay-editor-tool__property-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px #6366f126}.dark{background:#0f172a}.dark{color:#f1f5f9}.dark{background:#334155;color:#f1f5f9}.dark{color:#cbd5e1}.dark{background:#0f172a;color:#e2e8f0;border-color:#475569e6}

package/assets/MForm-Ct41vjbV.js

@@ -0,0 +1,50 @@
+var me=Object.defineProperty;var ye=(p,u,g)=>u in p?me(p,u,{enumerable:!0,configurable:!0,writable:!0,value:g}):p[u]=g;var h=(p,u,g)=>ye(p,typeof u!="symbol"?u+"":u,g);import{d as he,i as fe,k as D,n as J,j as ge,o as T,c as I,b as ve,F as be,p as ke,g as _e,u as we,x as Te,f as Ee,r as Ce,h as Ie,a7 as Fe,M as Pe,E as S,B as Le,ah as Ae,_ as Me}from"./index-C0VPLP4t.js";import{A as xe}from"./editorjs-hCuh8vdW.js";import{n as B,c as $e,a as Z,b as G,d as De,g as Se,e as V,f as Be,h as N,s as Ve,m as Q}from"./storage-tTDw43ui.js";import{i as Ze}from"./storage-tTDw43ui.js";const Ne={key:0,class:"ce-form-tool__editor-shell","data-testid":"form-editor-shell"},Re={key:1,class:"ce-form-tool__preview","data-testid":"preview-form-items"},Oe=he({__name:"MForm",props:{edit:{type:Boolean,default:!1},items:{default:()=>[]},onChange:{},onToolChange:{}},emits:["change"],setup(p,{expose:u,emit:g}){const W=new Set(["MPage","MForm","MFormItem","MEditorSelector"]),R=new Map,s=p,X=g,{t:Y,localeValue:O}=Ee(),k=Ce(null),E=Ie(()=>B(s.items));let i=null,F=!1,P=!1,v=null,_=null,c=b(E.value);function ee(){return typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID().slice(0,10):Math.random().toString(36).slice(2,12)}function d(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function L(){return Object.keys(Se()).filter(t=>!W.has(t)&&!!V(t))}function A(t){return L().includes(t)}function te(){const t="MInput";return A(t)?t:L()[0]}function oe(t){var m;const r=V(t);if(!r)throw new Error(`MForm could not find a registered component for "${t}".`);const o=r.normalizeProps({...((m=r.createInitialProps)==null?void 0:m.call(r))??{},edit:!0});return{id:ee(),type:t,data:r.serialize(o)}}function re(t){const r=R.get(t);if(r)return r;const o=V(t);if(!o)throw new Error(`MForm could not create a form item tool for "${t}".`);class m{constructor({data:e,config:a}){h(this,"state");h(this,"wrapper",null);h(this,"contentRoot",null);h(this,"vueApp",null);h(this,"propertyDialog",null);h(this,"toolbarAlignTimer",null);h(this,"handleToolbarPointer",()=>{this.scheduleToolbarAlignment()});const n=typeof(a==null?void 0:a.edit)=="boolean"?a.edit:!0,l=Be(e==null?void 0:e.editor);this.state=Pe(N({...e??{},edit:n,editor:l??oe(t)}))}static get toolbox(){return o.toolbox}render(){const e=document.createElement("div");e.className="mokelay-form-item-tool",e.dataset.toolName=t,e.dataset.testid=`form-item-tool-${t}`;const a=document.createElement("div");return a.className="mokelay-form-item-tool__content",e.appendChild(a),this.wrapper=e,this.contentRoot=a,e.addEventListener("mouseenter",this.handleToolbarPointer),e.addEventListener("mousemove",this.handleToolbarPointer),this.createPropertyDialog(),this.mountVueApp(),e}destroy(){var e,a,n;this.clearToolbarAlignTimer(),(e=this.wrapper)==null||e.removeEventListener("mouseenter",this.handleToolbarPointer),(a=this.wrapper)==null||a.removeEventListener("mousemove",this.handleToolbarPointer),this.unmountVueApp(),(n=this.propertyDialog)==null||n.remove(),this.propertyDialog=null,this.contentRoot=null,this.wrapper=null}save(){return Ve(this.state)}renderSettings(){return this.getPropertyFields().length?{icon:'<svg width="17" height="17" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.14 12.94C19.18 12.63 19.2 12.32 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.11 9.51C21.29 9.37 21.34 9.11 21.23 8.9L19.35 5.64C19.24 5.43 18.99 5.35 18.77 5.42L16.44 6.17C15.96 5.8 15.44 5.48 14.87 5.23L14.51 2.75C14.48 2.52 14.28 2.35 14.04 2.35H10.28C10.04 2.35 9.84 2.52 9.81 2.75L9.45 5.23C8.88 5.48 8.36 5.81 7.88 6.17L5.55 5.42C5.33 5.35 5.08 5.43 4.97 5.64L3.09 8.9C2.98 9.11 3.03 9.37 3.21 9.51L5.19 11.06C5.14 11.36 5.12 11.68 5.12 12C5.12 12.32 5.14 12.64 5.19 12.94L3.21 14.49C3.03 14.63 2.98 14.89 3.09 15.1L4.97 18.36C5.08 18.57 5.33 18.65 5.55 18.58L7.88 17.83C8.36 18.2 8.88 18.52 9.45 18.77L9.81 21.25C9.84 21.48 10.04 21.65 10.28 21.65H14.04C14.28 21.65 14.48 21.48 14.51 21.25L14.87 18.77C15.44 18.52 15.96 18.19 16.44 17.83L18.77 18.58C18.99 18.65 19.24 18.57 19.35 18.36L21.23 15.1C21.34 14.89 21.29 14.63 21.11 14.49L19.14 12.94ZM12.16 15.6C10.17 15.6 8.56 13.99 8.56 12C8.56 10.01 10.17 8.4 12.16 8.4C14.15 8.4 15.76 10.01 15.76 12C15.76 13.99 14.15 15.6 12.16 15.6Z" fill="currentColor"/></svg>',title:S.t("editor.properties"),onActivate:()=>{this.openPropertyDialog()},closeOnActivate:!0}:[]}mountVueApp(){if(!this.contentRoot)return;const e=a=>{Object.assign(this.state,N(a,this.state.variableName))};this.unmountVueApp(),this.vueApp=Le({render:()=>Ae(Z,{...this.state,edit:!0,onToolChange:e,onChange:e})}),this.vueApp.mount(this.contentRoot)}unmountVueApp(){var e;(e=this.vueApp)==null||e.unmount(),this.vueApp=null}clearToolbarAlignTimer(){this.toolbarAlignTimer!==null&&(window.clearTimeout(this.toolbarAlignTimer),this.toolbarAlignTimer=null)}scheduleToolbarAlignment(){this.clearToolbarAlignTimer(),this.toolbarAlignTimer=window.setTimeout(()=>{this.alignToolbarToFormItem()},0)}alignToolbarToFormItem(){this.toolbarAlignTimer=null;const e=this.wrapper;if(!e)return;const a=e.closest(".ce-block"),n=e.closest(".codex-editor"),l=n==null?void 0:n.querySelector(":scope > .ce-toolbar"),y=l==null?void 0:l.querySelector(".ce-toolbar__plus");if(!a||!l||!y)return;const pe=a.getBoundingClientRect(),K=e.getBoundingClientRect(),ue=y.getBoundingClientRect().height||26,de=a.offsetTop+(K.top-pe.top)+(K.height-ue)/2;l.style.top=`${Math.max(0,Math.round(de))}px`}getPropertyFields(){var e;return((e=Q.propertyPanel)==null?void 0:e.fields)??[]}createPropertyDialog(){var l;if(!this.wrapper||!this.getPropertyFields().length)return;const e=document.createElement("dialog");e.className="mokelay-editor-tool__property-dialog",e.dataset.testid="tool-property-dialog",e.dataset.toolName="MFormItem";const a=((l=Q.propertyPanel)==null?void 0:l.title)||S.t("editor.propertyDialogTitle"),n=this.getPropertyFields().map(y=>this.renderPropertyField(y)).join("");e.innerHTML=`
+        <form method="dialog" class="mokelay-editor-tool__property-panel" data-testid="tool-property-panel">
+          <div class="mokelay-editor-tool__property-header">
+            <h3 class="mokelay-editor-tool__property-title" data-testid="tool-property-title">${d(a)}</h3>
+            <button type="submit" class="mokelay-editor-tool__property-close" data-testid="tool-property-close">${d(S.t("editor.close"))}</button>
+          </div>
+          <div class="mokelay-editor-tool__property-body" data-testid="tool-property-body">
+            ${n}
+          </div>
+        </form>
+      `,this.wrapper.appendChild(e),this.propertyDialog=e,this.bindPropertyInputs()}openPropertyDialog(){this.propertyDialog&&(this.syncPropertyDialogValues(),this.propertyDialog.open||this.propertyDialog.showModal())}syncPropertyDialogValues(){this.propertyDialog&&this.propertyDialog.querySelectorAll("[data-property-key]").forEach(e=>{const a=e.dataset.propertyKey;if(!a)return;const n=this.getPropertyFieldValue(a);if(e instanceof HTMLInputElement&&e.type==="checkbox"){e.checked=n===!0;return}e.value=typeof n=="string"?n:""})}updateProperty(e,a){Object.assign(this.state,N({...this.state,[e]:a,edit:!0},this.state.variableName))}getPropertyFieldValue(e){return this.state[e]}renderPropertyField(e){if(e.type==="checkbox")return`
+          <label class="mokelay-editor-tool__property-field mokelay-editor-tool__property-field--checkbox">
+            <input
+              class="mokelay-editor-tool__property-checkbox"
+              data-testid="tool-property-input-${e.key}"
+              data-property-key="${e.key}"
+              data-property-type="checkbox"
+              type="checkbox"
+              ${this.getPropertyFieldValue(e.key)===!0?"checked":""}
+            />
+            <span class="mokelay-editor-tool__property-label">${d(e.label)}</span>
+          </label>
+        `;if(e.type==="select"){const n=this.getPropertyFieldValue(e.key),l=(e.options??[]).map(y=>`
+          <option value="${d(y.value)}" ${n===y.value?"selected":""}>${d(y.label)}</option>
+        `).join("");return`
+          <label class="mokelay-editor-tool__property-field">
+            <span class="mokelay-editor-tool__property-label">${d(e.label)}</span>
+            <select
+              class="mokelay-editor-tool__property-input"
+              data-testid="tool-property-input-${e.key}"
+              data-property-key="${e.key}"
+              data-property-type="select"
+            >
+              ${l}
+            </select>
+          </label>
+        `}const a=this.getPropertyFieldValue(e.key);return`
+        <label class="mokelay-editor-tool__property-field">
+          <span class="mokelay-editor-tool__property-label">${d(e.label)}</span>
+          <input
+            class="mokelay-editor-tool__property-input"
+            data-testid="tool-property-input-${e.key}"
+            data-property-key="${e.key}"
+            data-property-type="text"
+            type="text"
+            value="${d(typeof a=="string"?a:"")}"
+            placeholder="${d(e.placeholder??"")}"
+          />
+        </label>
+      `}bindPropertyInputs(){this.propertyDialog&&this.propertyDialog.querySelectorAll("[data-property-key]").forEach(e=>{const a=e instanceof HTMLInputElement?e.type==="checkbox"?"change":"input":"change";e.addEventListener(a,()=>{const n=e.dataset.propertyKey;n&&this.updateProperty(n,this.readPropertyInputValue(e))})})}readPropertyInputValue(e){return e instanceof HTMLInputElement&&e.type==="checkbox"?e.checked:e.value}}const w=m;return R.set(t,w),w}function ae(){return Object.fromEntries(L().map(t=>[t,{class:re(t),config:{edit:!0}}]))}function ne(t){var o;const r=(o=t.editor)==null?void 0:o.type;return r&&A(r)?r:te()}function ie(t,r){const o=ne(t);if(o)return{id:`form-item-${t.variableName||r}`,type:o,data:G(t)}}function b(t){return{blocks:t.map((r,o)=>ie(r,o)).filter(r=>r!==void 0)}}function C(t){return(Array.isArray(t.blocks)?t.blocks:[]).filter(o=>A(o.type)).map(o=>De(o.data)).filter(o=>o!==void 0)}function z(t,r){return JSON.stringify(t)===JSON.stringify(r)}function le(t){var m,w;const r=B(t),o={edit:s.edit,items:r.map(U=>G(U))};P=!0,(m=s.onToolChange)==null||m.call(s,o),(w=s.onChange)==null||w.call(s,o),X("change",o.items)}async function M(t){const r=C(c),o=C(t);c=b(o),!F&&!z(r,o)&&le(o)}function H(){_!==null&&(window.clearTimeout(_),_=null)}function f(){i&&(H(),_=window.setTimeout(async()=>{if(_=null,!!i)try{const t=await i.save();await M(t)}catch{}},0))}function se(){const t=k.value;t&&(j(),v=new MutationObserver(()=>{f()}),v.observe(t,{attributes:!0,characterData:!0,childList:!0,subtree:!0}),t.addEventListener("input",f),t.addEventListener("change",f),t.addEventListener("click",f))}function j(){const t=k.value;v==null||v.disconnect(),v=null,H(),t==null||t.removeEventListener("input",f),t==null||t.removeEventListener("change",f),t==null||t.removeEventListener("click",f)}async function x(){!s.edit||!k.value||i||(c=b(E.value),i=new xe({holder:k.value,placeholder:Y("form.placeholder"),tools:ae(),data:c,minHeight:0,i18n:{messages:Fe(O.value)},onChange:async()=>{if(!i)return;const t=await i.save();await M(t)}}),se())}async function $(){const t=i;if(t){i=null,j();try{const r=await t.save();c=b(C(r))}catch{c=b(E.value)}t.destroy()}}async function q(){await $(),await J(),await x()}async function ce(){if(!i)return c;const t=await i.save();return await M(t),c}return u({saveEditor:ce}),fe(async()=>{await x()}),D(()=>s.items,async t=>{if(P){P=!1;return}const r=B(t),o=C(c);z(r,o)||(F=!0,c=b(r),i&&await q(),F=!1)},{deep:!0}),D(O,async()=>{i&&await q()}),D(()=>s.edit,async t=>{if(t){await J(),await x();return}await $()}),ge(async()=>{await $()}),(t,r)=>(T(),I("div",{class:Te(["ce-form-tool",{"ce-form-tool--edit":p.edit}]),"data-testid":"editor-form-tool"},[p.edit?(T(),I("div",Ne,[ve("div",{ref_key:"holderRef",ref:k,class:"ce-form-tool__editor","data-testid":"form-editor-surface"},null,512)])):(T(),I("div",Re,[(T(!0),I(be,null,ke(E.value,(o,m)=>(T(),_e(Z,{key:`${o.variableName}-${m}`,edit:!1,"label-name":o.labelName,"variable-name":o.variableName,editor:o.editor?we($e)(o.editor):void 0,layout:o.layout},null,8,["label-name","variable-name","editor","layout"]))),128))]))],2))}}),Ue=Me(Oe,[["__scopeId","data-v-a3894c78"]]);export{Ue as default,Ze as mFormEditorTool};

package/assets/MForm-DHyGtILs.css

@@ -0,0 +1 @@
+.ce-form-tool[data-v-a3894c78]{width:100%;color:#0f172a}.ce-form-tool__editor-shell[data-v-a3894c78]{width:100%;min-height:54px;border:1px dashed rgb(148 163 184 / .72);border-radius:8px;background:#f8fafc;padding:8px 10px 8px 38px}.ce-form-tool__editor[data-v-a3894c78],.ce-form-tool__preview[data-v-a3894c78]{width:100%}.ce-form-tool__preview[data-v-a3894c78]{display:flex;flex-direction:column;gap:12px}.ce-form-tool[data-v-a3894c78] .codex-editor{min-height:0}.ce-form-tool[data-v-a3894c78] .codex-editor__redactor{min-height:0;padding-bottom:0!important}.ce-form-tool[data-v-a3894c78] .ce-block{padding:0}.ce-form-tool[data-v-a3894c78] .ce-block+.ce-block{margin-top:10px}.ce-form-tool[data-v-a3894c78] .ce-block__content,.ce-form-tool[data-v-a3894c78] .ce-toolbar__content{max-width:none;margin:0}.ce-form-tool[data-v-a3894c78] .ce-toolbar__actions{right:calc(100% + 8px);padding-right:0}.ce-form-tool[data-v-a3894c78] .ce-popover-item[data-item-name=paragraph]{display:none}.ce-form-tool[data-v-a3894c78] .ce-paragraph{min-height:36px;padding:8px 0;color:#64748b;font-size:14px;line-height:20px}.dark{color:#e2e8f0}.dark{border-color:#475569e6;background:#0f172a}.dark{color:#94a3b8}

package/assets/MPage-PbJKUfhk.js

@@ -0,0 +1 @@
+import{_ as o}from"./storage-tTDw43ui.js";import"./editorjs-hCuh8vdW.js";import"./index-C0VPLP4t.js";export{o as default};

package/assets/PreviewPanel-65RZ8CEI.js

@@ -0,0 +1 @@
+import{d as n,o as a,c as r,b as c,t as d,u as i,g as m,f as p,h as s}from"./index-C0VPLP4t.js";import{_ as u,M as _}from"./storage-tTDw43ui.js";import"./editorjs-hCuh8vdW.js";const b={"data-testid":"preview-panel",class:"flex min-h-[520px] flex-1 flex-col rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900"},f={class:"flex-1 overflow-auto"},k={key:0,"data-testid":"preview-empty-state",class:"rounded border border-amber-300 bg-amber-50 p-3 text-amber-800 dark:border-amber-500/60 dark:bg-amber-900/30 dark:text-amber-100"},y=n({__name:"PreviewPanel",setup(v){const{t:o}=p(),t=s(()=>{const e=localStorage.getItem(_);if(!e)return null;try{return JSON.parse(e)}catch{return null}}),l=s(()=>{var e;return((e=t.value)==null?void 0:e.blocks)??[]});return(e,x)=>(a(),r("section",b,[c("div",f,[t.value?(a(),m(u,{key:1,edit:!1,value:l.value},null,8,["value"])):(a(),r("p",k,d(i(o)("preview.emptyState")),1))])]))}});export{y as default};