add defaultStyles option, reorganize styles (#148)

* add defaultStyles option, reorganize styles

* Small changes to docs

* Made drag preview inherit editor styling

---------

Co-authored-by: Matthew Lipski <[email protected]>

Author: YousefED

packages/core/src/BlockNoteEditor.ts

@@ -34,15 +34,50 @@ export type BlockNoteEditorOptions = {
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
   enableBlockNoteExtensions: boolean;
   disableHistoryExtension: boolean;
+  /**
+   * Factories used to create a custom UI for BlockNote
+   */
   uiFactories: UiFactories;
+  /**
+   * TODO: why is this called slashCommands and not slashMenuItems?
+   *
+   * @default defaultSlashMenuItems from `./extensions/SlashMenu`
+   */
   slashCommands: BaseSlashMenuItem[];
+
+  /**
+   * The HTML element that should be used as the parent element for the editor.
+   *
+   * @default: undefined, the editor is not attached to the DOM
+   */
   parentElement: HTMLElement;
+  /**
+   * An object containing attributes that should be added to the editor's HTML element.
+   *
+   * @example { class: "my-editor-class" }
+   */
   editorDOMAttributes: Record<string, string>;
+  /**
+   *  A callback function that runs when the editor is ready to be used.
+   */
   onEditorReady: (editor: BlockNoteEditor) => void;
+  /**
+   * A callback function that runs whenever the editor's contents change.
+   */
   onEditorContentChange: (editor: BlockNoteEditor) => void;
+  /**
+   * A callback function that runs whenever the text cursor position changes.
+   */
   onTextCursorPositionChange: (editor: BlockNoteEditor) => void;
   initialContent: PartialBlock[];
 
+  /**
+   * Use default BlockNote font and reset the styles of <p> <li> <h1> elements etc., that are used in BlockNote.
+   *
+   * @default true
+   */
+  defaultStyles: boolean;
+
   // tiptap options, undocumented
   _tiptapOptions: any;
 };
@@ -62,6 +97,12 @@ export class BlockNoteEditor {
   }
 
   constructor(options: Partial<BlockNoteEditorOptions> = {}) {
+    // apply defaults
+    options = {
+      defaultStyles: true,
+      ...options,
+    };
+
     const blockNoteExtensions = getBlockNoteExtensions({
       editor: this,
       uiFactories: options.uiFactories || {},
@@ -103,6 +144,7 @@ export class BlockNoteEditor {
           class: [
             styles.bnEditor,
             styles.bnRoot,
+            options.defaultStyles ? styles.defaultStyles : "",
             options.editorDOMAttributes?.class || "",
           ].join(" "),
         },

packages/core/src/editor.module.css

@@ -3,6 +3,11 @@
 .bnEditor {
   outline: none;
   margin-left: 50px;
+
+  /* Define a set of colors to be used throughout the app for consistency
+  see https://atlassian.design/foundations/color for more info */
+  --N800: #172b4d; /* Dark neutral used for tooltips and text on light background */
+  --N40: #dfe1e6; /* Light neutral used for subtle borders and text on dark background */
 }
 
 /*
@@ -25,13 +30,21 @@ Tippy popups that are appended to document.body directly
   box-sizing: inherit;
 }
 
-.bnEditor,
-.dragPreview {
-  /* Define a set of colors to be used throughout the app for consistency
-  see https://atlassian.design/foundations/color for more info */
-  --N800: #172b4d; /* Dark neutral used for tooltips and text on light background */
-  --N40: #dfe1e6; /* Light neutral used for subtle borders and text on dark background */
+/* reset styles, they will be set on blockContent */
+.defaultStyles p,
+.defaultStyles h1,
+.defaultStyles h2,
+.defaultStyles h3,
+.defaultStyles li {
+  all: unset;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+}
 
+.defaultStyles {
+  font-size: 16px;
+  font-weight: normal;
   font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
     "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
     "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

packages/core/src/extensions/Blocks/nodes/Block.module.css

@@ -3,21 +3,11 @@ BASIC STYLES
 */
 
 .blockOuter {
-  /* padding-bottom: 15px; */
-  font-size: 16px;
   line-height: 1.5;
-  transition: all 0.2s;
-  font-weight: normal;
-}
-
-.block {
-  /* content: ""; */
-  transition: all 0.2s;
-  margin: 0px;
+  transition: margin 0.2s;
 }
 
 .blockContent {
-  font-size: 1em;
   padding: 3px 0;
   transition: font-size 0.2s;
   /* display: inline-block; */
@@ -29,18 +19,6 @@ BASIC STYLES
   /*margin: 0px;*/
 }
 
-/* reset styles, they will be set on blockContent */
-.blockContent p,
-.blockContent h1,
-.blockContent h2,
-.blockContent h3,
-.blockContent li {
-  all: unset;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-}
-
 /*
 NESTED BLOCKS
 */

packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -158,8 +158,26 @@ function setDragImage(view: EditorView, from: number, to = from) {
   // dataTransfer.setDragImage(element) only works if element is attached to the DOM.
   unsetDragImage();
   dragImageElement = parentClone;
+
+  // TODO: This is hacky, need a better way of assigning classes to the editor so that they can also be applied to the
+  //  drag preview.
+  const classes = view.dom.className.split(" ");
+  const inheritedClasses = classes
+    .filter(
+      (className) =>
+        !className.includes("bn") &&
+        !className.includes("ProseMirror") &&
+        !className.includes("editor")
+    )
+    .join(" ");
+
   dragImageElement.className =
-    dragImageElement.className + " " + styles.dragPreview;
+    dragImageElement.className +
+    " " +
+    styles.dragPreview +
+    " " +
+    inheritedClasses;
+
   document.body.appendChild(dragImageElement);
 }
 

packages/website/docs/docs/editor.md

@@ -7,20 +7,21 @@ While you can get started with BlockNote in minutes, it's likely that you'll wan
 There are a number of options that you can pass to `useBlockNote()`, which you can use to customize the editor. You can find the full list of these below:
 
 ```typescript
-export type BlockNoteEditorOptions = {
+export type BlockNoteEditorOptions = Partial<{
   initialContent: PartialBlock[];
   editorDOMAttributes: Record<string, string>;
   onEditorReady: (editor: BlockNoteEditor) => void;
   onEditorContentChange: (editor: BlockNoteEditor) => void;
   onTextCursorPositionChange: (editor: BlockNoteEditor) => void;
   slashMenuItems: ReactSlashMenuItem[];
   uiFactories: UiFactories;
-};
+  defaultStyles: boolean;
+}>;
 ```
 
 `initialContent:` The content that should be in the editor when it's created, represented as an array of [partial block objects](/docs/manipulating-blocks#partial-blocks).
 
-`editorDOMAttributes:` An object containing attributes that should be added to the editor's HTML element.
+`editorDOMAttributes:` An object containing attributes that should be added to the editor's HTML element. For example, you can pass `{ class: "my-editor-class" }` to set a custom class name.
 
 `onEditorReady:` A callback function that runs when the editor is ready to be used.
 
@@ -32,6 +33,8 @@ export type BlockNoteEditorOptions = {
 
 `uiFactories:` Factories used to create a custom UI for BlockNote, which you can find out more about in [Creating Your Own UI Elements](/docs/vanilla-js#creating-your-own-ui-elements).
 
+`defaultStyles`: Whether to use the default font and reset the styles of `<p>`, `<li>`, `<h1>`, etc. elements that are used in BlockNote. Defaults to true if undefined.
+
 ## Demo: Saving & Restoring Editor Contents
 
 By default, BlockNote doesn't preserve the editor contents when your app is reopened or refreshed. However, using the editor options, you can change this by using the editor options.
@@ -67,4 +70,4 @@ export default function App() {
 }
 ```
 
-:::
+:::