Refined UI

An opinionated, customizable superset of shadcn/ui

AgentsPrimitivesSkillsSkins
Guides
  • Overview
  • Get started
  • Shadcn compatibility
  • Architecture
  • Agent surface
Primitives
  • Accordion
  • Alert
  • Alert dialog
  • Aspect ratio
  • Autocomplete
  • Avatar
  • Badge
  • Button
  • Button group
  • Calendar
  • Card
  • Checkbox
  • Checkbox Group
  • Code
  • Code Diff
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Date Picker
  • Dialog
  • Drawer
  • Empty
  • Field
  • Form
  • Gradient Editor
  • Hover card
  • Input
  • Input group
  • Input OTP
  • Item
  • Kbd
  • Markdown
  • Menu
  • Menubar
  • Meter
  • Native select
  • Navigation menu
  • Number Field
  • Pagination
  • Popover
  • Progress
  • Radio group
  • Resizable
  • Scroll area
  • Select
  • Sidebar
  • Skeleton
  • Slider
  • Spinner
  • Switch
  • Table
  • Table of contents
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • Toolbar
  • Tooltip
  • Tree
  • Trigger Menu
  • Typography
Hooks
  • Use Chat Message
  • Use Chat Input
  • Use User Ask
  • Use Audio Recorder
  • Use Environment Variables
  • Use Copy To Clipboard
  • Use Tool Call
  • Use Sidebar Resize
Utils
  • cn
  • Skin
  • Contracts
  • Serialize
Extensions
  • Control Effects
  • View Transition
  • Send Aurora
  1. Reference
  2. serialize
Utils

serialize

Bridge a rich editor doc to plain text (and structured mentions) and back — independent of any one component.

Preview

Standalone, independent of any one component

Installed to components/refined-ui/chat-input-editor/serialize.ts with the ChatInput rich editor, so the shared helper stays in one place.

Source

Installed util source

Serializer
src/registry/sources/refined/chat-input-editor/serialize.ts
import type { Node as ProseMirrorNode, Schema } from "prosemirror-model";
​
// Doc is source of truth; these bridge it to chat-input hook's plain-string value (canSubmit/consumers) and back for external resets (clear, edit-prefill).
// serializeDoc is generic — no mention knowledge; each leaf serializes via its own schema leafText (mention sets "@label"), so extensions stay self-describing.
​
// Doc → plain text. Blocks join with "\n"; each leaf contributes its schema `leafText` (empty if none).
export function serializeDoc(doc: ProseMirrorNode): string {
return doc.textBetween(0, doc.content.size, "\n", (leaf) => {
const leafText = leaf.type.spec.leafText;
return typeof leafText === "function" ? leafText(leaf) : "";
});
}
​
// Plain string → doc, one paragraph per line. Used only for external resets (editor never rebuilds its doc from its own output — would fight caret).
export function docFromText(schema: Schema, text: string): ProseMirrorNode {
const paragraph = schema.nodes.paragraph;
const blocks = text.split("\n").map((line) => paragraph.create(null, line === "" ? null : schema.text(line)));
return schema.nodes.doc.create(null, blocks.length === 0 ? paragraph.create() : blocks);
}
​

On this page

  • Installation
  • Source
Rich editor doc → plain text
Live serialized text (editor value)
Draft the launch plan with the team
Last submitted payload
Press Serialize to capture { text, mentions }