From 721e86e7246566a1c196489af704d28b03a1c24f Mon Sep 17 00:00:00 2001
From: Eyal Cohen <eyalcohen4.ec@gmail.com>
Date: Wed, 13 Sep 2023 19:12:38 +0200
Subject: [PATCH 1/4] Prefix tailwind classes in the core package

---
 packages/core/src/styles/prosemirror.css      |  4 +--
 .../ui/editor/bubble-menu/color-selector.tsx  | 32 ++++++++++---------
 .../core/src/ui/editor/bubble-menu/index.tsx  | 10 +++---
 .../ui/editor/bubble-menu/link-selector.tsx   | 27 +++++++++-------
 .../ui/editor/bubble-menu/node-selector.tsx   | 17 ++++++----
 .../core/src/ui/editor/extensions/index.tsx   |  2 +-
 .../ui/editor/extensions/slash-command.tsx    | 18 +++++++----
 packages/core/src/ui/editor/index.tsx         |  2 +-
 packages/core/tailwind.config.js              |  6 ++++
 9 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/packages/core/src/styles/prosemirror.css b/packages/core/src/styles/prosemirror.css
index a893a48f1..80e6d2237 100644
--- a/packages/core/src/styles/prosemirror.css
+++ b/packages/core/src/styles/prosemirror.css
@@ -1,5 +1,5 @@
 .ProseMirror {
-  @apply p-12 px-8 sm:px-12;
+  @apply novel-p-12 novel-px-8 sm:novel-px-12;
 }
 
 .ProseMirror .is-editor-empty:first-child::before {
@@ -150,7 +150,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   }
 
   &:active {
-    background-color: var(--novel-stone-200);
+    background-color: var(--nnovel-stone-200);
     transition: background-color 0.2s;
   }
 
diff --git a/packages/core/src/ui/editor/bubble-menu/color-selector.tsx b/packages/core/src/ui/editor/bubble-menu/color-selector.tsx
index ba05840ea..3db67f44a 100644
--- a/packages/core/src/ui/editor/bubble-menu/color-selector.tsx
+++ b/packages/core/src/ui/editor/bubble-menu/color-selector.tsx
@@ -107,13 +107,13 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
 
   return (
     <Popover.Root open={isOpen}>
-      <div className="relative h-full">
+      <div className="novel-relative novel-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"
+          className="novel-flex novel-h-full novel-items-center novel-gap-1 novel-p-2 novel-text-sm novel-font-medium novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
           onClick={() => setIsOpen(!isOpen)}
         >
           <span
-            className="rounded-sm px-1"
+            className="novel-rounded-sm novel-px-1"
             style={{
               color: activeColorItem?.color,
               backgroundColor: activeHighlightItem?.color,
@@ -122,14 +122,16 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
             A
           </span>
 
-          <ChevronDown className="h-4 w-4" />
+          <ChevronDown className="novel-h-4 novel-w-4" />
         </Popover.Trigger>
 
         <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"
+          className="novel-z-[99999] novel-my-1 novel-flex novel-max-h-80 novel-w-48 novel-flex-col novel-overflow-hidden novel-overflow-y-auto novel-rounded novel-border novel-border-stone-200 novel-bg-white novel-p-1 novel-shadow-xl novel-animate-in novel-fade-in novel-slide-in-from-top-1"
         >
-          <div className="my-1 px-2 text-sm text-stone-500">Color</div>
+          <div className="novel-my-1 novel-px-2 novel-text-sm novel-text-stone-500">
+            Color
+          </div>
           {TEXT_COLORS.map(({ name, color }, index) => (
             <button
               key={index}
@@ -143,12 +145,12 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                     .run();
                 setIsOpen(false);
               }}
-              className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              className="novel-flex novel-items-center novel-justify-between novel-rounded-sm novel-px-2 novel-py-1 novel-text-sm novel-text-stone-600 hover:novel-bg-stone-100"
               type="button"
             >
-              <div className="flex items-center space-x-2">
+              <div className="novel-flex novel-items-center novel-space-x-2">
                 <div
-                  className="rounded-sm border border-stone-200 px-1 py-px font-medium"
+                  className="novel-rounded-sm novel-border novel-border-stone-200 novel-px-1 novel-py-px novel-font-medium"
                   style={{ color }}
                 >
                   A
@@ -156,12 +158,12 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 <span>{name}</span>
               </div>
               {editor.isActive("textStyle", { color }) && (
-                <Check className="h-4 w-4" />
+                <Check className="novel-h-4 novel-w-4" />
               )}
             </button>
           ))}
 
-          <div className="mb-1 mt-2 px-2 text-sm text-stone-500">
+          <div className="novel-mb-1 novel-mt-2 novel-px-2 novel-text-sm novel-text-stone-500">
             Background
           </div>
 
@@ -173,12 +175,12 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 name !== "Default" && editor.commands.setHighlight({ color });
                 setIsOpen(false);
               }}
-              className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              className="novel-flex novel-items-center novel-justify-between novel-rounded-sm novel-px-2 novel-py-1 novel-text-sm novel-text-stone-600 hover:novel-bg-stone-100"
               type="button"
             >
-              <div className="flex items-center space-x-2">
+              <div className="novel-flex novel-items-center novel-space-x-2">
                 <div
-                  className="rounded-sm border border-stone-200 px-1 py-px font-medium"
+                  className="novel-rounded-sm novel-border novel-border-stone-200 novel-px-1 novel-py-px novel-font-medium"
                   style={{ backgroundColor: color }}
                 >
                   A
@@ -186,7 +188,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 <span>{name}</span>
               </div>
               {editor.isActive("highlight", { color }) && (
-                <Check className="h-4 w-4" />
+                <Check className="novel-h-4 novel-w-4" />
               )}
             </button>
           ))}
diff --git a/packages/core/src/ui/editor/bubble-menu/index.tsx b/packages/core/src/ui/editor/bubble-menu/index.tsx
index 48399bee9..24940af50 100644
--- a/packages/core/src/ui/editor/bubble-menu/index.tsx
+++ b/packages/core/src/ui/editor/bubble-menu/index.tsx
@@ -87,7 +87,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   return (
     <BubbleMenu
       {...bubbleMenuProps}
-      className="flex w-fit divide-x divide-stone-200 rounded border border-stone-200 bg-white shadow-xl"
+      className="novel-flex novel-w-fit novel-divide-x novel-divide-stone-200 novel-rounded novel-border novel-border-stone-200 novel-bg-white novel-shadow-xl"
     >
       <NodeSelector
         editor={props.editor}
@@ -107,17 +107,17 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           setIsNodeSelectorOpen(false);
         }}
       />
-      <div className="flex">
+      <div className="novel-flex">
         {items.map((item, index) => (
           <button
             key={index}
             onClick={item.command}
-            className="p-2 text-stone-600 hover:bg-stone-100 active:bg-stone-200"
+            className="novel-p-2 novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
             type="button"
           >
             <item.icon
-              className={cn("h-4 w-4", {
-                "text-blue-500": item.isActive(),
+              className={cn("novel-h-4 novel-w-4", {
+                "novel-text-blue-500": item.isActive(),
               })}
             />
           </button>
diff --git a/packages/core/src/ui/editor/bubble-menu/link-selector.tsx b/packages/core/src/ui/editor/bubble-menu/link-selector.tsx
index 25c00d368..a45e7a41a 100644
--- a/packages/core/src/ui/editor/bubble-menu/link-selector.tsx
+++ b/packages/core/src/ui/editor/bubble-menu/link-selector.tsx
@@ -22,19 +22,22 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
   });
 
   return (
-    <div className="relative">
+    <div className="novel-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"
+        className="novel-flex novel-h-full novel-items-center novel-space-x-2 novel-px-3 novel-py-1.5 novel-text-sm novel-font-medium novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
         onClick={() => {
           setIsOpen(!isOpen);
         }}
       >
-        <p className="text-base">↗</p>
+        <p className="novel-text-base">↗</p>
         <p
-          className={cn("underline decoration-stone-400 underline-offset-4", {
-            "text-blue-500": editor.isActive("link"),
-          })}
+          className={cn(
+            "novel-underline novel-decoration-stone-400 novel-underline-offset-4",
+            {
+              "novel-text-blue-500": editor.isActive("link"),
+            }
+          )}
         >
           Link
         </p>
@@ -48,29 +51,29 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
             url && editor.chain().focus().setLink({ href: url }).run();
             setIsOpen(false);
           }}
-          className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1"
+          className="novel-fixed novel-top-full novel-z-[99999] novel-mt-1 novel-flex novel-w-60 novel-overflow-hidden novel-rounded novel-border novel-border-stone-200 novel-bg-white novel-p-1 novel-shadow-xl novel-animate-in novel-fade-in novel-slide-in-from-top-1"
         >
           <input
             ref={inputRef}
             type="text"
             placeholder="Paste a link"
-            className="flex-1 bg-white p-1 text-sm outline-none"
+            className="novel-flex-1 novel-bg-white novel-p-1 novel-text-sm novel-outline-none"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {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"
+              className="novel-flex novel-items-center novel-rounded-sm novel-p-1 novel-text-red-600 novel-transition-all hover:novel-bg-red-100 dark:hover:novel-bg-red-800"
               onClick={() => {
                 editor.chain().focus().unsetLink().run();
                 setIsOpen(false);
               }}
             >
-              <Trash className="h-4 w-4" />
+              <Trash className="novel-h-4 novel-w-4" />
             </button>
           ) : (
-            <button className="flex items-center rounded-sm p-1 text-stone-600 transition-all hover:bg-stone-100">
-              <Check className="h-4 w-4" />
+            <button className="novel-flex novel-items-center novel-rounded-sm novel-p-1 novel-text-stone-600 novel-transition-all hover:novel-bg-stone-100">
+              <Check className="novel-h-4 novel-w-4" />
             </button>
           )}
         </form>
diff --git a/packages/core/src/ui/editor/bubble-menu/node-selector.tsx b/packages/core/src/ui/editor/bubble-menu/node-selector.tsx
index 001db0fe5..181e859ee 100644
--- a/packages/core/src/ui/editor/bubble-menu/node-selector.tsx
+++ b/packages/core/src/ui/editor/bubble-menu/node-selector.tsx
@@ -100,9 +100,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
 
   return (
     <Popover.Root open={isOpen}>
-      <div className="relative h-full">
+      <div className="novel-relative novel-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"
+          className="novel-flex novel-h-full novel-items-center novel-gap-1 novel-whitespace-nowrap novel-p-2 novel-text-sm novel-font-medium novel-text-stone-600 hover:novel-bg-stone-100 active:novel-bg-stone-200"
           onClick={() => setIsOpen(!isOpen)}
         >
           <span>{activeItem?.name}</span>
@@ -111,7 +111,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
 
         <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"
+          className="novel-z-[99999] novel-my-1 novel-flex novel-max-h-80 novel-w-48 novel-flex-col novel-overflow-hidden novel-overflow-y-auto novel-rounded novel-border novel-border-stone-200 novel-bg-white novel-p-1 novel-shadow-xl novel-animate-in novel-fade-in novel-slide-in-from-top-1"
         >
           {items.map((item, index) => (
             <button
@@ -120,16 +120,19 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
                 item.command();
                 setIsOpen(false);
               }}
-              className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              className="novel-flex novel-items-center novel-justify-between novel-rounded-sm novel-px-2 novel-py-1 novel-text-sm novel-text-stone-600 hover:novel-bg-stone-100"
               type="button"
             >
               <div className="flex items-center space-x-2">
-                <div className="rounded-sm border border-stone-200 p-1">
-                  <item.icon className="h-3 w-3" />
+                <div className="novel-flex novel-items-center novel-space-x-2">
+                  {" "}
+                  <item.icon className="novel-h-3 novel-w-3" />
                 </div>
                 <span>{item.name}</span>
               </div>
-              {activeItem.name === item.name && <Check className="h-4 w-4" />}
+              {activeItem.name === item.name && (
+                <Check className="novel-h-4 novel-w-4" />
+              )}
             </button>
           ))}
         </Popover.Content>
diff --git a/packages/core/src/ui/editor/extensions/index.tsx b/packages/core/src/ui/editor/extensions/index.tsx
index 8be20f79b..ddb4c1eb3 100644
--- a/packages/core/src/ui/editor/extensions/index.tsx
+++ b/packages/core/src/ui/editor/extensions/index.tsx
@@ -129,7 +129,7 @@ export const defaultExtensions = [
   }),
   TaskItem.configure({
     HTMLAttributes: {
-      class: "flex items-start my-4",
+      class: "novel-flex novel-items-start my-4",
     },
     nested: true,
   }),
diff --git a/packages/core/src/ui/editor/extensions/slash-command.tsx b/packages/core/src/ui/editor/extensions/slash-command.tsx
index ada8c734c..a7846f2dc 100644
--- a/packages/core/src/ui/editor/extensions/slash-command.tsx
+++ b/packages/core/src/ui/editor/extensions/slash-command.tsx
@@ -78,7 +78,7 @@ const getSuggestionItems = ({ query }: { query: string }) => {
       title: "Continue writing",
       description: "Use AI to expand your thoughts.",
       searchTerms: ["gpt"],
-      icon: <Magic className="w-7" />,
+      icon: <Magic className="novel-w-7" />,
     },
     {
       title: "Send Feedback",
@@ -346,18 +346,20 @@ const CommandList = ({
     <div
       id="slash-command"
       ref={commandListContainer}
-      className="z-50 h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border border-stone-200 bg-white px-1 py-2 shadow-md transition-all"
+      className="novel-z-50 novel-h-auto novel-max-h-[330px] novel-w-72 novel-overflow-y-auto novel-rounded-md novel-border novel-border-stone-200 novel-bg-white novel-px-1 novel-py-2 novel-shadow-md novel-transition-all"
     >
       {items.map((item: CommandItemProps, index: number) => {
         return (
           <button
-            className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-stone-900 hover:bg-stone-100 ${
-              index === selectedIndex ? "bg-stone-100 text-stone-900" : ""
+            className={`novel-flex novel-w-full novel-items-center novel-space-x-2 novel-rounded-md novel-px-2 novel-py-1 novel-text-left novel-text-sm novel-text-stone-900 hover:novel-bg-stone-100 ${
+              index === selectedIndex
+                ? "novel-bg-stone-100 novel-text-stone-900"
+                : ""
             }`}
             key={index}
             onClick={() => selectItem(index)}
           >
-            <div className="flex h-10 w-10 items-center justify-center rounded-md border border-stone-200 bg-white">
+            <div className="novel-flex novel-h-10 novel-w-10 novel-items-center novel-justify-center novel-rounded-md novel-border novel-border-stone-200 novel-bg-white">
               {item.title === "Continue writing" && isLoading ? (
                 <LoadingCircle />
               ) : (
@@ -365,8 +367,10 @@ const CommandList = ({
               )}
             </div>
             <div>
-              <p className="font-medium">{item.title}</p>
-              <p className="text-xs text-stone-500">{item.description}</p>
+              <p className="novel-font-medium">{item.title}</p>
+              <p className="novel-text-xs novel-text-stone-500">
+                {item.description}
+              </p>
             </div>
           </button>
         );
diff --git a/packages/core/src/ui/editor/index.tsx b/packages/core/src/ui/editor/index.tsx
index 74f4045a4..cbfea8f6b 100644
--- a/packages/core/src/ui/editor/index.tsx
+++ b/packages/core/src/ui/editor/index.tsx
@@ -23,7 +23,7 @@ import { Editor as EditorClass } from "@tiptap/core";
 
 export default function Editor({
   completionApi = "/api/generate",
-  className = "relative min-h-[500px] w-full max-w-screen-lg border-stone-200 bg-white sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:shadow-lg",
+  className = "novel-relative novel-min-h-[500px] novel-w-full novel-max-w-screen-lg novel-border-stone-200 novel-bg-white sm:novel-mb-[calc(20vh)] sm:novel-rounded-lg sm:novel-border sm:novel-shadow-lg",
   defaultValue = defaultEditorContent,
   extensions = [],
   editorProps = {},
diff --git a/packages/core/tailwind.config.js b/packages/core/tailwind.config.js
index 12079a19b..0235950c0 100644
--- a/packages/core/tailwind.config.js
+++ b/packages/core/tailwind.config.js
@@ -3,4 +3,10 @@ const sharedConfig = require("tailwind-config/tailwind.config.js");
 module.exports = {
   // prefix ui lib classes to avoid conflicting with the app
   ...sharedConfig,
+  prefix: "novel-",
+  plugins: [
+    // Tailwind plugins
+    require("@tailwindcss/typography"),
+    require("tailwindcss-animate"),
+  ],
 };

From d5ae4648880583ccedeab13d391a676fef86da04 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Tue, 3 Oct 2023 08:27:01 -0700
Subject: [PATCH 2/4] fix typo

---
 packages/core/src/styles/prosemirror.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/styles/prosemirror.css b/packages/core/src/styles/prosemirror.css
index 80e6d2237..b62745636 100644
--- a/packages/core/src/styles/prosemirror.css
+++ b/packages/core/src/styles/prosemirror.css
@@ -150,7 +150,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   }
 
   &:active {
-    background-color: var(--nnovel-stone-200);
+    background-color: var(--novel-stone-200);
     transition: background-color 0.2s;
   }
 

From 5fedf93a304a11b1798eecae7b4044d0d459dece Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Tue, 3 Oct 2023 08:43:35 -0700
Subject: [PATCH 3/4] fixed loadingcircle

---
 apps/web/ui/editor.tsx                        | 5 +++++
 packages/core/src/ui/icons/loading-circle.tsx | 4 ++--
 packages/core/tailwind.config.js              | 5 -----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/ui/editor.tsx b/apps/web/ui/editor.tsx
index cb6c7cae4..a4aa5c147 100644
--- a/apps/web/ui/editor.tsx
+++ b/apps/web/ui/editor.tsx
@@ -12,6 +12,11 @@ export default function Editor() {
         {saveStatus}
       </div>
       <NovelEditor
+        editorProps={{
+          attributes: {
+            class: `prose-lg prose-stone dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full`,
+          },
+        }}
         onUpdate={() => {
           setSaveStatus("Unsaved");
         }}
diff --git a/packages/core/src/ui/icons/loading-circle.tsx b/packages/core/src/ui/icons/loading-circle.tsx
index 524d2abdc..aef1215e7 100644
--- a/packages/core/src/ui/icons/loading-circle.tsx
+++ b/packages/core/src/ui/icons/loading-circle.tsx
@@ -3,8 +3,8 @@ export default function LoadingCircle({ dimensions }: { dimensions?: string }) {
     <svg
       aria-hidden="true"
       className={`${
-        dimensions || "h-4 w-4"
-      } animate-spin fill-stone-600 text-stone-200`}
+        dimensions || "novel-h-4 novel-w-4"
+      } novel-animate-spin novel-fill-stone-600 novel-text-stone-200`}
       viewBox="0 0 100 101"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/core/tailwind.config.js b/packages/core/tailwind.config.js
index 0235950c0..1a88cf03f 100644
--- a/packages/core/tailwind.config.js
+++ b/packages/core/tailwind.config.js
@@ -4,9 +4,4 @@ module.exports = {
   // prefix ui lib classes to avoid conflicting with the app
   ...sharedConfig,
   prefix: "novel-",
-  plugins: [
-    // Tailwind plugins
-    require("@tailwindcss/typography"),
-    require("tailwindcss-animate"),
-  ],
 };

From 17c1ca9ea2b1790d7bbb7ec89c1674f8b222bf40 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Tue, 3 Oct 2023 09:17:30 -0700
Subject: [PATCH 4/4] fix prose

---
 apps/web/ui/editor.tsx                        |  5 ----
 .../core/src/ui/editor/extensions/index.tsx   | 25 ++++++++++---------
 packages/core/src/ui/editor/props.ts          |  2 +-
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/apps/web/ui/editor.tsx b/apps/web/ui/editor.tsx
index a4aa5c147..cb6c7cae4 100644
--- a/apps/web/ui/editor.tsx
+++ b/apps/web/ui/editor.tsx
@@ -12,11 +12,6 @@ export default function Editor() {
         {saveStatus}
       </div>
       <NovelEditor
-        editorProps={{
-          attributes: {
-            class: `prose-lg prose-stone dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full`,
-          },
-        }}
         onUpdate={() => {
           setSaveStatus("Unsaved");
         }}
diff --git a/packages/core/src/ui/editor/extensions/index.tsx b/packages/core/src/ui/editor/extensions/index.tsx
index ddb4c1eb3..fb9dcc690 100644
--- a/packages/core/src/ui/editor/extensions/index.tsx
+++ b/packages/core/src/ui/editor/extensions/index.tsx
@@ -21,34 +21,35 @@ export const defaultExtensions = [
   StarterKit.configure({
     bulletList: {
       HTMLAttributes: {
-        class: "list-disc list-outside leading-3 -mt-2",
+        class: "novel-list-disc novel-list-outside novel-leading-3 novel--mt-2",
       },
     },
     orderedList: {
       HTMLAttributes: {
-        class: "list-decimal list-outside leading-3 -mt-2",
+        class:
+          "novel-list-decimal novel-list-outside novel-leading-3 novel--mt-2",
       },
     },
     listItem: {
       HTMLAttributes: {
-        class: "leading-normal -mb-2",
+        class: "novel-leading-normal novel--mb-2",
       },
     },
     blockquote: {
       HTMLAttributes: {
-        class: "border-l-4 border-stone-700",
+        class: "novel-border-l-4 novel-border-stone-700",
       },
     },
     codeBlock: {
       HTMLAttributes: {
         class:
-          "rounded-sm bg-stone-100 p-5 font-mono font-medium text-stone-800",
+          "novel-rounded-sm novel-bg-stone-100 novel-p-5 novel-font-mono novel-font-medium novel-text-stone-800",
       },
     },
     code: {
       HTMLAttributes: {
         class:
-          "rounded-md bg-stone-200 px-1.5 py-1 font-mono font-medium text-stone-900",
+          "novel-rounded-md novel-bg-stone-200 novel-px-1.5 novel-py-1 novel-font-mono novel-font-medium novel-text-stone-900",
         spellcheck: "false",
       },
     },
@@ -82,13 +83,13 @@ export const defaultExtensions = [
     },
   }).configure({
     HTMLAttributes: {
-      class: "mt-4 mb-6 border-t border-stone-300",
+      class: "novel-mt-4 novel-mb-6 novel-border-t novel-border-stone-300",
     },
   }),
   TiptapLink.configure({
     HTMLAttributes: {
       class:
-        "text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer",
+        "novel-text-stone-400 novel-underline novel-underline-offset-[3px] hover:novel-text-stone-600 novel-transition-colors novel-cursor-pointer",
     },
   }),
   TiptapImage.extend({
@@ -98,12 +99,12 @@ export const defaultExtensions = [
   }).configure({
     allowBase64: true,
     HTMLAttributes: {
-      class: "rounded-lg border border-stone-200",
+      class: "novel-rounded-lg novel-border novel-border-stone-200",
     },
   }),
   UpdatedImage.configure({
     HTMLAttributes: {
-      class: "rounded-lg border border-stone-200",
+      class: "novel-rounded-lg novel-border novel-border-stone-200",
     },
   }),
   Placeholder.configure({
@@ -124,12 +125,12 @@ export const defaultExtensions = [
   }),
   TaskList.configure({
     HTMLAttributes: {
-      class: "not-prose pl-2",
+      class: "novel-not-prose novel-pl-2",
     },
   }),
   TaskItem.configure({
     HTMLAttributes: {
-      class: "novel-flex novel-items-start my-4",
+      class: "novel-flex novel-items-start novel-my-4",
     },
     nested: true,
   }),
diff --git a/packages/core/src/ui/editor/props.ts b/packages/core/src/ui/editor/props.ts
index 79bf72c2f..836a67b5b 100644
--- a/packages/core/src/ui/editor/props.ts
+++ b/packages/core/src/ui/editor/props.ts
@@ -3,7 +3,7 @@ import { startImageUpload } from "@/ui/editor/plugins/upload-images";
 
 export const defaultEditorProps: EditorProps = {
   attributes: {
-    class: `prose-lg prose-stone dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full`,
+    class: `novel-prose-lg novel-prose-stone dark:novel-prose-invert prose-headings:novel-font-title novel-font-default focus:novel-outline-none novel-max-w-full`,
   },
   handleDOMEvents: {
     keydown: (_view, event) => {