Wiki Phase 3: internal links, backlinks, and tags
Connectivity phase of the wiki upgrade (see WIKI_UPGRADE.md). Schema (additive new tables): wiki_tags, wiki_page_tags, wiki_links. Internal links & backlinks: - new wiki.links.js parses a saved body for /wiki/<slug> (and data-wiki-slug) targets; wiki_links is rebuilt on every save - article shows a "Linked from" section (published backlinks) and renders links to non-existent pages as red links (server returns missing_links) - editor gains an internal-link picker listing existing pages Tags: - pages accept a tags[] array; tags upsert on save, page tag-set is replaced, and orphaned tags are auto-pruned (on save and delete) - public/admin list filter by ?tag=; /wiki/tags lists tags with published counts - article shows tag chips; the index has a flat tag-filtered view; editor has a comma-separated tags field Verified end-to-end: A->B backlink appears, red link detected, link index rebuilds on edit, tag filtering + chips + pruning all work. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -21,9 +21,15 @@ function Btn({ onClick, active, disabled, title, children }) {
|
||||
)
|
||||
}
|
||||
|
||||
export default function RichTextEditor({ value, onChange }) {
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"' })[c])
|
||||
}
|
||||
|
||||
export default function RichTextEditor({ value, onChange, pages = [] }) {
|
||||
const fileRef = useRef(null)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [linkMenu, setLinkMenu] = useState(false)
|
||||
const [linkFilter, setLinkFilter] = useState('')
|
||||
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
@@ -55,6 +61,17 @@ export default function RichTextEditor({ value, onChange }) {
|
||||
editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
|
||||
}
|
||||
|
||||
function insertInternalLink(page) {
|
||||
const { from, to } = editor.state.selection
|
||||
if (from === to) {
|
||||
editor.chain().focus().insertContent(`<a href="/wiki/${page.slug}">${escapeHtml(page.title)}</a> `).run()
|
||||
} else {
|
||||
editor.chain().focus().extendMarkRange('link').setLink({ href: `/wiki/${page.slug}` }).run()
|
||||
}
|
||||
setLinkMenu(false)
|
||||
setLinkFilter('')
|
||||
}
|
||||
|
||||
async function onPickImage(e) {
|
||||
const file = e.target.files?.[0]
|
||||
e.target.value = '' // allow re-selecting the same file
|
||||
@@ -109,6 +126,9 @@ export default function RichTextEditor({ value, onChange }) {
|
||||
<Btn title="Link" active={editor.isActive('link')} onClick={setLink}>
|
||||
🔗
|
||||
</Btn>
|
||||
<Btn title="Link to another wiki page" disabled={pages.length === 0} onClick={() => setLinkMenu((v) => !v)}>
|
||||
📄
|
||||
</Btn>
|
||||
<Btn title="Insert image" disabled={uploading} onClick={() => fileRef.current?.click()}>
|
||||
{uploading ? '…' : '🖼'}
|
||||
</Btn>
|
||||
@@ -121,6 +141,32 @@ export default function RichTextEditor({ value, onChange }) {
|
||||
</Btn>
|
||||
</div>
|
||||
|
||||
{linkMenu && (
|
||||
<div className="rte-linkmenu">
|
||||
<input
|
||||
autoFocus
|
||||
className="input"
|
||||
placeholder="Filter pages…"
|
||||
value={linkFilter}
|
||||
onChange={(e) => setLinkFilter(e.target.value)}
|
||||
/>
|
||||
<div className="rte-linkmenu-list">
|
||||
{pages
|
||||
.filter((p) => {
|
||||
const q = linkFilter.trim().toLowerCase()
|
||||
return !q || p.title.toLowerCase().includes(q) || p.slug.includes(q)
|
||||
})
|
||||
.slice(0, 30)
|
||||
.map((p) => (
|
||||
<button key={p.slug} type="button" className="rte-linkmenu-item" onClick={() => insertInternalLink(p)}>
|
||||
<span>{p.title}</span>
|
||||
<span className="rte-linkmenu-slug">/{p.slug}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<EditorContent editor={editor} className="rte-content prose" />
|
||||
<input ref={fileRef} type="file" accept="image/*" onChange={onPickImage} hidden />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user