fix: page editor — share dropdown, pill toolbar, link copy
Share panel: dropdown under Share button (not modal), with Private status,
Copy link, Publish toggle, Invite section — matches Notion design.
Get Started toolbar: at bottom with pill-shaped buttons (border-radius:9999px),
shows Ask AI, AI meeting note, Database, Form, Templates, … (Table/Board/List/
Timeline/Calendar/Gallery/Import).
Link copy button (🔗): uses navigator.clipboard, shows '✓ Copied' feedback.
Removed old modal overlay CSS, replaced with .share-dropdown + .gs-pill styles.
This commit is contained in:
+99
-121
@@ -5,24 +5,62 @@
|
||||
{% block content %}
|
||||
<div class="page-editor-wrapper" x-data="editor('{{ page.id }}', '{{ page.title|e }}', '{{ page.content_format }}', '{{ page.content|e }}', {{ page_favorited | tojson }})" x-init="init()">
|
||||
|
||||
<!-- ═══════════ Top Action Bar (Share / Favorite / Link / More) ═══════════ -->
|
||||
<!-- ═══════════ Top Action Bar ═══════════ -->
|
||||
<div class="page-topbar">
|
||||
<div class="page-topbar-left">
|
||||
<span class="page-privacy-badge" @click="shareOpen = !shareOpen">
|
||||
<span x-text="pagePublished ? '🌐' : '🔒'"></span>
|
||||
<span x-text="pagePublished ? 'Published' : 'Private'"></span>
|
||||
<span class="chevron-down">▾</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="page-topbar-right">
|
||||
<button class="page-action-btn" @click="shareOpen = !shareOpen">
|
||||
{% if page.is_shared %}🔓{% else %}🔒{% endif %} Share <span class="chevron-down">▾</span>
|
||||
<div class="page-topbar-right" style="position:relative;">
|
||||
<span class="topbar-edited">Edited just now</span>
|
||||
<button class="page-action-btn share-btn" @click="shareOpen = !shareOpen">
|
||||
🔒 Share <span class="chevron-down">▾</span>
|
||||
</button>
|
||||
<button class="page-action-btn" @click="copyPageLink" title="Copy link">🔗</button>
|
||||
<button class="page-action-btn star-btn" @click="toggleFavorite" title="Add to favorites">
|
||||
<span x-text="favorited ? '⭐' : '☆'" :class="{ 'starred': favorited }"></span>
|
||||
<button class="page-action-btn star-btn" @click="toggleFavorite">
|
||||
<span x-text="favorited ? '⭐' : '☆'" :class="{ starred: favorited }"></span>
|
||||
</button>
|
||||
<button class="page-action-btn" @click="moreOpen = !moreOpen" title="More">⋮</button>
|
||||
<button class="page-action-btn" @click="moreOpen = !moreOpen">⋮</button>
|
||||
|
||||
<!-- Share dropdown -->
|
||||
<div class="share-dropdown" x-show="shareOpen" @click.away="shareOpen = false" x-transition>
|
||||
<div class="share-dd-section">
|
||||
<div class="share-dd-row">
|
||||
<span>🔒 Private</span>
|
||||
<span class="share-dd-hint">Only you have access</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="share-dd-sep"></div>
|
||||
<div class="share-dd-section">
|
||||
<div class="share-dd-row clickable" @click="copyPageLink">
|
||||
<span>🔗 Copy link</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="share-dd-sep"></div>
|
||||
<div class="share-dd-section">
|
||||
<div class="share-dd-row" style="justify-content:space-between;">
|
||||
<span>🌐 Publish to web</span>
|
||||
<label class="toggle-switch sm">
|
||||
<input type="checkbox" x-model="pagePublished" @change="togglePublish">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="share-dd-desc" x-show="pagePublished">
|
||||
Anyone with the link can view.<br>
|
||||
<a :href="publishedUrl" x-text="publishedUrl" target="_blank" style="color:var(--blue);font-size:12px;"></a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="share-dd-sep"></div>
|
||||
<div class="share-dd-section">
|
||||
<div class="share-dd-label">Invite</div>
|
||||
<div class="share-dd-invite-row">
|
||||
<input type="email" class="share-dd-input" placeholder="Add people, groups or emails..." x-model="inviteEmail" @keydown.enter="invitePerson">
|
||||
<select class="share-dd-select" x-model="invitePermission">
|
||||
<option value="editor">Can edit</option>
|
||||
<option value="commenter">Can comment</option>
|
||||
<option value="viewer">Can view</option>
|
||||
</select>
|
||||
<button class="share-dd-btn" @click="invitePerson">Invite</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- More menu dropdown -->
|
||||
<div class="more-menu" x-show="moreOpen" @click.away="moreOpen = false" x-transition>
|
||||
<div class="more-menu-item" @click="exportPage">↗ Export</div>
|
||||
@@ -34,68 +72,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════ Share Modal ═══════════ -->
|
||||
<div class="share-modal-overlay" x-show="shareOpen" @click.self="shareOpen = false" x-transition>
|
||||
<div class="share-modal">
|
||||
<div class="share-modal-header">
|
||||
<h2>Share this page</h2>
|
||||
<button class="share-modal-close" @click="shareOpen = false">✕</button>
|
||||
</div>
|
||||
|
||||
<!-- Publish section -->
|
||||
<div class="share-section">
|
||||
<div class="share-section-title">
|
||||
<span>🌐 Publish to web</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" x-model="pagePublished" @change="togglePublish">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="share-section-desc" x-show="pagePublished">
|
||||
Anyone with the link can view this page.<br>
|
||||
<a :href="publishedUrl" x-text="publishedUrl" target="_blank" style="color:var(--blue);font-size:13px;"></a>
|
||||
</p>
|
||||
<p class="share-section-desc" x-show="!pagePublished">
|
||||
Make this page publicly accessible on the web.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="share-sep"></div>
|
||||
|
||||
<!-- Copy link -->
|
||||
<div class="share-section">
|
||||
<div class="share-section-title">🔗 Copy page link</div>
|
||||
<div class="share-link-row">
|
||||
<input type="text" class="share-link-input" :value="pageUrl" readonly @click="$event.target.select()">
|
||||
<button class="share-copy-btn" @click="copyPageLink">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="share-sep"></div>
|
||||
|
||||
<!-- Access controls placeholder -->
|
||||
<div class="share-section">
|
||||
<div class="share-section-title">👥 Invite people</div>
|
||||
<div class="share-invite-row">
|
||||
<input type="email" class="share-invite-input" placeholder="Add email or name..." x-model="inviteEmail" @keydown.enter="invitePerson">
|
||||
<select class="share-permission-select" x-model="invitePermission">
|
||||
<option value="editor">Can edit</option>
|
||||
<option value="commenter">Can comment</option>
|
||||
<option value="viewer">Can view</option>
|
||||
</select>
|
||||
<button class="share-invite-btn" @click="invitePerson">Invite</button>
|
||||
</div>
|
||||
<div class="share-access-list" x-show="accessList.length">
|
||||
<div class="share-access-item" x-for="a in accessList" :key="a.email">
|
||||
<span>👤 <span x-text="a.email"></span></span>
|
||||
<span style="color:var(--text-dim);font-size:13px;" x-text="a.permission"></span>
|
||||
<button class="share-access-remove" @click="removeAccess(a.email)">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════ Page Content ═══════════ -->
|
||||
<div class="page-cover-area">
|
||||
<div class="page-title-block">
|
||||
@@ -108,18 +84,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty page toolbar -->
|
||||
<div class="empty-page-toolbar" x-show="blocks.length === 1 && blocks[0].type === 'paragraph' && !blocks[0].content.trim()">
|
||||
<span class="empty-toolbar-label">Get started with</span>
|
||||
<button class="empty-toolbar-item" @click="replaceBlock(0, 'heading_1')"><b>H1</b> Heading 1</button>
|
||||
<button class="empty-toolbar-item" @click="replaceBlock(0, 'heading_2')"><b>H2</b> Heading 2</button>
|
||||
<button class="empty-toolbar-item" @click="replaceBlock(0, 'heading_3')"><b>H3</b> Heading 3</button>
|
||||
<button class="empty-toolbar-item" @click="replaceBlock(0, 'bulleted_list')">• Bulleted list</button>
|
||||
<button class="empty-toolbar-item" @click="replaceBlock(0, 'to_do')">☐ To-do list</button>
|
||||
<button class="empty-toolbar-item" @click="replaceBlock(0, 'callout')">💡 Callout</button>
|
||||
<button class="empty-toolbar-item" @click="replaceBlock(0, 'quote')">❝ Quote</button>
|
||||
</div>
|
||||
|
||||
<div class="blocks-container" id="_blocksCt" @click="onCtClick($event)"></div>
|
||||
<div id="_slashMenu" class="slash-menu" style="display:none;position:fixed;z-index:999"></div>
|
||||
|
||||
@@ -131,6 +95,41 @@
|
||||
<button @click="fmtLink()">🔗</button>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════ Get Started Toolbar (bottom) ═══════════ -->
|
||||
<div class="get-started-toolbar" x-show="blocks.length === 1 && blocks[0].type === 'paragraph' && !blocks[0].content.trim()">
|
||||
<span class="gs-label">Get started with</span>
|
||||
<button class="gs-pill" @click="replaceBlock(0, 'paragraph');blocks[0].content='Ask AI to write...';render()">
|
||||
<span class="gs-icon">✨</span> Ask AI
|
||||
</button>
|
||||
<button class="gs-pill" @click="replaceBlock(0, 'heading_1');blocks[0].content='AI Meeting Note';render()">
|
||||
<span class="gs-icon">📝</span> AI meeting note
|
||||
</button>
|
||||
<button class="gs-pill" @click="replaceBlock(0, 'paragraph');blocks[0].content='Database';render()">
|
||||
<span class="gs-icon">🗄️</span> Database
|
||||
</button>
|
||||
<button class="gs-pill" @click="replaceBlock(0, 'paragraph');blocks[0].content='Form';render()">
|
||||
<span class="gs-icon">📋</span> Form
|
||||
</button>
|
||||
<button class="gs-pill" @click="replaceBlock(0, 'paragraph');blocks[0].content='Templates';render()">
|
||||
<span class="gs-icon">📑</span> Templates
|
||||
</button>
|
||||
<div style="position:relative;">
|
||||
<button class="gs-pill" @click="gsMoreOpen = !gsMoreOpen">
|
||||
<span>⋯</span>
|
||||
</button>
|
||||
<div class="gs-more-dropdown" x-show="gsMoreOpen" @click.away="gsMoreOpen = false" x-transition>
|
||||
<div class="gs-more-item" @click="gsMoreOpen=false">📊 Table</div>
|
||||
<div class="gs-more-item" @click="gsMoreOpen=false">📋 Board</div>
|
||||
<div class="gs-more-item" @click="gsMoreOpen=false">📝 List</div>
|
||||
<div class="gs-more-item" @click="gsMoreOpen=false">📅 Timeline</div>
|
||||
<div class="gs-more-item" @click="gsMoreOpen=false">🗓️ Calendar</div>
|
||||
<div class="gs-more-item" @click="gsMoreOpen=false">🖼️ Gallery</div>
|
||||
<div class="gs-more-sep"></div>
|
||||
<div class="gs-more-item" @click="gsMoreOpen=false">📥 Import</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-statusbar">
|
||||
<span x-show="saving">Saving...</span>
|
||||
<span x-show="!saving&&dirty">Unsaved</span>
|
||||
@@ -214,14 +213,10 @@ function editor(pid,title,fmt,raw,favorited){
|
||||
const self={
|
||||
pid,pageTitle:title,blocks:[],dirty:false,saving:false,lastSaved:'',st:null,
|
||||
fmt:{open:false,top:0,left:0,idx:-1},
|
||||
// ── Page actions state ──
|
||||
shareOpen:false,moreOpen:false,
|
||||
favorited:!!favorited,
|
||||
pagePublished:false,
|
||||
pageUrl:window.location.href,
|
||||
publishedUrl:'',
|
||||
inviteEmail:'',invitePermission:'editor',
|
||||
accessList:[],
|
||||
shareOpen:false,moreOpen:false,gsMoreOpen:false,
|
||||
favorited:!!favorited,pagePublished:false,
|
||||
pageUrl:window.location.href,publishedUrl:'',
|
||||
inviteEmail:'',invitePermission:'editor',accessList:[],
|
||||
|
||||
init(){
|
||||
_bid=Math.floor(Math.random()*10000);
|
||||
@@ -257,53 +252,37 @@ function editor(pid,title,fmt,raw,favorited){
|
||||
|
||||
removeBlock(idx){this.sync();if(this.blocks.length<=1){this.blocks[0]=this.mkB('paragraph','');}else{this.blocks.splice(idx,1);}const fi=Math.min(idx,this.blocks.length-1);this.render();this.dirty=true;this.autoSave();setTimeout(()=>{const el=this.getEl(this.blocks[fi]?.id);if(el){el.focus();ce(el);}},60);},
|
||||
|
||||
// ── Page actions ──
|
||||
toggleFavorite(){
|
||||
const csrf=document.cookie.match(/csrf_token=([^;]+)/);
|
||||
const m=this.favorited?'DELETE':'POST';
|
||||
fetch(`/board/api/favorites/${this.pid}`,{method:m,headers:{'X-CSRF-Token':csrf?csrf[1]:''}})
|
||||
.then(r=>r.json()).then(()=>{this.favorited=!this.favorited;}).catch(()=>{alert('Failed');});
|
||||
.then(r=>r.json()).then(()=>{this.favorited=!this.favorited;}).catch(()=>{});
|
||||
},
|
||||
copyPageLink(){
|
||||
navigator.clipboard.writeText(this.pageUrl).then(()=>{
|
||||
const btn=document.querySelector('.page-action-btn[title="Copy link"]');
|
||||
if(btn){btn.textContent='✓';setTimeout(()=>{btn.textContent='🔗';},1500);}
|
||||
}).catch(()=>{alert('Failed to copy');});
|
||||
if(btn){btn.textContent='✓ Copied';setTimeout(()=>{btn.textContent='🔗';},1500);}
|
||||
}).catch(()=>{});
|
||||
},
|
||||
togglePublish(){
|
||||
const csrf=document.cookie.match(/csrf_token=([^;]+)/);
|
||||
fetch(`/board/api/pages/${this.pid}/publish`,{method:this.pagePublished?'POST':'DELETE',headers:{'X-CSRF-Token':csrf?csrf[1]:''}})
|
||||
.then(r=>r.json()).then(d=>{if(d.url)this.publishedUrl=d.url;}).catch(()=>{this.pagePublished=!this.pagePublished;});
|
||||
},
|
||||
invitePerson(){
|
||||
if(!this.inviteEmail.trim())return;
|
||||
const csrf=document.cookie.match(/csrf_token=([^;]+)/);
|
||||
fetch(`/board/api/pages/${this.pid}/share`,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-Token':csrf?csrf[1]:''},body:JSON.stringify({email:this.inviteEmail,permission:this.invitePermission})})
|
||||
.then(r=>r.json()).then(()=>{this.accessList.push({email:this.inviteEmail,permission:this.invitePermission});this.inviteEmail='';}).catch(()=>{});
|
||||
},
|
||||
removeAccess(email){
|
||||
this.accessList=this.accessList.filter(a=>a.email!==email);
|
||||
},
|
||||
exportPage(){this.moreOpen=false;alert('Export (à implémenter)');},
|
||||
togglePublish(){this.pagePublished=!this.pagePublished;},
|
||||
invitePerson(){if(!this.inviteEmail.trim())return;this.accessList.push({email:this.inviteEmail,permission:this.invitePermission});this.inviteEmail='';},
|
||||
removeAccess(email){this.accessList=this.accessList.filter(a=>a.email!==email);},
|
||||
exportPage(){this.moreOpen=false;},
|
||||
duplicatePage(){this.moreOpen=false;const csrf=document.cookie.match(/csrf_token=([^;]+)/);fetch(`/board/api/pages?title=${encodeURIComponent(this.pageTitle+' copy')}§ion=Private&project=${encodeURIComponent('{{ workspace_key }}')}`,{method:'POST',headers:{'X-CSRF-Token':csrf?csrf[1]:''}}).then(r=>r.json()).then(d=>{window.location.href=`/pages/${d.id}`;}).catch(()=>{alert('Duplicate failed');});},
|
||||
movePage(){this.moreOpen=false;alert('Move to (à implémenter)');},
|
||||
movePage(){this.moreOpen=false;},
|
||||
deletePage(){this.moreOpen=false;if(!confirm('Move to Trash?'))return;const csrf=document.cookie.match(/csrf_token=([^;]+)/);fetch(`/board/api/pages/${this.pid}/trash`,{method:'POST',headers:{'X-CSRF-Token':csrf?csrf[1]:''}}).then(()=>{window.location.href='/';}).catch(()=>{alert('Failed');});},
|
||||
|
||||
// KEY HANDLER (unchanged)
|
||||
onKd(e){
|
||||
const ab=this.getActiveBlock();if(!ab)return;
|
||||
const{el,bid,idx}=ab;const block=this.blocks[idx];if(!block)return;
|
||||
|
||||
if(SM.isOpen){
|
||||
if(e.key==='Escape'){e.preventDefault();SM.close();return;}
|
||||
if(e.key==='ArrowDown'||e.key==='ArrowUp'||e.key==='Enter'){e.preventDefault();SM._in.dispatchEvent(new KeyboardEvent('keydown',{key:e.key,bubbles:true}));return;}
|
||||
if(e.key==='Backspace'&&!SM._q&&(el.textContent||'').trim()==='/'){e.preventDefault();SM.close();return;}
|
||||
return;
|
||||
}
|
||||
|
||||
if(e.key.length===1||e.key==='Backspace'||e.key==='Delete'){const i2=idx;setTimeout(()=>{const e2=this.getEl(this.blocks[i2]?.id);if(e2&&e2.textContent?.trim()==='/'&&!SM.isOpen)SM.open(i2,e2);},15);}
|
||||
if(e.key===' '){const i2=idx;setTimeout(()=>this.checkMd(i2),15);}
|
||||
|
||||
if(e.key==='Enter'){
|
||||
if(e.shiftKey){this.dirty=true;this.autoSave();return;}
|
||||
e.preventDefault();
|
||||
@@ -319,7 +298,6 @@ function editor(pid,title,fmt,raw,favorited){
|
||||
setTimeout(()=>{const ne=this.getEl(this.blocks[idx+1]?.id);if(ne){ne.focus();cs(ne);}},60);
|
||||
this.dirty=true;this.autoSave();return;
|
||||
}
|
||||
|
||||
if(e.key==='ArrowUp'){if(cp(el)===0&&idx>0){e.preventDefault();const prev=this.getEl(this.blocks[idx-1]?.id);if(prev){prev.focus();ce(prev);}}return;}
|
||||
if(e.key==='ArrowDown'){if(cp(el)>=(el.textContent||'').length&&idx<this.blocks.length-1){e.preventDefault();const next=this.getEl(this.blocks[idx+1]?.id);if(next){next.focus();cs(next);}}return;}
|
||||
if(e.key==='Backspace'){if(!(el.textContent||'').trim()){this.sync();if(block.type!=='paragraph'){e.preventDefault();block.type='paragraph';block.content='';this.render();setTimeout(()=>{const ne=this.getEl(block.id);if(ne)ne.focus();},60);}else if(this.blocks.length>1){e.preventDefault();this.removeBlock(idx);}}return;}
|
||||
|
||||
Reference in New Issue
Block a user