mirror of
https://github.com/priyanshujain/margin.git
synced 2026-10-02 19:17:03 +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