/* taxonomy-ok: organism — composes QuickLookFrame, FullscreenOverlay, Input, Textarea, ViewToggle, Button and KindPreview into one editing surface. */
import { useEffect, useMemo, useRef, useState } from 'react'
import Button from '../atoms/Button.jsx'
import Input from '../atoms/Input.jsx'
import Textarea from '../atoms/Textarea.jsx'
import ViewToggle from '../atoms/ViewToggle.jsx'
import QuickLookFrame from '../molecules/QuickLookFrame.jsx'
import KindPreview from '../molecules/KindPreview.jsx'
import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
import { splitFrontmatter, joinFrontmatter } from '@kolkrabbi/kol-markdown'
import { readDraft, writeDraft, clearDraft } from '../utilities/localDrafts.js'
/**
* DocumentEditor — Open or write a text file. write a text file: open one, or make a new one (media D1 plan v2, 2026-09-26).
*
* The concept is kol-olina's brand notes page (NoteEdit): a title, a markdown body, Write / Preview,
* attachments from the bucket, a page for writing something NEW rather than a button hidden in a
* list. Here the document is a FILE in the bucket, so it takes any text kind, and a markdown file's
* frontmatter gets a form instead of a YAML fence to hand-edit.
*
* markdown a FIELDS form (title · description · date · tags suggested, any key allowed) over
* the body; Write · Split · Preview; Attach inserts a bucket file as a link / image
* svg text with a live picture beside it
* the rest text (json · yaml · csv · txt · code) with Split / Preview through KindPreview
*
* TWO TIERS, as NoteEdit had them: the DRAFT is browser memory (`localDrafts`, every pause, no
* network — the user's ruling), the SAVE is explicit (`onSave` / ⌘S). A draft is restored only if it
* is newer than the saved file (`savedAt`), so a file saved since is never overwritten by an old
* draft. Revert drops the draft.
*
* @param {'edit'|'new'} mode `new` shows the name + type row and calls `onCreate`
* @param {string} name the file's name (edit) or a starting name (new)
* @param {string} kind markdown · text · json · yaml · code · svg (edit); new picks it
* @param {string} text the saved text; `null` while it loads
* @param {number} savedAt epoch ms of the saved file — a draft older than this is ignored; `null` = never
* saved (a blank note, 2026-09-29) and the status says so instead of "Saved"
* @param {Object} draft `{ bucket, key }` — where the draft lives; omit for no drafts
* @param {Function} onSave `(text) => Promise` — edit mode
* @param {Function} onCreate `({ name, text }) => Promise` — new mode; the name carries the extension
* @param {string} folder new mode: where the file will be made (shown, not edited)
* @param {Array} assets `[{ key, name, url, contentType }]` — the files markdown's Attach offers; a
* searchable list inside the editor inserts the pick at the caret
* @param {Function} onPickAsset `() => Promise<{ name, url, contentType } | null>` — a consumer's own picker instead
* @param {Function} onClose
* @param {boolean} inline render IN the page, filling its container, instead of over it (the notes
* page, media-hub 2026-09-26: the editor is the page's content there,
* not a window over a list). No scrim, no Escape-to-close; the X still closes
*/
const TYPES = [
{ value: 'md', label: 'MD', kind: 'markdown' },
{ value: 'txt', label: 'TXT', kind: 'text' },
{ value: 'json', label: 'JSON', kind: 'json' },
{ value: 'yaml', label: 'YAML', kind: 'yaml' },
{ value: 'csv', label: 'CSV', kind: 'text' },
]
const today = () => new Date().toISOString().slice(0, 10)
const STARTER = {
md: (title) => joinFrontmatter([['title', title], ['date', today()], ['tags', []]], `\n# ${title}\n\n`),
txt: () => '',
json: () => '{\n \n}\n',
yaml: () => '',
csv: () => 'name,value\n',
}
/* the keys a document usually carries, offered as one-click rows — any other key is typed */
const SUGGESTED = ['title', 'description', 'date', 'tags']
const DRAFT_PAUSE = 400 // browser memory is free — a short pause, not D1's write budget
export default function DocumentEditor({
mode = 'edit', name: nameProp = '', kind: kindProp, text, savedAt = 0, draft,
onSave, onCreate, folder = '', assets, onPickAsset, onClose,
inline = false,
}) {
const [picking, setPicking] = useState(false)
const [pickQuery, setPickQuery] = useState('')
const isNew = mode === 'new'
const [name, setName] = useState(isNew ? (nameProp || 'untitled') : nameProp)
const [type, setType] = useState('md')
const kind = isNew ? TYPES.find((t) => t.value === type).kind : kindProp
const [value, setValue] = useState(null)
const [base, setBase] = useState(null)
const [status, setStatus] = useState(isNew ? 'Not created yet' : 'Loading…')
const [view, setView] = useState(kind === 'markdown' || kind === 'svg' ? 'split' : 'write')
const timer = useRef(null)
const bodyRef = useRef(null)
const latest = useRef('')
/* load: the saved text, or a newer draft; a new document starts from its type's starter */
useEffect(() => {
if (isNew) {
const d = draft ? readDraft(draft.bucket, draft.key) : null
const start = d?.text ?? STARTER.md(name)
setValue(start); latest.current = start; setBase('')
if (d) setStatus('Draft restored')
return
}
if (text == null) return
const d = draft ? readDraft(draft.bucket, draft.key) : null
const useDraft = d && d.at > (savedAt ?? 0) && d.text !== text
setBase(text)
setValue(useDraft ? d.text : text); latest.current = useDraft ? d.text : text
setStatus(useDraft ? 'Draft restored — not saved to the file' : savedAt === null ? 'Not saved yet' : 'Saved')
if (d && !useDraft && draft) clearDraft(draft.bucket, draft.key)
}, [text]) // eslint-disable-line react-hooks/exhaustive-deps
const flush = () => {
if (timer.current == null || !draft) return
clearTimeout(timer.current); timer.current = null
if (latest.current === base && !isNew) clearDraft(draft.bucket, draft.key)
else writeDraft(draft.bucket, draft.key, latest.current)
}
useEffect(() => () => flush(), []) // eslint-disable-line react-hooks/exhaustive-deps
const change = (next) => {
setValue(next); latest.current = next
setStatus(isNew ? 'Not created yet' : next === base ? (savedAt === null ? 'Not saved yet' : 'Saved') : 'Edited — not saved')
clearTimeout(timer.current)
timer.current = setTimeout(flush, DRAFT_PAUSE)
}
const dirty = value != null && (isNew || value !== base)
const save = async () => {
if (!dirty) return
clearTimeout(timer.current); timer.current = null
setStatus(isNew ? 'Creating…' : 'Saving…')
try {
if (isNew) {
const file = name.trim().replace(/\.[^./]+$/, '') || 'untitled'
await onCreate?.({ name: `${file}.${type}`, text: latest.current })
} else {
await onSave?.(latest.current)
setBase(latest.current)
}
if (draft) clearDraft(draft.bucket, draft.key)
setStatus('Saved')
} catch (e) { setStatus(`Not saved: ${e.message}`) }
}
const revert = () => {
clearTimeout(timer.current); timer.current = null
if (draft) clearDraft(draft.bucket, draft.key)
const back = isNew ? STARTER[type](name) : base
setValue(back); latest.current = back; setStatus(isNew ? 'Not created yet' : 'Saved')
}
/* ⌘S anywhere while the editor is open */
const saveRef = useRef(save)
saveRef.current = save
useEffect(() => {
const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') { e.preventDefault(); saveRef.current() } }
window.addEventListener('keydown', onKey)
return () => window.removeEventListener('keydown', onKey)
}, [])
/* markdown: the fields form and the body are one text, split for editing and joined on change */
const md = kind === 'markdown'
const parts = useMemo(() => (md && value != null ? splitFrontmatter(value) : null), [md, value])
const setFields = (fields) => change(joinFrontmatter(fields, parts.body))
const setBody = (body) => change(parts.has || parts.fields.length ? joinFrontmatter(parts.fields, body) : body)
const insertAsset = (a) => {
const link = (a.contentType ?? '').startsWith('image/') ? `` : `[${a.name}](${a.url})`
const el = bodyRef.current?.querySelector('textarea')
const body = parts.body
const at = el ? el.selectionStart : body.length
setBody(`${body.slice(0, at)}${link}${body.slice(at)}`)
setPicking(false)
}
const attach = async () => {
if (!onPickAsset) { setPicking((p) => !p); return }
const a = await onPickAsset()
if (a) insertAsset(a)
}
/* images first — Attach is mostly "put this picture in the document" */
const pickList = (assets ?? [])
.filter((a) => !pickQuery || a.key.toLowerCase().includes(pickQuery.toLowerCase()))
.sort((a, b) => Number(!(a.contentType ?? '').startsWith('image/')) - Number(!(b.contentType ?? '').startsWith('image/')) || a.key.localeCompare(b.key))
.slice(0, 60)
/* THE NAME CARRIES THE TITLE while the title is still the starter's — the first thing typed names
* both, as NoteEdit's title named the note; once the title is edited it is left alone */
const rename = (next) => {
const was = name
setName(next)
if (!md || !parts) return
const title = parts.fields.find(([k]) => k.toLowerCase() === 'title')
if (!title || title[1] !== was) return
const heading = `# ${was}`
const body = parts.body.startsWith(`\n${heading}`) || parts.body.startsWith(heading) ? parts.body.replace(heading, `# ${next}`) : parts.body
change(joinFrontmatter(parts.fields.map(([k, v]) => (k === title[0] ? [k, next] : [k, v])), body))
}
const close = () => { flush(); onClose?.() }
const views = [{ value: 'write', label: 'Write' }, { value: 'split', label: 'Split' }, { value: 'preview', label: 'Preview' }]
const preview = value == null ? null : kind === 'svg'
?
:
const frame = (
{md && (onPickAsset || assets?.length > 0) && }
{!isNew && value !== base && value != null && }
)}>
{/* the window's own caps, inline — Tailwind does not generate arbitrary values from package source */}