peek panels: reusable editor module — shared _page_editor_content.html + embed template
Architecture for zero code duplication:
- Extract page editor HTML into _page_editor_content.html (shared include)
- page_editor.html includes it (same behavior as before)
- page_editor_embed.html includes it with empty topbar (no header in peek)
- board.py: ?embed=1 renders page_editor_embed.html
Peek panels now load /pages/{id}?embed=1 in iframe:
- Editor renders without sidebar or header breadcrumb/actions
- Full editing capability (blocks, markdown, slash commands, save)
- Same code — one change to _page_editor_content.html updates everywhere
This commit is contained in:
@@ -831,20 +831,16 @@ window._wsInitData = (function() {
|
||||
return null;
|
||||
},
|
||||
|
||||
// ── Preview panel (vanilla JS — matches Library peek-overlay) ──
|
||||
// ── Preview panel (loads editor in iframe via /pages/{id}?embed=1) ──
|
||||
selectForPreview(node) {
|
||||
var panel = document.getElementById('ws-preview-panel');
|
||||
if (!panel) return;
|
||||
// Icon + title
|
||||
document.getElementById('ws-preview-icon').innerHTML = this._fileIcon(node.name, node.is_folder, node.content_format);
|
||||
document.getElementById('ws-preview-title').textContent = node.name;
|
||||
// Open button → navigate to /pages/{id}
|
||||
var openBtn = document.getElementById('ws-preview-open-btn');
|
||||
openBtn.onclick = function() { window.location = '/pages/' + node.id; };
|
||||
// Favorite button
|
||||
var favBtn = document.getElementById('ws-preview-fav-btn');
|
||||
favBtn.onclick = function() { window.showToast('Favorite toggled', 'success'); };
|
||||
// Copy link button
|
||||
var copyBtn = document.getElementById('ws-preview-copy-btn');
|
||||
copyBtn.onclick = function() {
|
||||
var url = window.location.origin + '/pages/' + node.id;
|
||||
@@ -854,30 +850,16 @@ window._wsInitData = (function() {
|
||||
window.showToast('Failed to copy', 'error');
|
||||
});
|
||||
};
|
||||
// Body: meta info header + loading indicator
|
||||
var meta = '<div style="display:flex;gap:16px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-tertiary);">'
|
||||
+ '<span>' + (node.is_folder ? 'Folder' : this._fileTypeLabel(node.name, node.content_format)) + '</span>'
|
||||
+ '<span>' + (node.size_display || '-') + '</span>'
|
||||
+ '<span>' + this._formatDate(node.updated_at) + '</span>'
|
||||
+ '</div>';
|
||||
if (node.tags && node.tags.length > 0) {
|
||||
meta += '<div style="display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;">';
|
||||
for (var i = 0; i < node.tags.length; i++) {
|
||||
var t = node.tags[i];
|
||||
meta += '<span class="tag-chip" style="background:' + this._escHtml(t.color) + '">' + this._escHtml(t.name) + '</span>';
|
||||
}
|
||||
meta += '</div>';
|
||||
}
|
||||
document.getElementById('ws-preview-body').innerHTML = meta + '<div style="text-align:center;padding:40px;color:var(--text-tertiary)">Loading...</div>';
|
||||
// Show panel with slide-in
|
||||
// Load editor in iframe
|
||||
var iframe = document.getElementById('ws-preview-iframe');
|
||||
if (iframe) iframe.src = '/pages/' + node.id + '?embed=1';
|
||||
// Show panel
|
||||
panel.style.display = 'flex';
|
||||
requestAnimationFrame(function() {
|
||||
requestAnimationFrame(function() {
|
||||
panel.style.transform = 'translateX(0)';
|
||||
});
|
||||
});
|
||||
// Load content async
|
||||
this._loadPreviewContentVanilla(node);
|
||||
},
|
||||
|
||||
closePreviewPanel() {
|
||||
@@ -2949,9 +2931,7 @@ console.log('FLOWDECK v2.4.6 — IIFE done, _wsInitData keys:', Object.keys(wind
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ws-preview-body" style="flex:1;overflow-y:auto;padding:16px 20px;">
|
||||
<div style="text-align:center;padding:60px 20px;color:var(--text-dim);">{{ fd_icon("file",32) }}<div style="margin-top:8px;font-size:14px;">Select a file to preview</div></div>
|
||||
</div>
|
||||
<iframe id="ws-preview-iframe" src="" style="width:100%;height:100%;border:none;flex:1;"></iframe>
|
||||
</div>
|
||||
</div><!-- /ws-split -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user