mirror of
https://github.com/priyanshujain/margin.git
synced 2026-10-02 11:07:04 +00:00
feat(editor): add TipTap semantic editor
This commit is contained in:
1 parent
c76e5b0a5f
commit
3cf07d4ef6
2 files changed
+35
No files matched your search
@@ -0,0 +1,24 @@
|
||||
import { EditorContent, useEditor } from "@tiptap/react";
|
||||
import type { JSONContent } from "@tiptap/core";
|
||||
import { editorExtensions } from "./extensions";
|
||||
|
||||
interface EditorProps {
|
||||
chapterId: string;
|
||||
content: JSONContent;
|
||||
onChange: (content: JSONContent) => void;
|
||||
}
|
||||
|
||||
export function Editor({ chapterId, content, onChange }: EditorProps) {
|
||||
const editor = useEditor(
|
||||
{
|
||||
extensions: editorExtensions,
|
||||
content,
|
||||
autofocus: "start",
|
||||
editorProps: { attributes: { class: "prose" } },
|
||||
onUpdate: ({ editor }) => onChange(editor.getJSON()),
|
||||
},
|
||||
[chapterId]
|
||||
);
|
||||
|
||||
return <EditorContent editor={editor} className="editor-host" />;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { Extensions } from "@tiptap/core";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import Placeholder from "@tiptap/extension-placeholder";
|
||||
|
||||
export const editorExtensions: Extensions = [
|
||||
StarterKit.configure({
|
||||
heading: { levels: [2, 3] },
|
||||
codeBlock: false,
|
||||
}),
|
||||
Placeholder.configure({ placeholder: "Begin your chapter…" }),
|
||||
];
|
||||
Reference in new issue
Block a user