standardize naming convention

packages/novel/src/ui/editor/components/bubble-menu.tsx → packages/novel/src/ui/editor/bubble-menu/index.tsx

@@ -7,7 +7,6 @@ import {
   StrikethroughIcon,
   CodeIcon,
 } from "lucide-react";
-
 import { NodeSelector } from "./node-selector";
 import { ColorSelector } from "./color-selector";
 import { LinkSelector } from "./link-selector";

packages/novel/src/ui/editor/components/node-selector.tsx → packages/novel/src/ui/editor/bubble-menu/node-selector.tsx

@@ -13,7 +13,7 @@ import {
 } from "lucide-react";
 import * as Popover from "@radix-ui/react-popover";
 import { Dispatch, FC, SetStateAction } from "react";
-import { BubbleMenuItem } from "./bubble-menu";
+import { BubbleMenuItem } from ".";
 
 interface NodeSelectorProps {
   editor: Editor;

packages/novel/src/ui/editor/default-content.tsx

@@ -1,4 +1,4 @@
-const DEFAULT_EDITOR_CONTENT = {
+export const defaultEditorContent = {
   type: "doc",
   content: [
     {
@@ -199,5 +199,3 @@ const DEFAULT_EDITOR_CONTENT = {
     },
   ],
 };
-
-export default DEFAULT_EDITOR_CONTENT;

packages/novel/src/ui/editor/extensions/index.tsx

@@ -15,13 +15,7 @@ import { InputRule } from "@tiptap/core";
 import UploadImagesPlugin from "@/ui/editor/plugins/upload-images";
 import UpdatedImage from "./updated-image";
 
-const CustomImage = TiptapImage.extend({
-  addProseMirrorPlugins() {
-    return [UploadImagesPlugin()];
-  },
-});
-
-export const TiptapExtensions = [
+export const defaultExtensions = [
   StarterKit.configure({
     bulletList: {
       HTMLAttributes: {
@@ -78,7 +72,7 @@ export const TiptapExtensions = [
 
             tr.insert(start - 1, this.type.create(attributes)).delete(
               tr.mapping.map(start),
-              tr.mapping.map(end),
+              tr.mapping.map(end)
             );
           },
         }),
@@ -95,7 +89,11 @@ export const TiptapExtensions = [
         "text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer",
     },
   }),
-  CustomImage.configure({
+  TiptapImage.extend({
+    addProseMirrorPlugins() {
+      return [UploadImagesPlugin()];
+    },
+  }).configure({
     allowBase64: true,
     HTMLAttributes: {
       class: "rounded-lg border border-stone-200",

packages/novel/src/ui/editor/index.tsx

@@ -1,54 +1,61 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { useEditor, EditorContent, JSONContent } from "@tiptap/react";
-import { TiptapEditorProps } from "./props";
-import { TiptapExtensions } from "./extensions";
+import {
+  useEditor,
+  EditorContent,
+  JSONContent,
+  Extension,
+} from "@tiptap/react";
+import { defaultEditorProps } from "./props";
+import { defaultExtensions } from "./extensions";
 import useLocalStorage from "@/lib/hooks/use-local-storage";
 import { useDebouncedCallback } from "use-debounce";
 import { useCompletion } from "ai/react";
 import { toast } from "sonner";
 import va from "@vercel/analytics";
-import DEFAULT_EDITOR_CONTENT from "./default-content";
-import { EditorBubbleMenu } from "./components/bubble-menu";
+import { defaultEditorContent } from "./default-content";
+import { EditorBubbleMenu } from "./bubble-menu";
 import { getPrevText } from "@/lib/editor";
-import { ImageResizer } from "./components/image-resizer";
+import { ImageResizer } from "./extensions/image-resizer";
+import { EditorProps } from "@tiptap/pm/view";
 
 export default function Editor({
-  defaultValue = DEFAULT_EDITOR_CONTENT,
+  apiRoute = "/api/generate",
+  defaultValue = defaultEditorContent,
+  extensions = [],
+  editorProps = {},
   onUpdate = () => {},
   onDebouncedUpdate = () => {},
   debounceDuration = 750,
 }: {
+  apiRoute?: string;
   defaultValue?: JSONContent;
+  extensions?: Extension[];
+  editorProps?: EditorProps;
   // eslint-disable-next-line no-unused-vars
   onUpdate?: (content: JSONContent) => void;
   // eslint-disable-next-line no-unused-vars
   onDebouncedUpdate?: (content: JSONContent) => void;
   debounceDuration?: number;
 }) {
   const [content, setContent] = useLocalStorage("content", defaultValue);
-  const [saveStatus, setSaveStatus] = useState("Saved");
 
   const [hydrated, setHydrated] = useState(false);
 
   const debouncedUpdates = useDebouncedCallback(async ({ editor }) => {
     const json = editor.getJSON();
-    setSaveStatus("Saving...");
     setContent(json);
-    // Simulate a delay in saving.
-    setTimeout(() => {
-      setSaveStatus("Saved");
-    }, 500);
-
     onDebouncedUpdate(json);
   }, debounceDuration);
 
   const editor = useEditor({
-    extensions: TiptapExtensions,
-    editorProps: TiptapEditorProps,
+    extensions: [...defaultExtensions, ...extensions],
+    editorProps: {
+      ...defaultEditorProps,
+      ...editorProps,
+    },
     onUpdate: (e) => {
-      setSaveStatus("Unsaved");
       const selection = e.editor.state.selection;
       const lastTwo = getPrevText(e.editor, {
         chars: 2,
@@ -75,7 +82,7 @@ export default function Editor({
 
   const { complete, completion, isLoading, stop } = useCompletion({
     id: "novel",
-    api: "/api/generate",
+    api: apiRoute,
     onFinish: (_prompt, completion) => {
       editor?.commands.setTextSelection({
         from: editor.state.selection.from - completion.length,
@@ -150,9 +157,6 @@ export default function Editor({
       }}
       className="relative min-h-[500px] w-full max-w-screen-lg border-stone-200 bg-white p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg"
     >
-      <div className="absolute right-5 top-5 mb-5 rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400">
-        {saveStatus}
-      </div>
       {editor && <EditorBubbleMenu editor={editor} />}
       {editor?.isActive("image") && <ImageResizer editor={editor} />}
       <EditorContent editor={editor} />

packages/novel/src/ui/editor/props.ts

@@ -1,7 +1,7 @@
 import { EditorProps } from "@tiptap/pm/view";
 import { startImageUpload } from "@/ui/editor/plugins/upload-images";
 
-export const TiptapEditorProps: EditorProps = {
+export const defaultEditorProps: EditorProps = {
   attributes: {
     class: `prose-lg prose-stone dark:prose-invert prose-headings:font-display font-default focus:outline-none max-w-full`,
   },

packages/tailwind-config/tailwind.config.js

@@ -6,7 +6,6 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./ui/**/*.{js,ts,jsx,tsx}",
     `src/**/*.{js,ts,jsx,tsx}`,
-
     "../../packages/novel/src/*.{js,ts,jsx,tsx}",
   ],
   theme: {