fix: block editor visibility — flex layout + 400ms init delay
- 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:
@@ -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);
|
||||
|
||||
+4
-1
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user