Merge pull request #600 from TypeCellOS/separate-font

separate inter font

README.md

@@ -35,6 +35,7 @@ See our homepage @ [https://www.blocknotejs.org](https://www.blocknotejs.org/) o
 
 ```typescript
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
+import "@blocknote/core/fonts/inter.css";
 import "@blocknote/react/style.css";
 
 function App() {

docs/components/pages/landing/hero/Demo.tsx

@@ -1,4 +1,5 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useCallback, useMemo, useState } from "react";

docs/pages/docs/advanced/nextjs.mdx

@@ -14,6 +14,7 @@ Make sure to use BlockNote in a [Client Component](https://nextjs.org/docs/getti
 ```typescript jsx
 "use client"; // this registers <Editor> as a Client Component
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
+import "@blocknote/core/fonts/inter.css";
 import "@blocknote/react/style.css";
 
 // Our <Editor> component we can reuse later

docs/pages/docs/quickstart.mdx

@@ -26,7 +26,7 @@ With the `useCreateBlockNote` hook, we can create a new editor instance, then us
 
 <Example name="basic/minimal" />
 
-We also import `@blocknote/react/style.css` to add default styling for the editor.
+We also import `@blocknote/react/style.css` to add default styling for the editor and the `Inter` font that BlockNote exports (optional).
 
 <Callout type="warning" emoji={""}>
   <strong>Next.js usage (or other server-side React frameworks)</strong>

examples/01-basic/01-minimal/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/01-basic/02-block-objects/App.tsx

@@ -1,4 +1,5 @@
 import { Block } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useState } from "react";

examples/01-basic/03-all-blocks/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/01-basic/05-block-manipulation/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/01-basic/06-file-uploading/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/01-basic/07-saving-loading/App.tsx

@@ -1,4 +1,5 @@
 import { Block, BlockNoteEditor, PartialBlock } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useEffect, useMemo, useState } from "react";

examples/01-basic/testing/App.tsx

@@ -1,4 +1,5 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/02-ui-components/01-ui-elements-remove/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/02-ui-components/02-formatting-toolbar-buttons/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import {
   BasicTextStyleButton,
   BlockNoteView,

examples/02-ui-components/03-formatting-toolbar-block-type-items/App.tsx

@@ -1,10 +1,11 @@
 import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   BlockTypeDropdownItem,
-  blockTypeDropdownItems,
   FormattingToolbar,
   FormattingToolbarController,
+  blockTypeDropdownItems,
   useCreateBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";

examples/02-ui-components/04-side-menu-buttons/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   DragHandleButton,

examples/02-ui-components/05-side-menu-drag-handle-items/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockColorsItem,
   BlockNoteView,

examples/02-ui-components/06-suggestion-menus-slash-menu-items/App.tsx

@@ -3,6 +3,7 @@ import {
   filterSuggestionItems,
   PartialBlock,
 } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   DefaultReactSuggestionItem,

examples/02-ui-components/07-suggestion-menus-slash-menu-component/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   DefaultReactSuggestionItem,

examples/02-ui-components/08-custom-ui/App.tsx

@@ -1,4 +1,5 @@
 import { filterSuggestionItems } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   getDefaultReactSlashMenuItems,

examples/02-ui-components/hyperlink-toolbar-buttons/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   HyperlinkToolbar,

examples/03-theming/01-theming-dom-attributes/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/03-theming/02-changing-font/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/03-theming/03-theming-css/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/03-theming/04-theming-css-variables/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/03-theming/05-theming-css-variables-code/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   darkDefaultTheme,

examples/04-interoperability/01-converting-blocks-to-html/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useState } from "react";

examples/04-interoperability/02-converting-blocks-from-html/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { ChangeEvent, useCallback, useEffect } from "react";

examples/04-interoperability/03-converting-blocks-to-md/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useState } from "react";

examples/04-interoperability/04-converting-blocks-from-md/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { ChangeEvent, useCallback, useEffect } from "react";

examples/05-custom-schema/01-alert-block/App.tsx

@@ -4,6 +4,7 @@ import {
   filterSuggestionItems,
   insertOrUpdateBlock,
 } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   SuggestionMenuController,

examples/05-custom-schema/02-suggestion-menus-mentions/App.tsx

@@ -3,6 +3,7 @@ import {
   defaultInlineContentSpecs,
   filterSuggestionItems,
 } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   DefaultReactSuggestionItem,

examples/05-custom-schema/03-font-style/App.tsx

@@ -1,4 +1,5 @@
 import { BlockNoteSchema, defaultStyleSpecs } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BasicTextStyleButton,
   BlockNoteView,

examples/05-custom-schema/react-custom-blocks/App.tsx

@@ -3,6 +3,7 @@ import {
   defaultBlockSpecs,
   defaultProps,
 } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   createReactBlockSpec,

examples/05-custom-schema/react-custom-inline-content/App.tsx

@@ -1,4 +1,5 @@
 import { BlockNoteSchema, defaultInlineContentSpecs } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   createReactInlineContentSpec,

examples/05-custom-schema/react-custom-styles/App.tsx

@@ -1,4 +1,5 @@
 import { BlockNoteSchema, defaultStyleSpecs } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   createReactStyleSpec,

examples/06-collaboration/01-partykit/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import YPartyKitProvider from "y-partykit/provider";

examples/06-collaboration/02-liveblocks/App.tsx

@@ -1,3 +1,4 @@
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { createClient } from "@liveblocks/client";

examples/vanilla-js/react-vanilla-custom-blocks/App.tsx

@@ -4,6 +4,7 @@ import {
   defaultBlockSpecs,
   defaultProps,
 } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx

@@ -3,6 +3,7 @@ import {
   createInlineContentSpec,
   defaultInlineContentSpecs,
 } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 

examples/vanilla-js/react-vanilla-custom-styles/App.tsx

@@ -3,6 +3,7 @@ import {
   createStyleSpec,
   defaultStyleSpecs,
 } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
   FormattingToolbar,

packages/core/package.json

@@ -37,6 +37,10 @@
     "./style.css": {
       "import": "./dist/style.css",
       "require": "./dist/style.css"
+    },
+    "./fonts/inter.css": {
+      "import": "./src/fonts/inter.css",
+      "require": "./src/fonts/inter.css"
     }
   },
   "scripts": {

packages/core/src/editor/editor.css

@@ -1,4 +1,3 @@
-@import url("../assets/fonts-inter.css");
 @import url("prosemirror-tables/style/tables.css");
 
 .bn-editor {