"use client";
import "./styles/editor.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
        immediatelyRender={false}
        className="editor"
        slotBefore={!readOnly && <MenuBar />}
        extensions={defaultExtensions}
        editorProps={{
          attributes: {
            class: !readOnly ? "min-h-screen " : "",
          },
          handleDOMEvents: {
            keydown: (_view, event) => handleCommandNavigation(event),
          },
        }}
        editable={!readOnly}
        initialContent={initialContent ?? { type: "doc" }}
        onUpdate={({ editor }) => {
          onContentChange?.(editor.getJSON());
        }}
      >
        <SlashCommandComponent />

        <BubbleMenu />
      </EditorContent>
    </EditorRoot>
  );
};
export default Editor;