Merge branch 'main' into pr/87

steven-tey · Aug 31, 2023 · 235a7bc · 235a7bc
2 parents 096a08a + dba0eb1
commit 235a7bc
Show file tree

Hide file tree

Showing 8 changed files with 363 additions and 1,137 deletions.
diff --git a/apps/web/README.md b/apps/web/README.md
@@ -69,9 +69,13 @@ Here's how you can contribute:
 - [Open an issue](https://github.com/steven-tey/novel/issues) if you believe you've encountered a bug.
 - Make a [pull request](https://github.com/steven-tey/novel/pull) to add new features/make quality-of-life improvements/fix bugs.
 
-## Author
+<a href="https://github.com/steven-tey/novel/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=steven-tey/novel" />
+</a>
+
+## Repo Activity
 
-- Steven Tey ([@steventey](https://twitter.com/steventey))
+![Novel.sh repo activity – generated by Axiom](https://repobeats.axiom.co/api/embed/2ebdaa143b0ad6e7c2ee23151da7b37f67da0b36.svg)
 
 ## License
 

diff --git a/package.json b/package.json
@@ -33,14 +33,14 @@
     "@vercel/analytics": "^1.0.1",
     "@vercel/blob": "^0.9.3",
     "@vercel/kv": "^0.2.2",
-    "ai": "^2.1.32",
+    "ai": "^2.2.9",
     "clsx": "^1.2.1",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "eventsource-parser": "^0.1.0",
     "framer-motion": "^10.15.1",
     "lucide-react": "^0.244.0",
-    "next": "13.4.10-canary.0",
+    "next": "13.4.20-canary.9",
     "next-themes": "^0.2.1",
     "openai-edge": "^1.2.2",
     "react": "18.2.0",

diff --git a/packages/novel/src/ui/editor/components/bubble-menu.tsx b/packages/novel/src/ui/editor/components/bubble-menu.tsx
@@ -108,6 +108,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             key={index}
             onClick={item.command}
             className="p-2 text-stone-600 hover:bg-stone-100 active:bg-stone-200"
+            type="button"
           >
             <item.icon
               className={cn("h-4 w-4", {

diff --git a/packages/novel/src/ui/editor/components/color-selector.tsx b/packages/novel/src/ui/editor/components/color-selector.tsx
@@ -1,6 +1,7 @@
 import { Editor } from "@tiptap/core";
 import { Check, ChevronDown } from "lucide-react";
 import { Dispatch, FC, SetStateAction } from "react";
+import * as Popover from "@radix-ui/react-popover";
 
 export interface BubbleColorMenuItem {
   name: string;
@@ -105,26 +106,29 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
   );
 
   return (
-    <div className="relative h-full">
-      <button
-        className="flex h-full items-center gap-1 p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        <span
-          className="rounded-sm px-1"
-          style={{
-            color: activeColorItem?.color,
-            backgroundColor: activeHighlightItem?.color,
-          }}
+    <Popover.Root open={isOpen}>
+      <div className="relative h-full">
+        <Popover.Trigger
+          className="flex h-full items-center gap-1 p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
+          onClick={() => setIsOpen(!isOpen)}
         >
-          A
-        </span>
+          <span
+            className="rounded-sm px-1"
+            style={{
+              color: activeColorItem?.color,
+              backgroundColor: activeHighlightItem?.color,
+            }}
+          >
+            A
+          </span>
 
-        <ChevronDown className="h-4 w-4" />
-      </button>
+          <ChevronDown className="h-4 w-4" />
+        </Popover.Trigger>
 
-      {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <Popover.Content
+          align="start"
+          className="z-[99999] my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1"
+        >
           <div className="my-1 px-2 text-sm text-stone-500">Color</div>
           {TEXT_COLORS.map(({ name, color }, index) => (
             <button
@@ -140,6 +144,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 setIsOpen(false);
               }}
               className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              type="button"
             >
               <div className="flex items-center space-x-2">
                 <div
@@ -169,6 +174,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 setIsOpen(false);
               }}
               className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              type="button"
             >
               <div className="flex items-center space-x-2">
                 <div
@@ -184,8 +190,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
               )}
             </button>
           ))}
-        </section>
-      )}
-    </div>
+        </Popover.Content>
+      </div>
+    </Popover.Root>
   );
 };
diff --git a/packages/novel/src/ui/editor/components/link-selector.tsx b/packages/novel/src/ui/editor/components/link-selector.tsx
@@ -24,6 +24,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
   return (
     <div className="relative">
       <button
+        type="button"
         className="flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
         onClick={() => {
           setIsOpen(!isOpen);
@@ -58,6 +59,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
           />
           {editor.getAttributes("link").href ? (
             <button
+              type="button"
               className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
               onClick={() => {
                 editor.chain().focus().unsetLink().run();

diff --git a/packages/novel/src/ui/editor/components/node-selector.tsx b/packages/novel/src/ui/editor/components/node-selector.tsx
@@ -11,8 +11,8 @@ import {
   Code,
   CheckSquare,
 } from "lucide-react";
+import * as Popover from "@radix-ui/react-popover";
 import { Dispatch, FC, SetStateAction } from "react";
-
 import { BubbleMenuItem } from "./bubble-menu";
 
 interface NodeSelectorProps {
@@ -99,17 +99,20 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   };
 
   return (
-    <div className="relative h-full">
-      <button
-        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        <span>{activeItem?.name}</span>
-        <ChevronDown className="h-4 w-4" />
-      </button>
+    <Popover.Root open={isOpen}>
+      <div className="relative h-full">
+        <Popover.Trigger
+          className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <span>{activeItem?.name}</span>
+          <ChevronDown className="h-4 w-4" />
+        </Popover.Trigger>
 
-      {isOpen && (
-        <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <Popover.Content
+          align="start"
+          className="z-[99999] my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1"
+        >
           {items.map((item, index) => (
             <button
               key={index}
@@ -118,6 +121,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
                 setIsOpen(false);
               }}
               className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              type="button"
             >
               <div className="flex items-center space-x-2">
                 <div className="rounded-sm border border-stone-200 p-1">
@@ -128,8 +132,8 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
               {activeItem.name === item.name && <Check className="h-4 w-4" />}
             </button>
           ))}
-        </section>
-      )}
-    </div>
+        </Popover.Content>
+      </div>
+    </Popover.Root>
   );
 };
diff --git a/packages/novel/src/ui/editor/extensions/slash-command.tsx b/packages/novel/src/ui/editor/extensions/slash-command.tsx
@@ -274,8 +274,8 @@ const CommandList = ({
         to: range.from + completion.length,
       });
     },
-    onError: () => {
-      toast.error("Something went wrong.");
+    onError: (e) => {
+      toast.error(e.message);
     },
   });
 
@@ -287,6 +287,7 @@ const CommandList = ({
       });
       if (item) {
         if (item.title === "Continue writing") {
+          if (isLoading) return;
           complete(
             getPrevText(editor, {
               chars: 5000,
@@ -298,7 +299,7 @@ const CommandList = ({
         }
       }
     },
-    [complete, command, editor, items],
+    [complete, isLoading, command, editor, items],
   );
 
   useEffect(() => {