Fix Style injection caused tailwind override css priorities

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 {

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,25 +145,25 @@ 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
  </div>
  <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,20 +175,20 @@ 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
  </div>
  <span>{name}</span>
  </div>
  {editor.isActive("highlight", { color }) && (
- <Check className="h-4 w-4" />
+ <Check className="novel-h-4 novel-w-4" />
  )}
  </button>
  ))}

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>

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>

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>

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: "flex items-start my-4",
+ class: "novel-flex novel-items-start novel-my-4",
  },
  nested: true,
  }),

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,27 +346,31 @@ 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 />
  ) : (
  item.icon
  )}
  </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>
  );

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 = {},

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) => {