feat: Notion-style block editor v6 + sidebar refactoring
Block editor: - Vanilla JS rendering (renderBlock) — zero Alpine x-for on blocks - 15 block types with Notion placeholders (Heading 1-4, Toggle list, Empty quote, etc.) - Event delegation keydown handler on container - sync() before every render() — content preserved across Enter/Backspace/type changes - Slash menu with event delegation, single innerHTML set, window.E for applySlash - Markdown shortcuts use idx (not bid) to avoid stale references after render - data-bid only on contentEditable (not .block-wrapper) — fixes '+' artifact - .empty class + outline:none on block-content Sidebar: - Notion-style collapsible sections (Recents/Private/Shared/Notion apps) - Workspace header with chevron, Search tab, Home tab - Sticky footer with '+ New page' button - sectionsOpen/toggleSection/toggleWorkspaceMenu/openQuickFind in appState - CSS: uppercase section headers, 240px width, collapsed 56px mode, border-right
This commit is contained in:
+89
-105
@@ -48,140 +48,124 @@
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
<!-- ═══════════ SIDEBAR ═══════════ -->
|
||||
<!-- ═══════════ SIDEBAR Notion-style ═══════════ -->
|
||||
<aside class="sidebar" :class="{ collapsed: sidebarCollapsed }" id="sidebar"
|
||||
x-init="$nextTick(() => initTreeSortable())">
|
||||
|
||||
x-data x-init="$nextTick(() => { if(typeof initTreeSortable==='function') initTreeSortable(); })">
|
||||
<!-- Workspace header -->
|
||||
<div class="sidebar-workspace">
|
||||
<div class="sidebar-workspace" @click="toggleWorkspaceMenu">
|
||||
<div class="workspace-info">
|
||||
<div class="workspace-avatar">{{ workspaceInitial }}</div>
|
||||
<span class="workspace-name">{{ workspaceName }}</span>
|
||||
</div>
|
||||
<div class="sidebar-actions">
|
||||
<button class="sidebar-action-btn" @click="sidebarCollapsed = !sidebarCollapsed" title="Toggle sidebar">
|
||||
«
|
||||
</button>
|
||||
<span class="workspace-chevron">▾</span>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="sidebar-nav">
|
||||
<div class="sidebar-nav-item" @click="openQuickFind">
|
||||
<span class="nav-icon">🔍</span> Search
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick actions -->
|
||||
<!-- Settings -->
|
||||
<div class="sidebar-nav">
|
||||
<a href="/" class="sidebar-nav-item" :class="{ active: currentView === 'home' }">
|
||||
<span class="nav-icon">🏠</span> Home
|
||||
</a>
|
||||
</div>
|
||||
<div class="sidebar-nav" style="gap: 2px; padding-right: 6px;">
|
||||
<button class="sidebar-action-btn" style="width:auto; padding: 0 6px;">💬</button>
|
||||
<button class="sidebar-action-btn" style="width:auto; padding: 0 6px;">🎤</button>
|
||||
<button class="sidebar-action-btn" style="width:auto; padding: 0 6px;">📥</button>
|
||||
<button class="sidebar-action-btn" style="width:auto; padding: 0 6px;">🔍</button>
|
||||
</div>
|
||||
|
||||
<!-- Recents -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<div class="sidebar-section-header" @click="toggleSection('recents')">
|
||||
<div class="sidebar-section-title">
|
||||
<span class="chevron open">▶</span> Recents
|
||||
<span class="chevron" :class="{ open: sectionsOpen.recents }" x-text="sectionsOpen.recents ? '▼' : '▶'"></span>
|
||||
<span>Recents</span>
|
||||
</div>
|
||||
<div class="sidebar-section-actions">
|
||||
<button class="section-action-btn" title="Open in Library" @click="openLibrary('Recents')">📚</button>
|
||||
<button class="section-action-btn" title="Add page" @click="newPage('Recents')">+</button>
|
||||
<button class="section-action-btn" title="Add page" @click.stop="newPage('Recents')">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="sidebar-items" data-section="recents">
|
||||
{% for page in recent_pages %}
|
||||
{{ render_tree_item(page) }}
|
||||
{% endfor %}
|
||||
{% if not recent_pages %}
|
||||
<li class="sidebar-item">
|
||||
<span class="tree-toggle-placeholder"></span>
|
||||
<span class="page-icon">📄</span>
|
||||
<span class="page-name text-dim">No recent pages</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div class="sidebar-section-items" x-show="sectionsOpen.recents" x-transition>
|
||||
<ul class="sidebar-items" data-section="recents">
|
||||
{% for page in recent_pages %}
|
||||
{{ render_tree_item(page) }}
|
||||
{% endfor %}
|
||||
{% if not recent_pages %}
|
||||
<li class="sidebar-item">
|
||||
<span class="tree-toggle-placeholder"></span>
|
||||
<span class="page-icon">📄</span>
|
||||
<span class="page-name text-dim">No recent pages</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Favorites: Private -->
|
||||
<!-- Favorites section is optionnel ici -->
|
||||
|
||||
<!-- Private -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<div class="sidebar-section-header" @click="toggleSection('private')">
|
||||
<div class="sidebar-section-title">
|
||||
<span class="chevron open">▶</span> Private
|
||||
<span class="chevron" :class="{ open: sectionsOpen.private }" x-text="sectionsOpen.private ? '▼' : '▶'"></span>
|
||||
<span>Private</span>
|
||||
</div>
|
||||
<div class="sidebar-section-actions">
|
||||
<button class="section-action-btn" title="Open in Library" @click="openLibrary('Private')">📚</button>
|
||||
<button class="section-action-btn" title="Add page" @click="newPage('Private')">+</button>
|
||||
<button class="section-action-btn" title="Add page" @click.stop="newPage('Private')">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="sidebar-items" data-section="private">
|
||||
{% for page in private_pages %}
|
||||
{{ render_tree_item(page) }}
|
||||
{% endfor %}
|
||||
{% if not private_pages %}
|
||||
<li class="sidebar-item">
|
||||
<span class="tree-toggle-placeholder"></span>
|
||||
<span class="page-icon">📄</span>
|
||||
<span class="page-name text-dim">No pages yet</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Notion apps -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<div class="sidebar-section-title">
|
||||
<span class="chevron open">▶</span> Notion apps
|
||||
</div>
|
||||
<div class="sidebar-section-items" x-show="sectionsOpen.private" x-transition>
|
||||
<ul class="sidebar-items" data-section="private">
|
||||
{% for page in private_pages %}
|
||||
{{ render_tree_item(page) }}
|
||||
{% endfor %}
|
||||
{% if not private_pages %}
|
||||
<li class="sidebar-item">
|
||||
<span class="tree-toggle-placeholder"></span>
|
||||
<span class="page-icon">📄</span>
|
||||
<span class="page-name text-dim">No pages yet</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="sidebar-items">
|
||||
<li class="sidebar-item"><span class="page-icon">📅</span><span class="page-name">Notion Calendar</span></li>
|
||||
<li class="sidebar-item"><span class="page-icon">🖥️</span><span class="page-name">Notion Desktop</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Favorites -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<div class="sidebar-section-title">
|
||||
<span class="chevron open">▶</span> Favorites
|
||||
</div>
|
||||
<div class="sidebar-section-actions">
|
||||
<button class="section-action-btn" title="Add page" @click="newPage('Favorites')">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="sidebar-items" data-section="favorites">
|
||||
{% for page in favorite_pages %}
|
||||
{{ render_tree_item(page) }}
|
||||
{% endfor %}
|
||||
{% if not favorite_pages %}
|
||||
<li class="sidebar-item">
|
||||
<span class="tree-toggle-placeholder"></span>
|
||||
<span class="page-icon">⭐</span>
|
||||
<span class="page-name text-dim">No favorites yet</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Shared -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header">
|
||||
<div class="sidebar-section-header" @click="toggleSection('shared')">
|
||||
<div class="sidebar-section-title">
|
||||
<span class="chevron">▶</span> Shared
|
||||
<span class="chevron" :class="{ open: sectionsOpen.shared }" x-text="sectionsOpen.shared ? '▼' : '▶'"></span>
|
||||
<span>Shared</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="sidebar-items">
|
||||
<li class="sidebar-item">
|
||||
<span class="page-icon">👥</span>
|
||||
<span class="page-name text-dim">No shared pages</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="sidebar-section-items" x-show="sectionsOpen.shared" x-transition>
|
||||
<ul class="sidebar-items">
|
||||
<li class="sidebar-item">
|
||||
<span class="page-icon">👥</span>
|
||||
<span class="page-name text-dim">No shared pages</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Library button -->
|
||||
<div class="sidebar-nav" style="margin-top: 8px;">
|
||||
<!-- Notion apps -->
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-header" @click="toggleSection('apps')">
|
||||
<div class="sidebar-section-title">
|
||||
<span class="chevron" :class="{ open: sectionsOpen.apps }" x-text="sectionsOpen.apps ? '▼' : '▶'"></span>
|
||||
<span>Notion apps</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-section-items" x-show="sectionsOpen.apps" x-transition>
|
||||
<ul class="sidebar-items">
|
||||
<li class="sidebar-item"><span class="page-icon">📅</span><span class="page-name">Notion Calendar</span></li>
|
||||
<li class="sidebar-item"><span class="page-icon">🖥️</span><span class="page-name">Notion Desktop</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Utility links -->
|
||||
<div class="sidebar-utility">
|
||||
<a href="/library" class="sidebar-nav-item" @click.prevent="navigateTo('/library')">
|
||||
<span class="nav-icon">📚</span> Library
|
||||
</a>
|
||||
@@ -189,22 +173,16 @@
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-invite" x-show="showInvite" x-transition>
|
||||
<div class="sidebar-invite-title">👥 Invite members</div>
|
||||
<div class="sidebar-invite-desc">Collaborate with your team.</div>
|
||||
<button class="sidebar-invite-close" @click="showInvite = false">✕</button>
|
||||
</div>
|
||||
<button class="sidebar-new-chat">
|
||||
<span>💬 New chat</span>
|
||||
<span class="shortcut">Ctrl+O</span>
|
||||
<button class="sidebar-footer-btn" @click="newPage('Private')">
|
||||
<span style="font-size:16px;">+</span> New page
|
||||
</button>
|
||||
<div style="display: flex; gap: 4px; margin-top: 4px;">
|
||||
{% if user %}
|
||||
<a href="/auth/logout" class="sidebar-new-chat" style="flex:1; justify-content:center;">🚪</a>
|
||||
<a href="/auth/logout" class="sidebar-footer-btn" style="flex:1; justify-content:center;">🚪</a>
|
||||
{% else %}
|
||||
<a href="/auth/login" class="sidebar-new-chat" style="flex:1; justify-content:center;">🔑</a>
|
||||
<a href="/auth/login" class="sidebar-footer-btn" style="flex:1; justify-content:center;">🔑</a>
|
||||
{% endif %}
|
||||
<button class="sidebar-new-chat" style="width:36px; justify-content:center;" @click="toggleTheme()">🌓</button>
|
||||
<button class="sidebar-footer-btn" style="width:36px; justify-content:center;" @click="toggleTheme()">🌓</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -362,6 +340,12 @@
|
||||
contextActions: {},
|
||||
showNewPageMenu: false,
|
||||
|
||||
// ── Sections collapsible ──
|
||||
sectionsOpen: { recents: true, private: true, shared: true, apps: true },
|
||||
toggleSection(key) { this.sectionsOpen[key] = !this.sectionsOpen[key]; this.sectionsOpen = Object.assign({}, this.sectionsOpen); },
|
||||
toggleWorkspaceMenu() { this.sidebarCollapsed = !this.sidebarCollapsed; },
|
||||
openQuickFind() { alert('Quick Find — Ctrl+K'); },
|
||||
|
||||
// ── Tree state ──
|
||||
expandedNodes: {},
|
||||
|
||||
|
||||
+136
-266
@@ -9,71 +9,16 @@
|
||||
<div class="page-title-block">
|
||||
<span class="page-icon-emoji">📄</span>
|
||||
<div class="page-title-input" contenteditable="true" id="_titleEl"
|
||||
@paste.prevent="pastePlain($event)"
|
||||
@input="dirty=true;autoSave()"
|
||||
@keydown.enter.prevent="focusBlock()"
|
||||
@paste.prevent="pastePlain($event)"
|
||||
spellcheck="false">{{ page.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="blocks-container" id="_blocksCt" @click="onCtClick($event)">
|
||||
|
||||
<template x-for="idx in blocks.length" :key="'b'+idx">
|
||||
<div class="block-wrapper" :data-bid="blocks[idx-1].id"
|
||||
@mouseenter="hoverBid=blocks[idx-1].id" @mouseleave="hoverBid=null">
|
||||
|
||||
<div class="block-handle" :class="{visible:hoverBid===blocks[idx-1].id}">
|
||||
<svg viewBox="0 0 16 16" width="14" height="14">
|
||||
<circle cx="4" cy="3" r="1.3"/><circle cx="11" cy="3" r="1.3"/>
|
||||
<circle cx="4" cy="8" r="1.3"/><circle cx="11" cy="8" r="1.3"/>
|
||||
<circle cx="4" cy="13" r="1.3"/><circle cx="11" cy="13" r="1.3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="block-actions" :class="{visible:hoverBid===blocks[idx-1].id}">
|
||||
<button class="block-add-btn" @click="addAfter(idx-1)">+</button>
|
||||
</div>
|
||||
|
||||
<div x-show="blocks[idx-1].type==='paragraph'" class="block-content" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Type '/' for commands..." spellcheck="false"></div>
|
||||
<h1 x-show="blocks[idx-1].type==='heading_1'" class="block-content block-h1" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Heading 1" spellcheck="false"></h1>
|
||||
<h2 x-show="blocks[idx-1].type==='heading_2'" class="block-content block-h2" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Heading 2" spellcheck="false"></h2>
|
||||
<h3 x-show="blocks[idx-1].type==='heading_3'" class="block-content block-h3" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Heading 3" spellcheck="false"></h3>
|
||||
<div x-show="blocks[idx-1].type==='bulleted_list'" class="block-content block-bullet" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="List" spellcheck="false"></div>
|
||||
<div x-show="blocks[idx-1].type==='numbered_list'" class="block-content block-numbered" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="List" spellcheck="false"></div>
|
||||
<div x-show="blocks[idx-1].type==='to_do'" class="block-content block-todo">
|
||||
<input type="checkbox" class="todo-checkbox" :checked="blocks[idx-1].checked" @change="blocks[idx-1].checked=$event.target.checked;dirty=true;autoSave()">
|
||||
<div :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="To-do" spellcheck="false"></div>
|
||||
</div>
|
||||
<div x-show="blocks[idx-1].type==='toggle'" class="block-content block-toggle">
|
||||
<button class="toggle-chevron" :class="{open:blocks[idx-1].expanded}" @click="blocks[idx-1].expanded=!blocks[idx-1].expanded;autoSave()">▶</button>
|
||||
<div :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Toggle" spellcheck="false"></div>
|
||||
</div>
|
||||
<blockquote x-show="blocks[idx-1].type==='quote'" class="block-content block-quote" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Quote" spellcheck="false"></blockquote>
|
||||
<div x-show="blocks[idx-1].type==='code'" class="block-content block-code">
|
||||
<div class="code-lang-label" x-text="blocks[idx-1].language||'Plain Text'"></div>
|
||||
<pre><code :data-bid="blocks[idx-1].id" contenteditable="true" spellcheck="false"></code></pre>
|
||||
</div>
|
||||
<hr x-show="blocks[idx-1].type==='divider'" class="block-divider">
|
||||
<div x-show="blocks[idx-1].type==='callout'" class="block-content block-callout" :style="{background:(blocks[idx-1].style&&blocks[idx-1].style.bgColor)||'var(--blue-bg)'}">
|
||||
<span class="callout-icon" x-text="blocks[idx-1].icon||'💡'">💡</span>
|
||||
<div :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Type something..." spellcheck="false"></div>
|
||||
</div>
|
||||
<div x-show="blocks[idx-1].type==='image'" class="block-content block-image-wrapper">
|
||||
<img :src="blocks[idx-1].src" style="max-width:100%;border-radius:4px" x-show="blocks[idx-1].src">
|
||||
<div class="image-placeholder" x-show="!blocks[idx-1].src" @click="imgInputs[blocks[idx-1].id]?.click()" @drop.prevent="dropImg($event,idx-1)" @dragover.prevent>
|
||||
<span>🖼 Click or drop image</span>
|
||||
<input type="file" accept="image/*" style="display:none" :ref="el=>{if(el)imgInputs[blocks[idx-1].id]=el}" @change="uploadImg(idx-1,$event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="blocks-empty" x-show="blocks.length===0" @click="addAt(0)">Press '/' for commands, or just start typing...</div>
|
||||
</div>
|
||||
|
||||
<!-- Slash menu: built in vanilla JS, not Alpine -->
|
||||
<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>
|
||||
|
||||
<!-- Format Toolbar: Alpine for show/hide only -->
|
||||
<div class="format-toolbar" x-show="fmt.open" :style="{top:fmt.top+'px',left:fmt.left+'px'}" @mousedown.prevent>
|
||||
<button @click="fmtApply('bold')"><strong>B</strong></button>
|
||||
<button @click="fmtApply('italic')"><em>I</em></button>
|
||||
@@ -94,132 +39,78 @@
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// ═══════════════════════════════════════════
|
||||
// FlowDeck Block Editor — Notion Clone v4
|
||||
// Slash menu: pure vanilla JS (zero Alpine)
|
||||
// Blocks: Alpine x-for + vanilla JS keydown
|
||||
// ═══════════════════════════════════════════
|
||||
const CMDS=[{name:'BASIC',items:[
|
||||
{id:'paragraph',name:'Text',icon:'¶'},{id:'heading_1',name:'Heading 1',icon:'H1'},{id:'heading_2',name:'Heading 2',icon:'H2'},
|
||||
{id:'heading_3',name:'Heading 3',icon:'H3'},{id:'heading_4',name:'Heading 4',icon:'H4'},{id:'bulleted_list',name:'Bulleted list',icon:'•'},{id:'numbered_list',name:'Numbered list',icon:'1.'},
|
||||
{id:'to_do',name:'To-do',icon:'☐'},{id:'toggle',name:'Toggle',icon:'▶'},{id:'quote',name:'Quote',icon:'❝'},
|
||||
{id:'callout',name:'Callout',icon:'💡'},{id:'divider',name:'Divider',icon:'—'},{id:'code',name:'Code block',icon:'<>'},
|
||||
]},{name:'MEDIA',items:[{id:'image',name:'Image',icon:'🖼'}]}];
|
||||
|
||||
let _bid=0;
|
||||
function genId(){return 'b'+(++_bid)+'_'+Date.now().toString(36);}
|
||||
let _bid=0;function genId(){return 'b'+(++_bid)+'_'+Date.now().toString(36);}
|
||||
function cp(e){const s=window.getSelection();if(!s.rangeCount)return 0;const r=s.getRangeAt(0).cloneRange();r.selectNodeContents(e);r.setEnd(s.getRangeAt(0).endContainer,s.getRangeAt(0).endOffset);return r.toString().length;}
|
||||
function ce(e){const r=document.createRange();r.selectNodeContents(e);r.collapse(false);window.getSelection().removeAllRanges();window.getSelection().addRange(r);}
|
||||
function cs(e){const r=document.createRange();r.selectNodeContents(e);r.collapse(true);window.getSelection().removeAllRanges();window.getSelection().addRange(r);}
|
||||
function esc(s){return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
// Slash commands data
|
||||
const SLASH_GROUPS=[
|
||||
{name:'BASIC',items:[
|
||||
{id:'paragraph',name:'Text',icon:'¶'},
|
||||
{id:'heading_1',name:'Heading 1',icon:'H1'},
|
||||
{id:'heading_2',name:'Heading 2',icon:'H2'},
|
||||
{id:'heading_3',name:'Heading 3',icon:'H3'},
|
||||
{id:'bulleted_list',name:'Bulleted list',icon:'•'},
|
||||
{id:'numbered_list',name:'Numbered list',icon:'1.'},
|
||||
{id:'to_do',name:'To-do',icon:'☐'},
|
||||
{id:'toggle',name:'Toggle',icon:'▶'},
|
||||
{id:'quote',name:'Quote',icon:'❝'},
|
||||
{id:'callout',name:'Callout',icon:'💡'},
|
||||
{id:'divider',name:'Divider',icon:'—'},
|
||||
{id:'code',name:'Code block',icon:'<>'},
|
||||
]},
|
||||
{name:'MEDIA',items:[
|
||||
{id:'image',name:'Image',icon:'🖼'},
|
||||
]},
|
||||
];
|
||||
|
||||
// ── Slash Menu (100% vanilla JS, no Alpine) ──
|
||||
const SlashMenu={
|
||||
_open:false,_idx:-1,_sel:0,_q:'',_items:[],
|
||||
_el:null,_inp:null,_list:null,
|
||||
|
||||
init(){
|
||||
this._el=document.getElementById('_slashMenu');
|
||||
if(!this._el)return;
|
||||
this._inp=document.createElement('input');
|
||||
this._inp.type='text';this._inp.placeholder='Filter...';
|
||||
this._inp.style.cssText='width:100%;padding:6px 10px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:14px;outline:none;box-sizing:border-box';
|
||||
this._inp.oninput=()=>this.filter();
|
||||
this._inp.onkeydown=e=>this._onKey(e);
|
||||
const hdr=document.createElement('div');
|
||||
hdr.style.cssText='padding:8px;border-bottom:1px solid var(--border)';
|
||||
hdr.appendChild(this._inp);
|
||||
this._list=document.createElement('div');
|
||||
this._list.style.cssText='overflow-y:auto;max-height:340px';
|
||||
this._el.appendChild(hdr);
|
||||
this._el.appendChild(this._list);
|
||||
document.addEventListener('mousedown',e=>{if(!this._el.contains(e.target))this.close();});
|
||||
// Slash menu — event delegation on list, single innerHTML set
|
||||
const SM={_o:false,_i:-1,_s:0,_q:'',_it:[],
|
||||
init(){const e=document.getElementById('_slashMenu');if(!e)return;e.innerHTML='';
|
||||
const inp=document.createElement('input');inp.type='text';inp.placeholder='Filter...';
|
||||
inp.style.cssText='width:100%;padding:6px 10px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:14px;outline:none;box-sizing:border-box';
|
||||
inp.oninput=()=>SM.flt();inp.onkeydown=ev=>SM._kd(ev);
|
||||
const hdr=document.createElement('div');hdr.style.cssText='padding:8px;border-bottom:1px solid var(--border)';hdr.appendChild(inp);
|
||||
const list=document.createElement('div');list.style.cssText='overflow-y:auto;max-height:340px';
|
||||
// Event delegation: single click handler for all items
|
||||
list.addEventListener('click',ev=>{const it=ev.target.closest('.slash-item');if(it){ev.preventDefault();SM.sel(it.dataset.sid);}});
|
||||
e.appendChild(hdr);e.appendChild(list);
|
||||
SM._e=e;SM._in=inp;SM._li=list;
|
||||
document.addEventListener('mousedown',ev=>{if(!e.contains(ev.target))SM.close();});
|
||||
},
|
||||
|
||||
open(idx,el){
|
||||
if(!this._el)this.init();
|
||||
this._idx=idx;this._q='';this._sel=0;this._inp.value='';
|
||||
this.filter();
|
||||
const r=el.getBoundingClientRect();
|
||||
this._el.style.display='block';
|
||||
const mh=this._el.offsetHeight||400;
|
||||
this._el.style.top=Math.max(0,(r.bottom+4+mh>window.innerHeight)?r.top-mh-4:r.bottom+4)+'px';
|
||||
this._el.style.left=Math.min(r.left,window.innerWidth-330)+'px';
|
||||
this._inp.focus();this._open=true;
|
||||
},
|
||||
|
||||
close(){
|
||||
this._el.style.display='none';this._open=false;
|
||||
this._inp.value='';this._q='';
|
||||
},
|
||||
|
||||
filter(){
|
||||
const q=(this._inp.value||'').toLowerCase();this._q=q;
|
||||
let html='';
|
||||
for(const g of SLASH_GROUPS){
|
||||
let items=g.items;
|
||||
if(q)items=items.filter(c=>c.name.toLowerCase().includes(q)||c.id.includes(q));
|
||||
if(!items.length)continue;
|
||||
html+=`<div style="padding:6px 12px 4px;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px">${g.name}</div>`;
|
||||
items.forEach((c,i)=>{
|
||||
const sel=(this._items.length===this._sel);
|
||||
if(sel)this._selItem=c.id;
|
||||
this._items.push(c);
|
||||
html+=`<div class="slash-item${sel?' selected':''}" data-sid="${c.id}" style="display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:14px;color:var(--text-primary);cursor:pointer;transition:background .1s"
|
||||
onmousedown="event.preventDefault()" onclick="SlashMenu.select('${c.id}')" onmouseenter="this.classList.add('selected')" onmouseleave="this.classList.remove('selected')">
|
||||
open(i,el){if(!SM._e)SM.init();SM.close();SM._i=i;SM._s=0;SM._in.value='';SM.flt();
|
||||
const r=el.getBoundingClientRect();SM._e.style.display='block';
|
||||
SM._e.style.top=Math.max(4,(r.bottom+4>window.innerHeight-340)?r.top-344:r.bottom+4)+'px';
|
||||
SM._e.style.left=Math.min(r.left,window.innerWidth-324)+'px';
|
||||
setTimeout(()=>SM._in.focus(),10);SM._o=true;},
|
||||
close(){if(SM._e)SM._e.style.display='none';SM._o=false;SM._in&&(SM._in.value='');},
|
||||
flt(){if(!SM._li)return;SM._it=[];const q=(SM._in.value||'').toLowerCase();SM._q=q;let h='';
|
||||
for(const g of CMDS){let items=g.items;if(q)items=items.filter(c=>c.name.toLowerCase().includes(q)||c.id.includes(q));if(!items.length)continue;
|
||||
h+=`<div style="padding:6px 12px 4px;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px">${g.name}</div>`;
|
||||
items.forEach(c=>{SM._it.push(c);
|
||||
h+=`<div class="slash-item" data-sid="${c.id}" style="display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:14px;color:var(--text-primary);cursor:pointer">
|
||||
<span style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--bg-secondary);border-radius:4px;flex-shrink:0">${c.icon}</span>
|
||||
<span style="flex:1;font-weight:500">${c.name}</span>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
this._list.innerHTML=html;
|
||||
if(this._items.length)this._selItem=this._items[0].id;
|
||||
},
|
||||
<span style="flex:1;font-weight:500">${c.name}</span></div>`;});}
|
||||
SM._li.innerHTML=h;},
|
||||
_kd(e){if(e.key==='ArrowDown'){e.preventDefault();SM._s=Math.min(SM._s+1,SM._it.length-1);SM._rs();}
|
||||
else if(e.key==='ArrowUp'){e.preventDefault();SM._s=Math.max(SM._s-1,0);SM._rs();}
|
||||
else if(e.key==='Enter'){e.preventDefault();const c=SM._it[SM._s];if(c)SM.sel(c.id);}
|
||||
else if(e.key==='Escape'){e.preventDefault();SM.close();}},
|
||||
_rs(){const its=SM._li.querySelectorAll('.slash-item');its.forEach((el,i)=>{el.classList.toggle('selected',i===SM._s);});},
|
||||
sel(id){if(window.E)window.E.applySlash(id);SM.close();},
|
||||
get isOpen(){return SM._o;}};
|
||||
|
||||
_onKey(e){
|
||||
if(e.key==='ArrowDown'){e.preventDefault();this._sel=Math.min(this._sel+1,this._items.length-1);this._renderSel();}
|
||||
else if(e.key==='ArrowUp'){e.preventDefault();this._sel=Math.max(this._sel-1,0);this._renderSel();}
|
||||
else if(e.key==='Enter'){e.preventDefault();const c=this._items[this._sel];if(c)this.select(c.id);}
|
||||
else if(e.key==='Escape'){e.preventDefault();this.close();}
|
||||
},
|
||||
function renderBlock(b,idx){
|
||||
if(b.type==='divider')return `<div class="block-wrapper"><hr class="block-divider"></div>`;
|
||||
const ph=b.type==='heading_1'?'Heading 1':b.type==='heading_2'?'Heading 2':b.type==='heading_3'?'Heading 3':b.type==='heading_4'?'Heading 4':b.type==='bulleted_list'?'List':b.type==='numbered_list'?'List':b.type==='to_do'?'To-do':b.type==='toggle'?'Toggle list':b.type==='quote'?'Empty quote':b.type==='code'?'Type code...':b.type==='callout'?'Type something...':'Press \'/\' for commands...';
|
||||
let inner='';
|
||||
if(b.type==='to_do')inner=`<input type="checkbox" class="todo-checkbox" ${b.checked?'checked':''} onchange="E._doToggle('${b.id}',this.checked)"><div data-bid="${b.id}" contenteditable="true" data-placeholder="${ph}" spellcheck="false">${esc(b.content)}</div>`;
|
||||
else if(b.type==='toggle')inner=`<button class="toggle-chevron ${b.expanded?'open':''}" onclick="E._doToggleExpand('${b.id}')">▶</button><div data-bid="${b.id}" contenteditable="true" data-placeholder="${ph}" spellcheck="false">${esc(b.content)}</div>`;
|
||||
else if(b.type==='code')inner=`<div class="code-lang-label">${b.language||'Plain Text'}</div><pre><code data-bid="${b.id}" contenteditable="true" spellcheck="false">${esc(b.content)}</code></pre>`;
|
||||
else if(b.type==='callout')inner=`<span class="callout-icon">${b.icon||'💡'}</span><div data-bid="${b.id}" contenteditable="true" data-placeholder="${ph}" spellcheck="false">${esc(b.content)}</div>`;
|
||||
else inner=`<div data-bid="${b.id}" contenteditable="true" data-placeholder="${ph}" spellcheck="false">${esc(b.content)}</div>`;
|
||||
const tag=b.type.startsWith('heading_')?'h'+b.type.slice(-1):b.type==='quote'?'blockquote':'div';
|
||||
const cls=tag==='div'?`block-content ${b.type==='bulleted_list'?'block-bullet':b.type==='numbered_list'?'block-numbered':b.type==='to_do'?'block-todo':b.type==='toggle'?'block-toggle':b.type==='code'?'block-code':b.type==='callout'?'block-callout':''}`:`block-content block-${tag}`;
|
||||
const style=b.type==='callout'?` style="background:${(b.style&&b.style.bgColor)||'var(--blue-bg)'}"`:'';
|
||||
return `<div class="block-wrapper">
|
||||
<div class="block-handle"><svg viewBox="0 0 16 16" width="14" height="14"><circle cx="4" cy="3" r="1.3"/><circle cx="11" cy="3" r="1.3"/><circle cx="4" cy="8" r="1.3"/><circle cx="11" cy="8" r="1.3"/><circle cx="4" cy="13" r="1.3"/><circle cx="11" cy="13" r="1.3"/></svg></div>
|
||||
<div class="block-actions"><button class="block-add-btn" onclick="E.addAfter(${idx})">+</button></div>
|
||||
<${tag}${style} class="${cls}">${inner}</${tag}>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
_renderSel(){
|
||||
const items=this._list.querySelectorAll('.slash-item');
|
||||
items.forEach((el,i)=>{el.classList.toggle('selected',i===this._sel);});
|
||||
},
|
||||
|
||||
select(id){
|
||||
const ed=document.querySelector('.page-editor-wrapper');
|
||||
if(!ed?.__x)return;
|
||||
ed.__x.$data.applySlash(id);
|
||||
this.close();
|
||||
},
|
||||
|
||||
get isOpen(){return this._open;},
|
||||
};
|
||||
|
||||
// ── Cursor helpers ──
|
||||
function curPos(el){const s=window.getSelection();if(!s.rangeCount)return 0;const r=s.getRangeAt(0).cloneRange();r.selectNodeContents(el);r.setEnd(s.getRangeAt(0).endContainer,s.getRangeAt(0).endOffset);return r.toString().length;}
|
||||
function curEnd(el){const r=document.createRange();r.selectNodeContents(el);r.collapse(false);const s=window.getSelection();s.removeAllRanges();s.addRange(r);}
|
||||
function curStart(el){const r=document.createRange();r.selectNodeContents(el);r.collapse(true);const s=window.getSelection();s.removeAllRanges();s.addRange(r);}
|
||||
|
||||
// ── Editor component ──
|
||||
window.E=null;
|
||||
function editor(pid,title,fmt,raw){
|
||||
const self={
|
||||
pid,pageTitle:title,blocks:[],hoverBid:null,
|
||||
dirty:false,saving:false,lastSaved:'',st:null,
|
||||
imgInputs:{},
|
||||
pid,pageTitle:title,blocks:[],dirty:false,saving:false,lastSaved:'',st:null,
|
||||
fmt:{open:false,top:0,left:0,idx:-1},
|
||||
|
||||
init(){
|
||||
@@ -227,94 +118,81 @@ function editor(pid,title,fmt,raw){
|
||||
if(fmt==='blocks'&&raw){try{this.blocks=JSON.parse(raw);this.blocks.forEach(b=>{if(!b.id)b.id=genId()});}catch(e){this.blocks=[];}}
|
||||
else if(raw&&raw.trim())this.blocks=this.md2b(raw);
|
||||
if(!this.blocks.length)this.blocks=[this.mkB('paragraph','')];
|
||||
|
||||
SlashMenu.init();
|
||||
|
||||
// Give Alpine time to render, then setup once
|
||||
setTimeout(()=>{
|
||||
const ct=document.getElementById('_blocksCt');
|
||||
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||'';
|
||||
}
|
||||
// Focus first block
|
||||
this.focusBlock();
|
||||
// KEYDOWN (vanilla JS)
|
||||
ct.addEventListener('keydown',e=>this.onKd(e,ct));
|
||||
window.E=this;SM.init();this.render();
|
||||
setTimeout(()=>{this.focusBlock();const ct=document.getElementById('_blocksCt');if(!ct)return;
|
||||
ct.addEventListener('keydown',e=>this.onKd(e));
|
||||
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();}});
|
||||
},400);
|
||||
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();this.render();}});
|
||||
},100);
|
||||
},
|
||||
|
||||
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(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);
|
||||
else{const b=this.blocks[this.blocks.length-1];const el=b&&this.getEl(b.id);if(el){el.focus();curEnd(el);}}
|
||||
}
|
||||
},
|
||||
getEl(bid){const ct=document.getElementById('_blocksCt');return ct?ct.querySelector(`[data-bid="${bid}"]:not(button):not(input)`):null;},
|
||||
getEl(bid){const ct=document.getElementById('_blocksCt');return ct?ct.querySelector(`[data-bid="${bid}"]`):null;},
|
||||
getIdx(bid){return this.blocks.findIndex(b=>b.id===bid);},
|
||||
getActiveBlock(){const el=document.activeElement;if(!el||!el.hasAttribute('data-bid'))return null;return{el,bid:el.dataset.bid,idx:this.getIdx(el.dataset.bid)};},
|
||||
focusBlock(){const b=this.blocks[0];if(!b)return;const el=this.getEl(b.id);if(el){el.focus();ce(el);}},
|
||||
onCtClick(e){if(e.target===document.getElementById('_blocksCt')||e.target?.classList?.contains('blocks-empty')){if(!this.blocks.length)this.addAt(0);else{const b=this.blocks[this.blocks.length-1];const el=b&&this.getEl(b.id);if(el){el.focus();ce(el);}}}},
|
||||
|
||||
addAt(idx,type,content){const b=this.mkB(type||'paragraph',content||'');this.blocks.splice(idx,0,b);this.dirty=true;this.autoSave();requestAnimationFrame(()=>{const el=this.getEl(b.id);if(el&&type!=='divider'){el.focus();curEnd(el);}});return b;},
|
||||
// Sync DOM→data, render, add listeners
|
||||
sync(){const ct=document.getElementById('_blocksCt');if(!ct)return;for(const b of this.blocks){if(b.type==='divider')continue;const el=ct.querySelector(`[data-bid="${b.id}"]`);if(el)b.content=el.textContent||'';}},
|
||||
render(){const ct=document.getElementById('_blocksCt');if(!ct)return;let html='';for(let i=0;i<this.blocks.length;i++)html+=renderBlock(this.blocks[i],i);ct.innerHTML=html;
|
||||
ct.querySelectorAll('.block-wrapper').forEach(w=>{w.onmouseenter=()=>{w.querySelector('.block-handle')?.classList.add('visible');w.querySelector('.block-actions')?.classList.add('visible');};w.onmouseleave=()=>{w.querySelector('.block-handle')?.classList.remove('visible');w.querySelector('.block-actions')?.classList.remove('visible');};});
|
||||
// Update empty class: browser may insert <br> in contentEditable — strip and apply class
|
||||
ct.querySelectorAll('[data-placeholder]').forEach(el=>{el.innerHTML=el.innerHTML.replace(/<br[^>]*>/gi,'').trim()!==''?el.innerHTML:'';el.classList.toggle('empty',!el.textContent.trim());});
|
||||
},
|
||||
|
||||
addAt(idx,type,content){this.sync();const b=this.mkB(type||'paragraph',content||'');this.blocks.splice(idx,0,b);this.dirty=true;this.autoSave();this.render();setTimeout(()=>{const el=this.getEl(b.id);if(el&&type!=='divider'){el.focus();content&&ce(el);}},60);return b;},
|
||||
addAfter(idx,type){return this.addAt(idx+1,type);},
|
||||
|
||||
removeBlock(idx){
|
||||
if(this.blocks.length<=1){const b=this.blocks[0];b.type='paragraph';b.content='';const el=this.getEl(b.id);if(el)el.textContent='';this.dirty=true;this.autoSave();requestAnimationFrame(()=>{if(el)el.focus();});return;}
|
||||
this.blocks.splice(idx,1);const fi=Math.max(0,idx-1);this.dirty=true;this.autoSave();
|
||||
requestAnimationFrame(()=>{const el=this.getEl(this.blocks[fi]?.id);if(el){el.focus();curEnd(el);}});
|
||||
},
|
||||
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);},
|
||||
|
||||
// ── THE KEY HANDLER ──
|
||||
onKd(e,ct){
|
||||
const el=document.activeElement;
|
||||
if(!el||!el.hasAttribute('data-bid'))return;
|
||||
const bid=el.dataset.bid,idx=this.getIdx(bid);
|
||||
if(idx<0)return;
|
||||
const block=this.blocks[idx];
|
||||
// KEY HANDLER
|
||||
onKd(e){
|
||||
const ab=this.getActiveBlock();if(!ab)return;
|
||||
const{el,bid,idx}=ab;const block=this.blocks[idx];if(!block)return;
|
||||
|
||||
// Slash menu open
|
||||
if(SlashMenu.isOpen){
|
||||
if(e.key==='Escape'){e.preventDefault();SlashMenu.close();return;}
|
||||
if(e.key==='ArrowDown'||e.key==='ArrowUp'||e.key==='Enter'){e.preventDefault();SlashMenu._inp.dispatchEvent(new KeyboardEvent('keydown',{key:e.key,bubbles:true}));return;}
|
||||
if(e.key==='Backspace'&&!SlashMenu._q&&(el.textContent||'').trim()==='/'){e.preventDefault();SlashMenu.close();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;
|
||||
}
|
||||
|
||||
// After content keys, check for slash
|
||||
if(e.key.length===1||e.key==='Backspace'||e.key==='Delete'){
|
||||
const b2=bid;setTimeout(()=>{const e2=this.getEl(b2);if(e2&&e2.textContent?.trim()==='/'&&!SlashMenu.isOpen)SlashMenu.open(this.getIdx(b2),e2);},15);
|
||||
}
|
||||
// Slash detection — use idx, not bid (bid can get stale after render)
|
||||
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);}
|
||||
|
||||
// ENTER
|
||||
// ENTER: split block
|
||||
|
||||
// Markdown shortcuts on space — use idx
|
||||
if(e.key===' '){const i2=idx;setTimeout(()=>this.checkMd(i2),15);}
|
||||
|
||||
// ENTER: split block
|
||||
if(e.key==='Enter'){
|
||||
if(e.shiftKey){this.dirty=true;this.autoSave();return;}
|
||||
e.preventDefault();
|
||||
const text=el.textContent||'',pos=curPos(el),before=text.substring(0,pos),after=text.substring(pos);
|
||||
if(!before.trim()&&!after.trim()){const nt=(block.type==='bulleted_list'||block.type==='numbered_list'||block.type==='to_do')?block.type:'paragraph';this.addAt(idx+1,nt);return;}
|
||||
el.textContent=before;block.content=before;
|
||||
const text=el.textContent||'',pos=cp(el),before=text.substring(0,pos),after=text.substring(pos);
|
||||
if(!before.trim()&&!after.trim()){
|
||||
const nt=(block.type==='bulleted_list'||block.type==='numbered_list'||block.type==='to_do')?block.type:'paragraph';
|
||||
this.sync();this.blocks.splice(idx+1,0,this.mkB(nt,''));this.render();
|
||||
setTimeout(()=>{const ne=this.getEl(this.blocks[idx+1]?.id);if(ne){ne.focus();ce(ne);}},60);
|
||||
this.dirty=true;this.autoSave();return;
|
||||
}
|
||||
const nt=(block.type==='bulleted_list'||block.type==='numbered_list'||block.type==='to_do')?block.type:'paragraph';
|
||||
const nb=this.addAt(idx+1,nt,after);this.dirty=true;this.autoSave();
|
||||
requestAnimationFrame(()=>{const nel=this.getEl(nb.id);if(nel){nel.textContent=after;nel.focus();curStart(nel);}});
|
||||
return;
|
||||
this.sync();block.content=before;this.blocks.splice(idx+1,0,this.mkB(nt,after));this.render();
|
||||
setTimeout(()=>{const ne=this.getEl(this.blocks[idx+1]?.id);if(ne){ne.focus();cs(ne);}},60);
|
||||
this.dirty=true;this.autoSave();return;
|
||||
}
|
||||
|
||||
// ARROW UP
|
||||
if(e.key==='ArrowUp'){const pos=curPos(el);if(pos===0&&idx>0){e.preventDefault();const prev=this.getEl(this.blocks[idx-1]?.id);if(prev){prev.focus();curEnd(prev);}}return;}
|
||||
// ARROW DOWN
|
||||
if(e.key==='ArrowDown'){const pos=curPos(el),len=(el.textContent||'').length;if(pos>=len&&idx<this.blocks.length-1){e.preventDefault();const next=this.getEl(this.blocks[idx+1]?.id);if(next){next.focus();curStart(next);}}return;}
|
||||
// ARROWS
|
||||
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;}
|
||||
|
||||
// BACKSPACE
|
||||
if(e.key==='Backspace'){const text=el.textContent||'';if(!text.trim()){if(block.type!=='paragraph'){e.preventDefault();block.type='paragraph';block.content='';el.textContent='';this.dirty=true;this.autoSave();requestAnimationFrame(()=>el.focus());}else if(this.blocks.length>1){e.preventDefault();this.removeBlock(idx);}}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;}
|
||||
|
||||
// SPACE: check markdown
|
||||
if(e.key===' '){const b2=bid;setTimeout(()=>this.checkMd(b2),10);}
|
||||
// Markdown shortcuts on space
|
||||
if(e.key===' '){const b2=bid;setTimeout(()=>this.checkMd(b2),15);}
|
||||
|
||||
// Ctrl shortcuts
|
||||
if((e.ctrlKey||e.metaKey)&&!e.altKey){const m={b:'bold',i:'italic',u:'underline'};if(m[e.key]){e.preventDefault();document.execCommand(m[e.key]);this.dirty=true;this.autoSave();}}
|
||||
@@ -322,56 +200,48 @@ function editor(pid,title,fmt,raw){
|
||||
this.dirty=true;this.autoSave();
|
||||
},
|
||||
|
||||
checkMd(bid){
|
||||
const idx=this.getIdx(bid);if(idx<0)return;
|
||||
const block=this.blocks[idx],el=this.getEl(bid);if(!el)return;
|
||||
const text=el.textContent||'';
|
||||
const sc={'# ':'heading_1','## ':'heading_2','### ':'heading_3','- ':'bulleted_list','* ':'bulleted_list','+ ':'bulleted_list','1. ':'numbered_list','[] ':'to_do','[ ] ':'to_do','> ':'quote'};
|
||||
for(const[pfx,type] of Object.entries(sc)){if(text===pfx||text.startsWith(pfx)){block.type=type;block.content='';if(type==='toggle')block.expanded=true;if(type==='to_do')block.checked=false;this.dirty=true;this.autoSave();requestAnimationFrame(()=>{const nel=this.getEl(bid);if(nel){nel.textContent='';if(type!=='divider')nel.focus();}});return;}}
|
||||
if(text==='---'){block.type='divider';block.content='';this.addAfter(idx,'paragraph');this.dirty=true;this.autoSave();}
|
||||
if(text==='```'){block.type='code';block.content='';block.language='Plain Text';this.dirty=true;this.autoSave();requestAnimationFrame(()=>{const nel=this.getEl(bid);if(nel){nel.textContent='';nel.focus();}});}
|
||||
checkMd(idx){
|
||||
if(idx<0||idx>=this.blocks.length)return;const block=this.blocks[idx];const el=this.getEl(block.id);if(!el)return;const text=el.textContent||'';
|
||||
const sc={'# ':'heading_1','## ':'heading_2','### ':'heading_3','#### ':'heading_4','- ':'bulleted_list','* ':'bulleted_list','+ ':'bulleted_list','1. ':'numbered_list','[] ':'to_do','[ ] ':'to_do','> ':'quote'};
|
||||
this.sync();
|
||||
for(const[pfx,type] of Object.entries(sc)){if(text===pfx||text.startsWith(pfx)){block.type=type;block.content='';if(type==='toggle')block.expanded=true;if(type==='to_do')block.checked=false;this.render();setTimeout(()=>{const ne=this.getEl(block.id);if(ne&&type!=='divider')ne.focus();},60);return;}}
|
||||
if(text==='---'){block.type='divider';block.content='';this.addAfter(idx,'paragraph');}
|
||||
if(text==='```'){block.type='code';block.content='';block.language='Plain Text';this.render();setTimeout(()=>{const ne=this.getEl(block.id);if(ne)ne.focus();},60);}
|
||||
},
|
||||
|
||||
// ── Slash apply (called from SlashMenu.select) ──
|
||||
applySlash(id){
|
||||
const idx=SlashMenu._idx;
|
||||
if(idx<0||idx>=this.blocks.length)return;
|
||||
const block=this.blocks[idx],el=this.getEl(block.id);
|
||||
if(el)el.textContent='';block.content='';
|
||||
if(id==='divider'){block.type='divider';block.content='';this.addAfter(idx,'paragraph');}
|
||||
else{block.type=id;if(id==='toggle')block.expanded=true;if(id==='to_do')block.checked=false;if(id==='code')block.language='Plain Text';
|
||||
requestAnimationFrame(()=>{const nel=this.getEl(block.id);if(nel){nel.textContent='';nel.focus();}});}
|
||||
this.dirty=true;this.autoSave();
|
||||
const idx=SM._i;if(idx<0||idx>=this.blocks.length)return;
|
||||
const block=this.blocks[idx];this.sync();block.content='';
|
||||
if(id==='divider'){block.type='divider';this.addAfter(idx,'paragraph');}
|
||||
else{block.type=id;if(id==='toggle')block.expanded=true;if(id==='to_do')block.checked=false;if(id==='code')block.language='Plain Text';}
|
||||
this.render();this.dirty=true;this.autoSave();
|
||||
setTimeout(()=>{const ne=this.getEl(block.id);if(ne)ne.focus();},60);
|
||||
},
|
||||
|
||||
// ── Format toolbar ──
|
||||
_doToggle(bid,v){const idx=this.getIdx(bid);if(idx>=0){this.blocks[idx].checked=v;this.dirty=true;this.autoSave();}},
|
||||
_doToggleExpand(bid){const idx=this.getIdx(bid);if(idx>=0){this.blocks[idx].expanded=!this.blocks[idx].expanded;this.dirty=true;this.autoSave();}},
|
||||
|
||||
showFmt(idx){const s=window.getSelection();if(!s.rangeCount||s.isCollapsed){this.fmt.open=false;return;}const r=s.getRangeAt(0).getBoundingClientRect();this.fmt.open=true;this.fmt.idx=idx;this.fmt.top=Math.max(r.top-44,0);this.fmt.left=Math.min(r.left+r.width/2-120,window.innerWidth-260);this._sel={range:s.getRangeAt(0).cloneRange(),idx};},
|
||||
fmtApply(f){this.fmt.open=false;if(!this._sel)return;const s=window.getSelection();s.removeAllRanges();s.addRange(this._sel.range);document.execCommand(f==='strikeThrough'?'strikeThrough':f);this._sel=null;this.dirty=true;this.autoSave();},
|
||||
fmtLink(){this.fmt.open=false;const u=prompt('URL:');if(u){document.execCommand('createLink',false,u);this.dirty=true;this.autoSave();}},
|
||||
|
||||
dropImg(e,idx){const f=e.dataTransfer.files[0];if(f?.type?.startsWith('image/'))this.upFile(idx,f);},
|
||||
uploadImg(idx,e){if(e.target.files[0])this.upFile(idx,e.target.files[0]);},
|
||||
upFile(idx,file){const b=this.blocks[idx];const r=new FileReader();r.onload=ev=>{b.src=ev.target.result;this.dirty=true;this.autoSave();};r.readAsDataURL(file);},
|
||||
pastePlain(e){e.preventDefault();document.execCommand('insertText',false,(e.clipboardData||window.clipboardData).getData('text/plain'));this.dirty=true;this.autoSave();},
|
||||
|
||||
autoSave(){clearTimeout(this.st);this.st=setTimeout(()=>this.save(),1500);},
|
||||
save(){
|
||||
if(this.saving)return;
|
||||
const ct=document.getElementById('_blocksCt');
|
||||
for(const b of this.blocks){if(b.type==='divider')continue;const el=ct?ct.querySelector(`[data-bid="${b.id}"]:not(button):not(input)`):null;if(el)b.content=el.textContent||'';}
|
||||
const t=document.getElementById('_titleEl');if(t)this.pageTitle=t.textContent?.trim()||'Untitled';
|
||||
this.sync();
|
||||
const t=document.getElementById('_titleEl');if(t)this.pageTitle=t.textContent?.trim()||'New page';
|
||||
this.saving=true;
|
||||
const csrf=document.cookie.match(/csrf_token=([^;]+)/);
|
||||
fetch(`/board/api/pages/${this.pid}/blocks`,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-Token':csrf?csrf[1]:''},body:JSON.stringify({title:this.pageTitle,blocks:this.blocks.map(b=>{const c={id:b.id,type:b.type,content:b.content};['checked','expanded','language','icon','src','alt','style'].forEach(k=>{if(b[k]!=null)c[k]=b[k];});return c;})})})
|
||||
.then(r=>r.json()).then(()=>{this.saving=false;this.dirty=false;this.lastSaved=new Date().toLocaleTimeString();}).catch(()=>{this.saving=false;});
|
||||
},
|
||||
|
||||
md2b(md){const bl=[];let cb=null;for(const line of md.split('\n')){if(cb){if(line.trim()==='```'){bl.push(cb);cb=null;}else cb.content+=(cb.content?'\n':'')+line;continue;}const t=line.trim();if(!t)continue;if(t.startsWith('```')){cb=this.mkB('code','',{language:t.substring(3).trim()||'Plain Text'});continue;}if(t.startsWith('# ')&&!t.startsWith('## '))bl.push(this.mkB('heading_1',t.substring(2)));else if(t.startsWith('## ')&&!t.startsWith('### '))bl.push(this.mkB('heading_2',t.substring(3)));else if(t.startsWith('### '))bl.push(this.mkB('heading_3',t.substring(4)));else if(t==='---'||t==='***')bl.push(this.mkB('divider',''));else if(/^[-*+] /.test(t))bl.push(this.mkB('bulleted_list',t.substring(2)));else if(/^\d+\. /.test(t))bl.push(this.mkB('numbered_list',t.replace(/^\d+\. /,'')));else if(t.startsWith('- [ ] ')||t.startsWith('* [ ] '))bl.push(this.mkB('to_do',t.substring(6)));else if(t.startsWith('- [x] ')||t.startsWith('* [x] '))bl.push(this.mkB('to_do',t.substring(6),{checked:true}));else if(t.startsWith('> '))bl.push(this.mkB('quote',t.substring(2)));else bl.push(this.mkB('paragraph',t));}if(cb)bl.push(cb);return bl;},
|
||||
md2b(md){const bl=[];let cb=null;for(const line of md.split('\n')){if(cb){if(line.trim()==='```'){bl.push(cb);cb=null;}else cb.content+=(cb.content?'\n':'')+line;continue;}const t=line.trim();if(!t)continue;if(t.startsWith('```')){cb=this.mkB('code','',{language:t.substring(3).trim()||'Plain Text'});continue;}if(t.startsWith('# ')&&!t.startsWith('## '))bl.push(this.mkB('heading_1',t.substring(2)));else if(t.startsWith('## ')&&!t.startsWith('### '))bl.push(this.mkB('heading_2',t.substring(3)));else if(t.startsWith('### ')&&!t.startsWith('#### '))bl.push(this.mkB('heading_3',t.substring(4)));else if(t.startsWith('#### '))bl.push(this.mkB('heading_4',t.substring(5)));else if(t==='---'||t==='***')bl.push(this.mkB('divider',''));else if(/^[-*+] /.test(t))bl.push(this.mkB('bulleted_list',t.substring(2)));else if(/^\d+\. /.test(t))bl.push(this.mkB('numbered_list',t.replace(/^\d+\. /,'')));else if(t.startsWith('- [ ] ')||t.startsWith('* [ ] '))bl.push(this.mkB('to_do',t.substring(6)));else if(t.startsWith('- [x] ')||t.startsWith('* [x] '))bl.push(this.mkB('to_do',t.substring(6),{checked:true}));else if(t.startsWith('> '))bl.push(this.mkB('quote',t.substring(2)));else bl.push(this.mkB('paragraph',t));}if(cb)bl.push(cb);return bl;},
|
||||
};
|
||||
return self;
|
||||
}
|
||||
|
||||
// ── Global: selection → toolbar ──
|
||||
document.addEventListener('mouseup',()=>{setTimeout(()=>{const s=window.getSelection();if(!s||s.isCollapsed)return;const ed=document.querySelector('.page-editor-wrapper');if(!ed?.__x)return;const d=ed.__x.$data;const ct=document.getElementById('_blocksCt');if(!ct?.contains(s.anchorNode))return;const bel=s.anchorNode.parentElement?.closest('[data-bid]');if(bel){const idx=d.getIdx(bel.dataset.bid);if(idx>=0)d.showFmt(idx);}},80);});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
+22
-7
@@ -19,8 +19,10 @@
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #A0A0A0;
|
||||
--text-dim: #6B6B6B;
|
||||
--text-muted: #4A4A4A;
|
||||
|
||||
--border: #333333;
|
||||
--border-color: rgba(255,255,255,0.06);
|
||||
--border-light: #3a3a3a;
|
||||
|
||||
/* ===== Couleurs d'accent Notion ===== */
|
||||
@@ -70,7 +72,9 @@
|
||||
--text-primary: #1A1A1A;
|
||||
--text-secondary: #6B6B6B;
|
||||
--text-dim: #9B9B9B;
|
||||
--text-muted: #B0B0B0;
|
||||
--border: #E0E0E0;
|
||||
--border-color: rgba(0,0,0,0.06);
|
||||
--border-light: #EDEDEC;
|
||||
--blue-bg: #E8F0FE;
|
||||
--green-bg: #E6F4EA;
|
||||
@@ -1511,8 +1515,6 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Page title area */
|
||||
@@ -1560,7 +1562,6 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
min-height: 300px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.blocks-empty {
|
||||
@@ -1674,10 +1675,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
min-height: 28px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.block-content:empty::before {
|
||||
.block-content.empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: #9B9A97;
|
||||
pointer-events: none;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
@@ -1700,6 +1702,16 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
padding: 4px 2px 2px;
|
||||
}
|
||||
|
||||
.block-h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
padding: 4px 2px 2px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Bulleted list */
|
||||
.block-bullet {
|
||||
padding-left: 18px;
|
||||
@@ -1743,10 +1755,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
min-height: 26px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.block-todo div:empty::before {
|
||||
.block-content.empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: #9B9A97;
|
||||
pointer-events: none;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Toggle */
|
||||
@@ -1783,10 +1796,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
min-height: 26px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.block-toggle div:empty::before {
|
||||
.block-content.empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: #9B9A97;
|
||||
pointer-events: none;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Quote */
|
||||
@@ -1860,10 +1874,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
|
||||
line-height: 1.6;
|
||||
min-height: 24px;
|
||||
}
|
||||
.block-callout div:empty::before {
|
||||
.block-content.empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: #9B9A97;
|
||||
pointer-events: none;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Image block */
|
||||
|
||||
Reference in New Issue
Block a user