fix: block editor visibility — flex layout + 400ms init delay
FlowDeck CI / test (push) Failing after 3s
FlowDeck CI / docker (push) Has been skipped

- page-editor-wrapper: min-height:0 + display:flex column to prevent collapse
- blocks-container: flex:1 to fill remaining space
- init setTimeout: 200→400ms for reliable Alpine render
- Removed min-height:100% that caused overflow clipping
This commit is contained in:
2026-07-09 11:40:44 -04:00
parent c8c08f5589
commit 205f09838f
2 changed files with 12 additions and 14 deletions
+8 -13
View File
@@ -230,34 +230,29 @@ function editor(pid,title,fmt,raw){
SlashMenu.init(); SlashMenu.init();
// Poll until DOM ready, then setup // Give Alpine time to render, then setup once
let n=0; setTimeout(()=>{
const setup=()=>{
const ct=document.getElementById('_blocksCt'); const ct=document.getElementById('_blocksCt');
if(!ct||!ct.querySelector('[data-bid]')){if(++n<60)requestAnimationFrame(setup);return;} if(!ct)return;
// Fill content // Fill content
for(const b of this.blocks){ for(const b of this.blocks){
const el=ct.querySelector(`[data-bid="${b.id}"]:not(button):not(input)`); const el=ct.querySelector(`[data-bid="${b.id}"]:not(button):not(input)`);
if(el&&b.type!=='divider')el.textContent=b.content||''; if(el&&b.type!=='divider')el.textContent=b.content||'';
} }
const b0=this.blocks[0]; // Focus first block
if(b0){const f=ct.querySelector(`[data-bid="${b0.id}"]:not(button):not(input)`);if(f){f.focus();curEnd(f);}} this.focusBlock();
// KEYDOWN (vanilla JS)
// === KEYDOWN (vanilla JS) ===
ct.addEventListener('keydown',e=>this.onKd(e,ct)); 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();}); ct.addEventListener('paste',e=>{e.preventDefault();document.execCommand('insertText',false,(e.clipboardData||window.clipboardData).getData('text/plain'));this.dirty=true;this.autoSave();});
// SortableJS // 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();}}); 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();}});
}; },400);
requestAnimationFrame(setup);
}, },
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;}, 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);}}}, 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){ onCtClick(e){
if(e.target===document.getElementById('_blocksCt')||e.target.classList.contains('blocks-empty')){ if(e.target===document.getElementById('_blocksCt')||e.target.classList.contains('blocks-empty')){
if(!this.blocks.length)this.addAt(0); if(!this.blocks.length)this.addAt(0);
+4 -1
View File
@@ -1510,7 +1510,9 @@ input, select, textarea { font-family: inherit; color: inherit; }
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 0; padding: 0;
min-height: 100%; min-height: 0;
display: flex;
flex-direction: column;
} }
/* Page title area */ /* Page title area */
@@ -1558,6 +1560,7 @@ input, select, textarea { font-family: inherit; color: inherit; }
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
min-height: 300px; min-height: 300px;
flex: 1;
} }
.blocks-empty { .blocks-empty {