search

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
5.87k stars 379 forks source link

importing `shadcn/style.css` will break existing shadcn styles (border) #880

Open softmarshmallow opened 2 days ago

softmarshmallow commented 2 days ago

Importing shadcn/styles.css will break the existing shadcn styles, - border

import "@blocknote/shadcn/style.css";

https://github.com/TypeCellOS/BlockNote/assets/16307013/9a2fb7ce-68a5-4884-b385-96d13964ccb0

(A different topic, but also the @blocknote/shadcn/style.css does not respect the customized shadcn colors (in my case I am using neutral)

My globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 5%;
    --foreground: 0 0% 98%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

// maybe importing the shadcn/styles somehow conflicts with this part?
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}
softmarshmallow commented 2 days ago

Issue remains, I've swtiched to @blocknote/mantine (really wish to use shadcn though)

For who still want to match there styles with shadcn, here's a custom style you can override for @blocknote/mantine to match shadcn styles.

/* 
- https://www.blocknotejs.org/docs/styling-theming/themes
*/

/* Base theme */
.bn-container[data-theming-ui-css-variables][data-color-scheme] {
  --bn-colors-editor-text: hsl(var(--foreground));
  --bn-colors-editor-background: hsl(var(--background));
  --bn-colors-menu-text: hsl(var(--popover-foreground));
  --bn-colors-menu-background: hsl(var(--popover));
  --bn-colors-tooltip-text: hsl(var(--foreground));
  --bn-colors-tooltip-background: hsl(var(--background));
  --bn-colors-hovered-text: hsl(var(--accent-foreground));
  --bn-colors-hovered-background: hsl(var(--accent));
  --bn-colors-selected-text: hsl(var(--foreground));
  --bn-colors-selected-background: hsl(var(--accent));
  --bn-colors-disabled-text: hsl(var(--muted-foreground));
  --bn-colors-disabled-background: hsl(var(--muted));
  --bn-colors-shadow: rgba(0, 0, 0, 0.04);
  --bn-colors-border: hsl(var(--border));
  --bn-colors-side-menu: hsl(var(--muted-foreground));
  --bn-border-radius: var(--radius);
}


import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import "./styles.css";

<BlockNoteView
        data-theming-ui-css-variables
        {...props}
        className={cn(
          "min-h-[120px] h-full w-full bg-transparent placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
          props.className
        )}
      />