diff --git a/app/templates/page_editor.html b/app/templates/page_editor.html index 95b4f5c..bb3b619 100644 --- a/app/templates/page_editor.html +++ b/app/templates/page_editor.html @@ -230,34 +230,29 @@ function editor(pid,title,fmt,raw){ SlashMenu.init(); - // Poll until DOM ready, then setup - let n=0; - const setup=()=>{ + // Give Alpine time to render, then setup once + setTimeout(()=>{ const ct=document.getElementById('_blocksCt'); - if(!ct||!ct.querySelector('[data-bid]')){if(++n<60)requestAnimationFrame(setup);return;} - + if(!ct)return; // Fill content for(const b of this.blocks){ const el=ct.querySelector(`[data-bid="${b.id}"]:not(button):not(input)`); if(el&&b.type!=='divider')el.textContent=b.content||''; } - const b0=this.blocks[0]; - if(b0){const f=ct.querySelector(`[data-bid="${b0.id}"]:not(button):not(input)`);if(f){f.focus();curEnd(f);}} - - // === KEYDOWN (vanilla JS) === + // Focus first block + this.focusBlock(); + // KEYDOWN (vanilla JS) ct.addEventListener('keydown',e=>this.onKd(e,ct)); ct.addEventListener('paste',e=>{e.preventDefault();document.execCommand('insertText',false,(e.clipboardData||window.clipboardData).getData('text/plain'));this.dirty=true;this.autoSave();}); - // SortableJS if(typeof Sortable!=='undefined')Sortable.create(ct,{draggable:'.block-wrapper',handle:'.block-handle',animation:150,ghostClass:'sortable-ghost',dragClass:'sortable-drag',onEnd:evt=>{if(evt.oldIndex===evt.newIndex)return;const[item]=this.blocks.splice(evt.oldIndex,1);this.blocks.splice(evt.newIndex,0,item);this.dirty=true;this.autoSave();}}); - }; - requestAnimationFrame(setup); + },400); }, mkB(type,content,extras){const b={id:genId(),type,content:content||'',...(extras||{})};if(type==='toggle')b.expanded=true;if(type==='to_do')b.checked=false;return b;}, focusFirstBlock(){const b=this.blocks[0];if(b){const el=this.getEl(b.id);if(el){el.focus();curEnd(el);}}}, - focusBlock(){this.focusFirstBlock();}, + focusBlock(n){n=n||0;const b=this.blocks[0];if(!b)return;const el=this.getEl(b.id);if(el){el.focus();curEnd(el);}else if(n<10){setTimeout(()=>this.focusBlock(n+1),50);}}, onCtClick(e){ if(e.target===document.getElementById('_blocksCt')||e.target.classList.contains('blocks-empty')){ if(!this.blocks.length)this.addAt(0); diff --git a/static/css/app.css b/static/css/app.css index 1cf9c65..1919329 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -1510,7 +1510,9 @@ input, select, textarea { font-family: inherit; color: inherit; } flex: 1; overflow-y: auto; padding: 0; - min-height: 100%; + min-height: 0; + display: flex; + flex-direction: column; } /* Page title area */ @@ -1558,6 +1560,7 @@ input, select, textarea { font-family: inherit; color: inherit; } max-width: 900px; margin: 0 auto; min-height: 300px; + flex: 1; } .blocks-empty {