packages/tiptap/README.md
Opinionated Tiptap wrapper with preconfigured extensions, styles, and editor components.
| Export | Description |
|---|---|
@hypr/tiptap/editor | Document editor with mentions, file handling, keyboard navigation, and debounced updates. |
@hypr/tiptap/chat | Chat editor with Enter-to-submit, slash commands, and mentions. |
@hypr/tiptap/prompt | Jinja-aware prompt template editor built on CodeMirror. |
@hypr/tiptap/shared)All presets pull from the same extension bundle:
json2md / md2json), content validation, clipboard serialization@hypr/tiptap/styles.css)@import "@hypr/tiptap/styles.css";
One import, styles every node type.
import Editor from "@hypr/tiptap/editor";
import "@hypr/tiptap/styles.css";
function NotePage() {
return (
<Editor
initialContent={doc}
editable={true}
handleChange={(content) => save(content)}
placeholderComponent={({ node }) =>
node.type.name === "paragraph" ? "Start writing..." : ""
}
/>
);
}
import ChatEditor from "@hypr/tiptap/chat";
import "@hypr/tiptap/styles.css";
function ChatInput() {
const ref = useRef(null);
return (
<ChatEditor
ref={ref}
editable={true}
onSubmit={() => send(ref.current?.editor?.getJSON())}
slashCommandConfig={{
handleSearch: (query) => searchCommands(query),
}}
/>
);
}
import { PromptEditor } from "@hypr/tiptap/prompt";
function TemplateEditor() {
return (
<PromptEditor
value={template}
onChange={setTemplate}
variables={["name", "context"]}
filters={["upper", "truncate"]}
placeholder="Write your prompt template..."
/>
);
}
import {
json2md,
md2json,
isValidTiptapContent,
parseJsonContent,
extractHashtags,
EMPTY_TIPTAP_DOC,
} from "@hypr/tiptap/shared";
const markdown = json2md(tiptapJson);
const json = md2json("# Hello\n\nWorld");
if (isValidTiptapContent(data)) {
editor.commands.setContent(data);
}
const tags = extractHashtags(htmlString);