Editor

Descriptions and documents

import { Editor } from "@revido-llc/kit/editor";
<Editor aria-label="Description" defaultMarkdown={legacyMarkdown} onChange={({ json, markdown }) => save({ json, markdown })} />

References

One @ search groups People, Docs, Issues and Projects. Each source controls its search row, inline chip and link target.

import { Editor, type ReferenceSource } from "@revido-llc/kit/editor";
const usersSource: ReferenceSource = {
  id: "user", label: "People",
  search: (query, { signal }) => api.searchPeople(query, { signal }),
  renderItem: (item) => <PersonRow person={item} />,
  renderChip: (item) => <PersonChip name={item.label} />,
  href: (item) => `/people/${item.id}`,
};
<Editor aria-label="Description" sources={[usersSource, docsSource, issuesSource, projectsSource]} />

Per-project setup

Share one registry across a project's document and comment editors. Dedicated # and [[ triggers search Issues and Docs; @ searches People and Projects.

import { Editor, EditorComposer, EditorProvider } from "@revido-llc/kit/editor";
const projectSources = [
  usersSource,
  { ...docsSource, trigger: "[[" },
  { ...issuesSource, trigger: "#" },
  projectsSource,
];
<EditorProvider sources={projectSources}>
  <Editor aria-label="Project document" value={document} />
  <EditorComposer aria-label="Comment" value={draft} onSubmit={send} />
</EditorProvider>

Inline images

Paste, drop or choose images with /image. This fixture uploader reports progress and resolves after 800ms; selection, alt text, caption and resize remain in the editor.

import { Editor } from "@revido-llc/kit/editor";
<Editor aria-label="Description" onUploadImage={async (file, { onProgress }) => {
  const image = await storage.uploadImage(file, { onProgress });
  return { src: image.url, alt: file.name, width: image.width, height: image.height };
}} />

Private media

The document keeps a durable storage path. This demo denies access and shows the neutral placeholder; your app resolves authorized paths to signed display URLs.

import { Editor, EditorProvider } from "@revido-llc/kit/editor";
<EditorProvider resolveMediaSrc={(src, { kind, signal }) => storage.signAuthorizedMedia(src, { kind, signal })}>
  <Editor aria-label="Description" onUploadImage={async (file, { onProgress }) => {
    const media = await storage.uploadImage(file, { onProgress });
    return { src: media.path, displaySrc: media.signedUrl, alt: file.name };
  }} />
</EditorProvider>
// Signed display URLs stay in the session; JSON and Markdown retain media.path.

Image upload failure and retry

The demo fails each file's first attempt. Its inline Retry reuses the file; Remove discards the placeholder.

import { Editor } from "@revido-llc/kit/editor";
<Editor aria-label="Description" onUploadImage={async (file, { onProgress }) => {
  // Throw on failure; the editor keeps the file for Retry and Remove.
  return storage.uploadImage(file, { onProgress });
}} />

Video embeds and upload

Paste a YouTube, Vimeo or Loom URL on its own line for a privacy-friendly embed. /video accepts a URL or a file when onUploadVideo is configured.

import { Editor } from "@revido-llc/kit/editor";
<Editor aria-label="Description" onUploadVideo={async (file, { onProgress }) => {
  const video = await storage.uploadVideo(file, { onProgress });
  return { src: video.url, alt: file.name };
}} />
// JSON stores video nodes; derived Markdown uses a fenced video directive
// containing JSON attributes so agent edits round-trip hosted and uploaded videos.

Comment composer

import { EditorComposer } from "@revido-llc/kit/editor";
<EditorComposer aria-label="Comment" sources={projectSources} value={draft} onChange={({ json }) => setDraft(json)} onSubmit={send} storageKey="comment-height" footer={{ left: <InternalOnly />, right: <Send /> }} />

Compact record comment

Rest, focus, retained draft and dark states. One centred 20px line on a subtle sunken surface; the ghost send becomes primary for content, and focus reveals tools beneath it.

import { EditorComposer } from "@revido-llc/kit/editor";
<EditorComposer size="compact" aria-label="Comment" value={draft} onChange={({ json }) => setDraft(json)} onSubmit={send} sendAction={{ onPress: send, loading: sending }} storageKey="record-comment-height" footer={{ left: <InternalOnly /> }} />

Read-only with identity links and anchors

import { EditorProvider, EditorReadOnly } from "@revido-llc/kit/editor";
<EditorProvider sources={projectSources}>
  <EditorReadOnly value={record.description_json} markdown={record.description} />
</EditorProvider>

Portable description

A literal Markdown seed composes without application callbacks or reference sources.

import { Editor } from "@revido-llc/kit/editor";
<Editor aria-label="Portable description" defaultMarkdown="Write the delivery plan here." />

Portable composer

import { EditorComposer } from "@revido-llc/kit/editor";
<EditorComposer aria-label="Portable comment" defaultMarkdown="Please review the plan." />

Portable read-only document

import { EditorReadOnly } from "@revido-llc/kit/editor";
<EditorReadOnly value={{ type: "doc", content: [{ type: "paragraph", attrs: { blockId: "summary" }, content: [{ type: "text", text: "Delivery is ready for review." }] }] }} />