website/client/src/components/RichTextEditor.jsx

import { useEffect, useRef, useState } from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import { api } from '../api/client.js'

// Toolbar button.
function Btn({ onClick, active, disabled, title, children }) {
  return (
    <button
      type="button"
      title={title}
      onMouseDown={(e) => e.preventDefault()} // keep editor selection
      onClick={onClick}
      disabled={disabled}
      className={`rte-btn${active ? ' is-active' : ''}`}
    >
      {children}
    </button>
  )
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[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: [
      StarterKit.configure({ heading: { levels: [2, 3] } }),
      Link.configure({ openOnClick: false, autolink: true }),
      Image.configure({ inline: false }),
    ],
    content: value || '',
    onUpdate: ({ editor }) => onChange(editor.getHTML()),
  })

  // Safety net: sync if the parent resets `value` externally (won't fire during
  // normal typing because the parent value equals what the editor just emitted).
  useEffect(() => {
    if (!editor) return
    if (value != null && value !== editor.getHTML()) {
      editor.commands.setContent(value, false)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value, editor])

  if (!editor) return null

  function setLink() {
    const prev = editor.getAttributes('link').href || ''
    const url = window.prompt('Link URL (leave blank to remove)', prev)
    if (url === null) return
    if (url === '') return editor.chain().focus().extendMarkRange('link').unsetLink().run()
    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
    if (!file) return
    setUploading(true)
    try {
      const { url } = await api.admin.upload(file)
      editor.chain().focus().setImage({ src: url, alt: file.name }).run()
    } catch (err) {
      alert(err.message || 'Image upload failed.')
    } finally {
      setUploading(false)
    }
  }

  return (
    <div className="rte">
      <div className="rte-toolbar">
        <Btn title="Bold" active={editor.isActive('bold')} onClick={() => editor.chain().focus().toggleBold().run()}>
          <b>B</b>
        </Btn>
        <Btn title="Italic" active={editor.isActive('italic')} onClick={() => editor.chain().focus().toggleItalic().run()}>
          <i>I</i>
        </Btn>
        <Btn title="Strikethrough" active={editor.isActive('strike')} onClick={() => editor.chain().focus().toggleStrike().run()}>
          <s>S</s>
        </Btn>
        <span className="rte-sep" />
        <Btn title="Heading 2 (table of contents)" active={editor.isActive('heading', { level: 2 })} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>
          H2
        </Btn>
        <Btn title="Heading 3" active={editor.isActive('heading', { level: 3 })} onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}>
          H3
        </Btn>
        <span className="rte-sep" />
        <Btn title="Bullet list" active={editor.isActive('bulletList')} onClick={() => editor.chain().focus().toggleBulletList().run()}>
          • List
        </Btn>
        <Btn title="Numbered list" active={editor.isActive('orderedList')} onClick={() => editor.chain().focus().toggleOrderedList().run()}>
          1. List
        </Btn>
        <Btn title="Quote" active={editor.isActive('blockquote')} onClick={() => editor.chain().focus().toggleBlockquote().run()}>
          ❝
        </Btn>
        <Btn title="Code block" active={editor.isActive('codeBlock')} onClick={() => editor.chain().focus().toggleCodeBlock().run()}>
          {'</>'}
        </Btn>
        <Btn title="Divider" onClick={() => editor.chain().focus().setHorizontalRule().run()}>
          —
        </Btn>
        <span className="rte-sep" />
        <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>
        <span className="rte-sep" />
        <Btn title="Undo" disabled={!editor.can().undo()} onClick={() => editor.chain().focus().undo().run()}>
          ↶
        </Btn>
        <Btn title="Redo" disabled={!editor.can().redo()} onClick={() => editor.chain().focus().redo().run()}>
          ↷
        </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>
  )
}