Some checks failed
Gitea Actions Demo / Explore-Gitea-Actions (push) Failing after 0s
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
"use client";
|
|
import "./styles.css";
|
|
import {
|
|
EditorContent,
|
|
EditorRoot,
|
|
handleCommandNavigation,
|
|
JSONContent,
|
|
} from "novel";
|
|
import { defaultExtensions } from "./extentions";
|
|
import { SlashCommandComponent } from "./extentions/slash-commands/slash-command-component";
|
|
import BubbleMenu from "./menu/bubble-menu";
|
|
import { MenuBar } from "./menu/menu-bar";
|
|
|
|
const Editor = ({
|
|
onContentChange,
|
|
initialContent,
|
|
readOnly,
|
|
}: {
|
|
initialContent: JSONContent | null;
|
|
onContentChange?: (content: JSONContent) => void;
|
|
readOnly?: boolean;
|
|
}) => {
|
|
return (
|
|
<EditorRoot>
|
|
<EditorContent
|
|
slotBefore={!readOnly && <MenuBar />}
|
|
extensions={defaultExtensions}
|
|
editorProps={{
|
|
handleDOMEvents: {
|
|
keydown: (_view, event) => handleCommandNavigation(event),
|
|
},
|
|
}}
|
|
editable={!readOnly}
|
|
initialContent={initialContent ?? { type: "doc" }}
|
|
onUpdate={({ editor }) => {
|
|
onContentChange?.(editor.getJSON());
|
|
}}
|
|
>
|
|
<SlashCommandComponent />
|
|
|
|
<BubbleMenu />
|
|
</EditorContent>
|
|
</EditorRoot>
|
|
);
|
|
};
|
|
export default Editor;
|